Mobile Development using Worklight Studio
By Amine GAHBICHE - Proxym-IT
! IBM Worklight Overview
2
IBM Worklight Overview
! Open platform, built around HTML5 & supporting hybrid apps
! Focus on new devices and OS’s and their unique capabilities
! Cater to enterprise needs regarding app capabilities, delivery, integration, security and management
! Handle the entire lifecycle of mobile apps
3
IBM Worklight Overview
4
IBM Worklight applications main types
5
IBM Worklight Overview
6
IBM Worklight Overview
7
Single Shared Codebase
8
Integrating Best-in-class Tools
9
IBM Worklight Server
10
Device Runtime Components
11
IBM Worklight Console
12
! IBM Worklight environment setup
13
Eclipse IDE
! Multi-purpose integrated development environment (IDE)
! Open source ! Supported for Windows, Mac OS X, Linux ! Eclipse versions that are compatible with
IBM Worklight Studio are: – Eclipse V4.2.2 (Juno) – Eclipse V4.3.1 (Kepler)
14
IBM Worklight Studio Setup 1/2
! The instructions to install IBM Worklight Studio are: – Start your Eclipse IDE. – Click Help > Install new software. – Beside the Work with field, click Add. – In the Add Repository window, click Archive. – Browse to the location of the.zip file on your
machine, and click Open. You can download the zip from this link
– Click OK to exit the Add Repository window. 15
IBM Worklight Studio Setup 2/2
– On the Available Software page, select IBM Worklight Studio Development Tools, and click Next.
– On the Install Details page, review the features of Worklight Studio to be installed, and then click Next.
– On the Review Licenses page, review the license text. Select I accept then click Finish.
– The installation process starts. Follow the prompts to complete the installation.
16
Android environment setup
! The Android SDK separates tools, platforms, and other components into packages you can download using the SDK Manager.
! SDK Manager can be downloaded from google website
17
ADT Plugin for Eclipse
– Start Eclipse, then select Help > Install New Software.
– Click Add, in the top-right corner. – Enter ADT Plugin Zip file path or link, click OK. – In the Available Software dialog, select
Developer Tools and click Next. – Accept the license agreements, then click
Finish. – Restart Eclipse after installation completes.
18
Add Android SDK Platform
– From Eclipse, select Window > Android SDK Manager.
– Select packages to install. – Click install packages.
19
iOS Environment
! Need a Mac with Mac OS X 10.9.4 or later.
! Install the latest version of Xcode (version 6.1) from Mac App Store.
20
Windows Phone 8 Environment
! Needs a PC running 64-bit Windows 8 operating system.
! The Windows Phone 8.1 development tools are included with Visual Studio 2013 (Update 2 or later).
! More details at https://dev.windowsphone.com/en-us/downloadsdk
21
! Creating your first IBM Worklight application
22
23
! Create a new IBM Worklight project
24
! JavaScript frameworks can be added to your project in this screen.
25
! IBM Worklight structure
26
Adding mobile environments
27
Adding mobile environments
28
29
! Common Environment: – index.html: The main HTML file. – css: main.css – main application CSS file. – images: Default Worklight images for the common
environment. – js:
! initOptions.js: Contains initialization options for the application.
! main.js: The main JavaScript file for the application.
! messages.js: JSON object that holds all app messages. Can be used as the source for translation.
IBM Worklight project structure
30
! The resources of the new environment have the following relationship with the common resources: – images – overrides the common images
when both have the same name. – css – extends, overrides, or both, the
common CSS files. – js – extends the common application
instance JS object. The environment class extends the common app class.
– index.html – optional HTML file that overrides the common HTML code when both have the same name.
application-descriptor.xml file
31
32
Index.html file
33
Building the application
34
IBM Worklight console
35
Preview the application
36
! IBM Worklight Adapters
37
! An Adapter is a transport layer used by the Worklight Platform to connect to various back-end systems.
! Adapters are used for:
! Retrieving information ! Performing actions
38
Adapters benefits
! Universality : Supports multiple integration technologies and back-end information systems
! Fast Development : Defined using simple XML syntax, and easily configure with JavaScript API
! Security : Use of flexible authentication facilities to create connections with back-end systems – Adapters offer control over the identity of the connected user
! Scalability : Adapters reduce the number of transactions performed on back-end systems by using cache to store retrieved back-end data
! Transparency : Data retrieved from back-end applications is exposed in a uniform manner regardless of the adapter type
39
Adapter Anatomy
! Each Worklight Adapter consists of: ! An XML file, describing the connectivity options and
listing the procedures exposed to the application or other adapters
! A JavaScript file, containing the implementation of procedures declared in the XML file
! Zero or more XSL files, containing a transformation scheme for retrieved raw XML data
40
Adapter Anatomy
! Adapter functionality is available to the app using procedures
! Procedures call back-end services to retrieve data or to perform actions
! Procedures are declared using XML and are implemented using server-side JavaScript
! Using server-side JavaScript, a procedure can process the data before or after calling the service
41
42
Creating an Adapter
43
44
45
Testing adapter procedure
46
Testing adapter procedure
47
Invoking a Procedure From the Client App
48
! Client side technologies
49
Cordova
! Cordova - an open source JavaScript-based development framework for building multiplatform mobile apps.
! The Worklight Framework make use of the Cordova library. Developers can access native device functionalities through those services.
50
Cordova – usage sample
51
Cordova – usage sample
52
Cordova Plugin
! Cordova allows developers to create custom native code blocks and invoke them via JavaScript
! This technique is called a Cordova Plugin ! An Apache Cordova plugin consists of two
parts – Java code which runs natively within the
Android OS – A JavaScript wrapper
53
Worklight JavaScript SDK
! WL.Client – WL.Client.isUserAuthenticated (realm) – WL.Client.getUserInfo (realm, key) – WL.Client.invokeProcedure (invocationData,
options)
! WL.Logger – WL.Logger.debug (message)
54
Worklight JavaScript SDK – common controls
! Some controls are common to most environments, such as modal pop-up windows, loading screens, and tab bars.
! Worklight JavaScript API automatically renders these controls in a native way for each mobile platform.
! Some of these controls are Busy indicator, Simple dialog, Tab bar, Options menu
55
Worklight JavaScript SDK – common controls
! WL.BusyIndicator ! It uses native implementation on the each
platforms
56