uMobile Preconference Seminar

uMobile SeminarJen Bourey

Atlanta Jasig-Sakai ConferenceJune 10, 2012

About Unicon

Trusted Partner since 1993

Expertise in Open Source Software for Education

Professional Services for uPortal, Sakai, CAS, Shib, Grouper, and soon Student Success Planner

Innovative Cooperative Support Program

Going Mobile

What’s Different?

User Interface

Screen size

Touchscreen interactions

Performance

Bandwidth

Processing power

Content

Overlap with existing apps

Touchscreen Interactions

Tap

Touch

Pinch

Swipe

Additional Hardware

Accelerometer

Camera

Microphone

Common Themes to Date

Student or visitor-focused

Cater to campus life use cases

News, events

Maps, transportation

Maybe some course features

Often no authentication or personalization

How to get started?

Adopt what’s easy and build from there

Build additional pieces as time permits

Questions to Ask

What content needs to be accessed on the go?

What changes frequently?

What do visitors need?

What’s specific to my campus?

Consider diverse audiences

Visitors

Recruits

Students

Faculty

Staff

Alumni

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

Adding Content

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. NativeWeb-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

WebView presents

markup from portal

Native components

provide navigation

External Content

Leverage existing mobile investment

Allow departments to develop and control their own content

Enable web-based development in other frameworks

Include external content via WebView, IFrame, WebProxy

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>

Portlet-based Content

JSR-168 / JSR-286 portlet standards

Enables collaboration beyond uMobile project

Google Gadget integration

Alternate language modules

Provides a familiar, well-defined development model

Assures modules will work across uMobile versions

Mobile Portlet UIs

Tailoring Mobile Views

Using a Single View

Combine desktop and mobile markup to display the same content to both clients

Best for simple content

Reasonable strategy for developing new portlets

Developing for mobile first helps keep your interface focused and simple

Single View Markup Template<!-- Portlet --><div class="fl-widget portlet portlet-content" role="section" data-role="content">

<!-- Portlet Body --> <div class="fl-widget-content portlet-body" role="main"> <!-- Portlet Section --> <div id="${n}search" class="portlet-section" role="region">

<div class="portlet-section-body">

<p>Hello World!</p>

</div>

</div> </div>

</div>

Device-Specific ViewsOften 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

Multiple ViewsController

View Resolver

Desktop View

Mobile View

Model

Calendar Views

Phone

Desktopin-page

MobileMobile

Tablet

Parsing the User Agent

User agent available as request property

Strategy in uPortal 3.2 and below

Maybe more portal-agnostic

Potential for mismatch between theme and portlet

Parsing the User Agentprivate List<Pattern> mobileDeviceRegexes = null;

/** * Set a list of regex patterns for user agents which should be considered * to be mobile devices. * * @param patterns */public void setMobileDeviceRegexes(List<String> patterns) { this.mobileDeviceRegexes = new ArrayList<Pattern>(); for (String pattern : patterns) { this.mobileDeviceRegexes.add(Pattern.compile(pattern)); }}

@Overridepublic boolean isMobile(PortletRequest request) { String userAgent = request.getProperty("user-agent"); // check to see if this is a mobile device if (this.mobileDeviceRegexes != null && userAgent != null) { for (Pattern regex : this.mobileDeviceRegexes) { if (regex.matcher(userAgent).matches()) { return true; } } }

Checking Reported Theme

Theme is provided by portal as a request property

Requires mapping theme name -> mobile in portlet

Used by uPortal 4+

Using the Theme Nameprotected 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" };

@Overridepublic boolean isMobile(PortletRequest request) { String[] mobileThemes = request.getPreferences().getValues(MOBILE_THEMES_KEY, MOBILE_THEMES_DEFAULT); String themeName = request.getProperty(THEME_NAME_PROPERTY); if (themeName == null) { return false; } for (String theme : mobileThemes) { if (themeName.equals(theme)) { return true; } } return false;}

jQuery Mobile

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 Documentation

URL

View in a mobile browser to use as an example

Hint: Get markup by removing hash tag

Not Using All Features

jQuery Mobile Theming

AJAX Navigation

jQM Configuration

jQM is loaded *very* early

To alter default configuration, must include a script *before* loading jQM

jQM uPortal-Level Configuration

$(document).bind("mobileinit", function(){ $.extend( $.mobile , { ajaxEnabled: false, ajaxFormsEnabled: false });});

uportal-war/src/main/webapp/media/skins/muniversality/common/javascript/up-mobile-config.js

jQM + Fluid

The trick: allow jQM to modify markup

Example: YouTube portlet

jQM-only Markup Template

<div class="portlet">

<div data-role="header" class="titlebar portlet-titlebar"> <a href="javascript:;" data-role="button" data-icon="back" data-inline="true">Back</a> <h2 class="title news-reader-feed-title">Title</h2> </div>

<div data-role="content" class="portlet-content">

<p>Hello World!</p>

</div>

</div>

Using the Feed Class

<div class="portlet"> <div data-role="content" class="portlet-content"> <ul data-role="listview" class="feed"> <c:forEach items="${ feed.entries }" var="entry"> <li> <a href="${ entry.link }"> <img src="${ entry.imageUrl }"/> <h3 class="title">${ entry.title }</h3> <p> ${ entry.description.value } </p> </a> </li> </c:forEach> </ul> </div></div>

Including jQM in a Portlet

<script type="text/javascript">$("[data-role=page]").live('pagebeforecreate',function(event){ return false;});</script><script type="text/javascript" src="<rs:resourceURL value="/rs/jquery-mobile/1.0a3/jquery.mobile-1.0a3.js"/>"></script>

Improving Performance

Optimizing JS/CSS LibrariesReduce browser traffic as much as possible

Minify

GZip

Cache

Use Jasig filters

Only apply long-term cache headers to resources that will really, truly never change

ETags

String marks version of a page/resource

Browser only re-downloads if the tags don’t match

Use Spring’s ShallowETagHeaderFilter to automatically set ETags

uMobile Integration

Minimized Window State

public class MinimizedStateHandlerInterceptor extends HandlerInterceptorAdapter {

@Override public boolean preHandleRender(RenderRequest request, RenderResponse response, Object handler) throws Exception {

if (WindowState.MINIMIZED.equals(request.getWindowState())) { return false; } return true; }

}

New Item Count

Number indicates “new” items associated with a module

Invites users to visit a module

Set via a portlet response property

Linking to Other Portlets

Create links to other portlets, services

Examples:

/s/person?id=student

/s/location?id=DH

Search Integration

New search API in uPortal 4

Based on JSR-286 events

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

Module Distribution

Role-based ContentUse existing campus roles to drive personalized content

Potential data sources

LDAP, Active Directory, Grouper

Local (app-specific) group definitions

Attribute-based ad-hoc groups

Use roles to distribute both module list and content within modules

“hideFromMobile” global CPD preference

Removes portlet during structure transform

Set via portlet administration menu or portlet definition file

Disabling Content in Mobile Theme

Adding mobile-only fragments

UserAgentProfileMapper distributes fragments by user agent

Use to distribute fragments just to mobile users

Can’t combine with role-based rules :-(

Skinning uMobile

User Profiles

Maps to a theme, structure, skin, and layout

One user can have multiple profiles, but only one layout

By default two profiles: mobile and desktop

Can create / configure through data import

User Profile Selection

Controlled by IProfileMapper API

By default selected by user agent regexes

Configure in userContext.xml

Home Screen View

Either folder-based or grid-based view

Icons set via portlet administration tool

Development Tips

Jasig Portlet ArchetypeQuickly create a new portlet project

Project structure and spring config

Desktop and mobile views

Resources

https://wiki.jasig.org/display/UMM/Using+the+uMobile+Portlet+Archetype

http://www.youtube.com/jasigumobile

Maven deploy-war plugin

Specific to uPortal and uPortal 4

Allows deployment directly from portlet directory

Performs pluto-fication and deploys to tomcat

mvn -Plocaldev -Dmaven.tomcat.home=/path/to/tomcat install org.jasig.portal:maven-uportal-plugin:deploy-war

Disabling Aggregation

Turn off all aggregation, minification, and caching of JS/CSS

Useful for development and debugging

Don’t do in a production portal!

SASS watch goal

Compiles SASS files and copies to tomcat whenever a SASS source file is edited

Useful for skin development and debugging

Spoofing User Agents

Change browser’s reported “user agent” string

Describes browser type and version, machine, etc.

View portal’s response to particular device

Helpful for testing skin, browser mappings, and portlet UIs

Firefox User Agent

Safari User Agent

Logging Transformations

## Uncomment to see the XML at various stages in the rendering pipelinelog4j.logger.org.jasig.portal.rendering.LoggingStAXComponent=DEBUG, Rlog4j.additivity.org.jasig.portal.rendering.LoggingStAXComponent=false

log4j.properties

Native App Development

Titanium Appcelerator

JavaScript platform for creating mobile apps

Compiles OS-independent JS into Android and iPhone projects

Open source Apache 2 licensed project

Titanium APIs

Views

Network

Map

Contacts

Anatomy of a Project

Driven by a main app.js file

Can include other javascript files

Titanium Documentation

http://developer.appcelerator.com/documentation

Includes APIs, Getting Started guide

For API, use PDF, not web

Getting Started

Preparing for Native Development

Install Titanium

Lots of extra steps for Windows :-(

Install an Emulator

Android on all platforms

iPhone on OS X only

Install Jasig uMobile SDK

Check out the project

Some Tips

Troubleshooting: When in doubt, clean!

for the iPhone, delete build/iphone

Turn log level up to TRACE

Configuring uMobile

Most settings in config.js

Base portal URL

Authentication method

Person directory information

Emergency contact numbers

Skinning the Native App

Controlled by style.js

CSS-like javascript file provides style attributes for new objects

Module Icons

Map modules to icons by fname in config.js

Need multiple versions for various resolutions

Localizing uMobile

Messages in localization.js

Simple dictionary of translations

Configure default language in config.js

In the future, maybe get default locale from portal?

Using the messages

app.localDictionary.translatedTextStringKey

Adding External Sites

UPM.LOCAL_MODULES.twitter = { title: 'Twitter', fname: 'twitter', url: 'http://mobile.twitter.com/searches?q=jasigsakai12', externalModule: true};

config.js

Overriding Portlets

UPM.LOCAL_MODULES.directory = { title: 'directory', fname: 'directory', iconUrl: 'icons/directory.png', doesRequireLayout: true, window: 'directory'};

config.js

Adding Native Modules

Follow tutorial at https://wiki.jasig.org/display/UPC/Build+a+Native+Module+-+Hello+World

High-level steps

Create controller

Add facade to window manager

Add to config and set icon

Present native components based on portal data

Request data fromuPortal map service

Return location data as JSON

uMobileServer

uMobileApp

Testing

Real actual phone

Best way to test, need to do this before releasing

Should consider multiple versions

Emulator

iPhone: OS X only

Android: all platforms

Testing: iOS

Need an iOS Developer Program Account ($99/year)

A Development Certificate to sign applications for testing on devices

A Development Provisioning Profile to install on devices for testing

Publishing: iOS

Create publishing certificates and profiles

Set up the app in iTunes Connect

Create a new Bundle ID

Generate a Distribution Profile

Validate and submitting the app binary through Xcode

Publishing: Android

Set up an Android Developer account for ($25)

Create a self-signed certificate to sign your application

Compile your app for distribution in Titanium Developer

Zipalign your APK

Set up and upload your app in Android Market Developer Console

Tips

Make sure to handle network errors and other exceptions

Use at least a 1.0 version number

Leave lots of time to publish to the Apple store

The Future

Layout Support

Native App Platform

Investigating PhoneGap as an option

Multiple Layouts / User

Requires fix to uPortal codebase

Development item for 4.1

Add mobile theme layout editing

More Resources

uMobile Roadmap

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

DocumentationuMobile 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

Questions?

Want to make something? :-)