Read an Excerpt
WORKING WITH jQTOUCH TO BUILD WEBSITES ON TOP OF jQUERY
By MATTHEW DAVID
Focal PressCopyright © 2011 Elsevier Inc.
All right reserved.
Chapter OneWORKING WITH jQTOUCH TO BUILD WEBSITES ON TOP OF jQUERY
Browser technologies are allowing you to bring rich applications into your web browser. In this chapter you will see how you can use the Open Source jQTouch Library to extend the functionality built into jQuery to build websites that run on your iOS and Android phones but look and interact as if they are native apps. You will learn how to create custom interfaces, screen flipping, and set themes using jQTouch.
Rapidly Building iPhone Apps without Learning Objective-C
Objective-C, the programming language used to create native apps for the iPhone, is not an easy language to learn. Although Steve Jobs espouses how easy it is to build an iPhone app (there are, after all, over 350,000), it is still not as easy as developing a website (there are billions of websites, in comparison). But this is all changing with tools such as jQTouch.
jQTouch is an open source plug-in for the jQuery library that allows you to very easily extend your website building skills to create solutions for the iPhone and Google's Android. You can get started using jQTouch by downloading it at jqtouch.com/ as shown in Figure 3.1.
Something to note is that although jQTouch is built using HTML5 standards on top of the jQuery framework, it has not been optimized to run on all devices. For instance, response time on Windows Phone 7 has not been tested. jQTouch is optimized for Apple's iPhone (not the iPad) and will work well on Android phones (but not tablets).
Though it may seem highly selective, you do get some advantages that general-purpose platforms do not allow you to leverage. For instance, you can create a web app using jQTouch with a custom launch screen. This cannot be done with jQuery Mobile.
Take the time to review the features you will get in jQTouch before you download the jQTouch framework. In particular, notice how the extensions for jQTouch work. Leveraging just HTML5 skills you can add geolocation, automatic titles, and floating toolbars. No Objective-C is needed here.
Converting htML into an iPhone App
You will need to test the rest of the code we develop in this chapter either in Safari on your Mac or directly on an iOS device (iPhone, iPod Touch, or iPad). The code will run on all versions of iOS 3+ (I have not tested the code on iOS 2). Let me know if you have an iPhone OS 2 device and send me a tweet (@matthewadavid) or e-mail (matthewadavid@gmail. com). My gut is telling me that there are not too many of these devices out in the wild anymore.
To get you started you need to download the latest release of jQTouch. Point your web browser to www.jqtouch.com/ and press the big, green Download button in the center of the screen. The code is stored in a Google Code Open Source project (http://code. google.com/p/jqtouch/), shown in Figure 3.2.
The jQTouch site has additional videos and tutorials you can check out. Also, check out Jonathan Stark's videos on YouTube (www.youtube.com/user/jonathanstark). These are great resources.
jQTouch is a jQuery plug-in. Much of the heavy lifting, when it comes to interactivity, is done for you.
Styling, animation, and formatting is accomplished with CSS and image files. You can update these files if you want, but in this chapter we are going to stick with the defaults.
Building a Basic jQtouch site
Using your favorite text editor, such as Notepad++ (my favorite on the PC) or TextWrangler (my favorite on the Mac), create a new blank HTML page. Name the page template.html.
The first step is to declare that the document is HTML5 compliant. This is done by adding the DOCTYPE of HTML, as seen here:
The next step is to add some standard opening HTML tags and HEAD element content:
<html> <head> <meta charset="UTF-8" /> <title>Getting Started</title>
You are linking to two CSS documents. The first is a generic document that contains information on page transitions, list presentation, and other visual elements. The second document points to a specific theme for the site. Here you are using the jqt theme. You can also use the "apple" folder for a theme (swap the jqt reference with apple) to give your web page an apple-esque look and feel.
<style type="text/css" media="screen"< @import "jqtouch/jqtouch.min.css"; </style> <style type="text/css" media="screen"> @import "themes/jqt/theme.min.css"; </style>
Content presented as "page" on a screen is actually controlled by DIV elements in jQTouch. This is similar to jQuery Mobile. There are some syntactic differences between jQuery Mobile and jQTouch. For instance, jQuery Mobile uses custom attributes in the DIV elements for formatting whereas jQTouch uses class attributes as reference points for CSS.
Within the following DIV is a basic page structure:
<div id="home" class="current"> <div class="toolbar">
The final step is to close the final HTML tags.
Excerpted from WORKING WITH jQTOUCH TO BUILD WEBSITES ON TOP OF jQUERY by MATTHEW DAVID Copyright © 2011 by Elsevier Inc.. Excerpted by permission of Focal Press. All rights reserved. No part of this excerpt may be reproduced or reprinted without permission in writing from the publisher.
Excerpts are provided by Dial-A-Book Inc. solely for the personal use of visitors to this web site.