Mobile Development with uPortal and Infusion
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Mobile Development with uPortal and Infusion

on

  • 1,562 views

A half-day, code-oriented workshop teaching developers how to build mobile applications using Infusion and the mobile Fluid Skinning System. Includes advice on performance optimization and techniques ...

A half-day, code-oriented workshop teaching developers how to build mobile applications using Infusion and the mobile Fluid Skinning System. Includes advice on performance optimization and techniques for using the open Web to reach more users on more devices.

Statistics

Views

Total Views
1,562
Views on SlideShare
1,562
Embed Views
0

Actions

Likes
0
Downloads
11
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

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.

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

Mobile Development with uPortal and Infusion Presentation Transcript

  • 1. Mobile Development with uPortal & Infusion Jen Bourey, Genius Portal Developer, Unicon Justin Obara, Fluid Infusion Product Manager, Adaptive Technology Resource Centre Colin Clark, Fluid Project Technical Lead, Adaptive Technology Resource Centre Tuesday, March 16, 2010
  • 2. Who is Fluid? http://fluidproject.org • Is an Open Source community of • Designers • Developers • Accessibility Experts • Helps other open communities • Consists of universities, museums, and individuals Tuesday, March 16, 2010
  • 3. What is Fluid Infusion? • Application Framework built on top of jQuery • Lightweight CSS Framework (FSS) • UI Components you can reuse and adapt • Open architecture: everything is configurable • Designed for Usability and Accessibility Tuesday, March 16, 2010
  • 4. Going Mobile Tuesday, March 16, 2010
  • 5. Big Question: What platforms should we support? Tuesday, March 16, 2010
  • 6. Everything? Tuesday, March 16, 2010
  • 7. Everything? Objective-C Java C++ Cocoa Touch Android SDK Carbide Tuesday, March 16, 2010
  • 8. Only One? Tuesday, March 16, 2010
  • 9. Only One? Tuesday, March 16, 2010
  • 10. Mobile: Embrace the Web • Phones now have great browsers built in • Web design is ubiquitous and familiar • Use standard HTML, CSS, and JavaScript • Blends seamless into existing sites • Thin nativefeatures (camera, bluetooth) interactive apps provide access to Tuesday, March 16, 2010
  • 11. Mobile Web apps HTML, CSS, JS Browser Tuesday, March 16, 2010
  • 12. The Open Web Today • Multi-touch gestures • Audio and video • Vector graphics and animation • Great accessibility • All work on mobile today! • Stable and deeply interoperable • Everyone knows it Tuesday, March 16, 2010
  • 13. A Growing Approach Google Latitude Tuesday, March 16, 2010
  • 14. Mobile Web Pain Points • Sparse documentation • Few successful Open Source examples • Existing frameworks have limitations Tuesday, March 16, 2010
  • 15. Sparse Documentation Tuesday, March 16, 2010
  • 16. Existing Frameworks jQTouch iUI WebApp.Net Magic Framework • Reusability of content? • JavaScript Footprint? • Flexibility of themes? Tuesday, March 16, 2010
  • 17. Hybrid Apps • Most platforms have support for embedding browsers in native apps • Can render user interfaces with HTML • Write all your code in JavaScript • Access native hardware with a bridge Tuesday, March 16, 2010
  • 18. PhoneGap Tuesday, March 16, 2010
  • 19. Tuesday, March 16, 2010
  • 20. Migrating to Mobile • Great mobile apps are carefully designed • The transition to mobile takes time • Incremental: reuse as much as possible • Re-skin, re-style, and adapt existing UIs Tuesday, March 16, 2010
  • 21. How Infusion Can Help • Loose coupling DOM Agnosticism • Unobtrusive and template-driven • Fast and flexible styling with FSS Tuesday, March 16, 2010
  • 22. DOM Agnosticism Component code is maximally unaware of the details of the markup layout that it operates on. Tuesday, March 16, 2010
  • 23. DOM Binder Relaxes the relationship between code and markup Tuesday, March 16, 2010
  • 24. DOM Binder • Uses named selectors • Explicit selectors never appear in code • Code is free of baked dependences on markup • Attached to a component with call to fluid.initView Tuesday, March 16, 2010
  • 25. DOM Binder configuration fluid.defaults(“fliquor.imageViewer”, { selectors: { searchButton: “.flc-fliquor-searchButton”, searchBox: “.flc-fliquor-search”, template: “.flc-fliquor-template”, images: “.flc-fliquor-images”, } }); usage that.locate(“searchBox”).fluid(“activatable”, that.search); that.locate(“searchButton”).click(function (evt) { that.search(); return false; }); Tuesday, March 16, 2010
  • 26. Unobtrusive Templates • Components render using pure HTML templates • Code shouldn’t break if the markup changes • Code is not in markup, markup is not in code Tuesday, March 16, 2010
  • 27. HTML Template <body class="flc-fliquor fl-theme-coal"> <div class="fl-centered fl-navbar fl-table search-bar"> ... <div class="fl-centered results"> <ol class="flc-fliquor-images fl-list-menu fl-list-thumbnails fl-thumbnails-expanded"> <li class="flc-fliquor-template"> <a href="#"> <span class="wrapper"> <span class="flc-fliquor-item-title fl-fliquor-item-title">Title</span> <img title="Title" alt="Alt" src="#" class="fl-icon" /> </span> </a> </li> </ol> </div> ... </body> Tuesday, March 16, 2010
  • 28. Infusion Templates • Fully customizable • As semantic as possible • Advanced accessibility added via JavaScript • Presentation class names separated from Javascript selector names Tuesday, March 16, 2010
  • 29. Rapid CSS using FSS • Modular, extensible class-name CSS system • Easy to read class names • Plays nice with other CSS systems (jQuery themes, other frameworks, etc) • Modularity means it’s meant for you to hack • Lots of support, fully cross browser Tuesday, March 16, 2010
  • 30. FSS Applied Reset normalize the little things for a consistent starting point Tuesday, March 16, 2010
  • 31. FSS Applied Layout placement & containers Tuesday, March 16, 2010
  • 32. FSS Applied Themes style, colors and graphics Tuesday, March 16, 2010
  • 33. Mobile FSS • Highly focused on target platforms • Follows basic touchscreen UI guidelines from Apple and Android dev centres • Repurposes FSS class names, enabling multi- platform content Tuesday, March 16, 2010
  • 34. Mobile FSS Applied .fl-theme-coal .fl-theme-iphone = Tuesday, March 16, 2010
  • 35. Make it your own .fl-theme-myTheme Tuesday, March 16, 2010
  • 36. Case Study: Fluid Engage Tuesday, March 16, 2010
  • 37. Fluid Engage • Open source collaboration with museums • Visitor engagement: learn and contribute • Use phones visitors bring into the museum • Mobile apps and in-gallery kiosks • All built with open source Web technology Tuesday, March 16, 2010
  • 38. Our Mobile Approach • No hard intrusions on your content • Don’t subvert good Web idioms • Your choice: native-like or webbish Tuesday, March 16, 2010
  • 39. Infusion Mobile • mFSS: themes for iPhone, Android, more • Components designed for the mobile Web • ScreenNavigator: unobtrusive mobile navigation Tuesday, March 16, 2010
  • 40. Museum Components • Image Gallery • Podcasts and video • My Museum/My Collection • Comments, Discussion, Stories • Collection Browse and Search • Tagging? Tuesday, March 16, 2010
  • 41. Engage’s Architecture • Simple, lightweight, and approachable • JSON data feeds everywhere • Client-side markup rendering • Infusion wires it all together Tuesday, March 16, 2010
  • 42. Components + Services Artifact Component Artifact Data Feed 3"))&+) <=>?@*AB -)$*&".$ -)$*&".$/,!0"1+ !!!!"##!$%!&"'%()*$+, ,+0#!$%!&)*+0# ;<<=>!6=$?!.+0$()@ A09!%0!B"B+) Tagging Component 66CD!E!;DC6!.1 -)$*&".$!*1"7+ F*&$!%&!G*.?")#!H*88%I 2.8*.9":8+4 J%)+1!*B,(1!#%8%)!,*$! "1+$>!.%0,+.$+$()CCC !"#$!234 Tags Service %&$&'()$*+,-(.&,#*'/&$*"0$(*+,-(.+1222*254 3(44+,'$!264 561&(78&1+(!264 Image Gallery Component 9+0"'+1*(:-+;'$!254 Media Service Tuesday, March 16, 2010
  • 43. Devices Content/Collections Systems mFSS Exhibit Presenter Data Import Components Exhibit Data Feed Tuesday, March 16, 2010
  • 44. Kettle: Server-side JS • Built on top of the JSGI server spec • Don’t need lots of new APIs on server • Envjs provides a full browser • Infusion as application framework • Choose where markup gets rendered • Natural, familiardesigners for Web developers and environment Tuesday, March 16, 2010
  • 45. Code! https://source.fluidproject.org/svn/scratchpad/mobile-workshop/trunk/ Tuesday, March 16, 2010
  • 46. WebKit-Specific Features Tuesday, March 16, 2010
  • 47. Adding a Home Screen Icon <link rel="apple-touch-icon" href="engage-apple-touch-icon.png"/> • Adds the linked icon to the iPhone home screen • Icons must be 57 x 57 px • iPhone will add rounded corners & reflection for you Tuesday, March 16, 2010
  • 48. Run As a Webapp <meta name="apple-mobile-web-app-capable" content="yes" /> • Removes browser chrome • All page transitions will cause Safari to pen • Use Screen Navigator or window.location to intercept page transitions Tuesday, March 16, 2010
  • 49. Setting a fixed size <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> • Sets the width of page to screen size • Turns off zooming with pinch/pan Tuesday, March 16, 2010
  • 50. Removing Behaviour <style type="text/css"> <!—- * { -webkit-touch-callout: none; } --> </style> • Prevents opening links in a new window • Prevents saving images Tuesday, March 16, 2010
  • 51. Building with mFSS Tuesday, March 16, 2010
  • 52. mFSS: iPhone Theme <head> <link type="text/css" rel="stylesheet" href="fss-mobile-layout.css" /> <link type="text/css" rel="stylesheet" href="fss-mobile-theme-iphone.css" /> </head> <body class=”fl-theme-iphone”> </body> Tuesday, March 16, 2010
  • 53. mFSS: Android Theme <head> <link type="text/css" rel="stylesheet" href="fss-mobile-layout.css" /> <link type="text/css" rel="stylesheet" href="fss-mobile-theme-android.css" /> </head> <body class=”fl-theme-android”> </body> Tuesday, March 16, 2010
  • 54. mFSS: Desktop <head> <link type="text/css" rel="stylesheet" href="fss-layout.css" /> <link type="text/css" rel="stylesheet" href="fss-theme-rust.css" /> </head> <body class=”fl-theme-rust”> </body> Tuesday, March 16, 2010
  • 55. mFSS: Tabs <ul class="fl-tabs"> <li class="fl-tabs-active"> <a href="#">Go Back</a> </li>   <li> <a href="#">Go Back</a> </li>   <li> <a href="#">Go Back</a> </li> </ul> Tuesday, March 16, 2010
  • 56. mFSS: Buttons <a class="fl-button fl-button-white" href="../index.html"> Go Back </a> <a class="fl-button fl-button-green" href="../index.html"> Go Back </a> <a class="fl-button fl-button-blue" href="../index.html"> Go Back </a> <a class="fl-button fl-button-black" href="../index.html"> Go Back </a> Tuesday, March 16, 2010
  • 57. mFSS: Back Button <a href="../mobile.html" class="fl-button fl-backButton"> <span class="fl-button-inner">Back Button</span> </a> Tuesday, March 16, 2010
  • 58. mFSS: Lists <ul class="fl-list-menu"> <li> <a href="#">Link Text</a> </li>   <li> <a href="#">Link Text</a> </li>   <li> <a href="#">Link Text</a> </li> </ul> Tuesday, March 16, 2010
  • 59. mFSS: Image Grids <ul class="fl-list-menu fl-list-thumbnails fl-grid"> <li>   <a href="20.png">     <img class="fl-icon" src="20.png" alt="twisty icon" />     </a>   </li>   <li>   <a href="2.png">     <img class="fl-icon" src="2.jpg" alt="round icon" />     </a> </li> </ul> Tuesday, March 16, 2010
  • 60. Infusion Mobile Components Tuesday, March 16, 2010
  • 61. Mobile Components • Provide intuitive mobile interactions • Navigation List, Cabinet, Screen Navigator • A small but growing set: share yours! • Goal: use them on both mobile and desktop • Two key types: markup- and data-driven Tuesday, March 16, 2010
  • 62. Markup-Driven Components • Progressive Enhancement style of JavaScript • You provide the markup, we add the richness • No assumptions about your data or content Tuesday, March 16, 2010
  • 63. Cabinet Illustrated Tuesday, March 16, 2010
  • 64. About the Cabinet • Like an accordion... • Has the ability to open multiple “drawers” at once • Any HTML content can go inside • Helps keep a page simple by hiding things until the user wants to see them Tuesday, March 16, 2010
  • 65. Cabinet: Structure Drawer Tuesday, March 16, 2010
  • 66. Cabinet: Structure Drawer Handle Tuesday, March 16, 2010
  • 67. Cabinet: Structure Drawer Handle Content Tuesday, March 16, 2010
  • 68. Cabinet: Markup Drawer <div class=”flc-cabinet”> <div class="flc-cabinet-drawer"> <div class="flc-cabinet-handle"> Can Cats Drink Beer? </div> <div class="flc-cabinet-contents"> <!-- Your markup goes here --> </div> </div> </div> Tuesday, March 16, 2010
  • 69. Cabinet: Markup Drawer <div class=”flc-cabinet”> Handle <div class="flc-cabinet-drawer"> <div class="flc-cabinet-handle"> Can Cats Drink Beer? </div> <div class="flc-cabinet-contents"> <!-- Your markup goes here --> </div> </div> </div> Tuesday, March 16, 2010
  • 70. Cabinet: Markup Drawer <div class=”flc-cabinet”> Handle <div class="flc-cabinet-drawer"> <div class="flc-cabinet-handle"> Can Cats Drink Beer? </div> <div class="flc-cabinet-contents"> <!-- Your markup goes here --> </div> Content </div> </div> Tuesday, March 16, 2010
  • 71. Creating a Cabinet fluid.cabinet(“.flc-cabinet”, options); Tuesday, March 16, 2010
  • 72. Cabinet Options { events: { afterOpen: null, afterClose: null }, startOpen: false } Tuesday, March 16, 2010
  • 73. Model-Driven Rendering • Data feed-oriented • Model,View, no controller • You give us JSON, we render it for you • Template and styles are fully customizable Tuesday, March 16, 2010
  • 74. Navigation List Illustrated Tuesday, March 16, 2010
  • 75. Navigation List: Structure Component’s Container Tuesday, March 16, 2010
  • 76. Navigation List: Structure Component’s Container List Item Tuesday, March 16, 2010
  • 77. Navigation List: Structure Component’s Container List Item Thumbnail Tuesday, March 16, 2010
  • 78. Navigation List: Structure Component’s Container List Item Title Thumbnail Tuesday, March 16, 2010
  • 79. Navigation List: Markup <div class="flc-navigationList"> Component’s Container <ul class="flc-navigationList-listGroup fl-navigationList-container fl-list fl-list-menu fl-list-thumbnails">     <li class="flc-navigationList-items">         <div class="flc-navigationList-linkContainer">             <a class="flc-navigationList-link fl-engage-badged-thumbnail">                 <img class="flc-navigationList-image fl-icon"/>                 <div class="fl-navigationList-textContainer">                 <span class="flc-navigationList-titleText fl-navigationList-title"> Title </span> <span class="flc-navigationList-descriptionText fl-link-summary fl-navigationList-description"> Description </span>                 </div>                 </a>             </div>         </li> </ul> </div> Tuesday, March 16, 2010
  • 80. Navigation List: Markup <div class="flc-navigationList"> Component’s Container <ul class="flc-navigationList-listGroup fl-navigationList-container fl-list fl-list-menu fl-list-thumbnails">     <li class="flc-navigationList-items"> List item template         <div class="flc-navigationList-linkContainer">             <a class="flc-navigationList-link fl-engage-badged-thumbnail">                 <img class="flc-navigationList-image fl-icon"/>                 <div class="fl-navigationList-textContainer">                 <span class="flc-navigationList-titleText fl-navigationList-title"> Title </span> <span class="flc-navigationList-descriptionText fl-link-summary fl-navigationList-description"> Description </span>                 </div>                 </a>             </div>         </li> </ul> </div> Tuesday, March 16, 2010
  • 81. Navigation List: Markup <div class="flc-navigationList"> Component’s Container <ul class="flc-navigationList-listGroup fl-navigationList-container fl-list fl-list-menu fl-list-thumbnails">     <li class="flc-navigationList-items"> List item template         <div class="flc-navigationList-linkContainer">             <a class="flc-navigationList-link fl-engage-badged-thumbnail">                 <img class="flc-navigationList-image fl-icon"/>                 <div class="fl-navigationList-textContainer">                 <span class="flc-navigationList-titleText fl-navigationList-title"> Thumbnail Title </span> <span class="flc-navigationList-descriptionText fl-link-summary fl-navigationList-description"> Description </span>                 </div>                 </a>             </div>         </li> </ul> </div> Tuesday, March 16, 2010
  • 82. Navigation List: Markup <div class="flc-navigationList"> Component’s Container <ul class="flc-navigationList-listGroup fl-navigationList-container fl-list fl-list-menu fl-list-thumbnails">     <li class="flc-navigationList-items"> List item template         <div class="flc-navigationList-linkContainer">             <a class="flc-navigationList-link fl-engage-badged-thumbnail">                 <img class="flc-navigationList-image fl-icon"/>                 <div class="fl-navigationList-textContainer">                 <span class="flc-navigationList-titleText fl-navigationList-title"> Thumbnail Title Title </span> <span class="flc-navigationList-descriptionText fl-link-summary fl-navigationList-description"> Description </span>                 </div>                 </a>             </div>         </li> </ul> </div> Tuesday, March 16, 2010
  • 83. Navigation List: Markup <div class="flc-navigationList"> Component’s Container <ul class="flc-navigationList-listGroup fl-navigationList-container fl-list fl-list-menu fl-list-thumbnails">     <li class="flc-navigationList-items"> List item template         <div class="flc-navigationList-linkContainer">             <a class="flc-navigationList-link fl-engage-badged-thumbnail">                 <img class="flc-navigationList-image fl-icon"/>                 <div class="fl-navigationList-textContainer">                 <span class="flc-navigationList-titleText fl-navigationList-title"> Thumbnail Title Title </span> <span class="flc-navigationList-descriptionText fl-link-summary fl-navigationList-description"> Description </span>                 </div>                 </a>             </div>         </li> Description </ul> </div> Tuesday, March 16, 2010
  • 84. Nav List’s Model [{ image: “http://myServer.org/pic.png”, target: “/viewImage?pic=12345”, title: “My Great Picture!”, description: “A picture of my moustache.” }, { image: “http://myServer.org/anotherPic.png”, target: “/viewImage?pic=67890”, title: “This picture, not so good.”, description: “A picture of my cat.” }] Tuesday, March 16, 2010
  • 85. Domain Model: Flickr [{ "id":"4366552930", "owner":"29979136@N03", "secret":"30a7167c6a", "server":"2777", "farm":3, "title":"Town and Country Resort", "ispublic":1, "isfriend":0, "isfamily":0 }, { "id":"4365808141", "owner":"29979136@N03", "secret":"2c818b926e", "server":"4058", "farm":5, "title":"Resort Pool", "ispublic":1, "isfriend":0, "isfamily":0 }] Tuesday, March 16, 2010
  • 86. Transforming Your Model var imageURLTemplate = "http://farm%farm.static.flickr.com/%server/%id_%secret_m.jpg"; var userPageURLTemplate = "http://www.flickr.com/photos/%owner/%id"; var mapData = function (flickrData) { var navListModel = fluid.transform(flickrData.photos.photo, function (photo) { return { image: fluid.stringTemplate(imageURLTemplate, photo), target: fluid.stringTemplate(userPageURLTemplate, photo), title: photo.title }; }); }; Tuesday, March 16, 2010
  • 87. Creating a Nav List var templateURL = "../../../fluid-engage-core/components/” + “navigationList/html/” + “NavigationList.html .flc-navigationList"; // Load Nav List’s HTML template via AJAX container.load(templateURL, null, function () { // When the template has loaded, instantiate a Nav List var navList = fluid.navigationList(container, { model: mapData(jasigFlickrPhotos) }); }); Tuesday, March 16, 2010
  • 88. Optimizing Performance Tuesday, March 16, 2010
  • 89. Will My Web Site Scale? Yes... ...and no. Tuesday, March 16, 2010
  • 90. Will My Web Site Scale? 6.290 5.121 4.990 3.216 2.780 2.151 jQuery Unconcatenated Concatenated Wi-Fi 3G jQuery Unconcatenated Concatenated Wi-Fi 2.151 3.216 2.78 3G 5.121 6.29 4.99 Tuesday, March 16, 2010
  • 91. Mobile Performance Factors • Great browsers make us forget the CPU • At heart, mobile apps are heavily CPU-bound • Connection limitations: • Often slow (EDGE vs. 3G vs. WiFi) • Often flakey Tuesday, March 16, 2010
  • 92. Performance Heuristics • Connection speed: minimize server roundtrips • CPU speed: minimize JavaScript evaluation Tuesday, March 16, 2010
  • 93. Device Constraints How fast is your desktop computer? Tuesday, March 16, 2010
  • 94. Mobile Device Constraints iPhone 3G 412 MHz iPhone 3GS 600 MHz Android G1 528 MHz Motorola Droid 550 MHz Nexus One 1 GHz Tuesday, March 16, 2010
  • 95. Minimize Server Roundtrips • Minify JavaScript and CSS • Concatenate JavaScript resources • Use image sprites Tuesday, March 16, 2010
  • 96. Minimize JavaScript eval() • Your code will start up way slower on mobile • Don’t load the same JS over and over again • Carefully consider dependencies • Use an all-in-one page style: Screen Navigator Tuesday, March 16, 2010
  • 97. Using Screen Navigator Tuesday, March 16, 2010
  • 98. Screen Navigator • All in one page idiom: no full page transitions • Load shared dependencies up-front • Lazily load unique dependencies • A mini, client-side AJAX portal • Unobtrusive: content still works like it used to Tuesday, March 16, 2010
  • 99. Screen Navigator Illustrated XHR Tuesday, March 16, 2010
  • 100. Screen Navigator: How it Works • Intercepts all potential page transitions • Link clicks, form submits, etc. • Loads the href via AJAX • Compares scripts and links: only injects new stuff • Injects the page’s body into a <div> Tuesday, March 16, 2010
  • 101. URLs and Screen Navigator • We assume your Web app is URL addressable • Avoid breaking the back button and bookmarking: • Store URL state in window.location.hash • jQuery onhashchange plugin Look here! http://fluidengage.org/engage/home/home.html# exhibitions/view.html?db=mccord_exhibitions&id=4&lang=en Tuesday, March 16, 2010
  • 102. Screen Navigator: Markup <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <link rel="apple-touch-icon" href="../../../../fluid-engage-core/components/home/images/apple-touch-icon.png"/> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <title>McCord</title> <link rel="apple-touch-icon" href="../../../../fluid-engage-core/components/home/images/apple-touch-icon.png"/> <!-- Your stylesheets go here --> <!-- Your JavaScript dependencies go here --> Shared Dependencies <!-- Screen Navigator’s dependencies --> <script type="text/javascript" src="../../../../fluid-infusion/src/webapp/lib/jquery/core/js/jquery.js"></ script> <script type="text/javascript" src="../../../../fluid-infusion/src/webapp/lib/json/js/json2.js"></script> <script type="text/javascript" src="../../../../fluid-infusion/src/webapp/framework/core/js/Fluid.js"></script> <script type="text/javascript" src="../../../../fluid-engage-core/framework/js/kettleCore.js"></script> <script type="text/javascript" src="../../../../fluid-engage-core/framework/js/URLUtilities.js"></script> <script type="text/javascript" src="../../../../fluid-engage-core/lib/jquery/plugins/hashchange/js/jquery.ba-hashchange.js"></script> <!-- Screen Navigator itself --> <script type="text/javascript" src="../js/condenser.js"></script> </head> <body class="fl-theme-iphone fl-home-white-background"> <div class="flc-navigator-portal"> </div> Empty Container </body> </html> Tuesday, March 16, 2010
  • 103. Instantiating Screen Navigator fluid.engage.screenNavigator(".flc-navigator-portal", "../app/home.html"); Tuesday, March 16, 2010
  • 104. Fluid Engage Code Tour? Tuesday, March 16, 2010
  • 105. Questions? Tuesday, March 16, 2010