uMobile Development Strategies

2,487 views

Published on

uMobile community call covering development strategy and campus integration options.

Published in: Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,487
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
34
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

uMobile Development Strategies

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

×