Going Mobile in uPortal

Transcript

1. Going Mobile With uPortal Dave Derderian Oakland University
2. Overview What's Built In Theming Who Sees Mobile User Agent Example Basic Mobile Portlet Development uPortal Mobile Solutions
3. Mobile Built In • uPortal Mobile Theme • Grid vs List View ◦ How to change • Apereo Mobile Portlets • Disabling uPortal Redirection
4. uPortal Mobile Theme Standard Simple / User Friendly Two Different Views Grid Listview
5. Grid vs List View
6. Changing Between Grid and List Views uportal-war/src/main/data/default_entities/ stylesheet-descriptor/ UniversalityMobile.stylesheet-descriptor.xml <stylesheet-parameter> <name>view</name> <default-value>list</default-value> <scope>PERSISTENT</scope> <description>Home screen view type</description> </stylesheet-parameter> $ ant data-import -Dfile=/path/to/file.xml
7. Apereo Mobile Portlets • Come with mobile theme already implemented • Little to no customization • Automatically displays correct view to users • Portlets: ◦ Announcements ◦ Calendar ◦ Courses Portlet ◦ Weather ◦ Map ◦ RSS ◦ Others I'm sure
8. Redirects Are Bad • Mostly screws up mobile apps • Doesn't allow devices to access necessary files ◦ /uPortal/layout.json Quick and Dirty fix: uportal-war/src/main/webapp/WEB-INF/web.xml <!-- COMMENT OUT <filter> <filter-name>remoteCookieCheckFilter</filter-name> <filter-class>org.springframework.web.filter.DelegatingFilterProxy</filter- class> </filter> --> <!-- COMMENT OUT <filter-mapping> <filter-name>remoteCookieCheckFilter</filter-name> <url-pattern>/Login</url-pattern> </filter-mapping> -->
9. Theming Change $c1:rgba(70, 130, 180, 1) $c1:rgba(255, 215, 0, 1) uPortal takes care of the rest CSS done through SASS Lastest Versions of uPortal include SASS Compiling Tweak _colors.scss muniversality
10. Theming
11. Who Sees Mobile? uPortal & User Agents Changing User Agents How to test on Desktop Example of Adding User Agents to uPortal
12. uPortal & User Agents User Agents Contained in HTTP header Contents vary between brower Browser has a distinctive user agent
13. uPortal & User Agents uPortal figures out which view to display Determined by User Agent string Hi, I'm Chrome on Linux I give you the desktop Hi, I'm Safari on iOS I give you the mobile
14. Changing User Agents Easy way it to use actual devices
15. Changing User Agents on Desktop Built in most major browsers Debugging Tools Chrome / Firefox extensions User Agent Switcher for Firefox User Agent Switcher for Chrome
16. Adding User Agents Example NINTENDO WII!
18. Adding User Agents to uPortal Find Device's User Agent http://whatsmyuseragent.com/
20. Adding User Agents to uPortal uPortal 4.0.* /uportal-war/src/main/resources/properties/contexts/ userContext.xml <bean id="userAgentProfileMapper" class="org.jasig.portal.layout. UserAgentProfileMapper"> <property name="mappings"> <list> <!-- Nintendo --> <bean class="org.jasig.portal.layout.UserAgentProfileMapper.Mapping"> <property name="pattern" value=".*Nintendo.*" /> <property name="profileName" value="mobileDefault" /> </bean> $ ant clean deploy-ear
21. Adding User Agents to uPortal uPortal 4.1+ /pom.xml <mobile.user.agent.regex> (.*iPhone.*)|(.*Android.*)|(.*IEMobile.*)|(.*Safari.*Pre.*)| (.*Nokia.*AppleWebKit.*)|(.*Black[Bb]erry.*)|(.*Opera Mobile.*)| (.*Windows Phone.*)|(.*Fennec.*)|(.*Minimo.*)|(.*Nintendo.*)| </mobile.user.agent.regex> $ ant clean deploy-ear
23. Basic Mobile Portlet Development Upgrading Portlets Icons mobileIcon / hideFromMobile Upgraded Weather / Courses / P2D Portlet(s) Upgraded OU Portlets to Mobile Minification JS/CSS (separate files) Tomcat gzip compression jQuery Mobile Collisions
24. Upgrading Portlets Two Options Create mobile view Create mobile icon
25. Upgrading Portlets to Mobile Option 1 S A M P L E C O D E
26. Upgrading Portlets to Mobile Option 1 Add List to application-Context.xml THIS IS A HORRIBLE IDEA!
27. Upgrading Portlets to Mobile Option 2 Use Jasig 286 Portlet Architecture in Maven $ mvn archetype:generate -DarchetypeGroupId=org. jasig.portlet.archetype - DarchetypeArtifactId=jsr286-archetype Includes mobile detection References all user agents in: mobile.user.agent.regex userContext.xml Transfer Old Portlet to New Portlet
28. Icons & Displaying Portlets
29. Minification Optional but highly recommended Make use of ResourceServer Enable Tomcat gzip Compression
30. jQuery Mobile uPortal Mobile View Great for making mobile views in portlets jQuery Mobile + jQuery Mobile = CONFLICT Using jQuery NoConflict with portlets Incorporating portlet namespaces
31. Avoiding Conflicts in jQuery Incorporate Portlet Namespace Unique for each portlet Prepend to identify HTML/CSS/JS Classes / Variables / IDs / Functions Added easily into JSP pages <c:set var="n"><portlet:namespace/></c:set> Variable ${n} can be referenced anywhere JSTL / HTML / JS / CSS Scope of ${n} is local!
32. Avoiding Conflicts in jQuery SERVER SIDE <script type="text/javascript"> var ${n} = {}; ${n}.jQuery = jQuery.noConflict(true); var $ = ${n}.jQuery; var ${n}data = eval('('+ '...' +')'); ${n}changeFinance(); ... </script>
33. Avoiding Conflicts in jQuery CLIENT SIDE <script type="text/javascript"> var Pluto_49_u26l1n12_4619_ = {}; Pluto_49_u26l1n12_4619_.jQuery = jQuery.noConflict(true); var $ = Pluto_49_u26l1n12_4619_.jQuery; var Pluto_49_u26l1n12_4619_data = eval('('+ ... +')'); Pluto_49_u26l1n12_4619_changeFinance(); ... </script>
34. uPortal Mobile Solutions uMobile Titanium Studio PhoneGap Oakland University Native Android App
35. uMobile Titanium Studio • Build using JS only • Great for JS developers • No Prior Experience with Java or Objective-C required • Must Learn New APIs • Custom Eclipse Based IDE • Extra Frameworks Optional • Closed Off • Build Once - Deploy Anywhere • SLOW - Abstraction Layer • NOT NATIVE PhoneGap • HTML / CSS / JS • Easy For Web Developers • No Prior Experience with Java or Objective-C required • No New APIs • IDE of Choice • Require Extra JS Frameworks • Opensourced (Apache Cordova) • Build Once - Deploy Anywhere • SLOW - Abstraction Layer • NOT NATIVE
36. uMobile - Titanium Studio
37. uMobile - Phone Gap
38. Oakland University Native Android App • Built entirely using Android SDK • Built off of existing uMobile ◦ RESTful API ◦ Responsive Design • No middle layer like Titanium/PhoneGap • Easily Customizable by changing URLs • No Apple iOS version (yet) • NATIVE
39. Search Integration Adding Search to mobile Future Implementation Currently incorporated to OU App
40. Tying In Other Services Incorporate Mobile Views CAS / Shibboleth "Forgot My Password" Page Admissions Mobile Website
41. 何か質問がありますか？ Questions?? Hai delle domande? tiene alguna pregunta? 질문이 있습니까? avez des questions?