The document summarizes a seminar on developing mobile applications using uMobile. It discusses uMobile's application server and native app codebase, which is based on Titanium Appcelerator. It covers various aspects of developing content for uMobile, including web-based and native modules, portlet-based content, and campus life data. It also provides an overview of jQuery Mobile and tips for optimizing performance, integrating with uPortal, and skinning the uMobile application.
2. 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
7. 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
8. How to get started?
Adopt what’s easy and build from there
Build additional pieces as time permits
9. 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?
12. 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
13. 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
14.
15. Choosing a Distribution
uPortal
Includes mobile framework and skin
Can power the native app
uMobile
Branch of uPortal codebase
Adds additional modules, test data
18. 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
19. Calendar
Read-only calendar aggregator
iCal, CalDAV, XML, Bedework,
Exchange
API for custom integrations
Allows for delegated
authentication / credential replay
Role-based feed distribution
29. 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
30. 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
32. 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
33. 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
35. Web Proxy
Proxy an external website
Recommendations
Design specifically for web proxy view
Use portal CSS styles
Avoid AJAX to prevent XSS restrictions
37. 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
40. 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
42. 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
43. Multiple Views
Controller
View Resolver Model
Desktop Mobile
View View
45. 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
46. 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;
}
}
}
47. Checking Reported Theme
Theme is provided by portal as a request property
Requires mapping theme name -> mobile in portlet
Used by uPortal 4+
48. 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;
}
50. 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
61. Optimizing JS/CSS Libraries
Reduce 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
62. 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
70. Role-based Content
Use 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
71. Disabling Content in Mobile
Theme
“hideFromMobile” global CPD preference
Removes portlet during structure transform
Set via portlet administration menu or portlet definition
file
74. 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
75. User Profile Selection
Controlled by IProfileMapper API
By default selected by user agent regexes
Configure in userContext.xml
76. Home Screen View
Either folder-based or grid-based view
Icons set via portlet administration tool
78. Jasig Portlet Archetype
Quickly 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
79. 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
80. Disabling Aggregation
Turn off all aggregation, minification, and caching of JS/
CSS
Useful for development and debugging
Don’t do in a production portal!
81. SASS watch goal
Compiles SASS files and copies to tomcat whenever a
SASS source file is edited
Useful for skin development and debugging
82. 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
85. 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
87. Titanium Appcelerator
JavaScript platform for creating mobile apps
Compiles OS-independent JS into Android and iPhone
projects
Open source Apache 2 licensed project
92. 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
94. Configuring uMobile
Most settings in config.js
Base portal URL
Authentication method
Person directory information
Emergency contact numbers
95. Skinning the Native App
Controlled by style.js
CSS-like javascript file provides style attributes for new
objects
96. Module Icons
Map modules to icons by fname in config.js
Need multiple versions for various resolutions
97. 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
100. 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
101. uMobile
Server
Request data from Return location
uPortal map service data as JSON
Present native components
uMobile based on portal data
App
102. 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
103. 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
104. 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
105. 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
106. 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
108. 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