uMobile DevelopmentMarch 15, 2012

uMobile Overview

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

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

Choosing a Distribution

• uPortal

• Includes mobile framework and skin

• Can power the native app

• uMobile

• Branch of uPortal codebase

• Adds additional modules, test data

uMobile Content

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

Calendar

• Read-only calendar aggregator

• iCal, CalDAV, XML, Bedework, Exchange

• API for custom integrations

• Allows for delegated authentication / credential replay

• Role-based feed distribution

News

• Read-only news aggregator

• RSS / Atom feeds

• Role-based feed distribution

Search

• Portlet registry

• Directory search results

• Google Search Appliance

Directory

• Uses uPortal’s person directory configuration

• Permissions control visibility of users, user attributes

Videos

• Displays recent posts by a single YouTube author

• Configure author name in portlet definition

Map

• Custom XSD defines map data format

• Name, geocoordinates, search keys, categories, campuses

• Include static JSON file of location data

Courses

• Merges multiple data sources

• Supported LMSs

• In-progress DAOs for Sakai and Moodle

• Looking for collaborators

Campus Life

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>

Custom Content

Type Advantages

External Website via IFrame or Web Proxy

• Chose any language / framework• Manage outside of portal

framework

JSR-168 / JSR-286Portlet

• Well-defined API• Share views w/ desktop portal• Take advantage of portal services

such as auth and roles

Native Module• Access to native device services• Potential performance

improvements

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

Web-based module content

Portal / native app provides top-level

navigation

Web-based Module Layout

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

IFrame Content

Web Proxy

• Proxy an external website

• Recommendations

• Design specifically for web proxy view

• Use portal CSS styles

• Avoid AJAX to prevent XSS restrictions

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>

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

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

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

jQuery Mobile

jQuery Mobile Skinning

Controller

Model

Mobile ViewDesktop View

View Resolver

Providing Multiple Views

Example: Calendar Portlet

Mobile

Column

MobileMobile

Maximized

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

Checking the Themepublic 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; }

}

New Item Count

• Number indicates “new” items associated with a module

• Invites users to visit a module

• Set via a portlet response property

Setting New Item Countspublic 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; }

}

Search Integration

• New search API in uPortal 4

• Based on JSR-286 events

Search Integration

• Portlet responds to search event with domain-specific results

• https://wiki.jasig.org/display/UPM40/Using+the+new+Search+API

Notifications Integration

• On uMobile 1.3 roadmap

• Publish notifications to drop-down panel in native app

More Resources

uMobile Roadmap

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

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

Documentation

• uMobile YouTube

• http://youtube.com/jasigumobile

• jQuery Mobile

• http://jquerymobile.com/test/

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

Questions?