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

© 2012 IBM Corporation

An IBM Proof of Technology

Advanced client-side development


IBM Software

2 Advanced application development techiques with IBM Worklight

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


IBM Software

Comparing Lab1 Mysurance with Lab3 Mysurance


Lab 1 – Essence of Mysurance•2 views in one HTML file•Custom CSS•Navigation buttons•Text box (RoundRect)•Button with an on-screen alert (WL.SimpleDialog)•HTTP Adapter implementation and invocation

Feature Lab 1 Mysurance Lab 3 Mysurance

Description “Essence of Mysurance” Fully-developed Mysurance

Code organization Default•single HTML, Javascript files

Model-View-Controller implementation •HTML fragments for individual views•Individual Javascript controllers

Navigation controls • Buttons • Buttons, lists, icons• Environment specific optimizations

(Android TabBar and back button support)

Visual Content • Text, button• on-screen alert (WL.SimpleDialog)

• Splash screen• Text, buttons, icons, lists• Cache usage demo UI

(dojox.mobile.SimpleDialog)• Google Map• Photos (to be implemented)

Back-end • HTTP Adapter implementation and invocation

• SQL Adapter implementation and invocation

Device Support • (none) • Encrypted Cache (with demo UI)• Apache Cordova geolocation• Apache Cordova camera


IBM Software

Enhanced Mysurance application views and navigational flow


The enhanced Mysurance application is implemented with HTML fragments for the views, and corresponding Javascript controllers for programmatic actions

loader

(splash

screen)

Mysurance.html

mainView

“Mysurance”

toolboxView

“Accident

Toolbox”

toolboxView.html

profileView

“My Profile”

profileView.html

locationView

“Accident

Location”

locationView.html

otherDriver-

View

“Other

Driver

Information”

otherDriverView.html

firstAidView

“First Aid

Instructions”

locationView.html

photoView

“Accident

Photos”

photoView.html

hospitalMap-

View

“Hospitals

Nearby”

hostpitalMapView.

html

helpView

“Help”

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

View

ToolBarButton(label: Profile)

6

ToolBarButton(label: Online)

Heading(label: Mysurance)

Advanced application development techiques with IBM Worklight


IBM Software

Enhanced Mysurance application screens/views examples


Splash Screen • Initial <div> in

Mysurance.html(id=loader)

• Replaced by mainViewduring wlCommonInit() in Mysurance.js

mainView• Default view in

Mysurance.html, but created with display:none style, to allow for splash screen

• Links to toolboxView, helpView, profileView

toolboxView• Default view in

toolboxView.htmlfragment

• Links to 3 additional views in separate html fragments

helpView• Default view in

helpView.htmlfragment

• Links to 2 additional views in separate html fragments


IBM Software

View navigation with Buttons


dojox.mobile.toolbarButton

dojox.mobile.Heading (Back Button)


IBM Software

View navigation with Icons, Lists


dojox.mobile.ListItem

dojox.mobile.IconItem


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

• Programmatic model delivers necessary flexibility and dynamicity

12

Declarative in HTML

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

Mysurance.htmlGiving the path do the Mysurance Dojo classes

Including all Dojo & Dojo Mobile modules

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.

Advanced application development techiques with IBM Worklight16


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 or if we are running in the browser preview

Detect if we are on Android 4.0

On Android 4.0.x display the password view (otherDriverView_pwd.html)On all platforms except Android 4.0 pop

up the Dojo Mobile SimpleDialog (defined in otherDriverView.html)



IBM Software


Agenda








� Lab3 preview


IBM Software

21

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

22

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

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


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


IBM Software

Environment customization

Iphone

� No environment customizations

� Retains visibility of toolBarButtons, IconItems from common source


Updates to Android 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 jsand css folders of android environment

Update Javascript, CSS in the

environment folder to make changes for

only that environment


IBM Software

25

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

27

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

28

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

• Simple client-side Javascript invocation model

through Worklight client API

� A Worklight® SQL adapter is designed to

communicate with any SQL data source

– Both plain SQL queries or stored procedures

can be used

– Worklight supports MySQL, Oracle 11g,

DB2® and Derby databases

– JDBC connector driver must be downloaded

separately by the developer and added to the

build path of the Worklight project

Query

Update data

Data/Result

as JSON

Invoke adapter

procedure

SQL HTTP

Response

1

2 3

4

CastIron



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

34

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

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


We appreciate your feedback.

Please fill out the survey form in order to improve this educational event.

SIMPLIFIED CHINESEHINDI JAPANESE

ARABICRUSSIANTRADITIONAL CHINESE TAMIL THAI

FRENCH

GERMAN

ITALIAN

SPANISH

BRAZILIAN PORTUGUESE


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

Documents

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