We are going to build a simple calorie-tracking application called Kilo that allows the user to add and delete food entries for a given date. All told, there will be five panels: Home, Settings, Dates, Date, and New Entry. We’ll start off with two panels and work our way up as we go.
Note
We will be assigning CSS classes to some of
the HTML elements (e.g., toolbar, edgetoedge,
arrow, button, back). In every
case, these classes correspond to predefined CSS class selectors that
exist in the default jQTouch theme. Bear in mind that you can create and
use your own classes by modifying existing jQTouch themes or creating
your own from scratch; we’re just using the defaults in the examples
here.
We’re going to start from scratch here, so you can put aside the files you created in the preceding chapters. To begin, let’s create a file named index.html and add the HTML given in Example 4-1 for the Home and About panels.
Example 4-1. HTML for the Home and About panels in index.html
<html>
<head>
<title>Kilo</title>
</head>
<body>
<div id="home">
<div class="toolbar">
<h1>Kilo</h1>
</div>
<ul class="edgetoedge">
<li class="arrow"><a href="#about">About</a></li>
</ul>
</div>
<div id="about">
<div class="toolbar">
<h1>About</h1>
<a class="button back" href="#">Back</a>
</div>
<div>
<p>Kilo gives you easy access to your food diary.</p>
</div>
</div>
</body>
</html>The HTML here basically amounts to a head with
a title and a body with two children, both divs:
-
This
div(as well as theaboutdivthat appears a few lines down) will become a panel in the application by virtue of the fact that they are direct descendants of the body.-
Inside each panel
div, there is adivwith a class oftoolbar. Thistoolbarclass is specifically predefined in the jQTouch themes to style an element like a traditional mobile phone toolbar.-
This unordered list tag has the class
edgetoedge. Theedgetoedgeclass tells jQTouch to stretch the list all the way from left to right in the viewable area.-
On this line there is an
lithat contains a link with itshrefpointing at the About panel. Including thearrowclass on theliis optional; doing so will add a chevron to the right side of the item in the list.-
The toolbar elements each contain a single
h1element that will become the panel title. On this line, there are links with the classesbuttonandback, which tell jQTouch to make the button look and act like a Back button.
Note
The href
on the Back button is set to #. Normally, this would tell
the browser to return to the top of the current document. But when using
jQTouch, it navigates back to the previous panel instead. In more
advanced scenarios, you might want to use a specific anchor, such as
#home, which instructs the Back button to navigate to a
particular panel regardless of what the previous panel was.
With the basic HTML in place, it’s time to add jQTouch to the party. Once you’ve installed jQTouch into the same directory as the HTML document (see below), just add a few lines of code to the head of your page (Example 4-2).
Example 4-2. Adding these lines to the head of your document will activate jQTouch
<link type="text/css" rel="stylesheet" media="screen"
href="jqtouch/jqtouch.css">
<link type="text/css" rel="stylesheet" media="screen"
href="themes/jqt/theme.css">
<script type="text/javascript" src="jqtouch/jquery.js"></script>
<script type="text/javascript" src="jqtouch/jqtouch.js"></script>
<script type="text/javascript">
var jQT = $.jQTouch({
icon: 'kilo.png'
});
</script>-
This line includes the jqtouch.css file. This file defines some hardcore structural design rules that are very specific to handling animations, orientation, and other Android-specific minutiae. This file is required and there should be no reason for you to edit it.
-
This line specifies the CSS for the selected theme, in this case, the
jqttheme, which comes with jQTouch. The classes that we’ve been using in the HTML correspond to CSS selectors in this document. jQTouch comes with two themes available by default. You can also make your own by duplicating a default theme and making changes to it or writing a new one from scratch.-
jQTouch requires jQuery, so it is included here. jQTouch comes with its own copy of jQuery (which you need to rename to jquery.js, as described earlier), but you can link to another copy if you prefer.
-
This is where we include jQTouch itself. Notice that you have to include jQTouch after jQuery or ain’t nothin’ gonna work.
-
This brings us to the script block where we initialize the jQTouch object and send in a property value:
icon.jQTouch exposes several properties that allow you to customize the behavior and appearance of your app. You’ll see several throughout the course of this book, and they are all optional. However, you’ll pretty much always be using at least a few of them.
In this case,
icontells jQTouch where to look for the custom home screen icon.
The difference between the application before jQTouch (Figure 4-1) and after (Figure 4-2) is dramatic, but the truly astonishing change is that you’ve just added gorgeous left/right sliding to your app with 10 lines of code. jQTouch is awesome, and we’re just getting started.
Get Building Android Apps with HTML, CSS, and JavaScript, 2nd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
