Lab 1: Getting Started with IBM Worklight – Lab Exercise

Lab 1: Getting Started with IBM Worklight –
Lab Exercise
IBM Software
Table of Contents
0.
Working with VMWare Basics ....................................................................................................... 0-3
1.
Getting Started with IBM Worklight.............................................................................................. 1-5
1.1. Start Worklight Studio....................................................................................................................................................................1-6
1.1.1.
Start Worklight Studio........................................................................................................................................................... 1-6
1.2. Create new MyLab1 project and application ......................................................................................................................1-8
1.2.1.
Create new MyLab1 project................................................................................................................................................. 1-8
1.2.2.
Create MyLab1 application’s main page.....................................................................................................................1-15
1.2.3.
Create a New Page.................................................................................................................................................................1-23
1.2.4.
Link the Add Memory button to the cameraPage ...................................................................................................1-34
1.3. Add iPhone environment and preview in Mobile Browser Simulator................................................................ 1-36
1.3.1.
Add iPhone environment.....................................................................................................................................................1-36
1.3.2.
Understanding the Development Server......................................................................................................................1-38
1.3.3.
Start the Development Server and Deploy the App ................................................................................................1-40
1.3.4.
Preview in Mobile Browser Simulator..........................................................................................................................1-43
1.4. Implement a Worklight Adapter............................................................................................................................................. 1-47
1.4.1.
Create a Worklight Adapter..............................................................................................................................................1-47
1.4.2.
Test Worklight Adapter.......................................................................................................................................................1-50
1.5. Calling the Adapter from the App .......................................................................................................................................... 1-53
1.6. Test with Mobile Browser Simulator ................................................................................................................................... 1-56
Page 0-2
Worklight 6.0 POT - Lab 1
IBM Software
0. Working with VMWare Basics
You can skip this section if you have experience using VMWare images. The POT will run all the labs
using a VMWare image where it is a virtualized Windows 7 OS within your host OS.
The VM Image should have been already running.
Click on the button named Enter full screen mode to full screen the virtualized image.
The virtualized OS has a user name and password:
Administrator / passw0rd
Worklight 6.0 POT - Lab 1
Page 0-3
IBM Software
Page 0-4
Worklight 6.0 POT - Lab 1
IBM Software
1. Getting Started with IBM Worklight
This Proof of Technology asset contains 5 labs. In Lab 1 you will familiarize yourself with building and
testing a mobile application using Worklight Studio. In Lab 2, we will import a fully completed mobile app
named MyMemories into the workbench and explore its feature using the Studio. In Lab 3 you are going
to continue to work with the application in the Worklight Studio, but you will also work directly with the
Worklight Server. In Lab 4, you will develop an automatic test suite using the Test Workbench Platform
that comes with Worklight version 6.0. In Lab 5, you will explore how to deploy to an external Worklight
server.
The app you will develop and use throughout this POT is called MyMemories and it provides two
features in the mobile app – 1) taking a picture of a scene and a brief note with title to save it to a list of
MyMemories items 2) accessing the list of saved MyMemories items to see detail information. Saved
items will be automatically tagged with geo-location information. Below are some screenshots from the
fully developed application:
In this lab you will develop a basic mobile app using the IBM Worklight Studio development environment.
You will use cross platform techniques such as HTML5, CSS3, JavaScript and the jQuery Mobile
framework. You will learn how to do the following in Lab 1:

Create a new Worklight project and a Worklight application in Worklight Studio

Use Rich Page Editor (RPE) to add UI elements to application

Build and deploy a Worklight application to test server in Worklight Studio

Add an environment for iPhone

Use Preview feature to preview and test application in the Mobile Browser Simulator

Create a Worklight Adapter (HTTP)

Invoke Worklight Adapter from Worklight Studio
Worklight 6.0 POT - Lab 1
Page 1-5
IBM Software
1.1. Start Worklight Studio
This lab assumes that you have obtained and started the corresponding VMWare image. In the image
you will launch Eclipse with the Worklight Studio tooling and then create a new project called MyLab1,
with a new app also called MyLab1. This app will be used until you import fully-built and styled version of
the MyMemories project and app in Lab 2 in order to avoid any conflicts on project and app names.
1.1.1. Start Worklight Studio
__1.
In the Windows desktop, open the folder named Worklight. In Worklight folder, double-click the
Worklight Studio icon.
__2.
On the Workspace Launcher dialog accept the default workspace path
C:\WorklightLab\workspace and click OK.
__3.
You should be already in the Design perspective. This is the perspective where you will do all
the mobile app development. If you do not see the Design perspective. You can switch to the
Design perspective by selecting the Design perspective option if visible, or use the Open
perspectives icon and selecting Other > Design.
Page 1-6
Worklight 6.0 POT - Lab 1
IBM Software
Worklight 6.0 POT - Lab 1
Page 1-7
IBM Software
1.2. Create new MyLab1 project and application
1.2.1. Create new MyLab1 project
__1.
Go to Worklight icon in toolbar on top, and select Worklight Project.
Page 1-8
Worklight 6.0 POT - Lab 1
IBM Software
__2.
In New Worklight Project window, enter MyLab1 in Name field, select Hybrid Application in
Project Templates section, and click Next button.
__3.
Enter MyLab1 in Application name field and click on Add jQuery Mobile checkbox in jQuery
Mobile Installation section.
Worklight 6.0 POT - Lab 1
Page 1-9
IBM Software
__4.
Select folder icon
right next to Location input field. The JQuery Mobile parts can found in
the C:\WorklightLab\imports\lab1\ folder. Find and select
C:\WorklightLab\imports\lab1\jquery.mobile-1.3.0 folder, and click OK.
Page 1-10
Worklight 6.0 POT - Lab 1
IBM Software
Worklight 6.0 POT - Lab 1
Page 1-11
IBM Software
__5.
In the list of folders and files, select images folder, css folder, and js folder, and click Finish.
__6.
The application template will be populated and the application-descriptor.xml file will open by
default. Application characteristics such as authentication and server URL are managed in this
file. We can leave it at its defaults for now, while we investigate the parts of a Worklight project
and application. In the Project Explorer pane, expand the MyLab1 project. Review the folder
structure that has been created.
Page 1-12
Worklight 6.0 POT - Lab 1
IBM Software
WL Server Library:
Contains the Worklight API jar file
server/java:
Location for server-side java code in java-base adapters (advanced)
JRE System Library:
Contains the JRE used in this project
JavaScript Resources:
Contains the project’s JavaScript classes content
adapters:
Contains the project’s adapters (used for backend connectivity)
apps:
Contains the project’s applications
bin:
Location for build artifacts (wlapp files) that are deployed to a Worklight server
components:
Contains shell application components (advanced)
server:
Contains configuration files and extension locations for the embedded Worklight test server
Worklight 6.0 POT - Lab 1
Page 1-13
IBM Software
__7.
In the Project Explorer, expand the apps folder then the apps > MyLab1 folder and the apps >
MyLab1 > common folder that were created by the new application wizard.
common: the default ‘environment’ that gets
created for an application.
css: MyLab1.css – the main application CSS
file,
images: Default images for the common
environment.
jqueryMobile: contains the jquery mobile
framework that was imported when the
Worklight project was created.
js: MyLab1.js – the main JavaScript file for
the app, messages.js – JSON object holding
all app messages, initOptions.js –
initialization options for the app.
MyLab1.html: The main application html file.
Application can have multiple html files.
legal: All legal related documents.
Page 1-14
Worklight 6.0 POT - Lab 1
IBM Software
1.2.2. Create MyLab1 application’s main page
__1.
In Project Explorer, double-click MyLab1.html to open and edit the automatically generated
main page. It’s located in MyApp1/apps/MyApp1/common/MyLab1.html.
Worklight 6.0 POT - Lab 1
Page 1-15
IBM Software
__2.
The Mobile Navigation window should be at the bottom left of the workbench. If the Mobile
Navigation window is not open in your eclipse workspace, you should open it using the
Show/Hide Mobile Navigation icon (
) on the Rich Page Editor toolbar.
__3.
Select page (default) in Mobile Navigation window, right-click and select Rename.
__4.
Type homepage as the new name. Press OK to accept the changes.
Page 1-16
Worklight 6.0 POT - Lab 1
IBM Software
__5.
In the MyLab1.html editor, in the source pane, delete the word MyLab1 from the source.
__6.
Click on the Design tab to change to the Design pane.
Worklight 6.0 POT - Lab 1
Page 1-17
IBM Software
__7.
The jQuery Mobile Widgets palette should be already opened on the right hand side. In the
Palette of jQuery Mobile Widgets, select the Header widget. Drag and drop it into main editor
window on the top section and Insert into Page ‘homepage’ above Content. Move your
mouse around to make sure you are inserting above the content and NOT below the content.
TIP: If at any time you find the design view editor to be not accepting your locations as well as you’d like,
you can refresh the design view using the Refresh page icon.
__8.
Change the header title from Header to My Memories by double-clicking it in the header widget.
Press enter to accept the changes.
Page 1-18
Worklight 6.0 POT - Lab 1
IBM Software
__9.
In the jQuery Mobile Widgets section of the Palette, select & drag the jQuery Mobile Button
widget and drop it into the content in the Add widget here area. You should see a hover that
says “Insert into Content”.
NOTE: Make sure you are selecting from the JQuery Mobile Widgets section of the Palette. There are
multiple ‘Button’ widgets in the different categories of widgets which will not provide the expected JQuery
syntax and functionality.
__10.
Change the button label from Button to My Memories, by double-clicking it in the button widget
and typing the new name. Press enter to accept the changes.
Worklight 6.0 POT - Lab 1
Page 1-19
IBM Software
__11.
Make sure the button is selected in the editor. Go to the Properties view, change Id field from
button to listBtn. Set the Theme to d. JQuery have several out-of-the-box color scheme which
are named a, b, c, d, e, each with a corresponding set of default colors for the jQuery widgets.
We will be using the color scheme named “d”.
Page 1-20
Worklight 6.0 POT - Lab 1
IBM Software
__12.
Add another jQuery button. In the jQuery Mobile Widget palette, select the Button widget. Drag
and drop into the editor below the My Memories button. There should be a hover that says
“Insert into Content below Button ‘listBtn’”.
__13.
Double-click on the newly created button and change the label from Button to Add Memory.
Worklight 6.0 POT - Lab 1
Page 1-21
IBM Software
__14.
Make sure that the Add Memory button is selected. Change to the Properties view. Change Id
field from button to addMemBtn. Set the Theme field to d.
Page 1-22
Worklight 6.0 POT - Lab 1
IBM Software
1.2.3. Create a New Page
To create multiple pages for the mobile apps, in the lab, we would append new jQuery Page widget
below the main page. Only one of those pages will be shown each time which gives the illusion of a
multi-page app. We will later establish navigation between these jQuery pages such that we can switch
from one page to the next page and back.
__1.
In the Palette of jQuery Mobile Widgets, select & drag the Page widget and drop it into main
editor window in the lower part of the editor. The hover should say “Insert into <body>
‘content’ below Page ‘homepage’”.
__2.
As the new jQuery Page is added, you can see the new page shows up in the Mobile Navigation
view. Right click on page and Rename. Enter cameraPage as the new name. Click OK.
__3.
In Mobile Navigation view, select the eye icon (
) for the new page named ‘cameraPage’.
This will bring the page up into the design view in the editor. Note that you must select the eye
to change the page, selecting just the page name will not change the page in the editor.
Worklight 6.0 POT - Lab 1
Page 1-23
IBM Software
__4.
In the Palette of jQuery Mobile Widgets, select & drag the Header widget and drop it into main
editor window on the top section – Insert into Page ‘cameraPage’ above Content.
__5.
Double-click on the header and change the label from Header to Add Memory. Press enter to
accept the value.
Page 1-24
Worklight 6.0 POT - Lab 1
IBM Software
__6.
In the Palette of jQuery Mobile Widgets, select & drag Button widget. Drop it to the left side of
the Header before the Heading. The hover should say “Insert into Header ‘header0’ before
Heading”. Note that there are multiple places you can drop a Button, drag the mouse to the left
edge and make sure you are dropping it before the Heading (not above or below the Heading).
The button should be on the left side of the Heading.
__7.
Double-click on the label to change from Button to Cancel. Press enter to accept the value.
__8.
Hover over the Cancel button until you see a hover link that says Edit Navigation Link. Click Edit
Navigation Link.
__9.
Select homepage from the Inline link target drop-box. Press Finish.
Worklight 6.0 POT - Lab 1
Page 1-25
IBM Software
__10.
In the Properties view, make sure that the Cancel button is select. Switch to the jQuery tab in
the Properties view. Scroll down to the bottom to reveal the Icon Details section. Select Delete
from the Icon drop-down list. By setting the icon field to Delete, this will add an “X” icon in the
Cancel button. The cross icon is a built-in icon that comes with jQuery Mobile. The icon will be
located to the left of the button as described by the Position field.
Page 1-26
Worklight 6.0 POT - Lab 1
IBM Software
__11.
In the Palette of jQuery Mobile Widgets, select & drag a Button widget and drop it into the right
side of the Header. A hover should say “Insert into Header ‘header0’ after Heading”.
__12.
Change the label from Button to Save. Press enter to accept the value.
__13.
In the Properties window – jQuery tab, change the Id to savePicBtn. Press enter to accept the
changes.
Worklight 6.0 POT - Lab 1
Page 1-27
IBM Software
__14.
In the same Properties view, scroll down to find the Icon Details section. Select Check from the
Icon drop-down list. This will to add a checkmark icon to the Save label. The checkmark is a
built-in icon that comes with jQuery Mobile.
__15.
In the Palette of jQuery Mobile Widgets, select & drag the Text Input widget and drop it into the
Content. The hover should say “Insert into Content”.
Page 1-28
Worklight 6.0 POT - Lab 1
IBM Software
__16.
Double-click on the label to change the label from Text Input: to Title:. Press enter to accept
the value.
__17.
Select the Label widget. Drag and drop it below the input field – Insert into Content below
Text Input ‘text.
__18.
Double-click on the label to change the label to Description:. Press enter to accept value.
Worklight 6.0 POT - Lab 1
Page 1-29
IBM Software
__19.
Select the Text Area widget and drop it below the Description Label – Insert into Content
below Label ‘label’.
NOTE: Depending on the screen resolution of the workstation you are using, and the orientation of the
design/source editors (horizontal, vertical or individual), you may see different visual treatments given the
amount of space available to position the items. Use the different view options to get the most
comfortable editing environment for your own style.
__20.
Select the Text Area and go to the Properties view – jQuery tab. Change the Id to
picDetailTxt.
Page 1-30
Worklight 6.0 POT - Lab 1
IBM Software
__21.
In the Palette of jQuery Mobile Widgets, select & drag the Button widget and drop it below the
Text Area. The hover should say “Insert into Content below Text Area ‘picDetailTxt’”.
__22.
Change the button label from Button to Capture Picture. Press enter to accept the value.
Worklight 6.0 POT - Lab 1
Page 1-31
IBM Software
__23.
Copy/import the camera_icon.png file from C:/WorklightLab/imports/lab1/camera_icon.png into
the MyLab1/apps/MyLab1/common/images folder. Open File Explorer and go to
C:/WorklightLab/imports/lab1 folder. Drag camera_icon.png from the File Explorer into the
Eclipse workbench in the images folder in the Project Explorer view.
__24.
Click OK to copy the files.
Page 1-32
Worklight 6.0 POT - Lab 1
IBM Software
__25.
Switch to the Source pane in the editor, insert the following HTML code right under Capture
Picture button widget code:
<div class="capturedImage"
id="capturedImage">
<img id='captareImageImg' src='images/camera_icon.png'
height='200px' width='200px' style='display:block'> </div>
The snippet (Snippet #1) can be found in C:\WorklightLab\imports\lab1\Lab1.snippets.txt.
__25.
Switch back to the Design pane and it shows the following:
Worklight 6.0 POT - Lab 1
Page 1-33
IBM Software
1.2.4. Link the Add Memory button to the cameraPage
The last step is to link the Add Memory button in the homepage to go to the cameraPage.
__1.
In the Mobile Navigation view, click on the eye to switch to the homepage.
__2.
Select and hover over the Add Memory button until the Edit Navigation Link button appears.
Page 1-34
Worklight 6.0 POT - Lab 1
IBM Software
__3.
Select cameraPage from the Inline link target drop-down box. Click Finish.
__4.
Save changes MyLab1.html (Ctrl-S) and any other open source files.
Worklight 6.0 POT - Lab 1
Page 1-35
IBM Software
1.3. Add iPhone environment and preview in Mobile Browser Simulator
Worklight’s cross-platform support is based on the concept of environments. In this section we will
enable our app to be built for the iPhone environment, and test the iPhone version in the Mobile Browser
Simulator.
1.3.1. Add iPhone environment
__1.
In the Project Explorer view, expand MyLab1 project > expand apps folder. Right-click MyLab1
project > New > Worklight Environment.
Page 1-36
Worklight 6.0 POT - Lab 1
IBM Software
__2.
Select the iPhone checkbox and click Finish. The iPhone environment folder will be generated.
Note: If you check the Console tab, you should see messages about the iPhone Environment being
created, the build process being started, and a message that the build finished for the iPhone
environment.
Worklight 6.0 POT - Lab 1
Page 1-37
IBM Software
__3.
Examine the new iPhone folder (MyLab1 project >apps >MyLab1 >iPhone). This is where
iPhone specific customizations and native content can be added to the project.
1.3.2. Understanding the Development Server
Worklight Studio comes with an embedded development server for testing purposes during development
time. It is based on the WebSphere Application Server Liberty Profile. In this section, we will explore the
server view.
__1.
Switch to the Server view.
__2.
Expand Worklight Development Server. This is the embedded server that we will test with. It
already has the Mobile Browser Simulator deployed.
Page 1-38
Worklight 6.0 POT - Lab 1
IBM Software
__3.
Double-click on Worklight Development Server in the Server view and it will open the server
editor. The server view allows us to change some of the publishing and timeouts preferences.
__4.
In the Project Explorer, there is a folder named Worklight Development Server. This folder
represents the Runtime Environment that is populating the server page. Later in the other
exercise, we will connect to remote server which will have a different runtime environment and
folder to represent it.
Worklight 6.0 POT - Lab 1
Page 1-39
IBM Software
__5.
Close the server editor.
1.3.3. Start the Development Server and Deploy the App
__1.
In the Server view, highlight Worklight Development Server and click on the Start the server
button.
__2.
You can see the server starting progress in the Console. There are multiple consoles in the
workbench. You can switch to the Worklight Development Server console by clicking on the
Display Selected Console button.
__3.
If the Worklight server is started correctly, you will see the last line of the log as “The server
Worklight is ready to run a smarter planet”. You might also notice some jpa error, those can be
safely ignored.
Page 1-40
Worklight 6.0 POT - Lab 1
IBM Software
__4.
In the Server view, the status of the server will be changed to [Started, Sychronized]. You might
notice that there is a MyLab1 EAR file deployed to the Worklight Development Server. There are
two portions of Worklight project that needed to be deployed. The first portion is to deploy the
MyLab1 EAR file which enables the Worklight management console. The second portion is the
actual app that is deployed into the MyLab1 Worklight management console. If you have
experience with the earlier version of Worklight, this behaviour might be a little different as
before. There was only one Worklight management console for all projects in earlier versions of
Worklight. Now in Worklight V6, there is one Worklight management console for each project
which allows for a more clear-cut separation.
__5.
To deploy our mobile app, expand MyLab1 > apps > right-click on MyLab1 > Run As > Build
All and Deploy.
__6.
The Worklight console log view will be brought to the foreground. When the build is successful,
you will see the status of “Application ‘MyLab1’ deployed successfully with all environments”.
Worklight 6.0 POT - Lab 1
Page 1-41
IBM Software
__7.
Switch to the Server view. The MyLab1 is deployed as mentioned previously.
__8.
To see the Worklight management console, right-click on MyLab1 project > Open Worklight
Console. You see that the MyLab1 app is also deployed inside the console. Notice that the
console URL is designated per project. Close the browser of the management console as we
will not be using it in this lab.
Page 1-42
Worklight 6.0 POT - Lab 1
IBM Software
1.3.4. Preview in Mobile Browser Simulator
__1.
Expand MyLab1 project > apps > MyLab1 folder > select the iphone folder.
__2.
Right click on the iphone folder and select Run As > Preview (first preview option in the list)
Worklight 6.0 POT - Lab 1
Page 1-43
IBM Software
__3.
Press Run if you were asked to run some cordova related applet.
__4.
Press Don’t Block if a Security Warning dialog shows up.
__5.
Preview will launch the app in the Mobile Browser Simulator, with an iPhone skin and Cordova
controls.
NOTE: The VMware image should be pre-configured to launch the Simulator in an external browser
(Chrome, Safari or Firefox). If it opens within eclipse, you can go to Eclipse Preferences, General->Web
Browser, and change to one of the external options. Using Mobile Browser Simulator in an external
browser provides more screen space and a better experience for using the Cordova controls and Web
Inspector/Firebug.
NOTE: The Mobile Browser Simulator (MBS) is an excellent resource for debugging Worklight Hybrid
applications directly on the developer’s desktop. With full access to browser features like Web
Inspector/Firebug, you can view the resources in your application, set breakpoints, manipulate CSS –all
Page 1-44
Worklight 6.0 POT - Lab 1
IBM Software
of the programming debug/diagnostic tasks that are common to web applications are available in MBS
__6.
Navigate the application screens within the Mobile Browser Simulator. Click on the Add
Memory button.
Worklight 6.0 POT - Lab 1
Page 1-45
IBM Software
__7.
Click on the Cancel button to go back.
Also notice things like

The Mobile Browser Simulator selector for iPhone type.

The various Cordova device controls that can be set to values and you can see represented in your
application (when you implement them – we will see this shortly).

If you are familiar with Web Inspector/Firebug, attempt to Inspect Element on the Mobile Browser
Simulator screen and start looking at how you are able to do common HTML, JS, CSS debugging
and manipulation within your mobile app.
__8.
Close the Chrome browser.
Page 1-46
Worklight 6.0 POT - Lab 1
IBM Software
1.4. Implement a Worklight Adapter
In this section we will create a Worklight Adapter to invoke a cloud-based geocoding service (google,
etc…) and convert latitude and longitude coordinates from the device’s location service (GPS or
triangulation) into a formatted address for our app. This will show the simplicity and flexibility of the
Worklight adapter model.
The Worklight Adapter framework makes use of JSON to optimize the data being passed back to the
client and simplifies the client-side programming model. It would be quite possible to allow the device to
retrieve coordinates directly from the cloud service, but using the Worklight Adapter model allows for
immediately switching service providers without impacting apps on devices, as well as full integration
with the Worklight security model when applicable. A Worklight Adapter consists of an Adapter XML file
– the descriptor for the type of service being contacted (HTTP Web/REST services, SQL, CastIron, or
JMS), and an adapter implementation file – a JavaScript module that assembles the URL path (from
parameters passed in) and any filtering or manipulation of the data returned from the backend service.
In a subsequent section, we will demonstrate how the client invokes the adapter, and how to use the
returned data within the application.
1.4.1. Create a Worklight Adapter
In this section, we will create a Worklight Adapter called GPSLocator to translate location information
from latitude and longitude into a real address using Google’s geocoding service over HTTP.
__1.
In Project Explorer window, right-click on the MyLab1 project > New > Worklight Adapter.
Worklight 6.0 POT - Lab 1
Page 1-47
IBM Software
__2.
In the form, select HTTP Adapter for Adapter type, type GPSLocator in Adapter name input
field, and click Finish button.
__3.
The GPSLocator.xml will be opened in the editor. In the editor’s Design view, select Procedure
“getStoriesFiltered” from Overview section and click Remove.
Page 1-48
Worklight 6.0 POT - Lab 1
IBM Software
__4.
Select Procedure “getStories”, and change the Name from getStories to getLocation in Details
section.
__5.
Expand the twisty Adapter “GPSLocator” > Connectivity > Connection Policy, and change
Domain value from rss.cnn.com to maps.googleapis.com in the Details pane.
__6.
Save and close the GPSLocator.xml file. You might notice there is an error for the GPSLocator
adapter. This will be corrected in the next step.
__7.
In the Package Explorer window, expand MyLab1 project > adapters folder > GPSLocator
folder > open GPSLocator-impl.js file into the editor. Remove all the code from the js editor.
Worklight 6.0 POT - Lab 1
Page 1-49
IBM Software
__8.
Paste the following codes into the now empty editor and save the file. This snippet (Snippet #2)
is available in C:\WorklightLab\imports\lab1\Lab1_snippets.txt.
// Google Map API call
function getLocation(gpsLat, gpsLong) {
path = "/maps/api/geocode/json?latlng=" + gpsLat + "," + gpsLong +
"&sensor=false";
var input = {
method : 'get',
returnedContentType : 'json',
path : path
};
return WL.Server.invokeHttp(input);
}
__9.
Save and close the GPSLocator-impl.js file. Notice the error beside the GPSLocator is now
corrected.
1.4.2. Test Worklight Adapter
In this section, we will learn how to invoke the adapter in Worklight Studio to see if the adapter works
properly, and how to use the returned data within the application.
__1.
In Project Explorer window, right-click GPSLocator folder > Run As > Invoke Worklight
Procedure.
Page 1-50
Worklight 6.0 POT - Lab 1
IBM Software
__2.
In Edit configuration and launch window, select getLocation for Procedure name and enter
“43.6481,-79.4042” (without quotation marks) into Parameters section, and click Run button.
Worklight 6.0 POT - Lab 1
Page 1-51
IBM Software
__3.
In Invoke Procedure Result windows, check if the returned result (from Google Maps) shows
correct information with statusCode of 200 and statusReason of “OK”.
Page 1-52
Worklight 6.0 POT - Lab 1
IBM Software
1.5. Calling the Adapter from the App
After we created the adapter, we have to call it from the app.
__1.
Switch back to the workbench. In the Project Explorer view, expand MyLab1 project > apps >
MyLab1 > common > js > open MyLab1.js file into the editor.
__2.
Append the following code at the end of the MyLab1.js file after the wlCommonInit() { } method.
Beware to append the code after the close curly bracket. You can copy Snippet #3 in
C:\WorklightLab\imports\lab1\Lab1.snippets.txt. When you press the “Add Memory” button
from the home page, it will change to the cameraPage. This snippet will call a method
getLocation() before changing to the cameraPage. The method will obtain the GPS to get the
current location. And then calling the adapter to convert the GPS latitude and longitude into an
actual address using the Googgle API. The method will then update the Description text area
with the address in the cameraPage.
//Global variables
var globalLong;
var globalLat;
var globalAddress = '(not available)';
// GPS Longitude
// GPS Latitude
// translated address info
$( '#cameraPage' ).bind('pagebeforeshow',function(event){
console.log( ' cameraPage() - pagebeforeshow' );
getLocation();
});
/////////////////////////////
//Get the GPS coordinates
/////////////////////////////
function getLocation() {
console.log('getLocation');
var win = function(position) {
console.log('-getLocation:win');
Worklight 6.0 POT - Lab 1
Page 1-53
IBM Software
globalLat = position.coords.latitude;
globalLong = position.coords.longitude;
console.log('Obtained GPS location information: ' + globalLat + '/' +
globalLong);
getGlobalAddress();
};
var lose = function(error) {
console.log('-getLocation:lose');
globalLat = 30.377047;
globalLong = -91.123484;
console.log('Failed to get GPS information, using default address.');
};
var options = { enableHighAccuracy: true };
navigator.geolocation.getCurrentPosition(win, lose, options);
}
function getGlobalAddress(){
console.log('getGlobalAddress: ' + globalLat + ', ' + globalLong + ')');
if (typeof(globalLat) != 'undefined' || globalLat != null ||
typeof(globalLong) != 'undefined' || globalLong != null ){
callGeoAdapter();
} else {
globalAddress = '(Could not get GPS info)';
}
}
////////////////////////////////////////////////////////////////
//Call the Worklight adapter and get the street/local address
////////////////////////////////////////////////////////////////
function callGeoAdapter(){
// store translated address, to globalAddress
console.log('callGeoAdapter: online');
if (typeof(globalLat) == 'undefined' || globalLat == null ||
typeof(globalLong) == 'undefined' || globalLong == null ){
globalAddress = '(No valid GPS info)';
// alert(globalAddress);
// busyIndicator.hide();
return;
}
// Called when the adapter completes successfully
var win = function(result){
globalAddress = result.invocationResult.results[0].formatted_address;
// alert('globalAddress[' + globalAddress.length + '] '+ globalAddress);
if(globalAddress.length == 0){
globalAddress = '(Could not translate address via adapter)';
}
console.log('-callGeoAdapter:win - address: ' + globalAddress);
$('#picDetailTxt').val(globalAddress);
return;
};
// Called when the adapter does NOT complete successfully
var lose = function(){
console.log('-callGeoAdapter:lose - Failed to obtain address for GPS');
globalAddress = '(Could not translate address for given GPS)';
// alert(globalAddress);
return;
};
var invocationData = {
Page 1-54
Worklight 6.0 POT - Lab 1
IBM Software
adapter
: 'GPSLocator',
procedure : 'getLocation',
parameters : [globalLat, globalLong]
};
var options = {
onSuccess : win,
onFailure : lose
};
WL.Client.invokeProcedure(invocationData, options);
}
__3.
Save the file.
Worklight 6.0 POT - Lab 1
Page 1-55
IBM Software
1.6. Test with Mobile Browser Simulator
__1.
Expand MyLab1 project > apps > MyLab1 folder > right-click on the iphone folder > Run As >
Preview.
Page 1-56
Worklight 6.0 POT - Lab 1
IBM Software
__2.
Expand the Geolocation tab in the Cordova pane. You will see a map with the compass. Use
the mouse wheel to zoom in and out of the map and also move around the map. Move the map
such that the compass is over a land location rather than the blue ocean. This will provide a
simulated location for the app. If your mouse wheel is not working, you can enter the latitude
and longitude as per next step.
__3.
Enter the Latitude as 43.65 and Longitude as -79.41.
Worklight 6.0 POT - Lab 1
Page 1-57
IBM Software
__4.
Click on the Add Memory button. This will use the simulated location and resolve into a full
address using the google API.
__5.
Click on the Cancel button in the app.
__6.
You can also drag the Cordova map simulation around to move to another location and press
Add Memory from the home page again.
This concludes Lab 1.
Lab 1 Complete!
Page 1-58
Worklight 6.0 POT - Lab 1