uMobile SeminarJen BoureyAtlanta Jasig-Sakai ConferenceJune 10, 2012
About UniconTrusted Partner since 1993Expertise in Open Source Software for EducationProfessional Services for uPortal, Sa...
Going Mobile
What’s Different? User Interface   Screen size   Touchscreen interactions Performance   Bandwidth   Processing power Conte...
Touchscreen InteractionsTapTouchPinchSwipe
Additional HardwareAccelerometerCameraMicrophone
Common Themes to DateStudent or visitor-focusedCater to campus life use cases  News, events  Maps, transportation  Maybe s...
How to get started?Adopt what’s easy and build from thereBuild additional pieces as time permits
Questions to AskWhat content needs to be accessed on the go?What changes frequently?What do visitors need?What’s specific t...
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...
Native App CodebaseBased on Titanium Appcelerator  JavaScript-based platform-independent  development framework  Compile s...
Choosing a Distribution uPortal   Includes mobile framework and skin   Can power the native app uMobile   Branch of uPorta...
Adding Content
uMobile Content
Overall Development StyleCreate well-defined integration APIs  Support personalized content, multiple sourcesSupport common...
Calendar Read-only calendar aggregator   iCal, CalDAV, XML, Bedework,   Exchange   API for custom integrations Allows for ...
NewsRead-only news aggregatorRSS / Atom feedsRole-based feed distribution
SearchPortlet registryDirectory search resultsGoogle 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
MapCustom XSD defines map dataformat  Name, geocoordinates,  search keys, categories,  campusesInclude static JSON file oflo...
CoursesMerges multiple data sourcesSupported 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....
Custom Content
Type                      Advantages External Website via                      • Chose any language / frameworkIFrame or W...
Web-based vs. NativeWeb-based modules  Allow sharing code with web views  Easier to update and deployNative framework  You...
Native componentsprovide navigationWebView presentsmarkup from portal
External ContentLeverage existing mobile investmentAllow departments to develop and control their owncontentEnable web-bas...
IFrame Publishing TypeRendered as  Desktop browser: include external site via IFrame  Mobile browser: link to external sit...
IFrame Content
Web ProxyProxy an external websiteRecommendations  Design specifically for web proxy view  Use portal CSS styles  Avoid AJA...
Advanced CMS<div class="portlet">    <div class="portlet-content" data-role="content">        <ul data-role="listview">   ...
Portlet-based ContentJSR-168 / JSR-286 portlet standards  Enables collaboration beyond uMobile projectGoogle Gadget integr...
Mobile Portlet UIs
Tailoring Mobile Views
Using a Single ViewCombine desktop and mobile markup to display thesame content to both clientsBest for simple contentReas...
Single View MarkupTemplate<!-- Portlet --><div class="fl-widget portlet portlet-content" role="section" data-role="content...
Device-Specific ViewsOften need a different feature or interface on oneplatform  Separate layout / CSS for desktop, tablet,...
Multiple Views       Controller     View Resolver           Model Desktop            Mobile  View              View
Calendar Views          Desktop          in-page                    Tablet  Phone
Parsing the User AgentUser agent available as request propertyStrategy in uPortal 3.2 and belowMaybe more portal-agnosticP...
Parsing the User Agentprivate List<Pattern> mobileDeviceRegexes = null;/**  * Set a list of regex patterns for user agents...
Checking Reported Theme Theme is provided by portal as a request property Requires mapping theme name -> mobile in portlet...
Using the Theme Nameprotected static final String THEME_NAME_PROPERTY = "themeName";protected static final String MOBILE_T...
jQuery Mobile
View Layer: jQuery MobileEasily create mobile-friendly viewsMore lightweightFairly new project, though growing quicklyWork...
jQuery Mobile
jQuery MobileDocumentationURL  View in a mobile browser to use as an exampleHint: Get markup by removing hash tag
Not Using All Features jQuery Mobile Theming AJAX Navigation
jQM ConfigurationjQM is loaded *very* early  To alter default configuration, must include a script  *before* loading jQM
jQM uPortal-Level   Configurationuportal-war/src/main/webapp/media/skins/muniversality/common/javascript/up-mobile-config.j...
jQM + FluidThe trick: allow jQM to modify markupExample: YouTube portlet
jQM-only Markup Template<div class="portlet">     <div data-role="header" class="titlebar portlet-titlebar">         <a hr...
Using the Feed Class<div class="portlet">	    <div data-role="content" class="portlet-content">	    		    	    <ul data-ro...
Including jQM in a Portlet<script type="text/javascript">$("[data-role=page]").live(pagebeforecreate,function(event){  ret...
Improving Performance
Optimizing JS/CSS LibrariesReduce browser traffic as much as possible  Minify  GZip  CacheUse Jasig filters  Only apply long...
ETagsString marks version of a page/resourceBrowser only re-downloads if the tags don’t matchUse Spring’s ShallowETagHeade...
uMobile Integration
Minimized Window Statepublic class MinimizedStateHandlerInterceptor extends HandlerInterceptorAdapter {    @Override    pu...
New Item CountNumber indicates “new”items associated with amoduleInvites users to visit a moduleSet via a portlet response...
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 +ne...
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 personalizedcontentPotential data sources  LDAP, Active Directory, Gr...
Disabling Content in MobileTheme “hideFromMobile” global CPD preference Removes portlet during structure transform Set via...
Adding mobile-onlyfragmentsUserAgentProfileMapper distributes fragments by useragentUse to distribute fragments just to mob...
Skinning uMobile
User ProfilesMaps to a theme, structure, skin, and layoutOne user can have multiple profiles, but only one layoutBy default ...
User Profile Selection Controlled by IProfileMapper API By default selected by user agent regexes Configure in userContext.xml
Home Screen ViewEither folder-based or grid-based viewIcons set via portlet administration tool
Development Tips
Jasig Portlet Archetype Quickly create a new portlet project   Project structure and spring config   Desktop and mobile vie...
Maven deploy-war pluginSpecific to uPortal and uPortal 4Allows deployment directly from portlet directory  Performs pluto-fi...
Disabling AggregationTurn off all aggregation, minification, and caching of JS/CSSUseful for development and debuggingDon’t...
SASS watch goalCompiles SASS files and copies to tomcat whenever aSASS source file is editedUseful for skin development and ...
Spoofing User AgentsChange browser’s reported “user agent” string  Describes browser type and version, machine, etc.View po...
Firefox User Agent
Safari User Agent
Logging Transformationslog4j.properties ## Uncomment to see the XML at various stages in the rendering pipeline log4j.logg...
Native App Development
Titanium AppceleratorJavaScript platform for creating mobile appsCompiles OS-independent JS into Android and iPhoneproject...
Titanium APIsViewsNetworkMapContacts
Anatomy of a ProjectDriven by a main app.js fileCan include other javascript files
Titanium Documentationhttp://developer.appcelerator.com/documentationIncludes APIs, Getting Started guideFor API, use PDF,...
Getting Started
Preparing for NativeDevelopment Install Titanium   Lots of extra steps for Windows :-( Install an Emulator   Android on al...
Some TipsTroubleshooting: When in doubt, clean!  for the iPhone, delete build/iphoneTurn log level up to TRACE
Configuring uMobileMost settings in config.js  Base portal URL  Authentication method  Person directory information  Emergen...
Skinning the Native AppControlled by style.jsCSS-like javascript file provides style attributes for newobjects
Module IconsMap modules to icons by fname in config.jsNeed multiple versions for various resolutions
Localizing uMobile Messages in localization.js   Simple dictionary of translations Configure default language in config.js  ...
Adding External Sitesconfig.js   UPM.LOCAL_MODULES.twitter = {       title: Twitter,       fname: twitter,       url: http...
Overriding Portletsconfig.js   UPM.LOCAL_MODULES.directory = {       title: directory,       fname: directory,       iconU...
Adding Native ModulesFollow tutorial at https://wiki.jasig.org/display/UPC/Build+a+Native+Module+-+Hello+WorldHigh-level s...
uMobile               ServerRequest data from     Return locationuPortal map service   data as JSON                       ...
Testing Real actual phone   Best way to test, need to do this before releasing   Should consider multiple versions Emulato...
Testing: iOS Need an iOS Developer Program Account ($99/year) A Development Certificate to sign applications for testing on...
Publishing: iOS Create publishing certificates and profiles Set up the app in iTunes Connect Create a new Bundle ID Generate...
Publishing: Android Set up an Android Developer account for ($25) Create a self-signed certificate to sign your application...
Tips  Make sure to handle network errors and other  exceptions  Use at least a 1.0 version number  Leave lots of time to p...
The Future
Layout SupportNative App Platform  Investigating PhoneGap as an optionMultiple Layouts / User  Requires fix to uPortal code...
More Resources
uMobile Roadmaphttps://wiki.jasig.org/display/umobile/uMobile+1.2+%28Phase+3%29+Roadmap
DocumentationuMobile Manual  https://wiki.jasig.org/display/UMM/Manual+HomeuPortal 4 Manual  https://wiki.jasig.org/displa...
DocumentationuMobile YouTube  http://youtube.com/jasigumobilejQuery Mobile  http://jquerymobile.com/test/
Additional ResourcesJasig mailing lists  uMobile, portlet, and uPortal lists  https://wiki.jasig.org/display/JSG/Jasig+Mai...
Questions?Want to make something? :-)
uMobile Preconference Seminar
uMobile Preconference Seminar
Upcoming SlideShare
Loading in …5
×

uMobile Preconference Seminar

846 views

Published on

Jasig-Sakai 2012 preconference seminar, covering uMobile installation, configuration, and development.

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

No Downloads
Views
Total views
846
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

uMobile Preconference Seminar

  1. 1. uMobile SeminarJen BoureyAtlanta Jasig-Sakai ConferenceJune 10, 2012
  2. 2. About UniconTrusted Partner since 1993Expertise in Open Source Software for EducationProfessional Services for uPortal, Sakai, CAS, Shib,Grouper, and soon Student Success PlannerInnovative Cooperative Support Program
  3. 3. Going Mobile
  4. 4. What’s Different? User Interface Screen size Touchscreen interactions Performance Bandwidth Processing power Content Overlap with existing apps
  5. 5. Touchscreen InteractionsTapTouchPinchSwipe
  6. 6. Additional HardwareAccelerometerCameraMicrophone
  7. 7. Common Themes to DateStudent or visitor-focusedCater to campus life use cases News, events Maps, transportation Maybe some course featuresOften no authentication or personalization
  8. 8. How to get started?Adopt what’s easy and build from thereBuild additional pieces as time permits
  9. 9. Questions to AskWhat content needs to be accessed on the go?What changes frequently?What do visitors need?What’s specific to my campus?
  10. 10. Consider diverse audiences Visitors Recruits Students Faculty Staff Alumni
  11. 11. uMobile Overview
  12. 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. 13. Native App CodebaseBased 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. 14. Choosing a Distribution uPortal Includes mobile framework and skin Can power the native app uMobile Branch of uPortal codebase Adds additional modules, test data
  15. 15. Adding Content
  16. 16. uMobile Content
  17. 17. Overall Development StyleCreate well-defined integration APIs Support personalized content, multiple sourcesSupport common data formats (iCal, RSS)If no standard exists, define our own XSDAllow custom implementations
  18. 18. Calendar Read-only calendar aggregator iCal, CalDAV, XML, Bedework, Exchange API for custom integrations Allows for delegated authentication / credential replay Role-based feed distribution
  19. 19. NewsRead-only news aggregatorRSS / Atom feedsRole-based feed distribution
  20. 20. SearchPortlet registryDirectory search resultsGoogle Search Appliance
  21. 21. Directory Uses uPortal’s person directory configuration Permissions control visibility of users, user attributes
  22. 22. Videos Displays recent posts by a single YouTube author Configure author name in portlet definition
  23. 23. MapCustom XSD defines map dataformat Name, geocoordinates, search keys, categories, campusesInclude static JSON file oflocation data
  24. 24. CoursesMerges multiple data sourcesSupported LMSs In-progress DAOs for Sakai and Moodle Looking for collaborators
  25. 25. Campus Life
  26. 26. 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>
  27. 27. Custom Content
  28. 28. Type Advantages External Website via • Chose any language / frameworkIFrame or Web Proxy • Manage outside of portal framework • Well-defined APIJSR-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
  29. 29. Web-based vs. NativeWeb-based modules Allow sharing code with web views Easier to update and deployNative framework Young framework with quickly changing APIs Frameworks are changing quickly, want to leave options open
  30. 30. Native componentsprovide navigationWebView presentsmarkup from portal
  31. 31. External ContentLeverage existing mobile investmentAllow departments to develop and control their owncontentEnable web-based development in other frameworksInclude external content via WebView, IFrame,WebProxy
  32. 32. IFrame Publishing TypeRendered as Desktop browser: include external site via IFrame Mobile browser: link to external site Native app: include in web viewExamples Transit, library in default uMobile dataset
  33. 33. IFrame Content
  34. 34. Web ProxyProxy an external websiteRecommendations Design specifically for web proxy view Use portal CSS styles Avoid AJAX to prevent XSS restrictions
  35. 35. 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>
  36. 36. Portlet-based ContentJSR-168 / JSR-286 portlet standards Enables collaboration beyond uMobile projectGoogle Gadget integrationAlternate language modulesProvides a familiar, well-defined development modelAssures modules will work across uMobile versions
  37. 37. Mobile Portlet UIs
  38. 38. Tailoring Mobile Views
  39. 39. Using a Single ViewCombine desktop and mobile markup to display thesame content to both clientsBest for simple contentReasonable strategy for developing new portlets Developing for mobile first helps keep your interface focused and simple
  40. 40. Single View MarkupTemplate<!-- 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>
  41. 41. Device-Specific ViewsOften need a different feature or interface on oneplatform Separate layout / CSS for desktop, tablet, mobile Mouse vs. Touch-based interactionsWant to share backend logic where possible Business logic Controllers
  42. 42. Multiple Views Controller View Resolver Model Desktop Mobile View View
  43. 43. Calendar Views Desktop in-page Tablet Phone
  44. 44. Parsing the User AgentUser agent available as request propertyStrategy in uPortal 3.2 and belowMaybe more portal-agnosticPotential for mismatch between theme and portlet
  45. 45. 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; } } }
  46. 46. Checking Reported Theme Theme is provided by portal as a request property Requires mapping theme name -> mobile in portlet Used by uPortal 4+
  47. 47. 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;}
  48. 48. jQuery Mobile
  49. 49. View Layer: jQuery MobileEasily create mobile-friendly viewsMore lightweightFairly new project, though growing quicklyWorks with jQuery framework Adds touch-based events like tap, swipe, pinchMIT or GPL 2
  50. 50. jQuery Mobile
  51. 51. jQuery MobileDocumentationURL View in a mobile browser to use as an exampleHint: Get markup by removing hash tag
  52. 52. Not Using All Features jQuery Mobile Theming AJAX Navigation
  53. 53. jQM ConfigurationjQM is loaded *very* early To alter default configuration, must include a script *before* loading jQM
  54. 54. jQM uPortal-Level Configurationuportal-war/src/main/webapp/media/skins/muniversality/common/javascript/up-mobile-config.js $(document).bind("mobileinit", function(){ $.extend( $.mobile , { ajaxEnabled: false, ajaxFormsEnabled: false }); });
  55. 55. jQM + FluidThe trick: allow jQM to modify markupExample: YouTube portlet
  56. 56. 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>
  57. 57. 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>
  58. 58. 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>
  59. 59. Improving Performance
  60. 60. Optimizing JS/CSS LibrariesReduce browser traffic as much as possible Minify GZip CacheUse Jasig filters Only apply long-term cache headers to resources that will really, truly never change
  61. 61. ETagsString marks version of a page/resourceBrowser only re-downloads if the tags don’t matchUse Spring’s ShallowETagHeaderFilter to automaticallyset ETags
  62. 62. uMobile Integration
  63. 63. Minimized Window Statepublic 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; }}
  64. 64. New Item CountNumber indicates “new”items associated with amoduleInvites users to visit a moduleSet via a portlet responseproperty
  65. 65. Linking to Other Portlets Create links to other portlets, services Examples: /s/person?id=student /s/location?id=DH
  66. 66. Search Integration New search API in uPortal 4 Based on JSR-286 events https://wiki.jasig.org/ display/UPM40/Using+the +new+Search+API
  67. 67. Notifications Integration On uMobile 1.3 roadmap Publish notifications to drop-down panel in native app
  68. 68. Module Distribution
  69. 69. Role-based ContentUse existing campus roles to drive personalizedcontentPotential data sources LDAP, Active Directory, Grouper Local (app-specific) group definitions Attribute-based ad-hoc groupsUse roles to distribute both module list and contentwithin modules
  70. 70. Disabling Content in MobileTheme “hideFromMobile” global CPD preference Removes portlet during structure transform Set via portlet administration menu or portlet definition file
  71. 71. Adding mobile-onlyfragmentsUserAgentProfileMapper distributes fragments by useragentUse to distribute fragments just to mobile usersCan’t combine with role-based rules :-(
  72. 72. Skinning uMobile
  73. 73. User ProfilesMaps to a theme, structure, skin, and layoutOne user can have multiple profiles, but only one layoutBy default two profiles: mobile and desktopCan create / configure through data import
  74. 74. User Profile Selection Controlled by IProfileMapper API By default selected by user agent regexes Configure in userContext.xml
  75. 75. Home Screen ViewEither folder-based or grid-based viewIcons set via portlet administration tool
  76. 76. Development Tips
  77. 77. 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
  78. 78. Maven deploy-war pluginSpecific to uPortal and uPortal 4Allows deployment directly from portlet directory Performs pluto-fication and deploys to tomcatmvn -Plocaldev -Dmaven.tomcat.home=/path/to/tomcat install org.jasig.portal:maven-uportal-plugin:deploy-war
  79. 79. Disabling AggregationTurn off all aggregation, minification, and caching of JS/CSSUseful for development and debuggingDon’t do in a production portal!
  80. 80. SASS watch goalCompiles SASS files and copies to tomcat whenever aSASS source file is editedUseful for skin development and debugging
  81. 81. Spoofing User AgentsChange browser’s reported “user agent” string Describes browser type and version, machine, etc.View portal’s response to particular deviceHelpful for testing skin, browser mappings, and portletUIs
  82. 82. Firefox User Agent
  83. 83. Safari User Agent
  84. 84. Logging Transformationslog4j.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
  85. 85. Native App Development
  86. 86. Titanium AppceleratorJavaScript platform for creating mobile appsCompiles OS-independent JS into Android and iPhoneprojectsOpen source Apache 2 licensed project
  87. 87. Titanium APIsViewsNetworkMapContacts
  88. 88. Anatomy of a ProjectDriven by a main app.js fileCan include other javascript files
  89. 89. Titanium Documentationhttp://developer.appcelerator.com/documentationIncludes APIs, Getting Started guideFor API, use PDF, not web
  90. 90. Getting Started
  91. 91. Preparing for NativeDevelopment 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
  92. 92. Some TipsTroubleshooting: When in doubt, clean! for the iPhone, delete build/iphoneTurn log level up to TRACE
  93. 93. Configuring uMobileMost settings in config.js Base portal URL Authentication method Person directory information Emergency contact numbers
  94. 94. Skinning the Native AppControlled by style.jsCSS-like javascript file provides style attributes for newobjects
  95. 95. Module IconsMap modules to icons by fname in config.jsNeed multiple versions for various resolutions
  96. 96. 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
  97. 97. Adding External Sitesconfig.js UPM.LOCAL_MODULES.twitter = { title: Twitter, fname: twitter, url: http://mobile.twitter.com/searches? q=jasigsakai12, externalModule: true };
  98. 98. Overriding Portletsconfig.js UPM.LOCAL_MODULES.directory = { title: directory, fname: directory, iconUrl: icons/directory.png, doesRequireLayout: true, window: directory };
  99. 99. Adding Native ModulesFollow tutorial at https://wiki.jasig.org/display/UPC/Build+a+Native+Module+-+Hello+WorldHigh-level steps Create controller Add facade to window manager Add to config and set icon
  100. 100. uMobile ServerRequest data from Return locationuPortal map service data as JSON Present native components uMobile based on portal data App
  101. 101. 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
  102. 102. 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
  103. 103. 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
  104. 104. 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
  105. 105. 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
  106. 106. The Future
  107. 107. Layout SupportNative App Platform Investigating PhoneGap as an optionMultiple Layouts / User Requires fix to uPortal codebase Development item for 4.1Add mobile theme layout editing
  108. 108. More Resources
  109. 109. uMobile Roadmaphttps://wiki.jasig.org/display/umobile/uMobile+1.2+%28Phase+3%29+Roadmap
  110. 110. DocumentationuMobile Manual https://wiki.jasig.org/display/UMM/Manual+HomeuPortal 4 Manual https://wiki.jasig.org/display/UPM40/HomeJasig Portlet Developer Space https://wiki.jasig.org/display/PLT/Portlet +Development
  111. 111. DocumentationuMobile YouTube http://youtube.com/jasigumobilejQuery Mobile http://jquerymobile.com/test/
  112. 112. Additional ResourcesJasig mailing lists uMobile, portlet, and uPortal lists https://wiki.jasig.org/display/JSG/Jasig+Mailing +Lists
  113. 113. Questions?Want to make something? :-)

×