1 IBM Worklight hands on lab: Advanced Worklight Techniques Table of contents TABLE OF CONTENTS .................................................................................................................................................................. 1 INTRODUCTION .......................................................................................................................................................................... 1 ADAPTERS .................................................................................................................................................................................. 2 IMPLEMENTING ADAPTER INTO NEWS APP................................................................................................................................ 7 HOW TO USE AN ADAPTER .................................................................................................................................................................... 7 HOW TO GET ADAPTER RESULTS ............................................................................................................................................................. 8 JAVASCRIPT LOGGING ........................................................................................................................................................................... 8 BRINGING RESULTS TO USER................................................................................................................................................................... 8 SKINS ........................................................................................................................................................................................ 11 Introduction Welcome to the second part of IBM Worklight lab. This part will show you how to prepare your applications for communication with back-end systems and solve problem with various devices (with different screen sizes, user input or HTML5 capability). Lab will continue with development of an application News App created in first lab. Primary purpose of this lab isn’t developing of demo application, but demonstration of how easily you can use Worklight features and implement them into your own applications. After completion of this lab you should have gained understanding of: Use and implementation of Worklight Adapters Purpose and usage of Worklight Application Skins For full understanding of all steps you should possess basic knowledge of HTML, CSS and JavaScript. Familiarity with the Eclipse platform and Firebug is a plus, but not required. Firefox 13+ with Firebug 1.10+ http://www.mozilla.org/en-US/firefox/new/ http://getfirebug.com/ or Chrome https://www.google.com/chrome
14
Embed
IBM Worklight hands on lab: Advanced Worklight Techniques · 5 7. Worklight Studio will automatically launch Firefox internet browser (if installed) and test your procedure. In a
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
1
IBM Worklight hands on lab: Advanced Worklight Techniques
Table of contents
TABLE OF CONTENTS .................................................................................................................................................................. 1
IMPLEMENTING ADAPTER INTO NEWS APP................................................................................................................................ 7
HOW TO USE AN ADAPTER .................................................................................................................................................................... 7
HOW TO GET ADAPTER RESULTS ............................................................................................................................................................. 8
BRINGING RESULTS TO USER ................................................................................................................................................................... 8
9. SELF-EXAMINATION: Create another adapter fetching remote RSS feed (of your choice) and verify its
functionality as shown in previous steps.
7
Implementing adapter into News App Right now you should have two prepared Adapters for future use. If not, please revise previous steps. Right now we
are going to use adapter as source of data, which will be displayed in the News Application.
1. Every time a new Worklight Application is created, Worklight Studio automatically creates a JavaScript file of
same name as application in <AppName>/common/js folder. In our case it is
NewsApp/common/js/NewsApp.js file. Please open it now.
2. As you can see, file is quite empty right now. Append following code:
function getNewsInit() { var invocationData = { adapter: "FeedReader", procedure: "getStoriesFiltered" }; var options = { onSuccess: loadFeedsSuccess, onFailure: loadFeedsFailure }; WL.Client.invokeProcedure(invocationData, options); }
How to use an Adapter
As you may see on the last line, Adapter procedure is invoked by WL.Client.invokeProcedure command. Parameters
are invocation data and options.
Invocation data consists of definition which Adapter and procedure is used. In this case it is FeedReader
adapter and getStoriesFiltered procedure. Invocation data variable may also contain array of parameters,
which are used during invoking of the procedure. It's a mandatory item, so in this case we won't specify any
parameters.
Options section contains specification of functions, which are launched after either successful or failed
adapter run.
Functions invoked after adapter successful or failed run differ in properties returned after (un)successful call.
Properties of a function invoked after successful procedure invocation:
status – the HTTP response status.
invocationResult – An object containing the data returned by the invoked procedure and also additional
information about the procedure run.
Properties of a function invoked after failed procedure invocation:
status – The HTTP response status.
errorCode – An error code returned as string. All error codes are defined in WL.ErrorCode object in
worklight.js.
8
errorMessage – Error message for developer use only. Not translated into user's language. Should not be
displayed to the end-user.
How to get Adapter results
Right now we are going to specify functions invoked after Adapter's procedure run. Insert following code at the
beginning of getNewsInit() function:
function loadFeedsSuccess(result) { console.log("Data sucesfully downloaded, HTTP " + result.status); if(result.invocationResult.Items.length > 0) { console.log("Server has returned " + result.invocationResult.Items.length + " item(s)"); displayRSSFeed(result.invocationResult.Items); } } function loadFeedsFailure(result) { console.log("Error while loading RSS feed: " + result.errorMessage); }
Important part is done on lines 4 and 6. Script checks, if adapter returned at least one result and subsequently
passes all returned data to function displayRSSFeed(), which will show received data to the user.
JavaScript logging
As you can see, most of the code is made of diagnostic reports
(console.log command). These reports can be viewed in JavaScript
console (Chrome browser contains built-in JS console and so does Firefox
with Firebug extension) by right clicking on page, selecting “Inspect
element” and opening a Console. This procedure in Chrome browser is
shown on next picture, usage in Firefox is very similar.
Bringing results to user
Finally it’s time to display obtained results from Adapter to the user. In this case we are going to use DoJo Object
Store component, which is a special data structure used in many DoJo components. Insert following code at the end
of /commons/js/NewsApp.js file:
function displayRSSFeed(rawData) { var store = new dojo.store.Memory({data:rawData, idProperty: "guid"}); require(["dijit/registry"], function(registry){ var newsList = registry.byId("newsList"); dojo.empty("newsList"); store.query(function(news){ var newsItem = dojox.mobile.ListItem({label:news.title}); newsList.addChild(newsItem); }); }); }
9
A brief explanation is in place:
1. We are using data provided by an Adapter to create an Object Store data structure. idProperty is unique
identifier of each item in store (line 2).
2. List newsList, which is supposed to display news to the user, is located (line 5).
3. All previous children elements of newsList are destroyed – including ListItem with “Work in progress…” label
(line 6)
4. Each item in store is iterated (line 8).
5. Creation of ListItem with current news name (line 9).
6. Newly created ListItem is subsequently added to newsList (line 10).
Almost there, now we need to start getNewsInit() function after Worklight is loaded. If you invoke an Adapter before
Worklight is loaded, it will result in an error. There is a special function called wlCommonInit(), which is launched
after Worklight initialization is complete. Insert getNewsInit(); into this function at the beginning of
/common/js/NewsApp.js file.
Almost last thing to do is set proper requirements in /common/NewsApp.html. Open this file and find DoJo require
section. Insert “dojo/store/Memory” – this statement tells DoJo, that you intent to use this element and it should be
ready for use.
10
Build and deploy whole application. After loading all the news it should look like this:
SELF-EXAMINATION: Try to work out how to make your ListItems with news clickable. User should be redirected to
news full version (supplied in news.link variable) after clicking on a news header.
HINT: Look at http://dojotoolkit.org/reference-guide/1.7/dojox/mobile/ListItem.html for useful information.
SOLUTION: Modify ListItem constructor to following appearance: var newsItem = dojox.mobile.ListItem({label:news.title, href:news.link});