Exercise 1

V9.
0
Student Exercises
EXempty
Exercise 1. Installing IBM Worklight Studio and

developing an application
What this exercise is about
In this exercise, you install IBM Worklight Studio V6.2, configure an Android
development environment in Worklight Studio, and develop a simple mobile
application that you can run on an Android or iOS platform.
What you should be able to do

At the end of this exercise, you should be able to:
Install IBM Worklight Studio Developer Edition
Configure an Android or iOS development environment
Develop a simple "Hello Worklight" mobile application
Test the application in the browser and on an Android or iOS virtual
device
Introduction
IBM Worklight Studio provides a complete environment for developing mobile
applications in an Eclipse-based integrated development environment (IDE).
It includes coding tools, JavaScript libraries, and an embedded Worklight
Server to facilitate the development of mobile applications that are targeted
to run on multiple platforms, including Android, iOS, BlackBerry, and
Windows Phone.
In the first part of this exercise, you install IBM Worklight Studio from an IBM
Worklight V6.2 Developer Edition package. This product edition is free to
download from the IBM Mobile development website at:
https://www.ibm.com/developerworks/mobile/worklight.html
You configure it for Android development, a platform that is openly supported
on both Windows and Mac OS. Even if you are using a Mac OS computer
and want to develop for the iOS platform only, this exercise demonstrates the
capability of IBM Worklight to support cross-platform development.
Finally, you create a simple application and test it by using the IBM Worklight
Studio browser preview tools and a device emulator.
Optionally, if you have a physical mobile device and the prerequisite
certificate or driver software, you can test the application on your mobile
device.
Copyright IBM Corp. 2014
Exercise 1. Installing IBM Worklight Studio and developing an

Course materials may not be reproduced in whole or in part
without the prior written permission of IBM.
1-1
Student Exercises
Requirements
This exercise requires that you already have the following software that is
installed on your computer:
Course lab files, which are in C:\LabFiles
A supported JDK:
- IBM Runtime Environment, Java Technology Edition 6.0
- Oracle Java SDK/JRE/JDK 7.0
- Sun Java SDK/JRE/JDK 6.0/1.6 Update 24
Eclipse IDE for Java EE Developers Juno 4.2.2 (SR2)
Firefox v13.0.1 or later if you are using a Windows computer
Xcode 4 or later if you are using a Mac OS computer and want to develop
for the iOS platform
The appropriate provisioning certificates if you intend to test on a physical
device on iOS
You also must have an Internet connection to download the software that is
installed in the exercise, such as the Android Software Development Kit
(SDK).
The specific details on how the course lab files and required software should
be installed are provided in the courses Lab Setup Guide.
1-2
Mobile Application Development with IBM Worklight Foundation V6.2

V9.0
Student Exercises
EXempty
Exercise instructions
This exercise is divided into the following parts:
1. Installing IBM Worklight Studio
2. Setting up an Android development environment
3. Developing a simple application
The instructions can be followed on a Windows or Mac OS development computer if it meets the
requirements that are identified in the Requirements section. Depending on whether you are
developing for an Android or iOS platform, some steps might be environment-specific or optional. If
so, they are indicated as such.

1-3
Student Exercises
1.1. Installing IBM Worklight Studio

IBM Worklight Studio is installed from an IBM Worklight V6.2 Developer Edition package by using
the Eclipse Update Site approach. This approach allows you to either install it directly from an
update website, or download it as a compressed file first and then install it as an archive. In this
exercise, you install IBM Worklight Studio V6.2 from an archive file that is provided to you as part of
the lab files for the course.
Information
For more information on downloading IBM Worklight Developer Edition and the different installation
options available, go to: https://www.ibm.com/developerworks/mobile/worklight/
__ 1.
Start Eclipse and open a new workspace.
__ a.
If you are using the Windows virtual machine that is built for this course, double-click the
Eclipse icon on the desktop. Otherwise, start Eclipse by the method that is appropriate
to your computer. The Workspace Launcher window opens and asks you to select a
workspace.
__ b.
In the Workspace Launcher window, type C:\LabWork\WorklightWS in the Workspace

field.
__ c.
Click OK. Eclipse opens and displays the Welcome view.
__ d.
In the Welcome view, click the Workbench icon at the upper right to close it and open
the Java EE perspective in the workbench.
__ 2.
Install the Worklight Studio plug-in from the local archive file.
__ a.
1-4
From the menu bar, click Help > Install New Software.

V9.0
Student Exercises
EXempty
__ b.
On the Available Software page, click Add to add the location of the archive file to the
workbenchs list of known software sites.
__ c.
In the Repository archive window:

1) Enter IBM Worklight Studio in the Name field.
2) Click Archive next to the Location field. The Repository archive window
opens to allow you to select the location of an archive. Go to
C:\LabFiles\Software, select iws_eclipse_6.2.0.zip, and click Open.
__ d.
Click OK to open the contents of the archive.

1-5
Student Exercises
__ e.
On the Available Software page, select the IBM Worklight Studio Development Tools
check box. This action selects all of the archive contents:
IBM Dojo Mobile Tools
IBM JQuery Mobile Tools
IBM Worklight Studio
1-6
__ f.
Click Next.
__ g.
The Install Details page opens to allow you to review the items to be installed. Click
Next.

V9.0
Student Exercises
EXempty
__ h.
On the Review Licenses page, select I accept the terms of the license agreements
and click Finish to begin the software installation.
__ i.
When the installation completes, the Software Updates dialog box prompts you to restart
Eclipse to apply the changes. Click Yes to restart Eclipse.
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
__ 3.
In the Java EE perspective, notice that the toolbar now shows the Create a Worklight
Artifact icon.

1-7
Student Exercises
You successfully installed IBM Worklight Studio. Next, you configure it to enable development
for the Android platform.
1-8

V9.0
Student Exercises
EXempty
1.2. Setting up an Android development environment

To develop a mobile application for the Android platform in Worklight Studio, you must install the
Android Software Development Kit (SDK) and the Android Development Tools (ADT) plug-in for
Eclipse. You can then create an Android virtual device (AVD) configuration to use for testing.
Installing the Android SDK is a two-step process:
1. Install the core SDK tools by using the starter package installer on Windows or a
downloaded compressed file on Mac OS.
In this first step, you download and install the core SDK tools, which you use in the next
step to download the rest of the SDK package.
2. Install an Android SDK platform and the SDK platform tools by using the Android SDK
Manager.
In this second step, you use the Android SDK Manager tool that was installed as part of
the core SDK tools to download and install an Android SDK platform and the SDK
platform tools.
Information
For online instructions on how to get and install the Android SDK, go to:
http://developer.android.com/sdk/installing/index.html
Section 1: Installing the core Android SDK tools

__ 1.
Open a browser to: http://developer.android.com/sdk/index.html
__ 2.
On the Get the Android SDK page, click VIEW ALL DOWNLOADS AND SIZES to see all of
the installer packages available by OS platform. The arrangement of the information on the
screen might be different when you do the download.

1-9
Student Exercises
__ 3.
Continue with step 4 if you are using a Windows computer or with step 5 if you are using a
Mac OS computer.
STOP
STOP
Stop
The following instructions are for Windows. Go to step 5 for Mac OS.
__ 4.
For a Windows computer, download and run the Android SDK starter package installer:
__ a.
Double-click installer_rXX-windows.exe, where XX is the latest installer version

number.
__ b.
Select the check box to accept the license agreement and click Download.
__ c.
If you get a Security Warning dialog box, click Run. When the download finishes, the
Android SDK Tools Setup wizard starts.
__ d.
On the Welcome to the Android SDK Tools Setup Wizard page, click Next.
__ e.
The wizard checks that a valid Java SDK is installed and displays its location in the Java
SE Development Kit page.
__ f.
Click Next.
__ g.
On the Choose Users page, accept the default selection of Install just for me and click
Next.
__ h.
On the Choose Install Location page, change the entry in the Destination Folder field to:
C:\Program Files\Android\android-sdk
__ i.
Click Next.
__ j.
On the Choose Start Menu Folder page, click Install.

The wizard extracts and installs the Android SDK tools and displays the Installation
Complete page when finished.
1-10 Mobile Application Development with IBM Worklight Foundation V6.2

V9.0
Student Exercises
EXempty
__ k.
On the Installation Complete page, click Next.
__ l.
On the Completing the Android SDK Tools Setup Wizard page, make sure that Start
SDK Manager is selected.

1-11
Student Exercises
__ m. Click Finish. The Android SDK Manager window opens to allow you to select the SDK
packages that you want to install, including tools, specific SDK versions, and other
extras.
__ n.
STOP
STOP
Proceed to the next subsection, Installing an Android SDK platform and the SDK
platform tools.
Stop
The following instructions are for Mac OS. Go to step 6 if you are using Windows.
__ 5.
For a Mac OS computer, download the Core SDK Tools compressed package.
__ a.
Double-click android-sdk_rXX-macosx.zip, where XX is the latest package version

number.
The compressed file is downloaded and automatically extracted in the default
Downloads folder.
__ b.
Use Finder to open the Downloads folder and move the android-sdk-macosx folder
out of it and into the /Users/<yourUserName> folder (the root folder for your user
name). Make sure to remember this new location, as you must specify it when
configuring the ADT tool in the next section.
__ c.
In its new location, expand android-sdk-macosx/tools and double-click android to

start the Android SDK Manager tool.
__ d.
In the Are you sure you want to open it? confirmation dialog box, click Open.
The Android SDK Manager window opens to allow you to select the SDK packages that you
want to install, including tools, specific SDK versions, and other extras. Make sure that you
only select the required packages, otherwise the download takes time.
Section 2: Installing an Android SDK platform and the SDK platform

tools
__ 1.
In the Android SDK Manager window Packages section:
__ a.
Select the Android SDK Platform-tools check box and the check box for the latest
version of Android SDK Build-tools (under Tools).

V9.0
Student Exercises
EXempty
__ b.
Expand the Android 4.4.2 (API 19) check box and select the following components:
- SDK Platform
- ARM EABI v7a System Image
- Google APIs (ARM System Image)
Note
You are encouraged to use the latest Android SDK API level, which is Android 4.4.2 (API 19). In
some cases, an application might require a different API level. You can install as many API levels
as needed for your project.
__ c.
For Windows only, make sure that Google USB Driver is selected under Extras.
__ d.
In total, six packages are selected for a Windows installation, or five for Mac OS. Click
Install n packages (where n is either 6 or 5).
__ 2.
In the Choose Packages to Install dialog box, select Accept License and click Install.
The package installation starts, and the Android SDK Manager Log window opens to show
progress messages.
__ 3.
When the installation completes, the message Done loading packages is displayed. In the
Android SDK Manager Log window, click Close.
__ 4.
Verify that the packages that you selected have the status as Installed in the Android SDK
Manager window.

1-13
Student Exercises
__ 5.
Close the Android SDK Manager window.
Section 3: Installing the ADT plug-in for Eclipse

Next, install the Android Development Tool plug-in for Eclipse. This plug-in is designed to extend
the capabilities of Eclipse to develop Android applications easily. These capabilities include the
ability to create Android Virtual Devices (AVD) to test applications and to open the Android SDK
Manager directly from within Eclipse.
__ 1.
If your C:\LabWork\WorklightWS workspace is not already opened, start Eclipse and open
it.
__ 2.
From the menu bar, click Help > Install New Software.
__ 3.
On the Available Software page, click Add.
__ 4.
In the Add Repository window:
__ a.
In the Name field, type: ADT Plug-in
__ b.
In the Location field, type: https://dl-ssl.google.com/android/eclipse/
__ c.
Click OK. Wait a few minutes for the repository to be accessed over the Internet.

V9.0
Student Exercises
EXempty
__ 5.
On the Available Software page, select the Developer Tools check box and click Next.
__ 6.
The Install Details page opens to allow you to review the items to be installed. Click Next.
__ 7.
On the Review Licenses page, click I accept the terms of the license agreements and
click Finish to begin the plug-in installation.
__ 8.
In the Security Warning dialog box, click OK to install the software.
__ 9.
When the installation completes, the Software Updates dialog box prompts you to restart
Eclipse to apply the changes. Click Yes to restart Eclipse.
__ 10. In the Workspace Launcher window, click OK to return to your workspace.

__ 11. On the Contribute Usage Statistics page, select No and click Finish.
__ 12. In the Java EE perspective, click Window on the menu bar, then Customize Perspective.

1-15
Student Exercises
__ 13. Click the Command Groups Availability tab. Select the Android SDK and AVD Manager
and Android Wizards check boxes.
When you click the Window menu, you see the Android commands.
__ 14. Open the Android SDK Manager and click Window > Android SDK Manager. It shows the
same packages that you installed in the previous section with a status of Installed.
__ 15. Close the Android SDK Manager window.

V9.0
Student Exercises
EXempty
Section 4: Creating an Android virtual device

Create an Android virtual device to use for testing your mobile applications.
__ 1.
From the menu bar, click Window > Android Virtual Device Manager.
__ 2.
In the Android Virtual Device Manager window, click Create.
__ 3.
In the Create new Android Virtual Device window:
__ a.
In the AVD Name field, type: Android_4.4.2
__ b.
For Device, select Nexus One (3.7, 480 x 800: hdpi).
__ c.
In the Target menu, select Android 4.4.2 API Level 19.
__ d.
From the drop-down, select Skin with dynamic hardware controls.
__ e.
Click OK.

1-17
Student Exercises
__ 4.
In the Android Virtual Device Manager window, confirm that the virtual device that you
created is labeled with a green check mark, which indicates that it is a valid AVD.
__ 5.
Start the virtual device.
__ a.
Select Android_4.4.2 and click Start.
__ b.
In the Launch Options dialog box, change the emulator screen size so that it does not
occupy the entire screen.
i.
Select Scale display to real size.
ii. Type 6 in the Screen Size (in) field.

iii. Select Wipe user data (this option is useful when testing applications).
iv. Click Launch.

V9.0
Student Exercises
The Android Emulator window opens and shows the launch progress.
EXempty
__ c.
Wait a few minutes for the virtual device to start. It can take several minutes, depending
on the speed of your computer.
Note
The virtual device emulator window can hide behind the Eclipse workbench. Monitor the Windows
taskbar to see whether it is open. Also, you can get an alert dialog box or warning messages in the
Android Console if a class is deprecated. You can ignore these warnings.

1-19
Student Exercises
__ d.
Wait until the locked screen is displayed, and then click and drag the lock icon to unlock
the screen.
__ e.
Click Home.
__ f.
In the emulator home screen, click the circle icon to see the applications screen.

V9.0
Student Exercises
EXempty
__ g.
In the apps screen, click OK. The screen shows all available applications.
__ h.
Familiarize yourself with the controls in the Android virtual device emulator and then
close the window when you are finished.
__ 6.
Close the Android Virtual Device Manager window so that you can return to the Eclipse
workbench.
You successfully set up an Android development environment, and you are now ready to develop
your first application in Worklight Studio.

1-21
Student Exercises
1.3. Developing a simple application

IBM Worklight Studio includes wizards that facilitate common development tasks and an embedded
Worklight Server to quickly test mobile applications without having to leave the integrated
development environment.
In this part of the exercise, you use the following steps to familiarize yourself with the Worklight
Studio tools and framework by developing a simple Hello Worklight application:
1. Create a HelloWorklight hybrid project and build an application.
2. Preview the application in the Worklight Console as a common resource.
3. Add a development environment to the application.
4. Preview the application in the Mobile Browser Simulator.
5. Test the application on a virtual device emulator.
6. Optionally, test the application on a physical device.
Section 1: Creating a HelloWorklight project and building an application

Start by using the New Worklight Project wizard to create a project for your application.
__ 1.
If your C:\LabWork\WorklightWS workspace is not already opened, start Eclipse and open
it.
__ 2.
From the menu bar, click File > New > Worklight Project (alternatively, you can click the
Create a Worklight Artifact icon in the main toolbar).
__ 3.
In the Worklight Project page:
__ a.
Type HelloWorklightProject in the Project name field.

V9.0
Student Exercises
EXempty
__ b.
Make sure that Hybrid Application is selected in the Project Templates section.
__ c.
Click Next.

1-23
Student Exercises
__ 4.
On the Hybrid Application page:
__ a.
Type HelloWorklight in the Application name field.
This page also allows you to configure a JavaScript framework to add to your project.
__ b.
Click Finish. The wizard creates a new folder structure for the project and application in
the workspace. It also opens the index.html file in a split view.
__ c.
If you see a dialog box about Rich Page Editor browser compatibility, click OK.
__ 5.
In the Open Associated Perspective? dialog box, click No to stay in the Java EE
perspective.

V9.0
Student Exercises
EXempty
__ 6.
Explore the HelloWorklight project structure and generated content.
__ a.
In the Project Explorer view, review the folder structure that was created for
HelloWorklightProject:
adapters: This folder contains the source code for all adapters that belong to the
project. It is empty because you did not create any adapters for the project.
apps: This folder contains the source code for all applications that belong to the project.
You see a subfolder for the HelloWorklight application that you created by using the
wizard in the previous step.
bin: This folder contains the artifacts that result from building adapters, applications,
and server-side configuration and libraries.
server: This folder contains configuration information for the server.
- conf: IBM Worklight Server configuration files, such as worklight.properties
and authenticationConfig.xml
- lib: Precompiled libraries that must be deployed to the IBM Worklight Server
__ b.
Now, review the content that was generated for the application.

1-25
Student Exercises
- Under apps/HelloWorklight, you see the following structure:
common: This folder contains application resources common to all environments

(cascading style sheets (CSS), images, JavaScript, and HTML code)
legal: This folder contains License documents for the application or third-party
software that is used in the application
application-descriptor.xml: This folder contains metadata that is used to
define various aspects of the application
- Click the + (plus sign) next to each folder to expand it:
css:
- main.css: The main application CSS file
images:
- icon.png: Icon that is displayed on the device for the application
- thumbnail.png: Icon that is displayed on the Worklight Console for the
application
js:
- main.js: Main JavaScript file for the application
- initOptions.js: Initialization for the application.
- message.js: JSON object that holds all app messages for global and
multilingual support
index.html: This file is the main application HTML file, which the
device-rendering engine loads when deployed as a hybrid application on mobile
devices like iPhone and Android phones.

V9.0
Student Exercises
EXempty
- Review the contents of the application descriptor file. Double-click the

application-descriptor.xml file, and then click the Source tab to view the following
elements:
<application> is the root element of the descriptor. It has two mandatory

attributes:
- id: Contains the ID of the application. The ID must be identical to the
application folder name.
- platformVersion: Contains the version of the IBM Worklight Platform on
which the application was developed.
<displayName>, <description>, and <author> contain the name, description,
and author information for the application. They are displayed in the IBM
Worklight Console.
<mainFile> contains the name of the application main HTML file.
<thumbnailImage> contains the path name of the thumbnail image for the
application.

1-27
Student Exercises
Information
Each environment on which the application can run must be declared with a dedicated XML
element (for example, <android> or <iphone>). An environment-specific element is inserted
automatically as new environments are added to the project. This action is not shown in the image
because there are no environments declared yet.
- Close the application descriptor.

- Next, look at the main HTML file for the application. In the editor, click the
index.html tab to bring it forward, and then click Source.
Note
This HTML5 file contains the application skeleton and is the one defined in the application
descriptor. It loads all the web resources (scripts and style sheets) necessary to define the general
components of the application, and to hook to required document events.
- The name of the application is placed in the body by default.
- The main HTML file also references the JavaScript files in the js folder,
initOptions.js, main.js, and messages.js.

V9.0
Student Exercises
EXempty
__ 7.
Modify the application to display a formatted Hello Worklight! message with a colored
background by using HTML5 and CSS.
__ a.
In the editor Source view for index.html, replace the placeholder text in the body

Hello Worklight
With the following HTML code:
<div id="messageContent">
<p>Hello Worklight!</p>
</div>
Hint
You can copy and paste from the snippet file from:
C:\LabFiles\Resources\Exercise01\index.HTML.txt
This code adds a division element that is identified as "messageContent", which

contains a paragraph with the string Hello Worklight!
By identifying this element, you can apply a style sheet to it to assign it a background
color.
__ b.
Save your changes to index.html and verify that there are no errors. Click the Save
icon, or select File > Save.

1-29
Student Exercises
__ c.
Edit the main CSS file for the application to add a background style sheet and some
formatting for the Hello Worklight! message.
- In the Project Explorer view, open the HelloWorklight > css folder and double-click
main.css to open the file in an editor.
- Add this CSS style selector:
#messageContent {
background-color: aqua;
text-align: center;
padding: 12px;
font-family: sans-serif;
font-size: xx-large;
}
Hint
This code is also available to copy and paste from the snippet file that is in:
C:\LabFiles\Resources\Exercise01\main.CSS.txt
__ d.
Save your changes to main.css and verify that there are no errors.
__ e.
Refresh the Design view of the HTML page to show the effect of your changes:
- Click the editor tab for index.html.
- In the view toolbar, click the Refresh page icon to refresh the preview for the page.
It now shows the Hello Worklight! message in a large font and with an aqua
background.

V9.0
Student Exercises
EXempty
__ 8.
Next, build and deploy the HelloWorklight application to the embedded Worklight Server.
__ a.
In the Project Explorer view, right-click HelloWorklight in the apps folder and click Run
As > Build All Environments.
Wait until a message indicates that the build process is finished:

Application 'HelloWorklight' with all environments build finished.

1-31
Student Exercises
__ b.
As > Run on Worklight Development Server.
Wait until a message indicates that the deployment is successful:

Application 'HelloWorklight' deployed successfully with all environments.
You are now ready to test your application in the Worklight Console.

V9.0
Student Exercises
EXempty
Section 2: Previewing an application in the Worklight Console as a

common resource
IBM Worklight Studio supports various methods to test a deployed application. The simplest one is
to preview it as a Common Resource in the Worklight Console.
__ 1.
In the Project Explorer view, right-click HelloWorklightProject and click Open Worklight
Console.

1-33
Student Exercises
__ 2.
The Worklight Console is displayed within Worklight Studio. Click Preview as common
resources.
__ 3.
A new window displays a preview of the HelloWorklight application.
You can also access the Worklight Console from a web browser, as described in the
following step.

V9.0
Student Exercises
EXempty
__ 4.
Open a web browser window and enter the following URL:

http://localhost:10080/worklightconsole/
index.html#HelloWorklightProject,catalog
The IBM Worklight Console opens and lists the HelloWorklight application on the Catalog
tab (if you are asked for id and password, use admin/admin).
The Catalog page of the Worklight Console lists all deployed applications, and you can use
it to view and test applications.
__ 5.
Click the Preview as Common Resources link. A new browser tab or window opens, loads
the HelloWorklight application, and displays a page with the Hello Worklight! message in
the body.
Section 3: Adding a development environment to the application

IBM Worklight Studio allows you to add a platform-specific environment to an application to
customize its development for that particular platform. In this section, you add an Android and iOS

1-35
Student Exercises
environment to the HelloWorklight application and examine the resulting artifacts that are added to
its folder structure.
__ 1.
In the Project Explorer view, right-click the HelloWorklight application and click New >
Worklight Environment. The New Worklight Environment window opens.

V9.0
Student Exercises
EXempty
__ 2.
In the New Worklight Environment window, select iPhone and Android phones and
tablets.
__ 3.
Click Finish. After a few minutes, the Worklight Console messages pane displays the
message:
Application 'HelloWorklight' with environments [android, iphone] build
finished.

1-37
Student Exercises
The following new folders are added to the HelloWorklight application folder structure:
- An environment folder that is named android
- An environment folder that is named iphone
- An Android project folder that is named
HelloWorklightProjectHelloWorklightAndroid
__ 4.
Examine the android environment folder.
__ a.
In the Project Explorer view, expand the android folder under the HelloWorklight
application folder.
__ b.
Review its contents:

- css, images, and js folders: These folders mirror the corresponding folders that
are found in the application common folder. The android folder is intended to

V9.0
Student Exercises
contain web and native resources specific to an Android environment, while the
common folder holds resources shared by all of the application target environments.
EXempty
- native folder: This folder contains all of the application code and resources that are
organized in the structure of an Eclipse Android project so that it can be run in an
Android emulator or device. Worklight Studio automatically creates a separate
Android project that maps to this native folder. The native folder contains
automatically generated Android application code and includes several files and
subfolders.
__ 5.
Review the Android project that was created for the HelloWorklight application. In the
Project Explorer view, expand the HelloWorklightProjectHelloWorklightAndroid
project folder.
Note
Most of the content is the same as the content of the native folder in the application android
folder. As mentioned previously, to simplify development and testing, Worklight Studio creates a
separate Android project for the application and maps it to the android/native folder. This project
can then be used directly to start the Android emulator to test the application.

1-39
Student Exercises
__ 6.
Examine the iphone environment folder (you can skip this step if you are developing for the
Android platform only).
__ a.
In the Project Explorer view, expand the iphone folder under the HelloWorklight
application folder.
__ b.
Review its contents:

- css, images, and js folders: These folders mirror the folders that are found in the
application common folder. The iphone folder is intended to contain web and native
resources specific to an iPhone environment, while the common folder holds
resources shared by all of the application target environments.
- native folder: This folder contains all application code and resources that are
organized in a structure similar to that of an iPhone project in Xcode so that it can be
run in an iPhone simulator or device. The native folder contains automatically
generated iPhone application code and includes several files and subfolders.
- nativeResources: This folder contains resources that the native code uses.
- package folder: This folder contains a compressed file,
HelloWorklight-1.0-iphone.zip, that packages all of the applications
development artifacts. It can be transferred to a computer that has Xcode for
building and testing on the iPhone simulator or a physical device. This feature allows
you to develop the non-native part of an iOS application on a computer that does not
have Xcode. You can then transfer it to a Mac OS computer with Xcode for
completion or further testing. This compressed file is created for ease of transfer.
Now that you added an Android and iOS environment to your application, you can preview it in the
Worklight Mobile Browser Simulator.
Section 4: Previewing the application in the Mobile Browser Simulator

The Mobile Browser Simulator is a web application that helps you to test Mobile Web applications
without having to install the native SDK from a device vendor. It allows you to concurrently display

V9.0
Student Exercises
EXempty
multiple devices on one page and simulate the Apache Cordova APIs to access native device
functions such as the camera and the accelerometer.
__ 1.
First, build and deploy the HelloWorklight application.
__ a.
As > Build All Environments. Wait until a message indicates that the build process is
finished:
Application 'HelloWorklight' with all environments build finished.
As > Run on Worklight Development Server. Wait until a message indicates that the
deployment is successful:
Application 'HelloWorklight' deployed successfully with all environments.
__ 2.
In the Project Explorer view, right-click HelloWorklightProject and click Open Worklight
Console. The Worklight Console now displays information for the iPhone and Android
environments under the HelloWorklight application.

1-41
Student Exercises
__ 3.
Click the Android link.
A new browser tab or page opens to show the application in the Mobile Browser Simulator.
The application renders on an Android device simulator, and you see the Hello Worklight!
message with an aqua background.
Note
If you click the iPhone link instead, the Mobile Browser Simulator opens in a new tab or page and
renders the application on an Apple iPhone device simulator.

V9.0
Student Exercises
EXempty
__ 4.
Switch to a different Android device: Click Add Device, expand Android, and select HTC
One S (or the device platform of your choice).
The Mobile Browser Simulator displays the two devices side by side so that you can
compare them.

1-43
Student Exercises
You can close a device by clicking the X above it.
__ 5.
Change the device orientation. Click Rotate at the top of the device simulator view. The
simulator rotates the device 90 degrees and renders the Hello Worklight! message.
__ 6.
Click Rotate again to restore the original device orientation.

V9.0
Student Exercises
EXempty
__ 7.
Experiment with the other features of the Mobile Browser Simulator by selecting the
functions that are displayed on the left side of the page. For example, expand Geolocation
to see the settings for that feature.
__ 8.
When you are finished, close the Mobile Browser Simulator window.
Section 5: Testing an application on an Android virtual device emulator

A virtual device simulator provides a better platform for testing a mobile application as it simulates
more closely the capabilities of an actual physical device, particularly its native functions, which are
compared to a browser-based simulator. Both the Android Development Tools and the Xcode IDE
provide a device simulator that you can use to test mobile applications.
In this section, you test the HelloWorklight application on an Android Virtual Device emulator.

1-45
Student Exercises
IBM Worklight Studio integrates with the Android ADT tool and allows you to start an application in
an Android Virtual Device emulator from its generated Android project.
__ 1.
In the Project Explorer view, right-click the HelloWorklightProjectHelloWorklightAndroid

project and click Run As > Android Application.
As the application starts, you can view progress messages in the Console pane by clicking
the menu to Display Selected Console and selecting Android.
It can take several minutes for the emulator to load the application.
__ 2.
If you see the lock screen, click and drag the lock icon to unlock it.
__ 3.
Click Home in the emulator. The home screen is displayed.

V9.0
Student Exercises
EXempty
__ 4.
In the home screen, click the applications icon. The applications screen is displayed. An
icon for the HelloWorklight application is added, allowing it to be started like a native
application.
__ 5.
Click the HelloWorklight icon. The application starts and displays the expected message.
__ 6.
Close the Android Virtual Device emulator.
__ 7.
In the Eclipse workbench, the Auto Monitor Logcat dialog box is displayed. Click OK to
accept the default monitoring option.
This action opens the LogCat view in your workbench. LogCat is the Android device output
console where internal application log messages and information are written. It is useful for
debugging applications.

1-47
Student Exercises
Section 6: Testing an application on an iPhone emulator (Mac OS only)

If you are targeting an iOS platform, you must test your application on the iPhone emulator, a tool
that is provided in the Apple Xcode IDE.
__ 1.
Open your application in Xcode in one of the following ways:
__ a.
If you are running Worklight Studio in Eclipse on a Mac OS computer, you can open your
application directly in Xcode from within the workbench. In the Project Explorer view,
right-click the apps > HelloWorklight > iphone folder and click Run As > Xcode
Project.
Worklight Studio automatically opens the Xcode IDE in a separate window.

V9.0
Student Exercises
EXempty
__ b.
If you are running Worklight Studio on a non-Mac OS computer, you must transfer the
application Xcode project compressed file to the Mac OS computer first, and then open
it in Xcode.
Transfer the HelloWorklight-1.0-iphone.zip file that is found in the
HelloWorklightProject > apps > HelloWorklight > iphone > package folder to the
Mac OS computer.
On the Mac OS computer, double-click HelloWorklight-1.0-iphone.zip to extract its

contents to the current location.
Open the extracted folder and double-click
HelloWorklightProjectHelloWorklightIphone.xcodeproj. This file is the Xcode
project file for the application.
The application project opens in the Xcode IDE.

__ 2.
In Xcode, click HelloWorklightProjectHelloWorklightIphone in the Project Navigator view

to display the properties for the project in the editor pane.
__ 3.
Select the iPhone simulator as the scheme to use for testing:
__ a.
In the top toolbar, click the menu that is labeled iPad 6.0 Simulator.

1-49
Student Exercises
__ b.
__ 4.
Select iPhone 6.0 Simulator.
Click Run.
The simulator window opens and runs the HelloWorklight application, which displays the
Hello Worklight! message.
__ 5.
Click the iPhone simulators home button to see the iPhone springboard screen.

V9.0
Student Exercises
An icon is displayed for the HelloWorklight application that allows it to be started like a
native application.
EXempty
__ 6.
Click the HelloWorklight icon. The application starts again and displays the expected
message.
__ 7.
In Xcode, look at the Debug area in the Console view at the bottom of the window (you
might need to expand it to read it clearly). It contains messages that are logged during the
execution of your application that can be useful when debugging it.
__ 8.
When you are finished exploring it, close the iOS Simulator.
You successfully developed your first application in Worklight Studio.

1-51
Student Exercises
1.4. Optional exercises

To complete the testing of your mobile application, you must test it on an actual physical device. If
you have a physical device, the prerequisite certificate or driver software, and a cable to connect it
to your computer, you can use the instructions that follow this paragraph to test the HelloWorklight
application on it. The instructions are different, depending on whether you use an Android or iOS
device.
Section 1: Testing the application on an Android device

Information
For more information and the latest up-to-date details on how to test your application on an Android
device, see: http://developer.android.com/tools/device.html
__ 1.
Turn on USB Debugging on your device.

On Android 3.2 or earlier, you can find the option under Settings > Applications >
Development.
On Android 4.0 and later, it is in Settings > Developer options.
On Android 4.2 and later, Developer options is hidden by default. To make it available,
go to Settings > About phone and tap Build number seven times. Return to the
previous screen to find Developer options.
Select the USB debugging check box.
__ 2.
If you are developing on Windows, set up your system to detect your device by installing the
appropriate USB driver. You must install a USB driver for adb. For an installation guide and
links to OEM drivers, see the OEM USB Drivers document at
http://developer.android.com/tools/extras/oem-usb.html
Note
If you are developing on Mac OS X, it just works.
__ 3.
Connect the device to your computer by using a USB cable.
__ 4.
Run you application on the device:
__ a.
In the Project Explorer view, right-click the

HelloWorklightProjectHelloWorklightAndroid project and click Run As > Android
Application. The Android Device Chooser window opens, showing all of the available
emulators and connected devices.
__ b.
In the Android Device Chooser window:

- Click Choose a running Android device.

V9.0
Student Exercises
- Select the device on which you want to install and run the application.
EXempty
Click OK.
The application is installed and starts on the device.
Section 2: Testing the application on an iOS device

Information
For more information and the latest up-to-date details on how to test your application on an iOS
device, go to the Apple iOS Development Center at
https://developer.apple.com/devcenter/ios/index.action
Before you can use an iOS device for testing, you must provision it for development. This process
involves:
Obtaining a developer certificate that allows you to sign applications.
Obtaining a provisioning profile that identifies your developer certificate, your device,
and the applications you can run on the device.
If you did these prerequisite steps, you can use the following instructions to test your application on
the device.
__ 1.
Connect the device to your computer by using a USB cable.
__ 2.
In Xcode, select an actual device in the Scheme menu.
__ 3.
Click Run. After your code compiles successfully, Xcode uploads and runs your application
on the device.
End of exercise

1-53
Student Exercises
Exercise review and wrap-up

In this exercise, you installed IBM Worklight Studio Developer Edition and configured it to allow you
to develop mobile applications for the Android and iOS platforms. You then developed a simple
Hello Worklight application and walked through the typical steps for developing a mobile
application in Worklight Studio. You also learned how to use the Worklight framework and tools that
enable and facilitate cross-platform development, including the platform environment optimization
framework and the Mobile Browser Simulator.

Exercise 1

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Exercise 1

Caricato da

Copyright:

Formati disponibili

V9.

Exercise 1. Installing IBM Worklight Studio and

What you should be able to do

Copyright IBM Corp. 2014

Exercise 1. Installing IBM Worklight Studio and developing an

Mobile Application Development with IBM Worklight Foundation V6.2

Copyright IBM Corp. 2014

Copyright IBM Corp. 2014

Exercise 1. Installing IBM Worklight Studio and developing an

1.1. Installing IBM Worklight Studio

Start Eclipse and open a new workspace.

In the Workspace Launcher window, type C:\LabWork\WorklightWS in the Workspace

Click OK. Eclipse opens and displays the Welcome view.

Mobile Application Development with IBM Worklight Foundation V6.2

Copyright IBM Corp. 2014

In the Repository archive window:

Click OK to open the contents of the archive.

Copyright IBM Corp. 2014

Exercise 1. Installing IBM Worklight Studio and developing an

Mobile Application Development with IBM Worklight Foundation V6.2

Copyright IBM Corp. 2014

Copyright IBM Corp. 2014

Exercise 1. Installing IBM Worklight Studio and developing an

Mobile Application Development with IBM Worklight Foundation V6.2

Copyright IBM Corp. 2014

1.2. Setting up an Android development environment

Section 1: Installing the core Android SDK tools

Open a browser to: http://developer.android.com/sdk/index.html

Copyright IBM Corp. 2014

Exercise 1. Installing IBM Worklight Studio and developing an

Double-click installer_rXX-windows.exe, where XX is the latest installer version

On the Choose Start Menu Folder page, click Install.

1-10 Mobile Application Development with IBM Worklight Foundation V6.2

Copyright IBM Corp. 2014

On the Installation Complete page, click Next.

Copyright IBM Corp. 2014

Exercise 1. Installing IBM Worklight Studio and developing an

Double-click android-sdk_rXX-macosx.zip, where XX is the latest package version

In its new location, expand android-sdk-macosx/tools and double-click android to

Section 2: Installing an Android SDK platform and the SDK platform

In the Android SDK Manager window Packages section:

1-12 Mobile Application Development with IBM Worklight Foundation V6.2

Copyright IBM Corp. 2014

Copyright IBM Corp. 2014

Exercise 1. Installing IBM Worklight Studio and developing an

Close the Android SDK Manager window.

Section 3: Installing the ADT plug-in for Eclipse

On the Available Software page, click Add.

In the Add Repository window:

In the Name field, type: ADT Plug-in

In the Location field, type: https://dl-ssl.google.com/android/eclipse/

1-14 Mobile Application Development with IBM Worklight Foundation V6.2

Copyright IBM Corp. 2014

In the Security Warning dialog box, click OK to install the software.

__ 10. In the Workspace Launcher window, click OK to return to your workspace.

Copyright IBM Corp. 2014

Exercise 1. Installing IBM Worklight Studio and developing an

1-16 Mobile Application Development with IBM Worklight Foundation V6.2

Copyright IBM Corp. 2014

Section 4: Creating an Android virtual device

In the Android Virtual Device Manager window, click Create.

In the Create new Android Virtual Device window:

In the AVD Name field, type: Android_4.4.2

For Device, select Nexus One (3.7, 480 x 800: hdpi).