Mobile Seminar Overview

uMobile Seminar
Jen Bourey

Atlanta Jasig-Sakai Conference
June 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

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 speciﬁc to my campus?

Consider diverse audiences

Visitors
Recruits
Students
Faculty
Staff
Alumni

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

Overall Development Style

Create well-deﬁned integration APIs
Support personalized content, multiple sources
Support common data formats (iCal, RSS)
If no standard exists, deﬁne 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 conﬁguration
Permissions control visibility
of users, user attributes

Videos

Displays recent posts by a single
YouTube author
Conﬁgure author name in portlet
deﬁnition

Map

Custom XSD deﬁnes map data
format
Name, geocoordinates,
search keys, categories,
campuses
Include static JSON ﬁle of
location data

Courses

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

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">
</laundromat>

<laundromat name="Berkeley" location-code="BK">
</laundromat>

</laundromat-list>

Type Advantages

External Website via
• Chose any language / framework
IFrame or Web Proxy
• Manage outside of portal
framework

• Well-deﬁned 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

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

Native components
provide navigation

WebView presents
markup from portal

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

Web Proxy

Proxy an external website
Recommendations
Design speciﬁcally 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-deﬁned development model
Assures modules will work across uMobile versions

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 ﬁrst helps keep your interface
focused and simple

Single View Markup
Template

<div class="fl-widget portlet portlet-content" role="section" data-role="content">


<div class="fl-widget-content portlet-body" role="main">


<div id="${n}search" class="portlet-section" role="region">

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

<p>Hello World!</p>

</div>

</div>

</div>

</div>

Device-Speciﬁc 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

Multiple Views
Controller

View Resolver Model

Desktop Mobile
View View

Calendar Views
Desktop
in-page

Tablet

Phone

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 Agent
private 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));
}
}

@Override
public 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 Name
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" };

@Override
public 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;
}

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
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 Conﬁguration

jQM is loaded *very* early
To alter default conﬁguration, must include a script
*before* loading jQM

jQM uPortal-Level
Conﬁguration

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

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

jQM + Fluid

The trick: allow jQM to modify markup
Example: YouTube portlet

jQM-only Markup Template


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

Optimizing JS/CSS Libraries
Reduce browser trafﬁc as much as possible
Minify
GZip
Cache
Use Jasig ﬁlters
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

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

Notiﬁcations Integration

On uMobile 1.3 roadmap
Publish notiﬁcations to drop-down panel in native app

Role-based Content
Use existing campus roles to drive personalized
content
Potential data sources
LDAP, Active Directory, Grouper
Local (app-speciﬁc) group deﬁnitions
Attribute-based ad-hoc groups
Use roles to distribute both module list and content
within modules

Disabling Content in Mobile
Theme

“hideFromMobile” global CPD preference
Removes portlet during structure transform
Set via portlet administration menu or portlet deﬁnition
ﬁle

Adding mobile-only
fragments

UserAgentProﬁleMapper distributes fragments by user
agent
Use to distribute fragments just to mobile users
Can’t combine with role-based rules :-(

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

Jasig Portlet Archetype
Quickly create a new portlet project
Project structure and spring conﬁg
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

Speciﬁc to uPortal and uPortal 4
Allows deployment directly from portlet directory
Performs pluto-ﬁcation 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, miniﬁcation, and caching of JS/
CSS
Useful for development and debugging
Don’t do in a production portal!

SASS watch goal

Compiles SASS ﬁles and copies to tomcat whenever a
SASS source ﬁle is edited
Useful for skin development and debugging

Spooﬁng 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

Logging Transformations

log4j.properties

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

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 ﬁle
Can include other javascript ﬁles

Titanium Documentation

http://developer.appcelerator.com/documentation
Includes APIs, Getting Started guide
For API, use PDF, not web

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

Conﬁguring uMobile

Most settings in conﬁg.js
Base portal URL
Authentication method
Person directory information
Emergency contact numbers

Skinning the Native App

Controlled by style.js
CSS-like javascript ﬁle provides style attributes for new
objects

Module Icons

Map modules to icons by fname in conﬁg.js
Need multiple versions for various resolutions

Localizing uMobile
Messages in localization.js
Simple dictionary of translations
Conﬁgure default language in conﬁg.js
In the future, maybe get default locale from portal?
Using the messages
app.localDictionary.translatedTextStringKey

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

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

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 conﬁg and set icon

uMobile
Server

Request data from Return location
uPortal map service data as JSON

Present native components
uMobile based on portal data

App

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 Certiﬁcate to sign applications for
testing on devices
A Development Provisioning Proﬁle 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 certiﬁcate 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

Layout Support
Native App Platform
Investigating PhoneGap as an option
Multiple Layouts / User
Requires ﬁx to uPortal codebase
Development item for 4.1
Add mobile theme layout editing

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

Questions?

Want to make something? :-)

Mobile Seminar Overview

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Mobile Seminar Overview

Similaire à Mobile Seminar Overview (20)

Plus de Jennifer Bourey

Plus de Jennifer Bourey (6)

Dernier

Dernier (20)

Mobile Seminar Overview