Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Building Android Apps with HTML, CSS, and JavaScript
Building Android Apps with HTML, CSS, and JavaScript                                     Jonathan Stark      Beijing • Cam...
Building Android Apps with HTML, CSS, and JavaScriptby Jonathan StarkCopyright © 2010 Jonathan Stark. All rights reserved....
To Erica & Cooper
Table of ContentsPreface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ....
Handling Long Titles                                                                                                      ...
Create an Android Virtual Device                                                                                          ...
PrefaceThanks to mobile phones, we have moved from virtually no one having access to in-formation to virtually everyone ha...
Using open source, standards-based web technologies gives you the greatest flexibility,the broadest reach, and the lowest ...
This icon indicates a warning or caution.Using Code ExamplesThis book is here to help you get your job done. In general, y...
How to Contact UsPlease address comments and questions concerning this book to the publisher:     O’Reilly Media, Inc.    ...
And finally, Erica. You make everything possible. I love you!                                                             ...
CHAPTER 1                                                        Getting StartedBefore we dive in, I’d like to quickly est...
Pros and ConsDifferent applications have different requirements. Some apps are a better fit with webtechnologies than othe...
create a “fremium” model for your app—allow free access to the web app and chargefor the more feature-rich native version....
Example 1-2. Unordered list<ul>    <li>Pizza</li>    <li>Beer</li>    <li>Dogs</li></ul>The tags covered so far are all bl...
The body and head are always wrapped in an html element. Example 1-3 shows thesnippet in the context of a proper HTML docu...
Even if you aren’t running Mac OS X, you should use Chrome when                 testing your Android web apps on a desktop...
font-family: Arial;}Selectors come in a variety of flavors. If you want all of your hyperlinks (the a element)to display i...
Applying a stylesheetSo now you understand the basics of CSS, but how do you apply a stylesheet to anHTML page? Quite simp...
It’s worth pointing out that you can link to stylesheets that are hosted              on domains other than the one hostin...
Displayed if the current element of the array is equal to Apples.     Displayed if the current element of the array is not...
Here’s an explanation:   A script block at the head of the HTML document.   This line defines a single JavaScript function...
This line includes the jquery.js library. It uses a relative path, meaning the file exists   in the same directory as the ...
CHAPTER 2                                                            Basic StylingUltimately, we are going to build a nati...
Running a Web Server Locally   All current mainstream operating systems (Linux, Windows, Mac OS X) include some   sort of ...
Figure 2-1. Desktop version of a typical website looks fine in Chrome on a desktopExample 2-1. The HTML document we’ll be ...
<ul>             <li><a href="consulting-clinic.html">Consulting Clinic</a></li>             <li><a href="on-call.html">On...
Figure 2-2. Desktop version of a typical website looks all right on an Android phone, but we can doa lot betterPrepare a S...
I specifically used max-width and min-width here so that you can resize                 your desktop browser and see the m...
Control the Page ScalingUnless you tell it otherwise, the Android browser will assume your page is 980px wide(Figure 2-3)....
Figure 2-4. Setting the viewport to the width of the device makes your pages a lot more readable onAndroid                ...
Example 2-2. Setting some general site-wide styles on the HTML body elementbody {    background-color: #ddd; /* Background...
display: block;          font-size: 17px;          font-weight: bold;          margin-bottom: -1px;          padding: 12px...
Figure 2-6. Indenting text from the edgesThe content in the footer of this page is basically a rehash of the navigation el...
In the text-shadow declaration, the parameters from left to right are: horizontal offset,vertical offset, blur, and color....
Figure 2-7. Gradients, text shadows, and rounded corners start to transform your web page into anative-looking Android app...
First, let’s take a look at the new CSS. Step 1 is to hide the ul elements in the headerso they don’t show up when the use...
In CSS, the rgb function is an alternative to the familiar hex notation typically usedto specify colors (e.g., #FFFFFF). r...
Okay, time for some JavaScript. In preparation for the JavaScript you’re about to write,you need to update your HTML docum...
This is typical jQuery code that begins by selecting the uls in the header and adding   the hide CSS class to them. Rememb...
Here, we toggle the pressed class on the header leftButton.Come to think of it, we haven’t written the CSS for the pressed...
Figure 2-10. A tall view of the completed basic Android CSSWhat You’ve LearnedIn this chapter, we covered the basics of co...
CHAPTER 3                                                Advanced StylingIn our quest to build an Android app without Java...
2. We’ll then use jQuery to “hijack” the onclick actions of the nav links, so when the    user clicks a link, the browser ...
margin: 0;    padding: 0;}#header {     background-color: #ccc;     background-image: -webkit-gradient(linear, left top, l...
Setting Up Some Content to Work WithThis JavaScript loads a document called index.html, and will not work without it. Befo...
function hijackLinks() {    $(#container a).click(function(e){        e.preventDefault();        loadPage(e.target.href); ...
When the user clicks, pass the URL of the remote page to the loadPage() function,   and the cycle starts all over again.  ...
Figure 3-1. Without a progress indicator of some kind, your app will seem unresponsive and yourusers will get frustratedTh...
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版
Upcoming SlideShare
Loading in …5
×

[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版

18,760 views

Published on

使用Html,css,java script开发android应用程序使用Html,css,java script开发android应用程序使用Html,css,java script开发android应用程序http://developer.apple.com/library/IOS/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

[使用Html,css,java script开发android应用程序].(building.android.apps.with.html.css.and.javascript).jonathan.stark.文字版

  1. 1. Building Android Apps with HTML, CSS, and JavaScript
  2. 2. Building Android Apps with HTML, CSS, and JavaScript Jonathan Stark Beijing • Cambridge • Farnham • Köln • Sebastopol • Tokyo
  3. 3. Building Android Apps with HTML, CSS, and JavaScriptby Jonathan StarkCopyright © 2010 Jonathan Stark. All rights reserved.Printed in the United States of America.Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.O’Reilly books may be purchased for educational, business, or sales promotional use. Online editionsare also available for most titles (http://my.safaribooksonline.com). For more information, contact ourcorporate/institutional sales department: (800) 998-9938 or corporate@oreilly.com.Editor: Brian Jepson Indexer: Lucie HaskinsProduction Editor: Adam Zaremba Cover Designer: Karen MontgomeryCopyeditor: Amy Thomson Interior Designer: David FutatoProofreader: Kiel Van Horn Illustrator: Robert RomanoPrinting History: September 2010: First Edition.Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks ofO’Reilly Media, Inc. Building Android Apps with HTML, CSS, and JavaScript, the image of a maleo, andrelated trade dress are trademarks of O’Reilly Media, Inc.Many of the designations used by manufacturers and sellers to distinguish their products are claimed astrademarks. Where those designations appear in this book, and O’Reilly Media, Inc., was aware of atrademark claim, the designations have been printed in caps or initial caps.While every precaution has been taken in the preparation of this book, the publisher and author assumeno responsibility for errors or omissions, or for damages resulting from the use of the information con-tained herein. TM This book uses RepKover™, a durable and flexible lay-flat binding.ISBN: 978-1-449-38326-8[M]1284478806
  4. 4. To Erica & Cooper
  5. 5. Table of ContentsPreface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi 1. Getting Started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Web Apps Versus Native Apps 1 What Is a Web App? 1 What Is a Native App? 1 Pros and Cons 2 Which Approach Is Right for You? 2 Web Programming Crash Course 3 Introduction to HTML 3 Introduction to CSS 6 Introduction to JavaScript 9 2. Basic Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Don’t Have a Website? 13 First Steps 14 Prepare a Separate Android Stylesheet 17 Control the Page Scaling 19 Adding the Android CSS 20 Adding the Android Look and Feel 23 Adding Basic Behavior with jQuery 25 What You’ve Learned 31 3. Advanced Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Adding a Touch of Ajax 33 Traffic Cop 33 Setting Up Some Content to Work With 36 Routing Requests with JavaScript 36 Simple Bells and Whistles 38 Progress Indicator 38 Setting the Page Title 41 vii
  6. 6. Handling Long Titles 43 Automatic Scroll-to-Top 44 Hijacking Local Links Only 45 Roll Your Own Back Button 46 Adding an Icon to the Home Screen 52 What You’ve Learned 53 4. Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 With a Little Help from Our Friend 55 Sliding Home 55 Adding the Dates Panel 58 Adding the Date Panel 60 Adding the New Entry Panel 62 Adding the Settings Panel 64 Putting It All Together 66 Customizing jQTouch 68 What You’ve Learned 70 5. Client-Side Data Storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Web Storage 71 Saving User Settings to Local Storage 72 Saving the Selected Date to Session Storage 75 Web SQL Database 76 Creating a Database 78 Inserting Rows 80 Selecting Rows and Handling Result Sets 84 Deleting Rows 88 What You’ve Learned 91 Web Database Error Code Reference 91 6. Going Offline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 The Basics of the Offline Application Cache 93 Online Whitelist and Fallback Options 96 Creating a Dynamic Manifest File 99 Debugging 105 The JavaScript Console 106 What You’ve Learned 108 7. Going Native . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 Introduction to PhoneGap 109 Download the Android SDK 110 Download PhoneGap 114 Setting Up the Environment 115viii | Table of Contents
  7. 7. Create an Android Virtual Device 117 Build KiloGap 118 Installing KiloGap in the Emulator 122 Using the Screen’s Full Height 125 Customizing the App Icon 126 Installing KiloGap on Your Phone 127 Controlling the Phone with JavaScript 128 Beep, Vibrate, and Alert 128 Geolocation 132 Accelerometer 137 What You’ve Learned 140 8. Submitting Your App to the Android Market . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 Preparing a Release Version of Your App 141 Removing Debug Code 141 Versioning Your App 142 Signing Your App 142 Uploading Your App to the Android Market 146 Distributing Your App Directly 147 Further Reading 148Appendix: Detecting Browsers with WURFL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155 Table of Contents | ix
  8. 8. PrefaceThanks to mobile phones, we have moved from virtually no one having access to in-formation to virtually everyone having access to the vast resources of the Web. This isarguably the most important achievement of our generation. Despite its overarchingimportance, mobile computing is in its infancy. Technical, financial, and political forceshave created platform fragmentation like never before, and it’s going to get worse beforeit gets better.Developers who need to engage large and diverse groups of people are faced with aseemingly impossible challenge: “How do we implement our mobile vision in a waythat is feasible, affordable, and reaches the greatest number of participants?” In manycases, the answer is web technologies. The combination of advances in HTML5 andmobile devices has created an environment in which even novice developers can buildmobile apps that improve people’s lives on a global scale.Google’s Android operating system is a compelling addition to the mobile computingspace. In true Google fashion, the platform is open, free, and highly interoperable. Thedevelopment tools are full-featured and powerful, if a bit geeky, and run on a varietyof platforms.Carriers and handset manufacturers have jumped on the Android bandwagon. Themarket is beginning to flood with Android devices of all shapes and sizes. This is adouble-edged sword for developers. On one hand, more devices means a bigger market.On the other hand, more devices means more fragmentation. As with the fragmentationin the general mobile market, fragmentation on Android can often be addressed bybuilding apps with HTML, CSS, and JavaScript.I’m the first to admit that not all apps are a good fit for development with web tech-nologies. That said, I see a lot of apps written with native code that could have just aseasily been done with HTML. When speaking to developers who aren’t sure whichapproach to take, I say this:If you can build your app with HTML, CSS, and JavaScript, you probably should. xi
  9. 9. Using open source, standards-based web technologies gives you the greatest flexibility,the broadest reach, and the lowest cost. You can easily release it as a web app, thendebug and test it under load with thousands of real users. Once you are ready to rock,you can use PhoneGap to convert your web app to a native Android app, add a fewdevice-specific features if you like, and submit to the Android Market—or offer it fordownload from your website. Sounds good, right?Who Should Read This BookI’m going to assume you have some basic experience reading and writing HTML, CSS,and JavaScript (jQuery in particular). Chapter 5 includes some basic SQL code, so apassing familiarity with SQL syntax would be helpful but is not required.What You Need to Use This BookThis book avoids the Android SDK wherever possible. All you need to follow alongwith the vast majority of examples is a text editor and the most recent version of GoogleChrome (a cutting-edge web browser that’s available for both Mac and Windows athttp://www.google.com/chrome). You do need to have the Android SDK for the Phone-Gap material in Chapter 7, where I explain how to convert your web app into a nativeapp that you can submit to the Android Market.Conventions Used in This BookThe following typographical conventions are used in this book:Italic Indicates new terms, URLs, email addresses, filenames, and file extensions.Constant width Used for program listings, as well as within paragraphs to refer to program elements such as variable or function names, databases, data types, environment variables, statements, and keywords.Constant width bold Shows commands or other text that should be typed literally by the user.Constant width italic Shows text that should be replaced with user-supplied values or by values deter- mined by context. This icon signifies a tip, suggestion, or general note.xii | Preface
  10. 10. This icon indicates a warning or caution.Using Code ExamplesThis book is here to help you get your job done. In general, you may use the code inthis book in your programs and documentation. You do not need to contact us forpermission unless you’re reproducing a significant portion of the code. For example,writing a program that uses several chunks of code from this book does not requirepermission. Selling or distributing a CD-ROM of examples from O’Reilly books doesrequire permission. Answering a question by citing this book and quoting examplecode does not require permission. Incorporating a significant amount of example codefrom this book into your product’s documentation does require permission.We appreciate, but do not require, attribution. An attribution usually includes the title,author, publisher, and ISBN. For example: “Building Android Apps with HTML,CSS, and JavaScript by Jonathan Stark. Copyright 2010 Jonathan Stark,978-1-449-38326-8.”If you feel your use of code examples falls outside fair use or the permission given above,feel free to contact us at permissions@oreilly.com.Safari® Books Online Safari Books Online is an on-demand digital library that lets you easily search over 7,500 technology and creative reference books and videos to find the answers you need quickly.With a subscription, you can read any page and watch any video from our library online.Read books on your cell phone and mobile devices. Access new titles before they areavailable for print, and get exclusive access to manuscripts in development and postfeedback for the authors. Copy and paste code samples, organize your favorites, down-load chapters, bookmark key sections, create notes, print out pages, and benefit fromtons of other time-saving features.O’Reilly Media has uploaded this book to the Safari Books Online service. To have fulldigital access to this book and others on similar topics from O’Reilly and other pub-lishers, sign up for free at http://my.safaribooksonline.com. Preface | xiii
  11. 11. How to Contact UsPlease address comments and questions concerning this book to the publisher: O’Reilly Media, Inc. 1005 Gravenstein Highway North Sebastopol, CA 95472 800-998-9938 (in the United States or Canada) 707-829-0515 (international or local) 707-829-0104 (fax)We have a web page for this book, where we list errata, examples, and any additionalinformation. You can access this page at: http://www.oreilly.com/catalog/9781449383268To comment or ask technical questions about this book, send email to: bookquestions@oreilly.comFor more information about our books, conferences, Resource Centers, and theO’Reilly Network, see our website at: http://www.oreilly.comAcknowledgmentsWriting a book is a team effort. My heartfelt thanks go out to the following people fortheir generous contributions.Tim O’Reilly, Brian Jepson, and the rest of the gang at ORM for making the experienceof writing this book so rewarding and educational.David Kaneda for his wonderfully obsessive pursuit of beauty. Whether it’s a bit ofcode or a user interface animation, he can’t sleep until it’s perfect, and I love that.The gang at Nitobi for creating and continuing to support PhoneGap.Brian Fling for broadening my view of mobile beyond just the latest and greatest hard-ware. Brian knows mobile from back in the day; he’s a wonderful writer, and on topof that, a very generous guy.PPK, John Gruber, John Allsopp, and John Resig for their contributions to and supportof the underlying technologies that made this book possible.Joe Bowser, Brian LeRoux, Sara Czyzewicz, and the swarm of folks who generouslyposted comments and questions on the OFPS site for this book. Your feedback wasvery helpful and much appreciated.My wonderful family, friends, and clients for being understanding and supportive whileI was chained to the keyboard.xiv | Preface
  12. 12. And finally, Erica. You make everything possible. I love you! Preface | xv
  13. 13. CHAPTER 1 Getting StartedBefore we dive in, I’d like to quickly establish the playing field. In this chapter, I’ll definekey terms, compare the pros and cons of the two most common development ap-proaches, and give a crash course on the three core web technologies used in this book.Web Apps Versus Native AppsFirst, I’d like to define what I mean by web app and native app and consider their prosand cons.What Is a Web App?To me, a web app is basically a website that is specifically optimized for use on asmartphone. The site content can be anything from a standard small business brochuresite to a mortgage calculator to a daily calorie tracker—the content is irrelevant. Thedefining characteristics of a web app are that the user interface (UI) is built with webstandard technologies, it is available at a URL (public, private, or perhaps behind alogin), and it is optimized for the characteristics of a mobile device. A web app is notinstalled on the phone, it is not available in the Android Market, and it is not writtenwith Java.What Is a Native App?In contrast, native apps are installed on the Android phone, they have access to thehardware (speakers, accelerometer, camera, etc.), and they are written with Java. Thedefining characteristic of a native app, however, is that it’s available in the AndroidMarket—a feature that has captured the imagination of a horde of software entrepre-neurs worldwide, me included. 1
  14. 14. Pros and ConsDifferent applications have different requirements. Some apps are a better fit with webtechnologies than others. Knowing the pros and cons of each approach will help youmake a better decision about which path is appropriate for your situation.Here are the pros of native app development: • Millions of registered credit card owners are one click away • You can access all the cool hardware features of the deviceHere are the cons of native app development: • You have to pay to become an Android developer • Your app will run only on Android phones • You have to develop using Java • The development cycle is slow (develop, compile, deploy, repeat)Here are the pros of web app development: • Web developers can use their current authoring tools • You can use your current web design and development skills • Your app will run on any device that has a web browser • You can fix bugs in real time • The development cycle is fastHere are the cons of web app development: • You cannot access the all cool hardware features of the phone • You have to roll your own payment system if you want to charge for the app • It can be difficult to achieve sophisticated UI effectsWhich Approach Is Right for You?Here’s where it gets exciting. The always-online nature of the Android phone createsan environment in which the lines between a web app and a native app get blurry. Thereare even some little-known features of the Android web browser (see Chapter 6) thatallow you to take a web app offline if you want. What’s more, several third-partyprojects—of which PhoneGap is the most notable—are actively developing solutionsthat allow web developers to take a web app and package it as a native app for Androidand other mobile platforms.For me, this is the perfect blend. I can write in my native language, release a productas a pure web app (for Android and any other devices that have a modern browser),and use the same code base to create an enhanced native version that can access thedevice hardware and potentially be sold in the Android Market. This is a great way to2 | Chapter 1: Getting Started
  15. 15. create a “fremium” model for your app—allow free access to the web app and chargefor the more feature-rich native version.Web Programming Crash CourseThe three main technologies we will use to build web apps are HTML, CSS, and Java-Script. We’ll quickly cover each to make sure we’re all on the same page before plowinginto the fancy stuff.Introduction to HTMLWhen you are browsing the web, the pages you are viewing are just text documentssitting on someone else’s computer. The text in a typical web page is wrapped in HTMLtags, which tell your browser about the structure of the document. With this informa-tion, the browser can decide how to display the information in a way that makes sense.Consider the web page snippet shown in Example 1-1. On the first line, the string Hithere! is wrapped in a pair of h1 tags. Notice that the open tag and the close tag areslightly different: the close tag has a slash (/) as the second character, while the opentag does not have a slash.Wrapping text in h1 tags tells the browser that the words enclosed are a heading, whichwill cause it to be displayed in large bold text on its own line. There are also h2, h3, h4,h5, and h6 heading tags. The lower the number, the more important the header, so textwrapped in an h6 tag will be smaller (i.e., less important-looking) than text wrapped inan h3 tag.After the h1 tag in Example 1-1, there are two lines wrapped in p tags. These are calledparagraph tags. Browsers will display each paragraph on its own line. If the paragraphis long enough to exceed the width of the browser window, the text will bump downand continue on the next line. In either case, a blank line will be inserted after theparagraph to separate it from the next item on the page.Example 1-1. HTML snippet<h1>Hi there!</h1><p>Thanks for visiting my web page.</p><p>I hope you like it.</p>You can also put HTML tags inside other HTML tags. Example 1-2 shows an unorderedlist (ul) tag that contains three list items (li). In a browser, this appears as a bulletedlist with each item on its own line. When you have a tag or tags inside another tag, theinner tags are called child elements, or children, of the parent tag. So in this example,the li tags are children of the ul parent. Web Programming Crash Course | 3
  16. 16. Example 1-2. Unordered list<ul> <li>Pizza</li> <li>Beer</li> <li>Dogs</li></ul>The tags covered so far are all block tags. The defining characteristic of block tags isthat they are displayed on a line of their own, with no elements to the left or right ofthem. That is why the heading, paragraphs, and list items progress down the pageinstead of across it. The opposite of a block tag is an inline tag, which, as the nameimplies, can appear in a line. The emphasis tag (em) is an example of an inline tag, andit looks like this: <p>I <em>really</em> hope you like it.</p>The granddaddy of the inline tags—and arguably the coolest feature of HTML—is thea tag. The “a” stands for anchor, but at times I’ll also refer to it as a link or hyperlink.Text wrapped in an anchor tag is clickable, such that clicking on it causes the browserto load a new HTML page.To tell the browser which new page to load, we have to add what’s called an attrib-ute to the tag. Attributes are named values that you insert into an open tag. In an anchortag, you use the href attribute to specify the location of the target page. Here’s a linkto Google’s home page: <a href="http://www.google.com/">Google</a>That might look like a bit of a jumble if you are not used to reading HTML, but youshould be able to pick out the URL for the Google home page. You’ll be seeing a lot ofa tags and href attributes throughout the book, so take a minute to get your head aroundthis if it doesn’t make sense at first glance. There are a couple of things to keep in mind regarding attributes. Dif- ferent HTML tags allow different attributes. You can add multiple attributes to an open tag by separating them with spaces. You never add attributes to a closing tag. There are hundreds of possible combinations of attributes and tags, but don’t sweat it—we only have to worry about a dozen or so in this entire book.The HTML snippet that we’ve been looking at would normally reside in the body sectionof a complete HTML document. An HTML document is made up of two sections: thehead and the body. The body is where you put all the content that you want users tosee. The head contains information about the page, most of which is invisible to theuser.4 | Chapter 1: Getting Started
  17. 17. The body and head are always wrapped in an html element. Example 1-3 shows thesnippet in the context of a proper HTML document. For now the head section con-tains a title element, which tells the browser what text to display in the title bar of thewindow.Example 1-3. A proper HTML document<html> <head> <title>My Awesome Page</title> </head> <body> <h1>Hi there!</h1> <p>Thanks for visiting my web page.</p> <p>I hope you like it.</p> <ul> <li>Pizza</li> <li>Beer</li> <li>Dogs</li> </ul> </body></html>Normally, when you are using your web browser you are viewing pages that are hostedon the Internet. However, browsers are perfectly good at displaying HTML documentsthat are on your local machine as well. To show you what I mean, I invite you to crackopen a text editor and enter the code in Example 1-3. Picking the Right Text Editor Some text editors are not suited for authoring HTML. In particular, you want to avoid editors that support rich text editing, like Microsoft WordPad (Windows) or TextEdit (Mac OS X). These types of editors can save their files in formats other than plain text, which will break your HTML. If you must use TextEdit, save in plain text by choosing Format→Make Plain Text. In Windows, use Notepad instead of WordPad. If you are in the market for a good text editor, my recommendation on the Mac is TextMate. There is a clone version for Windows called E Text Editor. If free is your thing, you can download Text Wrangler for Mac. For Windows, Note pad2 and Notepad++ are highly regarded. Linux comes with an assortment of text editors, such as vi, nano, emacs, and gedit.When you are finished entering the code from Example 1-3, save it to your desktop astest.html and then open it with Chrome by either dragging the file onto the Chromeapplication icon or opening Chrome and selecting File→Open File. Double-clickingtest.html will work as well, but it could open in your text editor or another browser,depending on your settings. Web Programming Crash Course | 5
  18. 18. Even if you aren’t running Mac OS X, you should use Chrome when testing your Android web apps on a desktop web browser, because Chrome is the closest desktop browser to Android’s mobile browser. Chrome is available for Mac and Windows from http://google.com/ chrome.Introduction to CSSAs you’ve seen, browsers render certain HTML elements with distinct styles (for ex-ample, headings are large and bold, paragraphs are followed by a blank line, and soforth). These styles are very basic and are primarily intended to help the reader under-stand the structure and meaning of the document.To go beyond this simple structure-based rendering, you use Cascading Style Sheets(CSS). CSS is a stylesheet language that you use to define the visual presentation of anHTML document. You can use CSS to define simple things like the text color, size, andstyle (bold, italic, etc.), or complex things like page layout, gradients, opacity, and muchmore.Example 1-4 shows a CSS rule that instructs the browser to display any text in the bodyelement using the color red. In this example, body is the selector (this specifies what isaffected by the rule) and the curly braces enclose the declaration (the rule itself). Thedeclaration includes a set of properties and their values. In this example, color is theproperty, and red is the value of the color property.Example 1-4. A simple CSS rulebody { color: red; }Property names are predefined in the CSS specification, which means that you can’tjust make them up. Each property expects an appropriate value, and there can be lotsof appropriate values and value formats for a given property.For example, you can specify colors with predefined keywords like red, or by usingHTML color code notation, which uses a hexadecimal notation: a hash/pound sign(#) followed by three pairs of hexadecimal digits (0–F) representing (from left to right)red, green, and blue values (red is represented as #FF0000). Properties that expect meas-urements can accept values like 10px, 75%, and 1em. Example 1-5 shows some commondeclarations. The color code shown for background-color corresponds to the CSS“gray.”Example 1-5. Some common CSS declarationsbody { color: red; background-color: #808080; font-size: 12px; font-style: italic; font-weight: bold;6 | Chapter 1: Getting Started
  19. 19. font-family: Arial;}Selectors come in a variety of flavors. If you want all of your hyperlinks (the a element)to display in italics, add the following to your stylesheet: a { font-style: italic; }If you want to be more specific and only italicize the hyperlinks that are containedsomewhere within an h1 tag, add the following to your stylesheet: h1 a { font-style: italic; }You can also define your own custom selectors by adding id and/or class attributes toyour HTML tags. Consider the following HTML snippet: <h1 class="loud">Hi there!</h1> <p>Thanks for visiting my web page.</p> <p>I hope you like it.</p> <ul> <li class="loud">Pizza</li> <li>Beer</li> <li>Dogs</li> </ul>If we add .loud { font-style: italic; } to the CSS for this HTML, Hi there! andPizza will show up italicized because they both have the loud class. The dot in front ofthe .loud selector is important—it’s how the CSS knows to look for HTML tags witha class of loud. If you omit the dot, the CSS will look for a loud tag, which doesn’t existin this snippet (or in HTML at all, for that matter).Applying CSS by id is similar. To add a yellow background fill to the highlight para-graph tag, use the following rule: #highlight { background-color: yellow; }Here, the # symbol tells the CSS to look for an HTML tag with the ID highlight.To recap, you can opt to select elements by tag name (e.g., body, h1, p), by class name(e.g., .loud, .subtle, .error), or by ID (e.g., #highlight, #login, #promo). And, you canget more specific by chaining selectors together (e.g., h1 a, body ul .loud). There are differences between class and id. Use class attributes when you have more than one item on the page with the same class value. Conversely, id values have to be unique to a page. When I first learned this, I figured I’d just always use class attributes so I wouldn’t have to worry about whether I was duping an ID value. However, selecting elements by ID is much faster than by class, so you can hurt your performance by overusing class selectors. Web Programming Crash Course | 7
  20. 20. Applying a stylesheetSo now you understand the basics of CSS, but how do you apply a stylesheet to anHTML page? Quite simple, actually! First, you save the CSS somewhere on your server(usually in the same directory as your HTML file, though you can put it in a subdirec-tory). Next, link to the stylesheet in the head of the HTML document, as shown inExample 1-6. The href attribute in this example is a relative path, meaning it points toa text file named screen.css in the same directory as the HTML page. You can alsospecify absolute links, such as the following:http://example.com/screen.css If you are saving your HTML files on your local machine, you’ll want to keep things simple: put the CSS file in the same directory as the HTML file and use a relative path as shown in Example 1-6.Example 1-6. Linking to a CSS stylesheet<html> <head> <title>My Awesome Page</title> <link rel="stylesheet" href="screen.css" type="text/css" /> </head> <body> <h1 class="loud">Hi there!</h1> <p>Thanks for visiting my web page.</p> <p>I hope you like it.</p> <ul> <li class="loud">Pizza</li> <li>Beer</li> <li>Dogs</li> </ul> </body></html>Example 1-7 shows the contents of screen.css. You should save this file in the samelocation as the HTML file:Example 1-7. A simple stylesheetbody { font-size: 12px; font-weight: bold; font-family: Arial;}a { font-style: italic; }h1 a { font-style: italic; }.loud { font-style: italic; }#highlight { background-color: yellow; }8 | Chapter 1: Getting Started
  21. 21. It’s worth pointing out that you can link to stylesheets that are hosted on domains other than the one hosting the HTML document. However, it’s considered very rude to link to someone else’s stylesheets without permission, so please only link to your own.For a quick and thorough crash course in CSS, I highly recommend CSS Pocket Reference: Visual Presentation for the Web by Eric Meyer (O’Reilly). Meyer is the last wordwhen it comes to CSS, and this particular book is short enough to read during the typicalmorning carpool (unless you are the person driving, in which case it could take con-siderably longer—did I say “crash” course?).Introduction to JavaScriptAt this point you know how to structure a document with HTML and how to modifyits visual presentation with CSS. Now we’ll add some JavaScript to make it do stuff.JavaScript is a scripting language that you can add to an HTML page to make it moreinteractive and convenient for the user. For example, you can write some JavaScriptthat will inspect the values typed in a form to make sure they are valid. Or, you canhave JavaScript show or hide elements of a page depending on where the user clicks.JavaScript can even contact the web server to execute database changes without re-freshing the current web page.Like any modern scripting language, JavaScript has variables, arrays, objects, and allthe typical control structures (e.g., if, while, for). Example 1-8 shows a snippet ofJavaScript that illustrates several core concepts of the language.Example 1-8. Basic JavaScript syntaxvar foods = [Apples, Bananas, Oranges];for (var i=0; i<foods.length; i++) { if (foods[i] == Apples) { alert(foods[i] + are my favorite!); } else { alert(foods[i] + are okay.); }}Here’s an explanation of what’s happening here: Define an array (a list of values) named foods that contains three elements. Open a typical for loop that initializes a variable named i to 0 and specifies an exit criteria—in this case, exit when i is greater than the length of the foods array, and increment i by 1 each time through the loop (i++ is shorthand for “add 1 to the current value of i”). A garden variety if that checks to see if the current element of the array is equal to Apples. Web Programming Crash Course | 9
  22. 22. Displayed if the current element of the array is equal to Apples. Displayed if the current element of the array is not equal to Apples.Here are some points about JavaScript’s syntax that are worth noting: • Statements are terminated with semicolons (;) • Code blocks are enclosed in curly braces ({}) • Variables are declared using the var keyword • Array elements can be accessed with square bracket notation ([]) • Array keys are assigned beginning at 0 • The single equals sign (=) is the assignment operator (assigns a value to a variable) • The double equals sign (==) is the equivalence logical operator (compares two val- ues and evaluates to true if they are equivalent) • The plus sign (+) is the string concatenation operator (combines two strings together)For our purposes, the most important feature of JavaScript is that it can interact withthe elements of an HTML page (the cool kids call this “manipulating the DOM”).Example 1-9 shows a simple bit of JavaScript that changes some text on the page whenthe user clicks on the h1. DOM stands for Document Object Model and in this context it repre- sents the browser’s understanding of an HTML page. You can read more about the DOM here: http://en.wikipedia.org/wiki/Document_Object _Model.Example 1-9. Simple onclick handler<html> <head> <title>My Awesome Page</title> <script type="text/javascript" charset="utf-8"> function sayHello() { document.getElementById(foo).innerHTML = Hi there!; } </script> </head> <body> <h1 id="foo" onclick ="sayHello()">Click me!</h1> </body></html>10 | Chapter 1: Getting Started
  23. 23. Here’s an explanation: A script block at the head of the HTML document. This line defines a single JavaScript function named sayHello() inside the script block. The sayHello() function contains a single statement that tells the browser to look through the document for an element that has the ID foo, and set its inner HTML contents to Hi there! The effect of this in the browser is that the text “Click me!” will be replaced with “Hi there!” when the user clicks the h1 element. End of the sayHello() function. End of the script block. The onclick attribute of the h1 element tells the browser to do something when the user clicks the h1 element, namely, to run the sayHello() function.Back in the bad old days of web development, different browsers had different supportfor JavaScript. This meant that your code might run in Safari 2 but not in InternetExplorer 6. You had to take great pains to test each browser (and even different versionsof the same browser) to make sure your code would work for everyone. As the numberof browsers and browser versions grew, it became impossible to test and maintain yourJavaScript code for every environment. At that time, web programming with JavaScriptwas hell.Enter jQuery. jQuery is a relatively small JavaScript library that allows you to writeyour JavaScript code in a way that will work the same in a wide variety of browsers.What’s more, it greatly simplifies a number of common web development tasks. Forthese reasons, I use jQuery in most of my web development work, and I’ll be using itfor the JavaScript examples in this book. Example 1-10 is a jQuery rewrite of Exam-ple 1-9.Example 1-10. jQuery onclick handler<html> <head> <title>My Awesome Page</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" charset="utf-8"> function sayHello() { $(#foo).text(Hi there!); } </script> </head> <body> <h1 id="foo" onclick="sayHello()">Click me!</h1> </body></html> Web Programming Crash Course | 11
  24. 24. This line includes the jquery.js library. It uses a relative path, meaning the file exists in the same directory as the page that is using it (this example won’t function cor- rectly unless the jQuery library, jquery.js, is there). However, you can include it directly from a variety of places where it’s available. Notice the reduction in the amount of code we need to write to replace the text in the h1 element. This might not seem like a big deal in such a trivial example, but I can assure you that it’s a lifesaver in complex solutions.We’ll be seeing plenty of real-world jQuery examples later on, so I’m going to leave itat that for the moment. jQuery downloads, documentation, and tutorials are available at http: //jquery.com. To use jQuery as shown in Example 1-9, you will need to download it from there, rename the file you downloaded (such as jquery-1.4.2.min.js) to jquery.js, and put a copy of it in the same direc- tory as your HTML document.12 | Chapter 1: Getting Started
  25. 25. CHAPTER 2 Basic StylingUltimately, we are going to build a native Android app using HTML, CSS, and Java-Script. The first step on this journey is to get comfortable styling HTML to look like amobile app. In this chapter, I’ll show you how to apply CSS styles to a bunch of existingHTML pages so that they are easily navigable on an Android phone. So, in addition tomoving closer to building a native app, you’ll be learning a practical (and valuable) skillthat you can use immediately.Don’t Have a Website?If you’ve been testing all your web pages locally on your personal computer, you won’tbe able to view them on your Android phone without setting up a server. You have acouple choices: • Host your web pages on a web server and connect to that server from your Android phone. Chances are good that your Internet Service Provider (ISP) offers compli- mentary web hosting, but this usually only supports basic features such as HTML. By the time we get to Chapter 6, we’re going to need to use PHP, a scripting lan- guage that runs on the web server, so you should look into an inexpensive hosting service. Many companies, such as Laughing Squid, offer entry-level hosting with PHP for under $10 a month. • Host them on a web server running on your computer and connect to the web server running on your computer from your Android phone. This only works when your Android phone and computer are on the same WiFi network.This chapter is set up so you can try the examples as you go through it. So, no matterwhich option you choose for viewing the web pages, try reloading them in a browser(preferably the Android browser) each time you add something new to one of the sam-ples. However, be sure to save your file in your text editor before you reload it in thebrowser or you won’t see your changes. 13
  26. 26. Running a Web Server Locally All current mainstream operating systems (Linux, Windows, Mac OS X) include some sort of web server. On Mac OS X, open System Preferences, choose Sharing, and enable Web Sharing. Once you’ve started Web Sharing, the Web Sharing preferences will display the URL of your personal website (this includes anything you’ve put in the Sites directory in your home directory). It will be of the form http://local-hostname/ ~your-username. On some versions of Linux, such as Ubuntu, you will need to go through some addi- tional steps to install and enable a web server. First, install Apache at the command line with sudo aptitude install apache2. Next, enable the user directory module with sudo a2enmod userdir. Once that’s done, restart Apache with this command: sudo /etc/init.d/apache2 restart. After you’ve done that, you can create a directory called public_html in your home directory and access any files in there with a URL such as http://local-hostname/~your-username. On Windows, things are a little more involved. You need to be running a version of Windows that includes Internet Information Services (IIS) and enable it by going into the Control Panel and making your way to Turn Windows Features On or Off. After you’ve done this, put your web documents in your IIS document root, which is typically located at C:inetpubwwwroot. If you’d prefer to run Apache on Windows, check out a prepackaged solution such as EasyPHP, or check out the Wikipedia page on this topic at http://en.wikipedia.org/wiki/Comparison_of_WAMPs.First StepsTheory is great, but I’m a “show me, don’t tell me” kinda guy so let’s dive in.Imagine you have a website that you want to “mobile-ize” (Figure 2-1). In this scenario,there are a number of easy things you can do to optimize a site for Android. I’ll go overyour options in this chapter.Figure 2-2 shows what this web page looks like on the Android phone. It’s usable, butfar from optimized for Android.Example 2-1 shows an abbreviated version of the website shown in Figure 2-2. This isthe HTML you’ll be working with in this chapter. You can download it from this book’swebsite if you’d like to try styling it as you go through the chapter. The desktop style-sheet (screen.css) is not shown as it is not essential, but you can use the stylesheet fromthe previous chapter if you’d like to have something to play with.14 | Chapter 2: Basic Styling
  27. 27. Figure 2-1. Desktop version of a typical website looks fine in Chrome on a desktopExample 2-1. The HTML document we’ll be styling<html><head> <link rel="stylesheet" href="screen.css" type="text/css" /> <title>Jonathan Stark</title></head><body><div id="container"> <div id="header"> <h1><a href="./">Jonathan Stark</a></h1> <div id="utility"> <ul> <li><a href="about.html">About</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> <div id="nav"> First Steps | 15
  28. 28. <ul> <li><a href="consulting-clinic.html">Consulting Clinic</a></li> <li><a href="on-call.html">On Call</a></li> <li><a href="development.html">Development</a></li> <li><a href="http://www.oreilly.com">OReilly Media, Inc.</a></li> </ul> </div> </div> <div id="content"> <h2>About</h2> <p>Jonathan Stark is a web developer, speaker, and author. His consulting firm, Jonathan Stark Consulting, Inc., has attracted clients such as Staples, Turner Broadcasting, and the PGA Tour. ... </p> </div> <div id="sidebar"> <img alt="Manga Portrait of Jonathan Stark" src="jonathanstark-manga-small.png"/> <p>Jonathan Stark is a mobile and web application developer who the Wall Street Journal has called an expert on publishing desktop data to the web.</p> </div> <div id="footer"> <ul> <li><a href="services.html">Services</a></li> <li><a href="about.html">About</a></li> <li><a href="blog.html">Blog</a></li> </ul> <p class="subtle">Jonathan Stark Consulting, Inc.</p> </div></div></body></html> For years, web developers used tables to lay out elements in a grid. Ad- vances in CSS and HTML have rendered that approach not only obso- lete, but undesirable. Today, we primarily use the div element (along with a variety of attributes) to accomplish the same thing, but with more control. Although a complete explanation of div-based layouts is well outside the scope of this book, you’ll see plenty of examples of it as you read through the book. To learn more, please check out Designing with Web Standards by Jeffrey Zeldman (New Rider Press), which covers the issue in greater detail.16 | Chapter 2: Basic Styling
  29. 29. Figure 2-2. Desktop version of a typical website looks all right on an Android phone, but we can doa lot betterPrepare a Separate Android StylesheetI’m as DRY as the next guy, but in the real world you’re better off making a clean breakbetween your desktop browser stylesheet and your Android stylesheet. Take my wordfor it and just make two completely independent files; you’ll sleep better. The alterna-tive is to wedge all of your CSS rules into a single stylesheet, which is a bad idea for anumber of reasons, the most obvious of which is that you’d be sending a bunch ofirrelevant desktop style rules to the phone, which is a waste of precious bandwidth andmemory. DRY stands for “don’t repeat yourself,” and is a software development principle that states, “Every piece of knowledge must have a single, un- ambiguous, authoritative representation within a system.” The term was coined by Andrew Hunt and David Thomas in their book The Pragmatic Programmer (Addison-Wesley Professional).To specify a stylesheet specifically for Android, replace the stylesheet link tag in thesample HTML document with ones that use the following expressions: <link rel="stylesheet" type="text/css" href="android.css" media="only screen and (max-width: 480px)" /> <link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 481px)" /> First Steps | 17
  30. 30. I specifically used max-width and min-width here so that you can resize your desktop browser and see the mobile version of the page. If you would prefer to serve the desktop.css stylesheet to desktop users regard- less of their browser window size, use max-device-width and min- device-width instead. The Wireless Universal Resource File (WURFL) contains information you can use to identify a huge number of wireless devices, including Android devices. If you need to detect Android devices with a width greater than 480px (such as a tablet) or if you don’t want the mobile version of the site to appear when users resize their browser window below 480px, you can use WURFL’s PHP API to precisely detect specific browsers. See the Appendix for more information on WURFL.Here, desktop.css refers to your existing desktop stylesheet, and android.css is a new filethat we’ll be discussing in detail in a bit. The desktop.css file is not essential, but youcan use the stylesheet from the previous chapter if you’d like. If you’re following along using the sample HTML document shown in Example 2-1, you’ll need to rename screen.css to desktop.css, but since we’re focused on the Android stylesheet, you can ignore the desktop stylesheet completely. If it fails to load, your browser won’t get too upset. However, if you’d like to use Chrome to test the Android-optimized version of the site, you should replace the reference to desktop.css with a reference to android.css. That way, you’ll get to run the Android ver- sion of your site whether you load it from a phone or the desktop browser.Regrettably, Internet Explorer will not understand these expressions, so we have to adda conditional comment (shown in bold) that links to the desktop version of the CSS: <link rel="stylesheet" type="text/css" href="android.css" media="only screen and (max-width: 480px)" /> <link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 481px)" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="explorer.css" media="all" /> <![endif]-->So now it’s time to edit the HTML document (if you haven’t already done that as youwere following along): delete the existing link to the screen.css file, and replace it withthe lines just shown. This way, you will have a clean slate for the Android-specific CSSin this chapter.18 | Chapter 2: Basic Styling
  31. 31. Control the Page ScalingUnless you tell it otherwise, the Android browser will assume your page is 980px wide(Figure 2-3). In the majority of cases, this works great. However, you are going to formatthe content specifically for the smaller dimensions of the Android phone, so you mustlet the mobile browser know about it by adding a viewport meta tag to the head elementof the HTML document: <meta name="viewport" content="user-scalable=no, width=device-width" /> Desktop browsers will ignore the viewport meta tag, so you can include it without worrying about the desktop version of your site.Figure 2-3. Android assumes a normal web page is 980px wideMerely by suppressing the desktop stylesheet and configuring your viewport, you willhave already given your Android users an enhanced experience (Figure 2-4). To reallyimpress them, let’s start building the android.css stylesheet. First Steps | 19
  32. 32. Figure 2-4. Setting the viewport to the width of the device makes your pages a lot more readable onAndroid If you don’t set the viewport width, the page will be zoomed out when it first loads. It’s tough to say exactly what the zoom level will be because the Android browser includes a setting that allows users to set the de- fault zoom. The options are Far, Medium (the default), or Close. Even if you do set the viewport width, these user-defined settings will affect the zoom level of your app.Adding the Android CSSThere are a number of UI conventions that make an Android app look like an Androidapp. In the next section, we’ll add the distinctive title bar, lists with rounded corners,finger-friendly links that look like glossy buttons, etc. With the text editor of yourchoice, create a file named android.css and add the code shown in Example 2-2 to it,then save the file in the same directory as your HTML document.20 | Chapter 2: Basic Styling
  33. 33. Example 2-2. Setting some general site-wide styles on the HTML body elementbody { background-color: #ddd; /* Background color */ color: #222; /* Foreground color used for text */ font-family: Helvetica; font-size: 14px; margin: 0; /* Amount of negative space around the outside of the body */ padding: 0; /* Amount of negative space around the inside of the body */} All text on Android is rendered using a custom font named Droid. The Droid font family was specifically built for mobile devices, has excellent character set support, and contains three variants: Droid Sans, Droid Sans Mono, and Droid Serif. Therefore, specifying a font family of Hel- vetica as we’ve done here will only have an effect on devices other than Android.Now let’s attack the header div that contains the main home link (i.e., the logo link)and the primary and secondary site navigation. The first step is to format the logo linkas a clickable title bar. Add the following to the android.css file: #header h1 { margin: 0; padding: 0; } #header h1 a { background-color: #ccc; border-bottom: 1px solid #666; color: #222; display: block; font-size: 20px; font-weight: bold; padding: 10px 0; text-align: center; text-decoration: none; }We’ll format the primary and secondary navigation ul blocks identically, so we can justuse the generic tag selectors (i.e., #header ul) as opposed to the tag IDs (i.e., #headerul#utility, #header ul#nav): #header ul { list-style: none; margin: 10px; padding: 0; } #header ul li a { background-color: #FFFFFF; border: 1px solid #999999; color: #222222; Adding the Android CSS | 21
  34. 34. display: block; font-size: 17px; font-weight: bold; margin-bottom: -1px; padding: 12px 10px; text-decoration: none; }Pretty simple so far, right? With this little bit of CSS, we have already made a bigimprovement on the Android page design (Figure 2-5). Next, add some padding to thecontent and sidebar divs to indent the text from the edge of the screen a bit (Figure 2-6): #content, #sidebar { padding: 10px; } You might be wondering why we’re adding padding to the content and sidebar elements instead of setting it globally on the body element itself. The reason is that it’s very common to have elements displayed edge to edge (as with the header in this example). Because of this, padding ap- plied to the body or some other element that’s wrapped around lots of others can become more trouble than it’s worth.Figure 2-5. A little bit of CSS can go a long way toward enhancing the usability of your Android app22 | Chapter 2: Basic Styling
  35. 35. Figure 2-6. Indenting text from the edgesThe content in the footer of this page is basically a rehash of the navigation element(the ul element with the ID nav) at the top of the page, so you can remove the footerfrom the Android version of the page by setting the display to none, as follows: #footer { display: none; }Adding the Android Look and FeelTime to get a little fancier. Starting from the top of the page, add a 1-pixel white dropshadow to the header text and a CSS gradient to the background: #header h1 a { text-shadow: 0px 1px 1px #fff; background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999)); } Adding the Android Look and Feel | 23
  36. 36. In the text-shadow declaration, the parameters from left to right are: horizontal offset,vertical offset, blur, and color. Most of the time, you’ll be applying the exact valuesshown here to your text because that’s what usually looks good on Android, but it isfun to experiment with text-shadow because it can add a subtle but sophisticated touchto your design. On most browsers, it’s fine to specify a blur radius of 0px. However, Android requires you to specify a blur radius of at least 1px. If you specify a blur of 0, the text shadow will not show up on Android devices.The -webkit-gradient line deserves special attention. It’s an instruction to the browserto generate a gradient image on the fly. Therefore, you can use a CSS gradient anywhereyou would normally specify a url() (e.g., background image, list style image). Theparameters from left to right are as follows: the gradient type (can be linear orradial), the starting point of the gradient (can be left top, left bottom, right top, orright bottom), the end point of the gradient, the starting color, and the ending color. You cannot reverse the horizontal and vertical portions of the four gra- dient start and stop point constants (i.e., left top, left bottom, right top, or right bottom). In other words, top left, bottom left, top right, and bottom right are invalid values.The next step is to add the traditional rounded corners to the navigation menus: #header ul li:first-child a { -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; } #header ul li:last-child a { -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; }As you can see, we’re using corner-specific versions of the -webkit-border-radiusproperty to apply an 8-pixel radius to both the top two corners of the first list item andthe bottom two corners of the last list item (Figure 2-7).It would be cool if you could just apply the border radius to the enclosing ul, but itdoesn’t work. If you try it you’ll see that the square corners of the child list items willoverflow the rounded corners of the ul, thereby negating the effect.Technically, we could achieve the rounded list effect by applying the radius corners tothe ul, if we set the background color of the ul to white and set the background of itschild elements to transparent. However, when users click the first or last items in thelist, the tap highlight will show up squared-off and it looks terrible. Your best bet is toapply the rounding to the a tags themselves as I’ve demonstrated here.24 | Chapter 2: Basic Styling
  37. 37. Figure 2-7. Gradients, text shadows, and rounded corners start to transform your web page into anative-looking Android app The occurrences of :first-child and :last-child above are called pseudoclasses. Pseudoclasses are a special type of CSS selector that allow you to target elements that meet certain implicit contextual criteria. In other words, you can style things based on characteristics—such as where they are in a list, whether they have cursor focus, or if they have been clicked—without having to manually update your markup. For example, li:first-child will select the first li that is the child of its ul parent. Without the code pseudoclass, we’d have to manually add a class to the first li to let the browser know that it was the first one.Adding Basic Behavior with jQueryThe next step is to add some JavaScript to the page to support some basic dynamicbehavior. In particular, we will allow users to show and hide the big honking navigationsection in the header so that they only see it when they want to. To make this work,we’ll write some new CSS and use some JavaScript to apply the new CSS to the existingHTML. Adding Basic Behavior with jQuery | 25
  38. 38. First, let’s take a look at the new CSS. Step 1 is to hide the ul elements in the headerso they don’t show up when the user first loads the page. If you are following along athome, open your android.css file and add the following: #header ul.hide { display: none; }This won’t actually hide anything until you add the hide class to the ul elements (you’lldo this shortly with some JavaScript). Next, define the styles for the button that willshow and hide the menu. We haven’t created the HTML for the button yet. For yourinformation, it’s going to look like this: <div class="leftButton" onclick="toggleMenu()">Menu</div>I’ll describe the button HTML in detail in the section “Adding Basic Behavior withjQuery” on page 28, so don’t add the preceding line of code to your HTML file. Theimportant thing to understand is that it’s a div with the class leftButton and it’s goingto be in the header.Here is the CSS style for the button (you can go ahead and add this to the android.cssfile): #header div.leftButton { position: absolute; top: 7px; left: 6px; height: 30px; font-weight: bold; text-align: center; color: white; text-shadow: rgba (0,0,0,0.6) 0px -1px 1px; line-height: 28px; border-width: 0 8px 0 8px; -webkit-border-image: url(images/button.png) 0 8 0 8; } For the graphics used in this chapter, you can download the example files from http://examples.oreilly.com/catalog/9781449383268 and copy them from the images directory. Put these copies into an images sub- directory beneath the directory that contains your HTML document (you’ll probably need to create the images directory). We’ll be talking about jQTouch in detail in Chapter 4. Taking it from the top, set the position to absolute to remove the div from the document flow. This allows you to set its top and left pixel coordinates. Set the height to 30px so it’s big enough to tap easily. Style the text bold, white with a slight drop shadow, and centered in the box.26 | Chapter 2: Basic Styling
  39. 39. In CSS, the rgb function is an alternative to the familiar hex notation typically usedto specify colors (e.g., #FFFFFF). rgb(255, 255, 255) and rgb(100%, 100%, 100%) areboth the same as #FFFFFF. More recently, the rgba() function has been introduced,which allows you to specify a fourth parameter that defines the alpha value (i.e.,opacity) of the color. The range of allowable values is 0 to 1, where 0 is fully trans-parent and 1 is fully opaque; decimal values between 0 and 1 will be renderedtranslucent.The line-height declaration moves the text down vertically in the box so it’s not flushagainst the top border.The border-width and -webkit-border-image lines require a bit of explanation. Thesetwo properties together allow you to assign portions of a single image to the borderarea of an element. If the box resizes because the text increases or decreases, theborder image will stretch to accommodate it. It’s really a great thing because it meansfewer images, less work, less bandwidth, and shorter load times.The border-width line tells the browser to apply a 0 width border to the top, an 8pxborder to the right, a 0 width border to the bottom, and an 8px width border to theleft (i.e., the four parameters start at the top of the box and work their way aroundclockwise). You don’t need to specify a color or style for the border.With the border widths in place, you can apply the border image. The five param-eters from left to right are: the URL of the image, the top width, the right width, thebottom width, and the left width (again, clockwise from top). The URL can be ab-solute (http://example.com/myBorderImage.png) or relative. Relative paths are basedon the location of the stylesheet, not the HTML page that includes the stylesheet. When I first encountered the border image property, I found it odd that I had to specify the border widths when I had already done so with the border-width property. After some painful trial and error, I discovered that the widths in the border-image property are not bor- der widths; they are the widths to slice from the image. Taking the right border as an example, I’m telling the browser to take the left 8px of the image and apply them to the right border, which also happens to have an 8px width. It is possible to do something irrational such as applying the right 4 pixels of an image to a border that is 20px wide. To make this work properly, you have to use the optional parameters of webkit-border- image that instruct the image what to do with the slice in the available border space (repeat, stretch, round, etc.). In three years of trying, I have failed to come up with any sane reason to do this, so I won’t waste space here describing this confusing and impractical option of an otherwise killer feature. Adding Basic Behavior with jQuery | 27
  40. 40. Okay, time for some JavaScript. In preparation for the JavaScript you’re about to write,you need to update your HTML document to include jquery.js and android.js. Addthese lines to the head section of your HTML document: <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="android.js"></script> jQuery downloads, documentation, and tutorials are available at http: //jquery.com. To use jQuery, you will need to download it from there, rename the file you downloaded (such as jquery-1.3.2.min.js) to jquery.js, and put a copy of it in the same directory as your HTML document.The primary duty of the JavaScript in android.js is to allow users to show and hide thenav menus. Copy the following JavaScript into a file called android.js and save it in thesame folder as the HTML file: if (window.innerWidth && window.innerWidth <= 480) { $(document).ready(function(){ $(#header ul).addClass(hide); $(#header).append(<div class="leftButton" onclick="toggleMenu()">Menu</div>); }); function toggleMenu() { $(#header ul).toggleClass(hide); $(#header .leftButton).toggleClass(pressed); } } The entire block of code is wrapped in an if statement that checks to make sure the innerWidth property of the window object exists (it doesn’t exist in some versions of Internet Explorer) and that the width is less than or equal to 480px (a reasonable maximum width for the most phones). By adding this line, we ensure that the code executes only when the user is browsing the page with a typical Android phone or some other similarly sized device. If you are testing your Android web pages using the desktop version of Chrome as described in “Don’t Have a Website?” on page 13, the if statement here will fail if your browser’s window width is too large. Manually resize your window to be as narrow as possible and refresh the page. Here we have the so-called “document ready” function. If you are new to jQuery, this can be a bit intimidating, and I admit that it took me a while to memorize the syntax. However, it’s worth taking the time to commit it to memory, because you’ll be using it a lot. The document ready function basically says, “When the document is ready, run this code.” More on why this is important in a sec.28 | Chapter 2: Basic Styling
  41. 41. This is typical jQuery code that begins by selecting the uls in the header and adding the hide CSS class to them. Remember, hide is the selector we used in the CSS above. The net effect of executing this line is to, well, “hide” the header ul elements. Had we not wrapped this line in the document ready function, it would have most likely executed before the uls were even finished loading. This means the JavaScript would load, and this line would fail because the uls wouldn’t exist yet. Then, the page would con- tinue loading, the uls would appear, and you’d be scratching your head (or smashing your keyboard), wondering why the JavaScript wasn’t working. Here is where we append a button to the header that will allow the user to show and hide the menu (Figure 2-8). It has a class that corresponds to the CSS we wrote previously for .leftButton, and it has an onclick handler that calls the function toggleMenu() that comes next.Figure 2-8. The Menu button has been added to the toolbar dynamically using jQuery The toggleMenu()function uses jQuery’s toggleClass() function to add or remove the specified class to the selected object. On this line, we toggle the hide class on the header uls. Adding Basic Behavior with jQuery | 29
  42. 42. Here, we toggle the pressed class on the header leftButton.Come to think of it, we haven’t written the CSS for the pressed class yet, so let’s do sonow. Go back to android.css and insert the following: #header div.pressed { -webkit-border-image: url(images/button_clicked.png) 0 8 0 8; }As you can see, we’re simply specifying a different image for the button border (ithappens to be slightly darker). This will add a two-state effect to the button that shouldmake it evident to the user that the button can both show and hide the menu (Fig-ure 2-9). Figure 2-10 shows a stretched-out view of the page showing both the menuand some of the text.Figure 2-9. The Menu button displays darker when it has been pressed30 | Chapter 2: Basic Styling
  43. 43. Figure 2-10. A tall view of the completed basic Android CSSWhat You’ve LearnedIn this chapter, we covered the basics of converting an existing web page to a moreAndroid-friendly format. We even used a bit of dynamic HTML to show and hide thenavigation panels. In the next chapter, we’ll build on these examples while exploringsome more advanced JavaScript concepts; in particular, some yummy Ajax goodness. What You’ve Learned | 31
  44. 44. CHAPTER 3 Advanced StylingIn our quest to build an Android app without Java, we’ve discussed how to use CSS tostyle a collection of HTML pages to look like an Android app. In this chapter, we’ll laythe groundwork to make those same pages behave like an Android app. Specifically,we’ll discuss: • Using Ajax to turn a full website into a single-page app. • Creating a Back button with history using JavaScript. • Saving the app as an icon on the home screen.Adding a Touch of AjaxThe term Ajax (Asynchronous JavaScript and XML) has become such a buzzword thatI’m not even sure I know what it means anymore. For the purposes of this book, I’mgoing to use the term Ajax to refer to the technique of using JavaScript to send requeststo a web server without reloading the current page (e.g., to retrieve some HTML, submita form). This approach makes for a very smooth user experience, but does require thatyou reinvent a lot of wheels.For example, if you are loading external pages dynamically, the browser will not giveany indication of progress or errors to the users. Furthermore, the Back button will notwork as expected unless you take pains to support it. In other words, you have to do alot of work to make a sweet Ajax app. That said, the extra effort can really pay off,because Ajax allows you to create a much richer user experience.Traffic CopFor the next series of examples, we’ll write a single page called android.html that willsit in front of all the site’s other pages. Here’s how it works: 1. On first load, android.html will present the user with a nicely formatted version of the site navigation. 33
  45. 45. 2. We’ll then use jQuery to “hijack” the onclick actions of the nav links, so when the user clicks a link, the browser page will not navigate to the target link. Rather, jQuery will load a portion of the HTML from the remote page and deliver the data to the user by updating the current page.We’ll start with the most basic functional version of the code and improve it as we goalong.The HTML for the android.html wrapper page is extremely simple (see Example 3-1).In the head section, set the title and viewport options and include links to a stylesheet(android.css) and two JavaScript files: jquery.js and a custom JavaScript file namedandroid.js. You must put a copy of jquery.js in the same directory as the HTML file. For more information on where to get jquery.js and what to do with it, see “Introduction to JavaScript” on page 12. You should do this now before proceeding further.The body has just two div containers: a header with the initial title in an h1 tag and anempty div container, which will end up holding HTML snippets retrieved from otherpages.Example 3-1. This simple HTML wrapper markup will sit in front of the rest of the site’s pages<html><head> <title>Jonathan Stark</title> <meta name="viewport" content="user-scalable=no, width=device-width" /> <link rel="stylesheet" href="android.css" type="text/css" media="screen" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="android.js"></script></head><body> <div id="header"><h1>Jonathan Stark</h1></div> <div id="container"></div></body></html>Let’s move on to the android.css file. As you can see in Example 3-2, we’re going toshuffle some of the properties from previous examples in Chapter 2 (e.g., some of the#header h1 properties have been moved up to #header), but overall everything shouldlook familiar (if not, please review Chapter 2).Example 3-2. The base CSS for the page is just a slightly shuffled version of previous examplesbody { background-color: #ddd; color: #222; font-family: Helvetica; font-size: 14px;34 | Chapter 3: Advanced Styling
  46. 46. margin: 0; padding: 0;}#header { background-color: #ccc; background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999)); border-color: #666; border-style: solid; border-width: 0 0 1px 0;}#header h1 { color: #222; font-size: 20px; font-weight: bold; margin: 0 auto; padding: 10px 0; text-align: center; text-shadow: 0px 1px 1px #fff;}ul { list-style: none; margin: 10px; padding: 0;}ul li a { background-color: #FFF; border: 1px solid #999; color: #222; display: block; font-size: 17px; font-weight: bold; margin-bottom: -1px; padding: 12px 10px; text-decoration: none;}ul li:first-child a { -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px;}ul li:last-child a { -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px;}ul li a:active,ul li a:hover { background-color:blue; color:white;}#content { padding: 10px; text-shadow: 0px 1px 1px #fff;}#content a { color: blue;} Traffic Cop | 35
  47. 47. Setting Up Some Content to Work WithThis JavaScript loads a document called index.html, and will not work without it. Beforeyou proceed, copy the HTML file from Example 2-1 into the same directory as an-droid.html, and be sure to name it index.html. However, none of the links in it will workunless the targets of the links actually exist. You can create these files yourself or down-load the example code from this book’s website.If you want a couple functioning links to play with, you can create about.html,blog.html, and consulting-clinic.html. To do so, just duplicate index.html a few timesand change the filename of each copy to match the related link. For added effect, youcan change the content of the h2 tag in each file to match the filename. For example,the h2 in blog.html would be <h2>Blog</h2>.At this point, you should have the following files in your working directory:android.html You created this in Example 3-1.android.css You created this in Example 3-2.index.html A copy of the HTML file in Example 2-1.about.html A copy of index.html, with the h2 set to “About”.blog.html A copy of index.html, with the h2 set to “Blog”.consulting-clinic.html A copy of index.html, with the h2 set to “Consulting Clinic”.Routing Requests with JavaScriptThe JavaScript in android.js is where all the magic happens in this example. Create thisfile in the same directory as your android.html file. Please refer to Example 3-3 as wego through it line by line.Example 3-3. This bit of JavaScript in android.js converts the links on the page to Ajax requests$(document).ready(function(){ loadPage();});function loadPage(url) { if (url == undefined) { $(#container).load(index.html #header ul, hijackLinks); } else { $(#container).load(url + #content, hijackLinks); }}36 | Chapter 3: Advanced Styling
  48. 48. function hijackLinks() { $(#container a).click(function(e){ e.preventDefault(); loadPage(e.target.href); });} Here we’re using jQuery’s document ready function to have the browser run the loadPage() function when the browser has finished constructing the page. The loadPage() function accepts a single parameter called url and then checks (on the next line) whether a value has been sent. If a value is not sent into the function (as will be the case when it is called for the first time from the document ready function), url will be undefined and this line will execute. This line and the following are examples of jQuery’s load() function. The load() function is excellent for adding quick and dirty Ajax functionality to a page. If this line were translated into English, it would read, “Get all of the ul elements from the #header element of index.html and insert them into the #container element of the current page. When you’re done, run the hijackLinks() function.” index.html refers to the home page of the site. If your home page is named differently, you’d use that filename here instead. If you’ve been following along, you used index.html. This line is executed if the url parameter has a value. It says, in effect, “Get the #content element from the url that was passed into the loadPage() function and insert it into the #container element of the current page. When you’re done, run the hijackLinks() function.” Once the load() function has completed, the #container element of the current page will contain the HTML snippet that was retrieved. Then, load() will run the hijackLinks() function. On this line, hijackLinks() finds all of the links in that new snippet of HTML and binds a click handler to them using the lines of code that follow. Click handlers are automatically passed an event object, which we’re capturing as the function param- eter e. The event object of a clicked link contains the URL of the remote page in e.target.href. Normally, a web browser will navigate to a new page when the user clicks a link. This navigation response is called the default behavior of the link. Since we are han- dling clicks and loading pages through JavaScript, we need to prevent this default behavior. On this line, which (along with the next line) is triggered when a user clicks one of the links, call the built-in preventDefault() method of the event object. If we leave that line out, the browser will dutifully leave the current page and navigate to the URL of clicked link. Traffic Cop | 37
  49. 49. When the user clicks, pass the URL of the remote page to the loadPage() function, and the cycle starts all over again. One of my favorite things about JavaScript is that you can pass a func- tion as a parameter to another function. Although this looks weird at first, it’s extremely powerful and allows you to make your code modular and reusable. If you’d like to learn more, you should check out Java Script: The Good Parts by Douglas Crockford (O’Reilly). In fact, if you are working with JavaScript, you should check out everything by Doug- las Crockford; you’ll be glad you did.Click handlers do not run when the page first loads; they run when the user actuallyclicks a link. Assigning click handlers is like setting booby traps; you do some initialsetup work for something that may or may not be triggered later. It’s worth taking a few minutes to read up on the properties of the event object that JavaScript creates in response to user actions in the browser. A good reference is located at http://www.w3schools.com/htmldom/dom _obj_event.asp.When testing the code in this chapter, be sure you point your browser at the an-droid.html page. Web servers will typically default to displaying index.html if you justnavigate to the directory that the files are in. Normally this is helpful, but in this caseit will cause a problem.Simple Bells and WhistlesWith this tiny bit of HTML, CSS, and JavaScript, we have essentially turned an entirewebsite into a single-page application. However, it still leaves quite a bit to be desired.Let’s slick things up a bit.Progress IndicatorSince we are not allowing the browser to navigate from page to page, the user will notsee any indication of progress while data is loading (Figure 3-1). We need to providesome feedback to users to let them know that something is, in fact, happening. Withoutthis feedback, users may wonder if they actually clicked the link or missed it, and willoften start clicking all over the place in frustration. This can lead to increased serverload and application instability (i.e., crashing).38 | Chapter 3: Advanced Styling
  50. 50. Figure 3-1. Without a progress indicator of some kind, your app will seem unresponsive and yourusers will get frustratedThanks to jQuery, providing a progress indicator only takes two lines of code. We’lljust append a loading div to the body when loadPage() starts and remove the loadingdiv when hijackLinks() is done. Example 3-4 shows a modified version of Exam-ple 3-3. The lines you need to add to android.js are shown in bold.Example 3-4. Adding a simple progress indicator to the page$(document).ready(function(){ loadPage();});function loadPage(url) { $(body).append(<div id="progress">Loading...</div>); if (url == undefined) { $(#container).load(index.html #header ul, hijackLinks); } else { $(#container).load(url + #content, hijackLinks); }}function hijackLinks() { $(#container a).click(function(e){ e.preventDefault(); loadPage(e.target.href); }); $(#progress).remove();} Simple Bells and Whistles | 39

×