lab 1: getting started with ibm worklight – lab exercise...1. getting started with ibm worklight...

Lab 1: Getting Started with IBM Worklight – Lab Exercise

IBM Software

Page 0-2 Worklight 6.0 POT - Lab 1

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

IBM Software

Worklight 6.0 POT - Lab 1 Page 0-3

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

IBM Software


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

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.

IBM Software


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.

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.

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.

IBM Software


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.

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

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.

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.

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.

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.

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.

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.

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”.

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.

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.

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.

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.

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.

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.

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.

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”.

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.

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.

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.

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.

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:

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.

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.

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.

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.

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.

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.

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.

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”.

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.

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)

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

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.

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.

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.

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.

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.

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.

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.

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”.

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; // GPS Longitude var globalLat; // GPS Latitude var globalAddress = '(not available)'; // 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');

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 = {

IBM Software


adapter : 'GPSLocator', procedure : 'getLocation', parameters : [globalLat, globalLong] }; var options = { onSuccess : win, onFailure : lose }; WL.Client.invokeProcedure(invocationData, options); }

__3. Save the file.

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.

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.

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!

lab 1: getting started with ibm worklight – lab exercise...1. getting started with ibm worklight...

Documents