umobile development strategies
DESCRIPTION
uMobile community call covering development strategy and campus integration options.TRANSCRIPT
![Page 1: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/1.jpg)
uMobile DevelopmentMarch 15, 2012
![Page 2: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/2.jpg)
uMobile Overview
![Page 3: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/3.jpg)
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
![Page 4: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/4.jpg)
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
![Page 5: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/5.jpg)
![Page 6: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/6.jpg)
Choosing a Distribution
• uPortal
• Includes mobile framework and skin
• Can power the native app
• uMobile
• Branch of uPortal codebase
• Adds additional modules, test data
![Page 7: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/7.jpg)
uMobile Content
![Page 8: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/8.jpg)
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
![Page 9: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/9.jpg)
Calendar
• Read-only calendar aggregator
• iCal, CalDAV, XML, Bedework, Exchange
• API for custom integrations
• Allows for delegated authentication / credential replay
• Role-based feed distribution
![Page 10: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/10.jpg)
News
• Read-only news aggregator
• RSS / Atom feeds
• Role-based feed distribution
![Page 11: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/11.jpg)
Search
• Portlet registry
• Directory search results
• Google Search Appliance
![Page 12: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/12.jpg)
Directory
• Uses uPortal’s person directory configuration
• Permissions control visibility of users, user attributes
![Page 13: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/13.jpg)
Videos
• Displays recent posts by a single YouTube author
• Configure author name in portlet definition
![Page 14: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/14.jpg)
Map
• Custom XSD defines map data format
• Name, geocoordinates, search keys, categories, campuses
• Include static JSON file of location data
![Page 15: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/15.jpg)
Courses
• Merges multiple data sources
• Supported LMSs
• In-progress DAOs for Sakai and Moodle
• Looking for collaborators
![Page 16: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/16.jpg)
Campus Life
![Page 17: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/17.jpg)
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>
![Page 18: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/18.jpg)
Custom Content
![Page 19: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/19.jpg)
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
![Page 20: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/20.jpg)
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
![Page 21: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/21.jpg)
Web-based module content
Portal / native app provides top-level
navigation
Web-based Module Layout
![Page 22: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/22.jpg)
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
![Page 23: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/23.jpg)
IFrame Content
![Page 24: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/24.jpg)
Web Proxy
• Proxy an external website
• Recommendations
• Design specifically for web proxy view
• Use portal CSS styles
• Avoid AJAX to prevent XSS restrictions
![Page 25: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/25.jpg)
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>
![Page 26: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/26.jpg)
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
![Page 27: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/27.jpg)
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
![Page 28: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/28.jpg)
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
![Page 29: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/29.jpg)
jQuery Mobile
![Page 30: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/30.jpg)
jQuery Mobile Skinning
![Page 31: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/31.jpg)
Controller
Model
Mobile ViewDesktop View
View Resolver
Providing Multiple Views
![Page 32: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/32.jpg)
Example: Calendar Portlet
Mobile
Column
MobileMobile
Maximized
![Page 33: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/33.jpg)
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
![Page 34: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/34.jpg)
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; }
}
![Page 35: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/35.jpg)
New Item Count
• Number indicates “new” items associated with a module
• Invites users to visit a module
• Set via a portlet response property
![Page 36: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/36.jpg)
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; }
}
![Page 37: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/37.jpg)
Search Integration
• New search API in uPortal 4
• Based on JSR-286 events
![Page 38: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/38.jpg)
Search Integration
• Portlet responds to search event with domain-specific results
• https://wiki.jasig.org/display/UPM40/Using+the+new+Search+API
![Page 39: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/39.jpg)
Notifications Integration
• On uMobile 1.3 roadmap
• Publish notifications to drop-down panel in native app
![Page 40: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/40.jpg)
More Resources
![Page 41: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/41.jpg)
uMobile Roadmap
• https://wiki.jasig.org/display/umobile/uMobile+1.2+%28Phase+3%29+Roadmap
![Page 42: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/42.jpg)
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
![Page 43: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/43.jpg)
Documentation
• uMobile YouTube
• http://youtube.com/jasigumobile
• jQuery Mobile
• http://jquerymobile.com/test/
![Page 44: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/44.jpg)
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
![Page 45: uMobile Development Strategies](https://reader036.vdocuments.net/reader036/viewer/2022081400/555a503ad8b42ad56a8b4ba6/html5/thumbnails/45.jpg)
Questions?