Using the IBM Worklight optimization framework to build a cross-platform mobile application for multiple devices

IBM® Worklight®’s optimization framework delivers a lowest-common-denominator solution for multiple device mobile application development. By sharing the majority of the application code across multiple environments, the optimization framework can dramatically improve application efficiency without compromising user experience or application functionality. It also reduces the cost for managing ongoing application maintenance and helps with the easy adoption of new devices. This article presents a general solution approach, accompanied by descriptions of the steps in the development process using the capabilities of the Worklight optimization framework, its results, and its affect on ROI in a sample cross-device mobile application business case. This content is part of the IBM WebSphere Developer Technical Journal.

Supal Chowdhury (supal.chowdhury@in.ibm.com), IBM Advisory IT Architect, IBM

Supal Chowdhury is an IBM Advisory IT architect in application discipline and has more than 14 years of relevant experiences in the field of Information Technology with a sound understanding and knowledge of the software development process. His focused technical domains are Mobile, Portal, CDM and CDI, EI. He has designed, developed, tested and advised client on various elements of a technical solution required by the client. He has applied specialized knowledge to analyze, design, construct, test and implement solutions which addressed complex business or technical requirements.



Rohit Sahai (rohit.sahai@in.ibm.com), IT Specialist, IBM

Rohit Sahai is an IT specialist with nine years of well-honed experience in Software sizing (FPA), Requirement analysis, Design, Prototyping, Development (Java, J2EE , web and Mobile technologies). He brings with him software development experience in the Banking Industry, and sound knowledge in Manufacturing business.



17 July 2013

Also available in Chinese Portuguese

Introduction

One of the common challenges in developing (and funding the development of) mobile applications is presentation in cross-platform scenarios — that is, getting the same mobile app to display comparably on, for example, iOS, Android, and BlackBerry devices. The Worklight optimization API alleviates this issue by maximizing common business logic that can be shared across platforms and maximizing customization with logic that is unique per platform and device.

This article describes how the Worklight optimization framework makes it easy to implement a cross device mobile enterprise solution for a sample business case scenario. It looks at an overview of the Worklight product, the architecture of the optimization framework, a sample business case for a cross-platform-mobile application, a high level solution design, and finally how to build, run, and test the application on major supported mobile platforms. At the end, you will be familiar with the Worklight optimization framework so that you can use it to improve the efficiency of all aspects of your mobile application development.

This article assumes familiarity with Java™ EE, mobile application development, and any IDE, such as Eclipse. This information is applicable to IBM Worklight versions 5 and 6.

Prerequisites

The IBM Worklight development environment includes IBM Worklight Server and the Eclipse-based IBM Worklight Studio. These are supported on:

  • Windows® 7, Windows Vista® or XP (32 or 64 bit)
  • Macintosh.

For storing metadata and cached back end information, Worklight requires one of the following databases:

  • Apache Derby, SDK 10.8 or later
  • Oracle 11g Database Server, Standard or Enterprise Editions, release 1 or later
  • MySQL 5.1
  • IBM DB2® Enterprise Server Edition V9.7 or later.

Getting the right Eclipse

Be sure to use 32 bit Eclipse Indigo or Juno. Also, when downloading Eclipse, do so directly from the Eclipse download page.

IBM Worklight Studio can be installed on these versions of Eclipse:

  • Eclipse Classic Indigo 3.7.2 and 3.6.2
  • Eclipse for Java EE developers Indigo 3.7.2 and 3.6.2.

This article does not include product installation instructions. See the Information Center for details.


A snapshot of Worklight

IBM Worklight provides an open, comprehensive, and advanced mobile application platform for mobile devices such as smartphones and tablets. Worklight provides enterprises the ability to efficiently develop, run, and manage HTML5, hybrid, and native mobile applications by using standard-based technologies and tools, mobile-optimized middleware, and a variety of security mechanisms, all with integrated management and analytics capabilities. Worklight enables you to implement rich, cross-device-platform apps without the use of code translation — but with a better user experience for a variety of mobile devices.

A major focus of a mobile enterprise application platform (MEAP) is the ability for a mobile application to be cross platform, and to have connectivity to back end data sources (for example, databases, web services, message queues, and so on). In this respect, Worklight excels at helping you:

  • Cross-verify that applications build, connect, run and manage with maximum code reuse and per-device optimization.
  • Manage application security and authentication.
  • Analyze usage for smarter adaptation.
  • Ramp up developers faster for development, integration, and maintenance.
  • Develop rapid iterations with agile development and deployment.
  • Use ready-to-use back end connectors using out-of-the-box adapters.
  • Seamlessly connect to existing back end data and applications.
  • Drag-and-drop HTML5 and Dojo mobile controls.
  • Use unified notifications, run time skins, version management, access control, security, integration and delivery.
  • Expose and interface with native device functionality using libraries and client APIs.

Worklight environment optimization

An application built using Worklight can run in multiple mobile, tablet, and web environments. Run time environments can differ from each other in many characteristics, including screen size, orientation, UI guidelines and components, physical user interface, and unique environment functionality. Worklight’s environment optimization framework expedites development efficiency and productivity with facilities that help you write the core logic and design guidelines of an app using web technologies (HTML, CSS and JavaScript™), and then shares these elements across multiple platforms, keeping the application logic consistent irrespective of the device. You can easily add environment-specific optimization when required.

Irrespective of developers’ skills in web or any specific native programming while building Worklight hybrid mobile apps, their skills are made applicable across mobile apps in virtually any environment. For example, if you develop an application in HTML5, the corresponding native code can be automatically generated and ported to the necessary mobile devices supported by various operating systems (such as iOS, Android, Blackberry, Windows Phone, and so on).

The optimization framework facilitates creating common code that resides in a separate directory structure, as per the desired device OS platform. It then combines all environment specific contents during build time and finally generates the corresponding native SDK code. This lets you concentrate more of your effort on business requirements rather than focusing on providing the best possible experience on each device.

Included with your Worklight license is access to your own IBM Worklight Application Center, which enables your distributed development team access to a common code repository to work on the application. If you use a source control management system, instructions for committing your source code to your source control system is available in the Worklight user guide.

Supported environments

The Worklight optimization framework supports mobile application development for many environments, including:

  • iOS 4, 4.x and higher
  • Android 2.1 and higher
  • BlackBerry OS 5 and higher
  • Windows Phone 7 and higher
  • Modern browsers that support HTML4, CSS2.1, HTML5, CSS3, and JavaScript 1.5 and higher
  • Win Gadgets: XP, Vista and 7, Mac
  • Widgets: OSX 10
  • Embedded as an iframe in web pages
  • Browsers: IE7+, Google Chrome, Firefox, and Safari

Optimization framework architecture

Figure 1 illustrates the Worklight optimization framework that resides within Worklight Studio:

Figure 1. Optimization framework architecture
Figure 1. Optimization framework architecture

The Worklight optimization framework enables you to develop web, native, and hybrid mobile applications. Common code for all platforms reside in a folder named common. Every environment has a native folder, which contains common code that is translated into environment-specific code.

Other key elements to the optimization framework include:

  • Application folder

    The application folder contains the resources below in the hierarchy shown in the application-descriptor.xml file (Listing 1).

    Listing 1.
    <app-name>	<!-- Main Application Folder -->
    	common	<!-- Common application resources used by all environments -->
    	   css	<!-- Style sheet -->
    	   images 
    		js	<!-- JavaScript files
    		<app-name>.html
    			iPhone	<!-- Web and native resources specific to iPhone -->
    			android	<!-- Web and native resources specific to Android -->
    			blackberry	<!-- Web and native resources specific to 
    					BlackBerry -->
    			iPad		<!-- Web and native resources specific to iPad -->
    			facebook	<!-- Requires specific Facebook embedded 
    					resources specific to the application when 
    					embedded in an external HTML file -->
    			legal		<!-- License documents for application or 
    					third-party software used in application -->
  • Application resources

    Application resources help run the application in multiple environments. Worklight automatically generates missing resources that are not supplied, although you should always provide all resources required for each environment in which your application is about to run.

  • Application descriptor

    The application descriptor is a mandatory XML file that contains application metadata and resides in the application’s root directory. Worklight Studio auto-generates this file during application creation. You can manually update the file to add custom properties needed by the application.

  • Main file

    Main is an HTML5 file that contains the application skeleton and resides in the /common folder (optionally in optimization and skin folders). It loads all web resources, such as scripts and style sheets, to define common components of the application and to hook to required document events.

  • Style sheets

    Cascading style sheets (CSS) contribute to the application view on each device. These files generally reside in the /common/css folder, and can optionally reside in the optimization and skin folders.

  • Skins

    The application includes several JavaScript files for building interactive user interfaces, business logic, and back end query integration and message dictionaries for localization purposes. Scripts remain in the /common/js folder, sometimes under the optimization and skins folder, optionally.

  • Thumbnail images

    Thumbnails are used to visually identify the applications in a catalog; these images are normally required to be 128 X 128 pixels in size. Thumbnails reside in the /common/images folder; Worklight Studio assigns a default image to newly created applications if no thumbnail is provided.

  • Splash image

    The splash image is the graphic display shown on a mobile device during application initialization. Worklight Studio creates a splash image upon creation of a new application, but you can override this image with a custom one.


Sample business case

Let’s look at a fictitious retail store chain, called FictDaily Shops, Inc. The company wants to provide shoppers with a facility to help them locate items within their retail stores. They want to create a smartphone application that is available for the most commonly used mobile phone platforms, namely Android, iOS, BlackBerry, and Windows Phone, but they want to implement a single “write once, view anywhere” solution. This simple mobile application will enhances customers’ shopping experience by providing the aisle location information for all products of a specific category.

FictDaily’s IT department agrees to create a new in-store mobile solution called AisleLocator using the Worklight optimization framework. The resulting application will offer a solution to customers who need to find the aisle location of a product based on data maintained by the company. This application will be available to be installed and run on all targeted mobile devices. AisleLocator will be a hybrid app so that it can be enhanced using web code (HTML5, CSS, and so on), as well as with native APIs, if desired. The application will be highly portable and can be optimized for different environments.

The use cases that will be provided with the AisleLocator application include:

  1. View current offers

    When users open the app, they can use this use case to view the store’s current offers. This feature is meant for displaying and refining current offers, discounts, savings, sale times, and so on.

  2. Find stores in a given geography

    This use case is for locating all FictDaily Shop stores within a specified geographic location. It will accept location name (or equivalent, such as postal code) as input to return the list of stores name with addresses. When the user specifies a location, the app retrieves all stores in this area and displays the information in a list.

  3. Mark a favorite store

    The user can select a store as their favorite store, enabling them to skip the geographic search next time they use the app and go directly go to the aisle location search.

  4. Find aisle location for an item

    After selecting a specific item, the user can use this use case to find the location of the item in the selected store.

Figure 2 shows the use case diagram for this sample business case.

Figure 2. AisleLocator application use case model
Figure 2. AisleLocator application use case model

There is one actor that will participate in the processing of the AisleLocator app:

  • Customer

    The user will perform (act upon) the uses cases listed above.


Solution blueprint and UI design

UI design examples

For the purpose of showing how the optimization framework helps customize native applications, the UI design shown here is for the Android environment.

Below is an outline of the development process, underlining the optimization framework support for creating the hybrid mobile application. The corresponding figures show FictDaily Shop’s proposed UI design for the AisleLocator app (Figures 3 through 9).

  1. View current offers

    When the user opens the application, a static HTML page with special offers will display (Figure 3). This page is stored inside the application package itself.

    Figure 3. Overview page
    Figure 3. Overview page
  2. Find stores in a given geography

    When the user selects the Aisle Location link in the footer, it will bring Select and Find Store page (Figure 4). Before rendering, the panel will populate some hard coded Select Store Location list. The user selects a city and then clicks the Find button. The List of Stores panel displays a list of stores in the selected location (Figure 5). Each link has a corresponding Add Fav button to identify the store as a favorite store.

    Figure 4. Select and find store page
    Figure 4. Select and find store page
    Figure 5. List of stores page
    Figure 5. List of stores page
  3. Mark a favorite store

    When an Add Fav button is pressed, the store’s location is saved as a user preference. The next time the user goes to the home page, they will see the List of Favorite Stores page (Figure 6). This sample application will use the WL.Client.setUserPref() and WL.Client.getUserPref JavaScript APIs.

    Figure 6. List of favorite stores page
    Figure 6. List of favorite stores page
  4. Find aisle location for an item

    On the Locate an Item page, the user selects an item category and types the item name to find its corresponding physical location in the selected store. (Figure 7). The aisle location results will be display on the Aisle Location Details page (Figure 8). (For simplicity, this data is hardcoded within the sample application.)

    Figure 7. Locate an item page
    Figure 7. Locate an item page
    Figure 8. Aisle location details page
    Figure 8. Aisle location details page
    Figure 9. Save aisle location details in file page (Native UI)
    Figure 9. Save aisle location details in file page (Native UI)

Solution development steps

Back end integration

The purpose of this article is to show how Worklight optimization can help you develop a hybrid solution for mobile applications, and so details on back end integration are not provided here. Instead, for the sake of simplicity, application data is hardcoded inside the sample AisleLocator application.

Setting up the development environment, and then building, deploying, and testing the application in a device simulator are critical tasks when implementing any robust and device-independent mobile solution using IBM Worklight. This section will collate and list shorthand steps for performing the tasks involved in this process.

1. Setup development environment

See the Setup the environment section of this article for steps in setting up the Worklight Studio IDE.

2. Apply workflow development and optimization framework support

The sections below explain the process to create the AisleLocator application for multiple environments, using the Worklight optimization framework to reduce the development effort involved.

  1. Develop application

    For simplicity, the sample application is created here with static HTML pages only. To develop the AisleLocator application in Worklight Studio:

    1. Create a Worklight project called: FictDailyShop.
    2. Create these static following web pages under the common folder:
      • FictDailyShop.html (main HTML5 page)
      • FruitLocation.html
      • HomePage.html
      • SelectItem.html
      • SelectProvince.html
      • SelectStore.html
      • SelectStoreQuebec.html
    3. Create these JavaScript files in the common/js folder:
      • FictDailyShop.js
      • HomePage.js
      • MainPage.js
      • SelectItem.js
      • SelectProvice.js
      • SelectStore.js
    4. Create these style sheet files under the common/css folder:
      • FictDailyShop.css
      • reset.css
    5. Generate the code stream for all environments (Android, iPhone, Windows Phone, and BlackBerry).

      Worklight lets you add more or less environments to the project workspace based on your requirements.

      As mentioned earlier, common artifacts are stored in the common folder and files that are environment specific are created by the framework in a native folder for each respective environment, as shown in Figure 10.

      Figure 10. Folder structure of all environments
      Figure 10. Folder structure of all environments

      Figure 10 shows how the common resources are extended to each environment for optimization:

      • JavaScript: The JavaScript file in the environment folder has a function that will invoke the JavaScript function from the common folder. The environment JavaScript folder is appended to the common JavaScript folder.
      • CSS: The CSS file from an environment folder is appended to the CSS file from the common folder using the same property names, as they will override the common settings.
      • Images: The environment images folder contains the required default images for the specific environment.
      • Native: The native artifacts for each environment.
    6. Compile and build.
    7. Test the application. See Build and run application.
  2. Achieve optimization

    The Worklight optimization framework generates the corresponding web and native code for the respective environments, which can be further extended to include additional custom native code for each environment. Common code in the common folder is then merged with the device-specific content at build time to generate the appropriate native SDK artifacts for final packaging (for example, as APK/IPA files) for each environments. This whole process enables you to more easily focus on the business needs of the application, while enabling you to apply environmental tweaks to get the best possible experience on each device.

    Figures 11 through 14 show the native and web artifacts that are generated for Android, BlackBerry, Windows Phone, and iOS, respectively.

    Figure 11. Android artifacts generated
    Figure 11. Android artifacts generated
    Figure 12. BlackBerry artifacts generated
    Figure 12. BlackBerry artifacts generated
    Figure 13. Windows Phone artifacts generated
    Figure 13. Windows Phone artifacts generated
    Figure 14. iPhone artifacts generated
    Figure 14. iPhone artifacts generated

    The AisleLocator application uses a common Worklight client API, which is used across device platforms created by the optimization framework. Figure 15 shows environment-specific application details generated by Worklight.

    Figure 15. Environment specific details generated
    Figure 15. Environment specific details generated

    The Worklight environment can only be initiated from the main HTML page defined in the application-descriptor.xml file. Other HTML files should be used as fragments and loaded using the WL.client.loadpage operation of the Worklight API inside the main HTML5 file (for example, FictDailyShop.html). Listings 2 through 5 show examples.

    Listing 2.
    <div id="footer">
    	<table>
    		<tr>
    		<td><a href="#" onclick="MAINPAGENS.loadPage(2);">
    			<img border="0" src="images/home_button.png" 
    			width="100" height="100"></a></td>
    		<td><a href="#" onclick="MAINPAGENS.loadPage(1);"><img
    			border="0" src="images/AisleLocator.png" width="100" 
    			height="100"></a>
    		</td>
    		</tr>
    	</table>
    </div>
    Listing 3.
    MAINPAGENS = {};
    
    MAINPAGENS.init = function(){
    		WL.Logger.debug("MAINPAGENS::init");
    };
    	
    MAINPAGENS.loadPage = function(pageIndex){
    	WL.Logger.debug("MAINPAGENS::loadPage::pageIndex: "+pageIndex);
    	switch (pageIndex){
    		case 1:
    			WL.Page.load("SelectProvince.html", {
    				onComplete: function(){ PAGE1NS.init(); },
    				onUnload: function() { PAGE1NS.unload(); } 
    			});
    			break;
    		case 2:
    			
    			WL.Page.load("HomePage.html", {
    				onComplete: function(){Pagefav.init();   },
    				onUnload: function() {  } 
    			});
    			break;
    		
    			
    	}
    };
    
    MAINPAGENS.unload = function(){
    	WL.Logger.debug("MAINPAGENS::unload");
    	for (var att in MAINPAGENS){
            delete MAINPAGENS[att];
        }
    };
    Listing 4.
    PAGE2NS.addfav = function(pageIndex) {
    	switch (pageIndex){
    	case 1:
    		
    		WL.Client.setUserPref('favStore', 
    		'FictDailyShop 100,Dundas Street Mississauga,Ontario');
    		alert ("--->get fav "+WL.Client.hasUserPref('favStore'));
    		break;
    	
    	case 2:
    		WL.Client.setUserPref('favStore', 
    		'FictDaily Shop 200,Bloor Street Toronto,Ontario');
    		break;
    		
    	}
    }
    Listing 5.
    Pagefav={};
    	
    Pagefav.init = function() {
    	WL.Logger.debug("PAGE2NS::init");
    	
    	document.getElementById("favLoc").innerHTML = '<a href="#" 
    		onclick="Pagefav.buttonClick();">'+WL.Client.getUserPref("favStore")
    		+'</a>';
    	
    };
    
    Pagefav.buttonClick = function() {
    	WL.Logger.debug("Pagefav::buttonClick");
    	
    	WL.Page.load("SelectItem.html", {
    		onComplete: function(){ PAGE3NS.init(); },
    		onUnload: function() { PAGE3NS.unload(); } 
    	});	
    	
    };

3. Build and run application

This section shows the process for building, deploying and testing the AisleLocatior application for each environment using a device simulator.

BlackBerry

  • Prerequisites
    • VMWare Player
    • Google Chrome with Ripple intention installed.
  • To run and test
    1. Open a Chrome browser.
    2. Click the Ripple icon (right corner of the browser).
    3. Go to Setting and specify the following properties for the Build panel:
      • SDK: C:\Program Files\Research In Motion\BlackBerry 10 WebWorks SDK 1.0.4.11
      • Project-Root: C:\supal\project\worklight\workspace\FictDailyShop\apps\FictDailyShop\blackberry\native
      • Output: C:\supal\temp
      • ArchiveName=FictDailyShop
    4. On the Launch panel, specify:
      • Device IP: Your VMWare Device ID
      • Password (optional): Specify as per your setting.
    5. Close the Setting window.
    6. Select Setting > Package & launch.
    7. This will run your application in the VMWare Player Blackberry Simulator. VMWare Player should be in running state.
    8. See sample output in Figure 22.
  • To troubleshoot
    1. Check config.xml with these values:
      • version="1.0.0.0"
      • rim:backButton="exit"
      • id="FictDailyShop"
    2. To get Device IP and password(optional):
      1. Install BlackBerry 10 Dev Alpha Simulator for Windows.
      2. Install and run Start VMware Player.
      3. Click Open a Virtual Machine..
      4. Navigate to the folder where you installed the simulator and select the BlackBerry10Simulator.vmx file or the BlackBerry PlayBook Simulator.vmx file.
      5. Click Open.
      6. Click Play virtual machine.
      7. In the BlackBerry 10 simulator screen, tap image of Settings icon Settings.
      8. Within the settings, select Security and Privacy > Development Mode, then set the Use Development Mode switch to on.
      9. Set the device ID password by creating a new one.
      10. The IP address is displayed in the lower left corner of the simulator's screen.

      In the Ripple Simulator, the setting should look like Figure 16.

      Figure 16. Ripple simulator
      Figure 16. Ripple simulator

      After you click the Package & Launch button, you should see the build success message, as shown in Figure 17.

      Figure 17. Buiild message
      Figure 17. Buiild message

iOS

  • Prerequisites
    • Mac OS X Mountain Lion 10.8.2 VMware image
    • VMWare Player
  • To run and test
    1. Install Mac OS X Mountain Lion on VMware (see Resources).
    2. Run the image using VMware player.
    3. Configure your Mac environment with all recommended and default instructions (such as user credential, Internet connections, and so on).
    4. In the Mac environment, download and install XCode V4.6.
    5. Transfer the <Local drive>\FictDailyShop\apps\FictDailyShop\iphone\ directory from your local OS to the Mac environment.
    6. Once transferred, you will have a fully compatible FictDailyShop native Xcode application like here.
    7. Go to the iphone/native folder.
    8. Right-click on the FictDailyShopFictDailyShopIphone.xcodeproj file and open with Xcode application. This will open the project stream in XCode. It should look like Figure 18.
      Figure 18. iOS Workight project structure
      Figure 18. Workight iOS project structure
    9. From the XCode Workbench, Clean and Build the project.
    10. Set Active Schema to desired Simulator (for example, iPhone).
    11. Select Run to preview the FictDailyShop AisleLocator application in the iPhone simulator.
    12. See sample output in Figure 21.
  • To troubleshoot

    In the XCode IDE, the FictDailyShop project should look like Figure 18.

    1. You might see the Run button is disabled. To enable it and run the FictDailyShop project, you need to set the target by clicking the Add target button and subsequently set active schema to the desired simulator (iPhone, iPad).
    2. Running the FictDailyShop app within Xcode can cause errors such as “custom build phase script (buildtime.sh) has Permission denied”. In that case, change the permission to executable by running this command from the terminal: $> chmod “a+x" buildtime.sh. (This could occur in older version of Worklight.)

Windows Phone

  • Prerequisites
    • Microsoft Visual Studio 2010 Express for Windows Phone.
  • To run and test
    1. Open Visual Studio 2010 for Windows Phone.
    2. Open the project .csproj file in the studio.(for example, <project root>\FictDailyShop Code\FictDailyShop\apps\FictDailyShop\windowsphone\native\FictDailyShop.csproj)
    3. Build the project and save the file.
    4. Select Deploy the app from the Build option.
    5. See sample output in Figure 26.
  • To troubleshoot

    In the Microsoft Visual Studio 2010 Express for Windows Phone, the project should look Figure 19.

    Figure 19. Workight Windows project structure
    Figure 19. Windows Workight project structure

Android

  • Prerequisites
    • Android SDK.
    • Configure Android Simulator
  • To run and test
    1. Right-click on common app, then select Run as > Build All and Deploy.
    2. A FictDailyShopFictDailyShopAndroid project gets created upon successful build.
    3. Right-click on the FictDailyShopDailyShopAndroid project and Run as > Android Application.
    4. The application will run on the Anrdoid simulator.
    5. See sample output in Figure 24.
  • To troubleshoot
    1. Check for the correct version of the JDK. Eclipse should be installed based on OS (that is, 32 bit or 64 bit).
    2. Check to make sure the Android SDK is configured on the build path.
    3. Check to make sure the Android Simulator is configured in Eclipse.

    In the Project Explorer of the Eclipse IDE, the build project should like Figure 20.

    Figure 20. Workight Android project structure
    Figure 20. Workight Android project structure
Figure 21. iOS: AisleLocator Home page
Figure 21. iOS: AisleLocator Home page
Figure 22. BlackBerry: AisleLocator home page
Figure 22. BlackBerry: AisleLocator home page
Figure 23. BlackBerry: Find store after selecting province
Figure 23. BlackBerry: Find store after selecting province
Figure 24. Android: Find store after selecting province
Figure 24. Android: Find store after selecting province
Figure 25. Android: List of stores with Add to Fav button
Figure 25. Android: List of stores with Add to Fav button
Figure 26. Windows Phone: Find item within a store
Figure 26. Windows Phone: Find item within a store
Figure 27. Windows Phone: Aisle location details
Figure 27. Windows Phone: Aisle location details

Customizing for specific environments

There are two ways you can customize environments using Worklight:

  1. For each environment, you can include code in the Worklight API for native functions, and also include comparable code for the other environments.
  2. Selected cosmetic or functionality changes can be achieved by changing the code within the environment specific folder; these changes would then only impact the specific environment only.

API customization

In the implementation of the above use case, the Worklight provided API to save the User Preference is specifically for Android only. If an operation exists in the Worklight API for every environment, then it can be used within those environments.

The example presented here implemented the following additional use case for Android to show how AisleLocator could be a hybrid application using the Worklight optimization framework.

Here is what you can do within the Android folder to make AisleLocator a hybrid application:

  1. Copy FruitLocation.html from the common folder and add it to the android folder. Apply the changes shown in Figure 28 and save the file.
    Figure 28. Customized FruitLocation.html for Android
    Figure 28. Customized FruitLocation.html for Android
  2. Add the FruitLocation.js file in Listing 6 to the android folder. This code contains native Android code.
    Listing 6.
    function saveNativePage ()
    {	
    	var params = {nameParam : $('#nameInput').val()};
    	WL.NativePage.show('com.FictDailyShop.SaveNative', dummyPage, params);
    }	
    
    function dummyPage(data){
    
    }
  3. Add the lines of code below to the AndroidManifest.xml file:
    • <activity android:name=".SaveNative"></activity>
      (For native Android code)
    • <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
      (For giving write permission for Android java code in SD card.)
  4. Add SaveNative.java in the src/com directory in the Android folder (Figure 29).
    Figure 29. Add ‘SaveNative.java’ class and Code Snippet
    Figure 29. Add ‘SaveNative.java’ class and Code Snippet
  5. Build and run the application in the Android simulator. See the sample output in Figures 30 through 32.
    Figure 30. Aisle Location details with SaveAisleLocation button
    Figure 30. Aisle Location details with SaveAisleLocation button
    Figure 31. Android native page that saves aisle location to SD card
    Figure 31. Android native page that saves aisle location to SD card
    Figure 32. Android native page with successful saveToSDCard message
    Figure 32. Android native page with successful saveToSDCard message

Conclusion

The article illustrated the capabilities, architecture, and development approach using the IBM Worklight optimization framework for creating cross platform mobile applications. Using a sample business case, you saw how it is possible to efficiently implement and deliver a mobile solution while addressing the challenges and redundancies that often inhibit the ease of developing for multiple environments and cross-device ecosystems at the same time. The high level development steps described here provide a sense of how you will iterate through the development workflow of creating device-independent mobile applications using the Worklight optimization framework for actual enterprise business cases.


Acknowledgement

The authors thank Logesh Vincent for his contributions, reviews, and suggestions to this article.


Download

DescriptionNameSize
Sample projectFictDailyShop.zip29MB

Resources

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Select information in your profile (name, country/region, and company) is displayed to the public and will accompany any content you post. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into WebSphere on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=WebSphere, Mobile development, Agile transformation
ArticleID=937486
ArticleTitle=Using the IBM Worklight optimization framework to build a cross-platform mobile application for multiple devices
publish-date=07172013