This document provides an overview of the uMobile mobile application development framework. It discusses the uMobile application server, which serves as an administrative console and provides REST APIs and modules to native mobile apps. It also covers the Titanium-based native app codebase, content modules like calendar, directory, and campus life examples. It describes options for custom content like external websites accessed via iframe or web proxy. Finally, it discusses mobile view techniques like jQuery Mobile and checking the theme to determine if a request is from a mobile device.
3. uMobile Application Server
• Presents browser-based mobile experience
• Serves as an administrative console
• Provides web-based modules, RESTful data to
native app
• Based on uPortal
4. Native App Codebase
• Based on Titanium Appcelerator
• JavaScript-based platform-independent development
framework
• Compile shared codebase to iPhone and Android
applications with native controls
• Open source under the Apache 2.0 License
5.
6. Choosing a Distribution
• uPortal
• Includes mobile framework and skin
• Can power the native app
• uMobile
• Branch of uPortal codebase
• Adds additional modules, test data
8. Overall Development Style
• Create well-defined integration APIs
• Support personalized content, multiple sources
• Support common data formats (iCal, RSS)
• If no standard exists, define our own XSD
• Allow custom implementations
9. Calendar
• Read-only calendar aggregator
• iCal, CalDAV, XML, Bedework,
Exchange
• API for custom integrations
• Allows for delegated
authentication / credential
replay
• Role-based feed distribution
10. News
• Read-only news aggregator
• RSS / Atom feeds
• Role-based feed distribution
19. Type Advantages
External Website via • Chose any language / framework
IFrame or Web Proxy • Manage outside of portal
framework
• Well-defined API
JSR-168 / JSR-286 • Share views w/ desktop portal
Portlet • Take advantage of portal services
such as auth and roles
• Access to native device services
Native Module • Potential performance
improvements
20. Web-based vs. Native
• Web-based modules
• Allow sharing code with web views
• Easier to update and deploy
• Native framework
• Young framework with quickly changing APIs
• Frameworks are changing quickly, want to leave
options open
22. IFrame Publishing Type
• Rendered as
• Desktop browser: include external site via IFrame
• Mobile browser: link to external site
• Native app: include in web view
• Examples
• Transit, library in default uMobile dataset
24. Web Proxy
• Proxy an external website
• Recommendations
• Design specifically for web proxy view
• Use portal CSS styles
• Avoid AJAX to prevent XSS restrictions
26. Custom Portlets
• Add mobile view layer to JSR-286 portlets
• New projects can use Jasig portlet archetype
• Creates skeleton maven project with mobile JSPs
• https://wiki.jasig.org/display/UMM/Using+the+uMobile
+Portlet+Archetype
• http://www.youtube.com/jasigumobile
27. Device-Specific Views
• Often need a different feature or interface on one
platform
• Separate layout / CSS for desktop, tablet, mobile
• Mouse vs. Touch-based interactions
• Want to share backend logic where possible
• Business logic
• Controllers
28. View Layer: jQuery Mobile
• Easily create mobile-friendly views
• More lightweight
• Fairly new project, though growing quickly
• Works with jQuery framework
• Adds touch-based events like tap, swipe, pinch
• MIT or GPL 2
31. Controller
Model
View Resolver
Desktop View Mobile View
Providing Multiple Views
32. Column
Maximized
Mobile
Example: Calendar Portlet
33. Is it Mobile?
• Parse user agent
• User agent available as request header
• Potential for mismatch between device and preferred
version
• Can use WURFL or parse manually
• Make decisions based on theme name
34. Checking the Theme
public class ThemeNameViewSelectorImpl implements IViewSelector {
protected static final String THEME_NAME_PROPERTY = "themeName";
protected static final String MOBILE_THEMES_KEY = "mobileThemes";
protected static final String[] MOBILE_THEMES_DEFAULT = new String[]{ "UniversalityMobile" };
protected final Log logger = LogFactory.getLog(getClass());
public boolean isMobile(PortletRequest request) {
String[] mobileThemes = request.getPreferences().getValues(MOBILE_THEMES_KEY, MOBILE_THEMES_DEFAULT);
String themeName = request.getProperty(THEME_NAME_PROPERTY);
// if no theme name can be found, just assume the request is for a
// desktop client
if (themeName == null) {
logger.debug("No theme name found, assuming desktop environment");
return false;
}
// otherwise, determine if the theme name matches one of the known
// mobile themes
for (String theme : mobileThemes) {
if (themeName.equals(theme)) {
logger.debug("Theme name " + themeName + " matches configured list of mobile themes");
return true;
}
}
logger.debug("No match found for theme name " + themeName + ", assuming desktop environment");
return false;
}
}
35. New Item Count
• Number indicates “new”
items associated with a
module
• Invites users to visit a
module
• Set via a portlet response
property
36. Setting New Item Counts
public class MinimizedStateHandlerInterceptor extends HandlerInterceptorAdapter {
@Autowired(required = true)
private ICoursesDao coursesDao;
@Override
public boolean preHandleRender(RenderRequest request, RenderResponse response, Object handler)
throws Exception {
if (WindowState.MINIMIZED.equals(request.getWindowState())) {
CourseSummaryWrapper summary = coursesDao.getSummary(request);
int newCount = summary.getNewUpdateCount();
response.setProperty("newItemCount", String.valueOf(newCount));
return false;
}
return true;
}
}