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

By Brian Rinaldi

This is part 5 in an ongoing series. You can find part 1 herepart 2 herepart 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.

6 Comments

  1. Junni said:

    .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) {“

  2. Zach said:

    Strangely, my repo data won’t console log but will display in the browser. Any thoughts?

  3. varand said:

    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.

  4. ehb said:

    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?

*

*

Top