As jQuery Mobile follows the open web standards, you can be sure that your application can get maximum support and compatibility with a wide range of browsers and platforms. You can write your application once and it will work seamlessly on iPhones, iPads, Android phones and tablets, Blackberry, Bada, Windows, Symbian, Meego, and even the upcoming HTML5-based platforms, such as Boot2Gecko and Tizen. The same code will run on Chrome, Firefox, Opera, IE, Safari, and other browsers on your desktop. Further, it will work even on your smart TV or any other gadget that has a compatible browser which is compliant with the open web standards. The market reach potential is phenomenal.
The list of the currently certified supported browsers, platforms, and the grade of support is available on the jQuery Mobile website at http://www.jquerymobile.com/gbs. Note that some features, such as CSS 3D animations and AJAX, might not be supported on certain older and legacy platforms. Here, the framework resorts to Progressive Enhancement. This means that the basic functionality is supported initially. Later, when a more capable future browser or platform becomes available, your application automatically makes use of its capabilities and offers upgraded functionality. In most scenarios, you will not have to write the code or interfere in any way. This is a big plus when you compare mobile web applications with mobile native applications.
While coding native applications, you will have to write the code in different languages, based on the platform. You will then have to compile the code for each platform, and build binary packages that can run on the device. Upgrading the application to support the next version means you have to go back and redo the whole exercise of checking/fixing your code, rebuilding, and repackaging. This overhead compounds as you add support for more platforms. The whole thing just becomes unmanageable after a point. You are better off by just supporting the top one or two platforms for your application.
Of course, there are advantages of using native applications. The performance of your application could be a very crucial factor. There are certain applications where you have to go native, especially when you expect real-time responses. Also, with native apps, you can access core OS and device features, such as camera, accelerometer, contacts, and calendar. This is not easily done today with HTML5.
The jQuery Mobile framework has a wide array of plugins and tools that help you build your application. It has a very active and vibrant developer community, and new features are continuously being added. It is strongly backed by companies, such as Filament Group, Mozilla, Nokia, Palm, Adobe, Rhomobile, and others. Within its first year (in 2011), the framework has already won awards, such as the Packt Open Source Award and the .NET Innovation Award.
Web-based mobile applications have evolved. They used pure native code for the UI in the early days, then came flash and other plugin-based UI (such as Silverlight). But even Adobe and Microsoft (with its Windows 8 platform) are going full steam ahead on HTML5 development. So, the situation is ripe for the explosive growth of an open source web standards-based cross-platform framework, such as jQuery Mobile.
A simple jQuery Mobile application consists of a page, which forms the basic building block for your application. The page follows a basic structure with three main parts, the header , the page content , and the footer . You can build feature-rich applications with workflows using multiple pages, each page with its own functionality, logic, and navigational flow. This recipe shows how to create a page and write your first jQuery Mobile application.
Copy the full code of this recipe from the
code/01/welcome folder. You can launch this code using the URL:
Carry out the following steps:
Create the following
main.htmlfile using your favorite text editor:
<!DOCTYPE html> <html> <head> <title>Welcome</title> <meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' href='http://code.jquery.com /mobile/1.1.1/jquery.mobile-1.1.1.min.css' /> <script src='http://code.jquery.com/jquery- 1.7.1.min.js'></script> <script src='http://code.jquery.com/mobile /1.1.1/jquery.mobile-1.1.1.min.js'></script> </head> <body>
Create the jQuery Mobile page:
<!-- Main Page --> <div id='main' data-role='page'> <div data-role='header'> <h1>Welcome!</h1> </div> <div id='content' data-role='content'> <p>The jQuery Mobile Cookbook</p> </div> <div data-role='footer'> <h4>Enjoy reading the book ...</h4> </div> </div> </body> </html>
main.html as an HTML5 document starting with the
<!DOCTYPE html> declaration. In the
<head> tag of the file, add a
<meta> tag and specify that the viewport should occupy the entire device width by using the
content='width=device-width' attribute. Include the jQuery Mobile stylesheet by using the
<link> tag pointing to the CSS file location on the jQuery Mobile Content Delivery Network (CDN) site.
<script> tags and point
src to the CDN location, as shown in the code. You are now ready to create the page.
The page, its header, footer, and content are all
<div> containers, which are styled by using the
data-role attributes. Add a
<div> tag with
data-role='page' to the
<body> tag. Add three
div tags with
'content', and finally the
'footer' as child elements within the page. This will create the page header, content, and footer respectively. You can add any text, forms, lists, or other HTML controls within these
<div> tags. The framework will enhance and render the controls in a touch-friendly mobile-enabled style.
Now, open the
main.html file in your favorite browser, and you will see an output similar to the following screenshot:
Open and compare the output of this file in different browsers, mobile devices, and tablets. You will see that on all-compliant and certified browsers/devices, the page opens up and looks pretty much the same.
Congratulations! You just created your first cross-platform jQuery Mobile web application.
You can use the libraries directly from the jQuery Mobile CDN, as shown in this recipe. You could also download the library files (available in a single archive) at http://www.jquerymobile.com/download, and host the files locally within your network. When hosted locally, you just have to update the links in your code to point to the correct location of the files on your network (or to the path on your hard disk), as shown in the following code snippet:
<link rel="stylesheet" href='[local path]/jquery.mobile- 1.1.1.min.css' /> <script src='[local path]/jquery-1.7.1.min.js'></script> <script src='[local path]/mobile/1.1.1/jquery.mobile- 1.1.1.min.js'></script>
By default, the framework provides five basic color schemes or combinations called color swatches
. They are named
e. By default, swatch
d is used when you create a page. This gives the page a bright combination of white and black colors, as seen in the previous screenshot. You can change the color swatch of your page and header/footer by using the
data-theme attribute, as shown in the following code snippet:
<div data-role='page' data-theme='a'> <div data-role='header' data-theme='b'> …. <div data-role='footer' data-theme='b'>
The output will now be similar to the following screenshot:
The Using JS Bin to create a simple application recipe
The Writing a single-page template application and Writing a multi-page template application recipes in Chapter 2, Pages and Dialogs
The code in this recipe was created using the JS Bin web application available at http://www.jsbin.com. The code is available in the
code/01/jsbin source folder. You can launch the code using the URL
Launch the JS Bin web application tool at the URL http://www.jsbin.com, and you will see a basic HTML template.
Select the Add Library link on the top-left panel, and include the latest jQuery Mobile library files. Next, edit the
<head>section, as shown in the following code snippet:
<html> <head> <link href="http://code.jquery.com/mobile/latest /jquery.mobile.css" rel="stylesheet" type="text/css" /> <script src="http://code.jquery.com /jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com /mobile/latest/jquery.mobile.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Welcome using JS Bin</title> </head>
Add code to the
<body>section to create a simple jQuery Mobile page:
<body> <!-- Main Page --> <div id="main" data-role="page"> <div data-role="header"> <h1>Welcome - JS BIN</h1> </div> <div id="content" data-role="content"> <p>The jQuery Mobile Cookbook</p> </div> <div data-role="footer"> <h4>Enjoy reading the book ...</h4> </div> </div> </body> </html>
Launch the JS Bin web application in your browser. You will see the following screen in your browser, with a basic HTML template (which you can edit) on the left side. A menu bar is available at the top and an Output pane is available on the right, to instantly preview the output of your code:
Click on the Add library menu option and select the jQuery Mobile Latest option as shown in the following screenshot:
This will include the links and references to the jQuery Mobile and jQuery libraries in the
<head> section of the HTML.
When you add the jQuery Mobile library to your code using JS Bin, make sure you edit and set the correct versions for both jQuery Mobile and jQuery libraries that you want to use with your application. When this recipe was written, jQuery v1.6.4 was being used in JS Bin, whereas jQuery v1.7.1 is recommended to be used with jQuery Mobile v1.1.1.
Next, edit the
<meta> tag to set the correct viewport
scale, as shown in the code. Then, add a page to the
<body> tag using a
div tag with
data-role="page". Create the header (
data-role="header"), page content (
data-role="content"), and footer (
data-role="footer"), as shown. As you add these sections, you will notice that the Output pane on the right side of the screen gets updated and shows the output preview of your code.
This recipe shows you the simple steps required to create a basic jQuery Mobile application using JS Bin. JS Bin provides many features that are nice to use, such as creating and using ready templates, saving and forking your code using GitHub, and cloning your code. This tool is best suited for when you want to store your files online and collaborate on your source files. For more information and tutorials on using JS Bin, refer to http://jsbin.tumblr.com/.