You are here: Home / Archives for JQuery Mobile Tutorial

Building a jQuery Mobile Application, Part 4

8 Comments

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.

[Read more...]

Tagged With: 8 Comments

Sencha Touch or jQuery Mobile? – Read This Before You Make a Decision

2 Comments

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
  • Some simple applications can be created using only html, without having to write JavaScript code
  • 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
  • Follows a JavaScript-centric approach, where you are required to write little html
  • 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:

Tagged With: , 2 Comments

Building a jQuery Mobile Application, Part 3

5 Comments

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.
[Read more...]

Tagged With: 5 Comments

Building a jQuery Mobile Application, Part 2

11 Comments

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...]

Tagged With: , 11 Comments

Building a jQuery Mobile Application, Part 1

5 Comments

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...]

Tagged With: , 5 Comments

Interesting jQuery Mobile Tutorials

7 Comments

Here are some links to interesting jQuery Mobile tutorials for your reading pleasure:

You might also want to check my series on how to build a jQuery Mobile application:

Tagged With: 7 Comments

Creating a Website Using JQuery Mobile, Part 3

5 Comments

JQuery Mobile is a great UI framework for developing mobile applications, which works by applying progressive enhancements to your clean, semantic HTML, and transform it into rich user interfaces.

In this series I have been showing you how to quickly put together a fictional event website using JQuery Mobile. I have saved the construction of the last two pages, event Schedule and Information, for this article.

The Schedule Page

Below is how I need the Schedule page to look. (Notice that it is simpler than the original version in the first part of this series.)

I will again use JQuery Mobile’s standard boilerplate page template as a reference, adding HTML elements for the leading text and the list of sessions:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Schedule</title>
    <link href="../jquery-mobile/jquery.mobile-1.0a2.css" rel="stylesheet" type="text/css" />
    <link href="css/event.css" rel="stylesheet" type="text/css" />
    <script src="../jquery-mobile/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="../jquery-mobile/jquery.mobile-1.0a2.js" type="text/javascript"></script>
</head>
<body>
    <div data-role="page">
        <div data-role="header">
            <h1>
                Schedule</h1>
        </div>
        <div data-role="content">
            <div id="banner">
                <h2>
                    Mobile Dev 2011</h2>
            </div>
            <p>
                There has never been a more exciting time to be a mobile developer. We have one
                full day of mobile development awesomeness for you!</p>
            <ul data-role="listview" data-inset="true">
                <li class="list-item-schedule">
                    <div class="list-item-content-schedule">
                        <h3>
                            Keynote</h3>
                        <p class="session-time-speaker">
                            9:00 AM - 9:30 AM&nbsp;&nbsp;Speaker B</p>
                        <p>
                            Short introduction to keynote.</p>
                    </div>
                </li>
                <li class="list-item-schedule">
                    <div class="list-item-content-schedule">
                        <h3>
                            Session 2</h3>
                        <p class="session-time-speaker">
                            10:00 AM - 10:55 AM&nbsp;&nbsp;Speaker D</p>
                        <p>
                            Short introduction to session.</p>
                    </div>
                </li>
                <li class="list-item-schedule">
                    <div class="list-item-content-schedule">
                        <h3>
                            Session 3</h3>
                        <p class="session-time-speaker">
                            11:00 AM - 12:00 AM&nbsp;&nbsp;Speaker A</p>
                        <p>
                            Short introduction to session.</p>
                    </div>
                </li>
                <li class="list-item-schedule">
                    <div class="list-item-content-schedule">
                        <h3>
                            Lunch</h3>
                        <p class="session-time-speaker">
                            12:00 PM - 1:30 PM</p>
                        <p>
                            Talk about luch here.</p>
                    </div>
                </li>
                <li class="list-item-schedule">
                    <div class="list-item-content-schedule">
                        <h3>
                            Session 4</h3>
                        <p class="session-time-speaker">
                            1:30 PM - 3:00 PM&nbsp;&nbsp;Speaker C, Speaker B</p>
                        <p>
                            Short introduction to session.</p>
                    </div>
                </li>
                <li class="list-item-schedule">
                    <div class="list-item-content-schedule">
                        <h3>
                            Session 5</h3>
                        <p class="session-time-speaker">
                            3:15 PM -  4:30 PM&nbsp;&nbsp;Speaker C, Speaker B</p>
                        <p>
                            Short introduction to session.</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

I am using an unordered list to display the sessions, as I did to display the speakers in the Speakers page. Following the philosophy of progressive enhancements, the framework takes care of transforming the list into a mobile-friendly list view. I only need to worry about the HTML template used within each li element.

This is how the page looks:

The Information Page

The Information page is where I will display the details about the event’s venue, hotels and transportation:

I will keep this page as simple as possible. You can grab the source code and embellish the page as you see fit.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Information</title>
    <link href="../jquery-mobile/jquery.mobile-1.0a2.css" rel="stylesheet" type="text/css" />
    <link href="css/event.css" rel="stylesheet" type="text/css" />
    <script src="../jquery-mobile/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="../jquery-mobile/jquery.mobile-1.0a2.js" type="text/javascript"></script>
</head>
<body>
    <div data-role="page">
        <div data-role="header">
            <h1>
                Information</h1>
        </div>
        <div data-role="content">
            <div id="banner">
                <h2>
                    Mobile Dev 2011</h2>
            </div>
            <h3>
                The Event Venue</h3>
            <p>
                Information about the venue.</p>
            <h3>
                Hotels</h3>
            <p>
                This is the place for hotels information.</p>
            <h3>
                Transportation</h3>
            <p>
                All about transpoprtation.</p>
        </div>
    </div>
</body>
</html>

The page renders like so:

There is More to JQuery Mobile

If you are new to JQuery Mobile, as you walk through the example’s source code you will notice how fast you can get results using this framework.

In order to make it easy for you to get started, I have deliberately simplified the example, using only a few static HTML pages, and working with the page framework, toolbars and list view elements in JQuery Mobile.

However, there is much more to JQuery Mobile than what I have touched in this series. In upcoming articles I will introduce you to important user interface components such as dialogs, form elements and toolbars, as well as APIs that allow you to work with different touch events and screen orientations.

Downloads

Grab the code from the JQuery Mobile Tutorial repo: MiamiCoder JQuery-Mobile-Tutorial

More information

Check out the JQuery Mobile documentation, available at JQuery Mobile’s site.

Tagged With: 5 Comments

Creating a Website Using JQuery Mobile, Part 2

12 Comments

This article is a continuation of my series on how to build a website with JQuery Mobile. In the first part of this tutorial, Creating a Website Using JQuery Mobile, Part 1, I presented the requirements for the site and finished implementing the Home page.

Now it is time to build the Speakers page.

From Wireframe to HTML

Let’s take a look at the wireframe for this page:

As with the home page, I will use the JQuery Mobile’s standard boilerplate page template for the Speakers page. I will start with a plain page like so:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>My Event</title>
    <link href="../jquery-mobile/jquery.mobile-1.0a2.css" rel="stylesheet" type="text/css" />
    <link href="css/event.css" rel="stylesheet" type="text/css" />
    <script src="../jquery-mobile/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="../jquery-mobile/jquery.mobile-1.0a2.js" type="text/javascript"></script>
</head>
<body>
    <div data-role="page">
        <div data-role="header">
            <h1>
                Speakers</h1>
        </div>
        <div data-role="content">
            <div id="banner">

            </div>
            <p>
                Page content goes here.</p>

        </div>
    </div>
</body>
</html>

This is how it looks:

Before adding more elements to this page, I will test that the incoming link from the Home page is working correctly:

JQuery Mobile Page Transitions

When you try the code, you will notice a nice slide transition from the Home to the Speakers page. The jQuery Mobile framework includes a set of six CSS-based transition effects:

  • Slide
  • Slideup
  • Slidedown
  • Pop
  • Fade
  • Flip

According the the JQuery Mobile’s page transitions documentation , these effects can be applied to any object or page change event. The effects apply the chosen transition when navigating to a new page, and the reverse transition for the Back button. (The right to left slide transition is the default transition.)

You will also notice the “back” button. The framework automatically generates a "back" button on every page. If needed, you can prevent the back button from being added to a header by either adding your own button to the left slot, or adding the data-nobackbtn="true" attribute to the header container.

Adding Page Elements

Let’s now proceed to add elements to the Speakers page.

I first need some leading text in the content area of the page:

<div id="banner">
  <h2>Mobile Dev 2011</h2>
</div>
<p>We've got the world's greatest experts ready to deliver a full day of amazing content!</p>

Finally, I need an unordered list to display the speakers. Each speaker will have its own template within an li element:

<ul data-role="listview" data-inset="true">
    <li class="list-item-speaker">
        <div class="list-item-content-speaker">
            <img src="img/placeholder-2.png" class="thumb-speaker-small" />
            <h3>
                Speaker A</h3>
            <p>
                Short introduction of Speaker A</p>
        </div>
    </li>
    <li class="list-item-speaker">
        <div class="list-item-content-speaker">
            <img src="img/placeholder-2.png" class="thumb-speaker-small" />
            <h3>
                Speaker B</h3>
            <p>
                Short introduction of Speaker B</p>
        </div>
    </li>
    <li class="list-item-speaker">
        <div class="list-item-content-speaker">
            <img src="img/placeholder-2.png" class="thumb-speaker-small" />
            <h3>
                Speaker C</h3>
            <p>
                Short introduction of Speaker C</p>
        </div>
    </li>
    <li class="list-item-speaker">
        <div class="list-item-content-speaker">
            <img src="img/placeholder-2.png" class="thumb-speaker-small" />
            <h3>
                Speaker D</h3>
            <p>
                Short introduction of Speaker D</p>
        </div>
    </li>
    <li class="list-item-speaker">
        <div class="list-item-content-speaker">
            <img src="img/placeholder-2.png" class="thumb-speaker-small" />
            <h3>
                Speaker E</h3>
            <p>
                Short introduction of Speaker E</p>
        </div>
    </li>
    <li class="list-item-speaker">
        <div class="list-item-content-speaker">
            <img src="img/placeholder-2.png" class="thumb-speaker-small" />
            <h3>
                Speaker F</h3>
            <p>
                Short introduction of Speaker F</p>
        </div>
    </li>
</ul>

As in the Home page, assigning the data-role=“listview” attribute to the ul element will cause jQuery Mobile to apply styles to the list that will transform it into a mobile-friendly list view. That’s all it takes to complete the Speakers page:

Next Steps

The site is starting to take shape now that the Home and Speakers pages are finished. In the next part of this series I will build the Schedule page.

Thoughts? Comments?

Downloads

Grab the code from the JQuery Mobile Tutorial repo: MiamiCoder JQuery-Mobile-Tutorial

More information

Check out the JQuery Mobile documentation, available at JQuery Mobile’s site.

Tagged With: 12 Comments
« Older Posts