Developer's Perspective: IBM Worklight for Mobile App Development

As a mobile app developer and interested in new platforms and techniques of development, I will share with you this technology, IBM Worklight to create mobile apps:

describe the image

IBM Worklight

Worklight is an open, comprehensive and advanced mobile application platform and framework used to develop HTML5, hybrid and native mobile applications.  Worklight also helps run and manage these software mobile applications.

IBM Worklight framework is made up of these four main components:

  1. IBM Worklight Studio.
  2. IBM Worklight Device Runtime Components.
  3. IBM Worklight Server.
  4. IBM Worklight Console.

Each one of these components allow us to manage some part of the application:

IBM Worklight Studio

This is a plugin for Eclipse IDE that allows us to develop the code for the app.

IBM Worklight Device Runtime Components

All of these components are the SDK. This will make the code we write to work on the user's real devices.

IBM Worklight Server

This is the server that provides the information to the application, based on adapters’ paradigm. It gets the data access to the back-end of the app.

IBM Worklight Console

This is the monitor and manager of the app in its different versions and environments, adapters and push notification rules.

Graphic

JSONStore

Provides the API that allows local JSON data storing.

Adapters

An adapter is a component that is used to retrieve the data from services in the back-end server. The retrieved data by the adapter is always JSON formatted.

An adapter is composed of:

  • An XML file describing the back-end server information and the procedures that it performs.
  • A JavaScript (.js) file that contains the implementation of the procedures already declared in the XML file.
  • An XSL file, if the retrieved data from the back-end server is in XML format, the XSL file is used for the XML to JSON conversion.

The adapter can be used to make HTTP requests, execute SQL queries and more.

JavaScript Libraries

There are some JavaScript libraries that help with the app development.

  1. JQuery Mobile.
  2. Dojo mobile.
  3. Sencha.

Also, the Apache Cordova Framework can help when creating mobile applications with Worklight. This framework allows the app to call native device functions from JavaScript, and even lets you create your own Cordova Plugins with Objective-C code.

Ok, let us leave the theory behind for a while…

First, you have to download and install the IDE called Eclipse.  Warning! The Worklight documentation does not demand very specific version of the IDE in every version of the eclipse.  By the time this blog is published, IBM Worklight 6 will be the latest release and it will demand Eclipse Juno v4.2.2 (SR2) or Eclipse Classic v4.2.2. You can download it the latest release here.

The next step is to download the IBM Worklight Developer Edition Plugin from the Eclipse Marketplace.

NOTE: You should not forget to install the SDK of each environment in which you want to deploy.

Once everything needed is correctly installed, create a new mobile app project:

Screen Shot 01

Select Hybrid Application and Next:

Screen Shot 02

Now, set the Application Name. If it is needed, add one of the JavaScript libraries listed:

Screen Shot 03

 

As you can see in the screenshot, the dojo library comes with the IBM Worklight 6 Plugin.  NOTE: We will NOT add any library for this example.

Screen Shot 04

Now, you can see the basic project structure

  • Adapters: Source code for the adapters.
  • Apps: Source code for the apps.
  • Server: Configuration files, libraries and Java code for the server.
  • Components: Source code for the Shell components.

In the appsWorklightAppapplication-descriptor.xml file is where you can add environments and features to your app.  In this example, we'll add iPhone* and android environments.

*Note: iPhone or iPad, only if you have a Mac.

  1. Select Application “WorklightApp”.
  2. Click on Add… Button.
  3. Select the environment.
  4. Click OK Button.

Screen Shot 05

There are new folders under appsWorklightApp folder, one by each environment you have added one as a common resource.

In the WorklightApp.html file that’s inside the common folder, add a button after the application UI comment:

<!--application UI goes here-->
<button id="helloBtn" type="button">Hello World</button>

Now inside each environment (iPhone & android folders), in the jsWorklightApp.js file, add an event listener for the click event of the button after the Environment initialization comment:

// Environment initialization code goes here
document.getElementById("helloBtn").addEventListener('click', function(){
            alert("from <Environment>");
}, null);

To see the results go to the Project Explorer and select your WorklightApp folder, right-click on it, select Run as option and then Build All and Deploy

Screen Shot 06

Now, in your workspace you can see a new Project (an Android App Project) named WorklightExampleWorklightAppAndroid. This is the result of the deployment for Android, selecting and running it as an Android Application will compile the app and load it into an emulator or a device.

Screen Shot 07

In the case of iPhone, Worklight will also create an Xcode Project for you. To open it, you must go to the iPhone environment folder inside your Worklight Project, right click on it and run it as Xcode Project, and then you can run the app from Xcode IDE.

Screen Shot 08

Results:

Screen Shot 09

Screen Shot 10

About the Author

Adalberto Gonzalez is an experienced Systems Engineer which currently works at iTexico as a Mobile Developer. Adalberto has been specializing in Worklight since early 2013 additional to the regular platforms for development.

Oscar Salas

Written by Oscar Salas

Oscar Salas is a B2B Digital Marketing Specialist with 5 years of experience, who has helped organizations to grow and expand through strategic brand development and marketing programs. Analytical thinker, cat lover, he enjoys to play the piano and listening to Led Zeppelin He's currently leading the iTexico Demand Gen strategies.

Explore iTexico, The Nearshore + Company 

Explore The Nearshore Services

Test

Recent Posts