• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
uMobile Preconference Seminar

uMobile Preconference Seminar



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

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



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    uMobile Preconference Seminar uMobile Preconference Seminar Presentation Transcript

    • uMobile SeminarJen BoureyAtlanta Jasig-Sakai ConferenceJune 10, 2012
    • 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
    • Going Mobile
    • What’s Different? User Interface Screen size Touchscreen interactions Performance Bandwidth Processing power Content Overlap with existing apps
    • Touchscreen InteractionsTapTouchPinchSwipe
    • Additional HardwareAccelerometerCameraMicrophone
    • Common Themes to DateStudent or visitor-focusedCater to campus life use cases News, events Maps, transportation Maybe some course featuresOften no authentication or personalization
    • 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 to my campus?
    • 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 modules, RESTful data to native app Based on uPortal
    • 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
    • Choosing a Distribution uPortal Includes mobile framework and skin Can power the native app uMobile Branch of uPortal codebase Adds additional modules, test data
    • Adding Content
    • uMobile Content
    • 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
    • Calendar Read-only calendar aggregator iCal, CalDAV, XML, Bedework, Exchange API for custom integrations Allows for delegated authentication / credential replay Role-based feed distribution
    • 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 oflocation data
    • 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.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>
    • Custom Content
    • 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
    • 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
    • Native componentsprovide navigationWebView presentsmarkup from portal
    • External ContentLeverage existing mobile investmentAllow departments to develop and control their owncontentEnable web-based development in other frameworksInclude external content via WebView, IFrame,WebProxy
    • 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
    • IFrame Content
    • Web ProxyProxy an external websiteRecommendations Design specifically 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 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
    • Mobile Portlet UIs
    • Tailoring Mobile Views
    • 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
    • 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>
    • 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
    • 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-agnosticPotential for mismatch between theme and portlet
    • 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; } } }
    • 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 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;}
    • jQuery Mobile
    • 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
    • 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.js $(document).bind("mobileinit", function(){ $.extend( $.mobile , { ajaxEnabled: false, ajaxFormsEnabled: false }); });
    • 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 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 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>
    • 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>
    • Improving Performance
    • 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
    • ETagsString marks version of a page/resourceBrowser only re-downloads if the tags don’t matchUse Spring’s ShallowETagHeaderFilter to automaticallyset ETags
    • uMobile Integration
    • 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; }}
    • New Item CountNumber indicates “new”items associated with amoduleInvites users to visit a moduleSet via a portlet responseproperty
    • 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
    • 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, Grouper Local (app-specific) group definitions Attribute-based ad-hoc groupsUse roles to distribute both module list and contentwithin modules
    • Disabling Content in MobileTheme “hideFromMobile” global CPD preference Removes portlet during structure transform Set via portlet administration menu or portlet definition file
    • Adding mobile-onlyfragmentsUserAgentProfileMapper distributes fragments by useragentUse to distribute fragments just to mobile usersCan’t combine with role-based rules :-(
    • Skinning uMobile
    • 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
    • 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 views Resources https://wiki.jasig.org/display/UMM/Using+the +uMobile+Portlet+Archetype http://www.youtube.com/jasigumobile
    • 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
    • Disabling AggregationTurn off all aggregation, minification, and caching of JS/CSSUseful for development and debuggingDon’t do in a production portal!
    • SASS watch goalCompiles SASS files and copies to tomcat whenever aSASS source file is editedUseful for skin development and debugging
    • 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
    • Firefox User Agent
    • Safari User Agent
    • 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
    • Native App Development
    • Titanium AppceleratorJavaScript platform for creating mobile appsCompiles OS-independent JS into Android and iPhoneprojectsOpen source Apache 2 licensed project
    • 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, not web
    • Getting Started
    • 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
    • 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 Emergency contact numbers
    • 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 In the future, maybe get default locale from portal? Using the messages app.localDictionary.translatedTextStringKey
    • Adding External Sitesconfig.js UPM.LOCAL_MODULES.twitter = { title: Twitter, fname: twitter, url: http://mobile.twitter.com/searches? q=jasigsakai12, externalModule: true };
    • Overriding Portletsconfig.js UPM.LOCAL_MODULES.directory = { title: directory, fname: directory, iconUrl: icons/directory.png, doesRequireLayout: true, window: directory };
    • 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
    • uMobile ServerRequest data from Return locationuPortal 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 Certificate to sign applications for testing on devices A Development Provisioning Profile 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 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
    • 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
    • The Future
    • 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
    • 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/display/UPM40/HomeJasig Portlet Developer Space https://wiki.jasig.org/display/PLT/Portlet +Development
    • 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+Mailing +Lists
    • Questions?Want to make something? :-)