In this series, we will develop a Twitter client, called “Tweets”, using the jQuery Mobile and PhoneGap frameworks. This project will be deployed to Android and iOS environments as a native application. The user interface of Tweets will be built using jQuery Mobile and creating the native application will be done via PhoneGap. We will also use the PhoneGap Storage API to access native database functionality. All coding will be done with HTML and JavaScript utilizing jQuery, jQuery Mobile, and the PhoneGap libraries.

Tutorial Teaser

In Part II, we started reviewing the Tweets application. In “Review Of index.html”, our main focus was on the static structure of the HTML and jQuery Mobile code that make up the application screens. The section named “Twitter API” gave an overview of the Twitter API methods user_timeline and search. The next section, “Code Review”, gave a review of the JavaScript code that implements the application functionality. Part II discussed “Initial Page Load”, “Utility Functions”, “Database Access Functions”, and started the discussion on “Core Business Logic Functions”.

In Part III, we will continue inspecting the “Core Business Logic Functions” taking up from where we left in Part II and finish the code review of the Tweets application by looking at “Event Handlers” & “Page Display Functions”.

Code Review – Core Business Logic Functions (Continued)

Function storeCurrentInput()

storeCurrentInput() is responsible for iterating through the current list view of search terms & screen names, constructing a comma separated string consisting of those entries and passing those entries to putInputsIntoStorage() as a parameter. The function putInputsIntoStorage() then utilizes the PhoneGap database API to store those entries in the local database. The following are the constants used in this function.

var EMPTY = '';
var LI = 'li';
var ID = 'id';
var COMMA = ',';
var PREFIX = '^';

The following is a full listing of the function.

function storeCurrentInput(){
  var tmp = EMPTY;
  currentInputsVar.find(LI).each(function(){
    var plainId = $(this).attr(ID);
    if(plainId.match(/_d_li_s$/)){
      tmp = tmp + COMMA + PREFIX +$(this).attr(ID).substring(5,$(this).attr(ID).length-7);
    }else{
      tmp = tmp + COMMA + $(this).attr(ID).substring(5,$(this).attr(ID).length-5);
    }
  });
  if(tmp.length < 1){
    putInputsIntoStorage(tmp);
  }else{
    putInputsIntoStorage(tmp.substring(1));
  }
}

The variable tmp will store the comma separated list of screen names & search terms. Initially it is an empty string. Note that the global variable currentInputsVar points to either the list view with id='currentInputs' (narrow-screen device) or id='currentInputsCell' (wide-screen device). Using jQuery find() and each() functions, we iterate through the list. The plainId variable is set to the value of the id attribute of the current list item. From review of addInput(), the id attribute always starts with nput_. If a search term, the id attribute ends with _d_li_s, e.g. id='nput_fortlauderdale_d_li_s'. If a screen name, it ends with _d_li, e.g. id='nput_SunSentinel_d_li'.

Get the Full Series!

This tutorial series is available to Tuts+ Premium members only. Read a preview of this tutorial on the Tuts+ Premium web site or login to Tuts+ Premium to access the full content.

Joining Tuts+ Premium. . .

For those unfamiliar, the family of Tuts+ sites runs a premium membership service called Tuts+ Premium. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Mobiletuts+, Nettuts+, Aetuts+, Audiotuts+, Vectortuts+, and CgTuts+. You’ll learn from some of the best minds in the business. Become a premium member to access this tutorial, as well as hundreds of other advanced tutorials and screencasts.