From a performance perspective, HTTP transactions from mobile devices are very costly. You can reduce external calls by caching data in memory, html5 local storage, or html5 local database.
It's relatively straightforward to extend our class system in order to persist remote data in a local variable. In the following code, we've extended the Beers class described on the prior page by adding an additional property named data. Once the JSON-P data has been successfully read from the server, it's placed into the data property where it can be referred for the duration that the app remains running. A strategically placed if() condition prevents the remote data from being fetched more than once.
var Beers = {
initialized: false, data : null,
init: function() {
var me = this; // use closure to retain scope if (me.data === null && !me.initialized) { me.initialized = true;
var url= "http://xdktraining.com/ftxdknew/data/beer.cfc"; $.getJSON(url + "?method=getBeerList&callback=?", function(data) { me.data = data; } ); } } }
In this walkthrough, you will start developing the “Beer List” feature of the application.
Make a local data request to retrieve a list of Beers that's encoded in JSON format.
Display the results from the transaction in the debugger.
Steps
Open the Project
1. Open Intel XDK New
2. Click on the word PROJECTS in the top-left corner of the GUI. 3. Click the Open a Project button.
4. Select the following file:
/ftIntelXdkNew/walk/walk4_1/walk4_1.xdk
Define a pageinit Event Listener
5. Open the following URL and review the output:
http://xdktraining.com/ftxdknew/data/beer.cfc? method=getBeerList
6. Open the index.html file in Code view.
7. Immediately prior to the closing <head> tag, insert a Javascript block:
<script type=”text/javascript”> </script>
8. Inside the <script>, listen for the pageinit event to be triggered by the index page:
Your code should appear similar to the following:
<script type="text/javascript">
$(document).bind('pageinit', function() { });
9. Inside the event handler function, define a variable named page that retrieves the file name of the current url. Your code should resemble the following:
var page = event.target.baseURI.split('/'); page = page[page.length - 1];
10. After the code that you inserted from the prior step, check for the existence of the global variable App.initialized. If the variable has bot been defined, set it equal to true and call a method named App.init() which you will define later in this exercise.
$(document).bind('pageinit', function(event,obj) {
var page = event.target.baseURI.split('/'); page = page[page.length - 1]; if (!App.initialized) { App.initialized = true; App.init(); } }
11. After the code that you inserted from the prior step, insert a switch/case statement that evaluates the contents of the page variable and checks it against each of your application's pages.
switch (page) { case 'index.html' : break; case 'beers.html' : break; case 'friends.html' : break; case 'drink.html' : break; }
Create the App Class and Get the Data
12. Where indicated by the comment, define an object named App with the following properties:
initialized: false beers: null
13. Verify that your code appears as follows:
var App = {
initialized: false, beers: null
Retrieve and Cache the Data
14. Define two method for the App object named init() and cacheBeers().
var App = { initialized: false, beers: null, init: function() { }, cacheBeers: function() { } }
15. Invoke the cacheBeers() method from the init() method as illustrated below: var App = { initialized: false, beers: null, init: function() { this.cacheBeers(); }, cacheBeers: function() { } }
Make a JSON-P Request
16. Inside the cacheBeers method, define a local variable named me that points to the Beers class and set the initialized property to true.
var me = this;
17. Immediately after the code that you inserted from the prior step, make a JSON-P request to the following URL, placing the result in the Beers class data property and dumping its results to the debugging console.
http://xdktraining.com/ftxdknew/data/beer.cfc? method=getBeerList&callback=?
18. Verify that your code appears similar to the following:
cacheBeers: function() { var me = this;
var url = "http://xdktraining.com/ftxdknew/data/beer.cfc"; $.getJSON(url + "?method=getBeerList&callback=?", function(data) { me.beers = data; console.log(data); } ); }
21. Open the debugger. You should see the array output from the data request as illustrated in Figure 2:
22. Type the following code in the debugger's console view to output the list of Beers:
App.beers
--End of Walkthrough-- Figure 2: Inspecting the results of the JSON-P request.
Use the ListView widget, depicted in Figure 3, to display the contents of either unordered or ordered lists.
Add a data-role=”listview” property to a <ul> or <ol> entity in order to instantiate a ListView: <ul data-role="listview"> <li><h3>Aaron</h3></li> <li><h3>Adam</h3></li> <li><h3>Alexander</h3></li> </ul>
Grouping Lists
You can create grouped lists as illustrated in Figure 4 by applying the data-autodividers="true" property to the <ul> entity as illustrated below. Note the following:
Grouped items must be placed in alphabetical order.
By default, the group name will be the uppercased first character of the item's text. <ul data-role="listview" data-autodividers="true"> <li><h3>Drucker, Aidan</h3></li> <li><h3>Drucker, Dylan</h3></li> <li><h3>Drucker, Steve</h3></li> <li><h3>Gallerizzo, David</h3> </li> </ul>
Figure 3: A simple listview