IBM Mobile Foundation POT - Part 4 Advanced client-side development Presentation

2,749 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,749
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
76
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

IBM Mobile Foundation POT - Part 4 Advanced client-side development Presentation

  1. 1. An IBM Proof of TechnologyAdvanced client-side development © 2012 IBM Corporation
  2. 2. IBM SoftwareAgenda An enhanced Mysurance application Dojo Mobile overview Worklight Common Controls and Optimization Use of Apache Cordova for access to device features Interacting with databases using the Worklight SQL Adapter Working with the on-device Encrypted Cache Running iOS applications and building IPA files in Xcode Lab3 preview2 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  3. 3. IBM SoftwareComparing Lab1 Mysurance with Lab3 Mysurance Feature Lab 1 Mysurance Lab 3 Mysurance Description “Essence of Mysurance” Fully-developed Mysurance Lab 1 – Essence of Mysurance Code organization HTML file •2 views in one Default Model-View-Controller implementation •Custom CSS •single HTML, Javascript files •HTML fragments for individual views •Navigation buttons •Individual Javascript controllers •Text box (RoundRect) Navigation controlson-screen alert •Button with an • Buttons • Buttons, lists, icons (WL.SimpleDialog) • Environment specific optimizations •HTTP Adapter implementation and (Android TabBar and back button invocation support) Visual Content • Text, button • Splash screen • on-screen alert (WL.SimpleDialog) • Text, buttons, icons, lists • Cache usage demo UI (dojox.mobile.SimpleDialog) • Google Map • Photos (to be implemented) Back-end • HTTP Adapter implementation and • SQL Adapter implementation and invocation invocation Device Support • (none) • Encrypted Cache (with demo UI) • Apache Cordova geolocation • Apache Cordova camera3 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  4. 4. IBM SoftwareEnhanced Mysurance application views and navigational flow loader The enhanced Mysurance application is (splash implemented with HTML fragments for the screen) views, and corresponding Javascript controllers for programmatic actions mainView “Mysurance” Mysurance.html toolboxView helpView profileView “Accident “Help” “My Profile” Toolbox” helpView.html toolboxView.html profileView.html otherDriver- hospitalMap- View locationView photoView firstAidView View “Other “Accident “Accident “First Aid “Hospitals Driver Location” Photos” Instructions” Nearby” Information” otherDriverView.html locationView.html photoView.html hostpitalMapView. locationView.html html4 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  5. 5. IBM SoftwareAbout pages, views and fragments Views are the mobile equivalent of html pages Views in individual html fragments •Many html files (fragments) •One view per file •Mobile Views tab shows all views linked from current html fragment Best Practice – modularity, MVC-friendly organization, enabling multiple authors, sharing of common views between applications, smaller files for parsing & rendering. Lab3 Mysurance introduces fragments. All views in single html file • One html file • Multiple views • Mobile Views shows all views in the current html file Lab1 Mysurance used a single html file with multiple views.5 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  6. 6. IBM SoftwareNavigation: Views, Headings and Toolbar buttons• A View is a widget that represents the entire screen of a mobile device• A Heading is placed at the top and/or bottom of a view• A ToolBarButton is a button placed in a heading Heading (label: Mysurance) ToolBarButton ToolBarButton (label: Online) (label: Profile) View6 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  7. 7. IBM SoftwareEnhanced Mysurance application screens/views examples mainView Splash Screen toolboxView helpView • Default view in • Initial <div> in • Default view in • Default view in Mysurance.html, but Mysurance.html toolboxView.html helpView.html created with (id=loader) fragment fragment display:none style, to • Replaced by mainView • Links to 3 additional • Links to 2 additional allow for splash screen during wlCommonInit() views in separate html views in separate html • Links to toolboxView, in Mysurance.js fragments fragments helpView, profileView7 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  8. 8. IBM SoftwareView navigation with Buttons dojox.mobile.toolbarButton dojox.mobile.Heading (Back Button)8 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  9. 9. IBM SoftwareView navigation with Icons, Lists dojox.mobile.IconItem dojox.mobile.ListItem9 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  10. 10. IBM SoftwareAgenda An enhanced Mysurance application Dojo Mobile overview Worklight Common Controls and Optimization Use of Apache Cordova for access to device features Interacting with databases using the Worklight SQL Adapter Working with the on-device Encrypted Cache Running iOS applications and building IPA files in Xcode Lab3 preview10 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  11. 11. IBM SoftwareWhat is Dojo?• A toolkit for creating modern web and mobile applications• The toolkit is based on HTML5, CSS3, and JavaScript• The toolkit is open source and supported by a community of experts • IBM participates in this community• The toolkit consists of Dojo Base, Dojo Core, Dijit, DojoX, and Utilities• Dojo is offered for inclusion in Worklight applications • No need to download and import into your project11 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  12. 12. IBM SoftwareThe Dojo Programming Model• Programming model is both declarative and programmatic• Declarative model delivers necessary simplicity Declarative in HTML• Programmatic model delivers necessary flexibility and dynamicity Programmatic in Javascript12 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  13. 13. IBM SoftwareThe Dojo Mobile project (dojox.mobile)• DojoX project that provides various widgets for building web/hybrid applications on mobile devices• Cross-platform support is a central aim of the Dojo Mobile project • Includes a cross-platform JavaScript API • Includes CSS for different device platforms (iPhone, Android, BlackBerry, etc.)• Widgets built to work with webkit-based browsers • Includes a compatibility mode to allow use in other browsers• Dojo Mobile is designed to be lightweight to accommodate high-latency network connections and limited device space • Requires minimal set of Dojo/Dijit capabilities • Includes its own parser that is a subset of the core dojo.parser13 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  14. 14. IBM SoftwareDojo Mobile Widgets: Advanced page construction• Dojo Mobile contains widgets that make it simple to build advanced UIs• The ScrollableView widget enables users to construct views with touch-based scrolling capability• The FixedSplitter widget allows users to arrange DOM side-by-side in a vertical or horizontal fashion• The ContentPane allows users to embed HTML fragments within the view• The SwapView enables users to easily transition between views via the ‘swiping’ gesture14 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  15. 15. IBM SoftwareDojo Mobile Widgets: ScrollableView15 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  16. 16. IBM SoftwareLoading Dojo Mobile in Mysurance Mysurance.html Giving the path do the Mysurance Dojo classes Including all Dojo & Dojo Mobile modules Mysurance.js Specifying exactly which modules are needed (dependencies are resolved by AMD loader) Callbacks when Dojo has loaded all modules, and when the parser has parsed the HTML file.16 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  17. 17. IBM SoftwareDojo Custom Builds – reducing size of Dojo and the app load time Dojo is a large framework with thousands of files (1.7 source distribution is ~30MB zipped). Worklight Studio adds complete Dojo source distribution to your workspace. – Allows step-by-step-debugging of code even into the Dojo source. – To reduce space Worklight Studio intelligently reuses a single Dojo source across the apps in your workspace. During the Build and Deploy step Dojo and Dojo Mobile is included in your app distributable. Dojo Util includes the Dojo Build System which allows you to extract only the fraction of the files available in Dojo, Dijit, and Dojox that you actually need, and merge these into a single compressed JavaScript file. – Significantly reduces the amount of network traffic required to load your app initially (if a mobile web app), or the size of your app distributable. – Each JavaScript file generated is called a Dojo layer. Worklight Studio ships with pre-built Dojo layers (dojo.js, core-web-layer.js, mobile-ui- layer.js, mobile-compat-layer.js) which includes all Dojo mobile widgets (~1400kB total). If you want you can reduce the size of your app distributable by creating your own app- optimized layers (for Mysurance the final size would be roughly 200kB). – Can also merge all CSS files into a single CSS file, and compress for faster load time. To learn about Dojo builds go to http://dojotoolkit.org/documentation/tutorials/1.7/build/ and http://dojotoolkit.org/reference-guide/1.7/quickstart/custom-builds.html17 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  18. 18. IBM SoftwareManaging Dojo Mobile View Transitions Detecting Dojo Mobile view transitions using Dojo’s pub/sub framework (common/js/Mysurance.js): There are many more events you can listen to (for example before a transition occurs). Transition events can be useful to hook into to run code such as Ajax calls to server to load information to display on a view.Programmatically transitioning to views in external fragments (common/js/CommonControls.js):18 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  19. 19. IBM SoftwareDetect runtime environment, device platform and version Apache Cordova can be used to detect the platform (OS) and version etc. We use this to work around a problem we found displaying Dojo Mobile’s SimpleDialog on Android 4.0 in Mysurance (worked on all other Android versions as well as iOS). Check if we have access to Apache Cordova Detect if we are on Android 4.0 or if we are running in the browser preview On Android 4.0.x display the password On all platforms except Android 4.0 pop view (otherDriverView_pwd.html) up the Dojo Mobile SimpleDialog (defined in otherDriverView.html)19 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  20. 20. IBM SoftwareAgenda An enhanced Mysurance application Dojo Mobile overview Worklight Common Controls and Optimization Use of Apache Cordova for access to device features Interacting with databases using the Worklight SQL Adapter Working with the on-device Encrypted Cache Running iOS applications and building IPA files in Xcode Lab3 preview20 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  21. 21. IBM SoftwareAccessing Worklight Common Control APIs via the “WL” Namespace To use Worklight APIs, a WL namespace is used: • WL.Client, WL.Utils, WL.App, WL.SimpleDialog… Exposes the API objects, methods and constants Automatically added to the app’s main HTML file • wlcommon.js • wlclient.js • worklight.js • wlfragments.js WL Namespace is automatically available on application initialization21 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  22. 22. IBM Software Worklight Common Controls (Client API) WL.Client lets you perform the following types of functions: • Initialize and reload the application. • Manage authenticated sessions. • Obtain general app information. • Retrieve and update data from corporate information systems. • Store and retrieve user preferences across sessions. • Internationalize app texts. • Specify environment-specific user interface behavior. • Store custom log lines for auditing and reporting purposes in special database tables. • Write debug lines to a respective console. • Dynamic page and fragments loading. For full documentation please refer to the Developer Reference Guide.22 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  23. 23. IBM SoftwareNavigation – Android back button support WL.App.overrideBackButton() Worklight common controls api to override the default handling of the on-device back button on Android and Windows phone devices. – Default behavior is return to desktop Implementation allows programatic selection of view when device’s back button is pressed. – Code is added in Javascript for the the environment (android or windows)23 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  24. 24. IBM SoftwareEnvironment customization Update Javascript, CSS in the environment folder to make changes for Updates to Android only that environment environment for platform consistency • Added TabBar view navigation (with WL.TabBar control) • Hide navigation button in header and IconItems in body with CSS • Updates made in js and css folders of android environment Iphone No environment customizations Retains visibility of toolBarButtons, IconItems from common source24 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  25. 25. IBM SoftwareRuntime Skins: Handling differences within screen sizes Skins provide support for multiple form factors in a single executable file for devices of the same OS family. Built with the Worklight Application Skin wizard (New->Worklight Application Skin) Packaged into the application, Skin determination made automatically at runtime Example 1: phones vs tablets – One application to support, optimized for multiple form factors Example 2: enhanced vs standard displays – One application to support, optimized for different screen densities25 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  26. 26. IBM SoftwareAgenda An enhanced Mysurance application Dojo Mobile overview Worklight Common Controls and Optimization Use of Apache Cordova for access to device features Interacting with databases using the Worklight SQL Adapter Working with the on-device Encrypted Cache Running iOS applications and building IPA files in Xcode Lab3 preview26 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  27. 27. IBM SoftwareWhat is Apache Cordova? Apache Cordova is an open source mobile development framework Cordova provides a JavaScript API that allows developers to access native mobile device features and even execute native code using JavaScript The Cordova framework is integrated into Worklight®-generated iOS and Android projects27 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  28. 28. IBM SoftwareApache Cordova usage sample for device details Getting device hardware and software information28 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  29. 29. IBM SoftwareApache Cordova usage sample - navigator.camera29 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  30. 30. IBM SoftwareAgenda An enhanced Mysurance application Dojo Mobile overview Worklight Common Controls and Optimization Use of Apache Cordova for access to device features Interacting with databases using the Worklight SQL Adapter Working with the on-device Encrypted Cache Running iOS applications and building IPA files in Xcode Lab3 preview30 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  31. 31. IBM SoftwareWorklight SQL Adapters • An Adapter is a transport layer used by the Worklight Platform to connect to various back-end systems. • Executed on Worklight server • Implemented in Javascript by default • Can be custom-coded in Java Query Response Update • Simple client-side Javascript invocation model 2 3 data through Worklight client API A Worklight® SQL adapter is designed to SQL CastIron HTTP communicate with any SQL data source – Both plain SQL queries or stored procedures Data/Result can be used 1 Invoke adapter as JSON – Worklight supports MySQL, Oracle 11g, procedure 4 DB2® and Derby databases – JDBC connector driver must be downloaded separately by the developer and added to the build path of the Worklight project31 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  32. 32. IBM SoftwareImplementing a Worklight SQL Adapter Adapter XML file • dataSourceDefinition • JDBC driver class • JDBC database URL • userid • password • procedure definition(s) Adapter Implementation (Javascript) • Procedure source • Prepare SQL statement • Return results from invoking SQL32 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  33. 33. IBM SoftwareAgenda An enhanced Mysurance application Dojo Mobile overview Worklight Common Controls and Optimization Use of Apache Cordova for access to device features Interacting with databases using the Worklight SQL Adapter Working with the on-device Encrypted Cache Running iOS applications and building IPA files in Xcode Lab3 preview33 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  34. 34. IBM SoftwareWhat is encrypted cache? Encrypted cache is a mechanism for storing sensitive data on the client device Uses HTML5 web storage technology, which allows data to be saved locally and retrieved on subsequent application use or re-launch Data is encrypted with a PKCS key – Combination of user-provided password and server-retrieved, randomly generated token – Improves on-device security of the cache – The app must be able to connect to Worklight server in order to create a new encrypted cache Data is stored using key-value pairs Encrypted cache is like a security deposit box – it remains open until you close it – read/write/remove/destroy/changeCredentials do not require credentials – Remember to close the cache when you have finished working with it WL.EncryptedCache API in Worklight 5.0 makes consistent use of success and failure callbacks • WL.EncryptedCache.open(credentials, createIfNone, onCompleteHandler, onErrorHandler); • WL.EncryptedCache.write(key, value, successCallback, failureCallback) • WL.EncryptedCache.read(key, successCallback, failureCallback); • WL.EncryptedCache.remove(key, successCallback, failureCallback); • WL.EncryptedCache.close(onCompleteHandler, onFailureHandler); • WL.EncryptedCache.destroy(onCompleteHandler, onErrorHandler); • WL.EncryptedCache.changeCredentials(credentials, onCompleteHandler, onErrorHandler)34 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  35. 35. IBM SoftwareEncrypted Cache callbacks and error handlingExamples from /common/js/Mysurance/controllers/otherDriverController.js – WL.EncryptedCache.write() example • Parsing WL.EncryptedCache error messages35 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  36. 36. IBM SoftwareAgenda An enhanced Mysurance application Dojo Mobile overview Worklight Common Controls and Optimization Use of Apache Cordova for access to device features Interacting with databases using the Worklight SQL Adapter Working with the on-device Encrypted Cache Running iOS applications and building IPA files in Xcode Lab3 preview36 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  37. 37. IBM SoftwareRunning iOS applications and building IPA files in Xcode Pre-reqs for running the iOS simulator: Mac, Apple developer account, Xcode – Launch the app in Xcode (apple environment, Run as -> Xcode Application) – Confirm app and device type in the Xcode simulator menu (iPhone or iPad) – Start app in iOS simulator (“Run” button) Pre-reqs for generating an installable application bundle (IPA file): developer team membership, development certificate, provisioning profile – Tools Workflow for iOS: https://developer.apple.com/library/ios/documentation/Xcode/Conceptual/ios_development_workflow/index.html37 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  38. 38. IBM SoftwareAgenda An enhanced Mysurance application Dojo Mobile overview Worklight Common Controls and Optimization Use of Apache Cordova for access to device features Interacting with databases using the Worklight SQL Adapter Working with the on-device Encrypted Cache Running iOS applications and building IPA files in Xcode Lab3 preview38 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  39. 39. IBM SoftwareLab 3 preview Import an enhanced Mysurance project into Worklight Studio Build and Deploy Review features and implementation within Studio, Mobile Browser Simulator – Views, HTML fragments and Javascript controllers – Navigation variety (Buttons, Icons, Lists) – Platform-specific optimizations (Android TabBar, CSS) – SQL Adapter implementation and invocation – Encrypted cache implementation and demo dialog Implement Apache Cordova camera API Test final Mysurance app in Android Emulator – Pre-built final app also available for import39 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  40. 40. IBM Software40 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  41. 41. IBM Software ITALIAN HINDI FRENCH JAPANESE BRAZILIAN PORTUGUESE SIMPLIFIED CHINESE TRADITIONAL CHINESE SPANISH RUSSIAN TAMIL THAI GERMAN ARABIC We appreciate your feedback. Please fill out the survey form in order to improve this educational event.41 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation
  42. 42. IBM SoftwareReference materialsFor more information: Worklight training modules – https://www.ibm.com/developerworks/mobile/worklight/getting-started/ Worklight user documentation – https://www.ibm.com/developerworks/mobile/worklight/getting- started/documentation.html42 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation

×