Worklight Cross-platform applications based on HTML5 and JavaScript

With the popularity of smartphones and tablet computers, more and more Internet IT companies are focusing on mobile platforms. The current mainstream mobile platform in the market is Apple IOS, Google's Android, Microsoft's Windows Phone, BlackBerry and Nokia's Symbian. These mobile platforms have different development environments and programming languages. At the same time, there are multiple versions of a platform, such as Android2.3 and Android3.0, which support smartphones and tablets respectively. Because of these diversities, the development of mobile applications has some problems, such as high cost, long cycle and difficult maintenance.

Worklight is an IBM-acquired enterprise-class solution for mobile application development and infrastructure consolidation. It supports local application development for multiple mobile platforms, as well as cross-platform applications based on HTML5 and JavaScript.

This paper mainly introduces the runtimeskin characteristics of worklight and how to use this feature to develop cross-platform applications for different mobile terminals.

Development environment Installation and configuration

Worklight provides a set of development environments for mobile applications that cover all aspects of the software development lifecycle from development to integration to management, deployment, and monitoring of rows. It consists primarily of four parts, Worklight Studio, Worklight Server, Device Runtime, and worklight Console:

Worklight Studio is an integrated development environment based on Eclipse, where users can easily create, develop, deploy, and test local or hybrid applications from different platforms. Worklight is a Tomcat based server for deploying a well developed mobile application. It also provides adapter (Adapter) components for user login authentication, background data interaction, message push and other enterprise application operations. Device Runtime is a component in the Worklight SDK that mainly provides a variety of interfaces that can invoke local resources on mobile platforms, and developers can invoke these interfaces using JavaScript APIs, operating system local libraries, and third-party libraries, Make full use of the advantages of local applications. The Worklight Console enables users to monitor and manage applications and adapter components currently deployed on Worklight Server through a browser. The Worklight Console is also responsible for message push management and report analysis.

The download and installation steps for the Worklight development environment can be obtained from DeveloperWorks IBM worklight learning resources.

What is run time skin (Runtime Skin)

Run-time skin refers to the worklight application can add multiple skins to the mobile platform environment (Worklight Environnement) that has been created, each skin is a subset of the platform environment, and all skins are packaged as part of the application in the installation file. When the application runs, it dynamically determines which skin to use depending on the specific mobile device. There are many applications of skin at run time, such as different cell phone size, different mobile platform version, support HTML5 and so on.

Here's an example of a news-browsing application that describes how to apply the Worklight Runtime Skin feature.

Create Worklight Engineering and applications

we create a worklight project. Select File->new->worklight Project in Eclipse, as shown in Figure 1.


Figure 1. Create Worklight Engineering





Enter project name Mobile News. Then we create a worklight application and select File->new->worklight Creator, as shown in Figure 2.


Figure 2. Creating Worklight Applications





Select the first step of the new project in the pop-up window and enter the name of the application NewsApp, as shown in Figure 3.


Figure 3. Creating applications in Engineering





after the project and the application are created, Worklight automatically generates the following directory structure, as shown in Figure 4.


Figure 4. application directory Structure





 

We see that the apps directory contains just the application NewsApp, where each application has a common runtime environment that is shared by different mobile platform environments (such as IOS, Android, BlackBerry, etc.). Under the common folder, there are three folders CSS, images and JS, which store the program-related CSS files, pictures, and JavaScript files. Newsapp.html is the primary HTML file that the program automatically creates.