jQuery Mobile Skeleton App

The skeleton on Windows Phone 7, iOS, and Android
Most modern IDEs include templates, a way to begin a new project without having to write all of the code from scratch. In order to speed up and standardize my jQuery Mobile development, I created a skeleton. The skeleton serves the same purpose as a template for my own projects.
There isn’t anything difficult going on with the skeleton, but I will walk you through the application anyways to make sure that you understand everything.
The Files
First, I should explain the files which are included in the project. At the base of things are jQuery and jQuery Mobile core files. In a production app, I would normally get these files from a content delivery network CDN, but during development it helps to have the files local. 
Next, we have the app.js file. This is my application’s core file. It contains the Kernel, which sends page events to their handler. And Events, which hooks all of the page events and feeds them to the Kernel. The last part of the file are the two page handler functions. 
The skeleton app’s files

The final JavaScript file is the hideAddressBar.js. I am not completely in love with this solution the Android address bar problem, but it mostly works. Every time we receive a “pageinit” event we call the hideAddressBar function.
The HTML files should be nothing surprising so there is no real need to explain them except for the attribute, data-rockncoder-jspage=”page2″. This attribute is used to join the HTML to its corresponding JavaScript object. The Kernel uses it to determine the name of the JavaScript object and call the appropriate page event handler if it exists.
I hope this code helps you to write something cool. If it does drop me a line and an URL. 

https://gist.github.com/2717186.js?file=app.js
https://gist.github.com/2717189.js?file=hideAddressBar.js
https://gist.github.com/2717195.js?file=index.htm
https://gist.github.com/2717197.js?file=page2.htm

Advertisements

15 thoughts on “jQuery Mobile Skeleton App

  1. The link for the source code is unfortunately down. ;(

    Starting with JQuery mobile today and love your way of presenting and explaining. Hoping for more, greetings from Germany. =)

    Like

  2. Nice, thanks =)

    Seems that most of you links are broken in your articles. 😉
    I already using your skeleton and it feels really good to have a clean seperation, little bit like a model/controller and a view. Cant thank you enough for this.

    ow I try to fill pages with dynamic data (from a json). Creating a link is easy, but dont have a good! idea to fill the page with the data.

    First idea was to create a link like href='page?name=item.name' but reading the data with get or something like this sounds not very sexy. If you are bored like hell, why not a tutorial about loading dynamic stuff. 😉

    Like

  3. Thanks for your suggestions and kind words. Sorry about the links, I am in the middle of moving all of my source code to GitHub, which is taking longer than planned. After Code Camp San Diego (June 23/24), I will be releasing an updated video/tutorial combination of using jQuery Mobile, Backbone, and ASP.NET MVC in combination. This will cover handling dynamic data via a RESTful interface. An older version of the video is available on my YouTube channel. A short bit after that I will do a similar tutorial with Node.js instead of ASP.NET MVC. I always announce new tutorials on Twitter, so please follow me @therockncoder.
    Thanks again.

    Like

  4. Hi Troy

    thanks for this great skeleton which it would be very helpful and educative.
    Let's me tell u one comment, in the app.js in the line 9:
    pageName = $(this).attr(“data-rockncoder-jspage”);

    you could use:
    pageName = $(this).attr(“id”);
    Doing this, u could save one extra data param in the definition of the page and use the 'id' where the name already exists.
    What do u think?
    Joan

    Like

  5. Hi Joan,
    Thanks for reading my blog and your kind words. Be sure to follow me on Twitter @therockncoder to know when new posts are released.

    My reason for not combining the data parameters is that in actual production code I have quite a few examples of pages which share logic. Think about things like about boxes or legal text, where the logic is the same, so I route them to the same handler. This also happens in the way I handle both responsive design and orientation change. The page looks different but the logic is the same.

    Having the handler not bound to the id allows me the freedom to do that.

    Troy

    Like

  6. Hey Troy, its me again. 😉

    Today I've found some time to work again with your skeleton and I have a little problem.

    Whenever I add a js file (like the hideAdressBar and so on) at the end or the beginning of the page nothing happens.

    Lets say I add the test.js. This file just contains the order: “alert('test');” When I come to this page due to a normal link, nothing happens. But when I reload the page, suddenly I get the alert message. I can't find the error. ~~

    Like

  7. Hm, I guess it must be my own mistake, ofc, but also the code in the pageinit function (app.js) is only called when I reload the page. Must be a problem in my head I guess, but maybe you can help me with a smart hind. :>

    Like

  8. That's a great question and needs an explanation.
    Browsers can normally load 3 or more files at a time, except when it comes to JavaScript files. Once the browser encounters a JavaScript file it blocks until that file is loaded and executed. So in order to decrease our perceived load time, we only place the most absolutely needed JS files in the head section, the rest go in the body.
    For the user, your site loads quicker, and while they are thinking about what to do first, the rest of the site loads in.

    Putting JS files in the body is a recommended best practice for building fast sites.

    –Troy

    BTW: Will you be coming to my Google+ Hangout on October 16th? I will detail how to create games using HTML5 and jQuery Mobile. I will explain and give away the full source to an HTML5 game. Plus there will be lots of performance too. For more info: http://therockncoder.blogspot.com/2012/09/free-beginning-html5-game-programming.html

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s