Pro JavaScript for Web Apps pdf - EBook Free Download

More documents

Recommendations

Info

CHAPTER 8 CREATING MOBILE WEB APPSFigure 8-1. Asking the user which version of the web app they requireThis tiny web app gives me a good example with which to introduce jQuery Mobile, which is whatI’ll be using in this chapter. jQuery Mobile is a toolkit optimized for mobile devices, and it includeswidgets that are easy to interact with using touch and built-in support for handling touch events andgestures.jQuery Mobile is the “official” mobile toolkit from the main jQuery project, and it’s pretty good,although there are some rough edges with some layouts that need tweaking with minor CSS. There areother jQuery-based mobile widget toolkits available—and some of them are very good as well. I havechosen jQuery Mobile because it shares a broadly common approach with jQuery UI and it has somedesign characteristics that are typical of most mobile toolkits and that require special attention whenwriting complex web apps.AVOIDING PSEUDONATIVE MOBILE APPSAnother reason that I use jQuery Mobile is that it doesn’t try to re-create the appearance of a nativesmartphone application, which is an approach that some of the other toolkits adopt. I don’t like thatapproach because it doesn’t quite work. If you give the user something that looks like a native iOS orAndroid app, then you need to make sure it behaves exactly the way a native application should—and, atleast at the moment, that isn’t possible.The worst possible approach is to try to re-create a native app for just one platform. You often see this,and it is usually iOS that web app developers aim for. This might not be so bad if the re-creation wasfaithful and all mobile devices ran iOS, but users of Android and other operating systems get somethingthat is totally alien, and iOS users get something that initially appears to be familiar but that turns out to beconfusing and inconsistent.To my mind, it is far better to design a web app that is genuinely obvious and easy to use. The results arebetter, you users will be happier, and you don’t have to contort your web app to fit inside the constraints ofplatform that you can’t properly adhere to anyway.200www.it-ebooks.info
CHAPTER 8 CREATING MOBILE WEB APPSI am not going to provide a lengthy tutorial on jQuery Mobile, but there are some importantcharacteristics that I need to explain in order to demonstrate how to create a solid mobile webapplication. I explain the core concepts in the sections that follow. If you want more information aboutjQuery Mobile, then see the project web site or my Pro jQuery book, which is published by Apress andcontains a complete reference for using jQuery Mobile.Installing jQuery MobileYou can download jQuery Mobile from http://jquerymobile.com. jQuery Mobile depends on jQuery,and the script element that imports jQuery into the document must come before the one that importsthe jQuery Mobile library, like this:CheeseLuxjQuery Mobile relies on its own CSS and images that are different from those used by jQuery UI.When you download jQuery Mobile, copy the CSS file into the Node.js content directory along with theJavaScript file, and put the images into the images directory along with those from jQuery UI.Understanding the jQuery Mobile Data AttributesjQuery Mobile relies on data attributes to configure the layout of the web app. Data attributes allowcustom attributes to be applied to elements, just like the data-bind attribute that I have been using fordata bindings. There is no data-bind attribute defined in the HTML specification, but any attribute thatis prefixed by data- is ignored by the browser and allows you to embed useful information in yourmarkup that you can then access via JavaScript. Data attributes have been used unofficially for a fewyears and are an official part of HTML5.jQuery Mobile uses data attributes rather than the code-centric approach that jQuery UI requires.You use the data-role attribute to tell jQuery Mobile how it should treat an element—the markup isprocessed automatically when the document is loaded and the widgets are created.You don’t always need to use the data-role attribute. For some elements, jQuery Mobile willassume that it needs to create a widget based on the element type. This has happened for the buttons inthe document: jQuery Mobile will create a button widget when it finds a button element in the markup.So, this element:Nodoesn’t need a data-role attribute but could have been written like this if you prefer:NoDefining PagesThe most important value for the data-role attribute is page. When building mobile web apps, it is goodpractice to minimize the number of requests made to the server. jQuery Mobile helps in this regard bysupporting single-page apps, where the markup and script for multiple logical pages is contained withina single document and shown to the user as required. A page is denoted by a div element whose dataroleattribute is page. The content of the div element is the content of that page:201www.it-ebooks.info
Page 1 and 2:
www.it-ebooks.info
Page 3 and 4:
Contents at a Glance• About the A
Page 5 and 6:
CHAPTER 1 GETTING READYWhat Do You
Page 7 and 8:
CHAPTER 1 GETTING READYChapter 8:
Page 9 and 10:
CHAPTER 1 GETTING READYWould you l
Page 11 and 12:
CHAPTER 1 GETTING READYThe server-
Page 13 and 14:
CHAPTER 1 GETTING READYListing 1-3
Page 15 and 16:
CHAPTER 1 GETTING READY{{each prop
Page 17 and 18:
C H A P T E R 2Getting StartedIn th
Page 19 and 20:
CHAPTER 2 GETTING STARTEDListing 2
Page 21 and 22:
CHAPTER 2 GETTING STARTED• Cauti
Page 23 and 24:
CHAPTER 2 GETTING STARTEDIn Listin
Page 25 and 26:
Page 27 and 28:
CHAPTER 2 GETTING STARTEDHandling
Page 29 and 30:
CHAPTER 2 GETTING STARTEDFigure 2-
Page 31 and 32:
Page 33 and 34:
CHAPTER 2 GETTING STARTED($0)Total
Page 35 and 36:
CHAPTER 2 GETTING STARTED})}$('.la
Page 37 and 38:
CHAPTER 2 GETTING STARTEDOnce agai
Page 39 and 40:
CHAPTER 2 GETTING STARTED...$('spa
Page 41 and 42:
CHAPTER 2 GETTING STARTEDFigure 2-
Page 43 and 44:
CHAPTER 2 GETTING STARTED...This c
Page 45 and 46:
CHAPTER 2 GETTING STARTED• Tip O
Page 47 and 48:
CHAPTER 2 GETTING STARTEDSummaryAs
Page 49 and 50:
CHAPTER 3 ADDING A VIEW MODELCreat
Page 51 and 52:
CHAPTER 3 ADDING A VIEW MODEL$('#b
Page 53 and 54:
CHAPTER 3 ADDING A VIEW MODELThe o
Page 55 and 56:
CHAPTER 3 ADDING A VIEW MODEL};{id
Page 57 and 58:
CHAPTER 3 ADDING A VIEW MODELfunct
Page 59 and 60:
CHAPTER 3 ADDING A VIEW MODELFigur
Page 61 and 62:
CHAPTER 3 ADDING A VIEW MODELitem.
Page 63 and 64:
CHAPTER 3 ADDING A VIEW MODEL $()T
Page 65 and 66:
CHAPTER 3 ADDING A VIEW MODELimmed
Page 67 and 68:
CHAPTER 3 ADDING A VIEW MODELYou c
Page 69 and 70:
CHAPTER 3 ADDING A VIEW MODELmapPr
Page 71 and 72:
CHAPTER 3 ADDING A VIEW MODELAs I
Page 73 and 74:
CHAPTER 3 ADDING A VIEW MODELFigur
Page 75 and 76:
CHAPTER 3 ADDING A VIEW MODEL});if
Page 77 and 78:
C H A P T E R 4Using URL RoutingIn
Page 79 and 80:
CHAPTER 4 USING URL ROUTINGwe requ
Page 81 and 82:
CHAPTER 4 USING URL ROUTINGAdding
Page 83 and 84:
CHAPTER 4 USING URL ROUTINGApplyin
Page 85 and 86:
CHAPTER 4 USING URL ROUTINGConsoli
Page 87 and 88:
CHAPTER 4 USING URL ROUTINGListing
Page 89 and 90:
CHAPTER 4 USING URL ROUTINGThe app
Page 91 and 92:
CHAPTER 4 USING URL ROUTINGurl att
Page 93 and 94:
CHAPTER 4 USING URL ROUTINGThe sel
Page 95 and 96:
CHAPTER 4 USING URL ROUTING• Not
Page 97 and 98:
CHAPTER 4 USING URL ROUTINGcrossro
Page 99 and 100:
CHAPTER 4 USING URL ROUTINGRestori
Page 101 and 102:
CHAPTER 4 USING URL ROUTINGAdding
Page 103 and 104:
CHAPTER 4 USING URL ROUTING}"#sele
Page 105 and 106:
CHAPTER 4 USING URL ROUTINGFigure
Page 107 and 108:
CHAPTER 4 USING URL ROUTING• Tip
Page 109 and 110:
C H A P T E R 5Creating Offline Web
Page 111 and 112:
CHAPTER 5 CREATING OFFLINE WEB APP
Page 113 and 114:
Page 115 and 116:
Page 117 and 118:
Page 119 and 120:
Page 121 and 122:
Page 123 and 124:
Page 125 and 126:
Page 127 and 128:
Page 129 and 130:
Page 131 and 132:
Page 133 and 134:
Page 135 and 136:
Page 137 and 138:
C H A P T E R 6Storing Data in the
Page 139 and 140:
CHAPTER 6 STORING DATA IN THE BROW
Page 141 and 142:
Page 143 and 144:
Page 145 and 146:
Page 147 and 148:
Page 149 and 150: CHAPTER 6 STORING DATA IN THE BROW
Page 169 and 170: C H A P T E R 7Creating Responsive
Page 171 and 172: CHAPTER 7 CREATING RESPONSIVE WEB
Page 195 and 196: C H A P T E R 8Creating Mobile Web
Page 197 and 198: CHAPTER 8 CREATING MOBILE WEB APPS
Page 199: CHAPTER 8 CREATING MOBILE WEB APPS
Page 229 and 230: C H A P T E R 9Writing Better JavaS
Page 231 and 232: CHAPTER 9 WRITING BETTER JAVASCRIP
Page 251 and 252:
CHAPTER 9 WRITING BETTER JAVASCRIP
Page 253 and 254:
Page 255 and 256:
Page 257 and 258:
Page 259 and 260:
Page 261 and 262:
• INDEXHTML5 local storage featur
Page 263 and 264:
• INDEXURL routing, CheeseLux (co
Page 265 and 266:
Pro JavaScript for Web AppsCopyrigh
Page 267 and 268:
Contents• About the Author.......
Page 269 and 270:
• CONTENTS• Chapter 3: Adding a
Page 271 and 272:
• CONTENTSUsing Persistence in th
Page 273 and 274:
• CONTENTSAdding Tests for a Modu
Page 275 and 276:
About the Technical Reviewer RJ Owe
show all

Pro JavaScript for Web Apps pdf - EBook Free Download

Create successful ePaper yourself

Delete template?

Save as template?