Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00451 008299 10497469 na godz. na dobę w sumie
Android. Tworzenie aplikacji w oparciu o HTML, CSS i JavaScript - książka
Android. Tworzenie aplikacji w oparciu o HTML, CSS i JavaScript - książka
Autor: , Liczba stron: 192
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-4968-6 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> programowanie mobilne >> android
Porównaj ceny (książka, ebook, audiobook).

Twórz natywne aplikacje za pomocą standardowych technologii internetowych

Jeśli znasz HTML, CSS i JavaScript, jesteś gotowy na tworzenie aplikacji dla Androida. Ten praktyczny podręcznik pomoże Ci wejść w świat aplikacji przeznaczonych dla platformy Android, tworzonych w oparciu o otwarte standardy internetowe - przede wszystkim HTML5 - oraz dodatkowe narzędzia, takie jak choćby PhoneGap.

Dowiesz się, jak budować aplikacje internetowe i jak wykorzystać bezpłatny framework Adobe PhoneGap do przekonwertowania ich na natywne aplikacje dla Androida. Na własnej skórze przekonasz się, że tak tworzone aplikacje są przyszłością mobilnego świata. Dzięki tej książce będziesz tworzyć elastyczne rozwiązania dla szerokiego grona odbiorców.

Z tą książką:

Stwórz aplikację, opublikuj ją w Google Play i odnieś sukces!

Znajdź podobne książki Ostatnio czytane w tej kategorii

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)

Gdzie kupić całą publikację:

Android. Tworzenie aplikacji w oparciu o HTML, CSS i JavaScript
Autor:
,

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: