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:
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:
- IBM Worklight Studio.
- IBM Worklight Device Runtime Components.
- IBM Worklight Server.
- 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.
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.
- JQuery Mobile.
- Dojo mobile.
- 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:
Select Hybrid Application and Next:
Now, set the Application Name. If it is needed, add one of the JavaScript libraries listed:
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.
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 apps→WorklightApp→application-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.
- Select Application “WorklightApp”.
- Click on Add… Button.
- Select the environment.
- Click OK Button.
There are new folders under apps→WorklightApp 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 js→WorklightApp.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
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.
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.
Results:
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.
Post Your Comment Here