Building Iphone Apps PDF

Making App Store Apps Without Objective-C or Cocoa
'(ÿ
kcV,nl
a 1f
Building •>
4 s
•TÿVI ill '
iPhone
Apps
with HTML, CSS, andJavaScript
O’REILLY* Jonathan Stark

http://freepdf-books.com
Mobile Development/iPhone
Building iPhone Apps with HTML, CSS, and JavaScript

It’s a fact: if you know HTML, CSS, and JavaScript, you already have “ Thefutureofmobile
the tools you need to develop your own iPhone apps. With this
book, you’ll learn how to use these open source web technologies development is CSS, HTML,
to design and build apps for the iPhone and iPod touch on the andJavaScript.Jonathan
—
platform of your choice without using Objective-C or Cocoa. showsyou how to build
Device-agnostic mobile apps are the wave of the future, and this native iPhone applications
book shows you how to create one product for several platforms.
You’ll find guidelines for converting your product into a native using these technologies. ”
iPhone app using the free PhoneGap framework. And you’ll learn —JohnAllsopp
why releasing your product as a web app first helps you find, fix, authorand founder
and test bugs much faster than if you went straight to the App Store of WebDirections
with a product built with Apple’s tools.
“Jonathan’s book is the most
Build iPhone apps with tools you already know how to use comprehensive documenta¬
Learn how to make an existing website look and behave tion availablefor developing
like an iPhone app
web applicationsfor Mobile
Use jQTouch to add animations to your web app
Safari.”
Take advantage of client-side data storage with apps that —Brian LeRoux
run even when the iPhone is offline NitobiSoftware
Hook into advanced iPhone features —including the
accelerometer, geolocation, and vibration— with JavaScript
Jonathan Stark is a mobile and
Submit your applications to the App Store with Xcode web application consultant
cited by the Wall Street Journal
as an expert on publishing
This book received valuable community input through O’Reilly’s desktop data to the Web. He
Open Feedback Publishing System (OFPS). Learn more at has written two books on web
http://labs.oreilly.com/ofps.html. application programming, and
is a tech editor for php\architect
and Advisor magazines.
O’REILLY
Basic familiarity with HTML, CSS, andJavaScript is recommended. oreilly.com
US $29.99 CAN $37.99

ISBN: 978-0-596-80578-4
52999 Free online edition
9
I780596 805784 I Q|QI |
Books Online
for 45 days with purchase of
this book. Details on last page.
Building iPhone Apps with HTML, CSS, and
JavaScript
Building iPhone Apps with HTML,
CSS, and JavaScript
-RQDWKDQ6WDUN
O REILLY
Beijing • Cambridge • Farnham • Köln • Sebastopol • Taipei • Tokyo
Building iPhone Apps with HTML, CSS, and JavaScript
E\-RQDWKDQ6WDUN
&RS\ULJKW-RQDWKDQ6WDUN$OOULJKWVUHVHUYHG
3ULQWHGLQWKH8QLWHG6WDWHVRI$PHULFD
3XEOLVKHGE\2¦5HLOO\0HGLD,QF*UDYHQVWHLQ+LJKZD\1RUWK6HEDVWRSRO&$
2¦5HLOO\ERRNVPD\EHSXUFKDVHGIRUHGXFDWLRQDOEXVLQHVVRUVDOHVSURPRWLRQDOXVH2QOLQHHGLWLRQV
DUHDOVRDYDLODEOHIRUPRVWWLWOHVKWWSP\VDIDULERRNVRQOLQHFRP)RUPRUHLQIRUPDWLRQFRQWDFWRXU
FRUSRUDWHLQVWLWXWLRQDOVDOHVGHSDUWPHQWRUFRUSRUDWH#RUHLOO\FRP
Editor: %ULDQ-HSVRQ Indexer: )UHG%URZQ

Production Editor: 6XPLWD0XNKHUML Cover Designer: .DUHQ0RQWJRPHU\
Copyeditor: (PLO\4XLOO Interior Designer: 'DYLG)XWDWR
Proofreader: 6DGD3UHLVFK Illustrator: 5REHUW5RPDQR
Printing History:
-DQXDU\ )LUVW(GLWLRQ
1XWVKHOO+DQGERRNWKH1XWVKHOO+DQGERRNORJRDQGWKH2¦5HLOO\ORJRDUHUHJLVWHUHGWUDGHPDUNVRI
2¦5HLOO\0HGLD,QF%XLOGLQJL3KRQH$SSVZLWK+70/&66DQG-DYD6FULSWWKHLPDJHRIDEOXHELUGDQG
UHODWHGWUDGHGUHVVDUHWUDGHPDUNVRI2¦5HLOO\0HGLD,QF
0DQ\RIWKHGHVLJQDWLRQVXVHGE\PDQXIDFWXUHUVDQGVHOOHUVWRGLVWLQJXLVKWKHLUSURGXFWVDUHFODLPHGDV
WUDGHPDUNV:KHUHWKRVHGHVLJQDWLRQVDSSHDULQWKLVERRNDQG2¦5HLOO\0HGLD,QFZDVDZDUHRID
WUDGHPDUNFODLPWKHGHVLJQDWLRQVKDYHEHHQSULQWHGLQFDSVRULQLWLDOFDSV
:KLOHHYHU\SUHFDXWLRQKDVEHHQWDNHQLQWKHSUHSDUDWLRQRIWKLVERRNWKHSXEOLVKHUDQGDXWKRUDVVXPH
QRUHVSRQVLELOLW\IRUHUURUVRURPLVVLRQVRUIRUGDPDJHVUHVXOWLQJIURPWKHXVHRIWKHLQIRUPDWLRQFRQ
WDLQHGKHUHLQ
7KLVZRUNLVOLFHQVHGXQGHUD&UHDWLYH&RPPRQV$WWULEXWLRQ1RQFRPPHUFLDO1R'HULYDWLYH:RUNV
8QLWHG6WDWHV/LFHQVH
RepKover TM
7KLVERRNXVHV5HS.RYHUDGXUDEOHDQGIOH[LEOHOD\IODWELQGLQJ
,6%1
>0@

7R(ULFD¢DQGWKDWOLWWOHMXPSLQJEHDQLQKHU
WXPP\
Table of Contents
Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
1. Getting Started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
:HE$SSV9HUVXV1DWLYH$SSV
:KDW,VD:HE$SS"
:KDW,VD1DWLYH$SS"
3URVDQG&RQV
:KLFK$SSURDFK,V5LJKWIRU<RX"
:HE3URJUDPPLQJ&UDVK&RXUVH
,QWURWR+70/
,QWURWR&66
,QWURWR-DYD6FULSW
2. Basic iPhone Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

)LUVW6WHSV
3UHSDULQJD6HSDUDWHL3KRQH6W\OHVKHHW
&RQWUROOLQJWKH3DJH6FDOLQJ
$GGLQJWKHL3KRQH&66
$GGLQJWKHL3KRQH/RRNDQG)HHO
$GGLQJ%DVLF%HKDYLRUZLWKM4XHU\
:KDW<RX¦YH/HDUQHG
3. Advanced iPhone Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

$GGLQJD7RXFKRI$MD[
7UDIILF&RS
6LPSOH%HOOVDQG:KLVWOHV
5ROO<RXU2ZQ%DFN%XWWRQ
$GGLQJDQ,FRQWRWKH+RPH6FUHHQ
)XOO6FUHHQ0RGH
&KDQJLQJWKH6WDWXV%DU
3URYLGLQJD&XVWRP6WDUWXS*UDSKLF
vii
:KDW<RX¦YH/HDUQHG
4. Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
:LWKD/LWWOH+HOSIURP2XU)ULHQG
6OLGLQJ+RPH
$GGLQJWKH'DWHV3DQHO
$GGLQJWKH'DWH3DQHO
$GGLQJWKH1HZ(QWU\3DQHO
$GGLQJWKH6HWWLQJV3DQHO
3XWWLQJ,W$OO7RJHWKHU
&XVWRPL]LQJM47RXFK
:KDW<RX¦YH/HDUQHG
5. Client-Side Data Storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

ORFDO6WRUDJHDQGVHVVLRQ6WRUDJH
6DYLQJ8VHU6HWWLQJVWRORFDO6WRUDJH
6DYLQJWKH6HOHFWHG'DWHWRVHVVLRQ6WRUDJH
&OLHQW6LGH'DWDEDVH
&UHDWLQJD'DWDEDVH
,QVHUWLQJ5RZV
6HOHFWLQJ5RZVDQG+DQGOLQJ5HVXOW6HWV
'HOHWLQJ5RZV
:KDW<RX¦YH/HDUQHG
6. Going Offline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
7KH%DVLFVRIWKH2IIOLQH$SSOLFDWLRQ&DFKH
2QOLQH:KLWHOLVWDQG)DOOEDFN2SWLRQV
&UHDWLQJD'\QDPLF0DQLIHVW)LOH
'HEXJJLQJ
7KH-DYD6FULSW&RQVROH
7KH$SSOLFDWLRQ&DFKH'DWDEDVH
:KDW<RX¦YH/HDUQHG
7. Going Native . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

,QWURWR3KRQH*DS
8VLQJWKH6FUHHQ¦V)XOO+HLJKW
&XVWRPL]LQJWKH7LWOHDQG,FRQ
&UHDWLQJD6WDUWXS6FUHHQ
,QVWDOOLQJ<RXU$SSRQWKHL3KRQH
&RQWUROOLQJWKHL3KRQHZLWK-DYD6FULSW
%HHS9LEUDWHDQG$OHUW
*HRORFDWLRQ
$FFHOHURPHWHU
viii | Table of Contents
:KDW<RX¦YH/HDUQHG
8. Submitting Your App to iTunes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151

&UHDWLQJDQL3KRQH'LVWULEXWLRQ3URYLVLRQLQJ3URILOH
,QVWDOOLQJWKHL3KRQH'LVWULEXWLRQ3URYLVLRQLQJ3URILOH
5HQDPLQJWKH3URMHFW
3UHSDUHWKH$SSOLFDWLRQ%LQDU\
6XEPLW<RXU$SS
:KLOH<RX:DLW
)XUWKHU5HDGLQJ
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Table of Contents | ix
Preface
/LNHPLOOLRQVRISHRSOH,IHOOLQORYHZLWKP\L3KRQHLPPHGLDWHO\,QLWLDOO\ZHEDSSV
ZHUHWKHRQO\ZD\WRJHWDFXVWRPDSSRQWKHGHYLFHZKLFKZDVILQHE\PHEHFDXVH
,¦PDZHEGHYHORSHU0RQWKVODWHUZKHQWKH$SS6WRUHZDVDQQRXQFHG,ZDVMDFNHG
,UDQRXWDQGERXJKWHYHU\2EMHFWLYH&ERRNRQWKHPDUNHW6RPHRIP\ZHEDSSV
ZHUHDOUHDG\VRPHZKDWSRSXODUDQG,ILJXUHG,¦GMXVWUHZULWHWKHPDVQDWLYHDSSVSXW
WKHPLQWKH$SS6WRUHDQGULGHRIILQWRWKHVXQVHWRQDELJJDOORSLQJSLOHRIPRQH\
'LVLOOXVLRQPHQWIROORZHG,IRXQGLWGLIILFXOWWROHDUQ2EMHFWLYH&DQG,ZDVWXUQHGRII
E\WKHIDFWWKDWWKHODQJXDJHZDVRIOLWWOHXVHRXWVLGHRI0DFSURJUDPPLQJ;FRGHDQG
,QWHUIDFH%XLOGHUZHUHSUHWW\VOLFNEXWWKH\ZHUHQ¦WP\QRUPDODXWKRULQJHQYLURQPHQW
DQG,IRXQGWKHPKDUGWRJHWDFFXVWRPHGWR,ZDVLQIXULDWHGE\WKHKRRSV,KDGWR
MXPSWKURXJKMXVWWRVHWXSP\DSSDQGL3KRQHIRUWHVWLQJ7KHSURFHVVRIJHWWLQJWKH
DSSLQWRWKH$SS6WRUHZDVHYHQPRUHE\]DQWLQH$IWHUDZHHNRUWZRRIVWUXJJOLQJZLWK
WKHVHYDULDEOHV,IRXQGP\VHOIZRQGHULQJZK\,ZDVJRLQJWRDOOWKHWURXEOH$IWHUDOO
P\ZHEDSSVZHUHDOUHDG\DYDLODEOHZRUOGZLGH¢ZK\GLG,FDUHDERXWEHLQJLQWKH$SS
6WRUH"
2QWRSRIDOOWKLV$SSOHFDQ¢DQGGRHV¢UHMHFWDSSV7KLVLVFHUWDLQO\WKHLUSUHURJDWLYH
DQGPD\EHWKH\KDYHJRRGUHDVRQV+RZHYHUIURPWKHRXWVLGHLWVHHPVFDSULFLRXVDQG
DUELWUDU\3XW\RXUVHOILQWKHVHVKRHVEDVHGRQDWUXHVWRU\%7:\RXVSHQGDERXW
KRXUVOHDUQLQJ2EMHFWLYH&<RXVSHQGDQRWKHUKRXUVRUVRZULWLQJDQDWLYH
L3KRQHDSS(YHQWXDOO\\RXUDSSLVUHDG\IRUSULPHWLPHDQG\RXVXFFHVVIXOO\QDYLJDWH
WKHJDXQWOHWWKDWLVWKH$SS6WRUHVXEPLVVLRQSURFHVV:KDWKDSSHQVQH[W"
<RX ZDLW $QG ZDLW $QG ZDLW VRPH PRUH :H DUH WDONLQJ ZHHNV DQG VRPHWLPHV
PRQWKV)LQDOO\\RXKHDUEDFN$QG\RXUDSSLVUHMHFWHG1RZZKDW"<RXKDYHQRWK
LQJWRVKRZIRU\RXUHIIRUW7KHEXEEOH
%XWZDLWLWFDQJHWZRUVH/HW¦VVD\\RXGRJHW\RXUDSSDSSURYHG+XQGUHGVRUPD\EH
WKRXVDQGVRISHRSOHGRZQORDG\RXUDSS<RXKDYHQ¦WUHFHLYHGDQ\PRQH\\HWEXW\RX
DUHRQFORXGQLQH7KHQWKHEXJUHSRUWVVWDUWFRPLQJLQ<RXORFDWHDQGIL[WKHEXJLQ
PLQXWHVUHVXEPLW\RXUDSSWRL7XQHVDQGZDLWIRU$SSOHWRDSSURYHWKHUHYLVLRQ$QG
ZDLW$QGZDLWVRPHPRUH$QJU\FXVWRPHUVDUHJLYLQJ\RXKRUULEOHUHYLHZVLQWKH$SS
6WRUH<RXUVDOHVDUHWDQNLQJ$QGVWLOO\RXZDLW<RXFRQVLGHURIIHULQJDUHIXQGWRWKH
xi
DQJU\ FXVWRPHUV EXW WKHUH¦V QR ZD\ WR GR WKDW WKURXJK WKH $SS 6WRUH 6R \RX DUH
EDVLFDOO\IRUFHGWRVLWWKHUHZDWFKLQJ\RXUUDWLQJVFUDVKHYHQWKRXJKWKHEXJZDVIL[HG
GD\VRUZHHNVDJR
6XUHWKLVVWRU\LVEDVHGRQWKHH[SHULHQFHRIRQHGHYHORSHU0D\EHLW¦VDQHGJHFDVH
DQGWKHDFWXDOGDWDGRHVQ¦WEHDURXWP\WKHVLV%XWWKHSUREOHPUHPDLQVZHGHYHORSHUV
KDYHQRDFFHVVWR$SSOH¦VGDWDRUWKHUHDOGHWDLOVRIWKH$SS6WRUHDSSURYDOSURFHVV
8QWLOWKDWFKDQJHVEXLOGLQJDQDWLYHDSSZLWK2EMHFWLYH&LVDULVN\SURSRVLWLRQ
)RUWXQDWHO\ WKHUH LV DQ DOWHUQDWLYH <RX FDQ EXLOG D ZHE DSS XVLQJ RSHQ VRXUFH
VWDQGDUGVEDVHGZHEWHFKQRORJLHVUHOHDVHLWDVDZHEDSSDQGGHEXJDQGWHVWLWXQGHU
ORDGZLWKUHDOXVHUV2QFH\RXDUHUHDG\WRURFN\RXFDQXVH3KRQH*DSWRFRQYHUW
\RXUZHEDSSWRDQDWLYHL3KRQHDSSDQGVXEPLWLWWRWKH$SS6WRUH,ILW¦VXOWLPDWHO\
UHMHFWHG\RXDUHQ¦WGHDGLQ\RXUWUDFNVEHFDXVH\RXFDQVWLOORIIHUWKHZHEDSS,ILW¦V
DSSURYHG JUHDW <RX FDQ WKHQ VWDUW DGGLQJ IHDWXUHV WKDW HQKDQFH \RXU ZHE DSS E\
WDNLQJDGYDQWDJHRIWKHXQLTXHKDUGZDUHIHDWXUHVDYDLODEOHRQWKHGHYLFH6RXQGVOLNH
WKHEHVWRIERWKZRUOGVULJKW"
Who Should Read This Book

,¦PJRLQJWRDVVXPHWKDW\RXKDYHVRPHEDVLFH[SHULHQFHUHDGLQJDQGZULWLQJ+70/
&66DQG-DYD6FULSWM4XHU\LQSDUWLFXODU,ZLOOEHLQFOXGLQJVRPHEDVLF64/FRGHLQ
&KDSWHUVDQGVRDSDVVLQJIDPLOLDULW\ZLWK64/V\QWD[ZRXOGEHKHOSIXOEXWLVQRW
UHTXLUHG
What You Need to Use This Book

7KLVERRNLVJRLQJWRDYRLGWKHL3KRQH6'.ZKHUHYHUSRVVLEOH$OO\RX¦OOQHHGWRIROORZ
DORQJZLWKWKHYDVWPDMRULW\RIH[DPSOHVLVDWH[WHGLWRUDQGWKHPRVWUHFHQWYHUVLRQRI
6DIDUL RU EHWWHU \HW :HE.LW ZKLFK LV D PRUH FXWWLQJHGJH YHUVLRQ RI 6DIDUL WKDW¦V
DYDLODEOHIRUERWK0DFDQG:LQGRZVDWKWWSZHENLWRUJ<RXGRQHHGD0DFIRUWKH
3KRQH*DSPDWHULDOLQ&KDSWHUZKHUH,H[SODLQKRZWRFRQYHUW\RXUZHEDSSLQWRD
QDWLYHDSSWKDW\RXFDQVXEPLWWRWKH$SS6WRUH
Conventions Used in This Book

7KHIROORZLQJW\SRJUDSKLFDOFRQYHQWLRQVDUHXVHGLQWKLVERRN
,WDOLF
,QGLFDWHVQHZWHUPV85/VHPDLODGGUHVVHVILOHQDPHVDQGILOHH[WHQVLRQV
Constant width
8VHGIRUSURJUDPOLVWLQJVDVZHOODVZLWKLQSDUDJUDSKVWRUHIHUWRSURJUDPHOHPHQWV
VXFKDVYDULDEOHRUIXQFWLRQQDPHVGDWDEDVHVGDWDW\SHVHQYLURQPHQWYDULDEOHV
VWDWHPHQWVDQGNH\ZRUGV
xii | Preface
Constant width bold
6KRZVFRPPDQGVRURWKHUWH[WWKDWVKRXOGEHW\SHGOLWHUDOO\E\WKHXVHUDQGIRU
HPSKDVLVZLWKLQFRGHOLVWLQJV
Constant width italic
6KRZVWH[WWKDWVKRXOGEHUHSODFHGZLWKXVHUVXSSOLHGYDOXHVRUE\YDOXHVGHWHU
PLQHGE\FRQWH[W
7KLVLFRQVLJQLILHVDWLSVXJJHVWLRQRUJHQHUDOQRWH
"v
7KLVLFRQLQGLFDWHVDZDUQLQJRUFDXWLRQ
Using Code Examples

7KLVERRNLVKHUHWRKHOS\RXJHW\RXUMREGRQH,QJHQHUDO\RXPD\XVHWKHFRGHLQ
WKLVERRNLQ\RXUSURJUDPVDQGGRFXPHQWDWLRQ<RXGRQRWQHHGWRFRQWDFWXVIRU
SHUPLVVLRQXQOHVV\RX¦UHUHSURGXFLQJDVLJQLILFDQWSRUWLRQRIWKHFRGH)RUH[DPSOH
ZULWLQJDSURJUDPWKDWXVHVVHYHUDOFKXQNVRIFRGHIURPWKLVERRNGRHVQRWUHTXLUH
SHUPLVVLRQ6HOOLQJRUGLVWULEXWLQJD&'520RIH[DPSOHVIURP2¦5HLOO\ERRNVGRHV
UHTXLUHSHUPLVVLRQ $QVZHULQJ D TXHVWLRQ E\FLWLQJWKLVERRNDQGTXRWLQJH[DPSOH
FRGHGRHVQRWUHTXLUHSHUPLVVLRQ,QFRUSRUDWLQJDVLJQLILFDQWDPRXQWRIH[DPSOHFRGH
IURPWKLVERRNLQWR\RXUSURGXFW¦VGRFXPHQWDWLRQGRHVUHTXLUHSHUPLVVLRQ
:H DSSUHFLDWH EXW GR QRW UHTXLUH DWWULEXWLRQ $Q DWWULEXWLRQ XVXDOO\ LQFOXGHV WKH
WLWOH DXWKRU SXEOLVKHU DQG ,6%1 )RU H[DPSOH £%XLOGLQJ L3KRQH $SSV ZLWK
+70/ &66 DQG -DYD6FULSW E\ -RQDWKDQ 6WDUN &RS\ULJKW -RQDWKDQ 6WDUN
¤
,I\RXIHHO\RXUXVHRIFRGHH[DPSOHVIDOOVRXWVLGHIDLUXVHRUWKHSHUPLVVLRQJLYHQDERYH
IHHOIUHHWRFRQWDFWXVDWSHUPLVVLRQV#RUHLOO\FRP
Safari® Books Online

;•> 6DIDUL%RRNV2QOLQHLVDQRQGHPDQGGLJLWDOOLEUDU\WKDWOHWV\RXHDVLO\
Safari
Books Online VHDUFKRYHUWHFKQRORJ\DQGFUHDWLYHUHIHUHQFHERRNVDQGYLGHRVWR
ILQGWKHDQVZHUV\RXQHHGTXLFNO\
:LWKDVXEVFULSWLRQ\RXFDQUHDGDQ\SDJHDQGZDWFKDQ\YLGHRIURPRXUOLEUDU\RQOLQH
5HDGERRNVRQ\RXUFHOOSKRQHDQGPRELOHGHYLFHV$FFHVVQHZWLWOHVEHIRUHWKH\DUH
DYDLODEOHIRUSULQWDQGJHWH[FOXVLYHDFFHVVWRPDQXVFULSWVLQGHYHORSPHQWDQGSRVW
Preface | xiii
IHHGEDFNIRUWKHDXWKRUV&RS\DQGSDVWHFRGHVDPSOHVRUJDQL]H\RXUIDYRULWHVGRZQ
ORDGFKDSWHUVERRNPDUNNH\VHFWLRQVFUHDWHQRWHVSULQWRXWSDJHVDQGEHQHILWIURP
WRQVRIRWKHUWLPHVDYLQJIHDWXUHV
2¦5HLOO\0HGLDKDVXSORDGHGWKLVERRNWRWKH6DIDUL%RRNV2QOLQHVHUYLFH7RKDYHIXOO
GLJLWDODFFHVVWRWKLVERRNDQGRWKHUVRQVLPLODUWRSLFVIURP2¦5HLOO\DQGRWKHUSXE
OLVKHUVVLJQXSIRUIUHHDWKWWSP\VDIDULERRNVRQOLQHFRP
How to Contact Us
3OHDVHDGGUHVVFRPPHQWVDQGTXHVWLRQVFRQFHUQLQJWKLVERRNWRWKHSXEOLVKHU
2¦5HLOO\0HGLD,QF
*UDYHQVWHLQ+LJKZD\1RUWK
6HEDVWRSRO&$
LQWKH8QLWHG6WDWHVRU&DQDGD
LQWHUQDWLRQDORUORFDO
ID[
:HKDYHDZHESDJHIRUWKLVERRNZKHUHZHOLVWHUUDWDH[DPSOHVDQGDQ\DGGLWLRQDO
LQIRUPDWLRQ<RXFDQDFFHVVWKLVSDJHDW
KWWSZZZRUHLOO\FRPFDWDORJ
7RFRPPHQWRUDVNWHFKQLFDOTXHVWLRQVDERXWWKLVERRNVHQGHPDLOWR
ERRNTXHVWLRQV#RUHLOO\FRP
)RU PRUH LQIRUPDWLRQ DERXW RXU ERRNV FRQIHUHQFHV 5HVRXUFH &HQWHUV DQG WKH
2¦5HLOO\1HWZRUNVHHRXUZHEVLWHDW
KWWSZZZRUHLOO\FRP
Acknowledgments
:ULWLQJDERRNLVDWHDPHIIRUW0\KHDUWIHOWWKDQNVJRRXWWRWKHIROORZLQJSHRSOHIRU
WKHLUJHQHURXVFRQWULEXWLRQV
7LP2¦5HLOO\%ULDQ-HSVRQDQGWKHUHVWRIWKHJDQJDW250IRUPDNLQJWKHH[SHULHQFH
RIZULWLQJWKLVERRNVRUHZDUGLQJDQGHGXFDWLRQDO
-DFN7HPSOLQ3URYLGHQFH*HHNVDQG5,1H[XVIRULQWURGXFLQJPHWRWKHWKULYLQJWHFK
VFHQH LQ P\ RZQ KRPHWRZQ 7KLV ERRN ZRXOGQ¦W H[LVW LI LW ZHUHQ¦W IRU 3URYLGHQFH
*HHNV
'DYLG.DQGHGDIRUKLVZRQGHUIXOO\REVHVVLYHSXUVXLWRIEHDXW\:KHWKHULW¦VDELWRI
FRGHRUDXVHULQWHUIDFHDQLPDWLRQKHFDQ¦WVOHHSXQWLOLW¦VSHUIHFWDQG,ORYHWKDW
%ULDQ/H5RX[%URFN:KLWWHQ5RE(OOLVDQGWKHUHVWRIWKHJDQJDW1LWRELIRUFUHDWLQJ
DQGFRQWLQXLQJWRVXSSRUW3KRQH*DS
xiv | Preface
%ULDQ)OLQJIRUEURDGHQLQJP\YLHZRIPRELOHEH\RQGMXVWWKHODWHVWDQGJUHDWHVWKDUG
ZDUH%ULDQNQRZVPRELOHIURPEDFNLQWKHGD\KH¦VDZRQGHUIXOZULWHUDQGRQWRS
RIWKDWDYHU\JHQHURXVJX\
33.-RKQ*UXEHU-RKQ$OOVRSSDQG-RKQ5HVLJIRUWKHLUFRQWULEXWLRQVWRDQGVXSSRUW
RIWKHXQGHUO\LQJWHFKQRORJLHVWKDWPDGHWKLVERRNSRVVLEOH
*DUUHWW0XUUD\%ULDQ/H5RX[DQGWKHVZDUPRIIRONVZKRJHQHURXVO\SRVWHGFRP
PHQWVDQGTXHVWLRQVRQWKH2)36VLWHIRUWKLVERRN<RXUIHHGEDFNZDVYHU\KHOSIXO
DQGPXFKDSSUHFLDWHG
.D]X&KXFNLH-DQLFH&KULVDQGWKHUHVWRIWKHJDQJDW+DUXNLIRUEHLQJVRDFFRP
PRGDWLQJZKLOH,HQGOHVVO\W\SHGDZD\DWWKHKLJKWRSE\WKHGRRU
0\ZRQGHUIXOIDPLO\IULHQGVDQGFOLHQWVIRUEHLQJXQGHUVWDQGLQJDQGVXSSRUWLYHZKLOH
,ZDVFKDLQHGWRWKHNH\ERDUG
$QGILQDOO\(ULFD<RXPDNHHYHU\WKLQJSRVVLEOH,ORYH\RX
Preface | xv
CHAPTER 1
Getting Started
%HIRUHZHGLYH LQ DQG VWDUW EXLOGLQJ DSSOLFDWLRQVIRUWKHL3KRQH,¦GOLNHWRTXLFNO\

HVWDEOLVKWKHSOD\LQJILHOG,QWKLVFKDSWHU,¦OOGHILQHNH\WHUPVFRPSDUHWKHSURVDQG
FRQVRIWKHWZRPRVWFRPPRQGHYHORSPHQWDSSURDFKHVDQGSUHVHQWDFUDVKFRXUVHLQ
WKHWKUHHFRUHZHEWHFKQRORJLHVWKDWDUHXVHGLQWKLVERRN
Web Apps Versus Native Apps

)LUVW,¦OOGHILQHZKDW,PHDQE\£ZHEDSS¤DQG£QDWLYHDSS¤DQGFRQVLGHUWKHSURVDQG
FRQVRIHDFK
What Is a Web App?

7RPHDZHEDSSLVEDVLFDOO\DZHEVLWHWKDWLVVSHFLILFDOO\RSWLPL]HGIRUWKHL3KRQH
7KHVLWHFDQEHDQ\WKLQJIURPDVWDQGDUGVPDOOEXVLQHVVEURFKXUHVLWHWRDPRUWJDJH
FDOFXODWRUWRDGDLO\FDORULHWUDFNHU¢WKHFRQWHQWLVLUUHOHYDQW7KHGHILQLQJFKDUDFWHU
LVWLFVRIDZHEDSSDUHWKDWWKHXVHULQWHUIDFHLVEXLOWZLWKZHEVWDQGDUGWHFKQRORJLHV
LWLVDYDLODEOHDWD85/SXEOLFSULYDWHRUEHKLQGDORJLQDQGLWLVRSWLPL]HGIRUWKH
VSHFLILFVRIWKHL3KRQH$ZHEDSSLVQRWLQVWDOOHGRQWKHSKRQHLVQRWDYDLODEOHLQWKH
L7XQHV$SS6WRUHDQGLVQRWZULWWHQZLWK2EMHFWLYH&
What Is a Native App?

,QFRQWUDVWQDWLYHDSSVDUHLQVWDOOHGRQWKHL3KRQHKDYHDFFHVVWRWKHKDUGZDUHVSHDN
HUVDFFHOHURPHWHUFDPHUDHWFDQGDUHZULWWHQZLWK2EMHFWLYH&7KHGHILQLQJFKDU
DFWHULVWLFRIDQDWLYHDSSKRZHYHULVWKDWLW¦VDYDLODEOHLQWKHL7XQHV$SS6WRUH¢D
IHDWXUHWKDWKDVFDSWXUHGWKHLPDJLQDWLRQRIKRUGHVRIVRIWZDUHHQWUHSUHQHXUVZRUOG
ZLGHP\VHOILQFOXGHG
Pros and Cons
'LIIHUHQWDSSOLFDWLRQVKDYHGLIIHUHQWUHTXLUHPHQWV6RPHDSSVDUHDEHWWHUILWZLWKZHE
WHFKQRORJLHVWKDQRWKHUV.QRZLQJWKHSURVDQGFRQVRIHDFKDSSURDFKZLOOKHOS\RX
PDNHWKHULJKWGHFLVLRQDERXWZKLFKSDWKLVDSSURSULDWHIRU\RXUVLWXDWLRQ
+HUHDUHWKHSURVRIQDWLYHDSSGHYHORSPHQW
0LOOLRQVRIUHJLVWHUHGFUHGLWFDUGRZQHUVDUHRQHFOLFNDZD\
;FRGH ,QWHUIDFH %XLOGHU DQG WKH &RFRD 7RXFK IUDPHZRUN FRQVWLWXWH D SUHWW\
VZHHWGHYHORSPHQWHQYLURQPHQW
<RXFDQDFFHVVDOOWKHFRROKDUGZDUHIHDWXUHVRIWKHGHYLFH
+HUHDUHWKHFRQVRIQDWLYHDSSGHYHORSPHQW
<RXKDYHWRSD\WREHFRPHDQ$SSOHGHYHORSHU
<RXDUHDWWKHPHUF\RIWKH$SSOHDSSURYDOSURFHVV
<RXKDYHWRGHYHORSXVLQJ2EMHFWLYH&
<RXKDYHWRGHYHORSRQD0DF
<RXFDQ¦WUHOHDVHEXJIL[HVLQDWLPHO\IDVKLRQ
7KHGHYHORSPHQWF\FOHLVVORZDQGWKHWHVWLQJF\FOHLVFRQVWUDLQHGE\WKH$SS
6WRUH¦VOLPLWDWLRQV
+HUHDUHWKHSURVRIZHEDSSGHYHORSPHQW
:HEGHYHORSHUVFDQXVHWKHLUFXUUHQWDXWKRULQJWRROV
<RXFDQXVH\RXUFXUUHQWZHEGHVLJQDQGGHYHORSPHQWVNLOOV
<RXDUHQRWOLPLWHGWRGHYHORSLQJRQWKH0DF26
<RXUDSSZLOOUXQRQDQ\GHYLFHWKDWKDVDZHEEURZVHU
<RXFDQIL[EXJVLQUHDOWLPH
7KHGHYHORSPHQWF\FOHLVIDVW
+HUHDUHWKHFRQVRIZHEDSSGHYHORSPHQW
<RXFDQQRWDFFHVVWKHDOOFRROKDUGZDUHIHDWXUHVRIWKHSKRQH
<RXKDYHWRUROO\RXURZQSD\PHQWV\VWHPLI\RXZDQWWRFKDUJHIRUWKHDSS
,WFDQEHGLIILFXOWWRDFKLHYHVRSKLVWLFDWHG8,HIIHFWV
Which Approach Is Right for You?

+HUH¦VZKHUHLWJHWVH[FLWLQJ7KHDOZD\VRQOLQHQDWXUHRIWKHL3KRQHFUHDWHVDQHQYL
URQPHQWLQZKLFKWKHOLQHVEHWZHHQDZHEDSSDQGDQDWLYHDSSJHWEOXUU\7KHUHDUH
HYHQVRPHOLWWOHNQRZQIHDWXUHVRIWKHL3KRQHWKDWDOORZ\RXWRWDNHDZHEDSSRIIOLQH
LI \RX ZDQW VHH &KDSWHU :KDW¦V PRUH VHYHUDO WKLUGSDUW\ SURMHFWV¢RI ZKLFK
2 | Chapter 1:ಗGetting Started
3KRQH*DSLVWKHPRVWQRWDEOH¢DUHDFWLYHO\GHYHORSLQJVROXWLRQVWKDWDOORZZHEGH
YHORSHUVWRWDNHDZHEDSSDQGSDFNDJHLWDVDQDWLYHDSSIRUWKHL3KRQHDQGRWKHU
PRELOHSODWIRUPV
)RUPHWKLVLVWKHSHUIHFWEOHQG,FDQZULWHLQP\QDWLYHODQJXDJHUHOHDVHDSURGXFW
DVDSXUHZHEDSSIRUWKHL3KRQHDQGDQ\RWKHUGHYLFHVWKDWKDYHDPRGHUQEURZVHU
ZLWKRXWJRLQJWKURXJK$SSOH¦VDSSURYDOSURFHVVDQGXVHWKHVDPHFRGHEDVHWRFUHDWH
DQHQKDQFHGQDWLYHYHUVLRQWKDWFDQDFFHVVWKHGHYLFHKDUGZDUHDQGSRWHQWLDOO\EHVROG
LQWKH$SS6WRUH$QGLI$SSOHUHMHFWVLW"1RELJGHDOEHFDXVH,VWLOOKDYHP\RQOLQH
YHUVLRQ,FDQNHHSZRUNLQJRQWKHQDWLYHYHUVLRQZKLOHFXVWRPHUVXVHWKHZHEDSS
Web Programming Crash Course

7KHWKUHHPDLQWHFKQRORJLHVZHDUHJRLQJWRXVHWREXLOGZHEDSSVDUH+70/&66
DQG-DYD6FULSW,¦GOLNHWRTXLFNO\FRYHUHDFKWRPDNHVXUHZH¦UHDOORQWKHVDPHSDJH
EHIRUHSORZLQJLQWRWKHIDQF\VWXII
Intro to HTML
:KHQ\RX¦UHEURZVLQJWKH:HEWKHSDJHVWKDW\RXDUHYLHZLQJDUHMXVWWH[WGRFXPHQWV
VLWWLQJRQVRPHRQHHOVH¦VFRPSXWHU7KHWH[WLQDW\SLFDOZHESDJHLVZUDSSHGLQ+70/
WDJVZKLFKWHOO\RXUEURZVHUDERXWWKHVWUXFWXUHRIWKHGRFXPHQW:LWKWKLVLQIRUPD
WLRQWKHEURZVHUFDQGHFLGHKRZWRGLVSOD\WKHLQIRUPDWLRQLQDZD\WKDWPDNHVVHQVH
&RQVLGHUWKHZHESDJHVQLSSHWVKRZQLQ([DPSOH2QWKHILUVWOLQHWKHVWULQJ Hi
there!LVZUDSSHGLQDSDLURI h1WDJV1RWLFHWKDWWKHRSHQWDJDQGWKHFORVHWDJDUH
VOLJKWO\GLIIHUHQWWKHFORVHWDJKDVDVODVKDVWKHVHFRQGFKDUDFWHUZKLOHWKHRSHQWDJ
GRHVQRW
:UDSSLQJVRPHWH[WLQh1WDJVWHOOVWKHEURZVHUWKDWWKHZRUGVHQFORVHGDUHDKHDGLQJ
ZKLFKZLOOFDXVHLWWREHGLVSOD\HGLQODUJHEROGWH[WRQLWVRZQOLQH7KHUHDUHDOVR
h2 h3 h4 h5 DQG h6 KHDGLQJ WDJV 7KH ORZHUWKHQXPEHUWKHPRUHLPSRUWDQWWKH
KHDGHUVRWH[WZUDSSHGLQDQh6WDJZLOOEHVPDOOHULHOHVVLPSRUWDQWORRNLQJWKDQ
WH[WZUDSSHGLQDQh3WDJ
$IWHUWKHh1WDJLQ([DPSOHDUHWZROLQHVZUDSSHGLQpWDJV7KHVHDUHFDOOHGSDUD
JUDSKWDJV%URZVHUVZLOOGLVSOD\HDFKSDUDJUDSKRQLWVRZQOLQH,IWKHSDUDJUDSKLV
ORQJHQRXJKWRH[FHHGWKHZLGWKRIWKHEURZVHUZLQGRZWKHWH[WZLOOEXPSGRZQDQG
FRQWLQXHRQWKHQH[WOLQH,QHLWKHUFDVHDEODQNOLQHZLOOEHLQVHUWHGDIWHUWKHSDUDJUDSK
WRVHSDUDWHLWIURPWKHQH[WLWHPRQWKHSDJH
([DPSOH+70/VQLSSHW
<h1>Hi there!</h1>
<p>Thanks for visiting my web page.</p>
<p>I hope you like it.</p>
Web Programming Crash Course | 3
<RXFDQDOVRSXW+70/WDJVLQVLGHRIRWKHU+70/WDJV([DPSOHVKRZVDQXQ
RUGHUHGOLVWulWDJWKDWFRQWDLQVWKUHHOLVWLWHPVli,QDEURZVHUWKLVZRXOGVKRZ
XSDVDEXOOHWHGOLVWZLWKHDFKLWHPRQLWVRZQOLQH:KHQ\RXKDYHDWDJRUWDJVLQVLGH
RIDQRWKHUWDJWKHLQQHUWDJVDUHFDOOHGFKLOGHOHPHQWVRUFKLOGUHQRIWKHSDUHQWWDJ
6RLQWKLVH[DPSOHWKHliVDUHFKLOGUHQRIWKHulSDUHQW
([DPSOH8QRUGHUHGOLVW
<ul>
<li>Pizza</li>
<li>Beer</li>
<li>Dogs</li>
</ul>
7KHWDJV,¦YHFRYHUHGVRIDUDUHDOOEORFNWDJV7KHGHILQLQJFKDUDFWHULVWLFRIDEORFNWDJ
LVWKDWLWLVGLVSOD\HGRQDOLQHRILWVRZQZLWKQRHOHPHQWVWRLWVOHIWRUULJKW7KDWLV
ZK\KHDGLQJVSDUDJUDSKVDQGOLVWLWHPVSURJUHVVGRZQWKHSDJHLQVWHDGRIDFURVVLW
7KHRSSRVLWHRIDEORFNWDJLVDQLQOLQHWDJZKLFKDVWKHQDPHLPSOLHVFDQDSSHDULQ
DOLQH7KHHPSKDVLVWDJemLVDQH[DPSOHRIDQLQOLQHWDJDQGLWORRNVOLNHWKLV
<p>I <em>really</em> hope you like it.</p>
7KHJUDQGGDGG\RIWKHLQOLQHWDJV¢DQGDUJXDEO\WKHFRROHVWIHDWXUHRI+70/¢LVWKH
aWDJ7KHaVWDQGVIRUDQFKRUEXW,¦OODOVRUHIHUWRWKHWDJDVDOLQNRUK\SHUOLQN7H[W
ZUDSSHG LQ DQ DQFKRU WDJ EHFRPHV FOLFNDEOH VXFK WKDW FOLFNLQJ RQ LW FDXVHV \RXU
EURZVHUWRORDGDQHZ+70/SDJH
,QRUGHUWRWHOOWKHEURZVHUZKDWQHZSDJHWRORDGZHKDYHWRDGGZKDW¦VFDOOHGDQ
DWWULEXWHWRWKHWDJ$WWULEXWHVDUHQDPHGYDOXHVWKDWDUHLQVHUWHGLQWRDQRSHQWDJ,Q
DQDQFKRUWDJ\RXXVHWKHhrefDWWULEXWHWRVSHFLI\WKHORFDWLRQRIWKHWDUJHWSDJH+HUH¦V
DOLQNWR*RRJOH¦VKRPHSDJH
<a href="http://www.google.com/">Google</a>
7KDWPLJKWORRNOLNHDELWRIDMXPEOHLI\RXDUHQRWXVHGWRUHDGLQJ+70/EXW\RX
VKRXOGEHDEOHWRSLFNRXWWKH85/IRUWKH*RRJOHKRPHSDJH<RX¦OOEHVHHLQJDORWRI
aWDJVDQGhrefVWKURXJKRXWWKHERRNVRWDNHDPLQXWHWRJHW\RXUKHDGDURXQGWKLVLI
LWGRHVQ¦WPDNHVHQVHDWILUVWJODQFH
7KHUHDUHDFRXSOHRIWKLQJVWRNHHSLQPLQGUHJDUGLQJDWWULEXWHV'LI
m
IHUHQW+70/WDJVDOORZGLIIHUHQWDWWULEXWHV<RXFDQDGGPXOWLSOHDW
UP, WULEXWHVWRDQRSHQWDJE\VHSDUDWLQJWKHPZLWKVSDFHV<RXQHYHUDGG
DWWULEXWHVWRDFORVLQJWDJ7KHUHDUHKXQGUHGVRISRVVLEOHFRPELQDWLRQV
RIDWWULEXWHVDQGWDJVEXWGRQ¦WVZHDWLW:HRQO\KDYHWRZRUU\DERXW
DGR]HQRUVRLQWKLVERRN
7KH+70/VQLSSHWWKDWZH¦YHEHHQORRNLQJDWZRXOGQRUPDOO\UHVLGHLQWKHbodyVHFWLRQ
RIDFRPSOHWH+70/GRFXPHQW$Q+70/GRFXPHQWLVPDGHXSRIWZRVHFWLRQVWKH
KHDGDQGWKHERG\7KHERG\LVZKHUH\RXSXWDOOWKHFRQWHQWWKDW\RXZDQWXVHUVWR
VHH7KHKHDGFRQWDLQVLQIRUPDWLRQDERXWWKHSDJHPRVWRIZKLFKLVLQYLVLEOHWRWKH
XVHU
7KHERG\DQGKHDGDUHDOZD\VZUDSSHGLQDQ htmlHOHPHQW([DPSOHVKRZVWKH
VQLSSHWLQWKHFRQWH[WRIDSURSHU+70/GRFXPHQW)RUQRZWKHheadVHFWLRQFRQWDLQV
D titleHOHPHQWZKLFKWHOOVWKHEURZVHUZKDWWH[WWRGLVSOD\LQWKHWLWOHEDURIWKH
ZLQGRZ
([DPSOH$SURSHU+70/GRFXPHQW
<html>
<head>
<title>My Awesome Page</title>
</head>
<body>
<h1>Hi there!</h1>
<p>Thanks for visiting my web page.</p>
<ul>
<li>Pizza</li>
<li>Beer</li>
<li>Dogs</li>
</ul>
</body>
</html>
1RUPDOO\ZKHQ\RXDUHXVLQJ\RXUZHEEURZVHU\RXDUHYLHZLQJSDJHVWKDWDUHKRVWHG
RQWKH,QWHUQHW+RZHYHUEURZVHUVDUHSHUIHFWO\JRRGDWGLVSOD\LQJ+70/GRFXPHQWV
WKDWDUHRQ\RXUORFDOPDFKLQHDVZHOO7RVHHZKDW,PHDQFUDFNRSHQDWH[WHGLWRU
DQGW\SHXS([DPSOH:KHQ\RXDUHGRQHVDYHLWWR\RXUGHVNWRSDVWHVWKWPODQG
WKHQRSHQLWZLWK6DIDULE\HLWKHUGUDJJLQJWKHILOHRQWRWKH6DIDULDSSOLFDWLRQLFRQRU
RSHQLQJ6DIDULDQGVHOHFWLQJ)LOHൺ2SHQ)LOH'RXEOHFOLFNLQJWHVWKWPOPLJKWZRUNDV
ZHOO EXW LW FRXOG RSHQ LQ \RXU WH[W HGLWRU RU DQRWKHU EURZVHU GHSHQGLQJ RQ \RXU
VHWWLQJV
(YHQLI\RXDUHQ¦WUXQQLQJ0DF26;\RXVKRXOGXVH6DIDULZKHQWHVWLQJ
\RXUL3KRQHZHEDSSVRQDGHVNWRSZHEEURZVHUEHFDXVH6DIDULLVWKH
A' FORVHVWGHVNWRSEURZVHUWRWKHL3KRQH¦V0RELOH6DIDUL6DIDULIRU:LQ
UP,
GRZVLVDYDLODEOHIURPKWWSZZZDSSOHFRPVDIDUL
6RPHWH[WHGLWRUVDUHEDGIRUDXWKRULQJ+70/,QSDUWLFXODU\RXZDQW
WRDYRLGHGLWRUVWKDWVXSSRUWULFKWH[WHGLWLQJOLNH0LFURVRIW:RUGRU
7H[W(GLW7KHVHW\SHVRIHGLWRUVFDQVDYHWKHLUILOHVLQIRUPDWVRWKHUWKDQ
SODLQWH[WZKLFKZLOOEUHDN\RXU+70/,I\RXDUHLQWKHPDUNHWIRUD
JRRG WH[W HGLWRU P\ IDYRULWH E\ IDU RQ WKH 0DF LV 7H[W0DWH KWWS
PDFURPDWHVFRPDQG,KHDUWKDWWKHUHLVDFORQHYHUVLRQIRU:LQGRZV
FDOOHG(7H[W(GLWRUKWWSZZZHWH[WHGLWRUFRP,IIUHHLV\RXUWKLQJ
\RXFDQGRZQORDG7H[W:UDQJOHUIRU0DFKWWSZZZEDUHERQHVFRP
SURGXFWV7H[W:UDQJOHURUXVHWKHEXLOWLQ1RWHSDGRQ:LQGRZV
Intro to CSS
$V\RX¦YHVHHQEURZVHUVUHQGHUFHUWDLQ+70/HOHPHQWVZLWKGLVWLQFWVW\OHVKHDGLQJV
DUHODUJHDQGEROGSDUDJUDSKVDUHIROORZHGE\DEODQNOLQHHWF7KHVHVW\OHVDUHYHU\
EDVLFDQGDUHSULPDULO\LQWHQGHGWRKHOSWKHUHDGHUXQGHUVWDQGWKHVWUXFWXUHDQGPHDQ
LQJRIWKHGRFXPHQW
7RJREH\RQGWKLVVLPSOHVWUXFWXUHEDVHGUHQGHULQJ\RXFDQXVH&DVFDGLQJ6W\OH6KHHWV
&66&66LVDVW\OHVKHHWODQJXDJHWKDWLVXVHGWRGHILQHWKHYLVXDOSUHVHQWDWLRQRIDQ
+70/GRFXPHQW<RXFDQXVH&66WRGHILQHVLPSOHWKLQJVOLNHWKHWH[WFRORUVL]HDQG
VW\OHEROGLWDOLFHWFRUFRPSOH[WKLQJVOLNHSDJHOD\RXWJUDGLHQWVRSDFLW\DQGPXFK
PRUH
([DPSOHVKRZVD&66UXOHWKDWLQVWUXFWVWKHEURZVHUWRGLVSOD\DQ\WH[WLQWKHERG\
HOHPHQWXVLQJWKHFRORUUHG,QWKLVH[DPSOHbodyLVWKHVHOHFWRUZKDWLVDIIHFWHGE\WKH
UXOHDQGWKHFXUO\EUDFHVHQFORVHWKHGHFODUDWLRQWKHUXOHLWVHOI7KHGHFODUDWLRQLQ
FOXGHVDVHWRISURSHUWLHVDQGWKHLUYDOXHV,QWKLVH[DPSOH colorLVWKHSURSHUW\DQG
redLVWKHYDOXHRIWKHSURSHUW\
([DPSOH$VLPSOH&66UXOH
body { color: red; }
3URSHUW\QDPHVDUHSUHGHILQHGLQWKH&66VSHFLILFDWLRQZKLFKPHDQVWKDW\RXFDQ¦W
MXVWPDNHWKHPXS(DFKSURSHUW\H[SHFWVDQDSSURSULDWHYDOXHDQGWKHUHFDQEHORWV
RIDSSURSULDWHYDOXHVDQGYDOXHIRUPDWVIRUDJLYHQSURSHUW\
)RUH[DPSOH\RXFDQVSHFLI\FRORUVZLWKSUHGHILQHGNH\ZRUGVOLNH redRUE\XVLQJ
+70/FRORUFRGHQRWDWLRQ7KLVXVHVDKH[DGHFLPDOQRWDWLRQWKUHHSDLUVRIKH[DGHF
LPDOGLJLWV¡)UHSUHVHQWLQJIURPOHIWWRULJKW5HG*UHHQDQG%OXHYDOXHV3URSHU
WLHVWKDWH[SHFWPHDVXUHPHQWVFDQDFFHSWYDOXHVOLNH 10px75%DQG1em([DPSOH
VKRZVVRPHFRPPRQGHFODUDWLRQV7KHFRORUFRGHVKRZQIRUbackground-colorFRU
UHVSRQGVWRWKH&66£JUD\¤
([DPSOH6RPHFRPPRQ&66GHFODUDWLRQV
body {
color: red;
background-color: #808080;
font-size: 12px;
font-style: italic;
font-weight: bold;
font-family: Arial;
}
6HOHFWRUVFRPHLQDYDULHW\RIIODYRUV,I\RXZDQWHGDOORI\RXUK\SHUOLQNVWKHaHOHPHQW
WRGLVSOD\LQLWDOLFV\RXZRXOGDGGWKHIROORZLQJWR\RXUVW\OHVKHHW
a { font-style: italic; }
,I\RXZDQWHGWREHPRUHVSHFLILFDQGRQO\LWDOLFL]HWKHK\SHUOLQNVWKDWZHUHFRQWDLQHG
VRPHZKHUHZLWKLQDQh1WDJ\RXZRXOGDGGWKHIROORZLQJWR\RXUVW\OHVKHHW
h1 a { font-style: italic; }
<RXFDQDOVRGHILQH\RXURZQFXVWRPVHOHFWRUVE\DGGLQJidDQGRUclassDWWULEXWHVWR
\RXU+70/WDJV&RQVLGHUWKHIROORZLQJ+70/VQLSSHW
<h1 class="loud">Hi there!</h1>
<p id="highlight">Thanks for visiting my web page.</p>
<ul>
<li class="loud">Pizza</li>
<li>Beer</li>
<li>Dogs</li>
</ul>
,I,DGGHG .loud { font-style: italic; }WRWKH&66IRUWKLV+70/ Hi there!DQG

PizzaZRXOGVKRZXSLWDOLFL]HGEHFDXVHWKH\ERWKKDYHWKHloudFODVV7KHGRWLQIURQW
RIWKH.loudVHOHFWRULVLPSRUWDQW,W¦VKRZWKH&66NQRZVWRORRNIRU+70/WDJVZLWK
DFODVVRIloud,I\RXRPLWWKHGRWWKH&66ZRXOGORRNIRUD loudWDJZKLFKGRHVQ¦W
H[LVWLQWKLVVQLSSHWRULQ+70/DWDOOIRUWKDWPDWWHU
$SSO\LQJ&66E\idLVVLPLODU7RDGGD\HOORZEDFNJURXQGILOOWRWKHhighlightSDUD
JUDSKWDJ\RX¦GXVHWKLVUXOH
#highlight { background-color: yellow; }
+HUHWKH#V\PEROWHOOVWKH&66WRORRNIRUDQ+70/WDJZLWKWKHLGhighlight
7RUHFDS\RXFDQRSWWRVHOHFWHOHPHQWVE\WDJQDPHHJbodyh1pE\FODVVQDPH
HJ.loud.subtle.errorRUE\idHJ#highlight#login#promo$QG\RXFDQ
JHWPRUHVSHFLILFE\FKDLQLQJVHOHFWRUVWRJHWKHUHJh1 abody ul .loud
7KHUHDUHGLIIHUHQFHVEHWZHHQclassDQGidclassDWWULEXWHVVKRXOGEH
XVHGZKHQ\RXKDYHPRUHWKDQRQHLWHPRQWKHSDJHZLWKWKHVDPH
a,:' classYDOXH&RQYHUVHO\idYDOXHVKDYHWREHXQLTXHWRDSDJH
:KHQ,ILUVWOHDUQHGWKLV,ILJXUHG,¦GMXVWDOZD\VXVH classDWWULEXWHV
VR,ZRXOGQ¦WKDYHWRZRUU\DERXWZKHWKHU,ZDVGXSLQJDQ idYDOXH
+RZHYHUVHOHFWLQJHOHPHQWVE\ idLVPXFKIDVWHUWKDQVHOHFWLQJWKHP
E\classVR\RXFDQKXUW\RXUSHUIRUPDQFHE\RYHUXVLQJclassVHOHFWRUV
6RQRZ\RXXQGHUVWDQGWKHEDVLFVRI&66%XWKRZGR\RXDSSO\DVW\OHVKHHWWRDQ
+70/SDJH",W¦VDFWXDOO\TXLWHVLPSOH<RXMXVWOLQNWRWKHVW\OHVKHHWLQWKHKHDGRIWKH
+70/GRFXPHQWDVVHHQLQ([DPSOH7KHhrefDWWULEXWHLQWKLVH[DPSOHLVDUHODWLYH
SDWKPHDQLQJWKDWLWSRLQWVWRDWH[WILOHQDPHGVFUHHQFVVLQWKHVDPHGLUHFWRU\DVWKH
+70/SDJH<RXFDQDOVRVSHFLI\DEVROXWHOLQNVVXFKDV
http://example.com/screen.css
([DPSOH/LQNLQJWRD&66VW\OHVKHHW
<html>
<head>
<link rel="stylesheet" href="screen.css" type="text/css" />
</head>
<body>
<h1 class="loud">Hi there!</h1>
<p id="highlight">Thanks for visiting my web page.</p>
<ul>
<li class="loud">Pizza</li>
<li>Beer</li>
<li>Dogs</li>
</ul>
</body>
</html>
([DPSOHVKRZVWKHFRQWHQWVRIVFUHHQFVV<RXVKRXOGVDYHWKLVILOHLQWKHVDPH
ORFDWLRQDVWKH+70/ILOH
([DPSOH$VLPSOHVW\OHVKHHW
body {
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; }
..
#..4ÿ
4
,W¦VZRUWKSRLQWLQJRXWWKDWLW¦VSRVVLEOHWROLQNWRVW\OHVKHHWVWKDWDUH
KRVWHGRQGRPDLQVRWKHUWKDQWKHRQHKRVWLQJWKH+70/GRFXPHQW
m
UP, +RZHYHULW¦VFRQVLGHUHGYHU\UXGHWROLQNWRVRPHRQHHOVH¦VVW\OHVKHHWV
ZLWKRXWSHUPLVVLRQVRSOHDVHRQO\OLQNWR\RXURZQ
)RU D TXLFN DQG WKRURXJK FUDVK FRXUVH LQ &66 , KLJKO\ UHFRPPHQG &66 3RFNHW
5HIHUHQFHE\(ULF0H\HU2¦5HLOO\(ULFKDVWKHODVWZRUGZKHQLWFRPHVWR&66DQG
WKLVSDUWLFXODUERRNLVVKRUWHQRXJKWRUHDGGXULQJWKHW\SLFDOPRUQLQJFDUSRRO8QOHVV
\RXDUHWKHSHUVRQGULYLQJLQZKLFKFDVHLWFRXOGWDNHFRQVLGHUDEO\ORQJHUGLG,VD\
£FUDVK¤FRXUVH"
Intro to JavaScript
$WWKLVSRLQW\RXVKRXOGNQRZKRZWRVWUXFWXUHDGRFXPHQWZLWK+70/DQGKRZWR
PRGLI\LWVYLVXDOSUHVHQWDWLRQZLWK&661RZZH¦OODGGVRPH-DYD6FULSWWRPDNHLWGR
VWXII
-DYD6FULSWLVDVFULSWLQJODQJXDJHWKDWFDQEHDGGHGWRDQ+70/SDJHWRPDNHLWPRUH
LQWHUDFWLYHDQGFRQYHQLHQWIRUWKHXVHU)RUH[DPSOH\RXFDQZULWHVRPH-DYD6FULSW
WKDWZLOOLQVSHFWWKHYDOXHVW\SHGLQDIRUPWRPDNHVXUHWKH\DUHYDOLG2U\RXFDQKDYH
-DYD6FULSW VKRZ RU KLGH HOHPHQWV RI D SDJH GHSHQGLQJ RQ ZKHUH WKH XVHU FOLFNV
-DYD6FULSWFDQHYHQFRQWDFWWKHZHEVHUYHUWRH[HFXWHGDWDEDVHFKDQJHVZLWKRXWUH
IUHVKLQJWKHFXUUHQWZHESDJH
/LNHDQ\PRGHUQVFULSWLQJODQJXDJH-DYD6FULSWKDVYDULDEOHVDUUD\VREMHFWVDQGDOO
WKHW\SLFDOFRQWUROVWUXFWXUHVifwhileforDQGVRRQ([DPSOHVKRZVDVQLSSHW
RI-DYD6FULSWWKDWLOOXVWUDWHVVHYHUDOFRUHFRQFHSWVRIWKHODQJXDJH
([DPSOH%DVLF-DYD6FULSWV\QWD[
var foods = ['Apples', 'Bananas', 'Oranges']; o
for (var i in foods) { 0
if (foods[i] == 'Apples') { O
alert(foods[i] + ' are my favorite!'); o
} else {
alert(foods[i] + ' are okay.'); 0
}
}
+HUH¦VDQH[SODQDWLRQRIZKDW¦VKDSSHQLQJKHUH
o 'HILQHDQDUUD\QDPHGfoodsWKDWFRQWDLQVWKUHHHOHPHQWV
0 2SHQDforORRSWKDWGHILQHVDYDULDEOHQDPHGiWKDWZLOOFRQWDLQWKHLQGH[RIHDFK
HOHPHQWRIWKHDUUD\GXULQJWKHORRS
0 $JDUGHQYDULHW\ifFKHFNVWRVHHLIWKHFXUUHQWHOHPHQWRIWKHDUUD\LVHTXDOWRApples
O 7KLVLVGLVSOD\HGLIWKHFXUUHQWHOHPHQWRIWKHDUUD\LVHTXDOWRApples
0 7KLVLVGLVSOD\HGLIWKHFXUUHQWHOHPHQWRIWKHDUUD\LVQRWHTXDOWRApples
+HUHDUHVRPHSRLQWVDERXW-DYD6FULSW¦VV\QWD[WKDWDUHZRUWKQRWLQJ
6WDWHPHQWVDUHWHUPLQDWHGZLWKVHPLFRORQV
&RGHEORFNVDUHHQFORVHGLQFXUO\EUDFHV
9DULDEOHVDUHGHFODUHGXVLQJWKHvarNH\ZRUG
$UUD\HOHPHQWVFDQEHDFFHVVHGZLWKVTXDUHEUDFNHWQRWDWLRQ
$UUD\NH\VDUHDVVLJQHGEHJLQQLQJDW
7KHVLQJOHHTXDOVVLJQLVWKHDVVLJQPHQWRSHUDWRU
7KHGRXEOHHTXDOVVLJQLVWKHHTXLYDOHQFHORJLFDORSHUDWRU
7KHSOXVVLJQLVWKHVWULQJFRQFDWHQDWLRQRSHUDWRU
)RURXUSXUSRVHVWKHPRVWLPSRUWDQWIHDWXUHRI-DYD6FULSWLVWKDWLWFDQLQWHUDFWZLWK
WKH HOHPHQWV RI DQ +70/ SDJH WKH FRRO NLGV FDOO WKLV £PDQLSXODWLQJ WKH '20¤
([DPSOHVKRZVDVLPSOHELWRI-DYD6FULSWWKDWFKDQJHVVRPHWH[WRQWKHSDJHZKHQ
WKHXVHUFOLFNVRQWKHh1
'20VWDQGVIRU'RFXPHQW2EMHFW0RGHODQGLQWKLVFRQWH[WLWUHSUH
VHQWVWKHEURZVHU¦VXQGHUVWDQGLQJRIDQ+70/SDJH<RXFDQUHDGPRUH
3.; DERXWWKH'RFXPHQW2EMHFW0RGHOKHUHKWWSHQZLNLSHGLDRUJZLNL
'RFXPHQWB2EMHFWB0RGHO
([DPSOH6LPSOH2Q&OLFNKDQGOHU
<html>
<head>
<script type="text/javascript" charset="utf-8"> o
function sayHello() { 0
document.getElementById('foo').innerHTML = 'Hi there!'; ©
} o
</script> ©
</head>
<body>
<h1 id="foo" onclick©="sayHello()">Click me!</h1>
</body>
</html>
+HUH¦VDQH[SODQDWLRQ
o ,¦YHDGGHGDVFULSWEORFNWRWKHKHDGRIWKH+70/GRFXPHQW
0 ,QVLGHWKHVFULSWEORFN,¦YHGHILQHGDVLQJOH-DYD6FULSWIXQFWLRQQDPHGsayHello()
0 7KHsayHello()IXQFWLRQFRQWDLQVDVLQJOHVWDWHPHQWZKLFKWHOOVWKHEURZVHUWR£ORRN
WKURXJKWKHGRFXPHQWIRUDQHOHPHQWWKDWKDVWKHLG¥IRR¦DQGVHWLWVLQQHU+70/
FRQWHQWVWR¥+LWKHUH¦¤7KHHIIHFWRIWKLVLQWKHEURZVHULVWKDWWKHWH[W£&OLFNPH¤
ZLOOEHUHSODFHGZLWK£+LWKHUH¤ZKHQWKHXVHUFOLFNVRQWKHh1HOHPHQW
© (QGRIWKHsayHello()IXQFWLRQ
© (QGRIWKHVFULSWEORFN
© 7KHonclickDWWULEXWHRIWKHh1HOHPHQWWHOOVWKHEURZVHUWRGRVRPHWKLQJZKHQWKH
XVHUFOLFNVRQWKHh1QDPHO\WRUXQWKHsayHello()IXQFWLRQ
%DFNLQWKHEDGROGGD\VRIZHEGHYHORSPHQWGLIIHUHQWEURZVHUVKDGGLIIHUHQWVXSSRUW
IRU -DYD6FULSW 7KLV PHDQW WKDW \RXU FRGH PLJKW UXQ LQ 6DIDUL EXW QRW LQ ,QWHUQHW
([SORUHU<RXKDGWRWDNHJUHDWSDLQVWRWHVWHDFKEURZVHUDQGHYHQGLIIHUHQWYHUVLRQV
RIWKHVDPHEURZVHULQRUGHUWRPDNHVXUH\RXUFRGHZRXOGZRUNIRUHYHU\RQH$VWKH
QXPEHURIEURZVHUVDQGEURZVHUYHUVLRQVJUHZLWEHFDPHLPSRVVLEOHWRWHVWDQGPDLQ
WDLQ\RXU-DYD6FULSWFRGHIRUHYHU\HQYLURQPHQW$WWKDWWLPHZHESURJUDPPLQJZLWK
-DYD6FULSWZDVKHOO
(QWHUM4XHU\M4XHU\LVDUHODWLYHO\VPDOO-DYD6FULSWOLEUDU\WKDWDOORZV\RXWRZULWH
\RXU-DYD6FULSWFRGHLQDZD\WKDWZLOOZRUNWKHVDPHLQDZLGHYDULHW\RIEURZVHUV
:KDW¦VPRUHLWJUHDWO\VLPSOLILHVDQXPEHURIFRPPRQZHEGHYHORSPHQWWDVNV)RU
WKHVHUHDVRQV,XVHM4XHU\LQPRVWRIP\ZHEGHYHORSPHQWZRUNDQG,¦OOEHXVLQJLW
IRUWKH-DYD6FULSWH[DPSOHVLQWKLVERRN([DPSOHLVDM4XHU\UHZULWHRI([DP
SOH
([DPSOHM4XHU\2Q&OLFNKDQGOHU
<html>
<head>
<script type="text/javascript" src="jquery.js"></script> o
<script type="text/javascript" charset="utf-8">
function sayHello() {
$('#foo').text('Hi there!'); 0
}
</script>
</head>
<body>
<h1 id="foo" onclick="sayHello()">Click me!</h1>
</body>
</html>
o +HUH,LQFOXGHWKHMTXHU\MVOLEUDU\,¦YHXVHGDUHODWLYHSDWKPHDQLQJWKDWWKHILOH
H[LVWVLQWKHVDPHGLUHFWRU\DVWKHSDJHWKDWLVXVLQJLWEXW,FRXOGKDYHLQFOXGHGLW
GLUHFWO\IURPDYDULHW\RISODFHVZKHUHLW¦VDYDLODEOH
0 1RWLFHWKHUHGXFWLRQLQWKHDPRXQWRIFRGHZHQHHGWRZULWHWRUHSODFHWKHWH[WLQ
WKHh1HOHPHQW7KLVPLJKWQRWVHHPOLNHDELJGHDOLQVXFKDWULYLDOH[DPSOHEXW,
FDQDVVXUH\RXWKDWLW¦VDOLIHVDYHULQFRPSOH[VROXWLRQV
:H¦OOEHVHHLQJSOHQW\RIUHDOZRUOGM4XHU\H[DPSOHVODWHURQVR,¦PJRLQJWROHDYHLW
DWWKDWIRUWKHPRPHQW
M4XHU\GRZQORDGVGRFXPHQWDWLRQDQGWXWRULDOVDUHDYDLODEOHDWKWWS
a*
MTXHU\FRP 7R XVH M4XHU\ \RX ZLOO QHHG WR GRZQORDG LW IURP WKH
UP, ZHEVLWHUHQDPHWKHILOH\RXGRZQORDGHGVXFKDVMTXHU\PLQMV
WRMTXHU\MVDQGSXWDFRS\RILWLQWKHVDPHGLUHFWRU\DV\RXU+70/
GRFXPHQW
CHAPTER 2
Basic iPhone Styling
8OWLPDWHO\ZHDUHJRLQJWREXLOGDQDWLYHL3KRQHDSSXVLQJ+70/&66DQG-DYD6FULSW
7KHILUVWVWHSRQWKLVMRXUQH\LVWRJHWFRPIRUWDEOHVW\OLQJ+70/WRORRNOLNHDQL3KRQH
DSS,QWKLVFKDSWHU,¦OOVKRZ\RXKRZWRDSSO\&66VW\OHVWRDEXQFKRIH[LVWLQJ+70/
SDJHVVRWKDWWKH\DUHHDVLO\QDYLJDEOHRQDQL3KRQH6RLQDGGLWLRQWRPRYLQJFORVHU
WREXLOGLQJDQDWLYHDSS\RX¦OOEHOHDUQLQJDSUDFWLFDODQGYDOXDEOHVNLOOWKDW\RXFDQ
XVHLPPHGLDWHO\
Don’t Have a Website?

,I\RX¦YHEHHQWHVWLQJDOO\RXUZHESDJHVORFDOO\RQ\RXUSHUVRQDOFRPSXWHU\RXZRQ¦W
EHDEOHWRYLHZWKHPRQ\RXUL3KRQHZLWKRXWVHWWLQJXSDVHUYHU<RXKDYHDIHZFKRLFHV
+RVW\RXUZHESDJHVRQDZHEVHUYHU\RXU,QWHUQHW6HUYLFH3URYLGHUOLNHO\RIIHUV
DFRPSOLPHQWDU\ZHEKRVWLQJVHUYLFHDQGFRQQHFWWRWKDWVHUYHUIURP\RXUL3KRQH
+RVW\RXUZHESDJHVRQDZHEVHUYHUUXQQLQJRQ\RXUFRPSXWHUDQGFRQQHFWWR
WKDWZHEVHUYHUIURP\RXUL3KRQH7KLVRQO\ZRUNVZKHQ\RXUL3KRQHDQG\RXU
FRPSXWHUDUHRQWKHVDPH:L)LQHWZRUN
,I\RXGRQ¦WKDYHDQL3KRQH\RXFDQVLPXODWHRQHXVLQJ6DIDUL,Q6DIDUL¦VDGYDQFHG
SUHIHUHQFHV HQDEOH WKH 'HYHORS PHQX WKHQ VHOHFW 'HYHORSൺ8VHU $JHQW DQG
FKRRVHWKHYHUVLRQRI0RELOH6DIDUL\RXZDQWWRVLPXODWH
7KLVFKDSWHULVVHWXSVRWKDW\RXFDQWU\WKHH[DPSOHVDV\RXUHDGWKURXJKLW6RQR
PDWWHUZKLFKRSWLRQ\RXFKRRVHIRUYLHZLQJWKHZHESDJHVWU\UHORDGLQJWKHPLQD
EURZVHUSUHIHUDEO\WKHL3KRQHEURZVHUHDFKWLPH\RXDGGVRPHWKLQJQHZDQGVDYH
RQHRIWKHVDPSOHILOHV
13
First Steps
7KHRU\LVJUHDWEXW,¦PD£VKRZPHGRQ¦WWHOOPH¤NLQGDJX\6ROHW¦VGLYHLQ
,PDJLQHWKDW\RXKDYHDZHEVLWHWKDW\RXZDQWWRL3KRQHL]H)LJXUH,QWKLVVFH
QDULRWKHUHDUHDQXPEHURIHDV\WKLQJV\RXFDQGRWRRSWLPL]HDVLWHIRUWKHL3KRQH
,¦OOJRRYHU\RXURSWLRQVLQWKLVFKDSWHU
?
J
l
*
! i?
!
d!i
l
iI
i I!
l
1
Hi
:
«o
*
If
5
3
t
i
!
i
-ill
« B
8 6
!
' E
IllI 2f
?« ?!
H| ;l
|hi !!
! !
i
P *
fit
|f!
R
$
I1
Li Si i1
III! I I
il j f I
!
V\ |it
l||i!il,|L
8
i
!
Silk
i;s
n
si i
ill
ff IfF{
nj [j
ii { j!| !j
.rp.
H* s!I
Ml!1
)LJXUH7KHGHVNWRSYHUVLRQRIDW\SLFDOZHESDJHORRNVILQHLQ6DIDULRQDFRPSXWHU
)LJXUHVKRZVZKDWWKHVDPHZHESDJHORRNVOLNHRQWKHL3KRQH,W¦VXVDEOHEXWIDU
IURPRSWLPL]HGIRUWKHL3KRQH
5
l:
m
I illii;
ii.
i
i
:!i illliiiil
I
)LJXUH7KHVDPHZHESDJHORRNV2.RQDQL3KRQHEXWZHFDQGRPXFKEHWWHU
14 | Chapter 2:ಗBasic iPhone Styling

([DPSOHVKRZVDQDEEUHYLDWHGYHUVLRQRIWKH+70/IRUWKHZHESDJHVKRZQLQ
)LJXUH7KLVLVWKH+70/\RX¦OOEHZRUNLQJZLWKLQWKLVFKDSWHU<RXFDQGRZQORDG
LWIURPWKHERRN¦VZHEVLWHVHH£+RZWR&RQWDFW8V¤RQSDJH[LYLI\RX¦GOLNHWRWU\
VW\OLQJ LW DV \RX JR WKURXJK WKH FKDSWHU 7KH GHVNWRS VW\OHVKHHW VFUHHQFVV LV QRW
VKRZQDVLWLVQRWHVVHQWLDOEXW\RXFDQXVHWKHVW\OHVKHHWIURPWKHSUHYLRXVFKDSWHU
LI\RX¦GOLNHWRKDYHVRPHWKLQJWRSOD\ZLWK
([DPSOH7KH+70/GRFXPHQWZH¦OOEHVW\OLQJ
<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>
</ul>
</div>
<div id="nav">
<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>
</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="images/manga.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>
First Steps | 15
</div>
</div>
</body>
</html>
)RU\HDUVZHEGHYHORSHUVXVHGWDEOHVWROD\RXWHOHPHQWVLQDJULG$G
YDQFHVLQ&66DQG+70/KDYHUHQGHUHGWKDWDSSURDFKQRWRQO\REVR
a,:' OHWHEXWXQGHVLUDEOH7RGD\ZHSULPDULO\XVHWKH divHOHPHQWDORQJ
ZLWKDYDULHW\RIDWWULEXWHVWRDFFRPSOLVKWKHVDPHWKLQJEXWZLWKPRUH
FRQWURO$OWKRXJKDFRPSOHWHH[SODQDWLRQRI divEDVHGOD\RXWVLVZHOO
EH\RQGWKHVFRSHRIWKLVERRN\RX¦OOVHHSOHQW\RIH[DPSOHVRILWDV\RX
UHDGWKURXJKWKHFKDSWHUV7ROHDUQPRUHFKHFNRXW'HVLJQLQJZLWK:HE
6WDQGDUGVE\-HIIUH\=HOGPDQ1HZ5LGHUV3UHVVZKLFKFRYHUVWKHLVVXH
LQJUHDWHUGHWDLO
Preparing a Separate iPhone Stylesheet

,¦PDV'5<DVWKHQH[WJX\EXWLQWKHUHDOZRUOG\RX¦UHEHWWHURIIPDNLQJDFOHDQEUHDN
EHWZHHQ\RXUGHVNWRSEURZVHUVW\OHVKHHWDQG\RXUL3KRQHVW\OHVKHHW7DNHP\ZRUG
IRULWDQGPDNHWZRFRPSOHWHO\LQGHSHQGHQWILOHV¢\RX¦OOVOHHSEHWWHU7KHDOWHUQDWLYH
ZRXOGEHWRZHGJHDOORI\RXU&66UXOHVLQWRDVLQJOHVW\OHVKHHWZKLFKHQGVXSEHLQJ
DEDGLGHDIRUDQXPEHURIUHDVRQVWKHPRVWREYLRXVLVWKDW\RX¦GEHVHQGLQJDEXQFK
RILUUHOHYDQWGHVNWRSVW\OHUXOHVWRWKHSKRQHZKLFKLVDZDVWHRISUHFLRXVEDQGZLGWK
DQGPHPRU\
'5<VWDQGVIRU£'RQ¦W5HSHDW<RXUVHOI¤DQGLVDVRIWZDUHGHYHORSPHQW
SULQFLSOH VWDWLQJ WKDW £(YHU\ SLHFH RI NQRZOHGJH PXVW KDYH D VLQJOH
m
UP, XQDPELJXRXVDXWKRULWDWLYHUHSUHVHQWDWLRQZLWKLQDV\VWHP¤7KHWHUP
ZDV FRLQHG E\ $QGUHZ +XQW DQG 'DYLG 7KRPDV LQ WKHLU ERRN 7KH
3UDJPDWLF3URJUDPPHU$GGLVRQ:HVOH\
7R VSHFLI\ D VW\OHVKHHW IRU WKH L3KRQH UHSODFH WKH VW\OHVKHHW OLQN WDJ LQ WKH VDPSOH
+70/GRFXPHQWZLWKRQHVWKDWXVHWKHIROORZLQJH[SUHVVLRQV
<link rel="stylesheet" type="text/css"
href="iphone.css" media="only screen and (max-width: 480px)" />
href="desktop.css" media="screen and (min-width: 481px)" />
+HUH GHVNWRSFVV UHIHUV WR ZKDWHYHU \RXU H[LVWLQJ GHVNWRS VW\OHVKHHW LV DQG
LSKRQHFVVLVDQHZILOHWKDWZH¦OOEHGLVFXVVLQJLQGHWDLOLQDELW
..
0..4ÿ
4
,I \RX¦UH IROORZLQJ DORQJ XVLQJ WKH VDPSOH +70/ GRFXPHQW VKRZQ
HDUOLHU\RX¦OOQRZQHHGWRUHQDPHVFUHHQFVVWRGHVNWRSFVVKRZHYHU
"v VLQFHZH¦UHIRFXVHGRQWKHL3KRQHVW\OHVKHHW\RXFDQLJQRUHWKHGHVNWRS
VW\OHVKHHW FRPSOHWHO\ ,I LW IDLOV WR ORDG \RXU EURZVHU ZRQ¦W JHW WRR
XSVHW
5HJUHWWDEO\,QWHUQHW([SORUHUZLOOQRWXQGHUVWDQGWKHSUHYLRXVH[SUHVVLRQVVRZHKDYH
WRDGGDFRQGLWLRQDOFRPPHQWVKRZQLQEROGWKDWOLQNVWRDQ,(VSHFLILFYHUVLRQRI
WKH&66
href="iphone.css" media="only screen and (max-width: 480px)" />
href="desktop.css" media="screen and (min-width: 481px)" />

6R QRZ LW¦V WLPH WR HGLW WKH +70/ GRFXPHQW GHOHWH WKH H[LVWLQJ link WR WKH
VFUHHQFVVILOHDQGUHSODFHLWZLWKWKHOLQHVMXVWVKRZQ7KLVZD\\RXZLOOKDYHDFOHDQ
VODWHIRUWKHL3KRQHVSHFLILF&66WKDW,¦OOVKRZ\RXLQWKLVFKDSWHU
Controlling the Page Scaling

8QOHVV\RXWHOOLWRWKHUZLVH6DIDULRQWKHL3KRQHLVJRLQJWRDVVXPHWKDW\RXUSDJHLV
S[ZLGH)LJXUH,QWKHPDMRULW\RIFDVHVWKLVZRUNVJUHDW+RZHYHU\RXDUH
JRLQJWRIRUPDWRXUFRQWHQWVSHFLILFDOO\IRUWKHVPDOOHUGLPHQVLRQVRIWKHL3KRQHVR
\RXPXVWOHW0RELOH6DIDULNQRZDERXWLWE\DGGLQJDYLHZSRUWPHWDWDJWRWKH head
HOHPHQWRIWKH+70/GRFXPHQW
<meta name="viewport" content="user-scalable=no, width=device-width" />
,I\RXGRQ¦WVHWWKHYLHZSRUWZLGWKWKHSDJHZLOOEH]RRPHGZD\RXWZKHQLWILUVWORDGV
7KHYLHZSRUWPHWDWDJZLOOEHLJQRUHGE\EURZVHUVRWKHUWKDQ0RELOH
6DIDULVR\RXFDQLQFOXGHLWZLWKRXWZRUU\LQJDERXWWKHGHVNWRSYHUVLRQ
-'iv RI\RXUVLWH
0HUHO\E\VXSSUHVVLQJWKHGHVNWRSVW\OHVKHHWDQGFRQILJXULQJ\RXUYLHZSRUW\RXDUH
DOUHDG\JLYLQJ\RXUL3KRQHXVHUVDQHQKDQFHGH[SHULHQFH)LJXUH7RUHDOO\LPSUHVV
WKHPOHW¦VVWDUWEXLOGLQJWKHLSKRQHFVVVW\OHVKHHW
First Steps | 17
+ CQ rn
Wt
)LJXUH7KHL3KRQHDVVXPHVDQRUPDOZHESDJHLVS[ZLGH
-*AU
ftl* A'.llfmÿtUrkiOM C
Jonathan Stark
•AhM
•Ilk*
•IX sv Wyroiirt
• Stntfgi
•MiI
**ÿ*
»
)LJXUH6HWWLQJWKHYLHZSRUWWRWKHZLGWKRIWKHGHYLFHPDNHV\RXUSDJHVDORWPRUHUHDGDEOH
Adding the iPhone CSS
7KHUHDUHDQXPEHURIXVHULQWHUIDFH8,FRQYHQWLRQVWKDWPDNHDQL3KRQHDSSORRN
OLNHDQL3KRQHDSS,QWKHQH[WVHFWLRQ,¦OODGGWKHGLVWLQFWLYHWLWOHEDUOLVWVZLWKURXQGHG
FRUQHUVILQJHUIULHQGO\OLQNVWKDWORRNOLNHJORVV\EXWWRQVDQGVRRQ8VLQJ\RXUWH[W
HGLWRUFUHDWHDILOHQDPHGLSKRQHFVVDGGWKHFRGHLQ([DPSOHDQGVDYHWKHILOHLQ
WKHVDPHGLUHFWRU\DV\RXU+70/GRFXPHQW
([DPSOH6HWWLQJVRPHJHQHUDOVLWHZLGHVW\OHVRQWKH+70/ERG\HOHPHQW
body {
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 */
}
..
#..4ÿ
4
1RWHWKDW,KDYHVHWWKHRYHUDOOIRQWIRUWKHGRFXPHQWWR+HOYHWLFDZKLFK
LVWKHIRQWXVHGE\PRVWRIWKHDSSOLFDWLRQVRQWKHL3KRQH,I\RXDUH
a,:' WU\LQJWRDFKLHYHDSURIHVVLRQDOORRN\RXVKRXOGSUREDEO\VWLFNZLWK
+HOYHWLFDXQOHVV\RXKDYHDVSHFLILFUHDVRQQRWWR
1RZ,¦OODWWDFNWKHKHDGHUdivWKDWFRQWDLQVWKHPDLQKRPHOLQNLHWKHORJROLQNDQG

WKHSULPDU\DQGVHFRQGDU\VLWHQDYLJDWLRQ7KHILUVWVWHSLVWRIRUPDWWKHORJROLQNDVD
FOLFNDEOHWLWOHEDU$GGWKHIROORZLQJWRWKHLSKRQHFVVILOH
#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;
}
Adding the iPhone CSS | 19
,¦PJRLQJWRIRUPDWWKHSULPDU\DQGVHFRQGDU\QDYLJDWLRQ ulEORFNVLGHQWLFDOO\VR,
FDQMXVWXVHWKHJHQHULFWDJVHOHFWRUVLH #header ulDVRSSRVHGWRWKHWDJ idVLH
#header ul#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;
display: block;
font-size: 17px;
font-weight: bold;
margin-bottom: -1px;
padding: 12px 10px;
}
3UHWW\ VLPSOH VR IDU ULJKW" :LWK WKLV OLWWOH ELW RI &66 ZH KDYH DOUHDG\ PDGH D ELJ
LPSURYHPHQWRQWKHL3KRQHSDJHGHVLJQ)LJXUH1H[WDGGVRPHSDGGLQJWRWKH
FRQWHQWDQGVLGHEDUdivVWRLQGHQWWKHWH[WIURPWKHHGJHRIWKHVFUHHQDELW)LJXUH
#content, #sidebar {
padding: 10px;
}
IAT&T f 120 AM
Jonathan Stark
Blog
Contact
RatourCM
Quick Question
Author Assistance
On Call
)LJXUH$OLWWOHELWRI&66FDQJRDORQJZD\WRZDUGHQKDQFLQJWKHXVDELOLW\RI\RXUL3KRQHDSS
/i
•-UAIAT 7 12 02 AM
On Call
Development
Migration
About
Jananan Sam a a mo otvatopar tpaaaa*
and aiAnor Ha confuting vm Jonadvan Stan
Conaunrig. He nat anracaad caant* men at
Siapm Tumor Broadcaamg and *ia POA
Jonanan a me audio* ol na boot Wt&

i* a
tpeaur ai me FteMaaer Dmelcipo*
Cora*rarea and a born a Pv*1 and FaaMaaar
as ft
V
)LJXUH,QGHQWLQJWH[WIURPWKHHGJHV
<RXPLJKWEHZRQGHULQJZK\,DGGHGSDGGLQJWRWKHFRQWHQWDQGVLGH
EDUHOHPHQWVLQVWHDGRIVHWWLQJLWJOREDOO\RQWKHERG\HOHPHQWLWVHOI7KH
«>r Tb: UHDVRQLVWKDWLW¦VYHU\FRPPRQWRKDYHHOHPHQWVWKDW\RXZDQWWRKDYH
GLVSOD\HGHGJHWRHGJHDVZLWKWKHKHDGHULQWKLVH[DPSOH%HFDXVHRI
WKLVSDGGLQJDSSOLHGWRWKHERG\RUVRPHRWKHUJOREDOZUDSSHUHOHPHQW
FDQEHFRPHPRUHWURXEOHWKDQLW¦VZRUWK
7KHFRQWHQWLQWKHIRRWHURIWKLVSDJHLVEDVLFDOO\DUHKDVKRIWKHQDYLJDWLRQHOHPHQWDW
WKHWRSRIWKHSDJHWKHulHOHPHQWZLWKWKHLGnavVR\RXFDQUHPRYHWKHIRRWHUIURP
WKHL3KRQHYHUVLRQRIWKHSDJHE\VHWWLQJWKHGLVSOD\WRQRQH
#footer {
display: none;
}
Adding the iPhone Look and Feel

1RZLW¦VWLPHWRJHWDOLWWOHIDQFLHU6WDUWLQJIURPWKHWRSRIWKHSDJHDGGDSL[HOZKLWH
GURSVKDGRZWRWKHORJROLQNWH[WDQGD&66JUDGLHQWWRWKHEDFNJURXQG
#header h1 a {
text-shadow: 0px 1px 0px #fff;
background-image: -webkit-gradient(linear, left top, left bottom,
from(#ccc), to(#999));
}
,QWKHtext-shadowGHFODUDWLRQWKHSDUDPHWHUVIURPOHIWWRULJKWDUHKRUL]RQWDORIIVHW
YHUWLFDORIIVHWEOXUDQGFRORU0RVWRIWKHWLPH\RX¦OOEHDSSO\LQJWKHH[DFWYDOXHV
Adding the iPhone Look and Feel | 21
VKRZQKHUHWR\RXUWH[WEHFDXVHWKDW¦VZKDWXVXDOO\ORRNVJRRGRQWKHL3KRQHEXWLW
LVIXQWRH[SHULPHQWZLWK text-shadowEHFDXVHLWFDQDGGDVXEWOHEXWVRSKLVWLFDWHG
WRXFKWR\RXUGHVLJQ
7KH-webkit-gradientOLQHGHVHUYHVVSHFLDODWWHQWLRQ,W¦VDQLQVWUXFWLRQWRWKHEURZVHU
WRJHQHUDWHDJUDGLHQWLPDJHRQWKHIO\7KHUHIRUHD&66JUDGLHQWFDQEHXVHGDQ\ZKHUH
\RX ZRXOG QRUPDOO\ VSHFLI\ D url() HJ EDFNJURXQG LPDJH OLVW VW\OH LPDJH 7KH
SDUDPHWHUVIURPOHIWWRULJKWDUHDVIROORZVWKHJUDGLHQWW\SHFDQEHOLQHDURUUDGLDO
WKHVWDUWLQJSRLQWRIWKHJUDGLHQWFDQEHOHIWWRSOHIWERWWRPULJKWWRSRUULJKWERWWRP
WKHHQGSRLQWRIWKHJUDGLHQWWKHVWDUWLQJFRORUDQGWKHHQGLQJFRORU
1RWHWKDW\RXFDQQRWUHYHUVHWKHKRUL]RQWDODQGYHUWLFDOSRUWLRQVRIWKH
IRXUJUDGLHQWVWDUWDQGVWRSSRLQWFRQVWDQWVLHOHIWWRSOHIWERWWRP
4*
9PJ ULJKWWRSDQGULJKWERWWRP,QRWKHUZRUGVWRSOHIWERWWRPOHIWWRS
ULJKWDQGERWWRPULJKWDUHLQYDOLGYDOXHV
7KHQH[WVWHSLVWRDGGWKHWUDGLWLRQDOURXQGHGFRUQHUVWRWKHQDYLJDWLRQPHQXV
#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;
}
$V\RXFDQVHH,¦PXVLQJFRUQHUVSHFLILFYHUVLRQVRIWKH-webkit-border-radiusSURS
HUW\WRDSSO\DQSL[HOUDGLXVWRERWKWKHWRSWZRFRUQHUVRIWKHILUVWOLVWLWHPDQGWKH
ERWWRPWZRFRUQHUVRIWKHODVWOLVWLWHP)LJXUH
[1]
)LJXUH*UDGLHQWVWH[WVKDGRZVDQGURXQGHGFRUQHUVVWDUWWRWUDQVIRUP\RXUZHESDJHLQWRD
QDWLYHORRNLQJL3KRQHDSS
,WZRXOGEHFRROLI\RXFRXOGMXVWDSSO\WKHERUGHUUDGLXVWRWKHHQFORVLQJ ulEXWLW
GRHVQ¦WZRUN,I\RXWU\LW\RX¦OOVHHWKDWWKHVTXDUHFRUQHUVRIWKHFKLOGOLVWLWHPVZLOO
RYHUIORZWKHURXQGHGFRUQHUVRIWKHulWKHUHE\QHJDWLQJWKHHIIHFW
7HFKQLFDOO\,FRXOGDFKLHYHWKHURXQGHGOLVWHIIHFWE\DSSO\LQJWKHUD
GLXVFRUQHUVWRWKHulLI,VHWWKHEDFNJURXQGFRORURIWKHulWRZKLWHDQG
m
UP, WKHEDFNJURXQGRILWVFKLOGHOHPHQWVWRWUDQVSDUHQW+RZHYHUZKHQ\RX
FOLFN WKH ILUVW RU ODVW LWHP LQ WKH OLVW WKH WDS KLJKOLJKW ZLOO VKRZ XS
VTXDUHGRIIDQGLWORRNVWHUULEOH<RXUEHVWEHWLVWRDSSO\WKHURXQGLQJ
WRWKHWDJVWKHPVHOYHVDV,¦YHGHPRQVWUDWHGKHUH
Adding Basic Behavior with jQuery

2QH RI P\ IDYRULWH WKLQJV DERXW EXLOGLQJ ZHE DSSV IRU WKH L3KRQH LV WKDW , FDQ EH
UHDVRQDEO\VXUHWKDW-DYD6FULSWLVHQDEOHG5HJUHWWDEO\WKLVLVQRWWKHVLWXDWLRQZKHQ
EXLOGLQJZHEVLWHVIRUGHVNWRSEURZVHUV0\QH[WVWHSLVWRDGGVRPH-DYD6FULSWWRP\
SDJHWRVXSSRUWVRPHEDVLFG\QDPLFEHKDYLRU,QSDUWLFXODU,ZDQWWRDOORZXVHUVWR
VKRZDQGKLGHWKHELJKRQNLQJQDYLJDWLRQVHFWLRQLQWKHKHDGHUVRWKDWWKH\RQO\VHH
LWZKHQWKH\ZDQWWR,QRUGHUWRPDNHWKLVZRUN,¦PJRLQJWRZULWHVRPHQHZ&66
DQGXVHVRPH-DYD6FULSWWRDSSO\WKHQHZ&66WRWKHH[LVWLQJ+70/
)LUVWOHW¦VWDNHDORRNDWWKHQHZ&666WHSRQHLVWRKLGHWKHulHOHPHQWVLQWKHKHDGHU
VRWKH\GRQ¦WVKRZXSZKHQWKHXVHUILUVWORDGVWKHSDJH,I\RXDUHIROORZLQJDORQJDW
KRPHRSHQ\RXULSKRQHFVVILOHDQGDGGWKHIROORZLQJ
#header ul.hide {
display: none;
}
1H[W,¦OOGHILQHWKHVW\OHVIRUWKHEXWWRQWKDWZLOOVKRZDQGKLGHWKHPHQX1RWHWKDW
WKHEXWWRQGRHVQRWH[LVWLQWKH+70/\HWIRU\RXULQIRUPDWLRQWKH+70/IRUWKH
EXWWRQLVJRLQJWRORRNOLNHWKLV
<div class="leftButton" onclick="toggleMenu()">Menu</div>
,¦OOGHVFULEHWKHEXWWRQ+70/LQGHWDLOLQDPRPHQW£$GGLQJ%DVLF%HKDYLRUZLWK
M4XHU\¤RQSDJHVRGRQ¦WERWKHUDGGLQJWKHSUHFHGLQJOLQHRIFRGHWR\RXU+70/
ILOH\HW7KHLPSRUWDQWWKLQJWRQRWHLVWKDWLW¦VDdivZLWKWKHFODVVleftButtonDQGLW¦V
JRLQJWREHLQWKHKHDGHU
+HUHLVWKH&66VW\OHIRUWKHEXWWRQ\RXFDQJRDKHDGDQGDGGWKLVWRWKHLSKRQHFVVILOH
#header div.leftButton {
position: absolute;O
top: 7px;
left: 6px;
height: 30px;0
font-weight: bold;O
text-align: center;
color: white;
Adding Basic Behavior with jQuery | 23
text-shadow: rgba(0,0,0,0.6) 0px -1px 0px; o
line-height: 28px;©
border-width: 0 8px 0 8px; o
-webkit-border-image: url(images/button.png) 0 8 0 8;©
}
)RUWKHJUDSKLFVXVHGLQWKLVFKDSWHU\RXFDQGRZQORDGM47RXFKIURP
KWWSMTWRXFKFRPDQGFRS\WKHJUDSKLFVIURPWKHWKHPHVMTWLPJGL
"v UHFWRU\3XWWKHVHFRSLHVLQWRDQLPDJHVVXEGLUHFWRU\EHQHDWKWKHGLUHF
WRU\WKDWFRQWDLQV\RXU+70/GRFXPHQW\RX¦OOSUREDEO\QHHGWRFUHDWH
WKH LPDJHV GLUHFWRU\ :H¦OO EH WDONLQJ DERXW M47RXFK LQ GHWDLO LQ
&KDSWHU
O 7DNLQJLWIURPWKHWRS,VHWWKHSRVLWLRQWRDEVROXWHWRUHPRYHWKH divIURPWKH
GRFXPHQWIORZZKLFKDOORZVPHWRVHWLWVWRSDQGOHIWSL[HOFRRUGLQDWHV
© +HUH,VHWWKHKHLJKWWRS[VRLW¦VELJHQRXJKWRWDSHDVLO\
© 1H[W,VW\OHWKHWH[WEROGZKLWHZLWKDVOLJKWGURSVKDGRZDQGFHQWHUHGLQWKHER[
© ,Q&66WKHrgbIXQFWLRQLVDQDOWHUQDWLYHWRWKHIDPLOLDUKH[QRWDWLRQW\SLFDOO\XVHG
WRVSHFLI\FRORUVHJ)))))) rgb(255, 255, 255)DQG rgb(100%, 100%, 100%)
DUHERWKWKHVDPHDV))))))0RUHUHFHQWO\WKHrgba()IXQFWLRQKDVEHHQLQWUR
GXFHGZKLFKDOORZV\RXWRVSHFLI\DIRXUWKSDUDPHWHUWKDWGHILQHVWKHDOSKDYDOXH
LHRSDFLW\RIWKHFRORU7KHUDQJHRIDOORZDEOHYDOXHVLVWRZKHUHLVIXOO\
WUDQVSDUHQWDQGLVIXOO\RSDTXHGHFLPDOYDOXHVEHWZHHQDQGZLOOEHUHQGHUHG
WUDQVOXFHQW
© 7KH line-heightGHFODUDWLRQPRYHVWKHWH[WGRZQYHUWLFDOO\LQWKHER[VRLW¦VQRW
IOXVKXSDJDLQVWWKHWRSERUGHU
© 7KHborder-widthDQG-webkit-border-imageOLQHVUHTXLUHDELWRIH[SODQDWLRQ7KHVH
WZRSURSHUWLHVWRJHWKHUDOORZ\RXWRDVVLJQSRUWLRQVRIDVLQJOHLPDJHWRWKHERUGHU
DUHDRIDQHOHPHQW7KLVPHDQVQRPRUHQRQVHPDQWLFQHVWHGdivVRUVOLFLQJLPDJHV
LQWRWRS/HIW&RUQHUSQJWRS5LJKW&RUQHUSQJHWF,IWKHER[UHVL]HVEHFDXVHWKHWH[W
LQFUHDVHVRUGHFUHDVHVWKHERUGHULPDJHZLOOVWUHWFKWRDFFRPPRGDWHLW,W¦VUHDOO\D
JUHDWWKLQJKDYLQJIHZHULPDJHVPHDQVOHVVZRUNOHVVEDQGZLGWKDQGVKRUWHUORDG
WLPHV
:LWKWKHborder-widthOLQH,¦PWHOOLQJWKHEURZVHUWRDSSO\DERUGHUWRWKHWRS
DQS[ERUGHUWRWKHULJKWDZLGWKERUGHUWRWKHERWWRPDQGDQS[ZLGWKERUGHU
WRWKHOHIWLHWKHIRXUSDUDPHWHUVVWDUWDWWKHWRSRIWKHER[DQGZRUNWKHLUZD\
DURXQGFORFNZLVH1RWHWKDW,GRQ¦WQHHGWRVSHFLI\DFRORURUVW\OHIRUWKHERUGHU
G :LWKWKHERUGHUZLGWKVLQSODFH,FDQDSSO\WKHERUGHULPDJH7KHILYHSDUDPHWHUV
IURPOHIWWRULJKWDUHWKHurlRIWKHLPDJHWKHWRSZLGWKWKHULJKWZLGWKWKHERWWRP
ZLGWKDQGWKHOHIWZLGWKDJDLQFORFNZLVHIURPWRS7KHXUOFDQEHDEVROXWHKWWS
H[DPSOHFRPP\%RUGHU,PDJHSQJRUUHODWLYH5HODWLYHSDWKVDUHEDVHGRQWKHORFD
WLRQRIWKHVW\OHVKHHWQRWWKH+70/SDJHWKDWLQFOXGHVWKHVW\OHVKHHW
:KHQ,ILUVWHQFRXQWHUHGWKHERUGHULPDJHSURSHUW\,IRXQGLWRGG
WKDW,KDGWRVSHFLI\WKHERUGHUZLGWKVZKHQ,KDGDOUHDG\GRQHVR
a,:' ZLWKWKHborder-widthSURSHUW\$IWHUVRPHSDLQIXOWULDODQGHUURU,
GLVFRYHUHGWKDWWKHZLGWKVLQWKHborder-imageSURSHUW\DUHQRWERU
GHUZLGWKVWKH\DUHWKHZLGWKVWRVOLFHIURPWKHLPDJH7DNLQJWKH
ULJKWERUGHUDVDQH[DPSOH,¦PWHOOLQJWKHEURZVHUWRWDNHWKHOHIW
SL[HOVRIWKHLPDJHDQGDSSO\WKHPWRWKHULJKWERUGHUZKLFKDOVR
KDSSHQVWRKDYHDQS[ZLGWK
,WLVSRVVLEOHWRGRVRPHWKLQJLUUDWLRQDOVXFKDVDSSO\LQJWKHULJKW
SL[HOVRIDQLPDJHWRDERUGHUWKDWLVS[ZLGH7RPDNHWKLVZRUN
SURSHUO\\RXKDYHWRXVHWKHRSWLRQDOSDUDPHWHUVRIwebkit-border-
imageWKDWWHOOWKHLPDJHZKDWWRGRZLWKWKHVOLFHLQWKHDYDLODEOH
ERUGHUVSDFHUHSHDWVWUHWFKURXQGHWF,QWKUHH\HDUVRIWU\LQJ,
KDYHIDLOHGWRFRPHXSZLWKDQ\VDQHUHDVRQWRGRWKLVVR,ZRQ¦W
ZDVWHVSDFHKHUHGHVFULELQJWKLVFRQIXVLQJDQGLPSUDFWLFDORSWLRQRI
DQRWKHUZLVHNLOOHUIHDWXUH
2.WLPHIRUVRPH-DYD6FULSW,QSUHSDUDWLRQIRUWKH-DYD6FULSW\RX¦UHDERXWWRZULWH
\RXQHHGWRXSGDWH\RXU+70/GRFXPHQWWRLQFOXGHMTXHU\MVDQGLSKRQHMV$GGWKHVH
OLQHVWRWKHheadVHFWLRQRI\RXU+70/GRFXPHQW
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="iphone.js"></script>
nrÿ- M4XHU\GRZQORDGVGRFXPHQWDWLRQDQGWXWRULDOVDUHDYDLODEOHDWKWWS
MTXHU\FRP 7R XVH M4XHU\ \RX ZLOO QHHG WR GRZQORDG LW IURP WKH
ZHEVLWHUHQDPHWKHILOH\RXGRZQORDGHGVXFKDVMTXHU\PLQMV
WRMTXHU\MVDQGSXWDFRS\RILWLQWKHVDPHGLUHFWRU\DV\RXU+70/
GRFXPHQW
7KHSULPDU\GXW\RIWKH-DYD6FULSWZHQHHGWRZULWHLVWRDOORZWKHXVHUWRVKRZDQG
KLGHWKHQDYLJDWLRQPHQXV&RS\WKHIROORZLQJ-DYD6FULSWLQWRDILOHFDOOHGLSKRQHMV
DQGVDYHLWLQWKHVDPHIROGHUDVWKH+70/ILOH
if (window.innerWidth && window.innerWidth <= 480) { o
$(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'); ©
}
}
o 7KH HQWLUH SDJH LV ZUDSSHG LQ DQ if VWDWHPHQW WKDW FKHFNV WR PDNH VXUH WKH
innerWidthSURSHUW\RIWKHwindowREMHFWH[LVWVLWGRHVQ¦WH[LVWLQVRPHYHUVLRQVRI
,QWHUQHW([SORUHUDQGWKDWWKHZLGWKLVOHVVWKDQRUHTXDOWRWKHPD[ZLGWKIRU
WKHL3KRQH%\DGGLQJWKLVOLQHZHHQVXUHWKDWWKHFRGHRQO\H[HFXWHVZKHQWKH
XVHULVEURZVLQJWKHSDJHZLWKDQL3KRQHRUVRPHRWKHUVLPLODUO\VL]HGGHYLFH
,I\RXDUHWHVWLQJ\RXUL3KRQHZHESDJHVXVLQJWKHGHVNWRSYHUVLRQ
RI6DIDULDVGHVFULEHGLQ£'RQ¦W+DYHD:HEVLWH"¤RQSDJHWKH
if VWDWHPHQW KHUH ZLOO IDLO LI \RXU EURZVHU¦V ZLQGRZ ZLGWK LV WRR
ODUJH$VDZRUNDURXQGHQWHUWKHIROORZLQJOLQHRI-DYD6FULSWLQWR
6DIDUL¦VORFDWLRQEDUWRUHVL]H\RXUEURZVHUWRPRUHL3KRQHHVTXH
GLPHQVLRQV
javascript:window.scrollTo(0,0);resizeTo(320,480);
<RXFDQHYHQLQFUHDVHWKHKHLJKWPHDVXUHPHQWWRPDNHDWDOOVNLQQ\
YLHZ ZKLFK LV VRPHWLPHV KHOSIXO LI \RX DUH ZRUNLQJ ZLWK D ORW RI
FRQWHQW)LJXUHVKRZQODWHU
© +HUHZHKDYHWKHVRFDOOHG£GRFXPHQWUHDG\¤IXQFWLRQ,I\RXDUHQHZWRM4XHU\
WKLVFDQEHDELWLQWLPLGDWLQJDQG,DGPLWWKDWLWWRRNPHDZKLOHWRPHPRUL]HWKH
V\QWD[+RZHYHULW¦VZRUWKWDNLQJWKHWLPHWRFRPPLWLWWRPHPRU\EHFDXVH\RX¦OO
EHXVLQJLWDORW7KHGRFXPHQWUHDG\IXQFWLRQEDVLFDOO\VD\V£:KHQWKHGRFXPHQW
LVUHDG\UXQWKLVFRGH¤0RUHRQZK\WKLVLVLPSRUWDQWLQDVHF
o 7KLVLVW\SLFDOM4XHU\FRGHWKDWEHJLQVE\VHOHFWLQJWKHulVLQWKHKHDGHUDQGDGGLQJ
WKH£KLGH¤&66FODVVWRWKHP5HPHPEHUhideLVWKHVHOHFWRUZHXVHGLQWKHSUHYLRXV
&667KHQHWHIIHFWRIH[HFXWLQJWKLVOLQHLVWR£KLGH¤WKHKHDGHUulHOHPHQWV7DNH
VSHFLDOQRWHKDGZHQRWZUDSSHGWKLVOLQHLQWKHGRFXPHQWUHDG\IXQFWLRQLWZRXOG
KDYHPRVWOLNHO\H[HFXWHGEHIRUHWKHulVZHUHHYHQILQLVKHGORDGLQJ7KLVPHDQVWKDW
WKH-DYD6FULSWZRXOGORDGWKLVOLQHZRXOGIDLOEHFDXVHWKH ulVZRXOGQ¦WH[LVW\HW
WKHSDJHZRXOGFRQWLQXHORDGLQJWKH ulVZRXOGDSSHDUDQG\RX¦GEHVFUDWFKLQJ
\RXU KHDG RU VPDVKLQJ \RXU NH\ERDUG ZRQGHULQJ ZK\ WKH -DYD6FULSW ZDVQ¦W
ZRUNLQJ
o +HUHLVZKHUH,DSSHQGDEXWWRQWRWKHKHDGHUWKDWZLOODOORZWKHXVHUWRVKRZDQG
KLGHWKHPHQX)LJXUH,WKDVDFODVVWKDWFRUUHVSRQGVWRWKH&66ZHZURWH
SUHYLRXVO\ IRU .leftButton DQG LW KDV DQ onclick KDQGOHU WKDW FDOOV WKH IXQFWLRQ
toggleMenu()ZKLFKFRPHVQH[W
0 7KHtoggleMenu()IXQFWLRQXVHVM4XHU\¦VtoggleClass()IXQFWLRQWRDGGRUUHPRYH
WKHVSHFLILHGFODVVWRWKHVHOHFWHGREMHFW2QWKLVOLQH,¦PWRJJOLQJWKHhideFODVVRQ
WKHKHDGHUulV
O +HUH,¦PWRJJOLQJWKHpressedFODVVRQWKHKHDGHUleftButton
ft
<4
r«
3
P
a
3
o
r:
I
£
]
31
iiji
i fliii
*f
T II Ifill
ill!Ill
Ilf ||1
I
:I
Is
+
9
J
)LJXUH7KH0HQXEXWWRQKDVEHHQDGGHGWRWKHWRROEDUG\QDPLFDOO\XVLQJM4XHU\
:HKDYHQ¦WZULWWHQWKH&66IRUWKH pressedFODVV\HWVROHW¦VGRVRQRZ*REDFNWR
LSKRQHFVVDQGLQVHUWWKHIROORZLQJ
#header div.pressed {
-webkit-border-image: url(images/button_clicked.png) 0 8 0 8;
}
$V\RXFDQVHH,¦PVLPSO\VSHFLI\LQJDGLIIHUHQWLPDJHIRUWKHEXWWRQERUGHULWKDSSHQV
WREHVOLJKWO\GDUNHU7KLVZLOODGGDWZRVWDWHHIIHFWWRWKHEXWWRQWKDWVKRXOGPDNH
LWHYLGHQWWRWKHXVHUWKDWWKHEXWWRQFDQERWKVKRZDQGKLGHWKHPHQX)LJXUH
5
*
-
i
*•
3
n
L
I
U 1i
1
. I
l! i
)LJXUH7KH0HQXEXWWRQGLVSOD\VGDUNHUZKHQLWKDVEHHQSUHVVHGWRGLVSOD\WKHPHQXRSWLRQV

ch2-screenshots-page.html
Menu Jonathan Stark
About
Blog
Contact
Resources
Quick Question
Author Assistance U
Consulting Clinic
On Call
Development
Migration
About
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.
Jonathan is the author of the book Web

Publishing with PHP and FileMaker 9. is a
regular speaker at the FileMaker Developer
Conference, and is both a PHP and FileMaker
certified developer.
He is quoted frequently in the media, and is a
technical editor for both phplarchitect and
)LJXUH$WDOOYLHZRIWKHFRPSOHWHGEDVLFL3KRQH&66
What You’ve Learned

,QWKLVFKDSWHU,FRYHUHGWKHEDVLFVRIFRQYHUWLQJDQH[LVWLQJZHESDJHWRDPRUHL3KRQH
IULHQGO\IRUPDW,HYHQXVHGDELWRIG\QDPLF+70/WRVKRZDQGKLGHWKHQDYLJDWLRQ
SDQHOV,QWKHQH[WFKDSWHU,¦OOEXLOGRQWKHVHH[DPSOHVZKLOHLQWURGXFLQJVRPHPRUH
DGYDQFHG-DYD6FULSWFRQFHSWV¢LQSDUWLFXODUVRPH\XPP\$MD[JRRGQHVV
CHAPTER 3
Advanced iPhone Styling
,QRXUTXHVWWREXLOGDQL3KRQHDSSZLWKRXW2EMHFWLYH&ZH¦YHVRIDUOHDUQHGKRZWR
XVH&66WRVW\OHDFROOHFWLRQRI+70/SDJHVWRORRNOLNHDQL3KRQHDSS,QWKLVFKDSWHU
ZH¦OOOD\WKHJURXQGZRUNWRPDNHWKRVHVDPHSDJHVEHKDYHOLNHDQL3KRQHDSS6SH
FLILFDOO\ZH¦OOGLVFXVVXVLQJ$MD[WRWXUQDIXOOZHEVLWHLQWRDVLQJOHSDJHDSSKRZWR
FUHDWHDEDFNEXWWRQZLWKKLVWRU\XVLQJ-DYD6FULSWDQGKRZWRWDNHDGYDQWDJHRIWKH
:HE&OLSLFRQDQGIXOOVFUHHQPRGHIHDWXUHVRIWKHL3KRQHWRODXQFK\RXUDSSZLWKRXW
0RELOH6DIDULLQWUXGLQJXSRQWKHXVHUH[SHULHQFH
Adding a Touch of Ajax

7KHWHUP$MD[KDVEHFRPHVXFKDEX]]ZRUGWKDW,¦PQRWHYHQVXUH,NQRZZKDWLW
PHDQVDQ\PRUH)RUWKHSXUSRVHVRIWKLVERRN,¦PJRLQJWRXVH$MD[WRUHIHUWRWKH
WHFKQLTXHRIXVLQJ-DYD6FULSWWRVHQGUHTXHVWVWRDZHEVHUYHUZLWKRXWUHORDGLQJWKH
FXUUHQWSDJHHJWRUHWULHYHVRPH+70/VXEPLWDIRUPDQGVRRQ7KLVDSSURDFK
PDNHVIRUDYHU\VPRRWKXVHUH[SHULHQFHEXWGRHVUHTXLUHWKDW\RXUHLQYHQWDORWRI
ZKHHOV
)RUH[DPSOHLI\RXDUHORDGLQJH[WHUQDOSDJHVG\QDPLFDOO\WKHEURZVHUZLOOQRWJLYH
DQ\LQGLFDWLRQRISURJUHVVRUHUURUVWRWKHXVHUV)XUWKHUPRUHWKHEDFNEXWWRQZLOOQRW
ZRUNDVH[SHFWHGXQOHVV\RXWDNHSDLQVWRVXSSRUWLW,QRWKHUZRUGV\RXKDYHWRGRD
ORWRIZRUNWRPDNHDVZHHW$MD[DSS(YHQVRWKHUHDUHVRPHYHU\JRRGUHDVRQVWRJR
WRWKHWURXEOH,QSDUWLFXODULWRSHQVWKHGRRUWRFUHDWLQJL3KRQHDSSVWKDWFDQUXQIXOO
VFUHHQ£)XOO6FUHHQ0RGH¤RQSDJHDQGHYHQRIIOLQH&KDSWHU
Traffic Cop
)RUP\QH[WVHULHVRIH[DPSOHV,¦PJRLQJWRZULWHDVLQJOHSDJHFDOOHGLSKRQHKWPOWKDW
ZLOOVLWLQIURQWRIDOORIWKHVLWH¦VRWKHUSDJHVDQGZLOOKDQGOHUHTXHVWVVRUWRIOLNHD
WUDIILFFRS+HUH¦VKRZLWZRUNV2QILUVWORDGLSKRQHKWPOZLOOSUHVHQWWKHXVHUZLWK
DQLFHO\IRUPDWWHGYHUVLRQRIWKHVLWHQDYLJDWLRQ,¦OOWKHQXVHM4XHU\WR£KLMDFN¤WKH
29
onclickDFWLRQVRIWKH navOLQNVVRWKDWZKHQWKHXVHUFOLFNVRQRQHWKHEURZVHUSDJH
ZLOOQRWQDYLJDWHWRWKHWDUJHWOLQN5DWKHUM4XHU\ZLOOORDGDSRUWLRQRIWKH+70/
IURPWKHUHPRWHSDJHDQGGHOLYHUWKHGDWDWRWKHXVHUE\XSGDWLQJWKHFXUUHQWSDJH,¦OO
VWDUWZLWKWKHPRVWEDVLFIXQFWLRQDOYHUVLRQRIWKHFRGHDQGLPSURYHLWDVZHJRDORQJ
7KH+70/IRUWKHLSKRQHKWPOZUDSSHUSDJHLVH[WUHPHO\VLPSOHVHH([DPSOH
,QWKHheadVHFWLRQ,VHWWKHtitleDQGviewportRSWLRQVDQGLQFOXGHOLQNVWRDVW\OHVKHHW
LSKRQHFVV DQG WZR -DYD6FULSW ILOHV MTXHU\MV DQG D FXVWRP -DYD6FULSW ILOH QDPHG
LSKRQHMV
)RUPRUHLQIRUPDWLRQRQZKHUHWRJHWMTXHU\MVDQGZKDWWRGRZLWKLW
VHH£,QWURWR-DYD6FULSW¤RQSDJH
m
UP,
7KHERG\MXVWKDVWZRdivFRQWDLQHUVDKHDGHUZLWKWKHLQLWLDOWLWOHLQDQh1WDJDQGDQ
HPSW\divFRQWDLQHUZKLFKZLOOHQGXSKROGLQJ+70/VQLSSHWVUHWULHYHGIURPRWKHU
SDJHV
([DPSOH7KLVVLPSOH+70/ZUDSSHUPDUNXSZLOOVLWLQIURQWRIDOOWKHVLWH¦VRWKHUSDJHV
<html>
<head>
<title>Jonathan Stark</title>
<meta name="viewport" content="user-scalable=no, width=device-width" />
<link rel="stylesheet" href="iphone.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="iphone.js"></script>
</head>
<body>
<div id="header"><h1>Jonathan Stark</h1></div>
<div id="container"></div>
</body>
</html>
0RYLQJRQWRWKHLSKRQHFVVILOH\RXFDQVHHLQ([DPSOHWKDW,¦YHUHVKXIIOHGVRPH
RIWKHSURSHUWLHVIURPSUHYLRXVH[DPSOHVHJVRPHRIWKH#header h1SURSHUWLHVKDYH
EHHQPRYHGXSWR #header2YHUDOOWKRXJKHYHU\WKLQJVKRXOGORRNIDPLOLDULIQRW
SOHDVHUHYLHZ&KDSWHU
([DPSOH7KHEDVH&66IRUWKHSDJHLVMXVWDVOLJKWO\UHVKXIIOHGYHUVLRQRISUHYLRXVH[DPSOHV
body {
background-color: #ddd;
color: #222;
font-family: Helvetica;
font-size: 14px;
margin: 0;
padding: 0;
}
#header {
30 | Chapter 3:ಗAdvanced iPhone Styling
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;
}
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;
}
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;
}
#content a {
color: blue;
}
7KH-DYD6FULSWLQLSKRQHMVLVZKHUHDOOWKHPDJLFKDSSHQVLQWKLVH[DPSOH3OHDVHUHIHU
WR([DPSOHDV,JRWKURXJKLWOLQHE\OLQH
Traffic Cop | 31
..
0..4ÿ
4
7KLV-DYD6FULSWORDGVDGRFXPHQWFDOOHGLQGH[KWPODQGZLOOQRWZRUN
ZLWKRXWLW<RXVKRXOGUHXVHWKH+70/ILOHIURP&KDSWHUEHLQJVXUH
"v WR VDYH LW DV LQGH[KWPO LQ WKH VDPH GLUHFWRU\ DV WKH LSKRQHKWPO \RX
FUHDWHGHDUOLHULQWKLVFKDSWHU+RZHYHUQRQHRIWKHOLQNVLQLWZLOOZRUN
XQOHVVWKHWDUJHWVRIWKHOLQNVDFWXDOO\H[LVW<RXFDQFUHDWHWKHVHILOHV
\RXUVHOIRUGRZQORDGWKHH[DPSOHFRGHIURPWKHERRN¦VZHEVLWH&UH
DWLQJDERXWKWPOEORJKWPODQG FRQVXOWLQJFOLQLFKWPOZLOOJLYH\RXD
IHZOLQNVWRSOD\ZLWK7RGRVRMXVWGXSOLFDWHLQGH[KWPODIHZWLPHV
DQG FKDQJH WKH ILOHQDPH RI HDFK FRS\ WR PDWFK WKH UHODWHG OLQN )RU
DGGHGHIIHFW\RXFDQFKDQJHWKHFRQWHQWRIWKH h2WDJLQHDFKILOHWR
PDWFK WKH ILOHQDPH )RU H[DPSOH WKH h2 LQ EORJKWPO ZRXOG EH
<h2>Blog</h2>
([DPSOH7KLVELWRI-DYD6FULSWLQLSKRQHMVFRQYHUWVWKHOLQNVRQWKHSDJHWR$MD[UHTXHVWV
$(document).ready(function(){ O
loadPage();
});
function loadPage(url) {0
if (url == undefined) {
$('#container').load('index.html #header ul', hijackLinks);0
} else {
$('#container').load(url + ' #content', hijackLinks);O
}
}
function hijackLinks() {0
$('#container a').click(function(e){ o
e.preventDefault(); o
loadPage(e.target.href); o
});
}
o +HUH ,¦P XVLQJ M4XHU\¦V GRFXPHQW UHDG\ IXQFWLRQ WR KDYH WKH EURZVHU UXQ WKH
loadPage()IXQFWLRQZKHQWKH'20LVFRPSOHWH
0 7KHloadPage()IXQFWLRQDFFHSWVDVLQJOHSDUDPHWHUFDOOHGurlDQGWKHQFKHFNVRQ
WKHQH[WOLQHZKHWKHUDYDOXHKDVEHHQVHQW
0 ,IDYDOXHLVQRWVHQWLQWRWKHIXQFWLRQurlZLOOEHXQGHILQHGDQGWKLVOLQHZLOOH[HFXWH
7KLVOLQHDQGWKHIROORZLQJDUHH[DPSOHVRIM4XHU\¦V load()IXQFWLRQ7KH load()
IXQFWLRQLVH[FHOOHQWIRUDGGLQJTXLFNDQGGLUW\$MD[IXQFWLRQDOLW\WRDSDJH,IWKLV
OLQHZHUHWUDQVODWHGLQWR(QJOLVKLWZRXOGUHDG£*HWDOORIWKHulHOHPHQWVIURPWKH
#headerHOHPHQWRI index.htmlDQGLQVHUWWKHPLQWRWKH #containerHOHPHQWRIWKH
FXUUHQW SDJH :KHQ \RX¦UH GRQH UXQ WKH hijackLinks() IXQFWLRQ¤ 1RWH WKDW
LQGH[KWPOUHIHUVWRWKHKRPHSDJHRIWKHVLWH,I\RXUKRPHSDJHLVQDPHGGLIIHUHQWO\
\RX¦GXVHWKDWILOHQDPHKHUHLQVWHDG
o 7KLVOLQHLVH[HFXWHGLIWKH urlSDUDPHWHUKDVDYDOXH,WVD\VLQHIIHFW£*HWWKH
#contentHOHPHQWIURPWKH urlWKDWZDVSDVVHGLQWRWKH loadPages()IXQFWLRQDQG
LQVHUWLWLQWRWKH#containerHOHPHQWRIWKHFXUUHQWSDJH:KHQ\RX¦UHGRQHUXQWKH
hijackLinks()IXQFWLRQ¤
o 2QFHWKHload()IXQFWLRQKDVFRPSOHWHGWKH#containerHOHPHQWRIWKHFXUUHQWSDJH
ZLOO FRQWDLQ WKH +70/ VQLSSHW WKDW ZDV UHWULHYHG 7KHQ load() ZLOO UXQ WKH
hijackLinks()IXQFWLRQ
o 2QWKLVOLQH hijackLinks()ILQGVDOORIWKHOLQNVWKDWDUHLQWKHQHZ+70/DQG
ELQGVDFOLFNKDQGOHUWRWKHPXVLQJWKHOLQHVRIFRGHWKDWIROORZ&OLFNKDQGOHUVDUH
DXWRPDWLFDOO\SDVVHGDQHYHQWREMHFWZKLFK,¦PFDSWXULQJDVWKHIXQFWLRQSDUDPHWHU
e 7KH HYHQW REMHFW RI D FOLFNHG OLQN FRQWDLQV WKH 85/ RI WKH UHPRWH SDJH LQ
e.target.href
© 1RUPDOO\DZHEEURZVHUZLOOQDYLJDWHWRDQHZSDJHZKHQDOLQNLVFOLFNHG7KLV
QDYLJDWLRQUHVSRQVHLVFDOOHGWKH£GHIDXOWEHKDYLRU¤RIWKHOLQN6LQFHZHDUHKDQGOLQJ
FOLFNVDQGORDGLQJSDJHVPDQXDOO\ZHQHHGWRSUHYHQWWKLVGHIDXOWEHKDYLRU2QWKLV
OLQH,¦YHGRQHVRE\FDOOLQJWKHEXLOWLQpreventDefault()PHWKRGRIWKHHYHQWREMHFW
,I,KDGOHIWWKDWOLQHRXWWKHEURZVHUZRXOGKDYHGXWLIXOO\OHIWWKHFXUUHQWSDJHDQG
QDYLJDWHGWRWKH85/RIWKHFOLFNHGOLQN
o :KHQWKHXVHUFOLFNV,SDVVWKH85/RIWKHUHPRWHSDJHWRWKHloadPage()IXQFWLRQ
DQGWKHF\FOHVWDUWVDOORYHUDJDLQ
0
2QHRIP\IDYRULWHWKLQJVDERXW-DYD6FULSWLVWKDW\RXFDQSDVVDIXQF
WLRQDVDSDUDPHWHUWRDQRWKHUIXQFWLRQ$OWKRXJKWKLVORRNVZHLUGDW
A' ILUVWLW¦VH[WUHPHO\SRZHUIXODQGDOORZV\RXWRPDNH\RXUFRGHPRGXODU
UP,
DQG UHXVDEOH ,I \RX¦G OLNH WR OHDUQ PRUH \RX VKRXOG FKHFN RXW
-DYD6FULSW7KH*RRG3DUWVE\'RXJODV&URFNIRUG2¦5HLOO\,QIDFWLI
\RXDUHZRUNLQJZLWK-DYD6FULSW\RXVKRXOGFKHFNRXWHYHU\WKLQJE\
'RXJODV&URFNIRUG\RX¦OOEHJODG\RXGLG
&OLFNKDQGOHUVGRQRWUXQZKHQWKHSDJHILUVWORDGVWKH\UXQZKHQWKHXVHUKDVUHDG
VRPHVWXIIRQWKHSDJHDQGGHFLGHVWRFOLFNDOLQN$VVLJQLQJFOLFNKDQGOHUVLVOLNHVHWWLQJ
ERRE\WUDSV\RXGRVRPHLQLWLDOVHWXSZRUNIRUVRPHWKLQJWKDWPD\RUPD\QRWEH
WULJJHUHGODWHU
0
,W¦VZRUWKWDNLQJDIHZPLQXWHVWRUHDGXSRQWKHSURSHUWLHVRIWKHHYHQW
REMHFWWKDW-DYD6FULSWFUHDWHVLQUHVSRQVHWRXVHUDFWLRQVLQWKHEURZVHU
a,:' $JRRGUHIHUHQFHLVORFDWHGDWKWWSZZZZVFKRROVFRPKWPOGRPGRP
BREMBHYHQWDVS
Traffic Cop | 33
Simple Bells and Whistles
:LWKWKLVWLQ\ELWRI+70/&66DQG-DYD6FULSWZHKDYHHVVHQWLDOO\WXUQHGDQHQWLUH
ZHEVLWHLQWRDVLQJOHSDJHDSSOLFDWLRQ+RZHYHULWVWLOOOHDYHVTXLWHDELWWREHGHVLUHG
/HW¦VVOLFNWKLQJVXSDELW
6LQFHZHDUHQRWDOORZLQJWKHEURZVHUWRQDYLJDWHIURPSDJHWRSDJHWKHXVHUZLOOQRW
VHHDQ\LQGLFDWLRQRISURJUHVVZKLOHGDWDLVORDGLQJ:HQHHGWRSURYLGHVRPHIHHGEDFN
WROHWXVHUVNQRZWKDWVRPHWKLQJLVLQIDFWKDSSHQLQJ:LWKRXWWKLVIHHGEDFNXVHUV
ZLOOZRQGHULIWKH\DFWXDOO\FOLFNHGWKHOLQNRUPLVVHGLWDQGZLOORIWHQVWDUWFOLFNLQJDOO
RYHUWKHSODFHLQIUXVWUDWLRQ7KLVFDQOHDGWRLQFUHDVHGVHUYHUORDGDQGDSSOLFDWLRQ
LQVWDELOLW\LHFUDVKLQJ
,I\RXDUHWHVWLQJWKLVZHEDSSOLFDWLRQRQDORFDOQHWZRUNWKHQHWZRUN
VSHHGVZLOOEHVRIDVW\RXZRQ¦WHYHUVHHWKHSURJUHVVLQGLFDWRU,I\RX
a,:' DUHXVLQJ0DF26;\RXFDQVORZDOOLQFRPLQJZHEWUDIILFE\W\SLQJD
FRXSOH RI ipfw FRPPDQGV DW WKH WHUPLQDO )RU H[DPSOH WKHVH FRP
PDQGVZLOOVORZDOOZHEWUDIILFWRNLORE\WHVSHUVHFRQG
sudo ipfw pipe 1 config bw 4KByte/s
sudo ipfw add 100 pipe 1 tcp from any to me 80
,I\RXDUHXVLQJWKH6DIDULGHVNWRSEURZVHUWRYLHZWKHSDJHV\RX¦OOQHHG
WRXVH\RXU0DF¦VKRVWQDPHRUH[WHUQDO,3DGGUHVVLQWKH85/IRUH[
DPSOHmymac.localUDWKHUWKDQ localhost:KHQ\RX¦UHGRQHWHVWLQJ
GHOHWHWKHUXOHZLWK sudo ipfw delete 100\RXFDQGHOHWHDOOFXVWRP
UXOHVZLWKipfw flush
7KDQNVWRM4XHU\SURYLGLQJWKLVVRUWRIIHHGEDFNRQO\WDNHVWZROLQHVRIFRGH:H¦OO
MXVWDSSHQGDORDGLQJdivWRWKHERG\ZKHQloadPage()VWDUWVDQGUHPRYHWKHORDGLQJ
div ZKHQ hijackLinks() LV GRQH ([DPSOH VKRZV D PRGLILHG YHUVLRQ RI ([DP
SOH7KHOLQHV\RXQHHGWRDGGWRLSKRQHMVDUHVKRZQLQEROG
([DPSOH$GGLQJDVLPSOHSURJUHVVLQGLFDWRUWRWKHSDJH
$(document).ready(function(){
loadPage();
});
function loadPage(url) {
$('body').append('<div id="progress">Loading...</div>');
$('#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();
}
6HH([DPSOHIRUWKH&66WKDWQHHGVWREHDGGHGWRLSKRQHFVVWRVW\OHWKHSURJUHVV
div7KHUHVXOWFDQEHVHHQLQ)LJXUH
-.-.ATI! V TMMt
ponMnansUrlcomi ip G
Jonathan Stark
About
Blog
Con
Resources
Quick Question
Author Assistance
»» 1
)LJXUH:LWKRXWDSURJUHVVLQGLFDWRURIVRPHNLQG\RXUDSSZLOOVHHPXQUHVSRQVLYHDQG\RXU
XVHUVZLOOJHWIUXVWUDWHG
([DPSOH&66DGGHGWRLSKRQHFVVXVHGWRVW\OHWKHSURJUHVVLQGLFDWRU
#progress {
-webkit-border-radius: 10px;
background-color: rgba(0,0,0,.7);
color: white;
font-size: 18px;
font-weight: bold;
height: 80px;
left: 60px;
line-height: 80px;
margin: 0 auto;
position: absolute;
text-align: center;
top: 120px;
width: 200px;
}
0\VLWHKDSSHQVWRKDYHDVLQJOHh2DWWKHEHJLQQLQJRIHDFKSDJHWKDWZRXOGPDNHD
QLFHSDJHWLWOHVHH)LJXUH<RXFDQVHHWKLVLQWKH+70/VRXUFHVKRZQLQ&KDS
WHU7REHPRUHL3KRQHHVTXH,¦PJRLQJWRSXOOWKDWWLWOHRXWRIWKHFRQWHQWDQGSXW
LWLQWKHKHDGHUVHH)LJXUH$JDLQM4XHU\WRWKHUHVFXH\RXFDQMXVWDGGWKUHH
Simple Bells and Whistles | 35
|il!1 1 ra
u
2
if
=
o
l
£
5
s
LI
3
Ji nSillI
I
W
?!
?||
+
B
o
r
)LJXUH%HIRUHPRYLQJWKHSDJHKHDGLQJWRWKHWRROEDU
U
2
4
L
if
a
I
«
.!iim
j\ P Hji
ii|i i p ! ;i
(Q I
B
o
r
)LJXUHDQGDIWHUPRYLQJWKHSDJHKHDGLQJWRWKHWRROEDU
OLQHV WR WKH hijackLinks() IXQFWLRQ WR PDNH LW KDSSHQ ([DPSOH VKRZV WKH
hijackLinksIXQFWLRQZLWKWKHVHFKDQJHV
([DPSOH8VLQJWKHKIURPWKHWDUJHWSDJHDVWKHWRROEDUWLWOH
e.preventDefault();
loadPage(e.target.href);
});
var title = $('h2').html() || 'Hello!';
$('h1').html(title);
$('h2').remove();
}
1RWHWKDW,DGGHGWKHWLWOHOLQHVEHIRUHWKHOLQHWKDWUHPRYHVWKHSURJUHVV
LQGLFDWRU,OLNHWRUHPRYHWKHSURJUHVVLQGLFDWRUDVWKHYHU\ODVWDFWLRQ
a,:' EHFDXVH,WKLQNLWPDNHVWKHDSSOLFDWLRQIHHOPRUHUHVSRQVLYH
7KHGRXEOHSLSH||LQWKHILUVWOLQHRILQVHUWHGFRGHVKRZQLQEROGLVWKH-DYD6FULSW

ORJLFDORSHUDWRU257UDQVODWHGLQWR(QJOLVKWKDWOLQHZRXOGUHDG£6HWWKHWLWOHYDULDEOH
WR WKH +70/ FRQWHQWV RI WKH h2 HOHPHQW RU WR WKH VWULQJ ¥+HOOR¦ LI WKHUH LV QR h2
HOHPHQW¤7KLVLVLPSRUWDQWEHFDXVHWKHILUVWSDJHORDGZRQ¦WFRQWDLQDQh2DVZHDUH
MXVWJUDEELQJWKHQDYulV
7KLVSRLQWSUREDEO\QHHGVVRPHFODULILFDWLRQ:KHQXVHUVILUVWORDGWKH
LSKRQHKWPO85/WKH\DUHRQO\JRLQJWRVHHWKHRYHUDOOVLWHQDYLJDWLRQ
m
UP, HOHPHQWVDVRSSRVHGWRDQ\VLWHFRQWHQW7KH\ZRQ¦WVHHDQ\VLWHFRQWHQW
XQWLOWKH\WDSDOLQNRQWKLVLQLWLDOQDYLJDWLRQSDJH
$IHZSDJHVRQP\VLWHKDYHWLWOHVWKDWDUHORQJHUWKDQFDQILWLQWKHKHDGHUEDU)LJ
XUH,FRXOGMXVWOHWWKHWH[WEUHDNRQWRPRUHWKDQRQHOLQHEXWWKDWZRXOGQRWEH
YHU\L3KRQHLVK5DWKHU,¦YHXSGDWHGWKH#header h1VW\OHVVXFKWKDWORQJWH[WZLOOEH
WUXQFDWHGZLWKDWUDLOLQJHOOLSVLVVHH)LJXUHDQG([DPSOH7KLVPLJKWEHP\
IDYRULWHOLWWOHNQRZQ&66WULFN
([DPSOH$GGLQJDQHOOLSVLVWRWH[WWKDWLVWRRORQJIRULWVFRQWDLQHU
#header h1 {
color: #222;
font-size: 20px;
font-weight: bold;
margin: 0 auto;
padding: 10px 0;
text-align: center;
max-width: 160px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
fib
II
2
8
=
III o
S‘lill 'M 1 1
r i|?f i
1 1
mi
' i!ll
1
iii
+
3
Wll
* 0
r
1
)LJXUH7H[WZUDSSLQJLQWKHWRROEDULVQRWYHU\L3KRQHLVK
III! I
>
11 f
Hiif !!Ijiiff ij!
f
til 1 ||if
ill I »i
(Q Inm
rib ri'i
B
0
)LJXUHEXWZHFDQEHDXWLI\LWZLWKD&66HOOLSVLV
+HUH¦VWKHUXQGRZQmax-width: 160pxLQVWUXFWVWKHEURZVHUQRWWRDOORZWKHh1HOHPHQW
WRJURZZLGHUWKDQS[7KHQoverflow: hiddenLQVWUXFWVWKHEURZVHUWRFKRSRII
DQ\FRQWHQWWKDWH[WHQGVRXWVLGHRIWKHHOHPHQWERUGHUV1H[W white-space: nowrap
SUHYHQWVWKHEURZVHUIURPEUHDNLQJWKHOLQHLQWRWZR:LWKRXWWKLVOLQHWKHh1ZRXOG
MXVWJHWWDOOHUWRDFFRPPRGDWHWKHWH[WDWWKHGHILQHGZLGWK)LQDOO\ text-overflow:
ellipsisDSSHQGVWKUHHGRWVWRWKHHQGRIDQ\FKRSSHGRIIWH[WWRLQGLFDWHWRXVHUVWKDW
WKH\DUHQRWVHHLQJWKHHQWLUHVWULQJ
/HW¦VVD\\RXKDYHDQ$ERXWSDJHWKDWLVORQJHUWKDQWKHYLHZDEOHDUHDRQWKHL3KRQH
7KHXVHUYLVLWVWKHSDJHVFUROOVGRZQWRWKHERWWRPDQGFOLFNVRQDOLQNWR\RXU&RQWDFW
SDJH,I\RXKDYHPRUHWKDQDVFUHHQIXORIWH[WRQ\RXU&RQWDFWSDJHWKHQHZGDWDZLOO
DSSHDUZLWKWKHZLQGRZVWLOOVFUROOHGDOOWKHZD\WRWKHERWWRP
7HFKQLFDOO\WKLVPDNHVVHQVHEHFDXVHZHDUHQRWDFWXDOO\OHDYLQJWKHFXUUHQWVFUROOHG
SDJHEXWLW¦VFHUWDLQO\FRQIXVLQJIRUWKHXVHU7RUHFWLI\WKHVLWXDWLRQ,KDYHDGGHGD
scrollTo()FRPPDQGWRWKHloadPage()IXQFWLRQVHH([DPSOH
1RZZKHQHYHUDXVHUFOLFNVDOLQNWKHSDJHZLOOILUVWMXPSWRWKHWRS7KLVKDVWKH
DGGHGEHQHILWRIHQVXULQJWKDWWKHORDGLQJJUDSKLFLVYLVLEOHLIWKHXVHUFOLFNVDOLQNDW
WKHERWWRPRIDORQJSDJH
([DPSOH,W¦VDJRRGLGHDWRVFUROOEDFNWRWKHWRSZKHQDXVHUQDYLJDWHVWRDQHZSDJH
$('body').append('<div id="progress">Loading...</div>');
scrollTo(0,0);
$('#container').load('index.html #header ul', hijackLinks);
} else {
$('#container').load(url + ' #content', hijackLinks);
}
}
/LNHPRVWVLWHVPLQHKDVOLQNVWRH[WHUQDOSDJHVLHSDJHVKRVWHGRQRWKHUGRPDLQV
,GRQ¦WZDQWWRKLMDFNWKHVHH[WHUQDOOLQNVEHFDXVHLWZRXOGQ¦WPDNHVHQVHWRLQMHFWWKHLU
+70/LQWRP\L3KRQHVSHFLILFOD\RXW,Q([DPSOH,KDYHDGGHGDFRQGLWLRQDOWKDW
FKHFNVWKH85/IRUWKHH[LVWHQFHRIP\GRPDLQQDPH,ILW¦VIRXQGWKHOLQNLVKLMDFNHG
DQGWKHFRQWHQWLVORDGHGLQWRWKHFXUUHQWSDJHWKDWLV$MD[LVLQHIIHFW,IQRWWKH
EURZVHUZLOOQDYLJDWHWRWKH85/QRUPDOO\
<RXPXVWFKDQJHjonathanstark.comWRWKHDSSURSULDWHGRPDLQRUKRVW
QDPHIRU\RXUZHEVLWHRUWKHOLQNVWRSDJHVRQ\RXUZHEVLWHZLOOQR
ORQJHUEHKLMDFNHG
([DPSOH<RXFDQDOORZH[WHUQDOSDJHVWRORDGQRUPDOO\E\FKHFNLQJWKHGRPDLQQDPHRIWKH85/
var url = e.target.href;
if (url.match(/jonathanstark.com/)) {
e.preventDefault();
loadPage(url);
}
});
$('h2').remove();
}
I
'V 7KHurl.matchIXQFWLRQXVHVDODQJXDJHUHJXODUH[SUHVVLRQVWKDWLVRI
WHQHPEHGGHGZLWKLQRWKHUSURJUDPPLQJODQJXDJHVVXFKDV-DYD6FULSW
ib: 3+3DQG3HUO$OWKRXJKWKLVUHJXODUH[SUHVVLRQLVVLPSOHPRUHFRP
SOH[H[SUHVVLRQVFDQEHDELWLQWLPLGDWLQJEXWDUHZHOOZRUWKEHFRPLQJ
IDPLOLDUZLWK0\IDYRULWHUHJH[SDJHLVORFDWHGDWKWWSZZZUHJXODU
H[SUHVVLRQVLQIRMDYDVFULSWH[DPSOHKWPO
Roll Your Own Back Button

7KHHOHSKDQWLQWKHURRPDWWKLVSRLQWLVWKDWWKHXVHUKDVQRZD\WRQDYLJDWHEDFNWR
SUHYLRXVSDJHVUHPHPEHUWKDWZH¦YHKLMDFNHGDOOWKHOLQNVVRWKH6DIDULSDJHKLVWRU\
ZRQ¦WZRUN/HW¦VDGGUHVVWKDWE\DGGLQJDEDFNEXWWRQWRWKHWRSOHIWFRUQHURIWKH
VFUHHQ)LUVW,¦OOXSGDWHWKH-DYD6FULSWDQGWKHQ,¦OOGRWKH&66
$GGLQJDVWDQGDUGL3KRQHL]HGEDFNEXWWRQWRWKHDSSPHDQVNHHSLQJWUDFNRIWKHXVHU¦V
FOLFNKLVWRU\7RGRWKLVZH¦OOKDYHWR$VWRUHWKH85/RIWKHSUHYLRXVSDJHVRZH
NQRZZKHUHWRJREDFNWRDQG%VWRUHWKHWLWOHRIWKHSUHYLRXVSDJHVRZHNQRZZKDW
ODEHOWRSXWRQWKHEDFNEXWWRQ
$GGLQJWKLVIHDWXUHWRXFKHVRQPRVWRIWKH-DYD6FULSWZH¦YHZULWWHQVRIDULQWKLVFKDS
WHUVR,¦OOJRRYHUWKHHQWLUHQHZYHUVLRQRILSKRQHMVOLQHE\OLQHVHH([DPSOH
7KHUHVXOWZLOOORRNOLNH)LJXUH
.toAIAT ?
• Of
ponaffianaterfc com/ ip G
About
and aumtK N* ccnsutenq tern. Jonaman Star*

Consufmg me haa attracted dams Midi at
Step**. Turner BmedcasCng. and me PGA
To\M
Jonafun a Ihe author of me boo* Wat?
«a
speaker aref 4eMaser Dereicpcc
Cortorence. and n Oom a and
cemtod davetopec
Me A quoted toQuerthr m me mocAa. and A a

todncai color tor bom phptercfttect and
r< A/Maor magarmes The Wal
Journal hn» a TtaOng espenon
to me
A
• )
)LJXUH,WZRXOGQ¦WEHDQL3KRQHDSSZLWKRXWDJORVV\OHIWDUURZEDFNEXWWRQ
([DPSOH([SDQGLQJWKHH[LVWLQJ-DYD6FULSWH[DPSOHWRLQFOXGHVXSSRUWIRUDEDFNEXWWRQ
var hist = [];O
var startUrl = 'index.html';©
$(document).ready(function(){©
loadPage(startUrl);
});
$('body').append('<div id="progress">Loading...</div>');©
scrollTo(0,0);
if (url == startUrl) {©
var element = ' #header ul';
} else {
var element = ' #content';
}
$('#container').load(url + element, function(){G
$('h2').remove();
$('.leftButton').remove();G
hist.unshift({'url':url, 'title':title});©
if (hist.length > 1) {©
$('#header').append('<div class="leftButton">'+hist[1].title+'</div>');©
$('#header .leftButton').click(function(){©
var thisPage = hist.shift();©
var previousPage = hist.shift();
loadPage(previousPage.url);
});
}
$('#container a').click(function(e){©
var url = e.target.href;
if (url.match(/jonathanstark.com/)) {©
e.preventDefault();
loadPage(url);
}
});
});
}
O 2QWKLVOLQH,¦PLQLWLDOL]LQJDYDULDEOHQDPHG histDVDQHPSW\DUUD\6LQFH,¦YH
GHILQHGLWRXWVLGHRIDQ\IXQFWLRQVLWH[LVWVLQWKHJOREDOVFRSHDQGZLOOEHDYDLODEOH
HYHU\ZKHUHLQWKHSDJH1RWHWKDW,GLGQ¦WXVHWKHIXOOZRUGhistoryDVP\YDULDEOH
QDPH EHFDXVH WKDW LV D SUHGHILQHG REMHFW SURSHUW\ LQ -DYD6FULSW DQG VKRXOG EH
DYRLGHGLQ\RXURZQFRGH
© +HUH,¦PGHILQLQJWKHUHODWLYH85/RIWKHUHPRWHSDJHWRORDGZKHQWKHXVHUILUVW
YLVLWVLSKRQHKWPO<RXPLJKWUHFDOOIURPHDUOLHUH[DPSOHVWKDW,MXVWFKHFNHGIRUurl
== undefinedWRKDQGOHWKHILUVWSDJHORDGEXWLQWKLVH[DPSOHZHDUHJRLQJWRXVH
WKHVWDUWSDJHLQDIHZSODFHV7KHUHIRUHLWPDNHVVHQVHWRGHILQHLWJOREDOO\
G 7KLVOLQHDQGWKHQH[WPDNHXSWKHGRFXPHQWUHDG\IXQFWLRQGHILQLWLRQ1RWHWKDW
XQOLNHSUHYLRXVH[DPSOHV,¦PSDVVLQJWKHVWDUWSDJHWRWKHloadPage()IXQFWLRQ
© 2QWRWKH loadPage()IXQFWLRQ7KLVOLQHDQGWKHQH[WDUHYHUEDWLPIURPSUHYLRXV
H[DPSOHV
Roll Your Own Back Button | 41
© 7KLVif...elseVWDWHPHQWGHWHUPLQHVZKLFKHOHPHQWVWRORDGIURPWKHUHPRWHSDJH
)RUH[DPSOHLIZHZDQWWKHVWDUWSDJHZHJUDEWKHulVIURPWKHKHDGHURWKHUZLVH
ZHJUDEWKHFRQWHQWdiv
o 2QWKLVOLQHWKH85/SDUDPHWHUDQGWKHDSSURSULDWHVRXUFHHOHPHQWDUHFRQFDWHQ
DWHGDVWKHILUVWSDUDPHWHUSDVVHGWRWKHORDGIXQFWLRQ$VIRUWKHVHFRQGSDUDPHWHU
,¦PSDVVLQJ DQ DQRQ\PRXV IXQFWLRQ DQ XQQDPHGIXQFWLRQWKDWLVGHILQHGLQOLQH
GLUHFWO\$VZHJRWKURXJKWKHDQRQ\PRXVIXQFWLRQ\RX¦OOQRWLFHDVWURQJUHVHP
EODQFHWRWKHhijackLinks()IXQFWLRQZKLFKWKLVDQRQ\PRXVIXQFWLRQKDVUHSODFHG
)RUH[DPSOHWKHIROORZLQJWKUHHOLQHVDUHLGHQWLFDOWRSUHYLRXVH[DPSOHV
G 2QWKLVOLQH,¦PUHPRYLQJWKH.leftButtonREMHFWIURPWKHSDJH7KLVPLJKWVHHP
ZHLUGEHFDXVH,KDYHQ¦W\HWDGGHGLWWRWKHSDJHZH¦OOEHDGGLQJLWDFRXSOHVWHSV
GRZQ
O +HUH,¦PXVLQJWKHEXLOWLQunshiftPHWKRGRIWKH-DYD6FULSWDUUD\WRDGGDQREMHFW
WRWKHEHJLQQLQJRIWKH histDUUD\7KHREMHFW,¦PDGGLQJKDVWZRSURSHUWLHV url
DQG titleZKLFKDUHWKHWZRSLHFHVRILQIRUPDWLRQZHQHHGWRVXSSRUWWKHEDFN
EXWWRQGLVSOD\DQGEHKDYLRU
o 2QWKLVOLQH,¦PXVLQJWKHEXLOWLQlengthPHWKRGRIWKH-DYD6FULSWDUUD\WRILQGRXW
KRZPDQ\REMHFWVDUHLQWKHKLVWRU\DUUD\,IWKHUHLVRQO\RQHREMHFWLQWKHKLVWRU\
DUUD\LWPHDQVWKDWWKHXVHULVRQWKHILUVWSDJHDQGWKHUHIRUHZHGRQ¦WQHHGWR
GLVSOD\DEDFNEXWWRQ+RZHYHULIWKHUHLVPRUHWKDQRQHREMHFWLQWKHhistDUUD\
ZHQHHGWRDGGDEXWWRQWRWKHKHDGHU
© 1H[W,¦PDGGLQJWKDW .leftButton,PHQWLRQHGHDUOLHU7KHWH[WRIWKHEXWWRQZLOO
EHWKHVDPHDVWKHWLWOHRIWKHSDJHEHIRUHWKHFXUUHQWSDJHZKLFKLVZKDW,¦PDF
FHVVLQJZLWKWKH hist[1].titleFRGH-DYD6FULSWDUUD\VDUH]HUREDVHGVRWKHILUVW
LWHPLQWKHDUUD\WKHFXUUHQWSDJHKDVDQLQGH[RI,QRWKHUZRUGVLQGH[LVWKH
FXUUHQWSDJHLQGH[LVWKHSUHYLRXVSDJHLQGH[LVWKHSDJHEHIRUHWKDWDQGVRRQ
© ,QWKLVEORFNRIFRGH,¦PELQGLQJDQDQRQ\PRXVIXQFWLRQWRWKHFOLFNKDQGOHURIWKH
EDFNEXWWRQ5HPHPEHUFOLFNKDQGOHUFRGHH[HFXWHVZKHQWKHXVHUFOLFNVQRWZKHQ
WKHSDJHORDGV6RDIWHUWKHSDJHORDGVDQGWKHXVHUFOLFNVWRJREDFNWKHFRGHLQVLGH
WKLVIXQFWLRQZLOOUXQ
© 7KLVOLQHDQGWKHQH[WXVHWKHEXLOWLQshiftPHWKRGRIWKHDUUD\WRUHPRYHWKHILUVW
WZRLWHPVIURPWKHhistDUUD\DQGWKHODVWOLQHLQWKHIXQFWLRQVHQGVWKH85/RIWKH
SUHYLRXVSDJHWRWKHloadPage()IXQFWLRQ
© 7KHUHPDLQLQJOLQHVZHUHFRSLHGH[DFWO\IURPSUHYLRXVH[DPSOHVVR,ZRQ¦WUHKDVK
WKHPKHUH
© 7KLV LV WKH 85/ PDWFKLQJ FRGH LQWURGXFHG HDUOLHU LQ WKLV FKDSWHU 5HPHPEHU WR
UHSODFHjonathanstark.comZLWKSDUWRI\RXUZHEVLWH¦VGRPDLQRUKRVWQDPHRUQRQH
RIWKHORFDOOLQNVZLOOEHKLMDFNHGDQGORDGHGLQWRWKHSDJH
..
0..4ÿ
4
3OHDVH YLVLW KWWSZZZKXQORFNFRPEORJV0DVWHULQJB-DYDVFULSWB$U
UD\VIRUDIXOOOLVWLQJRI-DYD6FULSWDUUD\IXQFWLRQVZLWKGHVFULSWLRQVDQG
a,:' H[DPSOHV
1RZWKDWZHKDYHRXUEDFNEXWWRQDOOWKDWUHPDLQVLVWRSXUW\LWXSZLWKVRPH&66
VHH([DPSOH,VWDUWRIIE\VW\OLQJWKHWH[WZLWK font-weighttext-alignline-
heightcolorDQGtext-shadow,FRQWLQXHE\SODFLQJWKHdivSUHFLVHO\ZKHUH,ZDQWLW
RQWKHSDJHZLWKpositiontopDQGleft7KHQ,PDNHVXUHWKDWORQJWH[WRQWKHEXWWRQ
ODEHOZLOOWUXQFDWHZLWKDQHOOLSVLVXVLQJ max-width white-space overflowDQG text-
overflow)LQDOO\,DSSO\DJUDSKLFZLWKborder-widthDQG-webkit-border-image8Q
OLNHP\HDUOLHUERUGHULPDJHH[DPSOHWKLVLPDJHKDVDGLIIHUHQWZLGWKIRUWKHOHIWDQG
ULJKWERUGHUVEHFDXVHWKHLPDJHLVPDGHDV\PPHWULFDOE\WKHDUURZKHDGRQWKHOHIW
VLGH
0 Hfcÿ
'RQ¦WIRUJHWWKDW\RX¦OOQHHGDQLPDJHIRUWKLVEXWWRQ<RX¦OOQHHGWR
VDYHLWDVEDFNBEXWWRQSQJLQWKHLPDJHVIROGHUXQGHUQHDWKWKHIROGHU
m
UP, WKDW KROGV \RXU +70/ ILOH 6HH £$GGLQJ %DVLF %HKDYLRU ZLWK
M4XHU\¤ RQ SDJH IRU WLSV RQ ILQGLQJ RU FUHDWLQJ \RXU RZQ EXWWRQ
LPDJHV
([DPSOH$GGWKHIROORZLQJWRLSKRQHFVVWREHDXWLI\WKHEDFNEXWWRQZLWKDERUGHULPDJH
font-weight: bold;
text-align: center;
line-height: 28px;
color: white;
text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
position: absolute;
top: 7px;
left: 6px;
max-width: 50px;
overflow: hidden;
border-width: 0 8px 0 14px;
-webkit-border-image: url(images/back_button.png) 0 8 0 14;
}
%\GHIDXOW0RELOH6DIDULEULHIO\GLVSOD\VDWUDQVOXFHQWJUD\ER[RYHUFOLFNDEOHREMHFWV
WKDWKDYHEHHQWDSSHG)LJXUH6LQFHRXUEDFNEXWWRQLVQRWUHFWDQJXODUWKLVHIIHFW
ORRNVDOLWWOHODPHEXWUHPRYLQJLWLVHDV\DQGPDNHVWKHDSSORRNPXFKEHWWHU0RELOH
6DIDUL VXSSRUWV D SURSHUW\ FDOOHG -webkit-tap-highlight-color WKDW DOORZV \RX WR
FKDQJHWKHGHIDXOWWRZKDWHYHUFRORU\RXOLNH,ZDQWWRUHPRYHWKHKLJKOLJKWFRP
SOHWHO\ZKLFK,¦YHGRQHKHUHE\VHWWLQJWKHWDSKLJKOLJKWWRDIXOO\WUDQVSDUHQWFRORU
VHH([DPSOH
fljJa
J
p °> +
S
a
)LJXUH%\GHIDXOW0RELOH6DIDULGLVSOD\VDWUDQVOXFHQWJUD\ER[RYHUFOLFNDEOHREMHFWVWKDWKDYH
EHHQWDSSHG
([DPSOH$GGWKHIROORZLQJWRLSKRQHFVVWRUHPRYHWKHGHIDXOWWDSKLJKOLJKWIURP0RELOH6DIDUL
font-weight: bold;
text-align: center;
line-height: 28px;
color: white;
text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
position: absolute;
top: 7px;
left: 6px;
max-width: 50px;
overflow: hidden;
border-width: 0 8px 0 14px;
-webkit-border-image: url(images/back_button.png) 0 8 0 14;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
,QWKHFDVHRIWKHEDFNEXWWRQWKHUHFDQEHDWOHDVWDVHFRQGRUWZRRIGHOD\EHIRUHWKH
FRQWHQWIURPWKHSUHYLRXVSDJHDSSHDUV7RDYRLGIUXVWUDWLRQ,ZDQWWKHEXWWRQWRORRN
FOLFNHGWKHLQVWDQWLW¦VWDSSHG,QDGHVNWRSEURZVHUWKLVZRXOGEHDVLPSOHSURFHVV
\RX¦GMXVWDGGDGHFODUDWLRQWR\RXU&66XVLQJWKH :activeSVHXGRFODVVWRVSHFLI\DQ
DOWHUQDWHVW\OHIRUWKHREMHFWWKDWZDVFOLFNHG,GRQ¦WNQRZZKHWKHULW¦VDEXJRUD
IHDWXUHEXWWKLVDSSURDFKGRHVQRWZRUNRQWKHL3KRQHWKH:activeVW\OHLVLJQRUHG
, WR\HG DURXQG ZLWK FRPELQDWLRQV RI :active DQG :hover ZKLFK EURXJKW PH VRPH
VXFFHVVZLWKQRQ$MD[DSSV+RZHYHUZLWKDQ$MD[DSSOLNHWKHRQHZHDUHXVLQJKHUH

WKH :hoverVW\OHLVVWLFN\LHWKHEXWWRQDSSHDUVWRUHPDLQ£FOLFNHG¤HYHQDIWHUWKH
ILQJHULVUHPRYHG
)RUWXQDWHO\WKHIL[LVSUHWW\VLPSOH,XVHM4XHU\WRDGGWKHFODVVclickedWRWKHEXWWRQ
ZKHQWKHXVHUWDSVLW,¦YHRSWHGWRDSSO\DGDUNHUYHUVLRQRIWKHEXWWRQLPDJHWRWKH
EXWWRQLQWKHH[DPSOHVHH)LJXUHDQG([DPSOH<RX¦OOQHHGWRPDNHVXUH
\RXKDYHDEXWWRQLPDJHFDOOHGEDFNBEXWWRQBFOLFNHGSQJLQWKHLPDJHVVXEIROGHU6HH
£$GGLQJ%DVLF%HKDYLRUZLWKM4XHU\¤RQSDJHIRUWLSVRQILQGLQJRUFUHDWLQJ\RXU
RZQEXWWRQLPDJHV
I I !|S)
|L Ipf| F
II TfliM
)LJXUH,W¦VDVXEWOHGLIIHUHQFHEXWWKHFOLFNHGEDFNEXWWRQLVDELWGDUNHUWKDQWKHGHIDXOWVWDWH
([DPSOH$GGWKHIROORZLQJWRLSKRQHFVVWRPDNHWKHEDFNEXWWRQORRNFOLFNHGWKHPRPHQWWKH
XVHUWDSVLW
#header div.leftButton.clicked {
-webkit-border-image: url(images/back_button_clicked.png) 0 8 0 14;
}
6LQFH,¦PXVLQJDQLPDJHIRUWKHFOLFNHGVW\OHLWZRXOGEHVPDUWWRSUH
ORDGWKHLPDJH2WKHUZLVHWKHXQFOLFNHGEXWWRQJUDSKLFZLOOGLVDSSHDU
i-
WKHILUVWWLPHLW¦VWDSSHGZKLOHWKHFOLFNHGJUDSKLFGRZQORDGV,¦OOFRYHU
LPDJHSUHORDGLQJLQWKHQH[WFKDSWHU
:LWKWKH&66LQSODFH,FDQQRZXSGDWHWKHSRUWLRQRILSKRQHMVWKDWDVVLJQVWKHFOLFN
KDQGOHUWRWKHEDFNEXWWRQ)LUVW,DGGDYDULDEOH eWRWKHDQRQ\PRXVIXQFWLRQLQ
RUGHUWRFDSWXUHWKHLQFRPLQJFOLFNHYHQW7KHQ,ZUDSWKHHYHQWWDUJHWLQDM4XHU\
VHOHFWRUDQGFDOOM4XHU\¦V addClass()IXQFWLRQWRDVVLJQP\FOLFNHG&66FODVVWRWKH
EXWWRQ

$('#header .leftButton').click(function(e){
$(e.target).addClass('clicked');
var thisPage = hist.shift();
var previousPage = hist.shift();
loadPage(previousPage.url);
});
*A
$VSHFLDOQRWHWRDQ\&66JXUXVLQWKHFURZGWKH&666SULWHWHFKQLTXH¢
SRSXODUL]HGE\$/LVW$SDUW¢LVQRWDQRSWLRQLQWKLVFDVHEHFDXVHLW
f A' UHTXLUHVVHWWLQJRIIVHWVIRUWKHLPDJH,PDJHRIIVHWVDUHQRWVXSSRUWHG
E\WKH-webkit-border-imageSURSHUW\
Adding an Icon to the Home Screen

+RSHIXOO\XVHUVZLOOZDQWWRDGGDQLFRQIRU\RXUZHEDSSFDOOHGD£:HE&OLSLFRQ¤
WRWKHLUKRPHVFUHHQV7KH\GRWKLVE\WDSSLQJWKHSOXVEXWWRQDWWKHERWWRPRIWKH
6DIDULZLQGRZ)LJXUHWDSSLQJ$GGWR+RPH6FUHHQ)LJXUHDQGFOLFNLQJ
WKH$GGEXWWRQ)LJXUH%\GHIDXOWWKHL3KRQHZLOOFUHDWHWKLVLFRQE\WKXPE
QDLOLQJWKHFXUUHQWSDJHLQFOXGLQJSRVLWLRQDQG]RRPDQGDSSO\LQJURXQGHGFRUQHUV
DQGDJORVV\HIIHFW)LJXUH
..III AT&T 8:21 PM D

Jonathan Stark
jonathanstark.com/_ip... CÿÿGoogle
Hello!
About
Blog
Contact
Resources
Quick Question
Author Assistance
mm\ 3
)LJXUH$GGLQJD:HE&OLSLFRQWR\RXUKRPHVFUHHQ6WHSFOLFNWKHSOXVEXWWRQDWWKHERWWRP
RIWKH6DIDULZLQGRZ
Add Bookmark
Add to Home Screen
Cancel
)LJXUH6WHSFOLFNWKH£$GGWR+RPH6FUHHQ¤EXWWRQLQWKHGLDORJ
..ill AT&T <=> 8:19 PM D
Cancel Add to Home Add
o Jonathan Stark|
An icon will be added to your home screen

so you can quickly access this web site.
©
|Q|W|E|R|T|Y|U| I |O|P|
lAjlsllD|Fj|GilHIJ]|ÿ
zyxjjc[| v B[|N M
| space I
)LJXUH6WHSFOLFNWKH£$GG¤EXWWRQLQWKH£$GGWR+RPH¤SDQHO
...n AT&T 8:20 PM
Safari
@ '?
Settings Jonat... Stark
)LJXUH6WHSDÜSL[HOLPDJHZLOOVKRZXSRQWKHKRPHVFUHHQ
Adding an Icon to the Home Screen | 47
7RFXVWRPL]HWKHKRPHVFUHHQLPDJHWKHFRRONLGVSURYLGHDFXVWRP:HE&OLSLFRQ
7KHVLPSOHVWZD\WRGRWKLVLVWRVSHFLI\DVLQJOHLFRQIRU\RXUHQWLUHVLWHE\XSORDGLQJ
DILOHQDPHGDSSOHWRXFKLFRQSQJWR\RXUZHEURRW7KHILOHVKRXOGEHSL[HOVVTXDUH
DQGZLWKRXWJORVVRUURXQGHGFRUQHUVEHFDXVHWKHL3KRQHZLOODGGWKHVHDXWRPDWLFDOO\
,I\RXGRQ¦WZDQWWKHL3KRQHWRDGGHIIHFWVWR\RXU:HE&OLSLFRQFKDQJHWKHQDPHRI
WKHILOHWRDSSOHWRXFKLFRQSUHFRPSRVHGSQJ
,QVRPHFDVHV\RXPD\ZDQWWRSURYLGHD:HE&OLSLFRQIRUDSDJHWKDWLVGLIIHUHQW
IURPWKHUHVWRI\RXUVLWH<RXFDQGRWKLVE\DGGLQJRQHRIWKHIROORZLQJOLQHVWRWKH
head VHFWLRQ RI WKH £WUDIILF FRS¤ +70/ GRFXPHQW LSKRQHKWPO UHSODFLQJ
myCustomIcon.pngZLWKWKHDEVROXWHRUUHODWLYHSDWKWRWKHLPDJH
<link rel="apple-touch-icon" href="myCustomIcon.png" />
<link rel="apple-touch-icon-precomposed" href="myCustomIcon.png" />
,I\RXDUHJRLQJWRXVHSUHFRPSRVHGLPDJHVPDNHWKHFRUQHUUDGLXV
SL[HOVRUPRUHRWKHUZLVHWKHL3KRQHZLOOURXQGWKHFRUQHUVWRSL[HOV
A' ,QHLWKHUFDVHXVLQJSUHFRPSRVHGLPDJHVGRHVVXSSUHVVWKHDGGLWLRQRI
UP,
WKHJORVV\HIIHFW
Full Screen Mode

)HHOOLNHUHFODLPLQJDTXDUWHURIWKHDYDLODEOHYHUWLFDOVSDFHIURP0RELOH6DIDUL
SL[HOVWREHSUHFLVH"$GGWKHIROORZLQJOLQHWRWKH headVHFWLRQRIWKH£WUDIILFFRS¤
+70/GRFXPHQWLSKRQHKWPODQG\RXUZHEDSSZLOOGLVSOD\LQIXOOVFUHHQPRGHZKHQ
ODXQFKHGIURPWKH:HE&OLSLFRQ
<meta name="apple-mobile-web-app-capable" content="yes" />
,ZRXOG¦YHWROG\RXDERXWWKLVIHDWXUHHDUOLHUEXWLW¦VRQO\XVHIXORQFH\RXKDYHKLMDFNHG
DOORI\RXUK\SHUOLQNVZLWK$MD[$VVRRQDVDXVHUFOLFNVRQDQRQKLMDFNHGOLQN¢RQH
WKDWDFWXDOO\QDYLJDWHVWRDQHZSDJH¢0RELOH6DIDULZLOOODXQFKDQGORDGWKHSDJH
QRUPDOO\7KLVEHKDYLRULVSHUIHFWIRUWKHH[DPSOHZH¦YHEHHQZRUNLQJZLWKEHFDXVH
H[WHUQDOOLQNV$PD]RQ7ZLWWHU)DFHERRNHWFZLOORSHQLQ6DIDUL
Changing the Status Bar

2QFH\RX¦YHDGGHGWKH apple-mobile-web-app-capablePHWDWDJ\RXKDYHWKHRSWLRQ
WRFRQWUROWKHEDFNJURXQGFRORURIWKHSL[HOVWDWXVEDUDWWKHWRSRIWKHVFUHHQXVLQJ
WKH apple-mobile-web-app-status-bar-stylePHWDWDJ7KHQRUPDOJUD\6DIDULVWDWXV
EDULVWKHGHIDXOWRU\RXFDQFKDQJHLWWRblackVHH)LJXUH<RXFDQDOVRVHWLWWR
black-translucentZKLFKPDNHVLWSDUWLDOO\WUDQVSDUHQWDQGDGGLWLRQDOO\UHPRYHVLW
IURPWKHGRFXPHQWIORZ,QRWKHUZRUGV\RXUFRQWHQWZLOOEHVKLIWHGXSE\SL[HOV
DQGEHKLQGWKHVWDWXVEDUZKHQWKHSDJHILUVWORDGVVR\RXPLJKWKDYHWRSRVLWLRQ\RXU
KHDGHUDOLWWOHORZHUWRFRPSHQVDWH
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
&KDQJHV WR WKH VWDWXV EDU VW\OH ZLOO RQO\ WDNH HIIHFW ZKHQ WKH DSS LV
ODXQFKHGLQIXOOVFUHHQPRGH
4
Ml
Hello!
Blog
Contact
Quick Question
Author Assistance
Consulting Clinic
On Call
)LJXUH)XOOVFUHHQPRGHJLYHV\RXDERXWPRUHVFUHHQUHDOHVWDWHDQGDOORZV\RXWRFXVWRPL]H
WKHDSSHDUDQFHRIWKHVWDWXVEDU
Providing a Custom Startup Graphic

:KHQDQDSSLVODXQFKHGLQIXOOVFUHHQPRGHWKHXVHULVSUHVHQWHGZLWKDVFUHHQVKRW
RIWKHDSSZKLOHWKHILUVWSDJHLVORDGLQJ,¦PQRWDIDQRIWKLVEHFDXVHLWORRNVOLNHWKH
DSSLVUHDG\WREHLQWHUDFWHGZLWKZKHQLQUHDOLW\WDSSLQJDOLQNZLOOGRQRWKLQJ)XU
WKHUPRUHWKHVFUHHQVKRWLVEDVHGRQWKHODVWSDJHIURPWKHXVHU¦VSUHYLRXVYLVLWVFUROOHG
WRZKHUHYHUKHOHIWRII¢QRWYHU\DWWUDFWLYH
)RUWXQDWHO\0RELOH6DIDULDOORZVXVWRGHILQHDVWDUWXSJUDSKLFWKDWZLOOEHGLVSOD\HG
ZKLOHWKHSDJHLVORDGLQJ7RDGGDFXVWRPVWDUWXSJUDSKLFFUHDWHDS[ÜS[
31*ILOHDQGSODFHLWLQWKHVDPHGLUHFWRU\ZLWKLSKRQHKWPO1H[WDGGWKHIROORZLQJ
OLQHWRWKHheadVHFWLRQRILSKRQHKWPO\RX¦GUHSODFHmyCustomStartupGraphic.pngZLWK
WKHDEVROXWHRUUHODWLYHSDWKWR\RXULPDJH
<link rel="apple-touch-startup-image" href="myCustomStartupGraphic.png" />
7KHQH[WWLPHZHODXQFKRXUDSSIURPWKH:HE&OLSLFRQWKHGHIDXOWORDGLQJEHKDYLRU
ZLOOWDNHSODFHZKLOHWKHQHZFXVWRPJUDSKLFLVGRZQORDGHG2QWKHVXEVHTXHQWODXQFK
WKHFXVWRPVWDUWXSJUDSKLFZLOOEHGLVSOD\HG)LJXUH
Full Screen Mode | 49
? "> 1 M PM
Loading...
)LJXUH3URYLGLQJDFXVWRPVWDUWXSJUDSKLFIRUDQDSSODXQFKHGLQIXOOVFUHHQPRGH

,QWKLVFKDSWHU\RX¦YHOHDUQHGKRZWRFRQYHUWDQRUPDOZHEVLWHLQWRDIXOOVFUHHQ$MD[
DSSOLFDWLRQFRPSOHWHZLWKSURJUHVVLQGLFDWRUVDQDWLYHORRNLQJEDFNEXWWRQDQGD
FXVWRP:HE&OLSLFRQ,QWKHQH[WFKDSWHU\RX¦OOOHDUQKRZWRPDNH\RXUDSSFRPH
DOLYHE\DGGLQJQDWLYHXVHULQWHUIDFHDQLPDWLRQV7KDW¦VULJKWKHUHFRPHVWKHIXQVWXII
CHAPTER 4
Animation
L3KRQHDSSVKDYHDQXPEHURIGLVWLQFWLYHDQLPDWLRQFKDUDFWHULVWLFVWKDWDGGFRQWH[W
DQGPHDQLQJIRUWKHXVHU)RUH[DPSOHSDJHVVOLGHOHIWDV\RXGULOOGRZQWKURXJKOLQNV
DQGVOLGHULJKWDV\RXQDYLJDWHEDFN,QWKLVFKDSWHU\RX¦OOOHDUQKRZWRDGGFKDUDF
WHULVWLFEHKDYLRUVOLNHVOLGLQJSDJHIOLSDQGPRUHWR\RXUZHEDSS7KHVHFKDQJHVLQ
FRPELQDWLRQZLWK$MD[DQGIXOOVFUHHQPRGHZLOOPDNH\RXUZHEDSSDOPRVWLQGLVWLQ
JXLVKDEOHIURPDQDWLYHDSSOLFDWLRQ
With a Little Help from Our Friend

,¦OOEHKRQHVWPDNLQJDZHESDJHDQLPDWHOLNHDW\SLFDOQDWLYHL3KRQHDSSLVKDUG
)RUWXQDWHO\DQHQWHUSULVLQJ\RXQJODGIURP3KLOO\QDPHG'DYLG.DQHGDKDVZULWWHQD
-DYD6FULSW OLEUDU\ FDOOHG M47RXFK WKDW PDNHV PRELOH ZHE GHYHORSPHQW D ZKROH ORW
HDVLHUM47RXFKLVDQRSHQVRXUFHM4XHU\SOXJLQWKDWKDQGOHVYLUWXDOO\HYHU\WKLQJZH
OHDUQHGLQWKHSUHYLRXVFKDSWHUDVZHOODVDERDWORDGRIPXFKPRUHFRPSOH[VWXIIWKDW
ZRXOGEHWUXO\SDLQIXOWRZULWHIURPVFUDWFK
<RX FDQ GRZQORDG WKH ODWHVW YHUVLRQ RI M47RXFK IURP KWWSMTWRXFK
FRP
A'
UP,
Sliding Home
:HDUHJRLQJWREXLOGDVLPSOHFDORULHWUDFNLQJDSSOLFDWLRQFDOOHG.LORWKDWDOORZVWKH
XVHUWRDGGDQGGHOHWHIRRGHQWULHVIRUDJLYHQGDWH$OOWROGWKHUHZLOOEHILYHSDQHOV
+RPH6HWWLQJV'DWHV'DWHDQG1HZ(QWU\:H¦OOVWDUWRIIZLWKWZRSDQHOVDQGZRUN
RXUZD\XSDVZHJR
51
,¦OOEHDVVLJQLQJ&66FODVVHVWRVRPHRIWKH+70/HOHPHQWVtoolbar
edgetoedgearrowbuttonbackHWF,QHYHU\FDVHWKHVHFODVVHVFRUUH
4
VSRQGWRSUHGHILQHG&66FODVVVHOHFWRUVWKDWH[LVWLQWKHGHIDXOWM47RXFK
WKHPH%HDULQPLQGWKDW\RXFDQFUHDWHDQGXVH\RXURZQFODVVHVE\
PRGLI\LQJH[LVWLQJM47RXFKWKHPHVRUEXLOGLQJ\RXURZQIURPVFUDWFK
,¦PMXVWXVLQJWKHGHIDXOWV
7R EHJLQ OHW¦V FUHDWH D ILOH QDPHG LQGH[KWPO DQG DGG WKH +70/ VKRZQ LQ ([DP
SOHIRUWKH+RPHDQG$ERXWSDQHOV
)LJXUH.LOREHIRUHM47RXFK
([DPSOH+70/IRUWKH+RPHDQG$ERXWSDQHOVLQLQGH[KWPO
<html>
<head>
<title>Kilo</title>
</head>
<body>
<div id="home"> o
<div class="toolbar">0
<h1>Kilo</h1>
</div>
<ul class="edgetoedge">O
<li class="arrow"><a href="#about">About</a></li>O
</ul>
</div>
<div id="about">
<div class="toolbar">
<h1>About</h1>
<a class="button back" href="#">Back</a>©
52 | Chapter 4:ಗAnimation
</div>
<div>
<p>Kilo gives you easy access to your food diary.</p>
</div>
</div>
</body>
</html>
7KH+70/KHUHEDVLFDOO\DPRXQWVWRDKHDGZLWKDWLWOHDQGDERG\ZLWKWZRFKLOGUHQ
ERWKdivV
o 7KLVdivDVZHOODVWKHaboutdivWKDWDSSHDUVDIHZOLQHVGRZQZLOOEHFRPHDSDQHO
LQWKHDSSOLFDWLRQE\YLUWXHRIWKHIDFWWKDWLWLVDGLUHFWGHVFHQGDQWRIWKHERG\
0 ,QVLGHHDFKSDQHO divWKHUHLVD divZLWKDFODVVRI toolbar7KLV toolbarFODVVLV
VSHFLILFDOO\SUHGHILQHGLQWKHM47RXFKWKHPHVWRVW\OHDQHOHPHQWOLNHDWUDGLWLRQDO
L3KRQHWRROEDU
O 7KLVXQRUGHUHGOLVWWDJKDVWKHFODVVedgetoedge7KHedgetoedgeFODVVWHOOVM47RXFK
WRVWUHWFKWKHOLVWDOOWKHZD\IURPOHIWWRULJKWLQWKHYLHZDEOHDUHD
o 2QWKLVOLQHWKHUHLVDQ liWKDWFRQWDLQVDOLQNZLWKLWV hrefSRLQWLQJDWWKH$ERXW
SDQHO,QFOXGLQJWKHarrowFODVVWRWKHliLVRSWLRQDOGRLQJVRZLOODGGDFKHYURQWR
WKHULJKWVLGHRIWKHLWHPLQWKHOLVW
e 7KHWRROEDUHOHPHQWVHDFKFRQWDLQDVLQJOH h1HOHPHQWWKDWZLOOEHFRPHWKHSDQHO
WLWOH2QWKLVOLQHWKHUHLVDOLQNZLWKWKHFODVVHVbuttonDQGbackZKLFKWHOOM47RXFK
WRPDNHWKHEXWWRQORRNDQGDFWOLNHDEDFNEXWWRQ
1RWHWKDWWKHhrefRQWKHEDFNEXWWRQLVVHWWR#1RUPDOO\WKLVZRXOG
WHOOWKHEURZVHUWRUHWXUQWRWKHWRSRIWKHFXUUHQWGRFXPHQW%XWZKHQ
a,:' XVLQJM47RXFKLWQDYLJDWHVEDFNWRWKHSUHYLRXVSDQHOLQVWHDG,QPRUH
DGYDQFHGVFHQDULRV\RXPLJKWZDQWWRXVHDVSHFLILFDQFKRUVXFKDV
#homeZKLFKZRXOGLQVWUXFWWKHEDFNEXWWRQWRQDYLJDWHWRDSDUWLFXODU
SDQHOUHJDUGOHVVRIZKDWWKHSUHYLRXVSDQHOZDV
:LWKWKHEDVLF+70/LQSODFHLW¦VWLPHWRDGGM47RXFKWRWKHSDUW\2QFH\RX¦YH
GRZQORDGHGM47RXFKDQGXQ]LSSHGLWLQWKHVDPHGLUHFWRU\DVWKH+70/GRFXPHQW
\RXMXVWDGGDIHZOLQHVRIFRGHWRWKHKHDGRI\RXUSDJH([DPSOH
)RUWKLVDQGRWKHUH[DPSOHVLQWKLVERRN\RXZLOOQHHGWRGRZQORDG
m
M47RXFKIURPKWWSMTWRXFKFRPXQ]LSLWDQGPRYHWKHMTWRXFKDQG
UP, WKHPHVGLUHFWRULHVLQWRWKHVDPHGLUHFWRU\DV\RXU+70/GRFXPHQW
<RX ZLOO DOVR QHHG WR JR LQWR WKH MTWRXFK GLUHFWRU\ DQG UHQDPH WKH
M4XHU\-DYD6FULSWILOHVXFKDVMTXHU\PLQMVWRMTXHU\MV
Sliding Home | 53
([DPSOH$GGLQJWKHVHOLQHVWRWKHKHDGRI\RXUGRFXPHQWZLOODFWLYDWHM47RXFK
<link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css"> o
<link type="text/css" rel="stylesheet" media="screen" href="themes/jqt/theme.css">0
<script type="text/javascript" src="jqtouch/jquery.js"></script> o
<script type="text/javascript" src="jqtouch/jqtouch.js"></script> o
<script type="text/javascript"> e
var jQT = $.jQTouch({
icon: 'kilo.png',
statusBar: 'black'
});
</script>
o ,¦PLQFOXGLQJWKHMTWRXFKFVVILOH7KLVILOHGHILQHVVRPHKDUGFRUHVWUXFWXUDOGHVLJQ
UXOHVWKDWDUHYHU\VSHFLILFWRKDQGOLQJDQLPDWLRQVRULHQWDWLRQDQGRWKHUL3KRQH
VSHFLILFPLQXWLDH7KLVILOHLVUHTXLUHGDQGWKHUHVKRXOGEHQRUHDVRQIRU\RXWRHGLW
LW
0 ,¦PLQFOXGLQJWKH&66IRUP\VHOHFWHGWKHPHLQWKLVFDVHWKH£MTW¤WKHPHZKLFK
FRPHVZLWKM47RXFK7KHFODVVHVWKDW,¦YHEHHQXVLQJLQWKH+70/FRUUHVSRQGWR
&66VHOHFWRUVLQWKLVGRFXPHQWM47RXFKFRPHVZLWKWZRWKHPHVDYDLODEOHE\GH
IDXOW <RX FDQ DOVR PDNH \RXU RZQ E\ GXSOLFDWLQJ D GHIDXOW WKHPH DQG PDNLQJ
FKDQJHVWRLWRUZULWLQJDQHZRQHIURPVFUDWFK
0 M47RXFKUHTXLUHVM4XHU\VR,LQFOXGHWKDWKHUHM47RXFKFRPHVZLWKLWVRZQFRS\
RIM4XHU\EXW\RXFDQOLQNWRDQRWKHUFRS\LI\RXSUHIHU
O 7KLVLVZKHUH,LQFOXGHM47RXFKLWVHOI1RWHWKDW\RXKDYHWRLQFOXGHM47RXFKDIWHU
M4XHU\RUQRWKLQJ¦VJRLQJWRZRUN
0 7KLVEULQJVXVWRWKHVFULSWEORFNZKHUH,LQLWLDOL]HWKHM47RXFKREMHFWDQGVHQGLQ
WZRSURSHUW\YDOXHViconDQGstatusBar
M47RXFKH[SRVHVVHYHUDOSURSHUWLHVWKDWDOORZ\RXWRFXVWRPL]HWKHEHKDYLRUDQG
DSSHDUDQFHRI\RXUDSS<RX¦OOVHHVHYHUDOWKURXJKRXWWKHFRXUVHRIWKLVERRNDQG
WKH\DUHDOORSWLRQDO+RZHYHU\RX¦OOSUHWW\PXFKDOZD\VEHXVLQJDWOHDVWDIHZRI
WKHP
,QWKLVFDVH iconWHOOVM47RXFKZKHUHWRORRNIRUWKHFXVWRP:HE&OLSLFRQDQG
statusBarFRQWUROVWKHFRORURIWKHS[VWULSDWWKHWRSRIWKHDSSLQIXOOVFUHHQPRGH
%\WKHZD\M47RXFKDVVXPHVWKDW\RXZDQWWKHDSSWRUXQLQIXOOVFUHHQ
PRGHEHFDXVHKH\WKDW¦VKRZ\RXUROO,I\RX¦GSUHIHUWRGLVDOORZIXOO
a,:' VFUHHQPRGH\RXFDQDGGfullScreen: falseWRWKHSURSHUW\OLVW
7KHGLIIHUHQFHEHWZHHQWKHDSSOLFDWLRQEHIRUHM47RXFK)LJXUHDQGDIWHU)LJ

XUHLVGUDPDWLFEXWWKHWUXO\DVWRQLVKLQJWKLQJLVWKDW\RX¦YHMXVWDGGHGJRUJHRXV
OHIWULJKWVOLGLQJWR\RXUDSSZLWKOLQHVRIFRGH:KDW¦VPRUH\RX¦YHDOVRHQDEOHG
/a
10 04 PM
Kilo
About >
U
)LJXUHDQG.LORDIWHUM47RXFK
IXOOVFUHHQPRGHGHILQHGDFXVWRPVWDWXVEDUFRORUDQGOLQNHGWR\RXU:HE&OLSLFRQ
M47RXFKLVFRPSOHWHO\VLFNDQGZH¦UHMXVWJHWWLQJVWDUWHG
Adding the Dates Panel

/HW¦VQRZDGGWKH'DWHVSDQHO7KH'DWHVSDQHOZLOOKDYHDOLVWRIUHODWLYHGDWHVEHJLQ
QLQJZLWK7RGD\DQGJRLQJEDFNWRGD\VDJR)LJXUH$GGWKH+70/IRUWKH
'DWHVSDQHOVKRZQLQ([DPSOHULJKWDIWHUWKH$ERXWSDQHOMXVWEHIRUHWKHFORVLQJ
</body>
([DPSOH7KH+70/IRUWKH'DWHVSDQHO
<div id="dates">
<h1>Dates</h1>
<a class="button back" href="#">Back</a>
</div>
<ul class="edgetoedge">
<li class="arrow"><a id="0" href="#date">Today</a></li>
<li class="arrow"><a id="1" href="#date">Yesterday</a></li>
<li class="arrow"><a id="2" href="#date">2 Days Ago</a></li>
</ul>
</div>
Adding the Dates Panel | 55
rk
AT&T 11 40 PM
Bw* Dates
Today
Yesterday
2 Days Ago
3 Days Ago
4 Days Ago
S Days Ago
•
A.
>5 V
)LJXUH7KH'DWHVSDQHOFRQVLVWVRIDWRROEDUZLWKDEDFNEXWWRQDQGDFOLFNDEOHOLVWRIUHODWLYHGDWHV
/LNHWKH$ERXWSDQHOWKH'DWHVSDQHOKDVDWRROEDUZLWKDWLWOHDQGEDFNEXWWRQ$IWHU
WKHWRROEDUWKHUHLVDQXQRUGHUHG edgetoedgeOLVWRIOLQNV1RWLFHWKDWDOORIWKHOLQNV
KDYHXQLTXHidVWKURXJKEXWWKHVDPHhref#date¢PRUHRQWKDWLQDELW
1H[W \RX KDYH WR XSGDWH WKH +RPH SDQHO ZLWK D OLQN WR WKH 'DWHV SDQHO $GG WKH
IROORZLQJOLQHWRWKH+RPHSDQHOLQLQGH[KWPO
<div id="home">
<h1>Kilo</h1>
</div>
<li class="arrow"><a href="#dates">Dates</a></li>
<li class="arrow"><a href="#about">About</a></li>
</ul>
</div>
$QGMXVWOLNHWKDWZH¦YHDGGHGDQHZSDQHOWRWKHDSSVHH)LJXUH&OLFNLQJRQDQ

LWHPRQWKH'DWHVSDQHOGRHVQ¦WGRDQ\WKLQJ\HW/HW¦VUHFWLI\WKDWVLWXDWLRQE\DGGLQJ
WKH'DWHSDQHO
Adding the Date Panel

7KH'DWHSDQHOORRNVDORWOLNHWKHSUHYLRXVSDQHOVZLWKDFRXSOHRIH[FHSWLRQVUHIHU
WR([DPSOH$GGWKH+70/IRUWKH'DWHSDQHOULJKWDIWHUWKH'DWHVSDQHOMXVW
EHIRUHWKHFORVLQJ</body>
fa is
II M PM
Kilo
Dates >
About >
U
)LJXUH7KH+RPHSDQHOQRZKDVDOLQNWRWKH'DWHVSDQHO
([DPSOH7KH+70/IRUWKH'DWHSDQHO
<div id="date">
<h1>Date</h1>
<a class="button slideup" href="#createEntry">+</a> o
</div>
<li id="entryTemplate" class="entry" style="display:none">0
<span class="label">Label</span>
<span class="calories">000</span>
<span class="delete">Delete</span>
</li>
</ul>
</div>
o 7KH'DWHSDQHOWRROEDUKDVDQDGGLWLRQDOEXWWRQ:KHQFOLFNHGWKLVEXWWRQZLOO
GLVSOD\WKH1HZ(QWU\SDQHOZKLFKZHKDYHQRW\HWEXLOW,¦YHJLYHQWKHOLQNDFODVV
RIslideupZKLFKWHOOVM47RXFKWKDWZHZDQWWKHWDUJHWSDQHOWRVOLGHXSIURPWKH
ERWWRPRIWKHVFUHHQUDWKHUWKDQKRUL]RQWDOO\OLNHW\SLFDOQDYLJDWLRQ
0 7KHRWKHUXQXVXDODVSHFWRIWKLVSDQHOLVWKDW,¦YHGHILQHGDOLVWLWHPZLWKWKHVW\OH
VHWWRdisplay:noneHIIHFWLYHO\PDNLQJLWLQYLVLEOH
$V\RX¦OOVHHLQDELW,¦PJRLQJWRXVHWKLVLQYLVLEOHOLVWLWHPDVDWHPSODWHWRGLVSOD\
HQWULHVRQFHWKH\DUHFUHDWHG$WWKLVSRLQWWKHUHDUHQRHQWULHVVRWKHSDQHOZLOOEH
HPSW\DVLGHIURPWKHWRROEDU
Adding the Date Panel | 57
1RZWKDW\RX¦YHDGGHGWKH'DWHSDQHOFOLFNLQJDQ\LWHPRQWKH'DWHVSDQHOZLOOVOLGH
WKHHPSW\'DWHSDQHO)LJXUHLQWRYLHZ
Date
gl
)LJXUH$SDUWIURPWKHWRROEDUWKH'DWHSDQHOLVHPSW\WREHJLQZLWK
Adding the New Entry Panel

([DPSOHVKRZVWKHVRXUFHFRGHIRUWKH1HZ(QWU\SDQHO$GGWKLVFRGHWRWKHHQG
RILQGH[KWPOMXVWEHIRUHWKHFORVLQJ</body>
([DPSOH7KH+70/IRUWKH1HZ(QWU\SDQHO
<div id="createEntry">
<h1>New Entry</h1>
<a class="button cancel" href="#">Cancel</a>O
</div>
<form method="post">0
<ul>
<li><input type="text" placeholder="Food" name="food" id="food"
autocapitalize="off" autocorrect="off" autocomplete="off" /></li>
<li><input type="text" placeholder="Calories" name="calories" id="calories"
autocapitalize="off" autocorrect="off" autocomplete="off" /></li>
<li><input type="submit" class="submit" name="action"
value="Save Entry" /></li>O
</ul>
</form>
</div>
o 7KHILUVWWKLQJWRSRLQWRXWDERXWWKH1HZ(QWU\SDQHOLVWKDWLQVWHDGRIKDYLQJD
EDFNEXWWRQLWKDVDFDQFHOEXWWRQ
..
0..4ÿ
4
&DQFHOEXWWRQVLQM47RXFKEHKDYHMXVWOLNHEDFNEXWWRQVLQWKDW
WKH\UHPRYHWKHFXUUHQWSDJHIURPYLHZXVLQJWKHUHYHUVHDQLPDWLRQ
"v RIWKHZD\LWFDPHLQWRYLHZ+RZHYHUXQOLNHEDFNEXWWRQVFDQFHO
EXWWRQVDUHQRWVKDSHGOLNHDOHIWDUURZ
,XVHGDFDQFHOEXWWRQIRUWKH1HZ(QWU\SDQHOEHFDXVHLWVOLGHVXS
RQWKHZD\LQDQGZLOOWKHUHIRUHVOLGHGRZQRQWKHZD\RXW,WZRXOG
EHFRXQWHULQWXLWLYHWRFOLFNDOHIWSRLQWLQJEDFNEXWWRQDQGWKHQKDYH
WKHSDQHOVOLGHGRZQ
0 7KLV+70/IRUPFRQWDLQVDQXQRUGHUHGOLVWRIWKUHHLWHPVWZRWH[WILHOGVDQGD
VXEPLWEXWWRQ(PEHGGLQJIRUPFRQWUROVLQDQliDOORZVWKHjqtWKHPHWRVW\OHWKH
IRUPDVVKRZQLQ)LJXUH
(DFKRIWKHWH[WLQSXWVKDVTXLWHDIHZGHILQHGDWWULEXWHV
type
'HILQHVWKHIRUPFRQWUROWREHDVLQJOHOLQHWH[WHQWU\ILHOG
placeholder
$VWULQJRIWH[WWRGLVSOD\LQWKHIRUPLQSXWZKHQWKHLQSXWLVHPSW\
name
7KHQDPHWKDWZLOOEHDVVRFLDWHGZLWKWKHYDOXHSURYLGHGE\WKHXVHUZKHQWKH
IRUPLVVXEPLWWHG
id
$XQLTXHLGHQWLILHUIRUWKHHOHPHQWLQWKHFRQWH[WRIWKHHQWLUHSDJH
autocapitalize
$0RELOH6DIDUL¡VSHFLILFVHWWLQJWKDWDOORZV\RXWRWXUQRIIWKHGHIDXOWDXWRFD
SLWDOL]DWLRQIHDWXUH
autocorrect
$0RELOH6DIDUL¡VSHFLILFVHWWLQJWKDWDOORZV\RXWRWXUQRIIWKHGHIDXOWVSHOOFKHFN
IHDWXUH
autocomplete
6HWWLQJWKDWDOORZV\RXWRWXUQRIIWKHDXWRFRPSOHWHIHDWXUHRI0RELOH6DIDUL
O 7KHFODVVDWWULEXWHRIWKHVXEPLWLQSXWEXWWRQQHHGVH[SODQDWLRQ7KHL3KRQHZLOO
GLVSOD\DNH\ERDUGZKHQHYHU\RXUFXUVRULVLQDILHOG7KHNH\ERDUGKDVD*REXWWRQ
LQWKHERWWRPULJKWFRUQHUWKDWVXEPLWVWKHIRUPZKHQFOLFNHG:KHQ\RXDUHKL
MDFNLQJWKHVXEPLWIXQFWLRQDVZHDUHGRLQJKHUHVXEPLWWLQJIURPWKH*REXWWRQ
RQWKHNH\ERDUGGRHVQRWUHPRYHWKHFXUVRUIURPWKHDFWLYHILHOGDQGWKHUHIRUHWKH
NH\ERDUGGRHVQRWVOLGHRXWRIYLHZ7RUHPHG\WKLVM47RXFKRIIHUVDFRQYHQLHQFH
PHWKRGWKDWDXWRPDWLFDOO\UHPRYHVWKHFXUVRUIURPWKHDFWLYHILHOGZKHQDIRUPLV
VXEPLWWHG7RWDNHDGYDQWDJHRIWKLVIHDWXUH\RXMXVWDGGWKH submitFODVVWRWKH
VXEPLWHOHPHQWRIWKHIRUP
)LJXUHVKRZVWKH1HZ(QWU\IRUPLQDFWLRQ$WWKLVSRLQW,¦YHGRQHQRWKLQJWR
DFWXDOO\VDYHWKHHQWU\ZKHQWKHXVHUFOLFNV6DYH(QWU\:H¦OOFRYHUWKDWLQ&KDSWHU
Adding the New Entry Panel | 59
AJJ113
-
)LJXUH7KHMTWWKHPHGRHVDQLFHMREVW\OLQJIRUPHOHPHQWV
Ajjug MON
o
)LJXUH.H\ERDUGGDWDHQWU\ZLWKWKH1HZ(QWU\IRUP
Adding the Settings Panel
:HKDYHQ¦W\HWFUHDWHGDEXWWRQWKDWZLOODOORZXVHUVWRQDYLJDWHWRWKH6HWWLQJVSDQHO
VROHW¦VDGGRQHWRWKHWRROEDURQWKH+RPHSDQHOVHH)LJXUH$OOLWWDNHVLVDVLQJOH
OLQHRI+70/VKRZQLQEROG
<div id="home">
<h1>Kilo</h1>
<a class="button flip" href="#settings">Settings</a> o
</div>
</ul>
</div>
o 7KLVLVWKHOLQHRI+70/WKDWDGGVWKHEXWWRQ1RWLFHWKDW,¦YHDVVLJQHGWKH flip
FODVVWRWKHOLQN7KHflipFODVVLQVWUXFWVM47RXFKWRWUDQVLWLRQIURPWKH+RPHSDQHO
WRWKH6HWWLQJVSDQHOE\URWDWLQJWKHSDJHRQLWVYHUWLFDOD[LV7RDGGDQH[WUDGL
PHQVLRQWRWKHSURFHVVWKHSDJHDFWXDOO\]RRPVRXWDELWGXULQJWKHDQLPDWLRQ
VLPLODUWRWKHGHIDXOW:HDWKHUDSSRQWKHL3KRQH)DQF\QR"
fa
i.a AM
Kilo
Dates
About
V
)LJXUH7KH6HWWLQJVEXWWRQDGGHGWRWKHWRROEDURQWKH+RPHSDQHO
,QFRPSDULVRQZLWKWKH1HZ(QWU\SDQHOWKH+70/IRUWKH6HWWLQJVSDQHOLVJRLQJWR
ORRNSUHWW\IDPLOLDU([DPSOH7KHUHLVRQHPRUHWH[WLQSXWDQGVRPHRIWKHDW
WULEXWHVKDYHEHHQRPLWWHGRUKDYHGLIIHUHQWYDOXHVEXWFRQFHSWXDOO\WKH\DUHLGHQWLFDO
$GGWKLVWR\RXU+70/GRFXPHQWMXVWDV\RX¦YHGRQHIRUWKHRWKHUSDQHOV:KHQ
\RX¦UHGRQHWKH6HWWLQJVSDQHOVKRXOGORRNOLNH)LJXUH
$V ZLWK WKH 1HZ (QWU\ IRUP WKH 6HWWLQJV IRUP GRHV QRW FXUUHQWO\ VDYH DQ\ RI WKH
LQIRUPDWLRQDVVRFLDWHGZLWKLW,WVVXEPLVVLRQKDQGOHUZLOOEHGHVFULEHGLQWKHQH[W
FKDSWHU
Adding the Settings Panel | 61
iJl AM
Settings
| U I
)LJXUH7KH6HWWLQJVSDQHO
([DPSOH7KH+70/IRUWKH6HWWLQJVSDQHO
<div id="settings">
<h1>Settings</h1>
<a class="button cancel" href="#">Cancel</a>
</div>
<form method="post">
<ul>
<li><input placeholder="Age" type="text" name="age" id="age" /></li>
<li><input placeholder="Weight" type="text" name="weight" id="weight" /></li>
<li><input placeholder="Budget" type="text" name="budget" id="budget" /></li>
value="Save Changes" /></li>
</ul>
</form>
</div>
Putting It All Together

6RWKHUH\RXKDYHLW:LWKIHZHUWKDQOLQHVRIFRGHZH¦YHFUHDWHGDQL3KRQHHVTXH
8,IRUDILYHSDQHODSSOLFDWLRQFRPSOHWHZLWKWKUHHGLIIHUHQWSDJHWUDQVLWLRQDQLPD
WLRQV1RWWRRVKDEE\ULJKW"6HH([DPSOHIRUDFRPSOHWHOLVWLQJRIWKHILQDO+70/
([DPSOH7KHFRPSOHWH+70/OLVWLQJIRUWKHILYHSDQHO8,
<html>
<head>
<title>Kilo</title>
<link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css">
<link type="text/css" rel="stylesheet" media="screen"
href="themes/jqt/theme.css">
<script type="text/javascript" src="jqtouch/jquery.js"></script>
<script type="text/javascript" src="jqtouch/jqtouch.js"></script>
<script type="text/javascript">
icon: 'kilo.png',
statusBar: 'black'
});
</script>
</head>
<body>
<div id="home">
<h1>Kilo</h1>
<a class="button flip" href="#settings">Settings</a>
</div>
</ul>
</div>
<div id="about">
<h1>About</h1>
</div>
<div>
<p>Kilo gives you easy access to your food diary.</p>
</div>
</div>
<div id="dates">
<h1>Dates</h1>
</div>
<li class="arrow"><a id="0" href="#date">Today</a></li>
<li class="arrow"><a id="1" href="#date">Yesterday</a></li>
</ul>
</div>
<div id="date">
<h1>Date</h1>
<a class="button slideup" href="#createEntry">+</a>
</div>
<li id="entryTemplate" class="entry" style="display:none">
Putting It All Together | 63
</li>
</ul>
</div>
<div id="createEntry">
<h1>New Entry</h1>
</div>
<ul>
<li><input type="text" placeholder="Food"
name="food" id="food" autocapitalize="off"
autocorrect="off" autocomplete="off" /></li>
<li><input type="text" placeholder="Calories"
name="calories" id="calories" autocapitalize="off"
autocorrect="off" autocomplete="off" /></li>
value="Save Entry" /></li>
</ul>
</form>
</div>
<div id="settings">
<h1>Settings</h1>
</div>
<ul>
<li><input placeholder="Age" type="text" name="age" id="age" /></li>
<li><input placeholder="Weight" type="text" name="weight"
id="weight" /></li>
<li><input placeholder="Budget" type="text" name="budget"
id="budget" /></li>
value="Save Changes" /></li>
</ul>
</form>
</div>
</body>
</html>
Customizing jQTouch
M47RXFKDOORZV\RXWRFXVWRPL]HLWVGHIDXOWEHKDYLRUE\VHQGLQJDYDULHW\RISURSHUW\
VHWWLQJVLQWRWKHFRQVWUXFWRU:H¦YHVHHQWKLVSUHYLRXVO\ZLWKiconDQGstatusBarEXW
WKHUHDUHPDQ\RWKHUVWKDW\RXVKRXOGEHDZDUHRI6HH7DEOH
7DEOHM47RXFKFXVWRPL]DWLRQRSWLRQV
Property Default Expects Notes
addGlossToIcon true true or If set to true, allow iPhone to add gloss
false to your Web Clip icon.
backSelector '.back, .cancel, .goback' Any valid CSS Defines elements that will trigger the
selector; sepa- “back” behavior of jQTouch when tap-
rate multiple ped. When the back behavior is invoked,
values with a the current panel moves off screen with
comma a reverse animation and is removed from
history.
cacheGetRequests true true or If set to true, automatically caches GET
false requests, so subsequent clicks reference
the already loaded data.
cubeSelector '.cube' Any valid CSS Defines elements that will trigger a cube
selector; sepa- animation from the current panel to the
rate multiple target panel.
values with a
comma
dissolveSelector '.dissolve' Any valid CSS Defines elements that will trigger a dis-
selector; sepa- solve animation from the current panel
rate multiple to the target panel.
values with a
comma
fadeSelector '.fade' Any valid CSS Defines elements that will trigger a fade
values with a
comma
fixedViewport true true or If set to true, prevents users from being
false able to zoom in or out on the page.
flipSelector '.flip' Any valid CSS Defines elements that will trigger a flip
values with a
comma
formSelector 'form' Any valid CSS Defines elements that should be styled
selector; sepa- as a form by the CSS theme.
rate multiple
values with a
comma
fullScreen true true or When set to true, your app will open in
false full screen mode when launched from
the user’s home screen. Has no effect on
the display if the app is running in
Mobile Safari.
fullScreenClass 'fullscreen' String Class name that will be applied to the
body when the app is launched in full
screen mode. Allows you to write custom
Customizing jQTouch | 65
CSS that only executes in full screen
mode.
icon null null or a rela- The Web Clip icon for your app. This is the
tive or absolute image that will be displayed when a user
path to a 57 × saves your app to her home screen.
57 px png im-
age file
popSelector '.pop' Any valid CSS Defines elements that will trigger a pop
values with a
comma
preloadImages false An array of im- Ex: ['images/link_over.png',
age paths to 'images/link_select.png'].
load before
page loads
slideInSelector 'ul li a' Any valid CSS Defines elements that will trigger a slide
selector; sepa- left animation from the current panel to
rate multiple the target panel.
values with a
comma
slideupSelector '.slideup' Any valid CSS Defines elements that will cause the tar-
selector; sepa- get panel to slide up into view in front of
rate multiple the current panel.
values with a
comma
startupScreen null null or a rela- Pass a relative or absolute path to a 320px
tive or absolute × 460px startup screen for full-screen
path to an im- apps. Use a 320px × 480px image
age file if you set statusBar to
black-translucent.
statusBar 'default' default, Defines the appearance of the 20-pixel
black- status bar at the top of the window in an
translu app launched in full screen mode.
cent, black
submitSelector '.submit' Any valid CSS Selector that, when clicked, will submit
selector; sepa- its parent form (and close keyboard if
rate multiple open).
values with a
comma
swapSelector '.swap' Any valid CSS Defines elements that will cause the tar-
selector; sepa- get panel to swap into view in front of
rate multiple the current panel.
values with a
comma
useAnimations true true or Set to false to disable all animations.
false

,QWKLVFKDSWHU\RX¦YHOHDUQHGKRZWRDGGQDWLYHORRNLQJDQLPDWLRQVWRDZHEDSS
XVLQJM47RXFK,QWKHQH[WFKDSWHU\RX¦OOOHDUQKRZWRXVHWKHQHZORFDOVWRUDJHDQG
FOLHQWVLGHGDWDEDVHIHDWXUHVRI+70/WRDGGSHUVLVWHQWGDWDVWRUDJHWR\RXUDSS
What You’ve Learned | 67
CHAPTER 5
Client-Side Data Storage
0RVWVRIWZDUHDSSOLFDWLRQVQHHGWRVWRUHGDWDLQVRPHVRUWRISHUVLVWHQWIDVKLRQLQRUGHU
WREHXVHIXO:KHQLWFRPHVWRZHEDSSVWKLVWDVNKDVWUDGLWLRQDOO\EHHQKDQGOHGHLWKHU
ZLWKDVHUYHUVLGHGDWDEDVHRUFRRNLHVVHWLQWKHEURZVHU:LWKWKHDGYHQWRI+70/
ZHEGHYHORSHUVQRZKDYHDIHZPRUHRSWLRQVORFDO6WRUDJHVHVVLRQ6WRUDJHDQGFOLHQW
VLGHGDWDEDVHV
localStorage and sessionStorage

ORFDO6WRUDJHDQGVHVVLRQ6WRUDJHFROOHFWLYHO\UHIHUUHGWRDVNH\YDOXHVWRUDJHDUHYHU\
VLPLODUWRFRRNLHVLQWKDWWKH\DOORZ\RXWRXVH-DYD6FULSWWRVHWQDPHYDOXHSDLUVWKDW
\RXFDQWKHQUHWULHYHDFURVVPXOWLSOHSDJHUHORDGV
8QOLNHFRRNLHVKRZHYHUORFDO6WRUDJHDQGVHVVLRQ6WRUDJHGDWDLVQRWVHQWDFURVVWKH
ZLUHZLWKWKHEURZVHUUHTXHVW¢LWOLYHVHQWLUHO\LQWKHFOLHQW7KHUHIRUHLW¦VIHDVLEOHWR
VWRUHPXFKPRUHGDWDWKDQ\RXZRXOGZDQWWRZLWKFRRNLHV
$W WKH WLPH RI WKLV ZULWLQJ EURZVHU VL]H OLPLWV IRU ORFDO6WRUDJH DQG
VHVVLRQ6WRUDJHDUHVWLOOLQIOX[
m
UP,
)XQFWLRQDOO\ORFDO6WRUDJHDQGVHVVLRQ6WRUDJHDUHWKHVDPH7KH\GLIIHURQO\LQWHUPV
RISHUVLVWHQFHDQGVFRSH
localStorage
'DWDLVVDYHGHYHQDIWHUWKHZLQGRZLVFORVHGDQGLVDYDLODEOHWRDOOZLQGRZVRU
WDEVWKDWDUHORDGHGIURPWKHVDPHVRXUFHPXVWEHWKHVDPHGRPDLQQDPHSUR
WRFRODQGSRUW7KLVLVXVHIXOIRUWKLQJVOLNHDSSOLFDWLRQSUHIHUHQFHV
69
sessionStorage
'DWDLVVWRUHGZLWKWKHZLQGRZREMHFW2WKHUZLQGRZVWDEVDUHQRWDZDUHRIWKH
YDOXHV DQG WKH GDWD LV GLVFDUGHG ZKHQ WKH ZLQGRZWDE LV FORVHG 8VHIXO IRU
ZLQGRZVSHFLILFVWDWHOLNHDFWLYHWDEKLJKOLJKWRUWKHVRUWRUGHURIDWDEOH
..
#..4ÿ
4
,Q DQ\ RI WKH IROORZLQJ H[DPSOHV \RX FDQ VXEVWLWXWH sessionStorage
DQ\ZKHUH\RXVHHlocalStorage
m
UP,
6HWWLQJDYDOXHLVDVVLPSOHDV
localStorage.setItem('age', 40);
$FFHVVLQJDVWRUHGYDOXHLVHTXDOO\VLPSOH
var age = localStorage.getItem('age');
<RXFDQGHOHWHDVSHFLILFNH\YDOXHSDLUIURPVWRUDJHZLWK
localStorage.removeItem('age');
2U\RXFDQGHOHWHDOONH\YDOXHSDLUVOLNHVR
localStorage.clear();
$VVXPLQJWKDW\RXUNH\VDUHYDOLG-DYD6FULSWWRNHQVQRVSDFHVQRSXQFWXDWLRQRWKHU
WKDQXQGHUVFRUHVHWF\RXFDQXVHWKLVDOWHUQDWHV\QWD[
localStorage.age = 40 // Set the value of age
var age = localStorage.age; // Get the value of age
delete localStorage.age; // Remove age from storage
#..M*
4
7KHORFDO6WRUDJHDQGVHVVLRQ6WRUDJHNH\VDUHVWRUHGVHSDUDWHO\,I\RX
XVHWKHVDPHNH\QDPHLQHDFKWKH\ZLOOQRWFRQIOLFWZLWKHDFKRWKHU
QJa,:'
Saving User Settings to localStorage

2QWRDSUDFWLFDOH[DPSOH/HW¦VXSGDWHWKH6HWWLQJVSDQHORIWKHH[DPSOHDSSZHVWDUWHG
ZRUNLQJRQLQ&KDSWHUWRVWRUHWKHIRUPYDOXHVLQORFDO6WRUDJH
:HDUHJRLQJWREHZULWLQJDIDLUDPRXQWRI-DYD6FULSWLQWKLVFKDSWHUDQG,GRQ¦WZDQW
WRMDPLWDOOLQWKHKHDGVHFWLRQRIRXU+70/GRFXPHQW7RNHHSRXUFRGHRUJDQL]HG
,¦PJRLQJWRFUHDWHDILOHFDOOHGNLORMVDQGXSGDWHWKHKHDGRIP\+70/GRFXPHQWZLWK
DUHIHUHQFHWRLW
<head>
<title>Kilo</title>
<link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css">
<link type="text/css" rel="stylesheet" media="screen"
70 | Chapter 5:ಗClient-Side Data Storage
href="themes/jqt/theme.css">
<script type="text/javascript" src="jqtouch/jquery.js"></script>
<script type="text/javascript" src="jqtouch/jqtouch.js"></script>
<script type="text/javascript" src="kilo.js"></script>
</head>
$OHUWUHDGHUVZLOOQRWLFHWKDW,¦YHDOVRUHPRYHGWKHM47RXFKFRQVWUXFWRUIURPWKHKHDG
RIWKH+70/GRFXPHQW,W¦VQRWJRQHWKRXJK,MXVWPRYHGLWLQWRNLORMV6REHVXUH
\RX¦YH UHPRYHG WKDW IURP \RXU PDLQ +70/ ILOH FUHDWH WKH NLORMV ILOH LQ WKH VDPH
GLUHFWRU\ZLWKWKHIROORZLQJFRQWHQWVDQGWKHQUHORDGWKHPDLQ+70/GRFXPHQWLQ
\RXUEURZVHUWRPDNHVXUHLW¦VVWLOOZRUNLQJ
icon: 'kilo.png',
statusBar: 'black'
});
,QHHGWRRYHUULGHWKHVXEPLWDFWLRQRIWKH6HWWLQJVIRUPDQGUHSODFHLWZLWKDFXVWRP
IXQFWLRQFDOOHGsaveSettings()7KDQNVWRM4XHU\,FDQDFFRPSOLVKWKLVZLWKDVLQJOH
OLQHRIFRGHZKLFK,¦OOSODFHLQWKHGRFXPHQWUHDG\IXQFWLRQ$GGWKHIROORZLQJWR
NLORMV
$('#settings form').submit(saveSettings);
});
7KH QHW UHVXOW RI WKLV LV WKDW ZKHQ WKH XVHU VXEPLWV WKH 6HWWLQJV IRUP WKH
saveSettings()IXQFWLRQZLOOUXQLQVWHDGRIWKHIRUPDFWXDOO\JHWWLQJVXEPLWWHG
:KHQWKH saveSettings()IXQFWLRQLVFDOOHGLWJUDEVWKHYDOXHVIURPWKHWKUHHIRUP
LQSXWVXVLQJM4XHU\¦Vval()IXQFWLRQDQGVDYHVHDFKLQDlocalStorageYDULDEOHRIWKH
VDPHQDPH$GGWKLVIXQFWLRQWRNLORMV
function saveSettings() {
localStorage.age = $('#age').val();
localStorage.budget = $('#budget').val();
localStorage.weight = $('#weight').val();
jQT.goBack();
return false;
}
2QFHWKHYDOXHVDUHVWRUHG,XVHWKHM4XHU\ goBack()IXQFWLRQRQWKHVHFRQGWRODVW

OLQHWRGLVPLVVWKHSDQHODQGUHWXUQWRWKHSUHYLRXVSDJH,WKHQUHWXUQfalseWRSUHYHQW
WKHGHIDXOWDFWLRQRIWKHVXEPLWHYHQWWKDWWULJJHUVWKLVIXQFWLRQ+DG,RPLWWHGWKLV
OLQHWKHFXUUHQWSDJHZRXOGUHORDGZKLFKLVQRWZKDWZHZDQW
$WWKLVSRLQWDXVHUFDQODXQFKWKHDSSQDYLJDWHWRWKH6HWWLQJVSDQHOHQWHUKHUVHWWLQJV
DQGVXEPLWWKHIRUPWRVDYHKHUVHWWLQJVWRORFDO6WRUDJH
6LQFHZHDUHQRWFOHDULQJWKHILHOGVZKHQWKHIRUPLVVXEPLWWHGWKHYDOXHVWKDWWKHXVHU
HQWHUVZLOOVWLOOEHWKHUHZKHQVKHQDYLJDWHVEDFNWRWKH6HWWLQJVSDQHO+RZHYHUWKLV
LVQRWEHFDXVHWKHYDOXHVKDYHEHHQVDYHGWRORFDO6WRUDJHLW¦VMXVWEHFDXVHWKH\DUHVWLOO
MXVWVLWWLQJWKHUHDIWHUKDYLQJEHHQW\SHGLQ7KHUHIRUHWKHQH[WWLPHWKHXVHUODXQFKHV
localStorage and sessionStorage | 71
WKDWDSSDQGQDYLJDWHVWRWKH6HWWLQJVSDQHOWKHILHOGVZLOOEHHPSW\HYHQWKRXJKWKH\
KDYHEHHQVDYHG
7RUHPHG\WKLVZHQHHGWRORDGWKHVHWWLQJVXVLQJWKHloadSettings()IXQFWLRQVRDGG
WKHIROORZLQJIXQFWLRQWRNLORMV
function loadSettings() {
$('#age').val(localStorage.age);
$('#budget').val(localStorage.budget);
$('#weight').val(localStorage.weight);
}
7KHloadSettings()IXQFWLRQLVWKHRSSRVLWHRIWKHsaveSettings()IXQFWLRQLHLWXVHV
M4XHU\¦Vval()IXQFWLRQWRVHWWKHWKUHHILHOGVRIWKH6HWWLQJVIRUPWRWKHFRUUHVSRQGLQJ
YDOXHVVDYHGLQlocalStorage
1RZWKDWZHKDYHDloadSettings()IXQFWLRQZHQHHGWRWULJJHULW7KHPRVWREYLRXV
WLPHLVSUREDEO\ZKHQWKHDSSODXQFKHV7RPDNHWKLVKDSSHQ,VLPSO\DGGDOLQHWR
WKHGRFXPHQWUHDG\IXQFWLRQLQNLORMV
loadSettings();
});
8QIRUWXQDWHO\ORDGLQJWKHVHWWLQJVRQO\DWVWDUWXSOHDYHVDORRSKROHWKDWRFFXUVLIWKH
XVHUQDYLJDWHVWRWKH6HWWLQJVSDQHOFKDQJHVVRPHYDOXHVDQGWDSVWKHFDQFHOEXWWRQ
ZLWKRXWVXEPLWWLQJWKHIRUP
,QWKLVFDVHWKHQHZO\FKDQJHGYDOXHVZLOOVWLOOEHVLWWLQJWKHUHWKHQH[WWLPHWKHXVHU
YLVLWVWKH6HWWLQJVSDQHOHYHQWKRXJKWKHYDOXHVZHUHQRWVDYHG,IWKHXVHUFORVHGDQG
UHRSHQHGWKHDSSWKHGLVSOD\HGYDOXHVZRXOGUHYHUWWRWKHVDYHGYDOXHVEHFDXVHWKH
loadSettings()IXQFWLRQZRXOGUHIUHVKWKHPDWVWDUWXS
7KHUHDUHVHYHUDOZD\VWKDWZHFRXOGUHFWLI\WKLVVLWXDWLRQEXW,WKLQNWKHPRVWDSSUR
SULDWHLVWRUHIUHVKWKHGLVSOD\HGYDOXHVZKHQHYHUWKH6HWWLQJVSDQHOEHJLQVWRPRYH
HLWKHULQWRRURXWRIYLHZ
7KDQNVWRM47RXFKWKLVLVDVLPSOHPDWWHURIELQGLQJWKHloadSettings()IXQFWLRQWR
WKHpageAnimationStartHYHQWRIWKH6HWWLQJVSDQHO5HSODFHWKHOLQH\RXMXVWDGGHGZLWK
WKHFRGHVKRZQLQEROGLQVWHDG
$('#settings').bind('pageAnimationStart', loadSettings);
});
7KH-DYD6FULSWFRQWDLQHGLQWKHNLORMVILOHQRZSURYLGHVSHUVLVWHQWGDWDVXSSRUWIRUWKH
6HWWLQJVSDQHO:KHQ\RXYLHZWKHFRGHZH¦YHZULWWHQWRPDNHWKLVKDSSHQWKHUH¦V
UHDOO\QRWPXFKWRLW+HUHLVHYHU\WKLQJLQNLORMVVRIDU
icon: 'kilo.png',
statusBar: 'black'
});
});
}
jQT.goBack();
return false;
}
Saving the Selected Date to sessionStorage

8OWLPDWHO\ZKDW,ZDQWWRGRLVVHWXSWKH'DWHSDQHOVXFKWKDWZKHQLW¦VGLVSOD\HGLW
ZLOOFKHFNWKHGDWDEDVHIRUDQ\UHFRUGVHQWHUHGIRUWKDWGDWHDQGGLVSOD\WKHPDVDQ
HGJHWRHGJHOLVW7KLVUHTXLUHVWKDWWKH'DWHSDQHONQRZZKDWGDWHZDVWDSSHGRQWKH
'DWHVSDQHO
,DOVRZDQWWRDOORZWKHXVHUWRDGGDQGGHOHWHHQWULHVIURPWKHGDWDEDVHVR,¦OOKDYHWR
DGGVXSSRUWIRUWKHEXWWRQWKDWDOUHDG\H[LVWVRQWKH'DWHSDQHODQGWKH'HOHWH
EXWWRQLQWKH'DWHSDQHOHQWU\WHPSODWHPRUHRQWKLVODWHU
7KHILUVWVWHSLVWROHWWKH'DWHSDQHONQRZZKDWLWHPZDVFOLFNHGLQRUGHUWRQDYLJDWH
WRLWIURPWKH'DWHVSDQHO:LWKWKLVSLHFHRILQIRUPDWLRQ,FDQFDOFXODWHWKHDSSURSULDWH
GDWHFRQWH[W7RGRWKLV,DGGVRPHOLQHVWRWKHGRFXPHQWUHDG\IXQFWLRQLQNLORMV
$('#dates li a').click(function(){ o
var dayOffset = this.id;0
var date = new Date();©
date.setDate(date.getDate() - dayOffset);
sessionStorage.currentDate = date.getMonth() + 1 + '/' +
date.getDate() + '/' +
date.getFullYear(); o
refreshEntries();0
});
});
o 2QWKLVOLQH,¦PXVLQJM4XHU\¦Vclick()IXQFWLRQWRELQGP\RZQFRGHWRWKHFOLFN
HYHQWRIWKHOLQNVRQWKH'DWHVSDQHO
0 +HUH,¦PJUDEELQJWKHidRIWKHFOLFNHGREMHFWDQGVWRULQJLWLQWKHdayOffsetYDULDEOH
,I\RXUHFDOOWKHOLQNVRQWKH'DWHVSDQHOKDYHidVUDQJLQJIURPWRVRWKHidRI
WKHFOLFNHGOLQNZLOOFRUUHVSRQGWRWKHQXPEHURIGD\VQHHGHGWRFDOFXODWHWKHFOLFNHG
localStorage and sessionStorage | 73
GDWHGD\VLQWKHSDVWHTXDOVWRGD\GD\LQWKHSDVWHTXDOV\HVWHUGD\GD\VLQ
WKHSDVWHTXDOVWKHGD\EHIRUH\HVWHUGD\HWF
,QWKLVFRQWH[WWKHthisNH\ZRUGZLOOFRQWDLQDUHIHUHQFHWRWKHREMHFW
WKDWZDVWKHWDUJHWRIWKHFOLFNHYHQW
"v
O 2QWKLVOLQH,FUHDWHDQHZ-DYD6FULSWGDWHREMHFWDQGVWRUHLWLQDYDULDEOHQDPHG
date,QLWLDOO\WKLVGDWHZLOOEHSRLQWHGDWWKHSDUWLFXODUPRPHQWLQWLPHWKDWLWZDV
FUHDWHG VR RQ WKH QH[W OLQH , VXEWUDFW WKH dayOffset IURP WKH UHVXOW RI WKH
getDate()IXQFWLRQDQGWKHQXVHsetDate()WRUHSRLQWWKHGDWH
o +HUH,EXLOGD00''<<<<IRUPDWWHGGDWHVWULQJDQGVDYHLWWRsessionStorage
DVcurrentDate
7KH getMonth()PHWKRGRIWKHGDWHREMHFWUHWXUQVYDOXHVIURP¡
-DQXDU\EHLQJ7KHUHIRUH,KDYHWRDGGWRLWWRJHQHUDWHWKHFRUUHFW
a*
UP, YDOXHIRUWKHIRUPDWWHGVWULQJ
© )LQDOO\,FDOOWKHrefreshEntries()IXQFWLRQ7KHMRERIWKHrefreshEntries()IXQF
WLRQLVWRXSGDWHWKHLQFRPLQJ'DWHSDQHODSSURSULDWHO\EDVHGRQWKHGDWHWKDWZDV
WDSSHGRQWKH'DWHVSDQHO)RUQRZ,¦OOMXVWVHWLWXSWRXSGDWHWKHWRROEDUWLWOHRI
WKH 'DWHV SDQHO ZLWK WKH VHOHFWHG GDWH VR \RX FDQ VHH LW¦V ZRUNLQJ :LWKRXW LW
\RX¦G MXVW VHH WKH ZRUG £'DWH¤ DV VKRZQ LQ )LJXUH )LJXUH VKRZV WKH
refreshEntries()IXQFWLRQLQDFWLRQ
+HUH¦VWKHFRGHIRUWKHrefreshEntries()IXQFWLRQ
function refreshEntries() {
var currentDate = sessionStorage.currentDate;
$('#date h1').text(currentDate);
}
1H[WZH¦OOPRYHRQWRDPRUHSRZHUIXODQGFRPSOH[FOLHQWVLGHGDWDVWRUDJHPHWKRG
WKDWZH¦OOXVHWRVWRUHWKHXVHU¦VIRRGHQWULHVRQWKH'DWHSDQHO
Client-Side Database
2IDOOWKHH[FLWLQJIHDWXUHVRI+70/WKHRQHWKDWURFNVP\ZRUOGWKHPRVWLVFOLHQW
VLGHGDWDEDVHVXSSRUW,WDOORZVGHYHORSHUVWRXVHDVLPSOHEXWSRZHUIXO-DYD6FULSW
GDWDEDVH$3,WRVWRUHSHUVLVWHQWGDWDLQDUHODWLRQDOIRUPDW
'HYHORSHUVFDQXVHVWDQGDUG64/VWDWHPHQWVWRFUHDWHWDEOHVWRLQVHUWXSGDWHVHOHFW
DQGGHOHWHURZVDQGVRRQ7KH-DYD6FULSWGDWDEDVH$3,HYHQVXSSRUWVWUDQVDFWLRQV
/a
1 0> PM
Date
+ m to
V
)LJXUH%HIRUHWKHUHIUHVK(QWULHVIXQFWLRQWKHWLWOHMXVWVD\V£'DWH¤
a
rot WM
9/6/2009
U
)LJXUH$IWHUWKHUHIUHVK(QWULHVIXQFWLRQWKHWLWOHUHIOHFWVWKHVHOHFWHGGDWH
:H¦UHWDONLQJDERXW64/KHUHVRWKHUHLVDQLQKHUHQWFRPSOH[LW\5HJDUGOHVVWKLVLVD
JDPHFKDQJLQJIHDWXUHVRWLPHVSHQWJHWWLQJ\RXUKHDGDURXQGLWZLOOEHZHOOUHZDUGHG
Creating a Database
1RZWKDWRXU'DWHSDQHONQRZVZKDWGDWHWKHXVHUKDVVHOHFWHGZHKDYHDOOWKHLQIR
ZHQHHGWRDOORZXVHUVWRFUHDWHHQWULHV%HIRUHZHFDQZULWHWKHcreateEntryIXQFWLRQ
Client-Side Database | 75
ZHQHHGWRVHWXSDGDWDEDVHWDEOHWRVWRUHWKHVXEPLWWHGGDWD,¦OODGGVRPHOLQHVWR
NLORMVWRGRVR
var db; o
$('#dates li a').click(function(){
var dayOffset = this.id;
var date = new Date();
date.getFullYear();
refreshEntries();
});
var shortName = 'Kilo';0
var version = '1.0';
var displayName = 'Kilo';
var maxSize = 65536;
db = openDatabase(shortName, version, displayName, maxSize);O
db.transaction( o
function(transaction) {0
transaction.executeSql(O
'CREATE TABLE IF NOT EXISTS entries ' +
' (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, ' +
' date DATE NOT NULL, food TEXT NOT NULL, ' +
' calories INTEGER NOT NULL );'
);
}
);
});
o 7KHILUVWWKLQJWRQRWHLVWKDW,¦YHDGGHGDYDULDEOHQDPHGdbWRWKHJOREDOVFRSHRI
WKHDSSOLFDWLRQ7KLVYDULDEOHZLOOEHXVHGWRKROGDUHIHUHQFHWRWKHGDWDEDVHFRQ
QHFWLRQRQFHZH¦YHHVWDEOLVKHGLW,GHILQHGLWLQWKHJOREDOVFRSHEHFDXVHZH¦UHJRLQJ
WRKDYHWRUHIHUWRLWDOORYHUWKHSODFH
0 2QWKHVHIRXUOLQHV,¦PGHILQLQJVRPHvarVIRUWKHopenDatabaseFDOO
shortName
$VWULQJWKDWZLOOEHXVHGWRUHIHUWRWKHGDWDEDVHILOHRQGLVN
version
$QXPEHUWKDW\RXFDQXVHWRPDQDJHXSJUDGHVDQGEDFNZDUGFRPSDWLELOLW\
ZKHQ\RXQHHGWRFKDQJH\RXUGDWDEDVHVFKHPD
displayName
$VWULQJWKDWZLOOEHSUHVHQWHGWRWKHXVHULQWKHLQWHUIDFH)RUH[DPSOHWKH
GLVSOD\ QDPH DSSHDUV LQ WKH 6HWWLQJV DSSOLFDWLRQ RQ WKH L3KRQH LQ WKH 6HW
WLQJVൺ6DIDULൺ'DWDEDVHVSDQHO
maxSize
7KHPD[LPXPQXPEHURINLORE\WHVWRZKLFK\RXWKLQN\RXUGDWDEDVHZLOOJURZ
'DWDEDVHVL]HOLPLWVDUHVWLOOEHLQJLPSOHPHQWHGE\EURZVHUYHQGRUVDW
WKLVWLPHVRVRPHWULDODQGHUURUZKLOHWHVWLQJ\RXUDSSOLFDWLRQLVLQ
4
£ RUGHU7KHFXUUHQWGHIDXOWRQWKHL3KRQHLV0%,I\RXUGDWDEDVHJURZV
Ue,
EH\RQGWKLVOLPLWWKHXVHUZLOODXWRPDWLFDOO\EHDVNHGWRDOORZRUGHQ\
WKHVL]HLQFUHDVH,IKHDOORZVWKHLQFUHDVHWKHGDWDEDVHVL]HOLPLWZLOOEH
XSSHG WR 0% ,I KH GHQLHV WKH LQFUHDVH D QUOTA_ERR HUURU ZLOO EH
UHWXUQHG6HH7DEOHIRUDOLVWRIGDWDEDVHHUURUFRGHV
© :LWKP\SDUDPHWHUVVHW,FDOOopenDatabaseRQWKLVOLQHDQGVWRUHWKHFRQQHFWLRQLQ
WKHdbYDULDEOH,IWKHGDWDEDVHGRHVQ¦WDOUHDG\H[LVWLWZLOOEHFUHDWHG
1RZWKDWZHKDYHDGDWDEDVHFRQQHFWLRQZHQHHGWRFUHDWHDQentriesWDEOHLIRQH
GRHVQ¦WDOUHDG\H[LVW
O $OOGDWDEDVHTXHULHVPXVWWDNHSODFHLQWKHFRQWH[WRIDWUDQVDFWLRQVR,EHJLQRQH
KHUHE\FDOOLQJWKHtransactionPHWKRGRIWKHdbREMHFW7KHUHPDLQLQJOLQHVFRP
SULVHDIXQFWLRQWKDWLVVHQWWRWKHWUDQVDFWLRQDVWKHVROHSDUDPHWHU
© +HUH,EHJLQDQDQRQ\PRXVIXQFWLRQDQGSDVVWKHWUDQVDFWLRQLQWRLW7REHSHUIHFWO\
KRQHVWSDVVLQJWKHWUDQVDFWLRQLQWRLWVRZQFDOOEDFNIXQFWLRQPDNHVQRVHQVHWRPH
EXWWKDW¦VZKDW\RXKDYHWRGR
© 2QFHLQVLGHWKHIXQFWLRQ,FDOOWKHexecuteSqlPHWKRGRIWKHWUDQVDFWLRQREMHFWWR
H[HFXWHDVWDQGDUG&5($7(7$%/(TXHU\
,I\RXZHUHWRODXQFKWKHDSSDVLVLWZRXOGFUHDWHDGDWDEDVHQDPHG.LORRQ\RXU
L3KRQH <RX FDQ VHH WKLV E\ QDYLJDWLQJ WR 6HWWLQJVൺ6DIDULൺ'DWDEDVHVൺ.LOR RQ WKH
L3KRQH)LJXUHVKRZVWKHGDWDEDVHVHWWLQJV
— AttT -? 2 01 PM
Kilo
Used 10.0 KB
Max Size 50 MB
)LJXUH7KHGDWDEDVHSDQHORQWKHL3KRQH
,QWKHGHVNWRSYHUVLRQRI6DIDUL\RXFDQDFWXDOO\YLHZDQGLQWHUDFWZLWK\RXUFOLHQW
VLGHGDWDEDVHVE\QDYLJDWLQJWR'HYHORSൺ6KRZ:HE,QVSHFWRUWKHQFOLFNLQJWKH'D
WDEDVHVWDE,IWKH'HYHORSPHQXLVQRWDYDLODEOHJRLQWR6DIDUL¦V3UHIHUHQFHVDQGHQDEOH
WKH'HYHORSPHQXRQWKH$GYDQFHGSUHIHUHQFHVSDJH
7KH'DWDEDVHVWDELVQDPHG6WRUDJHLQ:HE.LW,WKLQN6WRUDJHLVDPRUH
DFFXUDWH QDPH VR , ZRXOGQ¦W EH VXUSULVHG LI WKLV FKDQJH HYHQWXDOO\
VKRZVXSLQ6DIDUL
7KH:HE,QVSHFWRULQFOXGHGLQGHVNWRS6DIDULLVH[WUHPHO\KHOSIXOZKHQGHEXJJLQJ
%\GHIDXOWLWDSSHDUVDVDSDQHRI\RXUFXUUHQWEURZVHUZLQGRZ,I\RXFOLFNWKHXQGRFN
LFRQKRYHURYHUWKHLFRQVDWWKHERWWRPOHIWWRVHHZKDWWKH\GR:HE,QVSHFWRUZLOO
DSSHDULQDVHSDUDWHZLQGRZDVVKRZQLQ)LJXUH7KHLQWHUIDFHHYHQDOORZV\RXWR
VHQG DUELWUDU\ 64/ TXHULHV WR WKH GDWDEDVH E\ FOLFNLQJ RQ WKH GDWDEDVH QDPH VHH
)LJXUH
Web Inspector — file:///Users/jstark/Desktop/kilox/index.html#home
Elements Resources
J
Scripts
CI
Profiles Databases * Search Databases
]
DATABASES id date food calories
1 10/18/2009 Noodles 325
Kilo 2 10/18/2009 Salad 75
3 10/18/2009 Banana 100
_ sqlite_sequence
LOCAL STORAGE
SESSION STORAGE
U >2 C 1
)LJXUH7KH'DWDEDVHVWDELQ6DIDUL¦V:HE,QVSHFWRUZLWKVRPHWHVWUHFRUGVGLVSOD\HG
Inserting Rows
1RZWKDWZHKDYHDGDWDEDVHVHWXSWRUHFHLYHVRPHHQWULHVZHFDQVWDUWEXLOGLQJWKH
createEntry() IXQFWLRQ )LUVW \RX KDYH WR RYHUULGH WKH VXEPLW HYHQW RI WKH
#createEntryIRUP<RXFDQGRVRE\ELQGLQJWKHcreateEntry()IXQFWLRQWRWKHVXEPLW
HYHQWLQWKHGRFXPHQWUHDG\IXQFWLRQLQNLORMVKHUH,MXVWVKRZWKHILUVWIHZOLQHVZLWK
WKHDGGHGOLQHRIFRGHLQEROG
$('#createEntry form').submit(createEntry);
...
« rs r\ Web Inspector — file:///Users/jstark/Desktop/kilox/index.html
isi
Elements
e
Resources
c* B i D i
Scripts Profiles Databases * Search Databases
J
DATABASES > SELECT
* FROM entries
id date food calories
Kilo 1 Noodles 325
10/18/2009
2 10/18/2009 Salad 75
LOCAL STORAGE
3 10/18/2009 Banana 100
SESSION STORAGE
>
>3 -1 A
)LJXUH 7KH 'DWDEDVHV WDE LQ 6DIDUL¦V :HE ,QVSHFWRU DOORZV \RX WR H[HFXWH DUELWUDU\ 64/
VWDWHPHQWVDJDLQVW\RXUGDWDEDVH
1RZZKHQDXVHUVXEPLWVWKH #createEntryIRUPWKH createEntry()IXQFWLRQZLOOEH

FDOOHG1H[WDGGWKHIROORZLQJWRNLORMVWRFUHDWHWKHUHFRUGLQWKHGDWDEDVH
function createEntry() {
var date = sessionStorage.currentDate;O
var calories = $('#calories').val();
var food = $('#food').val();
db.transaction(0
function(transaction) {
transaction.executeSql(
'INSERT INTO entries (date, calories, food) VALUES (?, ?, ?);',
[date, calories, food],
function(){
refreshEntries();
jQT.goBack();
},
errorHandler
);
}
);
return false;
}
o ,¦P VHWWLQJ VRPH YDULDEOHV WKDW ,¦P JRLQJ WR XVH LQ WKH 64/ TXHU\ ,I \RX UHFDOO
WKH GDWH WKDW WKH XVHU WDSSHG RQ WKH 'DWHV SDQHO ZLOO EH VWRUHG LQ
sessionStorage.currentDate7KHRWKHUWZRYDOXHVcaloriesDQG foodDUHSXOOHG
RXWRIWKHGDWDHQWU\IRUPXVLQJWKHVDPHDSSURDFKWKDWZHVDZHDUOLHUZLWKWKH
6HWWLQJVIRUP
0 7KHQ,RSHQDGDWDEDVHWUDQVDFWLRQDQGUXQDQexecuteSql()FDOO+HUH,DPSDVVLQJ
IRXUSDUDPHWHUVWRWKHexecuteSql()PHWKRG
'INSERT INTO entries (date, calories, food) VALUES (?, ?, ?);'
7KLV LV WKH VWDWHPHQW WKDW ZLOO EH H[HFXWHG 7KH TXHVWLRQ PDUNV DUH GDWD
SODFHKROGHUV
[date, calories, food]
7KLVLVDQDUUD\RIWKHYDOXHVEHLQJVHQWWRWKHGDWDEDVH7KH\FRUUHVSRQGE\
SRVLWLRQZLWKWKHGDWDSODFHKROGHUTXHVWLRQPDUNVLQWKH64/VWDWHPHQW
function(){refreshEntries();jQT.goBack();}
7KLVDQRQ\PRXVIXQFWLRQZLOOH[HFXWHLIWKH64/TXHU\LVVXFFHVVIXO
errorHandler
7KLVLVWKHQDPHRIWKHIXQFWLRQWKDWZLOOH[HFXWHLIWKH64/TXHU\IDLOV
Error handling
$VVXPLQJWKHLQVHUWLVVXFFHVVIXOWKHDQRQ\PRXVIXQFWLRQSDVVHGDVWKHWKLUGSDUDP
HWHUZLOOEHH[HFXWHG,WFDOOVWKHrefreshEntries()IXQFWLRQZKLFKDWWKHPRPHQWRQO\
XSGDWHVWKHWLWOHRIWKH'DWHSDQHOEXWZLOOVRRQFDXVHWKHHQWULHV\RXFUHDWHWRDSSHDU
LQWKHOLVWWKHUHDQGLWFDOOVM47RXFK¦V goBack()IXQFWLRQWRGLVPLVVWKH1HZ(QWU\
SDQHODQGUHWXUQWRWKH'DWHSDQHO
,IWKHLQVHUWLVQRWVXFFHVVIXOWKHerrorHandler()IXQFWLRQZLOOUXQ$GGWKHIROORZLQJ
WRWKHNLORMVILOH
function errorHandler(transaction, error) {
alert('Oops. Error was '+error.message+' (Code '+error.code+')');
return true;
}
7KHHUURUKDQGOHULVSDVVHGWZRSDUDPHWHUVWKHWUDQVDFWLRQREMHFWDQGWKHHUURUREMHFW
+HUH,¦PXVLQJWKHHUURUREMHFWWRDOHUWWKHXVHUWRWKHPHVVDJHDQGHUURUFRGHWKDW
ZHUHWKURZQ
(UURUKDQGOHUVPXVWUHWXUQWUXHRUIDOVH:KHQDQHUURUKDQGOHUUHWXUQVWUXHLH£<HV
WKLVLVDIDWDOHUURU¤H[HFXWLRQLVKDOWHGDQGWKHHQWLUHWUDQVDFWLRQLVUROOHGEDFN:KHQ
DQ HUURU KDQGOHU UHWXUQV IDOVH LH £1R WKLV LV QRW D IDWDO HUURU¤ H[HFXWLRQ ZLOO
FRQWLQXH
,QVRPHFDVHV\RXPLJKWZDQWWREUDQFKEDVHGRQWKHW\SHRIHUURUWRGHFLGHZKHWKHU
\RXVKRXOGUHWXUQWUXHRUIDOVH7DEOHVKRZVWKHFXUUHQWSRVVLEOHHUURUFRGHVDF
FRUGLQJWRWKH:&:HE'DWDEDVHZRUNLQJGUDIWVSHFLILFDWLRQ
7DEOH:HEGDWDEDVHHUURUFRGHV
Constant Code Situation
UNKNOWN_ERR 0 The transaction failed for reasons unrelated to the database itself and not covered by any
other error code.
DATABASE_ERR 1 The statement failed for database reasons not covered by any other error code.
Constant Code Situation
VERSION_ERR 2 The operation failed because the actual database version was not what it should be. For
example, a statement found that the actual database version no longer matched the expected
version of the Database or DatabaseSync object, or the Database.changeVer
sion() or DatabaseSync.changeVersion() method was passed a version that
doesn’t match the actual database version.
TOO_LARGE_ERR 3 The statement failed because the data returned from the database was too large. The SQL
LIMIT modifier might be useful to reduce the size of the result set.
QUOTA_ERR 4 The statement failed because there was not enough remaining storage space, or the storage
quota was reached and the user declined to give more space to the database.
SYNTAX_ERR 5 The statement failed because of a syntax error, or the number of arguments did not match
the number of ? placeholders in the statement, or the statement tried to use a statement
that is not allowed, such as BEGIN, COMMIT, or ROLLBACK, or the statement tried to use a
verb that could modify the database but the transaction was read-only.
CONSTRAINT_ERR 6 An INSERT, UPDATE, or REPLACE statement failed due to a constraint failure. For example,
a row was being inserted and the value given for the primary key column duplicated the value
of an existing row.
TIMEOUT_ERR 7 A lock for the transaction could not be obtained in a reasonable time.
<RXPD\KDYHQRWLFHGWKDWWKHHUURUKDQGOHUIXQFWLRQDFFHSWVDWUDQVDFWLRQREMHFWLQ
DGGLWLRQ WR WKH HUURU REMHFW ,W¦V FRQFHLYDEOH WKDW LQ VRPH FDVHV \RX PLJKW ZDQW WR
H[HFXWHD64/VWDWHPHQWLQVLGHRIWKHHUURUKDQGOHUSHUKDSVWRORJWKHHUURURUUHFRUG
VRPHPHWDGDWDIRUGHEXJJLQJRUFUDVKUHSRUWLQJSXUSRVHV7KHWUDQVDFWLRQREMHFWSD
UDPHWHUDOORZV\RXWRPDNHPRUHexecuteSql()FDOOVIURPLQVLGHWKHHUURUKDQGOHUOLNH
VR
transaction.executeSql('INSERT INTO errors (code, message) VALUES (?, ?);',
[error.code, error.message]);
return false;
}
3OHDVHWDNHVSHFLDOQRWHRIWKHIDFWWKDW,KDYHWRUHWXUQfalseIURPWKHHUURUKDQGOHULI
,ZDQWP\executeSql()VWDWHPHQWWRUXQ,I,UHWXUQtrueRUQRWKLQJDWDOOWKHHQWLUH
WUDQVDFWLRQ¢LQFOXGLQJWKLV64/VWDWHPHQW¢ZLOOEHUROOHGEDFNWKHUHE\SUHYHQWLQJ
WKHGHVLUHGUHVXOW
Transaction Callback Handlers

$OWKRXJK,ZRQ¦WEHGRLQJVRLQP\H[DPSOHV\RXVKRXOGNQRZWKDW\RXFDQDOVR
VSHFLI\VXFFHVVDQGHUURUKDQGOHUVRQWKH transactionPHWKRGLWVHOI7KLVJLYHV\RXD
FRQYHQLHQWORFDWLRQWRH[HFXWHFRGHDIWHUDORQJVHULHVRIexecuteSql()VWDWHPHQWVKDYH
EHHQFRPSOHWHG
2GGO\WKHSDUDPHWHURUGHUIRUWKH transactionPHWKRG¦VFDOOEDFNVLVGHILQHGWREH
HUURUWKHQVXFFHVVWKHUHYHUVHRIWKHRUGHUIRUexecuteSql()+HUH¦VDYHUVLRQRIWKH
createEntry()IXQFWLRQZLWKWUDQVDFWLRQFDOOEDFNVDGGHGWRZDUGWKHHQG
var date = sessionStorage.currentDate;
db.transaction(
function(){
refreshEntries();
jQT.goBack();
},
errorHandler
);
},
transactionErrorHandler,
transactionSuccessHandler
);
return false;
}
Selecting Rows and Handling Result Sets

7KHQH[WVWHSLVWRH[SDQGWKHrefreshEntries()IXQFWLRQWRGRPRUHWKDQMXVWVHWWKH
WLWOHEDUWRWKHVHOHFWHGGDWH6SHFLILFDOO\,¦PJRLQJWRTXHU\WKHGDWDEDVHIRUHQWULHVRQ
WKHVHOHFWHGGDWHDQGWKHQDSSHQGWKHPWRWKH #date ulHOHPHQWXVLQJWKHKLGGHQ
entryTemplate+70/IRUVWUXFWXUH,W¦VEHHQDZKLOHVLQFHZHORRNHGDWWKDWFRGHVR
KHUH¦VWKH'DWHSDQHODJDLQ
<div id="date">
<h1>Date</h1>
<a class="button slideup" href="#createEntry">+</a>
</div>
<li id="entryTemplate" class="entry" style="display:none"> o
</li>
</ul>
</div>
o 5HFDOOWKDW,KDGVHWWKHVW\OHDWWULEXWHRIWKH liWR display:

noneZKLFKFDXVHVLW
QRWWRVKRZXSRQWKHSDJH,GLGWKLVVR,FRXOGXVHWKDW+70/VQLSSHWDVDWHPSODWH
IRUWKHGDWDEDVHURZV
+HUH¦V WKH FRPSOHWH refreshEntries() IXQFWLRQ ZKLFK \RX PXVW XVH WR UHSODFH WKH
H[LVWLQJrefreshEntries()IXQFWLRQ
var currentDate = sessionStorage.currentDate; o
$('#date ul li:gt(0)').remove();0
db.transaction(©
'SELECT * FROM entries WHERE date = ? ORDER BY food;',O
[currentDate], ©
function (transaction, result) {G
for (var i=0; i < result.rows.length; i++) {
var row = result.rows.item(i);G
var newEntryRow = $('#entryTemplate').clone();©
newEntryRow.removeAttr('id');
newEntryRow.removeAttr('style');
newEntryRow.data('entryId', row.id);©
newEntryRow.appendTo('#date ul');0
newEntryRow.find('.label').text(row.food);
newEntryRow.find('.calories').text(row.calories);
}
},
errorHandler
);
}
);
}
O 7KHVH WZR OLQHV VHW WKH WRROEDU WLWOH RI WKH 'DWH SDQHO WR WKH FRQWHQWV RI WKH
currentDateYDOXHVDYHGLQsessionStorage
© 2QWKLVOLQH,¦PXVLQJM4XHU\¦Vgt()IXQFWLRQgtVWDQGVIRU£JUHDWHUWKDQ¤WRVHOHFW
DQGUHPRYHDQ\ liHOHPHQWVZLWKDQLQGH[JUHDWHUWKDQ7KHILUVWWLPHWKURXJK
WKLV ZLOO GR QRWKLQJ EHFDXVH WKH RQO\ li ZLOO EH WKH RQH ZLWK WKH id RI
entryTemplateZKLFKKDVDQLQGH[RI+RZHYHURQVXEVHTXHQWYLVLWVWRWKHSDJH
ZHQHHGWRUHPRYHDQ\DGGLWLRQDO liVEHIRUHDSSHQGLQJURZVIURPWKHGDWDEDVH
DJDLQ2WKHUZLVHLWHPVZRXOGHQGXSDSSHDULQJPXOWLSOHWLPHVLQWKHOLVW
G 2Q WKHVH WKUHH OLQHV ,¦P VHWWLQJ XS D GDWDEDVH WUDQVDFWLRQ DQG WKH executeSql
VWDWHPHQW
© 7KLV OLQH FRQWDLQV WKH ILUVW SDUDPHWHU IRU WKH executeSql VWDWHPHQW ,W¦V D VLPSOH
SELECTVWDWHPHQWZLWKDTXHVWLRQPDUNDFWLQJDVDGDWDSODFHKROGHU
© 7KLV LV D VLQJOHHOHPHQW DUUD\ WKDW FRQWDLQV WKH FXUUHQWO\ VHOHFWHG GDWH 7KLV ZLOO
UHSODFHWKHTXHVWLRQPDUNLQWKH64/TXHU\1RWHWKDWTXRWHVDURXQGWKH?DUHQRW
QHFHVVDU\¢HVFDSLQJDQGTXRWLQJRIGDWDLVKDQGOHGDXWRPDWLFDOO\
© 7KLVDQRQ\PRXVIXQFWLRQZLOOEHFDOOHGLQWKHHYHQWRIDVXFFHVVIXOTXHU\,WDFFHSWV
WZRSDUDPHWHUVtransactionDQGresult
7KHtransactionREMHFWFDQEHXVHGZLWKLQWKHVXFFHVVKDQGOHUWRVHQGQHZTXHULHV
WRWKHGDWDEDVHDVZHVDZZLWKWKHHUURUKDQGOHUSUHYLRXVO\+RZHYHUWKHUHLVQR
QHHGWRGRWKDWLQWKLVFDVHVRZHZRQ¦WEHXVLQJLW
7KH result REMHFW LV ZKDW ZH DUH PRVW LQWHUHVWHG LQ KHUH ,W KDV WKUHH UHDGRQO\
SURSHUWLHV rowsAffectedZKLFK\RXFDQXVHWRGHWHUPLQHWKHQXPEHURIURZVDI
IHFWHGE\DQLQVHUWXSGDWHRUGHOHWHTXHU\insertIdZKLFKUHWXUQVWKHSULPDU\NH\
RIWKHODVWURZFUHDWHGLQDQLQVHUWRSHUDWLRQDQGrowsZKLFKKDVWKHIRXQGUHFRUGV
7KHrowsREMHFWZLOOFRQWDLQRUPRUHrowREMHFWVDQGDOVRKDVDlengthSURSHUW\
WKDW,XVHLQWKHforORRSRQWKHQH[WOLQH
© 2QWKLVOLQH,XVHWKHitem()PHWKRGRIWKHrowsREMHFWWRVHWWKHrowYDULDEOHWRWKH
FRQWHQWVRIWKHFXUUHQWURZ
o 2QWKLVOLQH,clone()WKHWHPSODWHliDQGUHPRYHLWVidDQGstyleDWWULEXWHVRQWKH
QH[WWZROLQHV5HPRYLQJWKHVW\OHZLOOPDNHWKHURZYLVLEOHDQGUHPRYLQJWKH id
LVLPSRUWDQWEHFDXVHRWKHUZLVHZHZRXOGHQGXSZLWKPXOWLSOHLWHPVRQWKHSDJH
ZLWKWKHVDPHid
o 2QWKLVOLQH,VWRUHWKHYDOXHRIWKHrow¦VidSURSHUW\DVGDWDRQWKHliLWVHOIZH¦OO
QHHGWKDWODWHULIWKHXVHUGHFLGHVWRGHOHWHWKHHQWU\
© 7KLVLVZKHUH,DSSHQGWKH liHOHPHQWWRWKHSDUHQW ul2QWKHQH[WWZROLQHV,
XSGDWHWKHlabelDQGcaloriesVSDQFKLOGHOHPHQWVRIWKHliZLWKWKHFRUUHVSRQGLQJ
GDWDIURPWKHrowREMHFW
:LWK DOO WKLV RXW RI WKH ZD\ RXU 'DWH SDQHO ZLOO GLVSOD\ DQ li IRU HDFK URZ LQ WKH
GDWDEDVHWKDWFRUUHVSRQGVWRWKHVHOHFWHGGDWH(DFKURZZLOOKDYHDODEHOFDORULHVDQG
D'HOHWHEXWWRQ2QFHZHFUHDWHDIHZURZV\RXFDQVHHWKDWZHQHHGWRDGGDELWRI
&66WRVW\OHWKLQJVXSQLFHO\)LJXUH
6DYHWKHIROORZLQJ&66LQWRDILOHQDPHGNLORFVV
#date ul li {
position: relative;
}
#date ul li span {
color: #FFFFFF;
text-shadow: rgba(0,0,0,.7) 0 1px 2px;
}
#date ul li .delete {
position: absolute;
top: 5px;
right: 6px;
font-size: 12px;
line-height: 30px;
padding: 0 3px;
border-width: 0 5px;
-webkit-border-image: url(themes/jqt/img/button.png) 0 5 0 5;
}
1RZOLQNWRNLORFVVE\DGGLQJWKHIROORZLQJOLQHWRWKHKHDGVHFWLRQRILQGH[KWPO
<link type="text/css" rel="stylesheet" media="screen" href="kilo.css">
/a
1-43 PM
9/17/2009
U
)LJXUH7KHHQWULHVDUHVKRZLQJXSQRZEXWWKH\QHHGWREHIDQFLHGXSZLWKVRPH&66
$OWKRXJK WKH 'HOHWH EXWWRQV QRZ ORRN OLNH EXWWRQV WKH\ ZRQ¦W GR DQ\WKLQJ ZKHQ
WDSSHGDWWKLVSRLQWVHH)LJXUH7KLVLVEHFDXVH,VHWWKHPXSXVLQJWKHspanWDJ
ZKLFKLVQRWDQLQWHUDFWLYHHOHPHQWLQDQ+70/SDJH
1.43 Py
9/17/2009
Bagel 400 Dm
Beet ISO tMMt
Soup 3 SO Dm
u
)LJXUH7KHHQWULHVZLWK&66DSSOLHG
Deleting Rows
7RPDNHP\'HOHWHEXWWRQVGRVRPHWKLQJZKHQFOLFNHG,QHHGWRELQGDFOLFNHYHQW
KDQGOHUWRWKHPZLWKM4XHU\,GLGWKHVDPHVRUWRIWKLQJHDUOLHUZLWKWKHLWHPVRQWKH
'DWHSDQHOXVLQJM4XHU\¦Vclick()PHWKRG
8QIRUWXQDWHO\WKDWDSSURDFKZRQ¦WZRUNLQWKLVFDVH8QOLNHWKHLWHPVRQWKH'DWHV
SDQHO WKH HQWULHV RQ WKH 'DWH SDQHO DUH QRW VWDWLF¢WKH\ DUH DGGHG DQG UHPRYHG
WKURXJKRXWWKHFRXUVHRIWKHXVHU¦VVHVVLRQ,QIDFWZKHQWKHDSSOLFDWLRQODXQFKHV
WKHUHDUHQRHQWULHVYLVLEOHRQWKH'DWHSDQHODWDOO7KHUHIRUHZHKDYHQRWKLQJWRELQG
WKHFOLFNWRDWODXQFK
7KHVROXWLRQLVWRELQGFOLFNHYHQWVWRWKH'HOHWHEXWWRQVDVWKH\DUHFUHDWHGE\WKH
refreshEntries()IXQFWLRQ7RGRVRDGGWKHIROORZLQJWRWKHHQGRIWKHforORRS
newEntryRow.find('.delete').click(function(){ o
var clickedEntry = $(this).parent();0
var clickedEntryId = clickedEntry.data('entryId');©
deleteEntryById(clickedEntryId); o
clickedEntry.slideUp();
});
o 7KHIXQFWLRQEHJLQVE\VSHFLI\LQJWKDWZHDUHORRNLQJIRUDQ\HOHPHQWVWKDWPDWFK
WKH#date .deleteVHOHFWRUDQGFDOOLQJWKHclick()PHWKRGRQWKRVHHOHPHQWV7KH
click()PHWKRGDFFHSWVWKHDQRQ\PRXVIXQFWLRQWKDWZLOOEHXVHGWRKDQGOHWKH
HYHQWDVLWVRQO\SDUDPHWHU
0 :KHQWKHFOLFNKDQGOHULVWULJJHUHGWKHSDUHQWRIWKH'HOHWHEXWWRQLHWKHliLV
ORFDWHGDQGVWRUHGLQWKHclickedEntryYDULDEOH
0 2QWKLVOLQH,¦PVHWWLQJWKH clickedEntryIdYDULDEOHWRWKHYDOXHRIWKH entryId,
VWRUHGRQWKHliHOHPHQWZKHQLWZDVFUHDWHGE\WKHrefreshEntries()IXQFWLRQ
O 2QWKLVOLQH,SDVVWKHFOLFNHGidLQWRWKHdeleteEntryById()IXQFWLRQDQGWKHQRQ
WKHQH[WOLQH,XVHM4XHU\¦VslideUp()PHWKRGWRJUDFHIXOO\UHPRYHWKHliIURPWKH
SDJH
-DYD6FULSWJXUXVLQWKHFURZGPLJKWZRQGHUZK\,GLGQ¦WXVHM4XHU\¦V
live()IXQFWLRQWRELQGWKHGHOHWHKDQGOHUWRWKH'HOHWHEXWWRQV8Q
m
UP, IRUWXQDWHO\WKHlive()IXQFWLRQGRHVQ¦WZRUNZLWKclickRQWKHL3KRQH
EHFDXVH clickLVQ¦WWKHHYHQWWKDWEXEEOHVXSWKH'20)RUPRUHLQ
IRUPDWLRQ RQ M4XHU\¦V live() IXQFWLRQ SOHDVH YLVLW KWWSGRFVMTXHU\
FRP(YHQWVOLYHW\SHIQ
$GGWKHIROORZLQJdeleteEntryById()IXQFWLRQWRNLORMVWRUHPRYHWKHHQWU\IURPWKH
GDWDEDVH
function deleteEntryById(id) {
db.transaction(
transaction.executeSql('DELETE FROM entries WHERE id=?;',
[id], null, errorHandler);
}
);
}
$VZH¦YHVHHQLQSUHYLRXVH[DPSOHV,RSHQDWUDQVDFWLRQSDVVLWDFDOOEDFNIXQFWLRQ
ZLWKWKHWUDQVDFWLRQREMHFWDVWKHSDUDPHWHUDQGFDOOWKH executeSql()PHWKRG,¦P
SDVVLQJLQWKH64/TXHU\DQGWKH idRIWKHFOLFNHGUHFRUGDVWKHILUVWWZRDUJXPHQWV
7KHWKLUGDUJXPHQWLVZKHUHWKHVXFFHVVKDQGOHUZRXOGJREXW,GRQ¦WQHHGRQHVR,
MXVWVSHFLI\null$VWKHIRXUWKDUJXPHQW,VSHFLI\WKHVDPHGHIDXOWHUURUKDQGOHUWKDW
ZH¦YHEHHQXVLQJDOODORQJ
$QGWKHUH\RXKDYHLW,WPD\KDYHWDNHQDORWRIGHVFULSWLRQWRJHWWRWKLVSRLQWEXWLQ
UHDOLW\ZHKDYHQ¦WKDGWRZULWHDOOWKDWPXFKFRGH,QIDFWWKHFRPSOHWHGNLORMVILOH
([DPSOHRQO\FRQWDLQVOLQHVRI-DYD6FULSW
([DPSOH7KHFRPSOHWH-DYD6FULSWOLVWLQJIRU.LORGDWDEDVHLQWHUDFWLRQ
icon: 'kilo.png',
statusBar: 'black'
});
var db;
$('#createEntry form').submit(createEntry);
$('#dates li a').click(function(){
var dayOffset = this.id;
var date = new Date();
date.getFullYear();
refreshEntries();
});
var shortName = 'Kilo';
var version = '1.0';
var displayName = 'Kilo';
var maxSize = 65536;
db = openDatabase(shortName, version, displayName, maxSize);
db.transaction(
' calories INTEGER NOT NULL);'
);
}
);
});
}
jQT.goBack();
return false;
}
db.transaction(
function(){
refreshEntries();
jQT.goBack();
},
errorHandler
);
}
);
return false;
}
$('#date ul li:gt(0)').remove();
db.transaction(
'SELECT * FROM entries WHERE date = ? ORDER BY food;',
[currentDate],
function (transaction, result) {
var row = result.rows.item(i);
var newEntryRow = $('#entryTemplate').clone();
newEntryRow.data('entryId', row.id);
newEntryRow.appendTo('#date ul');
newEntryRow.find('.delete').click(function(){
var clickedEntry = $(this).parent();
var clickedEntryId = clickedEntry.data('entryId');
deleteEntryById(clickedEntryId);
});
}
},
errorHandler
);
}
);
}
function deleteEntryById(id) {
db.transaction(
transaction.executeSql('DELETE FROM entries WHERE id=?;',
[id], null, errorHandler);
}
);
}
return true;
}

,QWKLVFKDSWHU\RXOHDUQHGWZRZD\VWRVWRUHXVHUGDWDRQWKHFOLHQWNH\YDOXHVWRUDJH
DQGWKHFOLHQWVLGH64/GDWDEDVH7KHFOLHQWVLGHGDWDEDVHLQSDUWLFXODURSHQVXSD
ZRUOGRISRVVLELOLWLHVIRUZHEEDVHGDSSOLFDWLRQGHYHORSHUV
7KHRQO\WKLQJVWRSSLQJXVIURPUXQQLQJWKLVH[DPSOHDSSOLFDWLRQLQRIIOLQHPRGHLV
WKDWZHKDYHWRLQLWLDOO\FRQQHFWWRWKHZHEVHUYHUHDFKWLPHWKHDSSLVODXQFKHGWR
GRZQORDGWKH+70/DQGUHODWHGUHVRXUFHV:RXOGQ¦WLWEHVFKZHHWLIZHFRXOGMXVW
FDFKHDOOWKDWVWXIIORFDOO\RQWKHGHYLFH"
<HDKLWZRXOG2QWRWKHQH[WFKDSWHU
CHAPTER 6
Going Offline
7KHUH¦VDIHDWXUHRI+70/FDOOHGWKHRIIOLQHDSSOLFDWLRQFDFKHWKDWDOORZVXVHUVWRUXQ
ZHEDSSVHYHQZKHQWKH\DUHQRWFRQQHFWHGWRWKH,QWHUQHW,WZRUNVOLNHWKLVZKHQD
XVHUQDYLJDWHVWR\RXUZHEDSSWKHEURZVHUGRZQORDGVDQGVWRUHVDOOWKHILOHVLWQHHGV
WR GLVSOD\ WKH SDJH +70/ &66 -DYD6FULSW LPDJHV HWF 7KH QH[W WLPH WKH XVHU
QDYLJDWHVWR\RXUZHEDSSWKHEURZVHUZLOOUHFRJQL]HWKH85/DQGVHUYHWKHILOHVRXW
RIWKHORFDODSSOLFDWLRQFDFKHLQVWHDGRISXOOLQJWKHPDFURVVWKHQHWZRUN
The Basics of the Offline Application Cache

7KHPDLQFRPSRQHQWRIWKHRIIOLQHDSSOLFDWLRQFDFKHLVDFDFKHPDQLIHVWILOHWKDW\RX
KRVWRQ\RXUZHEVHUYHU,¦PJRLQJWRXVHDVLPSOHH[DPSOHWRH[SODLQWKHFRQFHSWV
LQYROYHGDQGWKHQ,¦OOVKRZ\RXKRZWRDSSO\ZKDW\RX¦YHOHDUQHGWRWKH.LORH[DPSOH
ZH¦YHEHHQZRUNLQJRQ
$PDQLIHVWILOHLVMXVWDVLPSOHWH[WGRFXPHQWWKDWOLYHVRQ\RXUZHEVHUYHUDQGLVVHQW
WRWKHXVHU¦VGHYLFHZLWKDFRQWHQWW\SHRIcache-manifest7KHPDQLIHVWFRQWDLQVDOLVW
RIILOHVWKDWDXVHU¦VGHYLFHPXVWGRZQORDGDQGVDYHLQRUGHUWRIXQFWLRQ&RQVLGHUD
ZHEGLUHFWRU\FRQWDLQLQJWKHIROORZLQJILOHV
index.html
logo.jpg
scripts/demo.js
styles/screen.css
,QWKLVFDVHindex.htmlLVWKHSDJHWKDWZLOOORDGLQWRWKHEURZVHUZKHQXVHUVYLVLW\RXU
DSSOLFDWLRQ7KHRWKHUILOHVDUHUHIHUHQFHGIURPZLWKLQindex.html7RPDNHHYHU\WKLQJ
DYDLODEOHRIIOLQHFUHDWHDILOHQDPHG demo.manifestLQWKHGLUHFWRU\ZLWK index.html
+HUH¦VDGLUHFWRU\OLVWLQJVKRZLQJWKHDGGHGILOH
demo.manifest
index.html
logo.jpg
scripts/demo.js
styles/screen.css
91
1H[WDGGWKHIROORZLQJOLQHVWRdemo.manifest
CACHE MANIFEST
index.html
logo.jpg
scripts/demo.js
styles/screen.css
7KHSDWKVLQWKHPDQLIHVWDUHUHODWLYHWRWKHORFDWLRQRIWKHPDQLIHVWILOH<RXFDQDOVR
XVHDEVROXWH85/VOLNHVR
CACHE MANIFEST
http://www.example.com/index.html
http://www.example.com/logo.jpg
http://www.example.com/scripts/demo.js
http://www.example.com/styles/screen.css
1RZWKDWWKHPDQLIHVWILOHLVFUHDWHG\RXQHHGWROLQNWRLWE\DGGLQJDPDQLIHVWDWWULEXWH
WRWKH+70/WDJLQVLGHindex.html
<html manifest="demo.manifest">
<RX PXVW VHUYH WKH PDQLIHVW ILOH ZLWK WKH text/cache-manifest FRQWHQW W\SH RU WKH
EURZVHUZLOOQRWUHFRJQL]HLW,I\RXDUHXVLQJWKH$SDFKHZHEVHUYHURUDFRPSDWLEOH
ZHEVHUYHU\RXFDQDFFRPSOLVKWKLVE\DGGLQJDQKWDFFHVVILOHWR\RXUZHEGLUHFWRU\
ZLWKWKHIROORZLQJOLQH
AddType text/cache-manifest .manifest
,IWKHKWDFFHVVILOHGRHVQ¦WZRUNIRU\RXUHIHUWRWKHSRUWLRQRI\RXUZHE
VHUYHU GRFXPHQWDWLRQ WKDW SHUWDLQV WR 0,0( W\SHV <RX PXVW
4
DVVRFLDWH WKH ILOH H[WHQVLRQ PDQLIHVW ZLWK WKH 0,0( W\SH RI
text/cache-manifest,I\RXUZHEVLWHLVKRVWHGE\DZHEKRVWLQJSUR
YLGHU\RXUSURYLGHUPD\KDYHDFRQWUROSDQHOIRU\RXUZHEVLWHZKHUH
\RXFDQDGGWKHDSSURSULDWH0,0(W\SH,¦OODOVRVKRZ\RXDQH[DPSOH
WKDWXVHVD3+3VFULSWLQSODFHRIWKHKWDFFHVVILOHDOLWWOHODWHURQLQWKLV
FKDSWHU
Mac OS X and the .htaccess File

,I\RXDUHVHUYLQJXSZHESDJHVRQ\RXUORFDOQHWZRUNXVLQJWKH$SDFKHZHEVHUYHU
WKDW¦VLQFOXGHGZLWK0DF26;LWZLOOLJQRUHDQ\KWDFFHVVILOHLQ\RXUSHUVRQDOZHE
IROGHUWKH6LWHVIROGHUWKDW¦VLQ\RXUKRPHGLUHFWRU\+RZHYHU\RXFDQHQDEOHVXSSRUW
IRUKWDFFHVVE\RSHQLQJ$SSOLFDWLRQVൺ8WLOLWLHVൺ7HUPLQDODQGW\SLQJWKHVHFRPPDQGV
\RX¦OOQHHGWRW\SH\RXUSDVVZRUGZKHQSURPSWHG
cd /etc/apache2/users
sudo pico $USER.conf
7KLVORDGV\RXUSHUVRQDO$SDFKHFRQILJXUDWLRQILOHLQWRWKH3LFRHGLWRU<RXFDQVHHD
OLVWRIHGLWRUFRPPDQGVDWWKHERWWRPRIWKHVFUHHQWKH^V\PEROLQGLFDWHVWKH&RQWURO
NH\8VHWKHDUURZNH\VWRPRYHGRZQWRWKHOLQHAllowOverride NoneDQGUHSODFHWKH
92 | Chapter 6:ಗGoing Offline
ZRUGNoneZLWKWKHZRUGAll7KHQSUHVV&RQWURO;WRH[LWDQVZHU<WRVDYHFKDQJHV
DQGSUHVV5HWXUQWRVDYHWKHILOH7KHQVWDUW6\VWHP3UHIHUHQFHVJRWR6KDULQJDQGLI
QHHGHGFOLFNWKHORFNLFRQODEHOHG£&OLFNWKHORFNWRPDNHFKDQJHV¤DQGW\SH\RXU
SDVVZRUGZKHQSURPSWHG)LQDOO\FOHDUWKHFKHFNER[QH[WWR:HE6KDULQJDQGWKHQ
FKHFNLWDJDLQWKLVUHVWDUWV:HE6KDULQJ7KHZHEVHUYHURQ\RXU0DFVKRXOGQRZ
UHVSHFW WKH VHWWLQJV LQ DQ\ KWDFFHVV ILOHV \RX SXW LQ \RXU 6LWHV GLUHFWRU\ RU LWV
VXEGLUHFWRULHV
2XURIIOLQHDSSOLFDWLRQFDFKHLVQRZLQZRUNLQJRUGHU7KHQH[WWLPHDXVHUEURZVHV
WRKWWSH[DPSOHFRPLQGH[KWPOWKHSDJHDQGLWVUHVRXUFHVZLOOORDGQRUPDOO\RYHUWKH
QHWZRUN,QWKHEDFNJURXQGDOOWKHILOHVOLVWHGLQWKHPDQLIHVWZLOOEHGRZQORDGHGWR
WKHXVHU¦VORFDOGLVNRUKHUL3KRQH¦VIODVKPHPRU\2QFHWKHGRZQORDGFRPSOHWHVDQG
WKHXVHUUHIUHVKHVWKHSDJHVKH¦OOEHDFFHVVLQJWKHORFDOILOHVRQO\6KHFDQQRZGLVFRQ
QHFWIURPWKH,QWHUQHWDQGFRQWLQXHWRDFFHVVWKHZHEDSS
6RQRZWKDWWKHXVHULVDFFHVVLQJRXUILOHVORFDOO\RQKHUGHYLFHZHKDYHDQHZSUREOHP
KRZGRHVVKHJHWXSGDWHVZKHQFKDQJHVDUHPDGHWRWKHZHEVLWH"
:KHQWKHXVHUGRHVKDYHDFFHVVWRWKH,QWHUQHWDQGQDYLJDWHVWRWKH85/RIRXUZHE
DSSKHUEURZVHUFKHFNVWKHPDQLIHVWILOHRQRXUVLWHWRVHHLILWVWLOOPDWFKHVWKHORFDO
FRS\,IWKHUHPRWHPDQLIHVWKDVFKDQJHGWKHEURZVHUGRZQORDGVDOOWKHILOHVOLVWHGLQ
LW,WGRZQORDGVWKHVHLQWKHEDFNJURXQGWRDWHPSRUDU\FDFKH
7KHFRPSDULVRQEHWZHHQWKHORFDOPDQLIHVWDQGWKHUHPRWHPDQLIHVWLV
DE\WHE\E\WHFRPSDULVRQRIWKHILOHFRQWHQWVLQFOXGLQJFRPPHQWVDQG
jJv EODQNOLQHV7KHILOHPRGLILFDWLRQWLPHVWDPSDQGFKDQJHVWRDQ\RIWKH
UHVRXUFHVWKHPVHOYHVDUHLUUHOHYDQWZKHQGHWHUPLQLQJZKHWKHURUQRW
FKDQJHVKDYHEHHQPDGH
,IVRPHWKLQJJRHVZURQJGXULQJWKHGRZQORDGHJWKHXVHUORVHVKHU,QWHUQHWFRQ
QHFWLRQWKHQWKHSDUWLDOO\GRZQORDGHGFDFKHLVDXWRPDWLFDOO\GLVFDUGHGDQGWKHSUH
YLRXVRQHUHPDLQVLQHIIHFW,IWKHGRZQORDGLVVXFFHVVIXOWKHQHZORFDOILOHVZLOOEH
XVHGWKHQH[WWLPHWKHXVHUODXQFKHVWKHDSS
Application Cache Download Behavior

5HPHPEHUWKDWZKHQDPDQLIHVWLVXSGDWHGWKHGRZQORDGRIWKHQHZILOHVWDNHVSODFH
LQWKHEDFNJURXQGDIWHUWKHLQLWLDOODXQFKRIWKHDSS7KLVPHDQVWKDWHYHQDIWHUWKH
GRZQORDGFRPSOHWHVWKHXVHUZLOOVWLOOEHZRUNLQJZLWKWKHROGILOHV,QRWKHUZRUGV
WKHFXUUHQWO\ORDGHGSDJHDQGDOORILWVUHODWHGILOHVGRQ¦WDXWRPDJLFDOO\UHORDGZKHQ
WKHGRZQORDGFRPSOHWHV7KHQHZILOHVWKDWZHUHGRZQORDGHGLQWKHEDFNJURXQGZLOO
QRWEHFRPHYLVLEOHXQWLOWKHXVHUUHODXQFKHVWKHDSS
The Basics of the Offline Application Cache | 93
7KLVLVYHU\VLPLODUWRVWDQGDUGGHVNWRSDSSXSGDWHEHKDYLRU<RXODXQFKDQDSSLW
WHOOV \RX WKDW XSGDWHV DUH DYDLODEOH \RX FOLFN WR GRZQORDG XSGDWHV WKH GRZQORDG
FRPSOHWHVDQG\RXDUHSURPSWHGWRUHODXQFKWKHDSSIRUWKHXSGDWHVWRWDNHHIIHFW
Online Whitelist and Fallback Options

,WLVSRVVLEOHWRIRUFHWKHEURZVHUWRDOZD\VDFFHVVFHUWDLQUHVRXUFHVRYHUWKHQHWZRUN
7KLVPHDQVWKDWWKHEURZVHUZLOOQRWFDFKHWKRVHUHVRXUFHVORFDOO\DQGWKDWWKH\ZLOO
QRWEHDYDLODEOHZKHQWKHXVHULVRIIOLQH7RVSHFLI\DUHVRXUFHDVRQOLQHRQO\\RXXVH
WKHNETWORK:NH\ZRUGWKHWUDLOLQJ:LVHVVHQWLDOLQWKHPDQLIHVWILOHOLNHVR
CACHE MANIFEST
index.html
scripts/demo.js
styles/screen.css
NETWORK:
logo.jpg
+HUH,¦YHZKLWHOLVWHGORJRMSJE\PRYLQJLWLQWRWKHNETWORKVHFWLRQRIWKHPDQLIHVWILOH
:KHQWKHXVHULVRIIOLQHWKHLPDJHZLOOVKRZXSDVDEURNHQLPDJHOLQN)LJXUH
:KHQKHLVRQOLQHLWZLOODSSHDUQRUPDOO\)LJXUH
«nn Offline App Cache Demo

< |+ http://jonathanstark.com/labs/app-cache-2/ C~) (0>T Google )
QQ :::: Home Mail RTM Twitter Facebook iT3 JSC Router Localhost »
Offline App Cache Demo
One error in opening the page. For more information, choose Window > Activity.
)LJXUH:KLWHOLVWHGLPDJHVZLOOVKRZXSDVEURNHQOLQNVZKHQWKHXVHULVRIIOLQH
,I\RXGRQ¦WZDQWRIIOLQHXVHUVWRVHHWKHEURNHQLPDJH\RXFDQXVHWKHFALLBACKNH\
ZRUGWRVSHFLI\DIDOOEDFNUHVRXUFHOLNHVR
CACHE MANIFEST
index.html
scripts/demo.js
styles/screen.css
FALLBACK:
logo.jpg offline.jpg

1 •« |
QD ::::
| | + )rÿhttp://jonathanstark.com/labs/app-cache-2ÿÿÿÿÿ(cVr Google
Home Mail RTM Twitter Faccbook FT3 JSC Router Localhost
2,
»
)LJXUH:KLWHOLVWHGLPDJHVZLOOVKRZXSQRUPDOO\ZKHQWKHXVHULVRQOLQH
1RZZKHQWKHXVHULVRIIOLQHKH¦OOVHHRIIOLQHMSJ)LJXUHDQGZKHQKH¦VRQOLQH

KH¦OOVHHORJRMSJ)LJXUH
7KLVEHFRPHVHYHQPRUHXVHIXOZKHQ\RXFRQVLGHUWKDW\RXFDQVSHFLI\DVLQJOHIDOOEDFN
LPDJHIRUPXOWLSOHUHVRXUFHVE\XVLQJDSDUWLDOSDWK/HW¦VVD\,DGGDQLPDJHVGLUHFWRU\
WRP\ZHEVLWHDQGSXWVRPHILOHVLQLW
/demo.manifest
/index.html
/images/logo.jpg
/images/logo2.jpg
/images/offline.jpg
/scripts/demo.js
/styles/screen.css
Online Whitelist and Fallback Options | 95
«n o Offline App Cache Demo
| -4 | | | + |nhttp://jonathanstark.com/labs/app-cache-2/ 1 C I \Q? Google
QD :::: Home Mail RTM Twitter Facebook FT3 JSC Router Localhost »
image
available
online
only
)LJXUH)DOOEDFNLPDJHVZLOOVKRZXSZKHQWKHXVHULVRIIOLQH
«nn Offline App Cache Demo

| < | | | + |nhttp://jonathanstark.com/labs/app-cache-2ÿÿÿÿÿ(Cÿ'r Google
CD :::: Home Mail RTM Twitter Facebook iT3 JSC Router Localhost »
)LJXUH+RVWHGLPDJHVZLOOVKRZXSQRUPDOO\ZKHQWKHXVHULVRQOLQH
, FDQ QRZ WHOO WKH EURZVHU WR IDOO EDFN WR RIIOLQHMSJ IRU DQ\WKLQJ FRQWDLQHG LQ WKH
LPDJHVGLUHFWRU\OLNHVR
CACHE MANIFEST
index.html
scripts/demo.js
styles/screen.css
FALLBACK:
images/ images/offline.jpg
1RZZKHQWKHXVHULVRIIOLQHKH¦OOVHHRIIOLQHMSJ)LJXUHDQGZKHQKH¦VRQOLQH

KH¦OOVHHORJRMSJDQGORJRMSJ)LJXUH

| -4 |
CD ::::
| | + |nhttp://jonathanstark.com/labs/app-cache-2/ 1
Home Mail RTM Twitter Facebook iT3 JSC
C
Router
I \Qj Google
Localhost
il
»
image image
available available
online online
only only
)LJXUH7KHVDPHIDOOEDFNLPDJHZLOOVKRZXSLQSODFHRIPXOWLSOHLPDJHVZKHQWKHXVHULVRIIOLQH
:KHWKHU\RXVKRXOGDGGUHVRXUFHVWRWKHNETWORKRU FALLBACKVHFWLRQRIWKHPDQLIHVW
ILOHGHSHQGVRQWKHQDWXUHRI\RXUDSSOLFDWLRQ.HHSLQPLQGWKDWWKHRIIOLQHDSSOLFDWLRQ
FDFKHLVSULPDULO\LQWHQGHGWRVWRUHDSSVORFDOO\RQDGHYLFH,W¦VQRWUHDOO\PHDQWWREH
XVHGWRGHFUHDVHVHUYHUORDGLQFUHDVHSHUIRUPDQFHDQGVRRQ
,QPRVWFDVHV\RXVKRXOGEHOLVWLQJDOORIWKHILOHVUHTXLUHGWRUXQ\RXUDSSLQWKHPDQLIHVW
ILOH,I\RXKDYHDORWRIG\QDPLFFRQWHQWDQG\RXDUHQRWVXUHKRZWRUHIHUHQFHLWLQWKH
PDQLIHVW\RXUDSSLVSUREDEO\QRWDJRRGILWIRUWKHRIIOLQHDSSOLFDWLRQFDFKHDQG\RX
PLJKWZDQWWRFRQVLGHUDGLIIHUHQWDSSURDFKDFOLHQWVLGHGDWDEDVHSHUKDSV
Online Whitelist and Fallback Options | 97
«no Offline App Cache Demo
1 -4~[~ | | + | http://ionathanstark.com/labs/app-cache-2/ C /Qr Google
03 :::: Home Mail RTM Twitter Facebook iT3 JSC Router Localhost »
ir k.
a
4
)LJXUH+RVWHGLPDJHVZLOOVKRZXSQRUPDOO\ZKHQWKHXVHULVRQOLQH
Creating a Dynamic Manifest File

1RZWKDWZH¦UHFRPIRUWDEOHZLWKKRZWKHRIIOLQHDSSFDFKHZRUNVOHW¦VDSSO\LWWRWKH
.LORH[DPSOHZH¦YHEHHQZRUNLQJRQ.LORFRQVLVWVRITXLWHDIHZILOHVDQGPDQXDOO\
OLVWLQJWKHPDOOLQDPDQLIHVWILOHZRXOGEHDSDLQ0RUHRYHUDVLQJOHW\SRZRXOGLQYD
OLGDWHWKHHQWLUHPDQLIHVWILOHDQGSUHYHQWWKHDSSOLFDWLRQIURPZRUNLQJRIIOLQH
Running PHP Scripts on Your Web Server

3+3LVDYHUVDWLOHZHEVFULSWLQJODQJXDJHDQGLVVXSSRUWHGE\PRVWZHEKRVWLQJSUR
YLGHUV7KLVPHDQVWKDWRQPRVWZHEVHUYHUV\RXFDQFUHDWHDILOHZKRVHQDPHHQGV
ZLWKWKHH[WHQVLRQSKSDGGVRPH3+3FRGHWRLWYLVLWLWLQ\RXUZHEEURZVHUDQGLW
ZLOOMXVWZRUN,I\RX¦YHEHHQXVLQJDZHEVHUYHURQ\RXUSHUVRQDOFRPSXWHUWRVHUYH
XSSDJHVWR\RXUL3KRQH\RX¦OOQHHGWRJHWVHWXSWRUXQ3+3VFULSWV,I\RX¦UHUXQQLQJ
DZHEVHUYHURQ:LQGRZVVHHKWWSSKSQHWPDQXDOHQLQVWDOOZLQGRZVSKSIRUGRZQ
ORDGVDQGLQIRUPDWLRQ3+3LVHDV\WRLQVWDOORQ/LQX[IRUH[DPSOH8EXQWXXVHUVFDQ
VLPSO\W\SHsudo aptitude install apache2 php5DWDVKHOOSURPSW
0DFVFRPHZLWK3+3LQVWDOOHGEXW\RXQHHGWRWDNHDVWHSWRHQDEOHLW6LPLODUWR
ZKDW \RX GLG LQ £0DF 26 ; DQG WKH KWDFFHVV )LOH¤ RQ SDJH RSHQ
$SSOLFDWLRQVൺ8WLOLWLHVൺ7HUPLQDODQGW\SHWKHVHFRPPDQGV\RX¦OOQHHGWRW\SH\RXU
SDVVZRUGZKHQSURPSWHG
cd /etc/apache2
sudo pico httpd.conf
1H[WSUHVV&RQWURO:7KLVEULQJVXSWKHRSWLRQWRVHDUFKWKHILOH7\SH£SKS¤DQG
WKHQSUHVV5HWXUQ7KLVEULQJV\RXWRDOLQHWKDWVKRXOGORRNOLNHWKLV
#LoadModule php5_module libexec/apache2/libphp5.so
8VLQJWKHDUURZNH\VPRYHWRWKHEHJLQQLQJRIWKHOLQHDQGGHOHWHWKH #FRPPHQW
FKDUDFWHUZKLFKLVSUHYHQWLQJWKLVOLQHIURPKDYLQJDQ\HIIHFW7KHQSUHVV&RQWURO;
WRH[LWDQVZHU<WRVDYHFKDQJHVDQGWKHQSUHVV5HWXUQWRVDYHWKHILOH1H[WVWDUW
6\VWHP3UHIHUHQFHVJRWR6KDULQJDQGLIQHHGHGFOLFNWKHORFNLFRQODEHOHG£&OLFNWKH
ORFNWRPDNHFKDQJHV¤DQGW\SH\RXUSDVVZRUGZKHQSURPSWHG7KHQFOHDUWKHFKHFN
ER[QH[WWR:HE6KDULQJDQGFKHFNLWDJDLQ1RZ3+3VKRXOGEHHQDEOHGRQ\RXU
0DF¦VZHEVHUYHU
1H[WFUHDWHDILOHLQWKH6LWHVVXEGLUHFWRU\RI\RXUKRPHIROGHUQDPHGWHVWSKSZLWK
WKHVHFRQWHQWV
<?php
phpinfo();
?>
)LQDOO\ YLVLW WKH IROORZLQJ 85/ LQ \RXU EURZVHU http://localhost/~YOURUSERNAME/

test.php5HSODFH YOURUSERNAMEZLWK\RXUXVHUQDPHEXWGRQ¦WGHOHWHWKH~<RXFDQ
ILQGRXW\RXUXVHUQDPHDWWKH7HUPLQDOE\W\SLQJecho $USERDQGSUHVVLQJ5HWXUQ,I
3+3LVZRUNLQJ\RX¦OOVHHDWDEOHGLVSOD\LQJ\RXU3+3YHUVLRQQXPEHUDQGDORWRI
RWKHULQIRUPDWLRQDERXW\RXU3+3LQVWDOODWLRQ,ILWLVQRWZRUNLQJ\RX¦OOVHHQRWKLQJ
EXWDEODQNSDJH9LVLWKWWSZZZSKSQHWVXSSRUWSKSIRUOLQNVWRVRXUFHVRIGRFX
PHQWDWLRQDQGKHOSZLWKXVLQJ3+3
7RDGGUHVVWKLVLVVXHZH¦UHJRLQJWRZULWHDOLWWOH3+3ILOHWKDWUHDGVWKHFRQWHQWVRI
WKHDSSOLFDWLRQGLUHFWRU\DQGLWVVXEGLUHFWRULHVDQGFUHDWHVWKHILOHOLVWIRUXV&UHDWH
DQHZILOHLQ\RXU.LORGLUHFWRU\QDPHGPDQLIHVWSKSDQGDGGWKHIROORZLQJFRGH
<?php
header('Content-Type: text/cache-manifest'); o
echo "CACHE MANIFEST\n";0
$dir = new RecursiveDirectoryIterator(".");O

foreach(new RecursiveIteratorIterator($dir) as $file) {O
if ($file->IsFile() && e
$file != "./manifest.php" &&
substr($file->getFilename(), 0, 1) != ".")
{
echo $file . "\n"; o
}
}
?>
o ,¦PXVLQJWKH3+3headerIXQFWLRQWRRXWSXWWKLVILOHZLWKWKHcache-manifestFRQWHQW
W\SH'RLQJWKLVLVDQDOWHUQDWLYHWRXVLQJDQKWDFFHVVILOHWRVSHFLI\WKHFRQWHQWW\SH
IRUWKHPDQLIHVWILOH,QIDFW\RXFDQUHPRYHWKHKWDFFHVVILOH\RXFUHDWHGLQ£7KH
%DVLFVRIWKH2IIOLQH$SSOLFDWLRQ&DFKH¤RQSDJHLI\RXDUHQRWXVLQJLWIRUDQ\
RWKHUSXUSRVH
Creating a Dynamic Manifest File | 99
© $V\RXVDZHDUOLHULQWKLVFKDSWHUWKHILUVWOLQHRIDFDFKHPDQLIHVWILOHPXVWEHCACHE
MANIFEST$VIDUDVWKHEURZVHULVFRQFHUQHGWKLVLVWKHILUVWOLQHRIWKHGRFXPHQW
WKH3+3ILOHUXQVRQWKHZHEVHUYHUDQGWKHEURZVHURQO\VHHVWKHRXWSXWRIFRP
PDQGVWKDWHPLWWH[WVXFKDVecho
© 7KLVOLQHFUHDWHVDQREMHFWFDOOHG$dirZKLFKHQXPHUDWHVDOOWKHILOHVLQWKHFXUUHQW
GLUHFWRU\,WGRHVVRUHFXUVLYHO\ZKLFKPHDQVWKDWLI\RXKDYHDQ\ILOHVLQVXEGLUHF
WRULHVLWZLOOILQGWKHPWRR
O (DFKWLPHWKHSURJUDPSDVVHVWKURXJKWKLVORRSLWVHWVWKHYDULDEOH$fileWRDQREMHFW
WKDWUHSUHVHQWVRQHRIWKHILOHVLQWKHFXUUHQWGLUHFWRU\,Q(QJOLVKWKLVOLQHZRXOG
UHDG£(DFKWLPHWKURXJKVHWWKHILOHYDULDEOHWRWKHQH[WILOHIRXQGLQWKHFXUUHQW
GLUHFWRU\RULWVVXEGLUHFWRULHV¤
0 7KHifVWDWHPHQWKHUHFKHFNVWRPDNHVXUHWKDWWKHILOHLVDFWXDOO\DILOHDQGQRWD
GLUHFWRU\RUV\PEROLFOLQN,WDOVRLJQRUHVILOHVQDPHGPDQLIHVWSKSRUDQ\ILOHWKDW
VWDUWVZLWKDVXFKDVKWDFFHVV
7KHOHDGLQJ ./LVSDUWRIWKHILOH¦VIXOOSDWKWKH .UHIHUVWRWKHFXUUHQW

GLUHFWRU\DQGWKH/VHSDUDWHVHOHPHQWVRIWKHILOH¦VSDWK6RWKHUH¦VDOZD\V
"v D ./WKDWDSSHDUVEHIRUHWKHILOHQDPHLQWKHRXWSXW+RZHYHUZKHQ,
FKHFN IRU D OHDGLQJ . LQ WKH ILOHQDPH , XVH WKH getFilename IXQFWLRQ
ZKLFKUHWXUQVWKHILOHQDPHZLWKRXWWKHOHDGLQJSDWK7KLVZD\,FDQ
GHWHFWILOHVEHJLQQLQJZLWK.HYHQLIWKH\DUHEXULHGLQDVXEGLUHFWRU\
O +HUH¦VZKHUH,GLVSOD\HDFKILOH¦VQDPH
7RWKHEURZVHUPDQLIHVWSKSZLOOORRNOLNHWKLV
CACHE MANIFEST
./index.html
./jqtouch/jqtouch.css
./jqtouch/jqtouch.js
./jqtouch/jqtouch.transitions.js
./jqtouch/jquery.js
./kilo.css
./kilo.js
./themes/apple/img/backButton.png
./themes/apple/img/blueButton.png
./themes/apple/img/cancel.png
./themes/apple/img/chevron.png
./themes/apple/img/grayButton.png
./themes/apple/img/listArrowSel.png
./themes/apple/img/listGroup.png
./themes/apple/img/loading.gif
./themes/apple/img/on_off.png
./themes/apple/img/pinstripes.png
./themes/apple/img/selection.png
./themes/apple/img/thumb.png
./themes/apple/img/toggle.png
./themes/apple/img/toggleOn.png
./themes/apple/img/toolbar.png
./themes/apple/img/toolButton.png
./themes/apple/img/whiteButton.png
./themes/apple/theme.css
./themes/jqt/img/back_button.png
./themes/jqt/img/back_button_clicked.png
./themes/jqt/img/button.png
./themes/jqt/img/button_clicked.png
./themes/jqt/img/chevron.png
./themes/jqt/img/chevron_circle.png
./themes/jqt/img/grayButton.png
./themes/jqt/img/loading.gif
./themes/jqt/img/on_off.png
./themes/jqt/img/rowhead.png
./themes/jqt/img/toggle.png
./themes/jqt/img/toggleOn.png
./themes/jqt/img/toolbar.png
./themes/jqt/img/whiteButton.png
./themes/jqt/theme.css
7U\ORDGLQJWKHSDJH\RXUVHOILQDEURZVHUEHVXUHWRORDGLWZLWKDQ
+773 85/ VXFK DV http://localhost/~YOURUSERNAME/manifest.php ,I
m
UP, \RXVHHDORWPRUHILOHVLQ\RXUOLVWLQJ\RXPD\KDYHVRPHH[WUDQHRXV
ILOHV IURP WKH M47RXFK GLVWULEXWLRQ 7KH ILOHV /,&(16(W[W
5($'0(W[WDQGVDPSOHKWDFFHVVDUHVDIHWRGHOHWHDVDUHWKHGLUHFWR
ULHV GHPRV DQG H[WHQVLRQV ,I \RX VHH D QXPEHU RI GLUHFWRULHV
QDPHGVYQ\RXPD\DOVRVDIHO\GHOHWHWKHPWKRXJKWKH\ZLOOQRWEH
YLVLEOHLQWKH0DF26;)LQGHU\RXFDQZRUNZLWKWKHPIURPZLWKLQ
WKH7HUPLQDOKRZHYHU
1RZRSHQLQGH[KWPODQGDGGDUHIHUHQFHPDQLIHVWSKSOLNHVR
<html manifest="manifest.php">
1RZWKDWWKHPDQLIHVWLVJHQHUDWHGG\QDPLFDOO\OHW¦VPRGLI\LWVRWKDWLWVFRQWHQWV
FKDQJHZKHQDQ\RIWKHILOHVLQWKHGLUHFWRU\FKDQJHUHPHPEHUWKDWWKHFOLHQWZLOO
UHGRZQORDGWKHDSSOLFDWLRQRQO\LIWKHPDQLIHVW¦VFRQWHQWVKDYHFKDQJHG+HUHLVWKH
PRGLILHGPDQLIHVWSKS
<?php
header('Content-Type: text/cache-manifest');
echo "CACHE MANIFEST\n";
$hashes = "";O
$dir = new RecursiveDirectoryIterator(".");

foreach(new RecursiveIteratorIterator($dir) as $file) {
if ($file->IsFile() &&
$file != "./manifest.php" &&
substr($file->getFilename(), 0, 1) != ".")
{
echo $file . "\n";
Creating a Dynamic Manifest File | 101
$hashes .= md5_file($file);©
}
}
echo "# Hash: " . md5($hashes) . "\n";©
?>
o +HUH,¦PLQLWLDOL]LQJDVWULQJWKDWZLOOKROGWKHKDVKHGYDOXHVRIWKHILOHV
© 2Q WKLV OLQH ,¦P FRPSXWLQJ WKH KDVK RI HDFK ILOH XVLQJ 3+3¦V md5_file
IXQFWLRQ0HVVDJH'LJHVWDOJRULWKPDQGDSSHQGLQJLWWRWKHHQGRIWKH$hashes
VWULQJ $Q\ FKDQJH WR WKH ILOH KRZHYHU VPDOO ZLOO DOVR FKDQJH WKH UHVXOWV RI
WKH md5_file IXQFWLRQ 7KH KDVK LV D FKDUDFWHU VWULQJ VXFK DV
£DFFFFDFIDEEIHIF¤
G +HUH¦VZKHUH,WDNHWKHELJVWULQJRIKDVKHVDOORIWKHFKDUDFWHUVWULQJVIRUHDFK
ILOHFRQFDWHQDWHGWRJHWKHUDQGFRPSXWHDQ0'KDVKRIWKHVWULQJLWVHOI7KLVJLYHV
XVDVKRUWFKDUDFWHUVLQVWHDGRIPXOWLSOLHGE\WKHQXPEHURIILOHVVWULQJWKDW¦V
SULQWHGRXWDVDFRPPHQWEHJLQQLQJZLWKWKHFRPPHQWV\PERO#
)URPWKHYLHZSRLQWRIWKHFOLHQWEURZVHUWKHUH¦VQRWKLQJVSHFLDODERXWWKLVOLQH,W¦V
DFRPPHQWDQGWKHFOLHQWEURZVHULJQRUHVLW+RZHYHULIRQHRIWKHILOHVLVPRGLILHG
WKLVOLQHZLOOFKDQJHZKLFKPHDQVWKHPDQLIHVWKDVFKDQJHG
+HUH¦VDQH[DPSOHRIZKDWWKHPDQLIHVWORRNVOLNHZLWKWKLVFKDQJHVRPHRIWKHOLQHV
KDYHEHHQWUXQFDWHGIRUEUHYLW\
CACHE MANIFEST
./index.html
./jqtouch/jqtouch.css
./jqtouch/jqtouch.js

./themes/jqt/img/toolbar.png
./themes/jqt/img/whiteButton.png
./themes/jqt/theme.css
# Hash: ddaf5ebda18991c4a9da16c10f4e474a
7KHQHWUHVXOWRIDOORIWKLVEXVLQHVVLVWKDWFKDQJLQJDVLQJOHFKDUDFWHULQVLGHRIDQ\ILOH
LQWKHHQWLUHGLUHFWRU\WUHHZLOOLQVHUWDQHZKDVKVWULQJLQWRWKHPDQLIHVW7KLVPHDQV
WKDWDQ\HGLWVZHGRWRDQ\.LORILOHVZLOOHVVHQWLDOO\PRGLI\WKHPDQLIHVWILOHZKLFKLQ
WXUQZLOOWULJJHUDGRZQORDGWKHQH[WWLPHDXVHUODXQFKHVWKHDSS3UHWW\QLIW\HK"
Debugging
,WFDQEHWRXJKWRGHEXJDSSVWKDWXVHWKHRIIOLQHDSSOLFDWLRQFDFKHEHFDXVHWKHUH¦VYHU\
OLWWOHYLVLELOLW\LQWRZKDWLVJRLQJRQ<RXILQG\RXUVHOIFRQVWDQWO\ZRQGHULQJLI\RXU
ILOHVKDYHGRZQORDGHGRULI\RXDUHYLHZLQJUHPRWHRUORFDOUHVRXUFHV3OXVVZLWFKLQJ
\RXUGHYLFHEHWZHHQRQOLQHDQGRIIOLQHPRGHVLVQRWWKHVQDSSLHVWSURFHGXUHDQGFDQ
UHDOO\VORZGRZQWKHGHYHORSWHVWGHEXJF\FOH
7KHUHDUHWZRWKLQJV\RXFDQGRWRKHOSGHWHUPLQHZKDW¦VJRLQJRQZKHQWKLQJVDUHQ¦W
SOD\LQJQLFHVHWXSVRPHFRQVROHORJJLQJLQ-DYD6FULSWDQGEURZVHWKHDSSOLFDWLRQ
FDFKHGDWDEDVH
,I\RXZDQWWRVHHZKDW¦VKDSSHQLQJIURPWKHZHEVHUYHU¦VSHUVSHFWLYH
\RXFDQPRQLWRULWVORJILOHV)RUH[DPSOHLI\RXDUHUXQQLQJDZHEVHUYHU
m
UP, RQ D 0DF FRPSXWHU \RX FDQ RSHQ D 7HUPLQDO ZLQGRZ
$SSOLFDWLRQVൺ8WLOLWLHVൺ7HUPLQDODQGUXQWKHVHFRPPDQGVWKH $LV
WKH7HUPLQDOVKHOOSURPSWDQGVKRXOGQRWEHW\SHG
$ cd /var/log/apache2/
$ tail -f access_log
7KLVZLOOGLVSOD\WKHZHEVHUYHU¦VORJHQWULHVVKRZLQJLQIRUPDWLRQVXFK
DVWKHGDWHDQGWLPHDGRFXPHQWZDVDFFHVVHGDVZHOODVWKHQDPHRI
WKHGRFXPHQW:KHQ\RXDUHGRQHSUHVV&RQWURO&WRVWRSIROORZLQJ
WKHORJ
The JavaScript Console

$GGLQJWKHIROORZLQJ-DYD6FULSWWR\RXUZHEDSSVGXULQJGHYHORSPHQWZLOOPDNH\RXU
OLIHDORWHDVLHUDQGFDQDFWXDOO\KHOS\RXLQWHUQDOL]HWKHSURFHVVRIZKDWLVJRLQJRQ
7KHIROORZLQJVFULSWZLOOVHQGIHHGEDFNWRWKHFRQVROHDQGIUHH\RXIURPKDYLQJWR
FRQVWDQWO\UHIUHVKWKHEURZVHUZLQGRZ\RXFDQVWRUHWKHVFULSWLQDMVILOHWKDW\RXU
+70/GRFXPHQWUHIHUHQFHVYLDWKHscriptHOHPHQW¦VsrcDWWULEXWH
// Convenience array of status valuesO
var cacheStatusValues = [];
cacheStatusValues[0] = 'uncached';
cacheStatusValues[1] = 'idle';
cacheStatusValues[2] = 'checking';
cacheStatusValues[3] = 'downloading';
cacheStatusValues[4] = 'updateready';
cacheStatusValues[5] = 'obsolete';
// Listeners for all possible events©

var cache = window.applicationCache;
cache.addEventListener('cached', logEvent, false);
cache.addEventListener('checking', logEvent, false);
cache.addEventListener('downloading', logEvent, false);
cache.addEventListener('error', logEvent, false);
cache.addEventListener('noupdate', logEvent, false);
cache.addEventListener('obsolete', logEvent, false);
cache.addEventListener('progress', logEvent, false);
cache.addEventListener('updateready', logEvent, false);
// Log every event to the console

function logEvent(e) {O
var online, status, type, message;
online = (navigator.onLine) ? 'yes' : 'no';
status = cacheStatusValues[cache.status];
type = e.type;
Debugging | 103
message = 'online: ' + online;
message+= ', event: ' + type;
message+= ', status: ' + status;
if (type == 'error' && navigator.onLine) {
message+= ' (prolly a syntax error in manifest)';
}
console.log(message); o
}
// Swap in newly downloaded files when update is ready

window.applicationCache.addEventListener(
'updateready',
function(){
window.applicationCache.swapCache();
console.log('swap cache has been called');
},
false
);
// Check for manifest changes every 10 seconds

setInterval(function(){cache.update()}, 10000);
7KLVPLJKWORRNOLNHDORWRIFRGHEXWWKHUHUHDOO\LVQ¦WWKDWPXFKJRLQJRQKHUH
o 7KHILUVWVHYHQOLQHVDUHMXVWPHVHWWLQJXSDQDUUD\RIVWDWXVYDOXHVIRUWKHDSSOLFDWLRQ
FDFKHREMHFW7KHUHDUHVL[SRVVLEOHYDOXHVGHILQHGE\WKH+70/VSHFDQGKHUH
,¦PPDSSLQJWKHLULQWHJHUYDOXHVWRDVKRUWGHVFULSWLRQHJVWDWXVPHDQV£GRZQ
ORDGLQJ¤ ,¦YH LQFOXGHG WKHP WR PDNH WKHORJJLQJPRUHGHVFULSWLYHGRZQLQWKH
logEventIXQFWLRQ
0 ,QWKHQH[WFKXQNRIFRGH,¦PVHWWLQJXSDQHYHQWOLVWHQHUIRUHYHU\SRVVLEOHHYHQW
GHILQHGE\WKHVSHF(DFKRQHFDOOVWKHlogEventIXQFWLRQ
G 7KHlogEventIXQFWLRQWDNHVWKHHYHQWDVLQSXWDQGPDNHVDIHZVLPSOHFDOFXODWLRQV
LQRUGHUWRFRPSRVHDGHVFULSWLYHORJPHVVDJH1RWHWKDWLIWKHHYHQWW\SHLV error
DQGWKHXVHULVRQOLQHWKHUHLVSUREDEO\DV\QWD[HUURULQWKHUHPRWHPDQLIHVW6\QWD[
HUURUVDUHH[WUHPHO\HDV\WRPDNHLQWKHPDQLIHVWEHFDXVHDOORIWKHSDWKVKDYHWREH
YDOLG,I\RXUHQDPHRUPRYHDILOHEXWIRUJHWWRXSGDWHWKHPDQLIHVWIXWXUHXSGDWHV
ZLOOIDLO
O 2QFH,KDYHP\PHVVDJHFRPSRVHG,VHQGLWWRWKHFRQVROH
<RXFDQYLHZWKHFRQVROHPHVVDJHVLQGHVNWRS6DIDULE\VHOHFWLQJ'HYHORSൺ6KRZ(UURU
&RQVROH <RX FDQ YLHZ WKH FRQVROH PHVVDJHV LQ WKH L3KRQH 6LPXODWRU E\ JRLQJ WR
6HWWLQJVൺ6DIDULൺ'HYHORSHUDQGWXUQLQJWKH'HEXJ&RQVROHRQ:KHQGHEXJJLQJLV
WXUQHG RQ 0RELOH 6DIDUL GLVSOD\V D KHDGHU DERYH WKH ORFDWLRQ EDU )LJXUH WKDW
DOORZV\RXWRQDYLJDWHWRWKHGHEXJJLQJFRQVROH)LJXUH
..ill AT&T . 2:19 PM BB
ponathanstarÿom/laÿÿÿÿJ
Debug Console
17 Logs >
11 2
)LJXUH0RELOH6DIDULZLWKGHEXJJLQJWXUQHGRQ
..iL AT&T . 2:20 PM BB

Safari Console Clear
| j JavaScript Log on Line 31

http://jonathanstark.co...ache-4/scripts/demo.js
online: yes. event: noupdate, status: idle
[Fj JavaScript Log on Line 31

http://jonathanstark.co...ache -4/scripts/demo.js
online: yes. event: checking, status: checking
l_J JavaScript Log on Line 31

http://jonathanstark.co...ache-4/scripts/demo.js
online: yes, event: noupdate, status: idle
All HTML JavaScript CSS
)LJXUH0RELOH6DIDULGHEXJJLQJFRQVROH
Debugging | 105
1
,I\RXGRQ¦WVHHWKH'HYHORSPHQXLQWKH6DIDULPHQXEDURSHQ\RXU
6DIDULDSSOLFDWLRQSUHIHUHQFHVFOLFNWKH$GYDQFHGWDEDQGPDNHVXUH
WKDW£6KRZ'HYHORSPHQXLQPHQXEDU¤LVFKHFNHG
,I\RXORDGWKHZHESDJHLQ\RXUEURZVHUDQGWKHQRSHQWKHFRQVROH\RX¦OOVHHQHZ
PHVVDJHVDSSHDUHYHU\VHFRQGV)LJXUH,I\RXGRQ¦WVHHDQ\WKLQJXSGDWHWKH
YHUVLRQQXPEHULQGHPRPDQLIHVWDQGUHORDGWKHSDJHLQ\RXUEURZVHUWZLFH,VWURQJO\
HQFRXUDJH\RXWRSOD\DURXQGZLWKWKLVXQWLO\RXUHDOO\KDYHDIHHOIRUZKDW¦VJRLQJRQ
<RXFDQWLQNHUDURXQGZLWKWKHPDQLIHVWFKDQJHWKHFRQWHQWVDQGVDYHLWUHQDPHLW
PRYHLWWRDQRWKHUGLUHFWRU\HWFDQGZDWFKWKHUHVXOWVRI\RXUDFWLRQVSRSLQWRWKH
FRQVROHOLNHPDJLF
«no Web Inspector — http://jonathanstark.com/labs/app-cache-2/

IJghl © il jy E
Elements Resources Scripts Profiles Databas<
* Search Elements
clDOCTYPE html> Styles
<html manifest="demo.manifest"> Computed Style
<head>
body
<body>
font: normal normal normal 7596/nor...
<hl>Offline App Cache Demo</hl>
<img src="looo.ipq ’ > E display:
body
block;
</body>
margin: 8px;
</html>
Metrics
Properties
html body
online: yes, event: downloading, status: downloading demo. i s: 31
O online: yes, event: progress, status: downloading demo. i s: 31
online: yes, event: cached, status: idle demo. i s : 31
online: yes, event: checking, status: checking demo. i s: 31
online: yes, event: noupdate, status: idle demo. is:31
online: yes, event: checking, status: checking demo. is:31
online: yes, event: noupdate, status: idle demo. is:31
online: yes, event: checking, status: checking demo. is:31
online: yes, event: downloading, status: downloading demo. i s: 31
© online: yes, event: progress, status: downloading demo. i s: 31
online: yes, event: updateready, status: updateready demo. i s: 31
swap cache has been called demo. i s: 38
online: no, event: checking, status: checking demo. is:31
online: no, event: error, status: idle demo. is:31
online: no, event: checking, status: checking demo. is:31
online: no, event: error, status: idle demo. is:31
online: yes, event: checking, status: checking demo. i s: 31
online: yes, event: noupdate, status: idle demo. i s: 31
>
a >2 <s> A
)LJXUH7KHFRQVROHORJIXQFWLRQFDQEHXVHGWRVHQGGHEXJJLQJPHVVDJHVWRWKH-DYD6FULSWFRQVROH
The Application Cache Database
,I\RXDUHKDYLQJVHULRXVWURXEOHGHEXJJLQJ\RXURIIOLQHZHEDSSWKHUHLVDZD\WRJHW
XQGHUWKHKRRGDQGVHHZKDW¦VJRLQJRQ,I\RXORDG\RXUDSSLQWKHL3KRQH6LPXODWRU
LWVWRUHVWKHFDFKHGUHVRXUFHVLQD64/LWHGDWDEDVHWKDW\RXFDQSHUXVHZLWKWKHVTOLWH
FRPPDQGOLQHLQWHUIDFH2IFRXUVHKDYLQJVRPHNQRZOHGJHRI64/ZRXOGKHOSKHUH
EXW\RXFDQJHWSUHWW\IDUE\PLPLFNLQJWKHH[DPSOHVLQWKLVVHFWLRQ
..
0..4ÿ
4
<RXZLOOQHHGWRLQVWDOOWKHL3KRQH6'.IURP$SSOHLQRUGHUWRJHWWKH
VLPXODWRU<RXFDQJHWWKH6'.E\UHJLVWHULQJDVDQ$SSOHGHYHORSHUDW
a,:' KWWSGHYHORSHUDSSOHFRPLSKRQH5HJLVWUDWLRQFRVWVQRWKLQJEXW\RX
ZLOOQHHGWRHQUROOLQDQL3KRQHGHYHORSHUSURJUDPQRWHWKDWDQ$SSOH
GHYHORSHULVGLIIHUHQWIURPDQL3KRQHGHYHORSHULI\RXZDQWWRVXEPLW
\RXUDSSVWRWKH$SS6WRUH
2QP\PDFKLQHWKHL3KRQH6LPXODWRUDSSFDFKHGDWDEDVHLVORFDWHGKHUH
/Users/jstark/Library/Application Support/iPhone
Simulator/User/Library/Caches/com.apple.WebAppCache/ApplicationCache.db
04
7KHFRPDSSOH:HE$SS&DFKHGLUHFWRU\DQG$SSOLFDWLRQ&DFKHGEGDWD
EDVHZLOOQRWH[LVWXQOHVV\RXKDYHORDGHGWKHZHEDSSOLFDWLRQRQWKH
Si L3KRQH6LPXODWRUDWOHDVWRQFH
8VLQJWKHVTOLWHFRPPDQGOLQHLQWHUIDFH\RXFDQSRNHDURXQGLQWKHGDWDEDVHWRJHW
DQLGHDRIZKDW¦VJRLQJRQ)LUVW\RXKDYHWRFRQQHFWWRWKHGDWDEDVH2SHQWKH7HU
PLQDO$SSOLFDWLRQVൺ8WLOLWLHVൺ7HUPLQDODQGW\SHWKHFRPPDQGVWKDWIROORZ7KH$
LVWKH7HUPLQDOSURPSWDQGVKRXOGQRWEHW\SHG
$ cd "$HOME/Library/Application Support/iPhone Simulator"
$ cd User/Library/Caches/com.apple.WebAppCache/
$ sqlite3 ApplicationCache.db
0 Hfcÿ
2QWKH0DFGHVNWRS6DIDUL¦VDSSOLFDWLRQFDFKHFDQEHIRXQGLQDGL
UHFWRU\DGMDFHQWWR\RXUWHPSRUDU\GLUHFWRU\<RXFDQJHWWRLWLQWKH
QJ m
A' WHUPLQDOZLWK
UP,
$ cd $TMPDIR/../-Caches-/com.apple.Safari/
$ sqlite3 ApplicationCache.db
2QFHFRQQHFWHG\RX¦OOVHHVRPHWKLQJOLNH
SQLite version 3.6.17
Enter ".help" for instructions
Enter SQL statements terminated with a ";"
sqlite>
Debugging | 107
1RZ \RX FDQ W\SH 64/LWH FRQWURO VWDWHPHQWV DQG DUELWUDU\ 64/ FRPPDQGV DW WKH
sqlite>SURPSW7RVHHDOLVWRI64/LWHFRQWUROVWDWHPHQWVW\SH.helpDWWKHSURPSW
<RX¦OO VHH D ORQJ OLVW RI FRPPDQGV RI ZKLFK WKHVH DUH WKH PRVW LPSRUWDQW IRU RXU
SXUSRVHV
.exit Exit this program
.header(s) ON|OFF Turn display of headers on or off
.help Show this message
.mode MODE ?TABLE? Set output mode where MODE is one of:
csv Comma-separated values
column Left-aligned columns. (See .width)
html HTML <table> code
insert SQL insert statements for TABLE
line One value per line
list Values delimited by .separator string
tabs Tab-separated values
tcl TCL list elements
.quit Exit this program
.tables ?PATTERN? List names of tables matching a LIKE pattern
7R UHWULHYH D OLVW RI WDEOHV XVHG LQ WKH FDFKH PDQLIHVW GDWDEDVH XVH WKH .tables
FRPPDQG
sqlite> .tables
CacheEntries CacheResourceData CacheWhitelistURLs FallbackURLs
CacheGroups CacheResources Caches
%HIRUH,VWDUWTXHU\LQJWKHWDEOHV,¦PJRLQJWRVHW.headersWRONZKLFKZLOODGGILHOG
QDPHVWRWKHRXWSXWDQGVHW .modeWR lineWRPDNHWKLQJVHDVLHUWRUHDG7\SHWKH
FRPPDQGVVKRZQLQEROGsqlite>LVWKH64/LWHSURPSW
sqlite> .headers on
sqlite> .mode line
CacheGroupsLVWKHWRSOHYHORIWKHGDWDPRGHO,WFRQWDLQVDURZIRUHDFKYHUVLRQRIWKH
PDQLIHVW7\SHWKHFRPPDQGVKRZQLQEROGGRQ¦WIRUJHWWKH;
sqlite> select * from CacheGroups;
id = 1
manifestHostHash = 2669513278
manifestURL = http://jonathanstark.com/labs/kilo10/kilo.manifest
newestCache = 7
id = 2
manifestURL = http://jonathanstark.com/labs/cache-manifest-bug/test.manifest
newestCache = 6
id = 5
manifestURL = http://jonathanstark.com/labs/kilo11/kilo.manifest
newestCache = 13
id = 6
manifestURL = http://jonathanstark.com/labs/app-cache-3/demo.manifest
newestCache = 14
$V\RXFDQVHH,KDYHIRXUFDFKHJURXSVRQP\PDFKLQH<RXSUREDEO\RQO\KDYHRQH
DWWKLVSRLQW7KHILHOGVEUHDNGRZQOLNHWKLV
id
$XQLTXHDXWRLQFUHPHQWVHULDOQXPEHUDVVLJQHGWRWKHURZ(YHU\WLPH0RELOH
6DIDULLQVHUWVDURZLQWRWKLVWDEOHWKLVQXPEHULVLQFUHPHQWHG,IIRUVRPHUHDVRQ
0RELOH6DIDULQHHGVWRGHOHWHDURZ\RXZLOOVHHJDSVLQWKHVHTXHQFH
manifestHostHash
8VHGZLWKmanifestURLWRXQLTXHO\LGHQWLI\WKHFDFKH
manifestURL
7KHORFDWLRQRIWKHUHPRWHPDQLIHVWILOH
newestCache
7KLVLVDCachesURZ,'LHDIRUHLJQNH\WRWKHCachesWDEOHWKDWLQGLFDWHVZKLFK
FDFKHWRXVH
$ FROXPQ LQ D GDWDEDVH WDEOH LV FRQVLGHUHG D NH\ ZKHQ LW LGHQWLILHV
VRPHWKLQJ)RUH[DPSOHDXQLTXHNH\LGHQWLILHVDURZLQWKHWDEOHXQ
a,:' DPELJXRXVO\$SULPDU\NH\LVDXQLTXHNH\WKDWKDVEHHQGHVLJQDWHGDV
WKHNH\\RXXVHWRLGHQWLI\DURZ)RUH[DPSOHWZRFROXPQVDUHSRWHQ
WLDOXQLTXHNH\VEHFDXVHWKHUHLVRQO\RQHURZLQWKHCacheGroupsWDEOH
IRU DQ\ JLYHQ YDOXH RI WKHVH FROXPQV id DQG manifestURL +RZHYHU
idLVDVLPSOHQXPHULFNH\DQGLW¦VYHU\IDVWWRPDNHFRPSDULVRQVWRLW
DQGLWUHTXLUHVOHVVVWRUDJHIRURWKHUWDEOHVWRUHIHUWRLW6RidLVERWK
DXQLTXHNH\DQGWKHSULPDU\NH\IRUWKHCacheGroupsWDEOH
$IRUHLJQNH\LVDOLQNIURPRQHWDEOHWRDQRWKHU7KHcacheGroupFROXPQ
LQWKHCachesWDEOHGLVFXVVHGQH[WLGHQWLILHVDURZLQWKHCacheGroups
WDEOHHVWDEOLVKLQJDOLQNIURPDURZLQRQHWDEOHWRWKHRWKHU
1RZVZLWFKWRFROXPQPRGHDQGVHOHFWDOOURZVIURPWKHCachesWDEOH
sqlite> .mode column
sqlite> select * from Caches;
id cacheGroup
---------- ----------
6 2
7 1
13 5
14 6
7KH Caches WDEOH KDV MXVW WZR ILHOGV id SULPDU\ NH\ IRU WKH &DFKHV URZ DQG
cacheGroupIRUHLJQNH\WKDWOLQNVD&DFKHV idWRDURZLQWKH CacheGroupsWDEOH,I
6DIDULZHUHLQWKHSURFHVVRIGRZQORDGLQJDQHZFDFKHWKHUHZRXOGEHWZR&DFKHURZV
IRUWKH CacheGroupRQHFXUUHQWRQHWHPSRUDU\,QDOORWKHUFDVHVWKHUHLVRQO\RQH
&DFKHURZSHUCacheGroup
Debugging | 109
1H[WOHW¦VVHOHFWDOORIWKHURZVIURPWKHCacheEntriesWDEOH
sqlite> select * from CacheEntries;
cache type resource
---------- ---------- ----------
6 1 67
6 4 68
6 2 69
7 4 70
7 4 71
7 4 72
7 4 73
7 2 74
7 4 75
7 4 76
7 4 77
7 1 78
7 4 79
13 4 160
13 4 161
13 4 162
13 4 163
13 2 164
13 4 165
13 4 166
13 4 167
13 4 168
13 1 169
13 4 170
13 4 171
13 4 172
13 4 173
13 4 174
13 4 175
14 4 176
14 16 177
14 4 178
14 1 179
14 4 180
14 2 181
1RWPXFKWRORRNDWKHUH-XVWWZRIRUHLJQNH\VcacheZKLFKLVDIRUHLJQNH\WRWKH
Caches.idFROXPQDQG resourceZKLFKLVDIRUHLJQNH\WR CacheResources.idDQGD
typeILHOG,¦OOUHGRWKDWTXHU\ZLWKD joinWRWKH CacheResourcesWDEOHVR\RXFDQVHH
KRZWKHW\SHFRUUHVSRQGVWRWKHDFWXDOILOHV1RWLFHWKDWILUVW,VHWWKHFROXPQZLGWKV
VRWKH85/VGRQ¦WJHWFXWRIIWKH...>SURPSWLQGLFDWHVWKDW,SUHVVHG5HWXUQEHIRUH
ILQLVKLQJWKHVWDWHPHQWZLWKWKH;WHUPLQDWRU
sqlite> .width 5 4 8 24 80
sqlite> select cache, type, resource, mimetype, url
...> from CacheEntries,CacheResources where resource=id order by type;
-- -- --- ----------- --------------------------------------------------------------
6 1 67 text/htm... http://jonathanstark.com/labs/cache-manifest-bug/
7 1 78 text/htm... http://jonathanstark.com/labs/kilo10/#home
13 1 169 text/htm... http://jonathanstark.com/labs/kilo11/#home
14 1 179 text/htm... http://jonathanstark.com/labs/app-cache-3/
6 2 69 text/cac... http://jonathanstark.com/labs/cache-manifest-bug/test.manifest
7 2 74 text/cac... http://jonathanstark.com/labs/kilo10/kilo.manifest
13 2 164 text/cac... http://jonathanstark.com/labs/kilo11/kilo.manifest
14 2 181 text/cac... http://jonathanstark.com/labs/app-cache-3/demo.manifest
6 4 68 image/pn... http://jonathanstark.com/labs/kilo10/icon.png
7 4 70 text/css... http://jonathanstark.com/labs/kilo10/jqtouch/jqtouch.css
7 4 72 text/css... http://jonathanstark.com/labs/kilo10/themes/jqt/theme.css
7 4 73 image/pn... http://jonathanstark.com/labs/kilo10/startupScreen.png
7 4 75 applicat... http://jonathanstark.com/labs/kilo10/jqtouch/jqtouch.js
7 4 76 applicat... http://jonathanstark.com/labs/kilo10/kilo.js
7 4 77 applicat... http://jonathanstark.com/labs/kilo10/jqtouch/jquery.js
7 4 79 image/x-... http://jonathanstark.com/favicon.ico
13 4 160 applicat... http://jonathanstark.com/labs/kilo11/kilo.js
13 4 161 text/css... http://jonathanstark.com/labs/kilo11/jqtouch/jqtouch.css
13 4 163 image/x-... http://jonathanstark.com/favicon.ico
13 4 165 image/pn... http://jonathanstark.com/labs/kilo11/themes/jqt/img/button.png
13 4 166 image/pn... http://jonathanstark.com/labs/kilo11/themes/jqt/
img/chevron.png
13 4 167 text/css... http://jonathanstark.com/labs/kilo11/themes/jqt/theme.css
13 4 168 applicat... http://jonathanstark.com/labs/kilo11/jqtouch/jquery.js
13 4 170 applicat... http://jonathanstark.com/labs/kilo11/jqtouch/jqtouch.js
img/back_button.png
13 4 172 image/pn... http://jonathanstark.com/labs/kilo11/themes/jqt/img/toolbar.png
13 4 173 image/pn... http://jonathanstark.com/labs/kilo11/startupScreen.png
img/back_button_clicked.png
img/button_clicked.png
14 4 176 text/htm... http://jonathanstark.com/labs/app-cache-3/index.html
14 4 178 applicat... http://jonathanstark.com/labs/app-cache-3/scripts/demo.js
14 4 180 text/css... http://jonathanstark.com/labs/app-cache-3/styles/screen.css
14 16 177 image/jp... http://jonathanstark.com/labs/app-cache-3/images/offline.jpg
5HYLHZLQJWKLVOLVWUHYHDOVWKDWW\SHLQGLFDWHVDKRVWILOHW\SHLVDPDQLIHVWILOHW\SH
LVDQ\QRUPDOVWDWLFUHVRXUFHDQGW\SHLVDIDOOEDFNUHVRXUFH
/HW¦VVZLWFKEDFNWROLQHPRGHDQGSXOOVRPHGDWDIURPWKHCacheResourcesWDEOHWRVHH
ZKDWLVJRLQJRQLQWKHUH+HUH¦VUHVRXUFHURZLI\RX¦UHWU\LQJWKLVRXW\RXUVHOI
UHSODFHZLWKDYDOLG idYDOXHIURPWKHUHVXOWV\RXJRWLQWKHSUHYLRXVTXHU\RIWKH
CacheResourcesWDEOH
sqlite> .mode line
sqlite> select * from CacheResources where id=73;
id = 73
url = http://jonathanstark.com/labs/kilo10/startupScreen.png
statusCode = 200
responseURL = http://jonathanstark.com/labs/kilo10/startupScreen.png
mimeType = image/png
textEncodingName =
headers = Date:Thu, 24 Sep 2009 19:16:09 GMT
X-Pad:avoid browser bug
Debugging | 111
Connection:close
Content-Length:12303
Last-Modified:Fri, 18 Sep 2009 05:02:26 GMT
Server:Apache/2.2.8 (Fedora)
Etag:"52c88b-300f-473d309c45c80"
Content-Type:image/png
Accept-Ranges:bytes
data = 73
,I\RXDUHIDPLOLDUZLWKWKHZD\+773UHTXHVWVZRUN\RX¦OOUHFRJQL]HWKDWWKLVLVH[DFWO\
WKHGDWDWKDW\RX¦GQHHGWRIDNHDQHWZRUNUHVSRQVH+HUH0RELOH6DIDULKDVDOOWKHLQIR
QHHGHGWRVHUYHXSD31*ILOHWRWKHEURZVHURULQWKLVFDVHWRLWVHOILWLVVWRULQJWKH
LQIRUPDWLRQQHHGHGWRUHSURGXFHWKHEHKDYLRURIWKHZHEVHUYHUWKDWRULJLQDOO\SURYLGHG
WKHILOH
:HOOLQIDFWLWKDVDOORIWKHLQIRH[FHSWIRUWKHDFWXDOLPDJHGDWD7KHLPDJHGDWDLV
VWRUHGLQDEOREILHOGLQCacheResourceData,¦GLQFOXGHLWKHUHEXWLW¦VELQDU\DQGQRW
PXFKWRORRNDW,W¦VLQWHUHVWLQJWRQRWHWKDWHYHQWH[WGDWDILOHV+70/&66-DYD6FULSW
HWFDQGWKHOLNHDUHVWRUHGDVELQDU\GDWDLQWKHEOREILHOGLQCacheResourceData
/HW¦VWDNHDORRNDWWKHCacheWhitelistURLsWDEOHZKLFKFRQWDLQVDOOWKHHOHPHQWVLGHQ
WLILHGLQWKHNETWORK:VHFWLRQRIWKHPDQLIHVW
sqlite> .width 80 5
sqlite> .mode column
sqlite> select * from CacheWhitelistURLs;
url cache
---------------------------------------------------------------------------- ------
http://jonathanstark.com/labs/kilo10/themes/jqt/img/back_button.png 7
http://jonathanstark.com/labs/kilo10/themes/jqt/img/back_button_clicked.png 7
http://jonathanstark.com/labs/kilo10/themes/jqt/img/button.png 7
http://jonathanstark.com/labs/kilo10/themes/jqt/img/button_clicked.png 7
http://jonathanstark.com/labs/kilo10/themes/jqt/img/chevron.png 7
http://jonathanstark.com/labs/kilo10/themes/jqt/img/toolbar.png 7
+HUHZHMXVWKDYHWKHFDFKH idDQGWKH85/WRWKHRQOLQHUHVRXUFH,IFDFKH idLV

UHTXHVWHGE\WKHEURZVHUWKHVHVL[LPDJHVZLOOEHUHWULHYHGIURPWKHLUUHPRWHORFDWLRQ
LIWKHXVHULVRQOLQH,IWKHXVHULVRIIOLQHWKH\ZLOOVKRZXSDVEURNHQOLQNVEHFDXVHWKH\
DUHQRWVWRUHGORFDOO\,W¦VZRUWKQRWLQJWKDWWKH85/VKDYHEHHQIXOO\H[SDQGHGWR
DEVROXWH85/VHYHQWKRXJKWKH\ZHUHOLVWHGLQWKHPDQLIHVWDVUHODWLYH85/V
$QGILQDOO\OHW¦VWDNHDORRNDWWKHFallbackURLsWDEOHHYHU\WKLQJIURPWKHFALLBACK:
VHFWLRQRIWKHPDQLIHVW
sqlite> .mode line
sqlite> select * from FallbackURLs;
namespace = http://jonathanstark.com/labs/app-cache-3/images/
fallbackURL = http://jonathanstark.com/labs/app-cache-3/images/offline.jpg
cache = 14
$V\RXFDQVHH,FXUUHQWO\KDYHRQO\RQHURZLQWKHFallbackURLsWDEOH,IFDFKHid
LVUHTXHVWHGE\WKHEURZVHUDQGDQ\85/VWKDWEHJLQZLWKhttp://jonathanstark.com/
labs/app-cache-3/images/IDLOIRUZKDWHYHUUHDVRQWKHXVHULVRIIOLQHLPDJHVDUHPLVV
LQJHWFWKHfallbackURLZLOOEHXVHGLQVWHDG
,DSRORJL]HLIWKLVVHFWLRQLVDELWFRPSOH[EXWDWWKLVSRLQWLW¦VDOOZH¦YHJRW0D\EH
EURZVHUYHQGRUVZLOOLPSOHPHQWVRPHVRUWRIXVHULQWHUIDFHWKDWZLOODOORZXVWREURZVH
WKHDSSOLFDWLRQFDFKH¢VLPLODUWRWKRVHIRUWKHORFDOVWRUDJHDQGFOLHQWVLGHGDWDEDVH¢
EXWXQWLOWKDWWLPHFRPHVWKLVLVRXURQO\RSWLRQIRUSURZOLQJDURXQGLQWKHGHSWKVRI
FOLHQWVLGHVWRUDJH

,QWKLVFKDSWHU\RX¦YHOHDUQHGKRZWRJLYHXVHUVDFFHVVWRDZHEDSSHYHQZKHQWKH\
KDYHQRFRQQHFWLRQWRWKH,QWHUQHW7KLVRIIOLQHPRGHDSSOLHVZKHWKHUWKHDSSLVORDGHG
LQ0RELOH6DIDULRUODXQFKHGLQIXOOVFUHHQPRGHIURPD:HE&OLSLFRQRQWKHGHVNWRS
:LWKWKLVQHZDGGLWLRQWR\RXUSURJUDPPLQJWRROER[\RXQRZKDYHWKHDELOLW\WR
FUHDWHDIXOOVFUHHQRIIOLQHDSSWKDWLVYLUWXDOO\LQGLVWLQJXLVKDEOHIURPDQDWLYHDSSOL
FDWLRQGRZQORDGHGIURPWKH$SS6WRUH
2IFRXUVHDSXUHZHEDSSVXFKDVWKLVLVVWLOOOLPLWHGE\WKHVHFXULW\FRQVWUDLQWVWKDW
H[LVW IRU DOO ZHE DSSV )RU H[DPSOH D ZHE DSS FDQ¦W DFFHVV WKH $GGUHVV %RRN WKH
FDPHUDWKHDFFHOHURPHWHURUYLEUDWLRQRQWKHL3KRQH,QWKHQH[WFKDSWHU,¦OODGGUHVV
WKHVHLVVXHVDQGPRUHZLWKWKHDVVLVWDQFHRIDQRSHQVRXUFHSURMHFWFDOOHG3KRQH*DS
CHAPTER 7
Going Native
2XUZHEDSSFDQQRZGRPDQ\RIWKHWKLQJVWKDWDQDWLYHDSSFDQGRODXQFKIURPWKH
KRPHVFUHHQUXQLQIXOOVFUHHQPRGHVWRUHGDWDORFDOO\RQWKHL3KRQHDQGRSHUDWHLQ
RIIOLQHPRGH:H¦YHIRUPDWWHGLWQLFHO\IRUWKHGHYLFHDQGVHWXSQDWLYHORRNLQJDQL
PDWLRQVWRSURYLGHIHHGEDFNDQGFRQWH[WWRWKHXVHU
+RZHYHUWKHUHDUHVWLOOWZRWKLQJVWKDWRXUDSSFDQQRWGRLWFDQ¦WDFFHVVWKHGHYLFH
IHDWXUHVDQGKDUGZDUHHJJHRORFDWLRQDFFHOHURPHWHUVRXQGDQGYLEUDWLRQDQGLW
FDQ¦WEHVXEPLWWHGWRWKHL7XQHV$SS6WRUH,QWKLVFKDSWHU\RXZLOOOHDUQKRZWRXVH
3KRQH*DSWREULGJHWKLVXPJDSRQ\RXUDKSKRQH&OHYHUQDPHWKDW
Intro to PhoneGap
3KRQH*DSLVDQRSHQVRXUFHGHYHORSPHQWWRROFUHDWHGE\1LWRELKWWSZZZQLWREL
FRPWRDFWDVDEULGJHEHWZHHQZHEDSSOLFDWLRQVDQGPRELOHGHYLFHVL3KRQH*RRJOH
$QGURLGDQG%ODFN%HUU\RSHUDWLQJV\VWHPVDUHFXUUHQWO\VXSSRUWHGDQG1RNLDDQG
:LQGRZV0RELOHDUHLQGHYHORSPHQW
,QVSLWHRILWVKLJKSURILOHWKHL3KRQHLVQRWHYHQFORVHWREHLQJWKHPRVWZLGHO\XVHG
PRELOHGHYLFH7KHPRELOHODQGVFDSHLVOLWWHUHGZLWKGHYLFHVSODWIRUPVDQGRSHUDWLQJ
V\VWHPV,I\RXDUHDZHEGHYHORSHU\RXPLJKWEHIDPLOLDUZLWKWKHSDLQRIWHVWLQJ
RUVREURZVHUYHUVLRQVDFURVVRUVRRSHUDWLQJV\VWHPYHUVLRQV0XOWLSO\WKDWE\
DQG\RXKDYHPRELOH7KHUHLVVLPSO\QRFRVWHIIHFWLYHZD\WRGHYHORSDQGWHVWDFURVV
DOORIWKHSRVVLEOHFRPELQDWLRQV
115
7KDQNVWR$SSOHLW¦VQRZFOHDUWKDWWKHUHLVDPDUNHWIRUGHYLFHVWKDWRIIHUDIXOOIHDWXUHG
ZHE EURZVLQJ H[SHULHQFH $V PRUH YHQGRUV LQFOXGH KLJKTXDOLW\ EURZVHUV RQ WKHLU
SKRQHVWKHZRUNWKDWZH¦YHGRQHKHUHEHFRPHVPRUHYDOXDEOH%\EXLOGLQJDZHEDSS
ZHKDYHHIIHFWLYHO\VNLUWHGPXFKRIWKHFRPSOH[LW\RIPRELOHGHYHORSPHQW:HFDQ
KDYHRQHFRGHEDVHGHSOR\HGWRPXOWLSOHGHYLFHVDQGSODWIRUPV
2IFRXUVHGLIIHUHQWGHYLFHVKDYHGLIIHUHQWIHDWXUHV0D\EHDSDUWLFXODUSKRQHGRHVQ¦W
VXSSRUWPXOWLWRXFKRUGRHVQ¦WKDYHDQDFFHOHURPHWHU(YHQZKHQGHYLFHVGRKDYHWKH
VDPHIHDWXUHVHDFKKDVLWVRZQZD\RIH[SRVLQJWKHVHIHDWXUHVWRWKHGHYHORSHU
3KRQH*DSDEVWUDFWVWKH$3,VIRUWKHPRVWZLGHO\DYDLODEOHPRELOHSKRQHIHDWXUHVVR
PRELOHDSSOLFDWLRQGHYHORSHUVFDQXVHWKHVDPHFRGHHYHU\ZKHUH<RXVWLOOQHHGWR
GHSOR\\RXUDSSPDQXDOO\XVLQJWKH6'.SURYLGHGE\WKHYHQGRUEXW\RXGRQ¦WQHHG
WRFKDQJH\RXUDSSOLFDWLRQFRGH
..
0..4ÿ
4
7KHUHDUHRWKHUSURMHFWVDQGSURGXFWVDYDLODEOHWKDWVHUYHWKHVDPHEDVLF
SXUSRVHDV3KRQH*DSVXFKDV5KR0RELOHKWWSUKRPRELOHFRPDQG
m
UP, 7LWDQLXP 0RELOH KWWSZZZDSSFHOHUDWRUFRP ,¦P QRW IDPLOLDU
HQRXJK ZLWK WKHP WR FRPSDUH DQG FRQWUDVW EXW \RX PLJKW ZDQW WR
FKHFNWKHPRXWLQFDVHRQHVXLWV\RXUQHHGVEHWWHUWKDQ3KRQH*DS
6LQFHWKLVLVDQL3KRQHERRN,¦PJRLQJWRIRFXVRQWKHL3KRQHSRUWLRQRI3KRQH*DS
-XVWEHDZDUHWKDW\RXFDQDOVRSRWHQWLDOO\GHSOR\\RXUDSSWR$QGURLG%ODFN%HUU\
DQG:LQGRZV0RELOHGHYLFHVZLWKOLWWOHRUQRPRGLILFDWLRQ
0
,QWKHFDVHRIWKHL3KRQHWKLV6'.UHTXLUHPHQWPHDQVWKDW\RXDUHJRLQJ
WRQHHGD0DFZLWK;FRGHLQVWDOOHGDQG\RXDUHJRLQJWRKDYHWRSD\
m
UP, PRQH\WRMRLQWKHL3KRQH'HYHORSHU3URJUDP6RUU\DERXWWKDW<RXFDQ
A'
JHWWKH6'.E\UHJLVWHULQJDVDQ$SSOHGHYHORSHUDWKWWSGHYHORSHUDS
SOHFRPLSKRQH5HJLVWUDWLRQFRVWVQRWKLQJEXW\RXZLOOQHHGWRHQUROO
LQDQL3KRQHGHYHORSHUSURJUDPLI\RXZDQWWRVXEPLW\RXUDSSVWRWKH
$SS6WRUHRUHYHQUXQWKHPRQ\RXURZQSKRQH<RXFDQKRZHYHUXVH
WKHIUHH6'.WRWHVW\RXUDSSVLQWKHL3KRQH6LPXODWRUZKLFKLVLQFOXGHG
ZLWKWKHL3KRQH6'.$IWHU\RX¦YHUHJLVWHUHGDVDQL3KRQHGHYHORSHU
UHWXUQWRKWWSGHYHORSHUDSSOHFRPLSKRQHORJLQDQGGRZQORDGWKH
L3KRQH6'.7KHL3KRQH6'.LQFOXGHV;FRGHZKLFKLVWKHGHYHORSPHQW
HQYLURQPHQWWKDW\RX¦OOXVHWRWHVW\RXUDSSVLQWKHVLPXODWRUUXQWKHP
RQ\RXURZQL3KRQHDQGVXEPLWWKHPWRWKH$SS6WRUH
7RJHWVWDUWHGZLWK3KRQH*DS\RXILUVWQHHGWRGRZQORDGLW<RXFDQGRVRE\YLVLWLQJ
KWWSJLWKXEFRPSKRQHJDSSKRQHJDSDQGFOLFNLQJWKHGRZQORDGEXWWRQ)LJXUH
$VVXPLQJ\RX¦UHRQD0DF\RX¦OOSUREDEO\ZDQWWRGRZQORDGWKH=,3YHUVLRQ:KHQ
WKHGRZQORDGFRPSOHWHVXQDUFKLYHLWWR\RXUGHVNWRS)LJXUH
116 | Chapter 7:ಗGoing Native
phonegap's phooeqap at master - CltHub
+ ,'l*P7/9|tl'ub.rom/phnrwgaplrphoneg»p LJ Cj/0,» cÿoogi*
m tm Mum» M.ul C-il RTM TMIIIH rjtrlniuk iTi JVC Ruutri loulhm! R1ug\(31)» lucAirurklrti • Fimmti*
jonathanstarH DatnOMid Ht»< Accour.1 Settings log Out n

eithub
W SOC1AI COOING A-
Source Commits Netwi Download phonegap/phonegap at 0.8.0

rrw.11or .ill tK.inr.tw.
phonegap / phonegap I0 109

For* of slntaxi/phonegao
>jcrr' n access core luncllons
Homepepe: hBp-7/phonegap com
Clone URL: glt://glilyjb com/phcne<
ZIP TAR
Mrrgr branch 'nastrr" of gif: Other downloads: R4*6ldb3int7Hfe*74bt31b?49513

mailer 0.7.3 r?4!?fi;>4VI\??arr4f‘Urrf'V>hfl??
1 fiinnui .luffnvj
September 14,2000
oao
0.7.0
0.7.1
07.4
.
*M1»BO‘ma74rRaa67bS7a54rrtfc»
It R'l.’IMrHfd'KHmtf /iZnl.irdtl
0.7.2
phonegap /
CC tow.
ht story
git ignore August 17. 2009 updated gitignorc files Iuntaxi]
Makefile August 22. 2009 resolved conflict In ondrold/ossets/nWphonego.. Tslntaxll .

«A£Mt.md April 19. 2009 Moved docs Into javnserlpts directory and updat... [NachcMan]
Rakefile April 19, 2009 Moved docs Into jovoscrlpts directory and updat... [NccheMon]
android/ August 22, 2009 resolved conflict in android/asset&/»Mw/phonega. .. [sintaxi] A
(MI JIMJU Mwl AA JJldXi.1 ff.ifn.t

Open “hue //yr.hjb.vonu'pbuncsMCiMHunrviciÿtaJUO.I <T nj new windvw
)LJXUH'RZQORDGWKHODWHVWYHUVLRQRI3KRQH*DSIURP*LW+XE
f* Desktop CD
] I aa B m I ""H (<H Q ]
Name Size Comments
DEVICES *
_ Macintosh HD phonegap-phonegap-80458a0
Q] phonegap-phonegap-80458a0.zip 3.2 MB
SHARED
& JSC-Mini
PLACES
JL Desktop
;A Applications
Book
JSC
Projects
Webserver
SEARCH FOR
©Today
© Yesterday
© Past Week
I . I All Images
1 . I All Movies
i -~~1 All Documents
£ 1 )
2 items, 89.2 GB available /Z
)LJXUH8Q]LSWKH3KRQH*DSDUFKLYHWR\RXUGHVNWRS
Intro to PhoneGap | 117
3KRQH*DS GRZQORDG FRQWDLQV D EXQFK RI GHYLFHVSHFLILF GLUHFWRULHV HJ DQGURLG
LSKRQHEODFNEHUU\ZLQGRZVPRELOHDQGVRPHOLEUDU\DQGXWLOLW\ILOHVDQGGLUHFWRULHV
)LJXUH7KHRQO\RQHZH¦OOEHORRNLQJDWLVWKHLSKRQHGLUHFWRU\
« rs r) sintaxi-phonegap-4caacc5
10 items, 88.77 GB available
Name Al Date Modifie
android Sep 14, 20C
blackberry Sep 14, 20C
B configure Sep 14, 20C
CJ iphone Sep 14, 20C
L_ javascripts Sep 14, 20C
B Makefile Sep 14, 20C
Rakefile Sep 14, 20C
README.md Sep 14, 20C
Ci util Sep 14, 20C
[_, winmo Sep 14, 20C
4 /,
)LJXUH7KHWRSOHYHO3KRQH*DSGLUHFWRU\FRQWDLQVVXEGLUHFWRULHVIRUYDULRXVPRELOHSODWIRUPV
7KHLSKRQHGLUHFWRU\FRQWDLQVWKHVWDUWHUILOHVIRUDQ;FRGHSURMHFW)LJXUH7KHUH

LVQRWKLQJPDJLFDODERXWWKHVHILOHVRWKHUWKDQWKHIDFWWKDWWKH\ZHUHZULWWHQIRU\RX
UDWKHUWKDQE\\RXWKH\¦UHMXVWWKHNLQGRIJDUGHQYDULHW\VRXUFHILOHVWKDW\RX¦GILQG
LQDQ\;FRGHSURMHFW
iphone O
18 items, 88.77 GB available
Name Date Modified Date Created
*
ul beep.wav Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
build-phonegap.sh Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
* Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
Classes
Default.png Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
doxygen.cfg Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
*
n icon.png Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
Info.plist Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
[m] main.m Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
MainWindow.xib Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
[h] PhoneCap_Prefix.pch Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
PhoneCap.plist Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
2] PhoneGap.xcodeproj Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
README.md Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
Settings,plist Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
VERSION Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
www Today, 9:24 AM Sep 14, 2009 2:46 PM
index.html Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
e master.css Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
)LJXUH3KRQH*DS¦VL3KRQHVXEGLUHFWRU\FRQWDLQVVWDUWHUILOHVIRUDQ;FRGHSURMHFW
,QVLGHWKHLSKRQHGLUHFWRU\WKHUHLVDGLUHFWRU\QDPHGZZZ<RXFDQWKLQNRIWKLVDV
WKH ZHE URRW RI WKH DSSOLFDWLRQ %\ GHIDXOW LW FRQWDLQV WZR VDPSOH ILOHV QDPHG
LQGH[KWPODQGPDVWHUFVV7KHVHDUHXVHGDVWKHGHPR3KRQH*DSDSSOLFDWLRQ:HGRQ¦W
QHHGWKHPVR\RXFDQGHOHWHWKHPERWK)LJXUH
«on j iphone CD
2 of 18 selected, 88.77 CB available
Name A Date Modified Date Created
Id beep.wav Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
build-phonegap.sh Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
* Classes Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
* doxygen.cfg
H icon.png
Sep 14, 2009 2:46 PM
Sep 14, 2009 2:46 PM
Sep 14, 2009 2:46 PM
Sep 14, 2009 2:46 PM
|m main.m Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
h PboneCap_Prefix.pch Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
|2 PhoneCap.plist Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
& PhoneGap.xcodeproj Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
README.md Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
* Settings.plist Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
0 WWW Today, 9:24 AM Sep 14, 2009 2:46 PM
ll mdex.html Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
D master.css Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
)LJXUH'HOHWHWKHWZRGHIDXOWILOHVIURPWKHZZZGLUHFWRU\
1H[W FRS\ DOO RI WKH ILOHV IURP WKH .LOR DSS WKDW ZH¦YH EHHQ ZRUNLQJ RQ LQWR WKH
ZZZGLUHFWRU\RQWKH0DFKROGGRZQ2SWLRQZKLOHGUDJJLQJILOHVWRPDNHDFRS\
'RQ¦W FKDQJH \RXU IROGHU VWUXFWXUH RU QDPLQJ MXVW GURS HYHU\WKLQJ LQ WKHUH DV LV
)LJXUH
,I\RXKDYHDGGHGDPDQLIHVWOLQNWRWKH htmlWDJLQLQGH[KWPODVGH
VFULEHGLQ&KDSWHU\RXPXVWUHPRYHLW,W¦VXQQHFHVVDU\ZKHQXVLQJ
3KRQH*DSDQGPD\FDXVHSHUIRUPDQFHSUREOHPV
1H[WJRLQWR\RXULQGH[KWPOILOHDGGWKHIROORZLQJOLQHWRWKH<head>VHFWLRQDQGVDYH
WKHILOH
<script type="text/javascript" src="phonegap.js" charset="utf-8"></script>
<RXGRQ¦WQHHGWRFRS\WKHSKRQHJDSMVILOHLQWR\RXUZZZGLUHFWRU\:KHQ\RXEXLOG
\RXUDSS;FRGHWDNHVFDUHRIWKLVIRU\RX
« n rs _j iphone Q
10 of 26 selected, 87.3 GB available
Id beep.wav Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
® build-phonegap.sh Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
Classes Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
doxygen.cfg Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
* Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
icon.png
|mj main.m Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
[h] PhoneCap_Prefix.pch Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
PhoneCap.plist Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
PhoneGap.xcodeproj Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
e README.md Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
Settings.plist Sep 14, 2009 2:46 PM Sep 14, 2009 2:46 PM
T m www Today, 2:56 PM Sep 14, 2009 2:46 PM
to demos Oct 4, 2009 11:41 PM Aug 27, 2009 2:18 PM
to extensions Oct 4, 2009 11:41 PM Oct 1, 2009 1:20 AM
B index.html Today, 2:48 PM _ Oct 20, 2009 12:19 Pt
to jqtoueh _ Oct 20, 2009 2:48 AM Oct 20, 2009 2:48 AM
D kilo.css _ Today, 2:47 PM _ Today, 10:27 AM
D kilo.js _ Today, 10:41 AM Today, 10:27 AM
D UCENSE.txt Jul 28, 2009 11:50 AM Jul 28, 2009 11:50 AM
D README.txt Aug 30, 2009 10:22 PM Aug 30, 2009 10:22 2
D sample.htaccess Oct 5, 2009 10:37 AM Oct 5, 2009 10:37 AM
to themes Oct 20, 2009 2:48 AM Oct 20, 2009 2:48 AM
€ «
)LJXUH&RS\\RXUHQWLUHZHEDSSLQWRWKHZZZGLUHFWRU\
0DNHVXUHWKHPDLQSDJHIRU\RXUDSSLVQDPHGLQGH[KWPORWKHUZLVH
3KRQH*DSZRQ¦WNQRZZKDWILOHWRODXQFK
8QEHOLHYDEO\ZH¦UHDOPRVWUHDG\WRWHVWRXUDSS2SHQWKHSURMHFWLQ;FRGHE\GRXEOH
FOLFNLQJWKH3KRQH*DS[FRGHSURMILOHLQWKH)LQGHU2QFHWKHSURMHFWZLQGRZLVRSHQ
PDNHVXUH\RXKDYHWKHPRVWUHFHQWYHUVLRQRIWKHL3KRQH6LPXODWRUDVRIWKLV
ZULWLQJVHOHFWHGDV\RXUDFWLYH6'.DQGWKHQFOLFNWKH%XLOGDQG5XQEXWWRQ)LJ
XUH$IWHUDERXWVHFRQGVWKHL3KRQH6LPXODWRUVKRXOGDSSHDUDQGODXQFK\RXU
DSS
I
|
I
1
I
i
*
*•
'»
p
o
o
E
0
s
?
*S
s
§
s
£
r
X
t>
i
’
l \i
s
I
fC
]
:
•
Vs
it
I
•
Him s s s i. -o|*
•- o
?????!
5
o
i ««««««
*
r
«
a
— —
f
s
- rs-
tr a*
if
I
- ?
E
-K
s
*-
*
?n
:•
2
a
7
r
a
r*
Q
s
s
v
* 9 9 l«P
9
Iff e[5
l
VM
i
i i
••
o
Zj
*
B
i3
1/
<s
*%
ft
©
4*
e
#
n
K
r
£
f
c
c
r
r
)LJXUH6HOHFWL3KRQH6LPXODWRUDV\RXUDFWLYH6'.
'5*
,I WKH VLPXODWRU GRHV QRW ODXQFK LW PHDQV WKHUH LV DQ HUURU LQ \RXU
SURMHFW/RRNIRUDUHGQXPEHULQWKHERWWRPULJKWFRUQHURIWKH;FRGH
* '*0
e
ZLQGRZWKLVLVWKHQXPEHURIHUURUVHQFRXQWHUHG&OLFNWKHQXPEHUIRU
GHWDLOVDERXWWKHHUURUDQGWKHQUHYLHZWKHVHVWHSVWRILJXUHRXWZKHUH
WKLQJVZHQWZURQJ,I\RXUXQLQWRDSUREOHP\RXFDQ¦WUHVROYHYLVLWWKH
3KRQH*DS FRPPXQLW\ UHVRXUFHV DW KWWSSKRQHJDSFRPFRPPXQLW\
6HDUFKWKURXJKWKHZLNLDQG*RRJOH*URXSIRUDQVZHUVWR\RXUSUREOHP
EHIRUHSRVWLQJDTXHVWLRQ,I\RXGRSRVWDTXHVWLRQLQFOXGHDVPXFK
LQIRUPDWLRQDVSRVVLEOHDERXWWKHHUURU
<RXUDSSVKRXOGQRZEHUXQQLQJLQWKHL3KRQH6LPXODWRUDVDQDWLYHDSS7KLVPD\
VHHPOLNHQRELJGHDOEHFDXVHWKHDSSZLOOORRNDQGIHHOMXVWOLNHWKHIXOOVFUHHQZHE
DSSWKDWZHKDGUXQQLQJLQ&KDSWHU+RZHYHUWKHUHLVDSURIRXQGGLIIHUHQFHQDPHO\
WKDWZHFDQQRZVWDUWDFFHVVLQJGHYLFHIHDWXUHVWKDWZHUHSUHYLRXVO\XQDYDLODEOH%HIRUH
ZHJHWWRWKDWWKRXJKZHQHHGWRGRDELWRIFOHDQXS
Using the Screen’s Full Height
<RX¦OOQRWLFHWKDWWKHUHLVDS[JDSDWWKHERWWRPRIWKHZLQGRZ)LJXUH7KLV
RFFXUVEHFDXVHM47RXFKGRHVQRWUHDOL]HWKDWZHDUHUXQQLQJLQIXOOVFUHHQPRGHVR
LW¦VDOORZLQJURRPIRUWKH6DIDULWRROEDU7KLVPDNHVVHQVHIURPM47RXFK¦VSHUVSHFWLYH
EHFDXVHWKHDSSWHFKQLFDOO\LVQ¦WUXQQLQJDVDIXOOVFUHHQZHEDSS%XWLWLVUXQQLQJDV
t Jt AM
Kilo
Dates
About
)LJXUH<RX¦OOQRWLFHDS[JDSDWWKHERWWRPRIWKHVFUHHQ
DQDWLYHDSSDQGWKHUHIRUHKDVDFFHVVWRWKHZKROHVFUHHQ)RUWXQDWHO\WKHIL[LVHDV\
-XVWRSHQNLORMVDQGDGGWKHIROORZLQJFRGHWRWKHGRFXPHQWUHDG\IXQFWLRQ
if (typeof(PhoneGap) != 'undefined') {
$('body > *').css({minHeight: '460px !important'});
}
1RZWKDW\RX¦YHRSHQHG\RXU3KRQH*DSSURMHFWLQ;FRGH\RXPLJKW
ZDQWWRJLYH;FRGH¦VEXLOWLQHGLWRUDWU\7RHGLWWKHNLORMVILOHLQ;FRGH
4
PDNHVXUHWKH3KRQH*DSJURXSLVRSHQLQWKH*URXSV )LOHVSDQHORQ
WKHOHIWVLGHRIWKH;FRGHZLQGRZ([SDQGWKHZZZIROGHUDQGFOLFN
NLORMVWRRSHQLWLQ;FRGH¦VHGLWRU
7KLVFRGHXVHVWKHtypeofRSHUDWRUWRPDNHVXUHWKHPhoneGapREMHFWKDVEHHQGHILQHG
,IWKHFRGHLVUXQQLQJLQVLGHRI3KRQH*DSWKLVFRQGLWLRQDOZLOOHYDOXDWHWRtrue,IWKH
FRGHLVODXQFKHGDVDZHEDSSWKHPhoneGapREMHFWZLOOEHXQGHILQHGDQGWKHFRQGLWLRQDO
ZLOOHYDOXDWHWRfalse
:KHQWKHDSSLVODXQFKHGZLWK3KRQH*DSWKHLPPHGLDWHFKLOGUHQRIWKH+70/ERG\
HOHPHQWZLOOEHJLYHQDPLQLPXPKHLJKWRIS[7RPDNHVXUHWKDWWKHGHFODUDWLRQ
WDNHVHIIHFW,¦YHDGGHGWKH!importantGLUHFWLYHWRRYHUULGHDQ\FRQIOLFWLQJLQVWUXFWLRQV
HOVHZKHUH LQ WKH VW\OHVKHHWV 1RZ WKH DSS ZLOO FRPSOHWHO\ ILOO WKH ZLQGRZ ZKHQ
ODXQFKHG)LJXUH
«J1 AM
Kilo
Dates
About
)LJXUH$IWHUWKHERG\KHLJKWLVFKDQJHGIURPS[WRS[WKHDSSWDNHVXSWKHZKROHVFUHHQ
Customizing the Title and Icon

1H[WZHQHHGWRFKDQJHWKHGHIDXOWQDPHDQGLFRQIRUWKHDSS%\GHIDXOW3KRQH*DS
DSSVDUHFDOOHG£3KRQH*DS¤DQGKDYHDEOXHLFRQZLWKDODGGHURQLW)LJXUH
A ±
)LJXUH7KHGHIDXOWQDPHDQGLFRQIRURXUDSS
7RFKDQJHWKHDSSQDPHRQWKHKRPHVFUHHQRSHQWKHSURMHFWLQ;FRGHE\GRXEOH
FOLFNLQJ WKH 3KRQH*DS[FRGHSURM ILOH LQ WKH )LQGHU 2QFH LW¦V RSHQ JR WR
3KRQH*DSൺ&RQILJൺ,QIRSOLVWLQWKH*URXSV )LOHVSDQHO7KH,QIRSOLVWILOHVKRXOGEH
GLVSOD\HGLQWKHERWWRPULJKWSDQHORIWKHZLQGRZ
<RXVKRXOGVHHWKDWWKHEXQGOHGLVSOD\QDPHLVVHWWR3KRQH*DS)LJXUH'RXEOH
FOLFN3KRQH*DSDQGFKDQJHLWWR.LOR)LJXUH7KHQVDYHWKHILOHFOHDQWKHSURMHFW
E\FOLFNLQJ%XLOGൺ&OHDQDQGFOLFNWKH%XLOGDQG5XQEXWWRQ7KHL3KRQH6LPXODWRU
VKRXOGRSHQDQGODXQFKWKHDSS&OLFNWKHKRPHEXWWRQLQWKHVLPXODWRUWRUHWXUQWR
WKHKRPHVFUHHQDQGQRWHWKDWWKHDSSQDPHKDVEHHQXSGDWHGIURP3KRQH*DSWR.LOR
)LJXUH
«nn Info.plist - PhoneCap CD
Simulator - 3.1 | Debug -•| | <1 [ H Q.* String Matching ]

Overview Action Breakpoints Build and Run Tasks Info Search
Croups & Files File Name A \ Code © A ©
5? PhoneGap Q] Info.plist
www
Config
J Settings.plist
r| PhoneCap.plist
f] Info.plist
VERSION
[*J Default.png
[*] icon.png
e README.md
Cÿl Classes < I Info.plisti e a
Other Sources
Key Value
£_ Resources
Information Property List (14 items)
[_; Frameworks
Localization native development re en
Q_ Products
(Q) Targets
Bundle display name PhoneCap ±)
Executable file S(EXECUTABLE_NAME}
Executables
Find Results Icon file icon.png
Bundle identifier com.sintaxi.phonegapdemo
L3 Bookmarks
SCM InfoDictionary version 6.0
Project Symbols Bundle name S(PRODUCT_NAME)
Gal Implementation Files Bundle OS Type code APPL
S|NIB Files Bundle creator OS Type code 7777
Bundle version 1.0.1
LSRequiresIPhoneOS 0 A
Main nib file base name MainWindow T
Debugging terminated. ©Succeeded 1
)LJXUH7KHEXQGOHGLVSOD\QDPHLQ;FRGHLV3KRQH*DS
1H[WZHQHHGWRFKDQJHWKHKRPHVFUHHQLFRQIURPWKH3KRQH*DSGHIDXOWWKHODGGHU
SLFWXUHGLQ)LJXUHWRRXUFXVWRPLFRQ7KHILOHIRUPDWIRUERWKWKHDSSLFRQDQG
WKH:HE&OLSLFRQLVDS[ÜS[31*VR\RXFDQXVHWKHH[DFWVDPHZHEDSSLFRQ
WKDW \RX FUHDWHG IRU WKH KRPH VFUHHQ LFRQ LQ £$GGLQJ DQ ,FRQ WR WKH +RPH
6FUHHQ¤RQSDJH
« n r> Info.plist - PhoneCap CD
Simulator - 3.1 I Debug

Overview
3 53
Action
a
Breakpoints Build and Run
String Matching
Search
]
Groups & Files File Name A | Code © A 0
PhoneCap [3] Info.plist
WWW
i ~] Confiq
Settings.plist
j PhoneCap.plist
j ir| Info.plist
VERSION
J*J Defaulting
icon.png
z README.md
Qj Classes < Info.plist i v c„ 9, m a
|_3 Other Sources Key Value
(_ Resources
f Frameworks
(_ Products
Bundle display name Kilo
@ Targets T
Executable file S(EXECUTABLE_NAME1

Executables
Find Results Icon file icon.png
Li*] Bookmarks Bundle identifier com.sintaxi.phonegapdemo
! SCM InfoDictionary version 6.0
Q Project Symbols Bundle name S| PRODUCT_NAM E}
Files Bundle OS Type code APPL

fiÿNIB Files Bundle creator OS Type code rm
LSRequiresIPhoneOS 0
Main nib file base name MainWindow
UlStatusBarHidden A
UlStatusBarStyle UlStatusBarStyleDefault
Debugging terminated. ©Succeeded 1
)LJXUH7KHEXQGOHGLVSOD\QDPHLVQRZVHWWRWKHQDPHRIRXUDSS.LOR
AT&T
•U AM
W
)LJXUH7KHQHZEXQGOHGLVSOD\QDPHQRZDSSHDUVRQWKHL3KRQHKRPHVFUHHQ
7KHRQO\GLIIHUHQFHLVWKDWZLWKWKH:HE&OLSLFRQZHFDQSUHYHQWWKHL3KRQHIURP
DGGLQJJORVVWRWKHJUDSKLFE\WRJJOLQJWKH addGlossToIconVHWWLQJLQM47RXFKWKLV
VHWWLQJ ZLOO KDYH QR HIIHFW LQ 3KRQH*DS 7R SUHYHQW DGGLQJ JORVV WR \RXU LFRQ LQ
3KRQH*DSVHOHFW&RQILJ,QIRSOLVWLQWKH*URXSV )LOHVSDQHORIWKHPDLQ;FRGHZLQ
GRZDQGFKHFNWKHER[QH[WWR UIPrerenderedIconLQ,QIRSOLVW\RXPD\QHHGWRDGG
WKLVWR,QIRSOLVWVHH£$GGLQJ6HWWLQJVWR,QIRSOLVW¤QH[WIRULQVWUXFWLRQV
Adding Settings to Info.plist

,I\RXGRQ¦WVHHWKHUIPrerenderedIconRSWLRQLQ,QIRSOLVW\RXFDQDGGLWE\IROORZLQJ
WKHVHVWHSV
6HOHFW&RQILJ,QIRSOLVWLQWKH*URXSV )LOHVSDQHORIWKHPDLQ;FRGHZLQGRZ
)LJXUH
&RQWUROFOLFN RU ULJKWFOLFN WKH ODVW LWHP LQ ,QIRSOLVW WR GLVSOD\ WKH FRQWH[WXDO
PHQX
6HOHFW$GG5RZIURPWKHFRQWH[WXDOPHQX)LJXUH
7\SHUIPrerenderedIconLQWKHNH\ILHOG)LJXUH
3UHVVWKH(QWHUNH\WRVDYH\RXUHQWU\7KHURZVKRXOGEHFRPHKLJKOLJKWHG)LJ
XUH
&RQWUROFOLFNRUULJKWFOLFNWKHKLJKOLJKWHGURZWRGLVSOD\WKHFRQWH[WXDOPHQX
DJDLQDQGVHOHFW%RROHDQIURPWKH9DOXH7\SHVXEPHQX)LJXUH$FKHFNER[
VKRXOGDSSHDULQWKHYDOXHFROXPQ
&KHFNWKHFKHFNER[WRWHOO;FRGHQRWWRDGGJORVVWR\RXULFRQ)LJXUH
&OHDQ\RXUSURMHFWE\FOLFNLQJ%XLOGൺ&OHDQDQGZKHQ\RXEXLOGDQGUXQLW\RXULFRQ
ZLOODSSHDUZLWKRXWWKHJORVVHIIHFWDGGHG
I
;
* X
o
cr
I
J
Hi
•i
oi
l l
I1
0
II?
!
•O
!
I
illii
f
l#
i
1
-451
!
i
A
* »
i 5
4
*
i
A
min siis
sills
*
•'WlrtM
ifiililiijlsJ }
,
«* L
j i]fi sill I n*
1
Hi!
-J
)LJXUH6HOHFW&RQILJ,QIRSOLVWLQWKH*URXSV )LOHVSDQHORIWKHPDLQ;FRGHZLQGRZ

Key Value
Information Property List (IS items)
Executable file S( EXECUTABLE_NAME}
Icon file
Bundle identifier Cut lark.kilo
InfoDictionary version Copy
Bundle name Paste
Bundle OS Type code
Bundle creator OS Type code
Shift Row Right
Bundle version Shift Row Left
LSRequiresIPhoneOS
Value Type
Main nib file base name
UlStatusBarHidden Add Row
UlStatusBarStyle *
Bundle versions string, short Show Raw Keys/Values
Open As
Reveal in Finder
Reveal in Croup Tree
Add to Bookmarks
)LJXUH6HOHFW$GG5RZIURPWKHFRQWH[WXDOPHQX
Key Value
Executable file S(EXECUTABLE_NAME}
Icon file icon.png
Bundle identifier 9SZN26J67D.com.jonathanstark.kilo
InfoDictionary version 6.0
Bundle name $(PRODUCT_NAME)
Bundle OS Type code APPL
Bundle creator OS Type code 7777

UlStatusBarHidden
UlStatusBarStyle UlStatusBarStyleBlackOpaque
Bundle versions string, short
UlPrerenderedlcon)
*
)LJXUH7\SH8,3UHUHQGHUHG,FRQLQWKHNH\ILHOG
7KH GHIDXOW 3KRQH*DS KRPH VFUHHQ LFRQ LV QDPHG LFRQSQJ DQG LV ORFDWHG LQ
3KRQH*DS¦VLSKRQHGLUHFWRU\)LJXUH5HSODFHWKHGHIDXOWLFRQILOHZLWK\RXUFXV
WRPILOH)LJXUHVDQGFOHDQWKHSURMHFWFOLFN%XLOGൺ&OHDQDQGFOLFNWKH
%XLOGDQG5XQEXWWRQ7KHL3KRQH6LPXODWRUVKRXOGRSHQDQGODXQFKWKHDSS&OLFN
WKHKRPHEXWWRQLQWKHVLPXODWRUWRUHWXUQWRWKHKRPHVFUHHQDQGQRWHWKDWWKHDSS
LFRQKDVEHHQXSGDWHGWRDFKRFRODWHIURVWHGGRQXWZLWKMLPPLHVRQDSLQNEDFNJURXQG
)LJXUH
Key Value
Executable file $(EXECUTABLE_NAME(
Icon file icon.png
Bundle name S(PRODUCT_NAME)
Bundle creator OS Type code rrn
UlStatusBarHidden
A
UlPrerenderedlcon
*
)LJXUH3UHVVWKH(QWHUNH\WRVDYH\RXUHQWU\LQWKHNH\ILHOG
Key Value
Executable file S(EXECUTABLE_NAME)
Icon file icon
Bundle identifier 9SZI Cut
InfoDictionary version 6.0 Copy
Bundle name SJPR Paste
Bundle OS Type code APPI
Bundle creator OS Type code 7777 Shift Row Right
Bundle version yi Shift Row Left
LSReq uiresIPho neOS
Value Type Array
Main nib file base name Mair1
Dictionary
UlStatusBarHidden Add Row
UlStatusBarStyle uist Boolean
Bundle versions string, short Show Raw Keys/Values Data
UlPrerenderedlcon Date
Open As
Reveal in Finder Number
Reveal in Croup Tree String
Add to Bookmarks
)LJXUH6HOHFW%RROHDQIURPWKH9DOXH7\SHVXEPHQX
Key Value
Information Property List 1(16 items)
Executable file SlEXECUTABLE.NAME)
Icon file icon.png
Bundle name S{ PRODUCT_NAME)
Bundle creator OS Type code 7?7?
UlStatusBarHidden
UlPrerenderedlcon : 0
)LJXUH&KHFNWKHFKHFNER[WRWHOO;FRGHQRWWRDGGJORVVWR\RXULFRQ
_niphone _
1 of 16 selected. 88.8 GB available
H beep.wav
n
Preview:
build-phonegap.sh
*
Qj Classes
Default.png
doxygen.cfg
*
B Icon.png Name icon.png
Info.plist Kind Portable Network Graphics
image
[ml main.m
Size 8 KB on disk
MainWindow.xib
Created 9/14/09 2:46 PM
[h| PhoneCap_Prefix.pch Modified 9/14/09 2:46 PM
PhoneCap.plist Last opened 9/14/09 2:46 PM
§3PhoneGap. xcodeproj
e README.md
Dimensions —
Settings.plist More info...
VERSION
WWW
II
3< //.
)LJXUH7KHGHIDXOWKRPHVFUHHQLFRQLVDZKLWHODGGHURQDEOXHEDFNJURXQG
_i iphone
1 of 17 selected. 88.8 GB available
H beep.wav Preview:
Q build
e build-phonegap.sh
Classes
Default.png
doxygen.cfg Name icon.png
* Kind Portable Network Graphics
Icon.png
image
Info.plist
Size 8 KB on disk
[m] main.m
Created 9/17/09 9:08 PM
MainWindow.xib Modified 9/17/09 9:08 PM
|hj PhoneGap_Prefix.pch Last opened 9/17/09 9:08 PM
PhoneGap.plist Dimensions 57 x 57
5 PhoneGap.xcodeproj
2 README.md ([ More info...
Settings. plist
VERSION
Q WWW
I
(
*
)LJXUH 7KH FXVWRP KRPH VFUHHQ LFRQ LV D FKRFRODWH IURVWHG GRQXW ZLWK MLPPLHV RQ D SLQN
EDFNJURXQG
nnn Copy
An older item named "icon.png" already exists in this

location. Do you want to replace it with the newer one
you’re moving?
Stop Replace
)LJXUH5HSODFHLFRQSQJLQLSKRQHGLUHFWRU\ZLWK\RXURZQFXVWRPS[ÜS[SQJJUDSKLF
A ±
)LJXUH2XUFXVWRPDSSLFRQQRZDSSHDUVRQWKHL3KRQHKRPHVFUHHQ
Creating a Startup Screen

1H[W ZH QHHG WR FKDQJH WKH VWDUWXS VFUHHQ IURP WKH 3KRQH*DS GHIDXOW
)LJXUH WR RXU FXVWRP VWDUWXS VFUHHQ %DFN LQ £3URYLGLQJ D &XVWRP 6WDUWXS
*UDSKLF¤RQSDJH\RXFUHDWHGD31*ILOHWRVHUYHDVWKHVWDUWXSVFUHHQZKHQWKH
ZHEDSSLVODXQFKHGLQIXOOVFUHHQPRGHIURPD:HE&OLSLFRQRQWKHKRPHVFUHHQ
)LJXUH:HQHHGWRFKDQJHWKHGHIDXOWVWDUWXSJUDSKLFIRUWKHDSS
)RUIXOOVFUHHQZHEDSSVWKDWXVHDJUD\RUEODFNVWDWXVEDUWKLVJUDSKLFQHHGVWREH
S[ÜS[DQGIRUDSSVWKDWXVHDEODFNWUDQVOXFHQWVWDWXVEDULWPXVWEHS[
ÜS[SL[HOVWDOOHU
:LWK3KRQH*DSWKHVWDUWXSVFUHHQKDVWREHS[ÜS[UHJDUGOHVVRIZKDWW\SH
RIVWDWXVEDULVXVHG6RLI\RXFUHDWHGDS[ÜS[IXOOVFUHHQJUDSKLFDGGS[
WRWKHKHLJKW
7KH GHIDXOW 3KRQH*DS VWDUWXS JUDSKLF LV QDPHG 'HIDXOWSQJ DQG LV ORFDWHG LQ
3KRQH*DS¦VLSKRQHGLUHFWRU\)LJXUH5HSODFHWKHGHIDXOWVWDUWXSJUDSKLFZLWK
\RXUFXVWRPJUDSKLFDVVKRZQLQ)LJXUHVDQGDVVKRZQLQ)LJXUHFOHDQ
WKHSURMHFWDQGFOLFNWKH%XLOGDQG5XQEXWWRQ7KHL3KRQH6LPXODWRUVKRXOGRSHQ
DQGODXQFKWKHDSSDQG\RXVKRXOGVHHWKHFXVWRPJUDSKLFGLVSOD\HG)LJXUH
n iphone g.
U beep.wav Preview:
M build
® build-phonegap.sh
fij Classes
|Default.png
® doxygen.cfg
PI icon.png
Info.plist
[m] main.m
MainWindow.xib
h PhoneGap_Prefix.pch
PhoneCap.plist
PhoneCap.xcodeproj
c README.md
Settings,plist
VERSION
WWW Name Defaulting
Kind Portable Network
Graphics image
Size 4 KB on disk
Created 9/14/09 2:46 PM
Modified 9/14/09 2:46 PM
Last opened 9/14/09 2:46 PM
Dimensions 320x480
More info...
)LJXUH7KHGHIDXOWODXQFKJUDSKLFVD\V3KRQH*DSLQJUD\WH[WRQDZKLWHEDFNJURXQG
Installing Your App on the iPhone

,QWKHQH[WVHFWLRQZH¦OODGGVRXQGYLEUDWLRQDOHUWVDQGPRUHWRWKH.LORH[DPSOH
DSSOLFDWLRQ6RPHRIWKHVHIHDWXUHVFDQ¦WEHWHVWHGLQWKHL3KRQH6LPXODWRUVR\RXQHHG
WRJHW.LORLQVWDOOHGRQDQDFWXDOL3KRQHEHIRUH\RXFDQWHVWDQ\RIWKLV
Installing Your App on the iPhone | 131
« rs rs _niphone _
H beep.wav Preview:
build
build-phonegap.sh
*
Classes
D Default.png
doxygen.cfg
*
icon.png
[j Info.plist
[hi Kilo_Prefix.pch
Kilo.xcodeproj
Kilo
'm| main.m
MainWindow.xib
PhoneCap.plist
e README.md
Settings. plist
VERSION
Q WWW Name Default.png
Kind Portable Network
Graphics image
Size 16 KB on disk
Created 9/18/09 1:02 AM
Modified 10/12/09 10:14
PM
Last opened 10/12/09 10:14
PM A
Dimensions 320x480
r 34
)LJXUH7KHFXVWRPODXQFKJUDSKLFVD\V.LORLQJUD\WH[WRQDEODFNEDFNJURXQG
n Copy
An older item named ''Default.png' already exists in this

location. Do you want to replace it with the newer one
you’re moving?
Stop Replace
)LJXUH5HSODFH'HIDXOWSQJLQWKHLSKRQHGLUHFWRU\ZLWKWKHFXVWRPS[ÜS[31*JUDSKLF
/i
IM AM
Kilo
)LJXUH2XUFXVWRPVWDUWXSJUDSKLFQRZDSSHDUVZKHQWKHDSSLVODXQFKHG
7RLQVWDOODQDSSRQWKHL3KRQH$SSOHUHTXLUHVWKDWWKHDSSWKHSKRQHDQGWKHGH
YHORSHU\RXDOOEHXQLTXHO\LGHQWLILHG7KHVHWKUHHSLHFHVRIGDWDDUHFRPELQHGLQD
ILOHFDOOHGD£SURYLVLRQLQJSURILOH¤WKDW\RXZLOODGGWR;FRGH
,QRUGHUWRJHQHUDWHDSURYLVLRQLQJSURILOH\RXPXVWILUVWEHDPHPEHURIWKHL3KRQH
'HYHORSHU 3URJUDP <RX WKHQ UXQ WKH 'HYHORSPHQW 3URYLVLRQLQJ $VVLVWDQW '3$
IRXQG LQ WKH L3KRQH 'HYHORSHU 3URJUDP 3RUWDO VHFWLRQ RI WKH L3KRQH GHYHORSHU VLWH
KWWSGHYHORSHUDSSOHFRPLSKRQH<RX¦OOEHPDNLQJDFRXSOHRIWULSVLQWRWKH.H\
FKDLQ$FFHVVDSSOLFDWLRQORFDWHGLQ$SSOLFDWLRQV8WLOLWLHVWRFUHDWHFHUWLILFDWHVLJQLQJ
UHTXHVWVDQGWRLQVWDOOVLJQHGFHUWLILFDWHVWKDW\RXGRZQORDGIURPWKHSRUWDOLQWR\RXU
RZQNH\FKDLQ7KH'3$GRHVDQH[FHOOHQWMREZDONLQJ\RXWKURXJKWKHVWHSVQHHGHG
WRFUHDWHDQGLQVWDOO\RXUSURYLVLRQLQJSURILOHVR,ZRQ¦WUHKDVKWKHLQVWUXFWLRQVKHUH
+RZHYHU,ZLOOJLYH\RXVRPHSRLQWHUV
:KHQ,ILUVWVWDUWHGZLWKL3KRQHDSSGHYHORSPHQW,PDGHDIHZWHVW$SS,'VLQ
WKH3URJUDP3RUWDODVVXPLQJWKDW,FRXOGODWHUHGLWRUGHOHWHWKHPRQFH,ILJXUHG
RXWKRZWKLQJVZRUNHG:HOO,ZDVZURQJ\RXFDQ¦WHGLWRUGHOHWH$SS,'V7KLV
PHDQVWKDWWZR\HDUVODWHU,¦PVWLOOVWDULQJDW£-6&7HPS$SS,'¤ZKHQ,ORJLQ
WRWKHGHYHORSHUSRUWDO,I\RXDUHDQ\WKLQJOLNHPHWKLVZLOOGULYH\RXFUD]\VR
GRQ¦WPDNHWKHVDPHPLVWDNH
.HHS\RXULQSXWEULHIEXWGHVFULSWLYHLQWKH'3$,I\RXUGHVFULSWRUVDUHWRRYDJXH
\RX¦OOJHWFRQIXVHGDV\RXDGGPRUHLWHPV,IGHVFULSWRUVDUHWRRORQJWKH\¦OOEH
WUXQFDWHGLQWKHRQOLQHLQWHUIDFH7U\WRNHHSWKLQJVWRDPD[RIDERXWFKDUDFWHUV
:KHQSURPSWHGIRUDQ$SS,'GHVFULSWLRQMXVWXVHWKHQDPHRI\RXUDSSDQG
SRVVLEO\DYHUVLRQQXPEHULI\RXDUHSODQQLQJRQKDYLQJPXOWLSOHYHUVLRQVDFWLYH
LQWKH$SS6WRUHDWWKHVDPHWLPH¢HJ.LOR
:KHQSURPSWHGIRUDGHYLFHGHVFULSWLRQLQFOXGHWKHW\SHRIGHYLFHL3KRQHL3RG
WRXFKHWFDQGWKHKDUGZDUHYHUVLRQ****6HWF'RQ¦WLQFOXGHWKH
26YHUVLRQEHFDXVHWKLVFDQFKDQJHZLWKRXWLQYDOLGDWLQJWKHSURYLVLRQLQJSURILOH
%HDULQPLQGWKDWLI\RXHQGXSPDNLQJEHWDYHUVLRQVRIWKHDSSDYDLODEOHWRWHVWHUV
\RX¦OODOVRZDQWWRLQFOXGHDQRZQHULGHQWLILHUIRUH[DPSOH\RXFRXOGXVHLQLWLDOV
(/6L3KRQH*6-6&L3KRQH*-6&L3KRQH*-6&7RXFK*HWF
:KHQSURPSWHGIRUDSURILOHGHVFULSWLRQFRPELQHWKHQDPHRIWKHDSSZLWKWKH
WDUJHWGHYLFHHJ.LORRQ-6&L3KRQH*6
2QFH\RX¦YHFUHDWHG\RXUSURYLVLRQLQJSURILOH\RXPXVWGRZQORDGLWDQGGUDJLWRQWR
;FRGH¦VGRFNLFRQWRPDNHLWDYDLODEOHWR\RXUGHYLFH7KLVEULQJVXSWKHRUJDQL]HU
ZLQGRZ,I\RXKDYHPXOWLSOHDSSVPXOWLSOHGHYLFHVRUERWK\RX¦OOKDYHRQHSURYL
VLRQLQJSURILOHIRUHDFKFRPELQDWLRQGLVSOD\HGLQ;FRGH)LJXUH
1RZWKDW\RXUSURYLVLRQLQJSURILOHLVDYDLODEOHLQ;FRGH\RXQHHGWRXSGDWHWKHEXQGOH
LGHQWLILHUIRU\RXUDSS6HOHFWWKHDSSURSULDWHSURYLVLRQLQJSURILOHLQWKH;FRGHRUJDQ
L]HUZLQGRZDQGFRS\WKHDSSLGHQWLILHU)LJXUH
« r> rs Organizer CD
Build
£1.
Clean Run Action
PROJECTS & SOURCES Cÿ» Profile Name

DEVICES
• Name A Expiration Date
§ JSC iPhone 3G 9 Kilo3 on JSC Touch 1C 1/10/10 3:28 PM
Kilo3 on JSC iPhone 2C 1/10/10 3:27 PM
IPHONE DEVELOPMENT
Kilo3 on JSC iPhone 3G 1/10/10 3:27 PM
Crash Logs Tweeps on JSC Touch 1G 1/10/10 3:28 PM
a Provisioning Profiles Tweeps on JSC iPhone 2G 1/10/10 3:29 PM
Tweeps on JSC iPhone 3G 1/10/10 3:29 PM
[“) Screenshots
• Software Images
[
+* )4 /ÿ,
)LJXUH0XOWLSOHSURYLVLRQLQJSURILOHVORDGHGLQ;FRGH
AAA Organise'
» niojim A uuicn
Q.* FSohi# Hunt
OCVK1S
» | txpnelion OM(
§ JV iPtionr \C A KrtoJ on »C TOUCH 1C monolit PM
IPVOXL oivriorvisi
«.>oJ on JVC .PHOn* 2C uio/io atm
IUOT on JSf IPhone 1C 1/10/10 127 PM
C'«k log* Tuveeuc 8" ISC Touch 1C 1/10/10 121 PM
'«-«£•» on JSC 'Phone 2C 1/10/10 129 PM
> IciwmMi Tuvrstt O" JSC iPhone 1C 1/10/10 129 PM
• Soft***'* Invigct
Name: KJ(O3 on JSC iPhone JG

Creation Date: On 12. 2009 4:27 PV
4
PROV
Lxpiration Date: Jan 10. 2010 J:27 PM
Profile Identifier
App Identifier
Included Devices
• Device ham* •niuned
A JSC iPhone X. installed
*• o- a
)LJXUH6HOHFWWKHSURYLVLRQLQJSURILOHIRU\RXUDSSGHYLFHFRPELQDWLRQLQWKH;FRGHRUJDQL]HU
ZLQGRZWRORFDWH\RXUDSSLGHQWLILHU
7KHQ FOLFN 3KRQH*DSൺ&RQILJൺ,QIRSOLVW LQ WKH *URXSV )LOHV SDQHO RI WKH PDLQ
;FRGHZLQGRZDQGSDVWHWKHDSSLGHQWLILHULQWRWKHEXQGOHLGHQWLILHUILHOG,I\RXUDSS
LGHQWLILHUHQGVZLWKDQDVWHULVNUHSODFHWKHDVWHULVNZLWKDUHYHUVHGRPDLQQDPH¡VW\OH
VWULQJVXFKDVcom.jonathanstark.kilo)LJXUH
« rs n Info.plist - PhoneCap CD
Device - 3.1.2 | Debug

Overview
| | <1 [
Action
H
Breakpoints Build and Run Tasks
O
Info
i E Siring Matching
Search
Croups & Files File Name AI -S Code © A ©
U PhoneGap [rj Info.plist
Q WWW
C~l Config
Settings.plist
PhoneCap.plist
Tj Info.plist
VERSION
?] Default.png
*] icon.png
e README.md
C Classes
L Other Sources
f~ Resources
(_ Frameworks M | i Info.plist t MC,I«,I m la
£_ Products Key Value
(§) Targets Information Property List (15 items)
Executables
Cÿ Find Results
L4JJ Bookmarks Executable file SIEXECUTABLE_NAME}
:_j SCM
Icon file icon.png
».l Project Symbols
Implementation Files Bundle identifier .com.jonathanstark.kilo ±)
NIB Files Bundle versions string, short
Bundle name S|PRODUCT_NAMEJ
Bundle creator OS Type code 7?V
UlStatusBarHidden
UlStatusBarStyle UlStatusBarStyleDefault
)LJXUH3DVWH\RXUDSSLGHQWLILHULQWRWKHEXQGOHLGHQWLILHUILHOGUHSODFLQJWKHDVWHULVNZLWKD
UHYHUVHGRPDLQQDPH¡VW\OHVWULQJ
1RZSOXJ\RXUL3KRQHLQWR\RXUFRPSXWHUDQGVHOHFWWKHL3KRQHGHYLFHRSWLRQDV\RXU
DFWLYH6'.)LJXUH0DNHVXUHWRFKRRVHWKHL3KRQHGHYLFHYHUVLRQWKDWPDWFKHV
WKHYHUVLRQRIL3KRQH26\RXDUHUXQQLQJRQ\RXUL3KRQHWKHPRVWUHFHQWLVDV
RIWKLVZULWLQJ6DYHWKH,QIRSOLVWILOHFOHDQWKHSURMHFWFOLFN%XLOGൺ&OHDQDQGFOLFN
WKH%XLOGDQG5XQEXWWRQ$IWHUDERXWVHFRQGVWKHDSSVKRXOGODXQFKRQ\RXU
L3KRQH7KHILUVWWLPH\RXODXQFKLW\RX¦OOEHSURPSWHGWRDOORZWKHFRGHVLJQDSSOLFD
WLRQDFFHVVWR\RXUNH\FKDLQDQG\RX¦OODOVREHSURPSWHGWRLQVWDOOWKHSURYLVLRQLQJ
SURILOHRQ\RXUL3KRQH,I\RXJHWDQ\HUURUVUHVWDUW;FRGHDQGWU\DJDLQ
1RZWKDWWKHDSSLVUXQQLQJRQDQDFWXDOL3KRQHZHFDQDGGVRPHGHYLFHVSHFLILF
IHDWXUHV
1 I
I
I
I
i
I
i
'»
p
o
o
i/1
0
[
*
s
§
5
r
*X
if
a
s
\y- ,
J
3
3
9
t
l?ir i
1C
E
l
?
!i
Hli i i rtf Film
-OSi
r
i
w w
p=l
O' O'
IJ
* I
ft nn i if? f -
*
K
*r
s*
!
I
S
2
$
a
i
W V
hifl
r* !
!
I*gI|iS
I
§
i
i
*•
••
o
ZJ
*
”
i3
<s
©
4*
#
n
Pf
r
£
*
c
f
c
;
C.
T
V
)LJXUH6HOHFW'HYLFHDV\RXUDFWLYH6'.DQGFOLFN%XLOGDQG5XQWRLQVWDOODQGODXQFK
\RXUDSSRQ\RXUL3KRQH
Controlling the iPhone with JavaScript
7KHVWDJHLVQRZVHWIRUXVWRVWDUWHQKDQFLQJRXUDSSOLFDWLRQZLWKFDOOVWRWKHQDWLYH
GHYLFHIHDWXUHV3KRQH*DSPDNHVWKLVSRVVLEOHE\H[SRVLQJFHUWDLQIXQFWLRQDOLW\YLD
-DYD6FULSW7KLVPHDQVWKDWDOO\RXKDYHWRGRWRPDNHWKHSKRQHYLEUDWHLVDGGDELW
RI-DYD6FULSWWR\RXUFRGH)RUH[DPSOH
navigator.notification.vibrate();
3UHWW\VLPSOHULJKW"
Beep, Vibrate, and Alert
3KRQH*DSPDNHVEHHSYLEUDWHDQGDOHUWIXQFWLRQVVRVLPSOHWKDW,¦PJRLQJWROXPS
WKHPWRJHWKHULQWRRQHH[DPSOH6SHFLILFDOO\ZH¦OOVHWXSWKHDSSWREHHSYLEUDWHDQG
GLVSOD\DFXVWRPDOHUWZKHQWKHXVHUFUHDWHVDQHQWU\WKDWSXWVKHURYHUKHUGDLO\FDORULH
EXGJHW7RGRWKLVDGGWKHIROORZLQJIXQFWLRQWRWKHHQGRINLORMV
e
function checkBudget() {
var dailyBudget = localStorage.budget;
db.transaction(
©
©
'SELECT SUM(calories) AS currentTotal FROM entries WHERE date = ?;', o
[currentDate],e
o
var currentTotal = result.rows.item(0).currentTotal;G
if (currentTotal > dailyBudget) {O
var overage = currentTotal - dailyBudget; o
var message = 'You are '+overage
+ ' calories over your daily budget.
+ ' Better start jogging!';<D
try {©
navigator.notification.beep();
navigator.notification.vibrate();
} catch(e){
// No equivalent in web app
}
try {©
navigator.notification.alert(message,
'Over Budget', 'Dang!');
} catch(e) {
alert(message);
}
}
},
errorHandler0
);
}
);
}
+HUH¦VWKHEORZE\EORZGHVFULSWLRQ
O 2SHQWKH checkBudget()IXQFWLRQ,QLWLDOL]HWKH currentDateYDULDEOHWRWKHYDOXH
VWRUHGLQ sessionStorageLHWKHYDOXHHQWHUHGE\WKHXVHULQWKH6HWWLQJVSDQHO
DQGWKHdailyBudgetYDULDEOHWRWKHYDOXHVWRUHGLQlocalStorageLHWKHGDWHWDSSHG
RQWKH'DWHVSDQHO
G 6WDUWDGDWDEDVHWUDQVDFWLRQLQSUHSDUDWLRQIRUFDOFXODWLQJWKHWRWDOFDORULHVIRUWKH
FXUUHQWGDWH
O 5XQWKHexecuteSql()PHWKRGRIWKHWUDQVDFWLRQREMHFW
/HW¦VEUHDNGRZQWKHIRXUSDUDPHWHUVRIWKHexecuteSql()PHWKRG
O 7KHILUVWSDUDPHWHULVDSUHSDUHG64/VWDWHPHQWWKDWXVHVWKH680IXQFWLRQWRDGG
XSDOOWKHYDOXHVLQWKHFDORULHVFROXPQIRUWKHHQWULHVWKDWPDWFKWKHFXUUHQWGDWH
e 7KHVHFRQGSDUDPHWHULVDVLQJOHYDOXHDUUD\WKDWZLOOUHSODFHWKHTXHVWLRQPDUNLQ
WKHSUHSDUHGVWDWHPHQWRQWKHSUHYLRXVOLQH
o 7KHWKLUGSDUDPHWHULVDQDQRQ\PRXVIXQFWLRQWKDWZLOOEHFDOOHGLIWKH64/TXHU\
FRPSOHWHVVXFFHVVIXOO\ZH¦OOORRNDWWKLVLQGHWDLOPRPHQWDULO\
$QGKHUHLVZKDW¦VJRLQJRQLQWKHDQRQ\PRXVIXQFWLRQWKDWZDVSDVVHGLQDVWKHWKLUG
SDUDPHWHU
Controlling the iPhone with JavaScript | 137
© ,WVWDUWVRIIE\JUDEELQJWKHFXUUHQWWRWDOIURPWKHILUVWURZRIWKHUHVXOW6LQFHZH
DUHMXVWDVNLQJIRUWKHVXPRIDFROXPQWKHGDWDEDVHLVRQO\JRLQJWRUHWXUQRQHURZ
LHWKLVTXHU\ZLOODOZD\VUHWXUQRQHURZ5HPHPEHUWKDWWKHUHFRUGVRIWKHUHVXOW
VHWDUHDFFHVVHGZLWKWKH item()PHWKRGRIWKHURZVSURSHUW\RIWKHUHVXOWREMHFW
DQGWKDWWKHURZVDUHEDVHGPHDQLQJWKDWWKHILUVWURZLV
o &KHFNWRVHHLIWKHFXUUHQWFDORULHWRWDOIRUWKHGD\LVJUHDWHUWKDQWKHGDLO\EXGJHW
VSHFLILHGRQWKH6HWWLQJVSDQHO,IVRWKHEORFNWKDWIROORZVZLOOEHH[HFXWHG
o &DOFXODWHKRZIDUWKHXVHULVRYHUKHUFDORULHEXGJHW
© &RPSRVHDPHVVDJHWRGLVSOD\WRWKHXVHU
© 7KLVLVDtrycatchEORFNWKDWDWWHPSWVWRFDOOWKHbeep()DQGvibrate()PHWKRGVRI
WKHQDYLJDWRUQRWLILFDWLRQREMHFW7KHVHPHWKRGVRQO\H[LVWLQ3KRQH*DSVRLIWKH
XVHULVUXQQLQJWKHDSSLQDEURZVHUWKHPHWKRGVZLOOIDLODQGH[HFXWLRQZLOOMXPS
WRWKH catchEORFN6LQFHWKHUHLVQREURZVHUEDVHGHTXLYDOHQWWREHHSRUYLEUDWH
WKHcatchEORFNKDVEHHQOHIWHPSW\
7KH 3KRQH*DS beep() PHWKRG SOD\V D ZDY ILOH ZKHQ FDOOHG 7KH ILOH LV QDPHG
EHHSZDYDQGOLYHVLQWKHLSKRQHGLUHFWRU\)LJXUH7KHGHIDXOWILOHVRXQGVVRUW
RIOLNHDFULFNHWDQGLVSUREDEO\ILQHIRUPRVWVLWXDWLRQV,I\RX¦GSUHIHU\RXURZQ
EHHSVRXQGMXVWFUHDWHDZDYILOHQDPHGEHHSZDYDQGUHSODFHWKHGHIDXOWILOHLQWKH
LSKRQHGLUHFWRU\
© 7KLVLVDtrycatchEORFNWKDWDWWHPSWVWRFDOOWKHalert()PHWKRGRIWKHQDYLJDWRU
QRWLILFDWLRQREMHFW7KLVPHWKRGRQO\H[LVWVLQ3KRQH*DSVRLIWKHXVHULVUXQQLQJ
WKHDSSLQDEURZVHUWKHPHWKRGZLOOIDLODQGH[HFXWLRQZLOOMXPSWRWKHcatchEORFN
7KHEURZVHUEDVHGHTXLYDOHQWWRWKH3KRQH*DSDOHUWLVDVWDQGDUG-DYD6FULSWDOHUW
ZKLFKLVFDOOHGDVDIDOOEDFN
7KHUH DUH D FRXSOH RI GLIIHUHQFHV EHWZHHQ WKH 3KRQH*DS DOHUW DQG WKH QDWLYH
-DYD6FULSWDOHUW)RUH[DPSOHWKH3KRQH*DSDOHUWDOORZV\RXWRFRQWUROWKHWLWOHDQG
WKHEXWWRQQDPH)LJXUHWKH-DYD6FULSWDOHUWGRHVQRW)LJXUH
7KHUHLVDOVRDPRUHVXEWOHGLIIHUHQFHEHWZHHQWKHWZRDOHUWVWKHQDWLYH-DYD6FULSW
DOHUWLVPRGDODQGWKH3KRQH*DSDOHUWLVQRW,QRWKHUZRUGVVFULSWH[HFXWLRQZLOO
SDXVHDWWKHSRLQWDWZKLFK\RXFDOODQDWLYHDOHUWZKHUHDVH[HFXWLRQZLOOFRQWLQXH
ZLWKWKH3KRQH*DSYHUVLRQ7KLVPD\RUPD\QRWEHDELJGHDOGHSHQGLQJRQWKH
QDWXUHRI\RXUDSSOLFDWLRQVRNHHSWKLVGLVWLQFWLRQLQPLQG
© 7KHIRXUWKSDUDPHWHULVWKHQDPHRIWKHJHQHULF64/HUURUKDQGOHUWKDWZLOOEHFDOOHG
LQWKHHYHQWRID64/HUURU
:LWKRXUcheckBudget()IXQFWLRQFRPSOHWHZHFDQQRZFDOOLWE\DGGLQJDVLQJOHOLQH
WRWKHVXFFHVVFDOOEDFNRIRXUcreateEntry()IXQFWLRQ
db.transaction(
function(){
refreshEntries();
checkBudget();
jQT.goBack();
},
errorHandler
);
}
);
return false;
}
$IWHU\RX¦YHPDGHWKHVHFKDQJHVVDYHWKHNLORMVILOHFOHDQWKHSURMHFW%XLOGൺ&OHDQ
DQGFOLFN%XLOGDQG5XQ
«nn iphone CD
n
DEVICES beep.wav Preview:
0 Macintosh HD Q build
build-phonegap.sh
SHARED *
Classes
fc= JSC-Mini
I Default.png
PLACES e doxygen.cfg
R Desktop icon.png
'A Applications Info.plist
!ÿ Book m! main.m
CJjsc MainWindow.xib
PhoneCap_Prefix.pch
_ Projects
PhoneCap.plist
_ Webserver PhoneCap.xcodeproj Name beep.wav
_
a README.md Kind WAVE Audio File
SEARCH FOR
Size 8 KB on disk
Settings.plist
0 Today Created 9/14/09 2:46 PM
VERSION
0 Yesterday Modified 9/14/09 2:46 PM
Q WWW
0 Past Week Last opened Yesterday 11.50 PM
Duration 00:01
f 1 All images
Audio bit rate 64000
i 1All Movies
i - 1 All Documents C More info...
)LJXUH7KH3KRQH*DSEHHSPHWKRGSOD\VWKHEHHSZDYILOHIURPWKHLSKRQHGLUHFWRU\
HIT f 2 3* PM
In 10/12/2009
Thanksgiving 2200
IPÿSSSI Dang'
V
)LJXUH7KH3KRQH*DSDOHUWDOORZV\RXWRVSHFLI\WKHWLWOHDQGEXWWRQODEHO
is
AUT f 21* m
New Entry
)LJXUH$QDWLYH-DYD6FULSWDOHUWGRHVQRWDOORZ\RXWRVSHFLI\WKHWLWOHDQGEXWWRQODEHO
Geolocation
/HW¦VXSGDWH.LORWRVDYHWKHORFDWLRQZKHUHHQWULHVDUHFUHDWHG2QFHZHKDYHWKDW
LQIRUPDWLRQZH¦OODGGD£0DS/RFDWLRQ¤EXWWRQWKDWZLOORSHQWKHEXLOWLQ0DSVDS
SOLFDWLRQDQGGURSDSLQDWWKHSRLQWZKHUHWKHHQWU\ZDVFUHDWHG
7KHILUVWVWHSLVWRDGGODWLWXGHDQGORQJLWXGHFROXPQVWRWKHGDWDEDVHWRVWRUHWKH
LQIRUPDWLRQ7RGRVRUHSODFHWKHCREATE TABLEVWDWHPHQWLQNLORMVZLWKWKHIROORZLQJ
db.transaction(
' calories INTEGER NOT NULL, ' +
' longitude TEXT NOT NULL, latitude TEXT NOT NULL);'
);
}
);
1H[W ZH¦OO UHZULWH WKH createEntry() IXQFWLRQ WKDW ZH ILUVW VDZ LQ £,QVHUWLQJ
5RZV¤RQSDJHWRXVHWKHJHRORFDWLRQIHDWXUHRIWKHSKRQHWRGHWHUPLQHWKHFXUUHQW
ODWLWXGHDQGORQJLWXGH5HSODFHWKHH[LVWLQJcreateEntry()IXQFWLRQLQNLORMVZLWKWKLV
function createEntry() {o
try {0
navigator.geolocation.getCurrentPosition(o
function(position){o
var latitude = position.coords.latitude;0
var longitude = position.coords.longitude;
o
insertEntry(latitude, longitude);
},
function(){o
o
insertEntry();
}
);
} catch(e) {o
insertEntry();0
}
return false;0
}
o %HJLQWKHcreateEntry()IXQFWLRQ
0 2SHQDtryEORFNEHFDXVHWKHnavigator.geolocationFDOOZLOOIDLOLIWKLVFRGHLVUXQ
RXWVLGHRI3KRQH*DS
0 &DOOWKH getCurrentPosition()IXQFWLRQRIWKH geolocationREMHFWDQGSDVVLWWZR
FDOOEDFNIXQFWLRQVRQHIRUVXFFHVVDQGRQHIRUHUURUV
O 7KLVLVWKHEHJLQQLQJRIWKHVXFFHVVFDOOEDFN1RWLFHWKDWLWDFFHSWVDVLQJOHSDUDPHWHU
position
0 7KHVHWZROLQHVJUDEWKH latitudeDQG longitudeFRRUGLQDWHVRXWRIWKH position
REMHFW
0 3DVVWKH latitudeDQG longitudeFRRUGLQDWHVLQWRDIXQFWLRQFDOOHG insertEntry()
ZKLFKZH¦OOORRNDWPRPHQWDULO\
o 7KLVLVWKHEHJLQQLQJRIWKHHUURUFDOOEDFN
o %HFDXVH ZH¦UH LQ WKH HUURU FDOOEDFN WKLV ZLOO RQO\ EH FDOOHG LI JHRORFDWLRQ IDLOHG
SHUKDSV WKH XVHU GLG QRW DOORZ WKH DSSOLFDWLRQ WR DFFHVV KLV ORFDWLRQ ZKHQ
SURPSWHGVRFDOOWKHinsertEntry()IXQFWLRQZLWKRXWSDUDPHWHUV
o %HJLQWKHcatchEORFN
0 %HFDXVHZH¦UHLQWKH catchEORFNWKLVPHDQVWKDWWKH navigator.geolocationFDOO
IDLOHGVRFDOOWKHinsertEntry()IXQFWLRQZLWKRXWSDUDPHWHUV
0 5HWXUQfalseWRSUHYHQWWKHGHIDXOWQDYLJDWLRQEHKDYLRURIFOLFNLQJWKHIRUP¦VVXEPLW
EXWWRQ
:RQGHULQJ ZKHUH WKH SQL INSERT VWDWHPHQW JRW WR" /HW¦V WDNH D ORRN DW WKH
insertEntry()IXQFWLRQ7KLVQHZIXQFWLRQLVZKDWFUHDWHVWKHHQWU\LQWKHGDWDEDVH
$GGWKHIROORZLQJWRNLORMV
function insertEntry(latitude, longitude) {O
var date = sessionStorage.currentDate;0
var calories = $('#calories').val();O
var food = $('#food').val();O
db.transaction( e
function(transaction) { o
transaction.executeSql(©
'INSERT INTO entries (date, calories, food, latitude, longitude) ' +
'VALUES (?, ?, ?, ?, ?);', o
[date, calories, food, latitude, longitude], o
function(){0
refreshEntries();
checkBudget();
jQT.goBack();
},
errorHandler0
);
}
);
}
o 7KHEHJLQQLQJRIWKHinsertEntry()IXQFWLRQDOORZLQJIRUlatitudeDQGlongitude
YDOXHVWREHSDVVHGLQ$OWKRXJKWKHUHLVQRZD\WRH[SOLFLWO\PDUNDSDUDPHWHUDV
RSWLRQDOLQ-DYD6FULSWWKHVHYDOXHVZLOOVLPSO\EHXQGHILQHGLIWKH\DUHQRWSDVVHGLQ
© *HWWKHcurrentDateRXWRIsessionStorage5HPHPEHUWKDWWKHYDOXHZLOOEHVHWZKHQ
WKHXVHUWDSVDQLWHPRQWKH'DWHVSDQHOWRQDYLJDWHWRWKH'DWHSDQHO:KHQKHWDSV
WKHEXWWRQWRUHYHDOWKH1HZ(QWU\SDQHOWKLVYDOXHZLOOVWLOOEHVHWWRWKHFXUUHQWO\
VHOHFWHG'DWHSDQHOLWHP
G *HWWKHcaloriesYDOXHRXWRIWKHcreateEntryIRUP
© *HWWKHfoodYDOXHRXWRIWKHcreateEntryIRUP
© %HJLQDGDWDEDVHWUDQVDFWLRQ
© 3DVVDFDOOEDFNIXQFWLRQLQWRWKHWUDQVDFWLRQZLWKWKHWUDQVDFWLRQREMHFWDVLWVVROH
SDUDPHWHU
© &DOOWKHexecuteSql()PHWKRGRIWKHWUDQVDFWLRQREMHFW
o 'HILQHWKH64/SUHSDUHGVWDWHPHQWZLWKTXHVWLRQPDUNVDVGDWDSODFHKROGHUV
o 3DVV DQ DUUD\ RI YDOXHV IRU WKH SODFHKROGHUV ,I latitude DQG longitude ZHUH QRW
SDVVHGLQWRWKHinsertEntry()IXQFWLRQWKH\ZLOOEHXQGHILQHG
© 'HILQHWKHVXFFHVVFDOOEDFNIXQFWLRQ
© 'HILQHWKHHUURUFDOOEDFNIXQFWLRQ
,Q RUGHU WR FRQILUP WKDW .LOR LV DFWXDOO\ VDYLQJ WKHVH ORFDWLRQ YDOXHV ZH¦OO ZDQW WR
GLVSOD\WKHPVRPHZKHUHLQWKHLQWHUIDFH/HW¦VDGGDQ,QVSHFW(QWU\SDQHOWRGLVSOD\
WKHVWRUHGYDOXHV:H¦OOLQFOXGHD0DS/RFDWLRQEXWWRQRQWKHSDQHOWKDWZLOOGLVSOD\
ZKHUHWKHHQWU\ZDVFUHDWHG$GGWKHIROORZLQJWRLQGH[KWPOULJKWEHIRUHWKHFORVLQJ
ERG\WDJ</body>
<div id="inspectEntry">
<h1>Inspect Entry</h1>
</div>
<ul class="rounded">
<li><input type="text" placeholder="Food" name="food" value="" /></li>
<li><input type="tel" placeholder="Calories" name="calories"
value="" /></li> o
<li><input type="submit" value="Save Changes" /></li>
</ul>
<ul class="rounded">
<li><input type="text" name="latitude" value="" /></li>©
<li><input type="text" name="longitude" value="" /></li>
<li><p class="whiteButton" id="mapLocation">Map Location</p></li>©
</ul>
</form>
</div>
7KLV VKRXOG ORRN YHU\ VLPLODU WR WKH 1HZ (QWU\ SDQHO WKDW ZH ILUVW VDZ LQ ([DP
SOHVR,¦OOMXVWFDOORXWDFRXSOHRIWKLQJV
o 7KHLQSXWW\SHKDVEHHQVHWWRtelWRFDOOWKHWHOHSKRQHNH\ERDUGZKHQWKHFXUVRU
LVSODFHGLQWKHILHOG7KLVLVDELWRIDKDFNEXW,WKLQNLW¦VZRUWKLWEHFDXVHWKDW
NH\ERDUGLVPXFKPRUHDSSURSULDWHIRUWKLVILHOG
© 7KHlatitudeDQGlongitudeILHOGVDUHHGLWDEOHDQGFRQWDLQHGZLWKLQWKHIRUPZKLFK
PHDQVWKDWWKHXVHULVDEOHWRHGLWWKHP7KLVSUREDEO\ZRXOGQRWPDNHVHQVHLQWKH
ILQDODSSOLFDWLRQEXWLWPDNHVLWDORWHDVLHUWRWHVWGXULQJGHYHORSPHQWEHFDXVH\RX
FDQHQWHUORFDWLRQYDOXHVPDQXDOO\WRWHVWWKHPDSSLQJEXWWRQ
G 7KLV0DS/RFDWLRQEXWWRQZRQ¦WGRDQ\WKLQJZKHQFOLFNHGDWWKLVSRLQWZH¦OODGG
DFOLFNKDQGOHUWRLWPRPHQWDULO\
1RZZHQHHGWRJLYHWKHXVHUDZD\WRQDYLJDWHWRWKLV,QVSHFW(QWU\SDQHOVRZH¦OO
PRGLI\WKHEHKDYLRURIWKH'DWHSDQHOVXFKWKDWZKHQWKHXVHUWDSVDQHQWU\LQWKHOLVW
WKH,QVSHFW(QWU\SDQHOZLOOVOLGHXSIURPWKHERWWRPRIWKHVFUHHQ
7KHILUVWVWHSLVWRZLUHXSWKHFOLFNHYHQWKDQGOHUZKLFKZH¦OOFUHDWHQH[WDQGDOVR
WRPRGLI\WKHZD\FOLFNVRQWKH'HOHWHEXWWRQDUHSURFHVVHG$GGWKHWKUHHKLJKOLJKWHG
FKDQJHVEHORZWRWKHrefreshEntries()IXQFWLRQLQNLORMV
$('#date ul li:gt(0)').remove();
db.transaction(
'SELECT * FROM entries WHERE date = ? ORDER BY food;',
[currentDate],
var row = result.rows.item(i);
var newEntryRow = $('#entryTemplate').clone();
newEntryRow.data('entryId', row.id);
newEntryRow.appendTo('#date ul');
newEntryRow.find('.delete').click(function(e){ o
var clickedEntry = $(this).parent();
var clickedEntryId = clickedEntry.data('entryId');
deleteEntryById(clickedEntryId);
e.stopPropagation();0
});
newEntryRow.click(entryClickHandler);O
}
},
errorHandler
);
}
);
}
o 1RWHWKDWZHKDYHWRDGGWKHeSDUDPHWHUWKHHYHQWWRWKHIXQFWLRQFDOOLQRUGHUWR

KDYHDFFHVVWRWKHstopPropagation()PHWKRGRIWKHHYHQWXVHGVKRUWO\,IZHGLGQ¦W
DGGWKHeSDUDPHWHUe.stopPropagation()ZRXOGEHXQGHILQHG
0 7KHe.stopPropagation();DGGHGWRWKH'HOHWHEXWWRQFOLFNKDQGOHUWHOOVWKHEURZVHU
QRWWROHWWKHFOLFNHYHQWEXEEOHXSWKH'20'RFXPHQW2EMHFW0RGHOWRSDUHQW
HOHPHQWV7KLVLVLPSRUWDQWEHFDXVHZH¦YHQRZDGGHGDFOLFNKDQGOHUWRWKHURZ
LWVHOI DQG WKH HQWU\ URZ LV WKH SDUHQW RI WKH 'HOHWH EXWWRQ ,I ZH GLGQ¦W FDOO
stopPropagation() ERWK WKH 'HOHWH EXWWRQ KDQGOHU DQG WKH entryClickHandler
ZRXOGILUHZKHQWKHXVHUWDSSHGWKH'HOHWHEXWWRQ
© 7KH newEntryRow.click(entryClickHandler); WHOOV WKH EURZVHU WR FDOO WKH
entryClickHandlerIXQFWLRQZKHQWKHHQWU\LVWDSSHG
1RZOHW¦VDGGWKHentryClickHandler()IXQFWLRQWRNLORMV
function entryClickHandler(e){
sessionStorage.entryId = $(this).data('entryId');O
db.transaction(0
function(transaction) {O
transaction.executeSql(O
'SELECT * FROM entries WHERE id = ?;', 0
[sessionStorage.entryId],o
o
o
var row = result.rows.item(0);
o
var food = row.food;
var calories = row.calories;
var latitude = row.latitude;
var longitude = row.longitude;
$('#inspectEntry input[name="food"]').val(food);0
$('#inspectEntry input[name="calories"]').val(calories);
$('#inspectEntry input[name="latitude"]').val(latitude);
$('#inspectEntry input[name="longitude"]').val(longitude);
$('#mapLocation').click(function(){0
window.location = 'http://maps.google.com/maps?z=15&q='+
food+'@'+latitude+','+longitude;
});
jQT.goTo('#inspectEntry', 'slideup');0
},
errorHandler0
);
}
);
}
O *HWWKHentryIdIURPWKHHQWU\WKDWWKHXVHUWDSSHGDQGVWRUHLWLQVHVVLRQVWRUDJH
0 %HJLQDGDWDEDVHWUDQVDFWLRQ
0 3DVVDFDOOEDFNIXQFWLRQLQWRWKHWUDQVDFWLRQZLWKWKHWUDQVDFWLRQREMHFWDVLWVVROH
SDUDPHWHU
O &DOOWKHexecuteSql()PHWKRGRIWKHWUDQVDFWLRQREMHFW
0 'HILQHWKH64/SUHSDUHGVWDWHPHQWZLWKDTXHVWLRQPDUNDVGDWDSODFHKROGHU
0 3DVVDVLQJOHHOHPHQWDUUD\IRUWKHSODFHKROGHU
© %HJLQWKHVXFFHVVFDOOEDFNIXQFWLRQ
0 *HWWKHILUVWDQGRQO\VLQFHZH¦UHMXVWTXHU\LQJIRURQHHQWU\URZRIWKHUHVXOW
O 6HWVRPHYDULDEOHVEDVHGRQWKHYDOXHVIURPWKHURZ
0 6HWYDOXHVRIWKHIRUPILHOGVEDVHGRQWKHYDULDEOHV
0 $WWDFKDFOLFNKDQGOHUWRWKH #mapLocationEXWWRQ7KHIXQFWLRQVHWVWKHZLQGRZ
ORFDWLRQWRDVWDQGDUG*RRJOH0DSV85/,IWKH0DSVDSSOLFDWLRQLVDYDLODEOHLWZLOO
ODXQFK2WKHUZLVHWKH85/ZLOOORDGLQDEURZVHU7KHzYDOXHVHWVWKHLQLWLDO]RRP
OHYHOWKHVWULQJEHIRUHWKH@V\PEROZLOOEHXVHGDVWKHODEHOIRUWKHSLQWKDWLVGURSSHG
DWWKHORFDWLRQ1RWHWKDWWKHODWLWXGHDQGORQJLWXGHYDOXHVPXVWDSSHDULQWKHRUGHU
VKRZQKHUHVHSDUDWHGE\DFRPPD
© &DOOWKHgoTo()PHWKRGRIWKHM47RXFKREMHFWWRPDNHWKH,QVSHFW(QWU\SDQHOVOLGH
XSLQWRYLHZ
© 'HILQHWKHHUURUFDOOEDFNIXQFWLRQ
%HIRUH\RXWU\UXQQLQJWKHDSSEHVXUHWRGHOHWHLWIURPWKHSKRQHRUWKHVLPXODWRU
7KDW¦VEHFDXVHWKHGDWDEDVHZRQ¦WEHFUHDWHGLILWDOUHDG\H[LVWVDQGDQHDV\ZD\WR
UHPRYHWKHGDWDEDVHLVWRUHPRYHWKHDSS7RUHPRYHWKHDSSWDSDQGKROGRQLWVKRPH
VFUHHQLFRQXQWLOWKHLFRQVVWDUWZREEOLQJWKHQFOLFNWKH;WRUHPRYHLW3UHVVWKHKRPH
EXWWRQWRVWRSWKHZREEOLQJ7KHQFOHDQWKHSURMHFW%XLOGൺ&OHDQDQGFOLFN£%XLOG
DQG5XQ¤WRWU\LWRXW
Accelerometer
1H[WOHW¦VVHWXS.LORWRGXSOLFDWHWKHODVWHQWU\LQWKHOLVWE\VKDNLQJWKHSKRQH$GG
WKHIROORZLQJIXQFWLRQWRWKHHQGRINLORMV
function dupeEntryById(entryId) {
if (entryId == undefined) {o
alert('You have to have at least one entry in the list to shake a dupe.');
} else {
db.transaction(0
' INSERT INTO entries (date, food, calories, latitude, longitude)'
+ ' SELECT date, food, calories, latitude, longitude'©
+ ' FROM entries WHERE id = ?;',
[entryId],o
function() {0
refreshEntries();
},
errorHandlerO
);
}
);
}
}
o 7KLVOLQHPDNHVVXUHWKDWDQentryIdZDVSDVVHGWRWKHIXQFWLRQ,IQRWWKHXVHULV
QRWLILHG
0 %HJLQWKHXVXDOGDWDEDVHWUDQVDFWLRQVWHSV
0 'HILQHDQ,16(57VWDWHPHQWWKDWFRSLHVWKHYDOXHVIURPWKHVSHFLILHGentryId7KLV
LVDW\SHRITXHU\\RXKDYHQ¦WVHHQEHIRUH,QVWHDGRIXVLQJDOLVWRIYDOXHVIRUWKH
,16(57WKLVWDNHVWKHYDOXHVIURPD6(/(&7TXHU\IRUWKHVSHFLILHGentryId
o 3DVVWKHentryIdLQWRWKHSUHSDUHGVWDWHPHQWUHSODFLQJWKH?LQWKH6(/(&7TXHU\
ZLWKWKHYDOXHRIWKHentryId
© 2QVXFFHVVFDOOrefreshEntries()ZKLFKZLOOGLVSOD\WKHQHZO\FRSLHGHQWU\
O 2QHUURUFDOOWKHVWDQGDUG64/HUURUKDQGOHU
1RZZHQHHGWRWHOOWKHDSSOLFDWLRQZKHQWRVWDUWDQGVWRSZDWFKLQJWKHDFFHOHURPHWHU
:H¦OOVHWLWXSWRVWDUWZDWFKLQJZKHQWKH'DWHSDQHOILQLVKHVVOLGLQJLQWRYLHZDQGWR
VWRSZKHQLWVWDUWVVOLGLQJRXW7RGRWKLVZHMXVWQHHGWRDGGWKHIROORZLQJOLQHVWR
WKHGRFXPHQWUHDG\IXQFWLRQLQNLORMV
$('#date').bind('pageAnimationEnd', function(e, info){ o
if (info.direction == 'in') {0
startWatchingShake();
}
});
$('#date').bind('pageAnimationStart', function(e, info){©
if (info.direction == 'out') {O
stopWatchingShake();
}
});
o %LQGDQDQRQ\PRXVKDQGOHUWRWKHpageAnimationEndHYHQWRIWKH#dateSDQHO3DVV
WKHHYHQWDQGWKHDGGLWLRQDOLQIRLQDVSDUDPHWHUV
0 &KHFNWRVHHLIWKHdirectionSURSHUW\RIWKHLQIRREMHFWHTXDOVin,ILWGRHVFDOOWKH
startWatchingShake()IXQFWLRQZKLFKZH¦OOORRNDWVKRUWO\
© %LQGDQDQRQ\PRXVKDQGOHUWRWKHpageAnimationBeginHYHQWRIWKH#dateSDQHO3DVV
WKHHYHQWDQGWKHDGGLWLRQDOLQIRLQDVSDUDPHWHUV
o &KHFNWRVHHLIWKHdirectionSURSHUW\RIWKHLQIRREMHFWHTXDOVout,ILWGRHVFDOO
WKHstopWatchingShake()IXQFWLRQZKLFKZH¦OOORRNDWVKRUWO\
#4 1
7HFKQLFDOO\ZHFRXOGKDYHERXQGWRMXVWRQHRIWKHSDJHDQLPDWLRQ
HYHQWVOLNHVR
a- $('#date').bind('pageAnimationEnd', function(e, info){
if (info.direction == 'in') {
startWatchingShake();
} else {
stopWatchingShake();
}
});
7KHUHDVRQ,GLGQ¦WGRWKLVLVWKDW stopWatchingShake()ZRXOGQRWJHW
FDOOHGXQWLODIWHUWKHSDJHDQLPDWLRQZDVFRPSOHWH7KHUHIRUHWKHDF
FHOHURPHWHU ZRXOG EH DFWLYHO\ ZDWFKHG GXULQJ WKH SDJH WUDQVLWLRQ
ZKLFKFDQVRPHWLPHVUHVXOWLQFKRSS\DQLPDWLRQ
$OOWKDW¦VOHIWIRUXVWRGRLVZULWHWKHstartWatchingShake()DQGstopWatchingShake()
IXQFWLRQV$GGWKHIROORZLQJIXQFWLRQVWRWKHHQGRINLORMV
function startWatchingShake() { o
var success = function(coords){0
var max = 2;0
if (Math.abs(coords.x) > max
|| Math.abs(coords.y) > max
|| Math.abs(coords.z) > max) { o
e
var entryId = $('#date ul li:last').data('entryId');
dupeEntryById(entryId); o
}
};
var error = function(){};©
var options = {}; o
options.frequency = 100; o
sessionStorage.watchId = navigator.accelerometer.watchAcceleration(success,
error, options);0
}
function stopWatchingShake() {0
navigator.accelerometer.clearWatch(sessionStorage.watchId);0
}
O %HJLQ WKH startWatchingShake() IXQFWLRQ 7KLV IXQFWLRQ ZLOO EH FDOOHG ZKHQ WKH
#dateSDQHOILQLVKHVDQLPDWLQJLQWRYLHZ
0 %HJLQGHILQLQJWKHVXFFHVVKDQGOHU1RWHWKDWLWDFFHSWVDFRRUGLQDWHVREMHFWDVLWV
VROHSDUDPHWHU
0 'HILQHWKHWKUHVKROGIRUWKHVKDNH7KHKLJKHUWKHQXPEHUWKHKDUGHUWKHXVHUZLOO
KDYHWRVKDNH
O &KHFNWRVHHLIDQ\RIWKHFRRUGLQDWHVKDVH[FHHGHGWKHWKUHVKROG
0 *HWWKHentryIdRIWKHODVWHQWU\RQWKH#dateSDQHO
O &DOOWKHdupeEntryById()IXQFWLRQ
o 'HILQHDQHPSW\HUURUKDQGOHU
o 'HILQH DQ options REMHFW WR SDVV LQWR WKH watchAcceleration() PHWKRG RI WKH
accelerometerREMHFW
0 7KHfrequencySURSHUW\RIWKHoptionsREMHFWDOORZV\RXWRVSHFLI\LQPLOOLVHFRQGV
KRZRIWHQ\RXZDQW\RXUDSSWRFKHFNWKHDFFHOHURPHWHU
0 &DOOWKH watchAcceleration()PHWKRGRIWKH accelerometerREMHFWSDVVLQJLQWKH
VXFFHVVKDQGOHUWKHHUURUKDQGOHUDQGWKHoptionsREMHFWDVSDUDPHWHUV6WRUHWKH
UHVXOW LQ sessionStorage.watchId ZKLFK ZH¦OO QHHG IRU WKH stopWatchingShake()
IXQFWLRQ
0 %HJLQ WKH stopWatchingShake() IXQFWLRQ 7KLV IXQFWLRQ ZLOO EH FDOOHG ZKHQ WKH
#dateSDQHOVWDUWVDQLPDWLQJRXWRIYLHZ
0 &DOOWKH clearWatch()PHWKRGRIWKH accelerometerREMHFWSDVVLQJLWWKH watchId
IURPVHVVLRQVWRUDJH
$QGZLWKWKDWZHDUHUHDG\WRWHVW6DYHDOO\RXUILOHVFOHDQDOOWDUJHWVDQGEXLOGDQG
UXQ.LORRQ\RXUGHYLFH1DYLJDWHWRWKH'DWHSDQHODGGDQHQWU\LIQRQHH[LVWVDQG
VKDNHWKHSKRQH<RXVKRXOGVHHWKHSDJHUHORDGZLWKDQDGGLWLRQDOHQWU\8QIRUWX
QDWHO\\RX¦OOSUREDEO\DOVRVHHDQ8QGRFRQILUPDWLRQGLDORJ)LJXUH7RGLVDEOH
WKHXQGRPDQDJHUVRZHFDQZDWFKWKHDFFHOHURPHWHUZLWKRXWEHLQJLQWHUUXSWHGZH
QHHGWRDGGDVHWWLQJWR,QIRSOLVW)ROORZWKHVWHSVGHVFULEHGLQ£$GGLQJ6HWWLQJVWR
,QIRSOLVW¤RQSDJHWRDGGDVHWWLQJIRUUIApplicationSupportsShakeToEditDQGVHW
LWWRfalse)LJXUH
10/2S/2009
Bagel 400
Bagel 400
)LJXUH:HQHHGWRGHDFWLYDWHWKHXQGRPDQDJHUWRZDWFKWKHDFFHOHURPHWHULQSHDFH
Key Value
Executable file S(EXECUTABLE_NAME>
Icon file icon.png
Bundle name SjPRODUCT_NAME)
Bundle creator OS Type code ????
UlStatusBarHidden
UlPrerenderedlcon 0
UlApplicationSupportsShakeToEdit J
)LJXUH$GGWKH8,$SSOLFDWLRQ6XSSRUWV6KDNH7R(GLWVHWWLQJWR,QIRSOLVWDQGOHDYHLWXQFKHFNHG
WRGLVDEOH£VKDNHWRXQGR¤LQ\RXUDSS
,QWKLVFKDSWHU\RX¦YHOHDUQHGKRZWRORDG\RXUZHEDSSLQWR3KRQH*DSKRZWRLQVWDOO
\RXUDSSRQ\RXUL3KRQHDQGKRZWRDFFHVVILYHGHYLFHIHDWXUHVWKDWDUHXQDYDLODEOH
WREURZVHUEDVHGZHEDSSVEHHSDOHUWYLEUDWHJHRORFDWLRQDQGDFFHOHURPHWHU
,QWKHQH[WFKDSWHU\RX¦OOOHDUQKRZWRSDFNDJH\RXUDSSDVDQH[HFXWDEOHDQGVXEPLW
LWWRWKHL7XQHV$SS6WRUH
CHAPTER 8
Submitting Your App to iTunes
)LQDOO\WKHPRPHQW\RX¦YHEHHQZDLWLQJIRUVXEPLWWLQJ\RXUFRPSOHWHGDSSWRL7XQHV
7KHUHDUHVHYHUDOVWHSVWRWKHSURFHVVDQG\RX¦OOZDQWWRKDYHDOO\RXUGXFNVLQDURZ
EHIRUH\RXJHWVWDUWHG$WDPLQLPXP\RX¦OOQHHGWKHIROORZLQJWRFRPSOHWHWKH$SS
6WRUHVXEPLVVLRQSURFHVV
$SODLQWH[WGHVFULSWLRQIRUWKHDSSOLFDWLRQFKDUDFWHUVPD[
$85/ZKHUHSHRSOHFDQOHDUQPRUHDERXW\RXUDSS
$VXSSRUW85/DQGHPDLODGGUHVVVRSHRSOHFDQFRQWDFW\RXZLWKLVVXHVSHUWDLQLQJ
WR\RXUDSS
,I\RXUDSSUHTXLUHVDORJLQIXOODFFHVVFUHGHQWLDOVIRUDGHPRDFFRXQWVRUHYLHZHUV
FDQWHVW\RXUDSS
$ÜSL[HOLFRQ
$ÜSL[HOVFUHHQVKRWRI\RXUDSS
$GLVWULEXWLRQSURYLVLRQLQJSURILOHIRUWKHDSS
$]LSSHGYHUVLRQRIWKHDSSOLFDWLRQELQDU\
(YHU\WKLQJ\RXQHHGIRUVXEPLVVLRQLVIDLUO\VWUDLJKWIRUZDUGH[FHSWIRUWKHODVWWZR
LWHPVWKHGLVWULEXWLRQSURILOHIRUWKHDSSDQGWKHDSSOLFDWLRQELQDU\:H¦OOFRYHUWKRVH
LQGHWDLOLQWKHIROORZLQJVHFWLRQV
:KHUHYHU,UHIHUWR.LORLQWKLVFKDSWHUSOHDVHVXEVWLWXWHWKHQDPH\RX
DUHJRLQJWRXVHIRU\RXUDSS
m
UP,
Creating an iPhone Distribution Provisioning Profile

,Q&KDSWHU\RXFUHDWHGDGHYHORSPHQWSURYLVLRQLQJSURILOHWKDWDOORZHG\RXWRWHVW
\RXU DSS RQ DQ DFWXDO L3KRQH 1RZ \RX QHHG WR FUHDWH D GLVWULEXWLRQ SURYLVLRQLQJ
SURILOHLQRUGHUWRVXEPLWWKHDSSWRL7XQHV
151
1DYLJDWHWRWKHL3KRQHGHYHORSHUVLWHKWWSGHYHORSHUDSSOHFRPLSKRQHDQGORJ
LQ
&OLFNL3KRQH'HYHORSHU3URJUDP3RUWDOLQWKHULJKWVLGHEDU
&OLFNRQ3URYLVLRQLQJLQWKHOHIWVLGHEDU
&OLFNRQWKH'LVWULEXWLRQWDE
&OLFNWKH1HZ3URILOHEXWWRQ
&KRRVH$SS6WRUHDV\RXUGLVWULEXWLRQPHWKRG
(QWHUDSURILOHQDPHHJ.LOR'LVWULEXWLRQ3URYLVLRQLQJ3URILOH
,I\RXKDYHQRWFUHDWHGDGLVWULEXWLRQFHUWLILFDWH\RXVKRXOGGRVREHIRUHSURFHHG
LQJ,I\RXVHHDOLQNRQWKLVSDJHODEHOHG£3OHDVHFUHDWHD'LVWULEXWLRQ&HUWLILFDWH¤
FOLFNLWDQGFDUHIXOO\IROORZWKHLQVWUXFWLRQV<RX¦OOEHPDNLQJDFRXSOHRIWULSVLQWR
WKH.H\FKDLQ$FFHVVDSSOLFDWLRQORFDWHGLQ$SSOLFDWLRQV8WLOLWLHVWRFUHDWHFHUWLI
LFDWHVLJQLQJUHTXHVWVDQGWRLQVWDOOVLJQHGFHUWLILFDWHVWKDW\RXGRZQORDGIURPWKH
SRUWDOLQWR\RXURZQNH\FKDLQ
6HOHFWWKHDSSURSULDWH$SS,')LJXUH
&OLFNWKH6XEPLWEXWWRQ\RX¦OOEHUHWXUQHGWRWKH'LVWULEXWLRQ3URYLVLRQLQJ3URILOH
OLVWYLHZ
5HIUHVKWKHSDJHXQWLOWKH'RZQORDGEXWWRQDSSHDUV)LJXUH
&OLFNWKH'RZQORDGEXWWRQWRVDYHWKHSURILOHWR\RXUORFDOGRZQORDGGLUHFWRU\
XVXDOO\WKH'RZQORDGVIROGHULQ\RXU+RPHIROGHU
'UDJWKHGRZQORDGHGSURILOHRQWRWKH;FRGHLFRQLQWKHGRFN
«o o
« i* | a *»np ifdMieoi' <DP« Clft’ '•'toi J,
ED B ••— HU CM ••ÿ TWto ITI tow I»UM mÿur • >i
n
• Developer Connection OnCMn x AOCafilti 4
iPhone Developer Program
eroortaa Portal Jonathan Saark ContuMMg
1| l—n i.
Create iPhone Distribution Provisioning Profile

On*r, anrfto to» 14 Mm tom. in to Hn To moan
IVunMW unto 9 tolum 0 M to

PmfiU Mato WO
Onwavllaa (inru* intoKan v»"k CMwKme Hinnof «•10,0! ,1010 IMI MO
to® tl
)LJXUH&UHDWHDGLVWULEXWLRQSURYLVLRQLQJSURILOHLQWKHL3KRQHGHYHORSHUSRUWDO
152 | Chapter 8:ಗSubmitting Your App to iTunes
« r> n Apple Developer Connection - iPhone Dev Center - Provisioning Profiles
| 4 11+ http://developer.apple.com/iphone/manage/provisioningprofiles/viewDistributionPro C | fO." Coogli
CD :::: Home Mail Cal RTM Twitter Facebook iT3 JSC Router Localhost Blogs (2)» Bookmarklets v Forumsv
% Developer Connection Dev Centers 1*1 ADC on iTunes Support Q, Search ADC
iPhone Developer Program Welcome, Jonathan Stark Edit Profile Log out
Program Portal: Jonathan Stark Consulting Exit Program Portal
Home
Team Development Distribution History How To
Certificates
Distribution Provisioning Profiles New Profile
Devices
App IDs Provisioning Profile App ID Status Actions
Provisioning — -5> Kilo Distribution Provisioning... (Details) Pending
Distribution
— Tweeps Distribution Provision!... (Details) Active until
01 Oct
Download ; Edit
2010
Remove Selected
Shop the Apple Online Store (1-800-MY-APPLE), visit an Apple Retail Store, or find a reseller Mailing Lists RSS Feeds A
)LJXUH5HIUHVKWKHGLVWULEXWLRQSURILOHOLVWXQWLOWKH'RZQORDGEXWWRQDSSHDUV
Installing the iPhone Distribution Provisioning Profile

1RZWKDWWKHSURILOHLVLQ;FRGH\RXQHHGWRFRQILJXUHWKHSURMHFWWRXVHLW
2SHQ.LORLQ;FRGHLILW¦VQRWDOUHDG\RSHQ
6HOHFW(GLW3URMHFW6HWWLQJVIURPWKH3URMHFWPHQXWKHSURMHFWVHWWLQJVZLQGRZZLOO
DSSHDU
&OLFNWKH%XLOGWDELILW¦VQRWDOUHDG\DFWLYH
6HOHFW'LVWULEXWLRQIURPWKH&RQILJXUDWLRQSRSXS
6HOHFW£6HWWLQJV'HILQHGDW7KLV/HYHO¤IURPWKH6KRZSRSXS
/RFDWH&RGH6LJQLQJൺ&RGH6LJQLQJ,GHQWLW\ൺ$Q\L3KRQH26'HYLFHLQWKHPDLQ
DUHDRIWKHZLQGRZ
&OLFNWKHSRSXSOLVWWRWKHULJKWRI$Q\L3KRQH26'HYLFHWRGLVSOD\DOLVWRISURILOH
RSWLRQV)LJXUH
/RFDWH\RXUGLVWULEXWLRQSURYLVLRQLQJSURILOHLQWKHOLVWDQGVHOHFWWKHGLVWULEXWLRQ
LGHQWLW\GLUHFWO\EHQHDWKLW)LJXUH
&ORVHWKH3URMHFW,QIRZLQGRZ
Installing the iPhone Distribution Provisioning Profile | 153
(K Xcode File Edit View Project Build Run Design SCM Window £ Help
Project ’Kilo’ Info
0«ner»i build Configur»t>on» Comments J

Configuration Distribution i) Q- Vjrch m B.- Id Srningc
Show Srttmgc Ofinra ai Ttu Il

Vnirsg
__
Don't Code iron
Additional SDKc
Architectures Automatic Profile Selector (Recommended)
Base SDK IPhone Developer
Build Active Architecture Only iPhone Distribution
MldWfl
signing Identity Kilo Distribution bruvicionmg Profile (for Application Identifiris
* Code
Any IPhone Device IPhone Distribution; Jonathan Stark Consulting
*i
OS
Code Signing Resource Rules Path
linking RlloJ on US iPhone JOS (foe Application Identifiers '**)
Other Linker iPhone Developer Jonathan Stark
Maos
Prebinding
Twerps Distribution Provisioning Profile (for Application Identifiers v)
Versioning
iPhone Distribution. Jonathan Stark Consulting
Current Protect Version
4J - Language Tweeps on JSC iPhone 1C (for Application Identifiers '*1
C language Dialect iPhone Developer Jonathan Stark
U.LU Warnings
Mismatched Return Type Tweeps on JSC iPhone 2C ffor Application identifiers •*”)
Unused Variables Developer Jonathan Stark
Tweeps on JSC Touch 1C (for Application Identifiers ***J

Developer Jonathan Stark
The name rcommon nanteT of a valid code-sn Kllol on JSC Touch tC (for Application Identifiers '•’)
eert'ea'-e will cause a bu.td error. (CODE SIG
iPhone Developer Jonathan Stark
Kilol on JSC iPhone 2C (for Application Identifiers ’*‘1

Developer Jonathan Stark
Kilol on JSC IPJtone 1C (for Application Identifiers -**)

O * iPhone Developer Jonathan Stark
Other...
)LJXUH&OLFNWKHSRSXSOLVWQH[WWR$Q\L3KRQH26'HYLFH
Don’t Code Sign
Automatic Profile Selector (Recommended)

iPhone Developer
iPhone Distribution
Kilo Distribution Provisioning Profile (for Application Identifiers '*')

iPhone Distribution: Jonathan Stark Consulting
Kilo3 on ELS iPhone 3CS (for Application Identifiers '*')

iPhone Developer. Jonathan Stark
Tweeps Distribution Provisioning Profile (for Application Identifiers '*')

iPhone Distribution: Jonathan Stark Consulting
Tweeps on JSC iPhone 3G (for Application Identifiers ’*’)

iPhone Developer Jonathan Stark
Tweeps on JSC iPhone 2G (for Application Identifiers ***)

iPhone Developer: Jonathan Stark
Tweeps on JSC Touch 1C (for Application Identifiers *•*)

Kilo3 on JSC Touch 1C (for Application Identifiers ’•’)

Kilo3 on JSC iPhone 2G (for Application Identifiers ’*’)

Kilo3 on JSC iPhone 3G (for Application Identifiers ’*')

Other...
)LJXUH7KHGLVWULEXWLRQLGHQWLW\LVORFDWHGGLUHFWO\EHQHDWKWKHGLVWULEXWLRQSURILOH
Renaming the Project
%HIRUH\RXVXEPLW\RXUDSS\RXQHHGWRUHQDPHLWIURP3KRQH*DSWR.LOR7RGRVR
2SHQWKHSURMHFWLQ;FRGH
6HOHFW5HQDPHIURPWKH3URMHFWPHQX)LJXUH
7\SH.LORLQWKH£5HQDPHSURMHFWWR¤ILHOG)LJXUH
<RXFDQOHDYH£7DNH6QDSVKRWEHIRUHUHQDPLQJ¤FKHFNHGLI\RXZDQWWRVDYHWKH
VWDWHRIWKHSURMHFWSULRUWRPDNLQJWKHFKDQJHEXWLWZLOOVLJQLILFDQWO\LQFUHDVHWKH
DPRXQWRIWLPHLWWDNHVWRSURFHVVWKHUHTXHVW
&OLFNWKH5HQDPHEXWWRQ
•* Xcode File Edit View Project Build Run Design SCM Window $ Help
«nn Project 3€0 CD
Class Browser
| Simulator - 3.0 | Debug Rename...
Q" string Matching
Overview Search
Groups & Files New Group TSN A | -S Code © A O
PhoneGap Ungroup TOSC
WWW New Smart Group
(Jÿj Config
[**] Default.png Add to Project... TSA
[*J icon.png Add Current File to Project m
e README.md
CZ) Classes New Target...
£] Other Sources Upgrade All Targets in Project to Native *
£] Resources New Build Phase er A
CJ Frameworks New Custom Executable...

Qj Products B la
(ig) Targets Set Active Target
sj Executables Set Active Architecture
Find Results
Set Active SDK
Lj*] Bookmarks
Set Active Build Configuration
SCM
Set Active Executable
0 Project Symbols
fifcj Implementation Files Edit Project Settings
NIB Files
Edit Active Target "PhoneGap" X3€E
Edit Active Executable "PhoneGap" XISX
)LJXUH6HOHFW5HQDPHIURPWKH3URMHFWPHQX
<RXZLOOVHHDVHULHVRIJUHHQFLUFOHVZLWKZKLWHFKHFNPDUNVLQWKHPWKDWLQGLFDWHWKDW
WKHFKDQJHVKDYHWDNHQHIIHFW)LJXUH
Renaming the Project | 155
Rename project to: I Kilo)
Current Change
M PhoneGap.xcodeproj Kilo.xcodeproj
0 © PhoneGap © Kilo
0 PhoneGap Kilo
0 [H] PhoneGap_Prefix.pch [H~1 Kilo_Prefix.pch
Q Take Snapshot before renaming Cancel Rename
)LJXUH7\SH.LORLQWKH£5HQDPHSURMHFWWR¤ILHOG
Rename project to: Kilo
Current Change
O B PhoneGap.xcodeproj Kilo.xcodeproj
O © PhoneGap © Kilo
O PhoneGap Kilo
o [HJ PhoneGap_Prefix.pch [H~| Kilo_Prefix.pch
Take Snapshot before renaming t— OK
)LJXUH 7KH JUHHQ FLUFOHV ZLWK ZKLWH FKHFNPDUNV LQ WKHP LQGLFDWH WKDW WKH UHQDPLQJ SURFHVV
VXFFHHGHG
Prepare the Application Binary

1H[WZHQHHGWREXLOGWKHDSSOLFDWLRQH[HFXWDEOHDQGSUHSDUHLWWREHXSORDGHG
6HOHFWL3KRQH'HYLFHRUWKHFXUUHQWYHUVLRQRIWKHL3KRQH26IURPWKH
$FWLYH6'.SRSXSWKHQVHOHFWLWDJDLQDQGSLFN'LVWULEXWLRQ7KLVVKRXOGVHWWKH
WDUJHWWRVRPHWKLQJOLNH£'HYLFH_'LVWULEXWLRQ¤
6HOHFW&OHDQ$OO7DUJHWVIURPWKH%XLOGPHQX
6HOHFW%XLOGIURPWKH%XLOGPHQX<RXPD\EHSURPSWHGWRDOORZWKHDSSOLFDWLRQ
FRGHVLJQWRDFFHVV\RXUNH\FKDLQ$OORZLWWRGRWKLVVRLWFDQVLJQWKHDSS
0DNHVXUHWKDW\RXGLGQ¦WJHWDQ\HUURUV
5HYHDOWKHDSSLQWKH)LQGHU)LJXUH
&RPSUHVVWKHDSSLQWRD=,3DUFKLYH)LJXUH
Croups & Files File Name

S Kil° 5 Kilo.app
WWW
H Default.png
[»*] icon.png
“ index.html
Cjjqtouch
e kilo.js
kilo.manifest
jÿ themes
C I Config Info.plist i
[T] Settings.plist Key
[z] PhoneCap.plist
Information Property List
5 Info.plist
Localization native devt
VERSION
[“J Default.png Bundle display name
[*j icon.png Executable file
README.md Icon file
C~l Classes Bundle identifier
tJ Other Sources InfoDictionary version
C l Resources Bundle name
ITn Frameworks Bundle OS Type code
C Products Bundle creator OS Type
% Kilo.app
Add
@ Targets S
Kilo
Open With Finder
amt
Executables
Reveal in Finder
Find Results
Ljjl Bookmarks
Open in Separate Editor
SCM Add to Bookmarks
ing,
Project Symbols
Get Info
Q| Implementation Files
NIB Files
Rename
Touch
Untouch
Delete
V
Build succeeded
Group
Preferences
)LJXUH5HYHDOWKHDSSOLFDWLRQLQWKH)LQGHU
Submit Your App

1RZWKDW\RXKDYHHYHU\WKLQJ\RXQHHG
/RJLQWRL7XQHV&RQQHFWKWWSVLWXQHVFRQQHFWDSSOHFRP
Submit Your App | 157
&OLFNRQ0DQDJH<RXU$SSOLFDWLRQV
&OLFNRQWKH$GG1HZ$SSOLFDWLRQEXWWRQ
)ROORZWKHRQVFUHHQLQVWUXFWLRQVWRSURFHHGZLWKWKHVXEPLVVLRQSURFHVV
+XUU\XSDQGZDLW
,IDOOJRHVZHOO\RXVKRXOGVHH\RXUDSSOLVWHGDV,Q5HYLHZ)LJXUH
«nn Distribution-iphoneos
2 items, 87.16 CB available
Kilo.app Open Today, 2:42 P
Kilo.app.dSYM Today, 2:42 P
Show Package Contents
Move to Trash
Get Info
Compress “Kilo.app"
Burn “Kilo.app" to Disc...
Duplicate
Make Alias
Quick Look "Kilo.app”
Copy “Kilo.app"
Show View Options
Label:
[xjaauaaaa
•4
Open Repository URL
)LJXUH7KHDSSOLFDWLRQPXVWEHFRPSUHVVHGDVD=,3DUFKLYHWREHXSORDGHG
Add New Application Manage Your Applications
Kilo
Version: 1.0.1
Apple ID: •»
App Details
Date Submitted: 22 October 2009
Status: n In Review
)LJXUH7KHXSORDGHGDSSZLOODSSHDULQ\RXUOLVWZLWKDVWDWXVRI,Q5HYLHZ
While You Wait
&RQJUDWXODWLRQV<RX¦YHRIILFLDOO\VXEPLWWHG\RXUILUVWDSSWRWKHL7XQHV$SS6WRUH
1RZZKDW"<RX¦OOSUREDEO\KDYHWRZDLWDZHHNRUWZRWRKHDUEDFNIURP$SSOH+HUH
DUHVRPHWKLQJV\RXFDQGRLQWKHPHDQWLPHWRNHHS\RXUVHOIEXV\
6HWXSDQLFHORRNLQJZHESDJHIRU\RXUDSSWKDWLVORFDWHGDWWKH85/WKDW\RX
VXEPLWWHGWR$SSOH%HVXUHWRLQFOXGHWKHIROORZLQJHOHPHQWV
¢ $ YLGHR RI \RXU DSS LQ DFWLRQ /RUHQ %ULFKWHU KWWSWZLWWHUFRPDWHELWV KDV
SRVWHG D JUHDW WXWRULDO RQ PDNLQJ EHDXWLIXO L3KRQH VFUHHQFDVWV DW KWWSEORJ
DWHELWVFRPQRW\RXUDYHUDJHLSKRQHVFUHHQFDVW
¢ $EULHIGHVFULSWLRQRI\RXUDSS-XVWDSDUDJUDSKRUWZRDQG¡EXOOHWSRLQWV
¢ $QL7XQHVOLQNWRSXUFKDVH\RXUDSS
¢ $IHZWHVWLPRQLDOVZLWKDOLQNWRPRUHLI\RXKDYHWKHP
¢ $VXSSRUWHPDLODGGUHVV<RXFRXOGRSWWRVHWXSDVXSSRUWIRUXPLQVWHDGEXW
\RX¦OOOHDUQPRUHDERXW\RXUFXVWRPHUVYLDHPDLO
6HQGSHUVRQDOHPDLOPHVVDJHVWREORJJHUVZKR\RXWKLQNZRXOGEHLQWHUHVWHGLQ
\RXUDSS7DUJHWEORJVWKDWDUHUHOHYDQWWRWKHPDUNHWIRU\RXUDSSDQGEORJVWKDW
DUHDERXWWKHL3KRQHLQJHQHUDO
&OHDQRXW\RXULQER[<RX¦OOSUREDEO\JHWDERXW¡HPDLOPHVVDJHVSHUVDOHV
VRLI\RXUDSSLVSRSXODU\RX¦UHJRLQJWREHJHWWLQJDORWRIHPDLO6WDUWZLWKDFOHDQ
VODWH
6WDUWZRUNLQJRQ\RXUILUVWXSJUDGH7KHPRUHSRSXODUDSSVVHHPWRXSJUDGHDERXW
WZLFHDPRQWKZKLFKFDXVHVDVWHDG\EX]]DQGORWVRIFXVWRPHUJRRGZLOO
Further Reading
,I\RXILQG\RXUVHOILQDMDPKHUHDUHVRPHKHOSIXOUHVRXUFHV
M47RXFK,VVXH7UDFNHUKWWSFRGHJRRJOHFRPSMTWRXFKLVVXHVOLVW
M47RXFKRQ7ZLWWHUKWWSWZLWWHUFRPMTWRXFK
M47RXFK:LNLKWWSFRGHJRRJOHFRPSMTWRXFKZOLVW
3KRQH*DS*RRJOH*URXSKWWSJURXSVJRRJOHFRPJURXSSKRQHJDS
3KRQH*DSRQ7ZLWWHUKWWSWZLWWHUFRPSKRQHJDS
3KRQH*DS:LNLKWWSSKRQHJDSSEZRUNVFRP
M4XHU\'RFXPHQWDWLRQKWWSGRFVMTXHU\FRP
:& 6SHF IRU 2IIOLQH $SSOLFDWLRQV KWWSGHYZRUJKWPOVSHF2YHUYLHZKWPO
RIIOLQH
Further Reading | 159
Index
Symbols DXWRFRUUHFWDWWULEXWH
ZHENLWERUGHULPDJHSURSHUW\
ZHENLWERUGHUUDGLXVSURSHUW\ B
ZHENLWJUDGLHQW EDFNEXWWRQH[DPSOH¡
LQSDWKQDPH EDFNEXWWRQVKUHI
KWDFFHVVILOH EDFN6HOHFWRUSURSHUW\
EDUVFKDQJLQJWKHVWDWXVEDU
A EHHSPHWKRG
DFFHOHURPHWHUQDWLYHDSSV¡ EHHSVQDWLYHDSSV¡
DGG*ORVV7R,FRQSURSHUW\ ELQDULHVDSSOLFDWLRQELQDULHV
$MD[L3KRQHVW\OLQJ EORFNWDJV
DOHUWIXQFWLRQVQDWLYHDSSV¡ ERUGHULPDJHSURSHUW\
DOHUWPHWKRG ERUGHUV
DQLPDWLRQ¡ ZHENLWERUGHULPDJHSURSHUW\
$SDFKHZHEVHUYHUPDQLIHVWILOHV ZHENLWERUGHUUDGLXVSURSHUW\
$3,V-DYD6FULSWGDWDEDVH$3, EXWWRQV
DSSOHPRELOHZHEDSSFDSDEOHPHWDWDJ EDFNEXWWRQH[DPSOH¡
DSSOHPRELOHZHEDSSVWDWXVEDUVW\OHPHWD FDQFHOEXWWRQV
WDJ VXEPLWLQSXWEXWWRQ
DSSOHWRXFKLFRQPHWDWDJ
DSSOHWRXFKLFRQSUHFRPSRVHGPHWDWDJ C
DSSOHWRXFKVWDUWXSLPDJHPHWDWDJ FDFKHVHHRIIOLQHDSSOLFDWLRQFDFKH
DSSOLFDWLRQFDFKHGDWDEDVHGHEXJJLQJRIIOLQH FDFKHPDQLIHVWGDWDEDVH
ZHEDSSV¡ FDFKHPDQLIHVWILOH
$SSOLFDWLRQ&DFKHGEGDWDEDVH FDFKH*HW5HTXHVWVSURSHUW\
DSSV &DFKH*URXSVGDWDPRGHO
VXEPLWWLQJWRL7XQHV[L¡ &DFKH5HVRXUFHVWDEOH&DFKHVWDEOH
ZHEDSSVYHUVXVQDWLYHDSSV &DFKHVWDEOH
$SSV6WRUHVHHL7XQHV$SS6WRUH &DFKH:KLWHOLVW85/VWDEOH
DWWULEXWHV FDORULHWUDFNLQJH[DPSOH¡
LGYHUVXVFODVVDWWULEXWHV FDQFHOEXWWRQV
WH[WLQSXWV &DVFDGLQJ6W\OH6KHHWVVHH&66
DXWRFDSLWDOL]HDWWULEXWH FODVVDWWULEXWHV
DXWRFRPSOHWHDWWULEXWH VXEPLWLQSXWEXWWRQ
:H¦GOLNHWRKHDU\RXUVXJJHVWLRQVIRULPSURYLQJRXULQGH[HV6HQGHPDLOWRLQGH[#RUHLOO\FRP
161
YHUVXVLGDWWULEXWHV LSKRQHGLUHFWRU\
FODVVHVDVVLJQLQJ&66FODVVHVWR+70/ GLVVROYH6HOHFWRUSURSHUW\
HOHPHQWV '20'RFXPHQW2EMHFW0RGHOXVLQJ
FOLFNKDQGOHUV -DYD6FULSWWRLQWHUDFWZLWK+70/
FOLHQWVLGHGDWDVWRUDJH¡ SDJHV
GDWDEDVHV¡ '5<SULQFLSOH
ORFDO6WRUDJH¡ G\QDPLFPDQLIHVWILOHV¡
VHVVLRQ6WRUDJH¡
FRPDSSOH:HE$SS&DFKHGLUHFWRU\ E
FRQVROHV-DYD6FULSWFRQVROH¡ HGLWRUV
&21675$,17B(55HUURUFRGH VHOHFWLQJWH[WHGLWRUV
FRQYHQWLRQV8, ;FRGHHGLWRU
&66&DVFDGLQJ6W\OH6KHHWV HUURUKDQGOLQJLQVHUWLQJURZVLQFOLHQWVLGH
DERXW¡ GDWDEDVHV
DVVLJQLQJ&66FODVVHVWR+70/HOHPHQWV H[HFXWH6TOPHWKRG

L3KRQH&66
YHUVXVL3KRQHVW\OHVKHHWV F
&666SULWHWHFKQLTXH IDGH6HOHFWRUSURSHUW\
FXEH6HOHFWRUSURSHUW\ )DOOEDFN85/VWDEOH
IL[HG9LHZSRUWSURSHUW\
IOLS6HOHFWRUSURSHUW\
D IRQWV
GDWDEDVHVL]HOLPLWV IRUHLJQNH\VGHILQHG
GDWDEDVHV IXOOVFUHHQPRGHL3KRQHVW\OLQJ
VHHDOVRFOLHQWVLGHGDWDVWRUDJH IXOO6FUHHQSURSHUW\
DGGLQJODWLWXGHDQGORQJLWXGHFROXPQV IXOO6FUHHQ&ODVVSURSHUW\
IXQFWLRQVSDVVLQJIXQFWLRQVDVSDUDPHWHUV
HUURUFRGHV
L3KRQH6LPXODWRUDSSFDFKHGDWDEDVH
6DIDULGHVNWRSEURZVHU
G
VL]HOLPLWV JHRORFDWLRQ
64/VXSSRUW QDWLYHDSSV¡
'$7$%$6(B(55HUURUFRGH XVLQJLQDIXQFWLRQ
'DWHVSDQHO JUDGLHQWVZHENLWJUDGLHQW
DERXW¡ JUDSKLFVVHHLPDJHV
VDYLQJGDWHVWRVHVVLRQ6WRUDJH
GHEXJJLQJ H
RIIOLQHDSSOLFDWLRQFDFKH¡ KDQGOHUV
ZHEDSSVXVLQJZHELQVSHFWRULQ6DIDUL VXFFHVVKDQGOHUV
GHVNWRSEURZVHU WUDQVDFWLRQFDOOEDFNKDQGOHUV
GHFODUDWLRQ&66 KRPHVFUHHQDGGLQJLFRQVWR
GHIDXOWV KRVWLQJZHEDSSV
M47RXFKSURSHUWLHV KUHIWDJ
0RELOH6DIDUL KWDFFHVVILOH
3KRQH*DSKRPHVFUHHQLFRQ +70/
3KRQH*DSVWDUWXSJUDSKLF VHHDOVRL3KRQHVW\OLQJ
GHOHWLQJURZV¡ DERXW¡
GLUHFWRULHV DVVLJQLQJ&66FODVVHVWR+70/HOHPHQWV
FRPDSSOH:HE$SS&DFKHGLUHFWRU\
162 | Index
'20DQG-DYD6FULSW
K\SHUOLQNV&66
J
-DYD6FULSW¡
VHHDOVRM47RXFKM4XHU\
I DERXW¡
LFRQSURSHUW\ DFFHOHURPHWHU¡
LFRQV EHHSYLEUDWHDQGDOHUW¡
DGGLQJWRKRPHVFUHHQ JHRORFDWLRQ¡
FXVWRPL]LQJZLWK3KRQH*DS¡ -DYD6FULSWDOHUWVFRPSDUHGWR3KRQH*DS
LGDWWULEXWHVYHUVXVFODVVDWWULEXWHV DOHUWV
LGILHOG SDVVLQJIXQFWLRQVDVSDUDPHWHUV
LPDJHV SHUVLVWHQWGDWDVXSSRUW
ERUGHUV 64/VXSSRUW
EXWWRQV -DYD6FULSWFRQVROH
M47RXFK GHEXJJLQJWKHRIIOLQHDSSOLFDWLRQFDFKH
RIIVHWV ¡
3KRQH*DSVWDUWXSJUDSKLF ORJJLQJ
SUHFRPSRVHG M47RXFK
VWDUWXSJUDSKLFV LPDJHV
LQGH[KWPOILOH VFUHHQKHLJKW
LQOLQHWDJV M47RXFK-DYD6FULSWOLEUDU\
LQVHUWLQJURZVLQFOLHQWVLGHGDWDEDVHV DERXW
LQVWDOOLQJ FDQFHOEXWWRQV
L3KRQHGLVWULEXWLRQSURYLVLRQLQJSURILOHV FXVWRPL]LQJ
VXEPLWLQSXWEXWWRQ
QDWLYHDSSV M4XHU\-DYD6FULSWOLEUDU\
3+3 DERXW
,QWHUQHW([SORUHUGHVNWRSYHUVLRQRI&66 L3KRQHVW\OLQJ¡
L3KRQH'HYHORSHU3URJUDP M47RXFK-DYD6FULSWOLEUDU\
L3KRQHGLVWULEXWLRQSURYLVLRQLQJSURILOH
L3KRQH6'.
L3KRQH6LPXODWRU
K
DSSFDFKHGDWDEDVH NH\VGHILQHG
XVLQJ NH\ZRUGV
L3KRQHVW\OLQJ¡¡ &66
DGGLQJLFRQVWRKRPHVFUHHQ 1(7:25.NH\ZRUG
$MD[ WKLVNH\ZRUG
EDFNEXWWRQH[DPSOH¡ .LORFDORULHWUDFNLQJH[DPSOH¡
IXOOVFUHHQPRGH
JHWWLQJVWDUWHG L
L3KRQH&66 ODXQFKLQJZHEDSSV
L3KRQHORRNDQGIHHO OLEUDULHVVHHM47RXFKM4XHU\
M4XHU\-DYD6FULSWOLEUDU\¡ OLQX[LQVWDOOLQJ3+3
ORRNDQGIHHO ORFDOPDQLIHVWFRPSDULQJWRUHPRWHPDQLIHVW
VLPSOHEHOOVDQGZKLVWOHVH[DPSOH¡
WUDIILFFRSH[DPSOH¡ ORFDO6WRUDJH¡
L7XQHV$SS6WRUH ORJJLQJFRQVROHORJJLQJ
H[SHULHQFHVZLWK[L ORRNDQGIHHOL3KRQH
VXEPLWWLQJDSSVWR[L¡
Index | 163
M P
0DF26; SDGGLQJFRQWHQWDQGVLGHEDUHOHPHQWV
KWDFFHVVILOH SDJHVFDOLQJ
LQVWDOOLQJDQGHQDEOLQJ3+3 SDQHOV
PDQLIHVWILOHV 'DWHVSDQHO¡
PDQLIHVWOLQNVLQLQGH[KWPOILOH 1HZ(QWU\SDQHO
PDQLIHVW+RVW+DVKILHOG 6HWWLQJVSDQHO
PDQLIHVW85/ILHOG SDWKQDPHVLQ
PHWDWDJV SHUVLVWHQWGDWDVXSSRUW
DSSOHPRELOHZHEDSSFDSDEOHPHWDWDJ 3KRQH*DS¡
3KRQH*DSDOHUWVFRPSDUHGWR-DYD6FULSW
DSSOHPRELOHZHEDSSVWDWXVEDUVW\OH DOHUWV
PHWDWDJ VFUHHQKHLJKW
DSSOHWRXFKLFRQPHWDWDJ VWDUWXSVFUHHQV
DSSOHWRXFKLFRQSUHFRPSRVHGPHWDWDJ WLWOHVDQGLFRQV¡
3+3VFULSWV
DSSOHWRXFKVWDUWXSLPDJHPHWDWDJ SODFHKROGHUDWWULEXWH
YLHZSRUWPHWDWDJ SRS6HOHFWRUSURSHUW\
0RELOH6DIDULZHEEURZVHU SUHFRPSRVHGLPDJHV
EDFNEXWWRQV SUHORDG,PDJHVSURSHUW\
IXOOVFUHHQPRGH SULPDU\NH\VGHILQHG
SDJHVFDOLQJ SURSHUWLHV
PRGHVIXOOVFUHHQPRGH ZHENLWERUGHULPDJHSURSHUW\
ZHENLWERUGHUUDGLXVSURSHUW\
N ERUGHULPDJHSURSHUW\
&66
QDPHDWWULEXWH
H[SRVHGE\M47RXFK-DYD6FULSWOLEUDU\
QDWLYHDSSV¡
SURYLVLRQLQJSURILOHV
LQVWDOOLQJ
-DYD6FULSW¡
3KRQH*DS¡ Q
VLPXODWLQJZHEDSSVDV 4827$B(55HUURUFRGH
YHUVXVZHEDSSV[LL
QDYLJDWLRQPHQXVURXQGHGFRUQHUV
1(7:25.NH\ZRUG R
1HZ(QWU\SDQHO UHPRWHPDQLIHVWVFRPSDULQJWRORFDOPDQLIHVWV
QHZHVW&DFKHILHOG
UHQDPLQJDSSV
URXQGHGFRUQHUVQDYLJDWLRQPHQXV
O URZVLQFOLHQWVLGHGDWDEDVHV¡
2EMHFWLYH&[L GHOHWLQJ¡
RIIOLQHDSSOLFDWLRQFDFKH¡ LQVHUWLQJ
DERXW¡ VHOHFWLQJ
GHEXJJLQJ¡
G\QDPLFPDQLIHVWILOHV¡
RQOLQHZKLWHOLVWDQGIDOOEDFNRSWLRQV S
RIIVHWVLPDJHV 6DIDULGHVNWRSEURZVHU
RQOLQHZKLWHOLVW VHHDOVR0RELOH6DIDULZHEEURZVHU
FOLHQWVLGHGDWDEDVHV
SDJHVFDOLQJ
164 | Index
WHVWLQJZHEDSSV 6<17$;B(55HUURUFRGH
VDYLQJ
GDWHVWRVHVVLRQ6WRUDJH T
XVHUVHWWLQJVWRORFDO6WRUDJH¡ WDEOHV
VFDOLQJSDJHVFDOLQJ FDFKHPDQLIHVWGDWDEDVH
VFUHHQKHLJKW &DFKHVWDEOH
M47RXFK &DFKH:KLWHOLVW85/VWDEOH
3KRQH*DS )DOOEDFN85/VWDEOH
VFUHHQV WDJVVHH+70/
DGGLQJLFRQVWRKRPHVFUHHQ WHVWLQJZHEDSSV
IXOOVFUHHQPRGH DERXW
VWDUWXSVFUHHQVLQQDWLYHDSSV RQORFDOQHWZRUNV
VFULSWV3+3 XVLQJ6DIDUL
6'.V WH[WHGLWRUVVHOHFWLQJ
L3KRQH6'. WH[WLQSXWVDWWULEXWHV
UHTXLUHPHQWV WH[WVKDGRZGHFODUDWLRQ
VHOHFWLQJURZVLQFOLHQWVLGHGDWDEDVHV WKHPHVM47RXFK-DYD6FULSWOLEUDU\
VHOHFWRUV&66 WKLVNH\ZRUG
VHUYHUVVHHZHEVHUYHUV 7,0(287B(55HUURUFRGH
VHVVLRQ6WRUDJH¡ WLWOHVFXVWRPL]LQJZLWK3KRQH*DS¡
6HWWLQJVSDQHO 722B/$5*(B(55HUURUFRGH
VHWWLQJVVDYLQJXVHUVHWWLQJVWRORFDO6WRUDJH WUDIILFFRSH[DPSOH¡
¡ WUDQVDFWLRQFDOOEDFNKDQGOHUV
VLPSOHEHOOVDQGZKLVWOHVH[DPSOH¡ WUDQVDFWLRQPHWKRG
VLPXODWRUVVHHL3KRQH6LPXODWRU W\SHDWWULEXWH
VOLGH,Q6HOHFWRUSURSHUW\
VOLGHXS6HOHFWRUSURSHUW\
64/ U
H[HFXWH6TOPHWKRG 8,XVHULQWHUIDFH
KDQGOLQJHUURUV FRQYHQWLRQV
VXSSRUWIRU L3KRQHORRNDQGIHHO
64/LWHFRQWUROVWDWHPHQWV XOHOHPHQWV
VWDUWXSJUDSKLFV XQLTXHNH\VGHILQHG
VWDUWXSVFUHHQVQDWLYHDSSV 81.12:1B(55HUURUFRGH
VWDUWXS6FUHHQSURSHUW\ XVH$QLPDWLRQVSURSHUW\
VWDWXVEDUFKDQJLQJ XVHUVHWWLQJVVDYLQJWRORFDO6WRUDJH¡
VWDWXV%DUSURSHUW\
VWRUDJHVHHFOLHQWVLGHVWRUDJHGDWDEDVHV V
VW\OLQJVHH&66L3KRQHVW\OLQJ YDOXHV&66
VXEPLWLQSXWEXWWRQFODVVDWWULEXWH YLEUDWHPHWKRG
VXEPLW6HOHFWRUSURSHUW\ YLEUDWHQDWLYHDSSV¡
VXEPLWWLQJDSSVWRL7XQHV¡ YLHZSRUWPHWDWDJ0RELOH6DIDULZHEEURZVHU
DSSOLFDWLRQELQDULHV
L3KRQHGLVWULEXWLRQSURYLVLRQLQJSURILOH

UHDOOLIHH[SHULHQFHV[L
W
UHQDPLQJDSSV :&:HE'DWDEDVHHUURUFRGHV
VXFFHVVKDQGOHUV ZHEDSSV[LL
VZDS6HOHFWRUSURSHUW\ VHHDOVRDQLPDWLRQL3KRQHVW\OLQJWHVWLQJ
ZHEDSSV
Index | 165
KRVWLQJ
ODXQFKLQJ
YHUVXVQDWLYHDSSV[LL
:HE&OLSLFRQV
ZHESURJUDPPLQJVHH&66+70/
-DYD6FULSW
ZHEVHUYHUV
KRVWLQJZHEDSSVRQ
PDQLIHVWILOHV
3+3VFULSWV
ZHENLWERUGHULPDJHSURSHUW\
ZHENLWERUGHUUDGLXVSURSHUW\
ZHENLWJUDGLHQW
ZKLWHOLVWRQOLQH
X
;FRGHHGLWRU
166 | Index
About the Author
-RQDWKDQ 6WDUN LV D PRELOH DQG ZHE DSSOLFDWLRQ FRQVXOWDQW ZKR WKH :DOO 6WUHHW
-RXUQDOKDVFDOOHGDQH[SHUWRQSXEOLVKLQJGHVNWRSGDWDWRWKH:HE+HKDVZULWWHQ
WZR ERRNV RQ ZHE DSSOLFDWLRQ SURJUDPPLQJ LV D WHFK HGLWRU IRU SKS_DUFKLWHFW DQG
$GYLVRUPDJD]LQHVDQGKDVEHHQTXRWHGLQWKHPHGLDRQ,QWHUQHWDQGPRELOHOLIHVW\OH
WUHQGV
Colophon
7KHDQLPDORQWKHFRYHURI%XLOGLQJL3KRQH$SSVZLWK+70/&66DQG-DYD6FULSWLVD
EOXHELUG JHQXV 6LDOLD IDPLO\ 7XUGLGDH $OWKRXJK WKH\ DUH SUHGRPLQDQWO\ EOXH LQ
FRORU EOXHELUGV FDQ KDYH YLYLG VKDGHV RI UHG GLVSHUVHG WKURXJKRXW WKHLU SOXPDJH
8QOLNHRWKHUVSHFLHVRIELUGVQRGLVFHUQLEOHGLIIHUHQFHH[LVWVLQWKHFRORUSDWWHUQVRI
PDOHDQGIHPDOHEOXHELUGV
7KHELUGVDUHWHUULWRULDOE\QDWXUHDQGIDYRURSHQJUDVVODQGVZLWKVFDWWHUHGWUHHV0DOHV
ZLOO LGHQWLI\ QHVW VLWHV DPRQJ WKH WUHHV DQG ZLOO WU\ WR DWWUDFW SURVSHFWLYH PDWHV E\
VLQJLQJIODSSLQJWKHLUZLQJVDQGWKHQGHSRVLWLQJVRPHPDWHULDOZLWKLQWKHFDYLWLHVRI
WKRVHWUHHV,IDIHPDOHDFFHSWVWKHPDOH¦VHQWUHDWLHVDQGRQHRIWKHQHVWLQJVLWHVVKH
DORQHZLOOEXLOGWKHQHVWIRUWKHKRPH
%OXHELUGV DUH XQLTXH WR 1RUWK $PHULFD DQG ELUG ORYHUV RIWHQ DWWUDFW WKHP WR WKHLU
EDFN\DUGVZLWKIHHGHUVIXOORIGDUNOLQJEHHWOHVDQGPHDOZRUPV%OXHELUGVDUHDOVRIRQG
RIHDWLQJUDLVLQVVRDNHGLQZDWHUDQGEDWKLQJLQKHDWHGELUGEDWKV
7KHELUGLVSRSXODUO\WKRXJKWRIDVDV\PERORIRSWLPLVPDOWKRXJKRFFDVLRQDOO\WKLV
V\PEROLVPJRHVLQWRVKDGRZLHUWHUUDLQ
6RPHGUHDPLQWHUSUHWHUVVD\WKHLPDJHRIDGHDGEOXHELUGUHSUHVHQWVGLVLOOXVLRQPHQW
DORVVRILQQRFHQFHDQGDWUDQVLWLRQIURPD\RXQJHUPRUHQDwYHVHOIWRDZLVHURQH
ZKLOHWKHLPDJHRIDOLYHEOXHELUGUHSUHVHQWVVSLULWXDOMR\DQGFRQWHQWHGQHVVRUDORQJ
LQJIRUVXFKDVWDWH-XG\*DUODQG¦VFKDUDFWHU'RURWK\LQ7KH:L]DUGRI2]SHUKDSV
H[HPSOLILHV WKLV ORQJLQJ ZKHQ VKH VLQJV DERXW KDSS\ OLWWOH EOXHELUGV LQ WKH VRQJ
£6RPHZKHUHRYHUWKH5DLQERZ¤
7KH FRYHU LPDJH LV IURP -RKQVRQ¦V 1DWXUDO +LVWRU\ 7KH FRYHU IRQW LV $GREH ,7&
*DUDPRQG7KHWH[WIRQWLV/LQRW\SH%LUNDWKHKHDGLQJIRQWLV$GREH0\ULDG&RQ
GHQVHGDQGWKHFRGHIRQWLV/XFDV)RQW¦V7KH6DQV0RQR&RQGHQVHG

Building Iphone Apps PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Building Iphone Apps PDF

Uploaded by

Copyright:

Available Formats

Making App Store Apps Without Objective-C or Cocoa

O’REILLY* Jonathan Stark

Building iPhone Apps with HTML, CSS, and JavaScript

US $29.99 CAN $37.99

Editor: %ULDQ-HSVRQ Indexer: )UHG%URZQ

2. Basic iPhone Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

3. Advanced iPhone Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

5. Client-Side Data Storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

7. Going Native . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

viii | Table of Contents

8. Submitting Your App to iTunes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151

Who Should Read This Book

What You Need to Use This Book

Conventions Used in This Book

Using Code Examples

Safari® Books Online

%HIRUHZHGLYH LQ DQG VWDUW EXLOGLQJ DSSOLFDWLRQVIRUWKHL3KRQH,¦GOLNHWRTXLFNO\

Web Apps Versus Native Apps

What Is a Web App?

What Is a Native App?

Which Approach Is Right for You?

2 | Chapter 1:ಗGetting Started

Web Programming Crash Course

Web Programming Crash Course | 3

4 | Chapter 1:ಗGetting Started

Web Programming Crash Course | 5

6 | Chapter 1:ಗGetting Started

,I,DGGHG .loud { font-style: italic; }WRWKH&66IRUWKLV+70/ Hi there!DQG

Web Programming Crash Course | 7

.loud { font-style: italic; }

8 | Chapter 1:ಗGetting Started

Web Programming Crash Course | 9

10 | Chapter 1:ಗGetting Started

Web Programming Crash Course | 11

Don’t Have a Website?

14 | Chapter 2:ಗBasic iPhone Styling

Preparing a Separate iPhone Stylesheet

16 | Chapter 2:ಗBasic iPhone Styling

Controlling the Page Scaling

18 | Chapter 2:ಗBasic iPhone Styling

1RZ,¦OODWWDFNWKHKHDGHUdivWKDWFRQWDLQVWKHPDLQKRPHOLQN LHWKHORJROLQN DQG

Adding the iPhone CSS | 19

20 | Chapter 2:ಗBasic iPhone Styling

Jonanan a me audio* ol na boot Wt&

Adding the iPhone Look and Feel

Adding the iPhone Look and Feel | 21

22 | Chapter 2:ಗBasic iPhone Styling

Adding Basic Behavior with jQuery

Adding Basic Behavior with jQuery | 23

24 | Chapter 2:ಗBasic iPhone Styling

Adding Basic Behavior with jQuery | 25

26 | Chapter 2:ಗBasic iPhone Styling

Adding Basic Behavior with jQuery | 27

Menu Jonathan Stark

Jonathan is the author of the book Web

What You’ve Learned

28 | Chapter 2:ಗBasic iPhone Styling

Adding a Touch of Ajax

30 | Chapter 3:ಗAdvanced iPhone Styling

32 | Chapter 3:ಗAdvanced iPhone Styling

34 | Chapter 3:ಗAdvanced iPhone Styling

Simple Bells and Whistles | 35

7KHGRXEOHSLSH || LQWKHILUVWOLQHRILQVHUWHGFRGH VKRZQLQEROG LVWKH-DYD6FULSW

%HIRUHZHGLYH LQ DQG VWDUW EXLOGLQJ DSSOLFDWLRQVIRUWKHL3KRQH,¦GOLNHWRTXLFNO\

,I,DGGHG .loud { font-style: italic; }WRWKH&66IRUWKLV+70/ Hi there!DQG

1RZ,¦OODWWDFNWKHKHDGHUdivWKDWFRQWDLQVWKHPDLQKRPHOLQNLHWKHORJROLQNDQG

7KHGRXEOHSLSH||LQWKHILUVWOLQHRILQVHUWHGFRGHVKRZQLQEROGLVWKH-DYD6FULSW

7KHGLIIHUHQFHEHWZHHQWKHDSSOLFDWLRQEHIRUHM47RXFK)LJXUHDQGDIWHU)LJ

$QGMXVWOLNHWKDWZH¦YHDGGHGDQHZSDQHOWRWKHDSSVHH)LJXUH&OLFNLQJRQDQ

2QFHWKHYDOXHVDUHVWRUHG,XVHWKHM4XHU\ goBack()IXQFWLRQRQWKHVHFRQGWRODVW

1RZZKHQDXVHUVXEPLWVWKH #createEntryIRUPWKH createEntry()IXQFWLRQZLOOEH