In this tutorial you will build a jQuery Mobile app based on an Executive Dashboard prototype that I put together some time ago while working on my jQuery Mobile book. The app consists of a screen that renders charts and a summary table, all displaying important performance indicators for a hypothetical business. You will find it useful as a starting point for a dashboard-type application using jQuery Mobile.
I just published How to Build a jQuery Mobile Application, a book that will teach you the essential skills you need to succeed developing apps with jQuery.
As I do in the tutorials on this blog, the book follows a hands-on approach, walking you through the process of building a jQuery Mobile application. Here are some of the subjects you will learn:
- jQuery Mobile pages, dialogs, and navigation
- List view and master-detail user interfaces
- Capturing user input with form elements
- Saving application data on the device
- Synchronizing application data with a server
If you like to learn by doing, this is a book for you.
Check It Out
You can preview the book here: Learn more about How to Build a jQuery Mobile Application.
You can download the book here: Download How to Build a jQuery Mobile Application.
Thanks to the Reviewers
What Do You Think?
I would also like to hear what you think about the book and how I can make the next version better. Please leave a comment if you have a few minutes.
In this fourth part of my series on how to build a jQuery Mobile application, we are going to complete the following tasks:
- Implement the behavior of the app when a user tries to save an invalid note.
- Implement the ability to delete notes.
- Create and apply a custom theme swatch, to change the look of one of the application’s dialogs.
If you ever need to choose between jQuery Mobile and Sencha Touch, you need to consider these factors before making your decision:
About jQuery Mobile
- It’s a UI-only library, which relies on jQuery and jQuery UI for DOM manipulation, Ajax and other utilities
- To create UI widgets, you generally need to hand-code their html, and the library enhances their look and feel
- As it works by enhancing the html you create, it allows you to re-use or re-purpose existing html
- It has a relatively small object model, which makes it faster and easier to learn, specially if you are familiar with jQuery
- It does not impose a coding discipline or structure, which gives you flexibility, but can lead to applications that are difficult to maintain
- Easier to integrate with other frameworks
- Targets more devices than Sencha Touch
- Not tied to a particular vendor
About Sencha Touch
- It’s a library that tries to do it all: UI widgets, DOM manipulation, Ajax and other utilities
- Does not depend on other libraries
- Has a large object model, which provides more features out of the box, but takes longer to learn
- Imposes a coding structure and discipline, which generally results in well-organized code
- Provides built-in server and local storage abstractions, which make it easier to perform CRUD operations on relational data
- Has built-in facilities for creating iOS and Android native packages
- Targets less devices than jQuery Mobile
Want To Learn More?
I have a selection of Sencha Touch and jQuery Mobile tutorials that will help you build great applications. Check them out using these links:
In this third part of my tutorial on how to create a mobile web app using jQuery Mobile we are going to focus on the following areas:
- How to pass information between the Notes List page and the Note Editor page using URLs and query strings
- How to load a note in the Note Editor page
- How to save a new or edited note
Let’s begin with a few changes that will make the application easier to maintain and test.
This is the second part of my tutorial on how to create a mobile web app using jQuery Mobile. In this tutorial we’re building a mobile web application that offers its users the following features:
- Ability to create, edit and delete notes.
- Ability to store notes on the device running the application, across browser sessions.
- Ability to view the entire collection of notes stored on the device.
In the first chapter of this series we started building the business logic layer of the app. We are using a simple workflow that consists of the following steps:
- Use the Jasmine framework to define the business logic behavior.
- Implement the behavior in the application.
- Confirm that the implemented behavior adheres to its definition.
We’re now going to continue working on the business logic features that will allow us to retrieve the list of notes cached on the device. We’re also going to use the jQuery Mobile framework to present the cached notes to the user.
By the end of this article, we will have completed the first version of the Notes List screen. This screen will render the list of cached notes as depicted below.
This is the first part of a series of articles about how to create a mobile app using jQuery Mobile. As in my Sencha Touch tutorials, what we will do in this series is create a mobile web application that allows its users to take notes and save them in the device running the app.
In this first part of the tutorial, we are going to talk about the overall design of the application, and we will complete the following tasks:
- Define the features of the application
- Create low fidelity user interface mock-ups
- Begin creating Jasmine specifications for the app’s public interface
- Begin implementing the app’s public interface
Let’s get started.
The application has a simple feature set. We want to give our customers the following abilities:
- Create notes.
- Edit notes.
- Delete notes.
- Store notes on the device that is running the application, across browser sessions.
- View the entire collection of notes.
The Main Views
The first thing we need in the app is an interface for our users to create and edit notes. We can do this with a form, which we will call Note Editor. The form will look just like this mock-up, which I created using Balsamiq Mockups:
In addition, need a view that renders a list of the existing notes. The Notes List view will be the main view of the application. Our users will first see this view when they launch the app. This is how the Notes List should look:
We will connect the Notes List with the Note Editor in such a way that the Notes List will correctly reflect note additions, edits, and deletions.
OK. We defined the features and look of the app, which brings us right into the realm of specifications and testing.
Here are some links to interesting jQuery Mobile tutorials for your reading pleasure:
- jQuery Mobile Framework – A Forms Tutorial. In you’re interested in form elements, this small B2C application example focuses on basic elements such as page structure, forms and Ajax form submission.
- 10 handy jQuery mobile tips and snippets to get you started. As the title says, these are snippets and tips that help make your development easier. Among other things, they cover the structure of a mobile page, how to target devices and platforms and how to build column layouts.
- Build a jQuery Mobile Survey App. This is a tutorial series on creating a survey web application with jQuery Mobile and Ruby on Rails. You can easily adapt what you learn here to other server-side technologies such as ColdFusion and ASP.NET.
- Build a Contacts Application With jQuery Mobile & the Android SDK. If you’re interested in creating hybrid applications with a JQuery Mobile UI, this is a series that uses a contacts management application to show the integration between a jQuery Mobile UI and the Android SDK.
- Use jQuery Mobile to Build a Native Android News Reader App. Another example of how to integrate a jQuery Mobile UI with the Android SDK.
- jQuery Mobile videos at Pinehead.tv. Multiple videos on how to create jQuery Mobile interfaces, covering events, styling, links, buttons, navigation and Admob.
- jQuery Mobile UI Cheat Sheet. Here you can quickly lookup the basic syntax of pages and buttons, form elements, lists, dialogs, toolbars and column layouts.
- Creating and using custom icons in jQuery Mobile. This is a tutorial on how to create and add custom icons to your jQuery Mobile UI. It includes a section on high-res icon support for iPhone 4′s Retina display and newer high-resolution devices.
- Adding iPhone style swipe to delete button to a listview component in jQuery Mobile. For those of us wanting to add iPhone UI features to our mobile web apps.
- A tutorial on how to include jQuery Mobile in Oracle APEX.
- The jQuery Mobile tutorial is a comprehensive tutorial that aims to explain how to use jQuery Mobile effectively, from A to Z.
Want To Learn More?
Check out my How to Build a jQuery Mobile Application EBook. It teaches you how jQuery Mobile works by guiding you, step by step, through the process of building an application. It even explains how to keep application data synchronized with a server.
You might also want to check my series on how to build a jQuery Mobile application: