Create Your First Mobile App with PhoneGap Build – Adding Pages with jQuery Mobile

This is part 5 in an ongoing series. You can find part 1 here, part 2 here, part 3 here and part 4 here. The files for the sample app are available here.

We’ve made our app look and feel more like an app, but our list items, when clicked, simply open up the project web page. At this point, let’s create a new page to view the selected repository’s details. In your code editor, start by creating a new page called repo-detail.html. The HTML code below is the contents of our new page, which is mostly made up of containers that we will fill with the data for the chosen item via JavaScript.

<!DOCTYPE HTML>
<html>
<head>
</head>

<body>

<div id="reposDetail" data-role="page" data-add-back-btn="true">

    <div data-role="header">
        <h1>Repository Details</h1>
    </div>

    <div data-role="content">
        <div id="repoDetails">
            <h3 id="repoName"></h3>
            <p id="description"></p>
            <p id="forks"></p>
        </div>
        <div id="ownerDetails">
            <img id="avatar" align="left" style="padding-right: 5px;" />
            <h3 id="ownerName"></h3>
        </div>
    </div>

</div>

</body>

In index.js, we’ll now change the link for each list item to use the new page instead of the project’s GitHub repository. As you may notice, we are passing the necessary project data (the username and project name) as URL variables.

function loadRepos() {
    $.ajax("https://api.github.com/legacy/repos/search/javascript").done(function(data) {
        var i, repo;
        $.each(data.repositories, function (i, repo) {
            $("#allRepos").append("<li><a href='repo-detail.html?owner=" + repo.username + "&name=" + repo.name + "'>"
            + "<h4>" + repo.name + "</h4>"
            + "<p>" + repo.username + "</p></a></li>");
        });
        $('#allRepos').listview('refresh');
    });
}

In order to parse the URL variables on the subsequent page, I am going to use a function called getURLVars(). I am not sure who the original author of this function is but it is frequently reproduced on various sites when searching for parsing URL variables with jQuery.

function getUrlVars() {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

Next we are going to bind an action to jQuery Mobile’s pageshow event. This event will be triggered when our new page is added to the DOM. When this event is fired, we will make a call the GitHub API get repository method to request the full details for the selected project. This is accomplished by adding the following code to index.js.

$('#reposDetail').live('pageshow', function(event) {
    var owner = getUrlVars().owner;
    var name = getUrlVars().name;
    loadRepoDetail(owner,name);
});

function loadRepoDetail(owner,name) {
     $.ajax("https://api.github.com/repos/" + owner + "/" + name).done(function(data) {
         console.log(data);
     });
}

You may have noticed that when we load the repository details, I am simply logging the returned data to the browser console so that we can inspect it. Let’s run this in the browser and take look at the console at the data being returned so that we can decide what we will display for the user in our detail page.

Next let’s add in some of the details text. You can feel free to add styling and/or other detail items that are not in my example code below to make your app more useful. For example, you might want to add the created date and last updated date for each project.

function loadRepoDetail(owner,name) {
     $.ajax("https://api.github.com/repos/" + owner + "/" + name).done(function(data) {
         var repo = data;
         console.log(data);

         $('#repoName').html("<a href='" + repo.homepage + "'>" + repo.name + "</a>");
         $('#description').text(repo.description);
         $('#forks').html("<strong>Forks:</strong> " + repo.forks + "<br><strong>Watchers:</strong> " + repo.watchers);

         $('#avatar').attr('src', repo.owner.avatar_url);
         $('#ownerName').html("<strong>Owner:</strong> <a href='" + repo.owner.url + "'>" + repo.owner.login + "</a>");
     });
}

You can now test the app in the browser and, if you are happy with the results so far, zip it up and upload it to PhoneGap Build. Once hydration is complete, simply reopen the app on your device. Below is a screenshot of the detail page of our app running in my browser. Changing pages will use the default page transition of “fade,” though this setting is configurable.

step3

In part 6 we’ll begin to integrate PhoneGap API’s by examining the storage API. You can read part 6 here.

Previous

Backbone Model Unit Testing with Jasmine

How to create an advanced HTML5 placeholder polyfill

Next

8 thoughts on “Create Your First Mobile App with PhoneGap Build – Adding Pages with jQuery Mobile”

  1. .live has been deprecated from jQuery 1.7+

    The following line: “$(‘#reposDetail’).live(‘pageshow’, function(event) {” should be replaced by “$(document).on(‘pageshow’, ‘#reposDetail’, function(event) {“

  4. Starting from last chapter, my code is not working in emulator when installed from builder’s apk file (I built it via github),
    however everything is ok when I run local android project.

    I’m getting “deviceready has not fired after 5 seconds”, in logCat.

    Anyone can help?

    more info:
    I have changed the origin to (*), and also tried putting app.initialize() in onload in body tag.

  5. Bravo!!! So far, GREAT tutorial, been looking for a while for this.
    Everything seems to be working but I am getting the following error when running in Ripple…
    Uncaught TypeError: Object [object Object] has no method ‘listview’

    Seems like it may be trying to use the listview before it is created, OR, maybe some jQuery code is being overwritten/stepped on because of the loading order. Not sure yet. Anyone else seen this and been able to resolve it?

  6. Hey,

    This is a great tutorial, it’s helped me a lot so thanks for that!

    I do have a question, I am developing an app that has lots of items for a game, these items have bonus stats attached to it. In total there are 412 items. I was going to create an API for all of these items and pull them in like you have done.

    But if I do this would it be possible to list say, the top 5 items for ‘defense’? So sort the data? How would I go about this if it is possible? Or would putting all the items in a database be better?

    Thanks

    Ricky

  7. It is a wonderfull news. I hope you will share more code saplmes like integration of the google maps js api (not native) results with the wikitude plugin using json. Really keen to test it!

Comments are closed.