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.

1. uMobile Development
March 15, 2012

2. uMobile Overview

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

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

7. uMobile Content

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

11. Search
• Portlet registry
• Directory search results
• Google Search
Appliance

12. Directory
• Uses uPortal’s person
directory configuration
• Permissions control
visibility of users, user
attributes

13. Videos
• Displays recent posts by a
single YouTube author
• Configure author name in
portlet definition

14. Map
• Custom XSD defines map
data format
• Name, geocoordinates,
search keys, categories,
campuses
• Include static JSON file of
location data

15. Courses
• Merges multiple data
sources
• Supported LMSs
• In-progress DAOs for Sakai
and Moodle
• Looking for collaborators

16. Campus Life

17. Sample Campus Life Data
<laundromat-list xmlns="https://source.jasig.org/schemas/portlet/laundry"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="https://source.jasig.org/schemas/portlet/laundry ../xsd/laundry.xsd">
<laundromat name="Saybrook" location-code="SY">
<machine-type key="Washer" message-key="laundry.type.washer"
icon-key="Washer" available="5" total="12" />
<machine-type key="Dryer" message-key="laundry.type.dryer"
icon-key="Dryer" available="5" total="12" />
</laundromat>
<laundromat name="Branford" location-code="BR">
<machine-type key="Washer" message-key="laundry.type.washer"
icon-key="Washer" available="2" total="10" />
<machine-type key="Dryer" message-key="laundry.type.dryer"
icon-key="Dryer" available="10" total="15" />
</laundromat>
<laundromat name="Berkeley" location-code="BK">
<machine-type key="Washer" message-key="laundry.type.washer"
icon-key="Washer" available="10" total="12" />
<machine-type key="Dryer" message-key="laundry.type.dryer"
icon-key="Dryer" available="3" total="8" />
</laundromat>
</laundromat-list>

18. Custom Content

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

21. Portal / native app
provides top-level
navigation
Web-based module
content
Web-based Module Layout

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

23. IFrame Content

24. Web Proxy
• Proxy an external website
• Recommendations
• Design specifically for web proxy view
• Use portal CSS styles
• Avoid AJAX to prevent XSS restrictions

25. Advanced CMS
<div class="portlet">
<div class="portlet-content" data-role="content">
<ul data-role="listview">
<li data-role="list-divider">Fish!</li>
<li>Red Fish</li>
<li>Blue Fish</li>
</ul>
</div>
</div>

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

29. jQuery Mobile

30. jQuery Mobile Skinning

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;
}
}

37. Search Integration
• New search API in
uPortal 4
• Based on JSR-286
events

38. Search Integration
• Portlet responds to search event with domain-
specific results
• https://wiki.jasig.org/display/UPM40/Using+the
+new+Search+API

39. Notifications Integration
• On uMobile 1.3 roadmap
• Publish notifications to drop-down panel in native
app

40. More Resources

41. uMobile Roadmap
• https://wiki.jasig.org/display/umobile/uMobile+1.2+
%28Phase+3%29+Roadmap

42. Documentation
• uMobile Manual
• https://wiki.jasig.org/display/UMM/Manual+Home
• uPortal 4 Manual
• https://wiki.jasig.org/display/UPM40/Home
• Jasig Portlet Developer Space
• https://wiki.jasig.org/display/PLT/Portlet+Development

43. Documentation
• uMobile YouTube
• http://youtube.com/jasigumobile
• jQuery Mobile
• http://jquerymobile.com/test/

44. Additional Resources
• Jasig mailing lists
• uMobile, portlet, and uPortal lists
• https://wiki.jasig.org/display/JSG/Jasig+Mailing+Lists
• Jasig / Sakai Conference
• June 10 - 15 2012
• http://www.jasig.org/jasig-sakai-conference-2012

45. Questions?