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

An IBM Proof of Technology

Advanced client-side development

© 2012 IBM Corporation

IBM Software

Agenda

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 preview

2 Advanced application development techiques with IBM Worklight © 2012 IBM Corporation

IBM Software

Comparing 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 camera


IBM Software

Enhanced 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
html

IBM Software

About 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.

IBM Software

Navigation: 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)

View


IBM Software

Enhanced 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, profileView

IBM Software

View navigation with Buttons

dojox.mobile.toolbarButton

dojox.mobile.Heading (Back Button)


IBM Software

View navigation with Icons, Lists

dojox.mobile.IconItem

dojox.mobile.ListItem


IBM Software

Agenda

Lab3 preview


IBM Software

What 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 project


IBM Software

The 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 Javascript


IBM Software

The 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.parser


IBM Software

Dojo 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’ gesture


IBM Software

Dojo Mobile Widgets: ScrollableView


IBM Software

Loading 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.

IBM Software

Dojo 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.html


IBM Software

Managing 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):


IBM Software

Detect 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)


IBM Software

Agenda

Lab3 preview


IBM Software

Accessing 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 initialization


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.


IBM Software

Navigation – 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)


IBM Software

Environment 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 source


IBM Software

Runtime 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 densities


IBM Software

Agenda

Lab3 preview


IBM Software

What 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 projects


IBM Software

Apache Cordova usage sample for device details

Getting device hardware and software information


IBM Software

Apache Cordova usage sample - navigator.camera


IBM Software

Agenda

Lab3 preview


IBM Software

Worklight 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 project


IBM Software

Implementing 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 SQL


IBM Software

Agenda

Lab3 preview


IBM Software

What 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)


IBM Software

Encrypted Cache callbacks and error handling

Examples from /common/js/Mysurance/controllers/otherDriverController.js
– WL.EncryptedCache.write() example

• Parsing WL.EncryptedCache error messages


IBM Software

Agenda

Lab3 preview


IBM Software


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.html


IBM Software

Agenda

Lab3 preview


IBM Software

Lab 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 import


IBM Software


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.


IBM Software

Reference materials

For 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.html


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

Recommended

Recommended

More Related Content

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

Similar to IBM Mobile Foundation POT - Part 4 Advanced client-side development Presentation (20)

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