ShowTable of Contents
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. Likewise, there are many resources available for Worklight that provide foundational knowledge on how Worklight is used to create applications for various mobile devices.
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.
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 5
- Xcode 5 and the iOS 7 SDK installed on the Apple hardware
- Eclipse compatible with Worklight 220.127.116.11 installed on the Apple hardware hosting Xcode
- Worklight 18.104.22.168 (build 20140427-1450 or later) plug-ins installed into Eclipse
- 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 8.5 installed on OS X, Windows, or Linux
- Portal, WebSphere, or WEF's embedded Liberty server
- WEF application WAR deployed to Portal, WebSphere, or WEF's embedded Liberty server
- Worklight feature set added to the WEF project used to generate the deployed WAR
- One or more Worklight enabled models in the WEF project
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 remote WEF web application.
WEF Project Creation
- Install WEF 8.5
- Create a new WEF 8.5 project
- Add the Worklight feature set to the project
- Add the sample “CameraTest” model (available on the WEF Wiki) to the project
- Deploy the project to the chosen application server
Worklight Project Creation
To create a base-line Worklight project, you must complete these steps on your Apple desktop or laptop:
- Install a copy of Eclipse compatible with Worklight 22.214.171.124
- Install Worklight's 126.96.36.199 plug-ins into Eclipse
- Create a new Worklight project and select the “Hybrid Application” template
- Add an iPhone and/or iPad Worklight Environment to the project
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 compile the shell application and deploy it to a device or a simulator. 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:
Overriding the URL to be Rendered
By default the shell will render sample HTML content bundled into the shell's executable. 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 remote 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 remote stand-alone WEF application. When run in a simulator or device the shell will make a request to this URL and render the response. 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.