Darmowy fragment publikacji:
Tytuł oryginału: Building Android Apps with HTML, CSS,
and JavaScript: Making Native Apps with Standards-Based Web Tools
Tłumaczenie: Aleksander Lamża (rozdz. 0 – 2, 4 – 8, dodatki), Michał Nowak (rozdz. 3)
ISBN: 978-83-246-4968-6
© 2013 Helion S.A.
Authorized Polish translation of the English edition Building Android Apps with HTML,
CSS, and JavaScript, 2nd Edition ISBN 9781449316419 © 2012 Jonathan Stark.
This translation is published and sold by permission of O’Reilly Media, Inc., which owns
or controls all rights to publish and sell the same.
All rights reserved. No part of this book may be reproduced or transmitted in any form
or by any means, electronic or mechanical, including photocopying, recording or
by any information storage retrieval system, without permission from the Publisher.
Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu
niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą
kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym,
magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji.
Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź
towarowymi ich właścicieli.
Wydawnictwo HELION dołożyło wszelkich starań, by zawarte w tej książce informacje
były kompletne i rzetelne. Nie bierze jednak żadnej odpowiedzialności ani za ich
wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub
autorskich. Wydawnictwo HELION nie ponosi również żadnej odpowiedzialności za
ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce.
Wydawnictwo HELION
ul. Kościuszki 1c, 44-100 GLIWICE
tel. 32 231 22 19, 32 230 98 63
e-mail: helion@helion.pl
WWW: http://helion.pl (księgarnia internetowa, katalog książek)
Pliki z przykładami omawianymi w książce można znaleźć pod adresem:
ftp://ftp.helion.pl/przyklady/andrta.zip
Drogi Czytelniku!
Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres
http://helion.pl/user/opinie/andrta
Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.
Printed in Poland.
• Kup książkę
• Poleć książkę
• Oceń książkę
• Księgarnia internetowa
• Lubię to! » Nasza społeczność
Spis tre(cid:316)ci
Wprowadzenie ................................................................................9
Aplikacje internetowe kontra aplikacje natywne
Czym jest aplikacja internetowa?
Czym jest aplikacja natywna?
Wady i zalety
Które podej(cid:264)cie jest odpowiednie dla Ciebie?
1. Zaczynamy ..................................................................................... 13
13
13
14
14
15
15
15
19
23
Wprowadzenie do j(cid:246)zyka HTML
Wprowadzenie do CSS
Wprowadzenie do JavaScriptu
Ekspresowy kurs technologii internetowych
Nie masz w(cid:228)asnej witryny?
Pierwsze kroki
Osobny arkusz stylów dla Androida
Kontrolowanie skalowania strony
2. Praca ze stylami .............................................................................27
27
29
33
35
36
39
41
47
Arkusz stylów dla Androida
Wygl(cid:241)d i zachowanie w stylu Androida
Proste zachowania z jQuery
Czego si(cid:246) nauczy(cid:228)e(cid:264)?
Szczypta Ajaksa
3. Zaawansowane stylizowanie .......................................................49
49
50
52
53
Kierowanie ruchem
Przygotowanie tre(cid:264)ci
Przekierowywanie (cid:276)(cid:241)da(cid:254) za pomoc(cid:241) JavaScriptu
5
Kup książkęPoleć książkę Kilka wodotrysków
Wska(cid:274)nik post(cid:246)pu
Ustawianie tytu(cid:228)u strony
Obs(cid:228)uga d(cid:228)ugich tytu(cid:228)ów
Automatyczne przewijanie do pocz(cid:241)tku strony
Przechwytywanie odsy(cid:228)aczy lokalnych
Dodawanie w(cid:228)asnego przycisku „wstecz”
Dodawanie ikony do pulpitu
Czego si(cid:246) nauczy(cid:228)e(cid:264)?
55
56
59
61
62
64
64
72
73
4. Animacje ........................................................................................75
75
76
79
82
83
86
89
92
94
Z niewielk(cid:241) pomoc(cid:241) naszych przyjació(cid:228)
Przewijanie
Ekran Terminarz
Ekran Dzie(cid:254)
Ekran Nowy wpis
Ekran Ustawienia
Integracja ca(cid:228)o(cid:264)ci
Dostosowywanie biblioteki jQTouch
Czego si(cid:246) nauczy(cid:228)e(cid:264)?
Web Storage
Zapisywanie ustawie(cid:254) aplikacji w localStorage
Zapisywanie daty w sessionStorage
Web SQL Database
5. Sk(cid:293)adowanie danych po stronie klienta .......................................95
95
97
100
102
104
106
110
115
118
118
Tworzenie bazy danych
Wstawianie wierszy
Wybieranie wierszy i obs(cid:228)uga otrzymanych danych
Usuwanie wierszy
Kody b(cid:228)(cid:246)dów Web SQL Database
Czego si(cid:246) nauczy(cid:228)e(cid:264)?
6. Tryb offline ...................................................................................121
121
126
132
Podstawy aplikacji dzia(cid:228)aj(cid:241)cych offline
Sekcje NETWORK i FALLBACK
Dynamiczne tworzenie pliku manifestu
6
(cid:95)
Spis tre(cid:316)ci
Kup książkęPoleć książkę Debugowanie
Konsola JavaScriptu
Czego si(cid:246) nauczy(cid:228)e(cid:264)?
136
137
140
Pobieranie i instalowanie (cid:264)rodowiska Eclipse Classic
Pobieranie i instalowanie Android SDK
Instalowanie dodatku ADT w Eclipse
Dodawanie platform Android i innych sk(cid:228)adników
Pobieranie najnowszej wersji PhoneGap
Tworzenie nowego projektu
Uruchamianie Kilo jako aplikacji dla Androida
7. W stron(cid:253) natywno(cid:316)ci ....................................................................141
Wprowadzenie do PhoneGap
141
Tworzenie aplikacji z wykorzystaniem Eclipse i Android SDK 143
143
144
144
145
146
146
148
150
151
155
162
166
D(cid:274)wi(cid:246)ki, wibracje i ostrze(cid:276)enia
Geolokalizacja
Akcelerometr
Sterowanie telefonem z poziomu JavaScriptu
Czego si(cid:246) nauczy(cid:228)e(cid:264)?
Przygotowanie aplikacji do dystrybucji
Usuwanie kodu na potrzeby debugowania
Nadawanie aplikacji numeru wersji
Kompilowanie i podpisywanie aplikacji
8. Publikowanie aplikacji w sklepie Google Play ........................... 167
167
167
168
169
170
172
173
Przesy(cid:228)anie aplikacji do sklepu Google Play
Bezpo(cid:264)rednie dystrybuowanie aplikacji
Dalsza lektura
Dodatek. Wykrywanie przegl(cid:233)darek za pomoc(cid:233) WURFL ..............177
Spis tre(cid:316)ci
(cid:95)
7
Kup książkęPoleć książkę 8
(cid:95)
Spis tre(cid:316)ci
Kup książkęPoleć książkę ROZDZIA(cid:292) 4.
Animacje
W aplikacjach dla Androida mo(cid:276)na si(cid:246) spotka(cid:232) z wieloma charakterystycznymi
elementami animacji, które cz(cid:246)sto s(cid:241) dodatkow(cid:241) informacj(cid:241) dla u(cid:276)ytkownika.
Przyk(cid:228)adem mo(cid:276)e by(cid:232) przewijanie ekranów w lewo podczas nawigowania
w g(cid:228)(cid:241)b struktury aplikacji, a w prawo podczas powrotów. W tym rozdziale
dowiesz si(cid:246), jak do aplikacji internetowej doda(cid:232) tego typu zachowania, dzi(cid:246)ki
czemu w jeszcze wi(cid:246)kszym stopniu b(cid:246)dzie przypomina(cid:228)a aplikacj(cid:246) natywn(cid:241).
Z niewielk(cid:233) pomoc(cid:233) naszych przyjació(cid:293)
Prawda jest taka, (cid:276)e stworzenie animacji wygl(cid:241)daj(cid:241)cej na natywn(cid:241) na stronie
internetowej jest bardzo trudne. Na szcz(cid:246)(cid:264)cie mamy do dyspozycji bibliotek(cid:246)
jQTouch autorstwa Davida Kanedy, dzi(cid:246)ki której da si(cid:246) to osi(cid:241)gn(cid:241)(cid:232) znacznie
pro(cid:264)ciej. Jest to rozprowadzana na zasadach open source wtyczka do jQuery,
która rozwi(cid:241)zuje wi(cid:246)kszo(cid:264)(cid:232) problemów przedstawionych do tej pory, a tak(cid:276)e
wiele innych, du(cid:276)o bardziej z(cid:228)o(cid:276)onych.
Najnowsz(cid:241) dost(cid:246)pn(cid:241) wersj(cid:241) biblioteki jQTouch jest 1.0b4, któr(cid:241)
mo(cid:276)esz pobra(cid:232) ze strony http://www.jqtouch.com/. W kolejnych
wersjach s(cid:241) planowane istotne zmiany, wi(cid:246)c — mimo (cid:276)e w chwili
czytania tej ksi(cid:241)(cid:276)ki jest zapewne dost(cid:246)pna nowsza wersja bi-
blioteki — pozosta(cid:254) lepiej przy 1.0b4. Kiedy b(cid:246)dziesz si(cid:246) ju(cid:276)
czu(cid:232) na tyle pewnie, by zmierzy(cid:232) si(cid:246) z ewentualnymi proble-
mami, mo(cid:276)esz zaktualizowa(cid:232) bibliotek(cid:246) do najnowszej wersji.
75
Kup książkęPoleć książkę Przewijanie
Tym razem przygotujemy prost(cid:241) aplikacj(cid:246) Kilo wspomagaj(cid:241)c(cid:241) stosowanie
diety. Jej podstawow(cid:241) funkcjonalno(cid:264)ci(cid:241) ma by(cid:232) dodawanie (i usuwanie) in-
formacji o posi(cid:228)kach do poszczególnych dni. Aplikacj(cid:246) podzielimy na pi(cid:246)(cid:232)
ekranów: G(cid:228)ówny, Ustawienia, Terminarz, Dzie(cid:254) oraz Nowy wpis. Zaczniemy od
dwóch ekranów, a pozosta(cid:228)e dodamy pó(cid:274)niej.
Do elementów dokumentu HTML b(cid:246)dziemy stosowa(cid:232) ró(cid:276)ne
klasy CSS (takie jak toolbar, edgetoedge, arrow, button czy
back). Wszystkie one odpowiadaj(cid:241) predefiniowanym klasom
pochodz(cid:241)cym z domy(cid:264)lnego arkusza CSS biblioteki jQTouch.
Mo(cid:276)esz oczywi(cid:264)cie tworzy(cid:232) i stosowa(cid:232) w(cid:228)asne klasy oraz mo-
dyfikowa(cid:232) szablony jQTouch, ale na potrzeby tego przyk(cid:228)adu
pozostaniemy przy domy(cid:264)lnych klasach.
Prac(cid:246) nad t(cid:241) aplikacj(cid:241) zaczynamy od zera, wi(cid:246)c pliki tworzone we wcze(cid:264)niej-
szych rozdzia(cid:228)ach nie b(cid:246)d(cid:241) nam potrzebne. Przede wszystkim musisz utwo-
rzy(cid:232) plik index.html i wpisa(cid:232) do niego kod HTML przedstawiony na listingu
4.1 (zawiera on g(cid:228)ówny ekran i informacje o aplikacji).
Listing 4.1. Kod HTML pliku index.html
html
head
meta charset= utf-8 /
title Kilo /title
/head
body
div id= home
div class= toolbar
h1 Kilo /h1
/div
ul class= edgetoedge
li class= arrow a href= #about O Kilo /a /li
/ul
/div
div id= about
div class= toolbar
h1 O Kilo /h1
a class= button back href= # Wstecz /a
/div
div
p Aplikacja Kilo pomaga stosowa(cid:202) dowoln(cid:200) diet(cid:218). /p
/div
/div
/body
/html
76
(cid:95)
Rozdzia(cid:293) 4. Animacje
Kup książkęPoleć książkę W dokumencie HTML znajduje si(cid:246) tylko sekcja nag(cid:228)ówka z tytu(cid:228)em oraz dwa
bloki div:
Ten blok div (podobnie jak drugi — about) stanie si(cid:246) ekranem aplikacji.
Wykorzystamy tu fakt, (cid:276)e oba bloki s(cid:241) bezpo(cid:264)rednimi potomkami ele-
mentu body.
W ka(cid:276)dym bloku div znajduje si(cid:246) element div klasy toolbar (jest ona zdefi-
niowana w arkuszu biblioteki jQTouch). Dzi(cid:246)ki temu element b(cid:246)dzie wy-
gl(cid:241)da(cid:228) jak standardowy pasek narz(cid:246)dzi w aplikacjach mobilnych.
Ten znacznik nienumerowanej listy (ul) ma przypisan(cid:241) klas(cid:246) edgetoedge,
dzi(cid:246)ki której lista zostanie rozci(cid:241)gni(cid:246)ta w poziomie na ca(cid:228)(cid:241) szeroko(cid:264)(cid:232)
ekranu.
Ten element li zawiera odsy(cid:228)acz (w atrybucie href) do ekranu O Kilo.
Przypisanie do elementu li klasy arrow jest opcjonalne, ale jej zastosowanie
spowoduje dodanie strza(cid:228)ki z prawej strony elementu.
We wszystkich blokach z przypisan(cid:241) klas(cid:241) toolbar znajduje si(cid:246) jeden
element h1, który b(cid:246)dzie wy(cid:264)wietlany jako tytu(cid:228) ekranu. Znacznik a ma
przypisane klasy button oraz back, dzi(cid:246)ki czemu b(cid:246)dzie wygl(cid:241)da(cid:228) jak
przycisk „wstecz”.
Atrybut href przycisku „wstecz” zosta(cid:228) ustawiony na #. Stan-
dardowym zachowaniem przegl(cid:241)darki po klikni(cid:246)ciu takiego
odsy(cid:228)acza jest przej(cid:264)cie na pocz(cid:241)tek bie(cid:276)(cid:241)cego dokumentu, jed-
nak w przypadku biblioteki jQTouch spowoduje to przej(cid:264)cie do
poprzedniego ekranu. Zamiast ogólnego (cid:228)(cid:241)cza # mo(cid:276)esz zasto-
sowa(cid:232) konkretny punkt powrotu, na przyk(cid:228)ad #home, dzi(cid:246)ki
czemu wci(cid:264)ni(cid:246)cie przycisku spowoduje wy(cid:264)wietlenie wskaza-
nego ekranu, a nie poprzedniego.
Mamy ju(cid:276) kod HTML podstawowej wersji strony, pora do(cid:228)(cid:241)czy(cid:232) jQTouch.
Po zainstalowaniu jQTouch w tym samym katalogu co dokument HTML
(patrz ramka „Instalowanie biblioteki jQTouch”) dodaj do sekcji head do-
kumentu kilka wierszy kodu (listing 4.2).
Instalowanie biblioteki jQTouch
W tym i wielu innych przyk(cid:228)adach zaprezentowanych w ksi(cid:241)(cid:276)ce b(cid:246)dzie
u(cid:276)ywana biblioteka jQTouch. Ze strony http://www.jqtouch.com pobierz
plik ZIP i rozpakuj go. W miejscu, w którym znajduje si(cid:246) dokument
HTML aplikacji Kilo, utwórz podkatalog jqtouch i umie(cid:264)(cid:232) w nim katalogi
src oraz themes z wypakowanego archiwum ZIP.
Przewijanie
(cid:95)
77
Kup książkęPoleć książkę Listing 4.2. Aby skorzysta(cid:232) z jQTouch, w sekcji head dokumentu dopisz poni(cid:276)sze wiersze
link type= text/css rel= stylesheet media= screen
href= jqtouch/themes/css/jqtouch.css /
script type= text/javascript src= jqtouch/src/lib/zepto.min.js /script
script type= text/javascript src= jqtouch/src/jqtouch.min.js /script
script type= text/javascript
var jQT = $.jQTouch({
icon: kilo.png
});
/script
W tym wierszu do(cid:228)(cid:241)czamy arkusz stylów jqtouch.css, który jest domy(cid:264)lnym
tematem graficznym stosowanym przez jQTouch. S(cid:241) w nim zdefiniowane
klasy, których u(cid:276)ywamy w dokumencie HTML. Nie powiniene(cid:264) wprowa-
dza(cid:232) zmian w tym arkuszu. Poza domy(cid:264)lnym tematem w jQTouch w wersji
1.0b4 dost(cid:246)pne s(cid:241) jeszcze dwa: apple.css oraz vanilla.css. Aby sprawdzi(cid:232), jak
wygl(cid:241)daj(cid:241), zmodyfikuj w kodzie HTML nazw(cid:246) do(cid:228)(cid:241)czanego pliku CSS.
jQTouch wymaga biblioteki jQuery b(cid:241)d(cid:274) Zepto (obie zosta(cid:228)y do(cid:228)(cid:241)czone
do paczki ZIP). Rozwi(cid:241)zaniem sugerowanym przez twórców biblioteki
jQTouch jest zastosowanie Zepto (biblioteki bazuj(cid:241)cej na jQuery, która
jest polecana dla aplikacji mobilnych ze wzgl(cid:246)du na zminimalizowany
rozmiar1), jednak w omawianym przyk(cid:228)adzie u(cid:276)yjemy biblioteki jQuery
(z uwagi na nieobecno(cid:264)(cid:232) w Zepto potrzebnych nam funkcji). W takim
przypadku konieczne jest do(cid:228)(cid:241)czenie pliku jqtouch-jquery.min.js, który
tworzy „most” mi(cid:246)dzy bibliotekami jQTouch i jQuery.
W tym miejscu do(cid:228)(cid:241)czamy skrypt biblioteki jQTouch. Bardzo wa(cid:276)na jest
kolejno(cid:264)(cid:232) do(cid:228)(cid:241)czania skryptów — najpierw jQuery (b(cid:241)d(cid:274) Zepto), pó(cid:274)niej
jQTouch. W przeciwnym razie aplikacja by nie zadzia(cid:228)a(cid:228)a.
W bloku script tworzymy obiekt jQTouch i ustawiamy jego opcj(cid:246) icon.
Obiekt jQTouch udost(cid:246)pnia wiele w(cid:228)a(cid:264)ciwo(cid:264)ci, dzi(cid:246)ki którym mo(cid:276)na
spersonalizowa(cid:232) zachowanie i wygl(cid:241)d aplikacji. Kilka z nich omówimy
w dalszej cz(cid:246)(cid:264)ci ksi(cid:241)(cid:276)ki. Co prawda wszystkie te w(cid:228)a(cid:264)ciwo(cid:264)ci s(cid:241) opcjo-
nalne, ale w wi(cid:246)kszo(cid:264)ci przypadków i tak trzeba u(cid:276)y(cid:232) co najmniej kilku.
Zastosowana w przyk(cid:228)adzie w(cid:228)a(cid:264)ciwo(cid:264)(cid:232) icon odpowiada za ikon(cid:246) wy-
(cid:264)wietlan(cid:241) na ekranie domowym.
Na rysunku 4.1 wida(cid:232) aplikacj(cid:246) przed zastosowaniem biblioteki jQTouch,
a na rysunku 4.2 — po jej do(cid:228)(cid:241)czeniu. Ró(cid:276)nica jest niesamowita, ale naprawd(cid:246)
zadziwiaj(cid:241)ce jest to, (cid:276)e wystarczy(cid:228)o kilka linii kodu, by uzyska(cid:232) efekt przewi-
jania stron. Robi wra(cid:276)enie, prawda? A to dopiero pocz(cid:241)tek!
1 Szczegó(cid:228)owe informacje na temat biblioteki Zepto mo(cid:276)na znale(cid:274)(cid:232) na stronie
http://zeptojs.com/ — przyp. t(cid:228)um.
78
(cid:95)
Rozdzia(cid:293) 4. Animacje
Kup książkęPoleć książkę Rysunek 4.1. Aplikacja Kilo bez jQTouch…
Ekran Terminarz
Teraz zajmiemy si(cid:246) ekranem Terminarz. Ma si(cid:246) na nim znale(cid:274)(cid:232) lista dni za-
czynaj(cid:241)ca si(cid:246) dzisiaj, a ko(cid:254)cz(cid:241)ca pi(cid:246)(cid:232) dni wcze(cid:264)niej. W dokumencie HTML
po kodzie ekranu O Kilo (ale przed zamykaj(cid:241)cym znacznikiem /body )
wpisz kod z listingu 4.3. Trzeba b(cid:246)dzie jeszcze uzupe(cid:228)ni(cid:232) nawigacj(cid:246) na
ekranie g(cid:228)ównym, ale tym zajmiemy si(cid:246) za moment.
Listing 4.3. Kod HTML ekranu Terminarz
div id= dates
div class= toolbar
h1 Terminarz /h1
a class= button back href= # Wstecz /a
Ekran Terminarz
(cid:95)
79
Kup książkęPoleć książkę Rysunek 4.2. …i po do(cid:228)(cid:241)czeniu biblioteki
/div
ul class= edgetoedge
li class= arrow a id= 0 href= #date Dzisiaj /a /li
li class= arrow a id= 1 href= #date Wczoraj /a /li
li class= arrow a id= 2 href= #date 2 dni temu /a /li
li class= arrow a id= 3 href= #date 3 dni temu /a /li
li class= arrow a id= 4 href= #date 4 dni temu /a /li
li class= arrow a id= 5 href= #date 5 dni temu /a /li
/ul
/div
Podobnie jak na ekranie O Kilo, tu równie(cid:276) ma si(cid:246) znale(cid:274)(cid:232) pasek z tytu(cid:228)em
i przycisk Wstecz. Dodatkowo umie(cid:264)cili(cid:264)my nienumerowan(cid:241) list(cid:246) odsy(cid:228)a-
czy z przypisan(cid:241) klas(cid:241) edgetoedge. Zwró(cid:232) uwag(cid:246), (cid:276)e wszystkie odsy(cid:228)acze
maj(cid:241) unikalne identyfikatory (od 0 do 5), ale t(cid:246) sam(cid:241) warto(cid:264)(cid:232) atrybutu href
(#date) — dlaczego tak jest, dowiesz si(cid:246) niebawem.
80
(cid:95)
Rozdzia(cid:293) 4. Animacje
Kup książkęPoleć książkę Nast(cid:246)pnie w kodzie g(cid:228)ównego ekranu musimy umie(cid:264)ci(cid:232) odsy(cid:228)acz do ekranu
Terminarz (nowy kod jest wyró(cid:276)niony pogrubieniem):
div id= home
div class= toolbar
h1 Kilo /h1
/div
ul class= edgetoedge
li class= arrow a href= #dates Terminarz /a /li
li class= arrow a href= #about O Kilo /a /li
/ul
/div
W ten oto sposób dodali(cid:264)my do aplikacji kolejny ekran (rysunek 4.3). Po
klikni(cid:246)ciu odsy(cid:228)acza Terminarz zostanie wy(cid:264)wietlony ekran Terminarz (ry-
sunek 4.4). Odsy(cid:228)acze znajduj(cid:241)ce si(cid:246) na tym ekranie na razie nie dzia(cid:228)aj(cid:241).
Poradzimy sobie z tym problemem, tworz(cid:241)c ekran wy(cid:264)wietlaj(cid:241)cy dni
(czyli ekran Dzie(cid:254)).
Rysunek 4.3. Na g(cid:228)ównym ekranie pojawi(cid:228) si(cid:246) odsy(cid:228)acz Terminarz
Ekran Terminarz
(cid:95)
81
Kup książkęPoleć książkę Rysunek 4.4. Ekran Terminarz zawiera pasek z tytu(cid:228)em i przyciskiem Wstecz oraz
list(cid:246) odsy(cid:228)aczy do kolejnych dni
Ekran Dzie(cid:295)
Ekran Dzie(cid:254) przypomina poprzednie ekrany z kilkoma drobnymi ró(cid:276)nicami
(spójrz na listing 4.4). Dopisz przedstawiony kod HTML pod kodem ekranu
Dates, ale przed znacznikiem zamykaj(cid:241)cym /body .
Listing 4.4. Kod HTML ekranu Dzie(cid:254)
div id= date
div class= toolbar
h1 Dzie(cid:241) /h1
a class= button back href= # Wstecz /a
a class= button slideup href= #createEntry + /a
/div
ul class= edgetoedge
li id= entryTemplate class= entry style= display:none
82
(cid:95)
Rozdzia(cid:293) 4. Animacje
Kup książkęPoleć książkę span class= label Etykieta /span
span class= calories 000 /span
span class= delete Usu(cid:241) /span
/li
/ul
/div
Na pasku umie(cid:264)cili(cid:264)my dodatkowy przycisk. Po jego klikni(cid:246)ciu zostanie
wy(cid:264)wietlony ekran Nowy wpis (którego jeszcze nie przygotowali(cid:264)my).
Odsy(cid:228)aczowi jest przypisana klasa slideup, dzi(cid:246)ki której podczas zmiany
ekranów zostanie zastosowany efekt przewijania w gór(cid:246), a nie, jak dot(cid:241)d,
z lewej lub z prawej strony.
Kolejnym elementem odró(cid:276)niaj(cid:241)cym ten ekran od pozosta(cid:228)ych jest
ustawienie stylu display:none w pozycji listy, co powoduje jej ukrycie.
Jak wkrótce zobaczysz, u(cid:276)yjemy tej niewidocznej pozycji listy jako sza-
blonu dla wy(cid:264)wietlanych wpisów. Na razie nie ma jednak (cid:276)adnych wpi-
sów, wi(cid:246)c lista jest pusta.
Po dodaniu kodu klikni(cid:246)cie dowolnej pozycji na ekranie Terminarz spowoduje
wy(cid:264)wietlenie ekranu Dzie(cid:254) (rysunek 4.5).
Ekran Nowy wpis
Na listingu 4.5 znajduje si(cid:246) kod ekranu Nowy wpis. Umie(cid:264)(cid:232) go na ko(cid:254)cu
pliku index.html (oczywi(cid:264)cie przed zamykaj(cid:241)cym znacznikiem /body ).
Listing 4.5. Kod HTML ekranu Nowy wpis
div id= createEntry
div class= toolbar
h1 Nowy wpis /h1
a class= button cancel href= # Anuluj /a
/div
form method= post
ul class= rounded
li input type= text placeholder= Posi(cid:239)ek name= food id= food
(cid:180)autocapitalize= off autocorrect= off autocomplete= off / /li
li input type= text placeholder= Kalorie name= calories id=
(cid:180)calories autocapitalize= off autocorrect= off autocomplete= off / /li
li input type= submit class= submit name= action value= Zapisz
(cid:180)/ /li
/ul
/form
/div
Pierwszym, na co nale(cid:276)y zwróci(cid:232) uwag(cid:246) na ekranie Nowy wpis, jest inna
nazwa przycisku — zamiast Wstecz jest Anuluj.
Ekran Nowy wpis
(cid:95)
83
Kup książkęPoleć książkę Rysunek 4.5. Na razie ekran Dzie(cid:254) jest pusty (poza paskiem z tytu(cid:228)em i dwoma
przyciskami)
Przycisk Anuluj (klasa cancel) zachowuje si(cid:246) w jQTouch tak
samo jak przycisk Wstecz (klasa back), czyli usuwa bie(cid:276)(cid:241)cy
ekran z zastosowaniem animacji odwrotnej do tej, która jest sto-
sowana podczas pojawiania si(cid:246) ekranu. Mo(cid:276)na jednak zauwa-
(cid:276)y(cid:232) ró(cid:276)nic(cid:246) w wygl(cid:241)dzie — przycisk Anuluj nie ma charaktery-
stycznego kszta(cid:228)tu strza(cid:228)ki skierowanej w lewo.
Zastosowali(cid:264)my tu przycisk Anuluj ze wzgl(cid:246)du na to, (cid:276)e ekran
Nowy wpis jest wy(cid:264)wietlany z efektem wjazdu z góry, wi(cid:246)c jego
ukrywaniu powinien towarzyszy(cid:232) ekran zjazdu w dó(cid:228). Gdyby-
(cid:264)my u(cid:276)yli przycisku Wstecz, doprowadziliby(cid:264)my do niekonse-
kwencji, poniewa(cid:276) po naci(cid:264)ni(cid:246)ciu przycisku ze strza(cid:228)k(cid:241) skiero-
wan(cid:241) w lewo ekran zjecha(cid:228)by w dó(cid:228) (a to mog(cid:228)oby zmyli(cid:232)
u(cid:276)ytkowników).
84
(cid:95)
Rozdzia(cid:293) 4. Animacje
Kup książkęPoleć książkę Formularz zawiera nienumerowan(cid:241) (wypunktowan(cid:241)) list(cid:246) trzech ele-
mentów: dwóch pól tekstowych i przycisku potwierdzenia. Dzi(cid:246)ki
osadzeniu kontrolek formularza w elemencie li zostan(cid:241) do nich zastoso-
wane style jQTouch (rysunek 4.6).
Rysunek 4.6. Do elementów formularza zosta(cid:228)y zastosowane style z jQTouch
W polach tekstowych umie(cid:264)cili(cid:264)my kilka atrybutów:
type= text
Definiuje kontrolk(cid:246) formularza jako jednowierszowe pole tekstowe.
placeholder
(cid:227)a(cid:254)cuch tekstowy wy(cid:264)wietlany w pustym polu formularza.
name
Nazwa pola, która po przes(cid:228)aniu formularza zostanie powi(cid:241)zana
z warto(cid:264)ci(cid:241) wpisan(cid:241) przez u(cid:276)ytkownika.
Ekran Nowy wpis
(cid:95)
85
Kup książkęPoleć książkę id
Unikalny identyfikator elementu w kontek(cid:264)cie ca(cid:228)ej strony.
autocapitalize
Steruje automatyczn(cid:241) zamian(cid:241) wprowadzanych liter na wielkie (dzia(cid:228)a
tylko w przegl(cid:241)darce Mobile Safari w iOS).
autocorrect
Steruje funkcj(cid:241) sprawdzania pisowni w przegl(cid:241)darce Mobile Safari
w iOS (nie dzia(cid:228)a na Androidzie).
autocomplete
Steruje funkcj(cid:241) automatycznego uzupe(cid:228)niania w przegl(cid:241)darce Mobile
Safari w iOS (nie dzia(cid:228)a na Androidzie).
Atrybut class przycisku przesy(cid:228)aj(cid:241)cego formularz wymaga dok(cid:228)adniejszego
wyja(cid:264)nienia. Przegl(cid:241)darka Androida wy(cid:264)wietla klawiatur(cid:246) ekranow(cid:241), gdy
kursor znajdzie si(cid:246) w polu formularza. W prawym dolnym rogu klawiatury
znajduje si(cid:246) przycisk Id(cid:274), który s(cid:228)u(cid:276)y do przesy(cid:228)ania formularza. W sytuacji,
gdy przechwytujemy funkcj(cid:246) przesy(cid:228)ania (a tak si(cid:246) dzieje w omawianym
przyk(cid:228)adzie), wci(cid:264)ni(cid:246)cie tego przycisku nie spowoduje usuni(cid:246)cia kursora
z aktywnego pola, w zwi(cid:241)zku z czym klawiatura nie zniknie z ekranu. Bi-
blioteka jQTouch umo(cid:276)liwia rozwi(cid:241)zanie tego problemu poprzez auto-
matyczne usuniecie kursora z pola po zatwierdzeniu formularza. Aby
skorzysta(cid:232) z tej funkcji, do przycisku przesy(cid:228)aj(cid:241)cego formularz trzeba
przypisa(cid:232) klas(cid:246) submit.
Na rysunku 4.7 wida(cid:232) dzia(cid:228)aj(cid:241)cy formularz Nowy wpis. Na razie nie zaj(cid:246)li(cid:264)my
si(cid:246) faktycznym zapisywaniem wprowadzonych danych — omówimy to
w rozdziale 5.
Ekran Ustawienia
Do tej pory nie utworzyli(cid:264)my przycisku umo(cid:276)liwiaj(cid:241)cego przej(cid:264)cie do
ekranu Ustawienia. Zrobimy to teraz, dodaj(cid:241)c przycisk do paska tytu(cid:228)o-
wego na g(cid:228)ównym ekranie. W tym celu wystarczy doda(cid:232) jedn(cid:241) lini(cid:246) kodu
HTML (na listingu wyró(cid:276)nion(cid:241) pogrubieniem):
/head
body
div id= home
div class= toolbar
h1 Kilo /h1
a class= button flip href= #settings Ustawienia /a
/div
ul class= edgetoedge
86
(cid:95)
Rozdzia(cid:293) 4. Animacje
Kup książkęPoleć książkę Rysunek 4.7. Klawiatura ekranowa w formularzu Nowy wpis
li class= arrow a href= #dates Terminarz /a /li
li class= arrow a href= #about O Kilo /a /li
/ul
/div
…pozosta(cid:225)a cz(cid:266)(cid:286)(cid:252) dokumentu HTML nie zosta(cid:225)a zamieszczona…
W tym miejscu dodajemy przycisk (rysunek 4.8). Zwró(cid:232) uwag(cid:246), (cid:276)e do
odsy(cid:228)acza przypisali(cid:264)my klas(cid:246) flip. Dzi(cid:246)ki temu przej(cid:264)ciu z ekranu
g(cid:228)ównego do ekranu Ustawienia b(cid:246)dzie towarzyszy(cid:228) efekt obrócenia wokó(cid:228)
osi pionowej. Dodatkowo, dla wzmocnienia efektu, strona jest lekko
skalowana podczas animacji. (cid:227)adnie, prawda?
Niestety ze wsparciem dla trójwymiarowych animacji w przegl(cid:241)-
darkach urz(cid:241)dze(cid:254) mobilnych bywa ró(cid:276)nie (dotyczy to równie(cid:276)
Androida). Z tego wzgl(cid:246)du na niektórych urz(cid:241)dzeniach wszelkie
obroty, przej(cid:264)cia i inne animacje 3D mog(cid:241) zosta(cid:232) zast(cid:241)pione dwu-
wymiarowymi odpowiednikami.
Ekran Ustawienia
(cid:95)
87
Kup książkęPoleć książkę Rysunek 4.8. Przycisk Ustawienia umieszczony w pasku na ekranie g(cid:228)ównym
Kod ekranu Ustawienia (listing 4.6) jest bardzo podobny do tego, czym zaj-
mowali(cid:264)my si(cid:246) przed chwil(cid:241), czyli ekranu Nowy wpis. Znajduje si(cid:246) tu jedno
pole tekstowe wi(cid:246)cej, niektóre atrybuty s(cid:241) pomini(cid:246)te, niektóre maj(cid:241) inne
warto(cid:264)ci, ale sama koncepcja pozostaje podobna. Do dokumentu HTML
dopisz kod z poni(cid:276)szego listingu, tak jak to robi(cid:228)e(cid:264) dla innych ekranów.
Listing 4.6. Kod HTML ekranu Ustawienia
div id= settings
div class= toolbar
h1 Ustawienia /h1
a class= button cancel href= # Anuluj /a
/div
form method= post
ul class= rounded
li input placeholder= Wiek type= text name= age id= age / /li
li input placeholder= Waga type= text name= weight id= weight / /li
li input placeholder= Limit kalorii type= text name= budget
(cid:180)id= budget / /li
88
(cid:95)
Rozdzia(cid:293) 4. Animacje
Kup książkęPoleć książkę li input type= submit class= submit name= action value= Zapisz zmiany
(cid:180)/ /li
/ul
/form
/div
Podobnie jak w przypadku formularza Nowy wpis, w formularzu Ustawienia
te(cid:276) nie ma jeszcze mo(cid:276)liwo(cid:264)ci zapisania wprowadzonych danych (patrz rysu-
nek 4.9). Problem ten rozwi(cid:241)(cid:276)emy w kolejnym rozdziale.
Rysunek 4.9. Ekran Ustawienia
Integracja ca(cid:293)o(cid:316)ci
I to by by(cid:228)o na tyle. Wystarczy(cid:228)o napisa(cid:232) niewiele ponad sto linii kodu HTML,
by otrzyma(cid:232) pi(cid:246)cioekranow(cid:241) aplikacj(cid:246) wygl(cid:241)daj(cid:241)c(cid:241) i zachowuj(cid:241)c(cid:241) si(cid:246) jak na-
tywna. Zastosowali(cid:264)my w niej trzy ró(cid:276)ne efekty przej(cid:264)cia mi(cid:246)dzy ekranami.
Pe(cid:228)ny listing aplikacji znajdziesz na listingu 4.7. Nie wygl(cid:241)da to (cid:274)le, prawda?
Integracja ca(cid:293)o(cid:316)ci
(cid:95)
89
Kup książkęPoleć książkę Listing 4.7. Kompletny listing pi(cid:246)cioekranowej aplikacji
html
head
meta charset= utf-8 /
title Kilo /title
link type= text/css rel= stylesheet media= screen
href= jqtouch/themes/css/jqtouch.css /
script type= text/javascript src= jqtouch/src/lib/jquery-
1.7.min.js /script
script type= text/javascript src= jqtouch/src/jqtouch-
jquery.min.js /script
script type= text/javascript src= jqtouch/src/jqtouch.min.js /script
script type= text/javascript
var jQT = $.jQTouch({
icon: kilo.png
});
/script
/head
body
div id= home
div class= toolbar
h1 Kilo /h1
a class= button flip href= #settings Ustawienia /a
/div
ul class= edgetoedge
li class= arrow a href= #dates Terminarz /a /li
li class= arrow a href= #about O Kilo /a /li
/ul
/div
div id= about
div class= toolbar
h1 O Kilo /h1
a class= button back href= # Wstecz /a
/div
div
p Aplikacja Kilo pomaga stosowa(cid:202) dowoln(cid:200) diet(cid:218). /p
/div
/div
div id= dates
div class= toolbar
h1 Terminarz /h1
a class= button back href= # Wstecz /a
/div
ul class= edgetoedge
li class= arrow a id= 0 href= #date Dzisiaj /a /li
li class= arrow a id= 1 href= #date Wczoraj /a /li
li class= arrow a id= 2 href= #date 2 dni temu /a /li
li class= arrow a id= 3 href= #date 3 dni temu /a /li
li class= arrow a id= 4 href= #date 4 dni temu /a /li
li class= arrow a id= 5 href= #date 5 dni temu /a /li
/ul
/div
90
(cid:95)
Rozdzia(cid:293) 4. Animacje
Kup książkęPoleć książkę div id= date
div class= toolbar
h1 Dzie(cid:241) /h1
a class= button back href= # Wstecz /a
a class= button slideup href= #createEntry + /a
/div
ul class= edgetoedge
li id= entryTemplate class= entry style= display:none
span class= label Etykieta /span
span class= calories 000 /span
span class= delete Usu(cid:241) /span
/li
/ul
/div
div id= createEntry
div class= toolbar
h1 Nowy wpis /h1
a class= button cancel href= # Anuluj /a
/div
form method= post
ul class= rounded
li input type= text placeholder= Posi(cid:239)ek name= food id= food
(cid:180)autocapitalize= off autocorrect= off autocomplete= off / /li
li input type= text placeholder= Kalorie name= calories
(cid:180)id= calories autocapitalize= off autocorrect= off
(cid:180)autocomplete= off / /li
li input type= submit class= submit name= action
(cid:180)value= Zapisz / /li
/ul
/form
/div
div id= settings
div class= toolbar
h1 Ustawienia /h1
a class= button cancel href= # Anuluj /a
/div
form method= post
ul class= rounded
li input placeholder= Wiek type= text name= age id= age / /li
li input placeholder= Waga type= text name= weight id= weight
(cid:180)/ /li
li input placeholder= Limit kalorii type= text name= budget
(cid:180)id= budget
(cid:180)/ /li
li input type= submit class= submit name= action value= Zapisz
(cid:180)zmiany / /li
/ul
/form
/div
/body
/html
Integracja ca(cid:293)o(cid:316)ci
(cid:95)
91
Kup książkęPoleć książkę Dostosowywanie biblioteki jQTouch
Domy(cid:264)lne zachowanie jQTouch mo(cid:276)esz dostosowa(cid:232) do w(cid:228)asnych potrzeb,
przekazuj(cid:241)c w konstruktorze zestaw w(cid:228)a(cid:264)ciwo(cid:264)ci. W omawianym przy-
k(cid:228)adzie skorzystali(cid:264)my tylko z jednej — icon — ale dost(cid:246)pnych jest znacz-
nie wi(cid:246)cej. Z ca(cid:228)(cid:241) pewno(cid:264)ci(cid:241) warto si(cid:246) z nimi zapozna(cid:232) (tabela 4.1).
Tabela 4.1. Opcje dostosowywania jQTouch
W(cid:293)a(cid:316)ciwo(cid:316)(cid:235)
Domy(cid:316)lna
warto(cid:316)(cid:235)
Oczekiwane warto(cid:316)ci
Uwagi
addGlossToIcon
true
true albo false
backSelector
.back,
.cancel,
.goback
Dowolny poprawny selektor
CSS; poszczególne warto(cid:316)ci
oddzielane przecinkami
cacheGetRequests
true
true albo false
cubeSelector
.cube
dissolveSelector
.dissolve
fadeSelector
.fade
fixedViewport
true
flipSelector
.flip
Dowolny poprawny selektor
CSS; poszczególne warto(cid:316)ci
oddzielane przecinkami
Dowolny poprawny selektor
CSS; poszczególne warto(cid:316)ci
oddzielane przecinkami
Dowolny poprawny selektor
CSS; poszczególne warto(cid:316)ci
oddzielane przecinkami
true albo false
Dowolny poprawny selektor
CSS; poszczególne warto(cid:316)ci
oddzielane przecinkami
92
(cid:95)
Rozdzia(cid:293) 4. Animacje
Je(cid:316)li jest ustawione na true,
do ikony na ekranie
domowym zostanie dodana
po(cid:316)wiata (dzia(cid:293)a w iOS,
ale nie w Androidzie)
Definiuje elementy, które po
klikni(cid:253)ciu (b(cid:233)d(cid:346) pukni(cid:253)ciu)
maj(cid:233) wyzwala(cid:235) zachowanie
powrotu polegaj(cid:233)ce
na usuni(cid:253)ciu bie(cid:348)(cid:233)cego
ekranu z zastosowaniem
przeciwnej animacji i
usuni(cid:253)cie go z historii
Je(cid:316)li jest ustawione na true,
wszystkie (cid:348)(cid:233)dania GET s(cid:233)
cachowane, wi(cid:253)c kolejne
wywo(cid:293)ania korzystaj(cid:233)
z pobranych ju(cid:348) danych
Definiuje elementy, które
wyzwalaj(cid:233) animacj(cid:253) „cube”
podczas zmiany ekranów
Definiuje elementy, które
wyzwalaj(cid:233) animacj(cid:253) „dissolve”
podczas zmiany ekranów
Definiuje elementy, które
wyzwalaj(cid:233) animacj(cid:253) „fade”
podczas zmiany ekranów
Ustawione na true blokuje
mo(cid:348)liwo(cid:316)(cid:235) skalowania strony
Definiuje elementy, które
wyzwalaj(cid:233) animacj(cid:253) „flip”
podczas zmiany ekranów
Kup książkęPoleć książkę Tabela 4.1. Opcje dostosowywania jQTouch — ci(cid:241)g dalszy
W(cid:293)a(cid:316)ciwo(cid:316)(cid:235)
Domy(cid:316)lna
warto(cid:316)(cid:235)
formSelector
form
fullScreen
true
Oczekiwane warto(cid:316)ci
Uwagi
Dowolny poprawny selektor
CSS; poszczególne warto(cid:316)ci
oddzielane przecinkami
true albo false
Definiuje elementy, które
powinny odbiera(cid:235) zdarzenie
onsubmit
Dzia(cid:293)a tylko w iOS. Je(cid:316)li jest
ustawione na true i aplikacja
jest uruchamiana z ekranu
domowego, zostanie otwarta
w trybie pe(cid:293)noekranowym.
Ta opcja nie dzia(cid:293)a, je(cid:316)li aplikacja
jest uruchamiana z poziomu
przegl(cid:233)darki Mobile Safari
Dzia(cid:293)a tylko w iOS. Nazwa
klasy, która zostanie
zastosowana do sekcji body
po uruchomieniu aplikacji
w trybie pe(cid:293)noekranowym.
Dzi(cid:253)ki temu mo(cid:348)na
zdefiniowa(cid:235) style stosowane
tylko w tym przypadku
Ikona aplikacji umieszczana
na ekranie domowym. Ten
obraz zostanie wy(cid:316)wietlony po
dodaniu do ekranu domowego
zak(cid:293)adki do aplikacji
Definiuje elementy, które
wyzwalaj(cid:233) animacj(cid:253) „pop”
podczas zmiany ekranów
Definiuje obrazy, które
maj(cid:233) zosta(cid:235) pobrane
przed za(cid:293)adowaniem
strony (na przyk(cid:293)ad:
[ images/link_over.png ,
images/link_select.png ])
Definiuje elementy, które
wyzwalaj(cid:233) animacj(cid:253) „slide in”
podczas zmiany ekranów
Definiuje elementy, które
wyzwalaj(cid:233) animacj(cid:253) „slide up”
podczas zmiany ekranów
fullScreenClass
fullscreen
(cid:293)a(cid:295)cuch tekstowy
icon
null
null b(cid:233)d(cid:346) wzgl(cid:253)dna lub
bezwzgl(cid:253)dna (cid:316)cie(cid:348)ka do
pliku PNG
popSelector
.pop
preloadImages
false
Dowolny poprawny selektor
CSS; poszczególne warto(cid:316)ci
oddzielane przecinkami
Tablica (cid:316)cie(cid:348)ek do obrazów
slideInSelector
ul li a
slideupSelector
.slideup
Dowolny poprawny selektor
CSS; poszczególne warto(cid:316)ci
oddzielane przecinkami
Dowolny poprawny selektor
CSS; poszczególne warto(cid:316)ci
oddzielane przecinkami
Dostosowywanie biblioteki jQTouch
(cid:95)
93
Kup książkęPoleć książkę Tabela 4.1. Opcje dostosowywania jQTouch — ci(cid:241)g dalszy
W(cid:293)a(cid:316)ciwo(cid:316)(cid:235)
Domy(cid:316)lna
warto(cid:316)(cid:235)
startupScreen
Null
statusBar
default
default, black-
translucent, black
submitSelector
.submit
swapSelector
.swap
useAnimations
true
Dowolny poprawny selektor
CSS; poszczególne warto(cid:316)ci
oddzielane przecinkami
Dowolny poprawny selektor
CSS; poszczególne warto(cid:316)ci
oddzielane przecinkami
true albo false
Oczekiwane warto(cid:316)ci
Uwagi
null b(cid:233)d(cid:346) wzgl(cid:253)dna lub
bezwzgl(cid:253)dna (cid:316)cie(cid:348)ka do
pliku obrazu
Dzia(cid:293)a tylko w iOS.
Wzgl(cid:253)dna lub bezwzgl(cid:253)dna
(cid:316)cie(cid:348)ka do pliku z obrazem
startowym (320×460
pikseli) dla pe(cid:293)noekranowych
aplikacji. Je(cid:316)li opcja statusBar
jest ustawiona na
black-translucent, obraz
powinien mie(cid:235) wymiary
320×480 pikseli.
Dzia(cid:293)a tylko w iOS. Definiuje
wygl(cid:233)d 20-pikselowego paska
stanu znajduj(cid:233)cego si(cid:253) na
górze okna aplikacji dzia(cid:293)aj(cid:233)cej
w trybie pe(cid:293)noekranowym
Selektor elementu, który ma
przesy(cid:293)a(cid:235) nadrz(cid:253)dny formularz
(i zamyka(cid:235) panel klawiatury
ekranowej)
Definiuje elementy, które
wyzwalaj(cid:233) animacj(cid:253) „swap”
podczas zmiany ekranów
Ustawienie na false powoduje
wy(cid:293)(cid:233)czenie wszystkich animacji
Czego si(cid:253) nauczy(cid:293)e(cid:316)?
Z tego rozdzia(cid:228)u dowiedzia(cid:228)e(cid:264) si(cid:246), jak dzi(cid:246)ki bibliotece jQTouch doda(cid:232) do
aplikacji internetowej animacje charakterystyczne dla aplikacji natywnych.
W kolejnym rozdziale nauczysz si(cid:246) korzysta(cid:232) z mechanizmu lokalnego
sk(cid:228)adowania danych oraz poznasz mo(cid:276)liwo(cid:264)ci baz danych dzia(cid:228)aj(cid:241)cych po
stronie klienta, by zapisywa(cid:232) dane wymagane przez tworzone aplikacje.
94
(cid:95)
Rozdzia(cid:293) 4. Animacje
Kup książkęPoleć książkę Skorowidz
z podwy(cid:276)szonymi
uprawnieniami, 142
Asynchronous JavaScript and XML,
Patrz: Ajax
atrybut, 17
autocapitalize, 86
autocomplete, 86
autocorrect, 86
class, 20, 86
href, 77
id, 20, 86
name, 85
onclick, 25
placeholder, 85
type, 85
B
bada, 142
baza danych, 104
maksymalny rozmiar, 105
nazwa, 105
SQLite, 102
wersja, 105
bia(cid:228)a lista, 126
biblioteka
cordova.js, 150
jQTouch, Patrz: jQTouch
jQuery, Patrz: jQuery
wurfl-php, 177, 178, 179
Zepto, Patrz: Zepto
Bit Rate Throttling Media Services,
58
BlackBerry, 142
blok div, 31
A
A List Apart, 72
adres URL, 44
ADT, 144, 145
Ajax, 49
akapit, 16
akcelerometr, 141, 162
Android, 14, 15, 36, 142
Android Developer Tools, Patrz: ADT
Android SDK, 143, 144, 173
animacja
cube, 92
dissolve, 92
fade, 92
flip, 92
pop, 93
przeciwna, 92
slide in, 93
slide up, 93
swap, 94
trójwymiarowa, 87
wy(cid:228)(cid:241)czenie, 94
aplikacja
debugowanie, Patrz: debugowanie
dystrybucja, 167, 172
dzia(cid:228)aj(cid:241)ca offline, 121, 126, 132, 141
internetowa, 13, 14, 141, 142
kompilowanie, Patrz:
kompilowanie
natywna, 13, 14, 27, 141, 142
numer wersji, 168
podpisywanie, 169
pracuj(cid:241)cych offline, 136
ustawienia, 97
183
Kup książkęPoleć książkę ekran
domowy, 72, 93, 141
przewijanie, 75
element
html, 17
potomny, 16
title, 17
ukrywanie, 42
ul, 37, 41, 42, 46
emacs, 18
emfaza, 17
F
font
Droid, 37
Roboto, 37
formularz, 85, 86, 97, 106
kontrolka, 85
nadrz(cid:246)dny, 94
funkcja
alert, 153
ALTER TABLE, 155
bind, 101
errorHandler, 109
executeSql, 110
goBack, 98
gt, 112
haszuj(cid:241)ca, 135
header, 133
hijackLinks, 59
jako parametr innej funkcji, 55
loadPage, 62
obs(cid:228)ugi b(cid:228)(cid:246)du, 109
openDatabase, 104, 105
przesy(cid:228)ania, 86
setTimeout, 58
transaction, 110
url.match, 64
uzupe(cid:228)niania automatycznego, 86
val, 97
b(cid:228)(cid:241)d, 108, 118, 137, 139, 153
CONSTRAINT_ERR, 119
DATABASE_ERR, 119
QUOTA_ERR, 119
SYNTAX_ERR, 119
TIMEOUT_ERR, 119
TOO_LARGE_ERR, 119
UNKNOWN_ERR, 119
VERSION_ERR, 119
body, Patrz: cia(cid:228)o
C
Cascading Style Sheet, Patrz: CSS
chrome, 19
cia(cid:228)o, 17
ciasteczka, 95
cie(cid:254), 40
Crockford Douglas, 55
CSS, 15, 19, 21, 27, 76
Sprite, 72
D
data, 100, 101
debugowanie, 109, 136
definicja
max-width, 34
min-width, 34
deklaracja, 19
Document Object Model, Patrz: DOM
DOM, 25
manipulowanie struktur(cid:241), 24
domy(cid:264)lne zachowanie (cid:228)(cid:241)cza, 54
dyrektywa AddType, 123
dziecko, 16
d(cid:274)wi(cid:246)k, 141, 151
E
E Text Editor, 18
Eclipse, 143
edytor tekstu, 18
184
(cid:95)
Skorowidz
Kup książkęPoleć książkę G
gedit, 18
geolokalizacja, 155
Google Chart Tools, 172
Google Play, 170
gradient, 40
H
head, Patrz: nag(cid:228)ówek
hiper(cid:228)(cid:241)cze, Patrz: odsy(cid:228)acz
HTML, 15
I
IDE, 143
identyfikator, 21, 37, 86
ikona, 72
instalowanie, 14
instrukcja steruj(cid:241)ca, 23
Integrated Development
Environment, Patrz: IDE
interfejs
API, 102, 118, 142
API WURFL, 34
u(cid:276)ytkownika, 13, 15, 36
Internet Explorer, 34, 45
iPhone, 142
J
JavaScript, 13, 14, 24, 49, 55, 137
j(cid:246)zyk
skryptowy, 23, 27
jQTouch, 75, 77, 78, 86, 92, 99
konstruktor, 97
jQuery, 25, 26, 45, 46, 57, 59, 70, 75,
78, 97, 112
K
kamera, 141
Kanedy David, 75
kaskadowy arkusz stylów, Patrz: CSS
klasa, 21
arrow, 77
back, 77, 84
button, 77
cancel, 84
clicked, 70, 71
edgetoedge, 77
flip, 87
hide, 42, 46
slideup, 83
submit, 86
toolbar, 77
klawiatura
ekranowa, 86, 94
klikni(cid:246)cie, 71
klucz, 169
kod QR, 172
kolor, 40
kompilowanie, 14, 169
konsola
JavaScriptu, 137
logów, 136
kotwica, 17
kraw(cid:246)d(cid:274) szeroko(cid:264)(cid:232), 44
kwerenda, 105, 152
CREATE TABLE, 105
L
link, Patrz: odsy(cid:228)acz
Linux, 18, 29, 58, 131
lista, 16
bia(cid:228)a, 126
nienumerowana, 77, 85
nieuporz(cid:241)dkowana, 16
wypunktowana, Patrz: lista
nienumerowana
localStorage, 95, 96, 97
Skorowidz
(cid:95)
185
Kup książkęPoleć książkę PhoneGap, 15, 141, 146, 151
PhoneGap Build, 143
PHP, 27, 122, 131
plik
htaccess, 124
manifestu, 121, 122, 125, 130, 132,
139, 167
obrazu, 44
polecenie ipfw, 58
po(cid:264)wiata, 92
potomek, 77
programowanie, 14
przegl(cid:241)darka, 14, 15, 96
Chrome, 19
desktopowa, 35, 45
Internet Explorer,
Patrz: Internet Explorer
Mobile Safari, 86, 93
pasek tytu(cid:228)owy, 17
wykrywanie, 177
przesuni(cid:246)cie
w pionie, 40
w poziomie, 40
przycisk, 42, 43, 46, 71, 83
wstecz, 64, 77
pseudoklasa, 42
active, 70
hover, 70
Qt, 142
Q
R
Responsive Web Design, 32
RhoMobile, 142
rodzic, 16
rozmycie, 40
M
magazyn kluczy, 169
manipulowanie struktur(cid:241) DOM,
Patrz: DOM manipulowanie
struktur(cid:241)
Marcotte Ethan, 32
Microsoft Word, 18
model freemium, 15
N
nag(cid:228)ówek, 16, 17, 37
nano, 18
Nitobi, 141
Notepad2, 18
O
obiekt
jQTouch, 78
klikalny, 69
WebView, 149
window, 96
zdarzenia, 55
obraz
startowy, 94
wczesne (cid:228)adowanie, 70
obs(cid:228)uga b(cid:228)(cid:246)dów, 108, 109, 137, 139,
153
odsy(cid:228)acz, 17, 52, 77
lokalny, 64
przechwytywanie, 64
okno modalne, 153
operator logiczny, 61
ostrze(cid:276)enie, 151, 153
P
padding, 38
para klucz-warto(cid:264)(cid:232), 95, 96
pasek stanu, 94
p(cid:246)tla for, 23
186
(cid:95)
Skorowidz
Kup książkęPoleć książkę S
sekcja
body, 17, 19, 93
CACHE MANIFEST, 127
FALLBACK, 126, 127, 130
head, 21
NETWORK, 126, 130
selektor, 19, 20, 21, 37, 42
serwer, 27
Apache, 29, 122, 124
IIS, 123, 131
lokalny, 28
sessionStorage, 95, 96, 100
s(cid:228)owo kluczowe, 20
this, 101, 105
SQL, 103
strona
automatyczne przewijanie
do pocz(cid:241)tku, 62
g(cid:228)ówna witryny, 54
prze(cid:228)adowywanie, 49
skalowanie, 35, 92
szeroko(cid:264)(cid:232), 35, 45
tytu(cid:228), 59, 61
Sublime Text, 18
Symbian, 142
symulowanie rzeczywistego
obci(cid:241)(cid:276)enia sieci, 58
system operacyjny, 177
T
warto(cid:264)ci statusu trybu offline, 138
tabela, 103, 104
tablica, 23, 66
Text Wrangler, 18
TextEdit, 18
TextMate, 18
Titanium Mobile, 142
transakcja, 103, 105
tryb
offline, 15
pe(cid:228)noekranowy, 93, 94
vi, 18
V
W
warto(cid:264)(cid:232), 19
Web SQL Database, 95, 102, 118
Web Storage, 95
webOS, 142
wibracja, 141, 151, 155
Windows Phone, 142
Wireless Universal Resource File,
Patrz: WURFL
w(cid:228)a(cid:264)ciwo(cid:264)(cid:232), 19
addGlossToIcon, 92
backSelector, 92
border-width, 43
cacheGetRequests, 92
cubeSelector, 92
dissolveSelector, 92
fadeSelector, 92
fixedViewport, 92
flipSelector, 92
formSelector, 93
fullScreen, 93
fullScreenClass, 93
icon, 78, 93
innerWidth, 45
popSelector, 93
preloadImages, 93
slideInSelector, 93
slideupSelector, 93
startupScreen, 94
statusBar, 94
submitSelector, 94
swapSelector, 94
text-shadow, 40
useAnimations, 94
webkit-border-image, 43, 72
webkit-border-radius, 41
webkit-gradient, 40
WordPad, 18
Skorowidz
(cid:95)
187
Kup książkęPoleć książkę wska(cid:274)nik post(cid:246)pu, 56, 57, 58, 60
WURFL, 34, 177
wyra(cid:276)enie regularne, 64
Z
zak(cid:228)adka, 72, 93
zaokr(cid:241)glone wierzcho(cid:228)ki, 40
zasada DRY, 32, 33
zdarzenie
click, 101
klikni(cid:246)cie, Patrz: klikni(cid:246)cie
onsubmit, 93
pageAnimationStart, 99
przesy(cid:228)ania formularza, 106
ready, 45, 46
touchend, 101
Zepro, 78
Zepto, 78
zintegrowane (cid:264)rodowisko
programistyczne, Patrz: IDE
zmienna, 23
globalna, 66, 104
znacznik, 21
a, 17, 42
blokowy, 16
h1, 16
liniowy, 17
listy nienumerowanej, 77
listy nieuporz(cid:241)dkowanej, 16
meta viewport, 35
otwieraj(cid:241)cy, 16, 17
p, 16
zamykaj(cid:241)cy, 16
znak ucieczki, 134
(cid:347)
(cid:276)(cid:241)danie GET, 92
188
(cid:95)
Skorowidz
Kup książkęPoleć książkę
Pobierz darmowy fragment (pdf)
