Required Technical Background
This article is not a tutorial on developing applications using Web Experience Factory (WEF), Worklight, or iOS. It is assumed that you are already very familiar with using WEF to develop and deploy web applications. If you are just starting out with WEF you should first go through the many tutorials, “getting started” articles, and model samples available on the WEF Wiki: http://www-10.lotus.com/ldd/pfwiki.nsf/
. Likewise, there are many resources available for Worklight that provide foundational knowledge on how Worklight is used to create applications for various mobile devices. This article will not teach you how to use Worklight to create mobile applications.
Developing applications for iOS—even relatively simple hybrid shells—can be quite involved and requires that you follow Apple's developer process. That process includes using Apple hardware, Apple developer tools, and being enrolled in the iOS Developer Program. Details can be found at the iOS Dev Center: https://developer.apple.com/devcenter/ios/index.action
Required Development Assets
The following hardware, software, and configuration files are required to develop and test hybrid shell applications for iOS.
• Apple desktop or laptop running an OS X version that supports Xcode 4.5 or 4.6
• Xcode 4.5 or 4.6 and iOS 6 SDK installed on the Apple hardware
• Eclipse installed on the Apple hardware where Xcode is installed
• Worklight 184.108.40.206 plugins installed into the Eclipse installed on the Apple hardware
• One or more Apple iOS devices running iOS 6 or later
• Development signing certificate loaded into Xcode
• Development provisioning profile loaded into Xcode and the iOS devices
The following software is required to develop WEF web applications rendered by the shell.
• WEF 220.127.116.11 installed on Windows (WEF does not currently support developing on OS X)
• IBM Multi-Channel FeaturePack for IBM Web Experience Factory v8.0
• Portal, WebSphere, or WEF's embedded WASCE server
Development Environment Setup
The following steps must be completed to create the base-line development environments in which hybrid iOS applications can be developed and tested. Once these environments are in place you can proceed to the next section of the article that covers how to generate the iOS code artifacts for the shell and modify them to render a WEF web application.
WEF Project Creation
1. Install WEF 8..0.0 and the WEF 18.104.22.168 fixpack.
2. Create a new WEF 22.214.171.124 project
3. Install the IBM Multi-Channel FeaturePack for IBM Web Experience Factory v8.0
4. Add the sample “CameraTest” model (available on the WEF Wiki) to the project
5. Deploy the project to the chosen application server
” series of developerWorks articles.
Worklight Project Creation
To create a base-line Worklight project, you must complete these steps on your Apple desktop or laptop:
1. Install a copy of Eclipse compatible with Worklight 126.96.36.199
2. Install Worklight's 188.8.131.52 plugins into Eclipse
3. Create a new Worklight project and select the “Hybrid Application” template
4. Add an iPhone and/or iPad Worklight Environment to the project
WEF Project Path
iOS Specific Name
Note: worklight/wlclient/js/wlgap.ios.js also contains iOS specific code, but in the Worklight 184.108.40.206 release it already has a unique name for iOS. This name should not be changed.
Generating iOS Code Artifacts and Building the Hybrid Shell
In the Worklight project right-click on the “iphone” or “ipad” folder that was added to the project and select “Run As” → “Xcode Project”. This will cause Worklight to generate an Xcode project that contains the iOS code, configuration files, and build scripts required to create the shell application and deploy it to a device. After a short pause Xcode will launch and display the content of the generated project. The Xcode project layout will be similar to the following
To have the shell application render a WEF application you need to modify one resource file and change one generated Object-C file.
The resource file named “Resources/Cordova.plist” controls various aspects of how the shell application exposes the native features of a device to the hosted web application. If this resource file is not modified as described below, then the WEF application may not render as expected nor have access to device features such as the camera and geo-location data. A correctly modified Cordova.plist is shown below.
The following changes were made to the default values generated by Worklight.
Overriding the URL to be Rendered
Allows the web application to read geo-location data.
Allows the shell to render the externally defined WEF web application instead of the default content bundled into the shell.
By default the shell will render sample content bundled into the shell. The URL of the content is defined in an Objective-C file whose name matches the name of the Worklight project in Eclipse. The URL needs to be overridden so that the shell will instead render the WEF web application. The image below shows the generated code with a WEF override URL.
The message didFinishWLNativeInit: is called by the Worklight shell after it has finished initialization and is ready to render the shell's content. As shown above a URL points to a stand-alone WEF application. When run in a simulator or device the shell will render the WEF application. At this point you have everything that is needed to generate and deploy the shell application and have it render the WEF application. The steps required to sign the shell application and load it onto a device for testing are the same as for any other native iOS application. Refer to Apple's iOS documentation for the required steps if you are unfamiliar with this phase of iOS development.
In all other other cases the builder input must be set to “Always Include.
Note: If multiple Camera builders are used in a WEF application, then you must specify the same input value in each builder. Failure to do so may cause problems accessing the camera on some pages in the application.
Verifying the Shell Application
Clicking the “Take Picture” button will activate the camera and allow you to take one or more pictures. When you click the “Use” button in the camera's Preview screen the picture will appear in the web application as shown in this next screen shot.
Clicking on the “Submit Pic” button submits the picture to the WEF web application and you will see this next screen in the shell.
Clicking on “Get More Pictures” will return you to the first screen.