Mobile Web Apps

In this lesson, you’ll learn how to build a single-page web application using Moovweb and the jQuery Mobile framework!

Make sure to check out our follow-up lesson Mobile Hybrid Apps to learn how to add native functionality to your web application!

Please keep in mind that jQuery Mobile is a very opinionated framework and you should only build a full web application using jQuery Mobile if you are proficient at both JavaScript and handling Ajax requests.

Outline


jQuery Mobile Project Setup

First, start up the Developer Dashboard, and click on “Generate New Project”. You’ll configure the options to include jQuery Mobile related files.

For this lab, please use these settings:

For project configuration, click on “advanced customizations” and select the jquery-mobile mixer. Also, be sure to check the Templates box under jQuery Mobile. This will also include all the necessary dependencies (jQuery, jQuery UI) so you are ready to use jQuery Mobile out of the box!

Once the project has been generated and placed in your workspace, open up your favorite text editor and take a few minutes to examine two new files:

structure.ts is used to insert the proper jQuery Mobile structure onto every page so that whenever a page is “Ajaxed in” the transition will work smoothly. When using jQuery Mobile, every page must have a wrapper element with the attribute data-role="page" and inside that page there must be three more elements with attributes data-role="header", data-role="footer", and data-role="content".

Notice in header.ts, footer.ts, and home.ts, we then use that structure that has been inserted and fill it with whatever content we need from the page using Tritium.

You’ll want to remove any content that you don’t move into the header, footer, and content elements.

jqm.ts is our asset initializer and takes care of inserting all the relevant jQuery Mobile scripts and stylesheets we need in the proper order. It also sets all the transitions to be slide transitions and overwrites some of the padding that can be added automatically by jQuery Mobile.

Example Project

Make sure to check out our example web app that uses jQuery Mobile to “appify” igadgetcommerce.com.

iGadgetCommerce Web Application


jQuery Mobile Development Tips

Disabling jQuery Mobile

You can disable jQuery Mobile from affecting certain elements by setting the data-role attribute to "none". Sometimes you have to do this on all their children elements as well, so a useful piece of code you may want to turn into a function looks as follows:

$(".//*") {
  attribute("data-role", "none")
}

Custom Configuration

All your custom configuration can be done in the assets/javascript/jqm-custom-config.js file.

For example, to stop jQuery Mobile from “Ajax-ifying” all your links uncomment the following lines of code:

$(document).bind("mobileinit", function() {
  $.extend($.mobile, {
    ajaxEnabled: false
  });
});

If you only want to stop some of your links from being “Ajax-ified”, you could instead set data-ajax="false" on those links instead of using this script.

Separating Content into Multiple Pages

If you want to separate a single page into multiple pages/views in your web application, simply make a request to the same page using an added query parameter.

For example, “www.mysite.com/sameurl?page=2”. Then you can use that query parameter in your mappings.ts file to run a different Tritium transformation on the same page allowing you to break up content into multiple views.

Managing URLs

Use the data-url attribute on your anchors to make sure your links are going to the proper places and jQuery Mobile knows both what page it is currently on and what path should be in its URL history.

jQuery Mobile Events

jQuery Mobile Events can be used to trigger JavaScript that you may need to run on certain pages as they are Ajaxed in.

Remember, only the <body> element is used by jQuery Mobile so any scripts in the <head> of your pages will not be run. Make sure to move any page-specific JavaScript into the data-role="page" element so that it is executed.

You can use events such as pagechange, updatelayout, and more to trigger things like re-initializing widgets.

Redirection

Since jQuery Mobile throws errors when it receives a 302 redirect upon trying to Ajax a link, we have provided a simple workaround for any redirects you encounter.

The workaround returns a 200 in acceptable jQuery Mobile format, and then directs jQuery Mobile to follow the 302 using the Location header.

The details of this workaround can be found in the following files:


jQuery Mobile Templates

The jQuery Mobile configuration also comes with several jQuery Mobile templates including:

Just use the Tritium template() function to insert these widgets as follows:

template("_collapsible", "myCollapsible")

These templates are based on jQuery Mobile Widgets.

Each widget will be inserted with some default styles.

The default jQuery Mobile styles are located in the assets/stylesheets/globals/_jqm.scss file. So go ahead and change them to your liking!

The templates are located in the functions/templates/jqm folder and you can dive in and change their HTML markup as well.