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.

[Read more...]

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.

We will engineer our business logic using JavaScript modules and classes, and we will use the jQuery Mobile framework to help us create our presentation layer. We will build the app following a behavior-driven approach with the help of the Jasmine framework. For each use case, we will create a specification using Jasmine, then we will implement the specification in the application.

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.

Application Features

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.

[Read more...]