Darmowy fragment publikacji:
Tytuł oryginału: ASP.NET MVC 4. Programowanie
Tłumaczenie: Robert Górczyński
ISBN: 978-83-246-6644-7
© 2013 Helion S.A.
Authorized Polish translation of the English edition Programming ASP.NET MVC 4, ISBN 9781449320317
© 2012 Jess Chadwick, Todd Snyder, Hrusikesh Panda
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)
Drogi Czytelniku!
Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres
http://helion.pl/user/opinie/aspm4p
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ļci
Wprowadzenie ........................................................................................................................11
Czýļë I. Rozkrýcamy siý .......................................................................................................... 15
Opracowane przez Microsoft platformy tworzenia aplikacji sieciowych
Model
Widok
Kontroler
Active Server Pages (ASP)
ASP.NET Web Forms
ASP.NET MVC
Architektura MVC
Co nowego w ASP.NET MVC 4?
Wprowadzenie do aplikacji EBuy
Instalacja ASP.NET MVC
Tworzenie aplikacji ASP.NET MVC
Rozdziaĥ 1. Podstawy ASP.NET MVC .......................................................................................17
17
18
18
18
19
20
20
20
20
22
23
23
23
27
28
28
29
31
32
32
33
36
36
37
38
39
40
41
43
45
46
Szablony projektów
Konwencja przed konfiguracjñ
Uruchamianie aplikacji
Routing
Konfiguracja tras
Kontrolery
Akcje kontrolera
Obiekt ActionResult
Parametry akcji
Filtry akcji
Widoki
Wyszukiwanie widoków
Poznaj Razor
OdróĔnianie kodu od znaczników
Ukäady graficzne
Widoki czöĈciowe
WyĈwietlanie danych
Metody pomocnicze HTML i URL
Modele
3
Poleć książkęKup książkęZebranie wszystkich komponentów w caäoĈè
Trasa
Kontroler
Widok
Uwierzytelnianie
AccountController
Podsumowanie
47
47
47
49
52
54
55
Wszystko kröci siö wokóä ASP.NET
Narzödzia, jözyki i API
Moduäy i procedury obsäugi HTTP
Zarzñdzanie stanem
WdraĔanie i Ĉrodowisko uruchomieniowe
Rozdziaĥ 2. ASP.NET MVC dla programistów formularzy sieciowych .................................57
57
58
58
58
59
59
60
60
61
62
66
66
67
Oddzielanie logiki aplikacji od logiki widoku
Adresy URL i routing
Zarzñdzanie stanem
Generowanie kodu HTML
Tworzenie widoku ASP.NET MVC za pomocñ skäadni Web Forms
Säowo ostrzeĔenia
Podsumowanie
Wiöcej róĔnic niĔ podobieþstw
Rozdziaĥ 3. Praca z danymi ....................................................................................................69
69
71
71
72
Tworzenie formularza
Obsäuga akcji POST formularza
Zapis danych w bazie danych
Technika Code First — zasada „konwencja przed konfiguracjñ”
Tworzenie warstwy dostöpu do danych z uĔyciem techniki Code First
w Entity Framework
Weryfikacja danych
OkreĈlanie reguä biznesowych za pomocñ adnotacji danych
WyĈwietlanie komunikatów o bäödach z procesu weryfikacji danych
Podsumowanie
72
73
74
77
80
Rozdziaĥ 4. Programowanie po stronie klienta .................................................................... 81
81
83
86
88
89
91
95
Praca z jözykiem JavaScript
Selektory
Udzielanie odpowiedzi na zdarzenia
Manipulacje modelem DOM
AJAX
Weryfikacja danych po stronie klienta
Podsumowanie
4
_
Spis treļci
Poleć książkęKup książkęCzýļë II. Kolejny poziom .........................................................................................................97
Wzorzec MVC
Architektura aplikacji sieciowej
Zasada separacji zadaþ
MVC i platformy sieciowe
Rozdziaĥ 5. Architektura aplikacji sieciowej .........................................................................99
99
99
100
102
102
102
104
105
105
106
107
108
109
114
121
122
Architektura logiczna
Architektura logiczna aplikacji sieciowej ASP.NET MVC
Najlepsze praktyki w zakresie architektury logicznej
Architektura fizyczna
Przestrzeþ nazw projektu i nazwy podzespoäów
Opcje wdroĔenia
Najlepsze praktyki w zakresie architektury fizycznej
SOLID
Odwracanie sterowania
Reguäy dotyczñce architektury aplikacji
Nie powtarzaj siö
Podsumowanie
CzöĈciowe generowanie strony
Generowanie widoków czöĈciowych
Ponowne uĔywanie tej samej logiki zarówno w Ĕñdaniach AJAX, jak i pozostaäych
Wygenerowanie kodu JavaScript
Wygenerowanie danych JSON
ēñdanie danych JSON
Szablony po stronie klienta
Rozdziaĥ 6. Usprawnianie witryny poprzez uŜycie technologii AJAX ............................... 123
123
124
129
129
131
131
134
135
136
137
138
140
141
143
144
144
147
148
Udzielanie odpowiedzi na Ĕñdania AJAX
Udzielanie odpowiedzi na Ĕñdania JSON
Zastosowanie tej samej logiki w wielu akcjach kontrolera
Przekazywanie skomplikowanych obiektów JSON
Wybór äñcznika modelu
Efektywne wysyäanie i odbieranie danych JSON
JSONP
Wäñczanie Cross-Origin Resource Sharing
Wykonywanie Ĕñdaþ AJAX miödzy domenami
Wysyäanie danych do serwera
Podsumowanie
Rozdziaĥ 7. Platforma Web API ASP.NET ............................................................................. 149
149
151
151
152
153
Tworzenie usäugi danych
Rejestracja tras Web API
Wykorzystanie techniki „konwencja przed konfiguracjñ”
Nadpisanie konwencji
UĔycie API
Spis treļci
_
5
Poleć książkęKup książkęStronicowanie i pobieranie danych
Obsäuga wyjñtków
Media
Podsumowanie
155
156
158
161
Wzorce dostöpu do danych
Ogólny opis Entity Framework
Klasy POCO
UĔywanie wzorca repozytorium
Mapowanie obiektowo-relacyjne
Rozdziaĥ 8. Zaawansowane dane ....................................................................................... 163
163
163
164
166
168
169
169
171
171
173
176
178
183
Tworzenie warstwy dostöpu do danych
PodejĈcie Entity Framework Code First
Model domeny biznesowej aplikacji EBuy
Praca z kontekstem danych
Sortowanie, filtrowanie i stronicowanie danych
Podsumowanie
Wybór podejĈcia w zakresie dostöpu do danych
WspóäbieĔnoĈè w bazie danych
Tworzenie bezpiecznej aplikacji sieciowej
Obrona
Nigdy nie ufaj danym wejĈciowym
Wymuszanie stosowania reguäy najmniejszych uprawnieþ
Przyjmuj zaäoĔenie, Ĕe zewnötrzne systemy sñ niebezpieczne
Ogranicz moĔliwoĈci ataku
Wyäñcz niepotrzebne funkcje
Rozdziaĥ 9. Zapewnianie bezpieczeħstwa .......................................................................... 185
185
185
186
186
186
186
187
187
188
193
200
201
206
207
209
SQL Injection
Cross-Site Scripting
Cross-Site Request Forgery
Zabezpieczanie aplikacji intranetowej
Uwierzytelnianie formularzy
Zabezpieczanie aplikacji
Ochrona przed atakami
Podsumowanie
Funkcje mobilne platformy ASP.NET MVC 4
Wiöksza przyjaznoĈè aplikacji mobilnej
Rozdziaĥ 10. Programowanie na platformy mobilne ...........................................................211
211
213
214
215
218
223
224
Tworzenie widoku mobilnego dla aukcji
Rozpoczöcie pracy z jQuery Mobile
Usprawnianie widoku za pomocñ jQuery Mobile
Unikanie widoków biurkowych w witrynie mobilnej
Usprawnianie wersji mobilnej witryny
6
_
Spis treļci
Poleć książkęKup książkęTechnika Adaptive Rendering
Znacznik viewport
Wykrywanie funkcji mobilnych
Zapytania mediów CSS
Widoki dla konkretnych przeglñdarek internetowych
Tworzenie nowej aplikacji mobilnej zupeänie od poczñtku
Platforma jQuery Mobile
Szablon aplikacji mobilnej w ASP.NET MVC 4
UĔywanie szablonu aplikacji mobilnej w ASP.NET MVC 4
Podsumowanie
225
225
226
228
229
231
232
232
233
236
Czýļë III. Zagadnienia zaawansowane ...............................................................................237
Rozdziaĥ 11. Operacje na danych przeprowadzane równolegle,
Kontroler asynchroniczny
Asynchroniczna komunikacja w czasie rzeczywistym
Tworzenie kontrolera asynchronicznego
Kiedy uĔywaè kontrolera asynchronicznego?
asynchronicznie i w czasie rzeczywistym .......................................................239
239
240
242
242
242
243
244
245
246
247
250
252
Porównanie modeli aplikacji
Model HTTP polling
Model HTTP long polling
Zdarzenia wysyäane przez serwer
WebSocket
Usprawnianie komunikacji w czasie rzeczywistym
Konfiguracja i dostrajanie
Podsumowanie
Rodzaje buforowania
Techniki buforowania po stronie serwera
Buforowanie po stronie serwera
Buforowanie po stronie klienta
Rozdziaĥ 12. Buforowanie ....................................................................................................253
253
253
254
254
254
255
256
256
258
261
263
264
269
269
271
273
274
Buforowanie o zasiögu Ĕñdania
Buforowanie o zasiögu uĔytkownika
Buforowanie o zasiögu aplikacji
Bufor ASP.NET
Bufor danych wyjĈciowych
Buforowanie donut caching
Buforowanie donut hole caching
Buforowanie rozproszone
Dziaäanie bufora przeglñdarki internetowej
AppCache
Local Storage
Podsumowanie
Techniki buforowania po stronie klienta
Spis treļci
_
7
Poleć książkęKup książkęAnatomia strony
Najlepsze praktyki
Anatomia HttpRequest
Rozdziaĥ 13. Techniki optymalizacji po stronie klienta .......................................................275
275
276
277
278
278
280
282
283
283
285
286
286
287
289
289
290
293
294
297
Wykonuj mniejszñ liczbö Ĕñdaþ HTTP
UĔywaj CDN
Dodawaj nagäówek Expires lub Cache-Control
Komponenty skompresowane w formacie GZip
Umieszczaj arkusze stylów na poczñtku pliku
Umieszczaj skrypty na koþcu dokumentu
Korzystaj z zewnötrznych skryptów i arkuszy stylów
Zmniejszanie liczby zapytaþ DNS
Minimalizacja plików JavaScript i CSS
Unikaj przekierowaþ
Usuniöcie powielajñcych siö skryptów
Konfiguracja nagäówka ETag
Pomiar wydajnoĈci po stronie klienta
Wykorzystanie platformy ASP.NET MVC do pracy
Tworzenie paczek i minimalizacja
Podsumowanie
Wayfinding
Adresy URL i techniki SEO
Tworzenie tras
DomyĈlne parametry i opcjonalne trasy
Priorytet i kolejnoĈè tras
Routing do istniejñcych plików
Ignorowanie tras
Trasy typu Catch-All
Rozdziaĥ 14. Zaawansowany routing ..................................................................................299
299
301
302
303
305
305
305
306
307
309
310
313
314
318
Routing oparty na atrybutach
Rozszerzanie routingu
Mechanizm routingu
Narzödzie Glimpse i trasy
Ograniczenia trasy
Podsumowanie
Co platforma ASP.NET MVC oferuje standardowo?
Widoki czöĈciowe
Metody rozszerzajñce HtmlHelper czy wäasne metody?
Szablony Display i Editor
Html.RenderAction()
Rozdziaĥ 15. Ponownie uŜywane komponenty interfejsu uŜytkownika ........................... 319
319
319
319
320
320
321
321
323
327
Razor Single File Generator
Tworzenie wielokrotnie wykorzystywanych widoków ASP.NET MVC
Tworzenie wielokrotnie uĔywanych metod pomocniczych ASP.NET MVC
PrzejĈcie o krok dalej
8
_
Spis treļci
Poleć książkęKup książkęTesty jednostkowe dla widoków Razor
Podsumowanie
328
330
Czýļë IV. Kontrola jakoļci .................................................................................................... 331
Obsäuga bäödów na platformie ASP.NET MVC
Wäñczanie wäasnych bäödów
Obsäuga bäödów w akcjach kontrolerów
Definiowanie globalnych procedur obsäugi bäödów
Rozdziaĥ 16. Rejestrowanie informacji ................................................................................333
333
334
335
335
337
337
340
342
Rejestrowanie informacji i Ĉledzenie
Rejestrowanie informacji o bäödach
Monitorowanie stanu ASP.NET
Podsumowanie
Semantyka testowania
Poziomy zautomatyzowanego testowania
Röczne testowanie
Zautomatyzowane testowanie
Testy jednostkowe
SzybkoĈè (ang. fast)
Testy integracyjne
Testy akceptacyjne
Rozdziaĥ 17. Zautomatyzowane testowanie .......................................................................343
343
344
345
345
345
347
348
349
350
350
351
354
354
357
358
360
363
364
368
370
372
372
374
Co to jest projekt zautomatyzowanych testów?
Tworzenie projektu testowego w Visual Studio
Tworzenie i przeprowadzanie testu jednostkowego
Testowanie aplikacji ASP.NET MVC
Testowanie modelu
Test-Driven Development
Tworzenie przejrzystych, zautomatyzowanych testów
Testowanie kontrolerów
Refaktoring testów jednostkowych
Symulacja speänienia zaleĔnoĈci
Testowanie widoków
Tworzenie kodu äatwego do testowania
Podsumowanie
Test pokrycia
Mit 100 wyniku testu pokrycia
Tworzenie skryptów kompilacji
Rozdziaĥ 18. Automatyzacja kompilacji ..............................................................................375
376
376
376
377
378
Projekty Visual Studio sñ skryptami kompilacji!
Dodanie prostego zadania kompilacji
Przeprowadzanie kompilacji
MoĔliwoĈci sñ nieograniczone!
Spis treļci
_
9
Poleć książkęKup książkęAutomatyzacja kompilacji
Rodzaje zautomatyzowanej kompilacji
Definiowanie zautomatyzowanej kompilacji
Ciñgäa integracja
Wykrywanie problemów
Reguäy ciñgäej integracji
Podsumowanie
378
379
380
383
383
384
388
Czýļë V. Umieszczanie aplikacji sieciowej w internecie .....................................................389
Co trzeba wdroĔyè?
Podstawowe pliki witryny internetowej
TreĈè statyczna
Czego nie trzeba wdraĔaè?
Bazy danych oraz inne zewnötrzne zaleĔnoĈci
Jakie sñ wymagania aplikacji EBuy?
Rozdziaĥ 19. WdraŜanie ....................................................................................................... 391
391
391
394
394
395
396
396
397
397
399
403
403
404
404
406
Tworzenie konta Windows Azure
Tworzenie nowej witryny internetowej Windows Azure
Publikacja witryny internetowej Windows Azure poprzez system kontroli wersji
WdraĔanie na serwerze Internet Information Server
Przygotowania
Tworzenie i konfiguracja witryny internetowej na serwerze IIS
Publikowanie witryny z poziomu Visual Studio
WdraĔanie za poĈrednictwem Windows Azure
Podsumowanie
Dodatki .................................................................................................................................407
Dodatek A. Integracja platform ASP.NET MVC i Web Forms ..............................................409
Dodatek B. Wykorzystanie NuGet jako platformy .............................................................. 417
Dodatek C. Najlepsze praktyki .............................................................................................435
Dodatek D. Odniesienia — tematy, funkcje i scenariusze ................................................. 449
Skorowidz...................................................................................................................453
10
_
Spis treļci
Poleć książkęKup książkęROZDZIAĤ 10.
Programowanie na platformy mobilne
Sieè mobilna to oferujñce bardzo duĔe moĔliwoĈci medium dostarczania treĈci wiökszej grupie
uĔytkowników. Wraz ze zwiökszajñcñ siö liczbñ uĔywanych smartfonów i rozwojem sieci
mobilnej uwzglödnienie urzñdzeþ mobilnych podczas przygotowywania projektów staje siö
coraz waĔniejsze.
Najwiökszy problem podczas przygotowywania aplikacji do jej uĔywania w sieci mobilnej
polega na tym, Ĕe nie wszystkie urzñdzenia mobilne sñ tworzone w taki sam sposób. Poszcze-
gólne urzñdzenia majñ róĔne moĔliwoĈci sprzötowe i zainstalowane przeglñdarki internetowe,
a takĔe odmienne funkcje, np. w zakresie dotykowej obsäugi urzñdzenia itd. Przystosowanie
witryny internetowej do prawidäowego i spójnego dziaäania w róĔnych urzñdzeniach mobilnych
nie jest äatwym zadaniem.
W tym rozdziale dowiesz siö, jak uĔywaè funkcji oferowanych przez platformö ASP.NET
MVC — w szczególnoĈci nowych funkcji, które pojawiäy siö w wersji 4. platformy — w celu
zapewnienia prawidäowego i spójnego dziaäania witryny internetowej na maksymalnej liczbie
urzñdzeþ mobilnych. Przekonasz siö równieĔ, co zrobiè w sytuacji, gdy dla danego urzñdzenia
mobilnego nie moĔna zaoferowaè prawidäowej obsäugi witryny internetowej, którñ tworzysz.
Funkcje mobilne platformy ASP.NET MVC 4
Poczñwszy od wersji 3., platforma ASP.NET MVC oferuje zestaw funkcji uäatwiajñcych tworze-
nie mobilnych wersji witryn internetowych. Funkcje te zostaäy usprawnione w wersji 4. plat-
formy.
PoniĔsza lista przedstawia krótki opis funkcji pomagajñcych w tworzeniu wersji mobilnej
aplikacji sieciowej, wprowadzonych w ASP.NET MVC 4. W pozostaäej czöĈci rozdziaäu przeko-
nasz siö, jak wykorzystaè te funkcje w tworzonej aplikacji sieciowej.
Szablon aplikacji mobilnej w ASP.NET MVC 4
JeĔeli juĔ od samego poczñtku chcesz utworzyè jedynie mobilnñ wersjö aplikacji siecio-
wej, platforma ASP.NET MVC 4 oferuje szablon Mobile Application, który pozwala na
natychmiastowe przystñpienie do tworzenia wersji mobilnej aplikacji sieciowej. Podobnie
jak w przypadku szablonów zwykäych aplikacji MVC, w szablonie mobilnym platforma
umieszcza juĔ pewien kod odpowiedzialny za wygenerowanie widoków dla urzñdzeþ
mobilnych, przeprowadza konfiguracjö pakietów jQuery Mobile MVC NuGet oraz tworzy
szkielet aplikacji. Dokäadne omówienie szablonu aplikacji mobilnej znajdziesz w dalszej czöĈci
rozdziaäu, w podrozdziale zatytuäowanym „Szablon aplikacji mobilnej w ASP.NET MVC 4”.
211
Poleć książkęKup książkęTryby wyĈwietlania
Aby moĔna byäo jeszcze äatwiej dostosowaè aplikacjö sieciowñ do róĔnych urzñdzeþ, platfor-
ma ASP.NET MVC 4 oferuje tak zwane tryby wyĈwietlania — to funkcja odpowiedzialna za
wykrycie i przygotowanie odpowiedniego widoku dla poszczególnych urzñdzeþ.
Poszczególne urzñdzenia mobilne majñ róĔne rozdzielczoĈci ekranu, inne zachowanie
przeglñdarek internetowych, a nawet odmienne funkcje, które mogñ byè wykorzystane
przez aplikacje sieciowe. Zamiast próbowaè dopasowaè dany widok do maksymalnej licz-
by róĔnych urzñdzeþ, lepszym rozwiñzaniem jest umieszczenie poszczególnych zachowaþ
i funkcji w oddzielnych widokach przeznaczonych dla konkretnych urzñdzeþ.
ZaäóĔmy, Ĕe masz przygotowany widok o nazwie Index.cshtml, przeznaczony dla zwy-
käych urzñdzeþ biurkowych. Otrzymujesz zadanie przygotowania mobilnej wersji tego
widoku przeznaczonej do wyĈwietlania na smartfonach i tabletach. Dziöki uĔyciu trybów
wyĈwietlania moĔesz przygotowaè odpowiednie wersje widoku dla róĔnych urzñdzeþ,
np. Index.iPhone.cshtml i Index.iPad.cshtml, a nastöpnie podczas uruchamiania aplikacji za-
rejestrowaè je za pomocñ dostawcy widoku na platformie ASP.NET MVC 4. Opierajñc siö
na kryteriach filtrowania, platforma ASP.NET MVC 4 moĔe automatycznie wyszukaè
widok zawierajñcy odpowiedni przyrostek (iPhone lub iPad) i wyĈwietliè ten widok za-
miast standardowego, przeznaczonego dla urzñdzeþ biurkowych. (Zwróè uwagö, jak dla
widoków alternatywnych platforma ASP.NET MVC stosuje prostñ konwencjö nadawania
nazw plikom w postaci nazwa_widoku.urzñdzenie.rozszerzenie). W znajdujñcym siö w dalszej
czöĈci rozdziaäu podrozdziale zatytuäowanym „Widoki dla konkretnych przeglñdarek
internetowych” przekonasz siö, jak uĔyè tej funkcji w celu zapewnienia obsäugi róĔnych
urzñdzeþ.
Nadpisanie zwykäych widoków ich wersjami mobilnymi
Platforma ASP.NET MVC 4 wprowadziäa prosty mechanizm pozwalajñcy na nadpisanie
dowolnego widoku (wäñczajñc w to ukäady graficzne i widoki czöĈciowe) dla poszcze-
gólnych przeglñdarek internetowych, w tym takĔe dla przeglñdarek internetowych uĔy-
wanych w urzñdzeniach mobilnych. Aby dostarczyè widok przeznaczony dla urzñdzenia
mobilnego, konieczne jest utworzenie pliku widoku zawierajñcego w nazwie czäon .Mobile.
Na przykäad przygotowanie mobilnej wersji widoku Index wymaga utworzenia jego ko-
pii wraz z wymienionym wczeĈniej czäonem w nazwie (ViewsHomeIndex.Mobile.cshtml);
platforma ASP.NET automatycznie wygeneruje ten (zamiast biurkowego) widok w mobilnej
wersji przeglñdarki internetowej. Warto dodaè, Ĕe wprawdzie funkcja trybów wyĈwietlania
pozwala na wskazanie widoku dla konkretnej przeglñdarki internetowej w urzñdzeniu
mobilnym, ale odbywa siö to na ogólniejszym poziomie. Takie rozwiñzanie bödzie uĔyteczne,
jeĈli widoki sñ wystarczajñco ogólne, aby mogäy byè prawidäowo wyĈwietlane w róĔnych
mobilnych wersjach przeglñdarek internetowych. Tö funkcjö moĔesz równieĔ stosowaè,
jeĈli uĔywasz platformy takiej jak jQuery Mobile, która zapewnia spójne dziaäanie aplikacji
na wiökszoĈci platform mobilnych.
Platforma jQuery Mobile
Platforma jQuery Mobile przynosi aplikacjom sieciowym caäe bogactwo i uĔytecznoĈè bi-
bliotek jQuery oraz jQuery UI. Zamiast zmagaè siö z niespójnoĈciami dziaäania przeglñ-
darek internetowych w róĔnych urzñdzeniach mobilnych, moĔesz po prostu utworzyè
jednñ aplikacjö sieciowñ, która bödzie dziaäaè we wszystkich urzñdzeniach mobilnych.
Platforma ta oferuje korzyĈci wynikajñce z moĔliwoĈci stosowania technik progresyw-
nych usprawnieþ i zapewnia elastyczny projekt, dziöki któremu starsze urzñdzenia nadal
212
_
Rozdziaĥ 10. Programowanie na platformy mobilne
Poleć książkęKup książkęotrzymujñ funkcjonalnñ (choè niekoniecznie äadnñ i bogatñ w funkcje) aplikacjö, podczas
gdy nowe urzñdzenia korzystajñ z peäni moĔliwoĈci dostarczanych przez funkcje jözyka
HTML5. Platforma jQuery Mobile doskonale obsäuguje motywy, co pozwala na utworze-
nie niepowtarzalnej witryny bez koniecznoĈci rezygnowania z zalet wynikajñcych z pro-
gresywnych uaktualnieþ. W rozdziale tym przekonasz siö, jak dziöki platformie jQuery
Mobile moĔna przenieĈè aplikacjö na kolejny poziom.
Wiýksza przyjaznoļë aplikacji mobilnej
Tematyka zwiñzana z programowaniem na platformy mobilne jest obszerna i obejmuje wiele
aspektów, które twórca witryny internetowej musi uwzglödniè, aby utworzyè tego rodzaju
witrynö. Prawdopodobnie najwaĔniejszym aspektem jest najlepszy sposób dostarczenia in-
formacji uĔytkownikom oraz interakcja z uĔytkownikami.
WeĒ pod uwagö aplikacjö sieciowñ dla urzñdzenia biurkowego, w którym okno przeglñdarki
internetowej jest wyĈwietlone na duĔym ekranie, a uĔytkownik ma do dyspozycji szybkie i nie-
zawodne poäñczenie internetowe, natomiast interakcjö z aplikacjñ sieciowñ prowadzi za po-
mocñ klawiatury i myszy. Z kolei aplikacje mobilne z reguäy sñ wyĈwietlane na niewielkich
ekranach, internet nie zawsze jest szybki i niezawodny, natomiast do wprowadzania danych
säuĔy najczöĈciej piórko bñdĒ kilka palców.
Wymienione ograniczenia niewñtpliwie prowadzñ do zmniejszenia iloĈci dostarczanej treĈci
oraz liczby oferowanych funkcji w porównaniu z aplikacjami sieciowymi przeznaczonymi
dla przeglñdarek internetowych dziaäajñcych w urzñdzeniach biurkowych. Jednak aplikacje
mobilne dostarczajñ pewnych moĔliwoĈci, które zazwyczaj nie istniejñ w tradycyjnych aplika-
cjach sieciowych; sñ to np. obsäuga danych dotyczñcych geograficznego poäoĔenia urzñdzenia
mobilnego, wiöksze moĔliwoĈci komunikacji, obsäuga komunikacji audio i wideo itd.
Trafne okreĈlenie wymagaþ uĔytkowników aplikacji to pierwszy krok podczas przygotowy-
wania strategii tworzenia aplikacji mobilnej. Przeanalizuj przedstawione poniĔej przykäady
sposobów wykorzystania urzñdzeþ mobilnych.
x Spacer po ulicy i jednoczesne sprawdzanie poczty e-mail (od czasu do czasu podnoszenie
przy tym gäowy, aby nie uderzyè w latarniö).
x PodróĔ komunikacjñ miejskñ i jednoczesne czytanie najnowszych wiadomoĈci.
x Popijanie kawy w kawiarni — uĔytkownik jednñ rökñ trzyma filiĔankö z kawñ, natomiast
drugñ urzñdzenie mobilne, w którym sprawdza wysokoĈè salda na koncie.
Sytuacje te majñ jednñ wspólnñ cechö — uĔytkownik dzieli swojñ uwagö, próbujñc jak naj-
szybciej wykonaè pewne zadania i przejĈè do kolejnych w dniu wypeänionym po brzegi róĔ-
nymi zajöciami.
Dla twórcy witryny internetowej oznacza to, Ĕe powinna ona koncentrowaè siö na dostarcza-
niu uĔytkownikowi treĈci w Ĕñdany przez niego sposób, szybko, zrozumiale i odpowiednio
do wykonywanego zadania.
Wiýksza przyjaznoļë aplikacji mobilnej
_
213
Poleć książkęKup książkęTworzenie widoku mobilnego dla aukcji
Podczas tworzenia mobilnej aplikacji sieciowej pracö rozpoczynasz od dodania do istniejñcej
aplikacji widoków przeznaczonych dla urzñdzeþ mobilnych lub od utworzenia zupeänie od
poczñtku nowej aplikacji mobilnej. Ten wybór zaleĔy od wielu czynników; oba podejĈcia
majñ swoje wady i zalety. Jak siö przekonasz, platforma ASP.NET MVC oferuje narzödzia
pomagajñce w pracy w obu przypadkach.
Skoncentrujemy siö teraz na dodaniu widoku mobilnego do istniejñcego widoku dla urzñ-
dzenia biurkowego, a nastöpnie bödziemy powoli usprawniaè widok mobilny kolejnymi
funkcjami oferowanymi przez platformö ASP.NET MVC 4.
Rozpoczynamy pracö od utworzenia kopii widoku Auctions.cshtml i nadajemy jej nazwö Auc-
tions.Mobile.cshtml, co wskazuje, Ĕe widok jest przeznaczony dla urzñdzenia mobilnego.
Aby zróĔnicowaè generowane widoki, zmieniamy takĔe nagäówek h1 w widoku mobilnym
na Aukcje mobilne.
Utworzenie widoku mobilnego moĔna potwierdziè poprzez uruchomienie aplikacji sieciowej
i wyĈwietlenie strony aukcji w przeglñdarce internetowej dla urzñdzenia mobilnego. Wynik
tej operacji pokazano na rysunku 10.1.
Rysunek 10.1. Platforma ASP.NET MVC potrafi wykryè i automatycznie wygenerowaè widok
dla urzñdzenia mobilnego
214
_
Rozdziaĥ 10. Programowanie na platformy mobilne
Poleć książkęKup książkęJak moĔesz zobaczyè na rysunku, nagäówek Aukcje mobilne potwierdza wyĈwietlenie widoku
mobilnego (przejĈcie na stronö aukcji w biurkowej wersji przeglñdarki internetowej powoduje
wyĈwietlenie zwykäego widoku wraz z nagäówkiem Aukcje). Tryby wyĈwietlania to funkcja
platformy pozwalajñca na wykrycie przeglñdarki internetowej uĔywanej przez klienta i wyge-
nerowanie dla niej odpowiedniego widoku.
Kiedy Ĕñdanie przychodzi z urzñdzenia mobilnego, platforma ASP.NET MVC 4 nie ogranicza
siö jedynie do automatycznego wczytania widoku mobilnego. W rzeczywistoĈci wczytuje takĔe
mobilne wersje ukäadów graficznych i widoków czöĈciowych — pakiet jQuery.Mobile.MVC jest
wykorzystywany do utworzenia opartego na jQuery Mobile ukäadu graficznego zoptymalizo-
wanego dla urzñdzeþ mobilnych.
Rozpoczýcie pracy z jQuery Mobile
jQuery Mobile pozwala na szybkie usprawnienie istniejñcego widoku i utworzenie na jego
podstawie widoku dla urzñdzeþ mobilnych, który bödzie miaä rodzimy dla nich wyglñd i ro-
dzime zachowanie. MoĔliwe jest takĔe uĔycie motywu w aplikacji; technika uaktualnieþ pro-
gresywnych powoduje, Ĕe starsze wersje przeglñdarek internetowych otrzymujñ nieco zre-
dukowanñ (niezbyt atrakcyjnñ wizualnie), ale funkcjonujñcñ i uĔytecznñ stronö.
Aby móc uĔywaè jQuery Mobile, konieczne jest zainstalowanie pakietu jQuery.Mobile.MVC
z galerii pakietów NuGet (rysunek 10.2).
Rysunek 10.2. Dodanie platformy jQuery Mobile za pomocñ NuGet
Wiýksza przyjaznoļë aplikacji mobilnej
_
215
Poleć książkęKup książkęPakiet ten powoduje dodanie nastöpujñcych plików:
jQuery Mobile Framework
Zestaw plików JavaScript (jQuery.mobile-1.1.0.js) i CSS (jQuery.mobile-1.1.0.css) wraz z ich
zminimalizowanymi wersjami oraz obrazami pomocniczymi.
/Content/Site.Mobile.css
Nowy arkusz stylów przeznaczony dla urzñdzeþ mobilnych.
Views/Shared/_Layout.Mobile.cshtml
Ukäad graficzny zoptymalizowany dla urzñdzeþ mobilnych i odwoäujñcy siö do plików plat-
formy jQuery Mobile (JavaScript i CSS). Platforma ASP.NET MVC bödzie automatycznie
wczytywaäa ten ukäad dla widoków mobilnych.
Komponent przeäñczania widoku
Skäada siö z widoku czöĈciowego Views/Shared/_ViewSwitcher.cshtml oraz kontrolera
ViewSwitcherController.cs. Ten komponent powoduje wyĈwietlenie w mobilnej przeglñdarce
internetowej äñcza pozwalajñcego uĔytkownikowi na przejĈcie do strony w wersji dla urzñ-
dzenia biurkowego. Sposób dziaäania tego komponentu zostanie omówiony w dalszej czöĈci
tego rozdziaäu, w podrozdziale „Przeäñczanie pomiödzy widokami mobilnym i zwykäym”.
Platforma jQuery Mobile nadal jest w fazie opracowywania, wiöc po jej zainstalowaniu
moĔe siö okazaè, Ĕe jej pliki sñ w nowszych wersjach niĔ wymienione w ksiñĔce.
Aby umoĔliwiè platformie jQuery Mobile nadanie stronie odpowiedniego stylu, przejdĒ do
pliku Views/Shared/_Layout.Mobile.cshtml i zmodyfikuj jego treĈè w taki sposób, aby odpowiadaäa
poniĔszemu fragmentowi kodu:
body
div data-role= page data-theme= b
header data-role= header
h1 @Html.ActionLink( EBuy: Witryna demonstracyjna ASP.NET MVC ,
Index , Home ) /h1
/header
div id= body data-role= content
@RenderBody()
/div
/div
/body
Nastöpnie zmodyfikuj plik Auctions.Mobile.cshtml i zoptymalizuj go dla ukäadu graficznego
przeznaczonego dla urzñdzeþ mobilnych:
@model IEnumerable AuctionViewModel
link href= @Url.Content( ~/Content/product.css ) rel= stylesheet type= text/css /
@{
ViewBag.Title = Auctions ;
}
header
h3 Aukcje mobilne /h3
/header
ul id= auctions
216
_
Rozdziaĥ 10. Programowanie na platformy mobilne
Poleć książkęKup książkę @foreach (var auction in Model)
{
li
@Html.Partial( _AuctionTile , auction);
/li
}
/ul
Po wprowadzeniu wymienionych zmian skompiluj i uruchom aplikacjö, a nastöpnie wyĈwietl
stronö gäównñ aplikacji w mobilnej wersji przeglñdarki internetowej. Zwróè uwagö na zmiany
w stosunku do wersji biurkowej. Na ekranie powinieneĈ zobaczyè stronö podobnñ do pokaza-
nej na rysunku 10.3.
Rysunek 10.3. Aplikacja EBuy zoptymalizowana dla ukäadu graficznego przeznaczonego dla urzñdzeþ
mobilnych
MoĔesz zobaczyè, jak widok Auctions zostaä zmieniony w celu jego dostosowania do przeglñ-
darki internetowej urzñdzenia mobilnego. Wprawdzie wyglñd strony nie jest perfekcyjny, ale
pakiet jQuery Mobile dostarcza podstaw, na bazie których moĔesz szybko i äatwo tworzyè
widoki mobilne.
Wiýksza przyjaznoļë aplikacji mobilnej
_
217
Poleć książkęKup książkęUsprawnianie widoku za pomocé jQuery Mobile
Pakiet jQuery.Mobile.MVC wykonuje wiökszñ czöĈè pracy za programistö, ale interfejs uĔytkowni-
ka witryny internetowej nadal nie przypomina rodzimej aplikacji dla urzñdzenia mobilnego.
Na szczöĈcie platforma jQuery Mobile dostarcza wielu komponentów i stylów, dziöki którym
aplikacja otrzyma widok naprawdö przypominajñcy aplikacjö mobilnñ.
Usprawnianie listy aukcji za pomocé komponentu listview platformy jQuery Mobile
Pracö rozpoczynamy od usprawnienia listy aukcji poprzez uĔycie komponentu listview plat-
formy jQuery Mobile. W celu przeprowadzenia wiökszoĈci transformacji mobilnych platforma
jQuery Mobile operuje na atrybutach data-role. Aby zatem wygenerowaè listö aukcji jako
listview, koniecznie naleĔy dodaè atrybut data-role= listview do znacznika ul aukcji:
ul id= auctions data-role= listview
@foreach (var auction in Model.Auctions)
{
li
@Html.Partial( _AuctionTileMobile , auction);
/li
}
/ul
oraz w nastöpujñcy sposób zmodyfikowaè widok czöĈciowy _AuctionTileMobile:
@model AuctionViewModel
@{
var auctionUrl = Url.Auction(Model);
}
a href= @auctionUrl
@Html.Thumbnail(Model.Image, Model.Title)
h3 @Model.Title /h3
p
span Koniec aukcji za: /span
span class= time-remaining title= @Model.EndTimeDisplay Ҋ
@Model.RemainingTimeDisplay /span
/p
p
strong Aktualna cena: /strong
span class= current-bid-amount @Model.CurrentPrice /span
span class= current-bidder @Model.WinningBidUsername /span
/p
/a
Po wyĈwietleniu widoku Auctions w mobilnej wersji przeglñdarki internetowej otrzymasz teraz
znacznie äadniejszñ listö aukcji (rysunek 10.4).
Biorñc pod uwagö to, Ĕe element ul to w rzeczywistoĈci lista, moĔesz uznaè za zbyteczne
dodawanie roli listview. Element ul wyĈwietla listö, ale obszar äñcza bödzie zbyt maäy, aby
moĔna byäo kliknñè go w urzñdzeniu mobilnym wyposaĔonym w niewielki ekran. Zadaniem
atrybutu data-role= listview jest umoĔliwienie powiökszania obszaru äñcza i uäatwienie
uĔytkownikom naciskania elementów listy.
218
_
Rozdziaĥ 10. Programowanie na platformy mobilne
Poleć książkęKup książkęRysunek 10.4. ZawartoĈè znacznika ul wygenerowana przez platformö jQuery Mobile jako listview
UmoŜliwianie przeszukiwania listy aukcji
dziýki komponentowi „data filter” platformy jQuery Mobile
Kolejnym krokiem jest zwiökszenie przyjaznoĈci widoku poprzez dodanie uĔytecznego pola
wyszukiwania, pozwalajñcego uĔytkownikowi na szybkie filtrowanie listy aukcji. Dziöki plat-
formie jQuery Mobile to zadanie jest bardzo äatwe — znacznikowi ul listy aukcji wystarczy
nadaè atrybut data-filter= true :
ul id= auctions data-role= listview data-filter= true
@foreach (var auction in Model.Auctions)
{
li class= listitem
@Html.Partial( _AuctionTileMobile , auction);
/li
}
/ul
Po odĈwieĔeniu strony w mobilnej wersji przeglñdarki internetowej powinieneĈ zobaczyè na
górze strony pole wyszukiwania (rysunek 10.5).
Wiýksza przyjaznoļë aplikacji mobilnej
_
219
Poleć książkęKup książkęRysunek 10.5. Dziöki platformie jQuery Mobile listö aukcji moĔna przeszukiwaè
WprowadĒ tekst w polu wyszukiwania i zobacz, jak platforma jQuery Mobile automatycznie
filtruje listö, wyĈwietlajñc jedynie te aukcje, które zostaäy dopasowane do wprowadzonego
przez Ciebie tekstu (rysunek 10.6).
PrzekonaäeĈ siö, jak platforma jQuery Mobile uäatwia transformacjö dowolnej strony, aby wy-
Ĉwietlona w urzñdzeniu docelowym miaäa dla niego rodzimy wyglñd i sposób dziaäania.
Oprócz wymienionych funkcji jQuery Mobile oferuje takĔe wiele innych uĔytecznych kom-
ponentów, które moĔesz wykorzystaè w widokach witryny internetowej, czyniñc je tym samym
bardziej dostosowanymi dla uĔytkowników urzñdzeþ mobilnych. Peänñ listö odpowiednich
atrybutów znajdziesz na stronie dokumentacji API platformy jQuery Mobile pod adresem
http://jquerymobile.com/test/docs/api/data-attributes.html.
Przeĥéczanie pomiýdzy widokami mobilnym i zwykĥym
Kiedykolwiek dostarczasz wersjö mobilnñ witryny internetowej, ogólnie rzecz biorñc, dobrym
rozwiñzaniem jest automatyczne przekierowanie uĔytkowników urzñdzeþ mobilnych do od-
powiedniej wersji witryny. Warto jednak zapewniè im moĔliwoĈè przejĈcia do peänej wersji
witryny internetowej przeznaczonej dla urzñdzeþ biurkowych.
220
_
Rozdziaĥ 10. Programowanie na platformy mobilne
Poleć książkęKup książkęRysunek 10.6. Platforma jQuery Mobile automatycznie filtruje listö aukcji na podstawie tekstu
wprowadzonego w polu wyszukiwania
Zwróè uwagö, Ĕe na górze widoku mobilnego standardowo dostarczanego przez szablon
aplikacji mobilnej ASP.NET MVC znajduje siö äñcze pozwalajñce uĔytkownikom na przejĈcie
do „widoku zwykäego”. To jest widget ViewSwitcher zainstalowany jako czöĈè pakietu NuGet
jQuery.Mobile.MVC.
Aby dowiedzieè siö, jaki jest sposób dziaäania tego widgetu, konieczne bödzie zagäöbienie siö
w komponenty platformy jQuery Mobile.
Spójrz na nowy widok czöĈciowy o nazwie _ViewSwitcher.cshtml, w którym znajdziesz nastö-
pujñcy kod znaczników:
@if (Request.Browser.IsMobileDevice Request.HttpMethod == GET )
{
div class= view-switcher ui-bar-a
@if (ViewContext.HttpContext.GetOverriddenBrowser().IsMobileDevice)
{
@: WyĂwietlenie widoku mobilnego.
@Html.ActionLink( Widok zwykïy , SwitchView , ViewSwitcher ,
new { mobile = false, returnUrl = Request.Url.PathAndQuery },
new { rel = external })
}
else
{
Wiýksza przyjaznoļë aplikacji mobilnej
_
221
Poleć książkęKup książkę @: WyĂwietlenie widoku zwykïego.
@Html.ActionLink( Widok mobilny , SwitchView , ViewSwitcher ,
new { mobile = true, returnUrl = Request.Url.PathAndQuery },
new { rel = external })
}
/div
}
WartoĈciñ zwrotnñ metody GetOverridenBrowser() jest obiekt HttpBrowserCapabilities zawiera-
jñcy moĔliwoĈci oferowane przez nadpisywanñ przeglñdarkö internetowñ lub aktualnie uĔywanñ,
jeĈli nie jest nadpisywana. W ten sposób moĔesz sprawdziè, czy urzñdzenie, które wykonaäo
Ĕñdanie, jest urzñdzeniem mobilnym. Nastöpnie widget okreĈla widok, który powinien zostaè
wygenerowany, oraz tworzy odpowiednie äñcza pozwalajñce na przeäñczanie pomiödzy wi-
dokami mobilnym i zwykäym.
Bonusem jest ustawienie wäaĈciwoĈci mobile w säowniku RouteValue, wskazujñcej aktualnie
aktywny widok.
Spójrz teraz na klasö ViewSwitcherController zawierajñcñ logikö odpowiedzialnñ za przeäñczanie
widoków:
public class ViewSwitcherController : Controller
{
public RedirectResult SwitchView(bool mobile, string returnUrl)
{
if (Request.Browser.IsMobileDevice == mobile)
{
HttpContext.ClearOverriddenBrowser();
}
else
{
HttpContext.SetOverriddenBrowser(mobile ? BrowserOverride.Mobile
: BrowserOverride.Desktop);
}
return Redirect(returnUrl);
}
}
W zaleĔnoĈci od tego, czy Ĕñdanie pochodzi z urzñdzenia mobilnego (na co wskazuje wartoĈè
wäaĈciwoĈci Request.Browser.IsMobileDevice), kontroler uĔywa metod ClearOverriddenBrowser()
i SetOverriddenBrowser() w celu poinformowania platformy ASP.NET MVC o sposobie trak-
towania Ĕñdania. Nastöpnie platforma wyĈwietla odpowiedniñ wersjö witryny, mobilnñ dla
urzñdzenia mobilnego lub peänñ dla urzñdzenia biurkowego.
Przedstawiony poniĔej fragment kodu umieĈè przez zamykajñcym znacznikiem body w pliku
Layout.Mobile.cshtml w celu wygenerowania widoku czöĈciowego ViewSwitcher jako stopki (ry-
sunek 10.7):
div data-role= footer
@Html.Partial( _ViewSwitcher )
/div
222
_
Rozdziaĥ 10. Programowanie na platformy mobilne
Poleć książkęKup książkęRysunek 10.7. Przeäñcznik widoku wyĈwietlony w stopce strony
Po klikniöciu äñcza Widok zwykäy nastñpi wyĈwietlenie zwykäej wersji widoku Auctions. Zwróè
jednak uwagö, Ĕe widok zwykäy nie zawiera äñcza pozwalajñcego na przejĈcie do widoku
mobilnego. Aby to naprawiè, przejdĒ do widoku wspóädzielonego _Layout.cshtml i umieĈè w nim
poniĔszy wiersz kodu:
@Html.Partial( _ViewSwitcher )
Uruchom aplikacjö; w mobilnej wersji przeglñdarki internetowej przejdĒ do dowolnej strony.
Przekonasz siö, Ĕe przeäñcznik widoków generuje äñcza pozwalajñce na przeäñczanie pomiö-
dzy widokami zwykäym i mobilnym (rysunek 10.8).
Unikanie widoków biurkowych w witrynie mobilnej
Na pewno zauwaĔysz, Ĕe w przypadku braku mobilnej wersji widoku platforma ASP.NET MVC
powoduje wygenerowanie wersji biurkowej widoku w mobilnym ukäadzie graficznym strony.
Trzymanie siö standardów podczas tworzenia kodu znaczników pomaga w wyĈwietlaniu
w miarö uĔytecznego widoku, ale mogñ zdarzaè siö sytuacje, w których po prostu bödziesz
wolaä uniknñè takiego zachowania platformy.
Wiýksza przyjaznoļë aplikacji mobilnej
_
223
Poleć książkęKup książkęRysunek 10.8. Przeäñcznik widoków wyĈwietlony w widoku biurkowym strony
W tym celu naleĔy przypisaè wartoĈè true wäaĈciwoĈci RequireConsistentDisplayMode:
@{
Layout = ~/Views/Shared/_Layout.cshtml ;
DisplayModeProvider.Instance.RequireConsistentDisplayMode = true;
}
Po wprowadzeniu powyĔszej zmiany Ĕaden widok domyĈlny (to znaczy niemobilny) nie zo-
stanie wygenerowany w mobilnym ukäadzie graficznym strony. Ustawienie moĔesz wpro-
wadziè takĔe globalnie dla wszystkich widoków poprzez przypisanie wartoĈci true wymienio-
nej wäaĈciwoĈci w pliku /Views/_ViewStart.cshtml.
Usprawnianie wersji mobilnej witryny
Mobilne wersje przeglñdarek internetowych majñ moĔliwoĈè wyĈwietlania stron HTML,
przynajmniej do pewnego stopnia. Jednak poleganie w caäoĈci na przeglñdarce internetowej
podczas wyĈwietlania strony wcale nie gwarantuje uzyskania najlepszych wyników. Wynika
to z faktu, Ĕe przeglñdarki internetowe majñ jedynie ograniczone moĔliwoĈci w zakresie
zmiany wielkoĈci strony i obrazów. Tylko autor moĔe zadecydowaè, które elementy sñ najwaĔ-
niejsze i tym samym powinny byè wyróĔnione na maäym ekranie oraz które sñ mniej waĔne,
przez co moĔna je po prostu pominñè. Dlatego teĔ Twoim obowiñzkiem jest zapewnienie wi-
trynie äadnego wyglñdu i umoĔliwienie jej funkcjonalnego dziaäania w róĔnych przeglñdarkach
internetowych.
Na szczöĈcie moĔesz wykorzystaè techniki Adaptive Rendering i usprawnienia progresywne
w celu poprawienia sposobu wyĈwietlania witryny. Dziöki platformom ASP.NET MVC 4 i jQuery
Mobile jest to doĈè äatwe zadanie, o czym siö przekonasz w poniĔszych podrozdziaäach.
224 _
Rozdziaĥ 10. Programowanie na platformy mobilne
Poleć książkęKup książkęTechnika Adaptive Rendering
Adaptive Rendering to technika pozwalajñca widokowi na „zaadaptowanie” moĔliwoĈci ofe-
rowanych przez przeglñdarkö internetowñ. Przyjmujemy zaäoĔenie, Ĕe na stronie znajduje siö
mnóstwo kart, a klikniöta karta powoduje wykonanie Ĕñdania AJAX w celu pobrania treĈci
i jej wyĈwietlenia. W przypadku wyäñczonej obsäugi jözyka JavaScript karta nie bödzie w stanie
wyĈwietliè treĈci Ĕñdanej przez uĔytkownika. Jednak gdy bödzie stosowana technika Adaptive
Rendering, karta bödzie po prostu zawieraäa adres URL prowadzñcy do zasobu z treĈciñ, a tym
samym uĔytkownik uzyska dostöp do Ĕñdanej treĈci.
Innym przykäadem moĔe byè pasek nawigacyjny zawierajñcy poziomñ listö äñczy. Wprawdzie
przedstawia siö on dobrze w urzñdzeniu biurkowym, ale na maäym ekranie urzñdzenia mobilne-
go moĔe byè przytäaczajñcy. Dziöki technice Adaptive Rendering pasek nawigacyjny bödzie
mógä zostaè wyĈwietlony jako rozwijane menu, co oznacza dostosowanie jego funkcjonalnoĈci
do urzñdzenia o mniejszym ekranie.
Zaletñ omawianej techniki jest moĔliwoĈè wyĈwietlenia „funkcjonalnej” lub inaczej „uĔytecznej”
wersji witryny w róĔnych przeglñdarkach internetowych i urzñdzeniach. Sam poziom usäugi
moĔe byè zaleĔny od moĔliwoĈci oferowanych przez poszczególne urzñdzenia, ale witryna
mimo wszystko nadal pozostanie uĔyteczna.
JeĔeli chcesz, aby uĔytkownicy nieustannie powracali na Twojñ witrynö, musisz zagwaran-
towaè im przyjemnoĈè z korzystania z niej niezaleĔnie od tego, jakich uĔywajñ urzñdzeþ.
Platforma ASP.NET MVC 4 zapewnia techniki adaptacyjne poprzez jQuery Mobile.
Znacznik viewport
W grafice komputerowej pojöcie viewport oznacza wyĈwietlany prostokñtny obszar. W przypadku
przeglñdarki internetowej jest to jej okno, w którym nastöpuje wyĈwietlanie dokumentu HTML.
Innymi säowy, to wyimaginowana konstrukcja zawierajñca znacznik html , który z kolei jest
elementem gäównym dla caäego kodu znaczników strony.
Co siö dzieje w przypadku powiökszania lub pomniejszania (zmiana stopnia przybliĔenia) okna
przeglñdarki internetowej? A co siö stanie po zmianie orientacji urzñdzenia? Czy viewport
równieĔ ulegnie zmianie?
W Ĉwiecie urzñdzeþ mobilnych udzielenie odpowiedzi na powyĔsze pytania jest nieco utrud-
nione, poniewaĔ w rzeczywistoĈci nie istnieje jeden, ale sñ dwa viewporty — jeden dla „ukäadu
graficznego” oraz jeden „wizualny”.
Viewport ukäadu graficznego nigdy nie ulega zmianie — to jest wyimaginowana konstrukcja
stanowiñca ogranicznik dla znacznika html strony. Podczas zmiany poziomu przybliĔenia
strony lub orientacji urzñdzenia zmienia siö viewport wizualny, co wpäywa na elementy wy-
Ĉwietlane na ekranie urzñdzenia.
Rolö viewportu powinieneĈ postrzegaè jako sposób zapewnienia uĔytkownikom funkcjonalnej
i uĔytecznej witryny internetowej. Kiedy strona jest generowana w urzñdzeniu mobilnym, jej
szerokoĈè nie powinna byè ani zbyt duĔa, ani zbyt maäa — powinna byè idealnie dopasowana
do ekranu. Ponadto strona dopasowana do szerokoĈci ekranu nie powinna byè wyĈwietlana
jako mikroskopijna, zmniejszona wersja peänej strony; powinna to byè wersja odpowiednio
dostosowana, czytelna.
Technika Adaptive Rendering
_
225
Poleć książkęKup książkęW nowoczesnych przeglñdarkach internetowych to nie CSS, ale znacznik meta name= viewport
pozwala na zdefiniowanie wymiarów wizualnego viewportu:
meta name= viewport content= width=device-width /
UĔyta w powyĔszym kodzie wartoĈè width=device-width jest wartoĈciñ specjalnñ i oznacza,
Ĕe szerokoĈè viewportu odpowiada rzeczywistej szerokoĈci ekranu urzñdzenia. To najbardziej
elastyczna i najczöĈciej uĔywana wartoĈè.
WäaĈciwoĈci content moĔna przypisaè konkretnñ wartoĈè liczbowñ, o ile treĈè bödzie zaadapto-
wana w ten sposób:
meta name= viewport content= width=320px /
Po uĔyciu powyĔszego kodu niezaleĔnie od szerokoĈci ekranu urzñdzenia treĈè zawsze bödzie
miaäa szerokoĈè 320 pikseli. Oznacza to, Ĕe uĔytkownicy wiökszych ekranów bödñ musieli jñ
powiökszaè, natomiast mniejszych — zmniejszaè.
Znacznik meta name= viewport jest standardem przemysäowym, ale w rzeczywisto-
Ĉci nie jest czöĈciñ standardu W3C.
Wymieniona funkcja zostaäa po raz pierwszy zaimplementowana w przeglñdarce in-
ternetowej iPhone’a i bardzo szybko — ze wzglödu na duĔñ popularnoĈè tego smartfona
— zaczöäa byè obsäugiwana takĔe przez innych producentów urzñdzeþ mobilnych.
Wykrywanie funkcji mobilnych
PoniewaĔ kaĔde urzñdzenie mobilne obsäuguje odmienny zestaw funkcji, nigdy nie moĔesz
przyjmowaè zaäoĔenia, Ĕe konkretna funkcja bödzie dostöpna w kaĔdej przeglñdarce inter-
netowej.
Przyjmujemy zaäoĔenie, Ĕe aplikacja uĔywa funkcji Web Storage HTML5 obsäugiwanej wpraw-
dzie przez wiele smartfonów (np. iPhone, Android, Blackberry i Windows Phone), ale jedno-
czeĈnie nieobsäugiwanej przez pozostaäe.
ProgramiĈci stosowali zazwyczaj takie techniki jak wykrywanie rodzaju przeglñdarki inter-
netowej, aby sprawdziè, czy aplikacja moĔe byè uruchomiona w danej przeglñdarce.
Zamiast wiöc sprawdzaè, czy funkcja Web Storage jest obsäugiwana, w podejĈciu klasycznym
sprawdza siö, czy uĔywanñ przeglñdarkñ internetowñ jest Opera Mini.
Tego rodzaju podejĈcie wiñĔe siö jednak z pewnymi wadami; niektóre z nich podano poniĔej.
x Potencjalne wykluczenie przeglñdarek internetowych, które nie zostaäy wykluczone wy-
raĒnie, ale obsäugujñ danñ funkcjö.
x Niebezpieczeþstwo nieprawidäowego dziaäania witryny internetowej, jeĈli uĔytkownik
wyĈwietli jñ z poziomu innego urzñdzenia.
Oto przykäad omówionego podejĈcia.
// OstrzeĪenie: nie stosuj takiego kodu!
if (document.all) {
// Internet Explorer 4+
document.write( link rel= stylesheet type= text/css src= style-ie.css );
}
226
_
Rozdziaĥ 10. Programowanie na platformy mobilne
Poleć książkęKup książkęelse if (document.layers) {
// Navigator 4
document.write( link rel= stylesheet type= text/css src= style-nn.css );
}
Zwróè uwagö, Ĕe powyĔszy fragment kodu dostarcza arkusze stylów jedynie dla przeglñda-
rek Internet Explorer i Netscape Navigator 4 pomimo tego, Ĕe przeglñdarka internetowa mu-
si mieè wäñczonñ obsäugö JavaScript. Oznacza to, Ĕe w innych przeglñdarkach internetowych,
takich jak Netscape 6, Netscape 7, CompuServe 7, Mozilla i Opera, dana witryna internetowa
moĔe nie byè wyĈwietlona prawidäowo.
Nawet jeĈli zapewnisz wyraĒnñ obsäugö wiökszoĈci przeglñdarek internetowych, nadal mo-
Ĕesz pominñè nowe wersje przeglñdarek zawierajñce juĔ obsäugö funkcji wymaganych do
prawidäowego dziaäania witryny.
Inny potencjalny problem wiñĔe siö z bäödnñ identyfikacjñ przeglñdarki internetowej.
PoniewaĔ mechanizm wykrywania przeglñdarki internetowej w duĔej mierze opiera siö na
zgadywaniu na podstawie ciñgu tekstowego okreĈlajñcego agenta uĔytkownika i na pewnych
wäaĈciwoĈciach, to istnieje niebezpieczeþstwo bäödnej identyfikacji pewnych przeglñdarek
internetowych.
// OstrzeĪenie: nie uĪywaj tego kodu!
if (document.all) {
// Internet Explorer 4+
elm = document.all[ menu ];
}
else {
// Przyjmujemy zaáoĪenie, Īe przeglądarka to Navigator 4.
elm = document.layers[ menu ];
}
Zwróè uwagö na stosowany przez powyĔszy kod podziaä przeglñdarek internetowych. JeĈli
przeglñdarka nie zostanie rozpoznana jako Internet Explorer, to kod uznaje jñ za przeglñdar-
kö Netscape Navigator 4 i nastöpuje próba uĔycia warstw.
To czösto spotykane Ēródäo problemów podczas uĔywania przeglñdarek Opera i przeglñda-
rek opartych na silniku Gecko.
Wynika z tego, Ĕe najlepszym rozwiñzaniem jest wyraĒne sprawdzenie istnienia danej funkcji
zamiast przyjmowanie zaäoĔenia o jej obsäudze bñdĒ braku obsäugi przez konkretne wersje
poszczególnych przeglñdarek.
PoniĔej przedstawiono wczeĈniejszy fragment kodu, ale zmodyfikowany w celu wykrywania
obsäugi konkretnych funkcji zamiast przeglñdarek.
// JeĪeli obsáugiwana jest funkcja localStorage, naleĪy jej uĪyü.
if (( localStorage in window) window.localStorage !== null) {
// àatwa w uĪyciu wáaĞciwoĞü obiektu.
localStorage.wishlist = [ Unicorn , Narwhal , Deathbear ] ;
} else {
// W przypadku braku sessionStorage konieczne jest uĪycie pliku cookie
// za pomocą API document.cookie.
var date = new Date();
date.setTime(date.getTime()+(365*24*60*60*1000));
var expires = date.toGMTString();
var cookiestr = wishlist=[ Unicorn , Narwhal , Deathbear ]; +
expires= +expires+ ; path=/ ;
document.cookie = cookiestr;
}
Technika Adaptive Rendering
_
227
Poleć książkęKup książkęPowyĔszy fragment kodu nie tylko jest znacznie bardziej niezawodny, ale równieĔ bödzie
doskonale odgrywaä swojñ rolö w przyszäoĈci — kaĔda przeglñdarka, w której zostanie do-
dana obsäuga funkcji Web Storage, otrzyma dostöp do nowych funkcji aplikacji.
Zapytania mediów CSS
Zapytania CSS media to technika usprawnieþ progresywnych, która pozwala na zaadapto-
wanie i wyĈwietlanie alternatywnych stylów w zaleĔnoĈci od przeglñdarki internetowej.
Wersja druga specyfikacji CSS (znana jako „CSS2”) pozwala na wskazanie stylu na podstawie
medium, np. screen lub print.
Z kolei wersja trzecia specyfikacji CSS (znana jako „CSS3”) wprowadza koncepcjö tak zwa-
nych zapytaþ mediów, czyli technikö rozszerzajñcñ koncepcjö pomagajñcñ wykrywaè w stan-
dardowy sposób funkcje oferowane przez przeglñdarki internetowe.
Niestety, specyfikacja CSS3 nadal pozostaje w fazie „rekomendacji”, co oznacza, Ĕe
zapytania mediów — oraz oczywiĈcie inne nowe funkcje wprowadzone w specyfi-
kacji CSS3 — niekoniecznie sñ doskonale obsäugiwane przez wszystkie przeglñdarki
internetowe.
Dlatego teĔ bardzo waĔne jest przygotowanie stylów domyĈlnych dostarczanych
przeglñdarkom internetowym, które nie obsäugujñ nowych funkcji.
WczeĈniej dowiedziaäeĈ siö, jak znacznik viewport pozwala na zdefiniowanie domyĈlnej sze-
rokoĈci na podstawie ekranu urzñdzenia. Wprawdzie viewport powoduje, Ĕe strona wyglñda
dobrze w standardowej wielkoĈci, ale nie bödzie pomocny, gdy uĔytkownik zechce powiök-
szyè lub zmniejszyè stronö w urzñdzeniu.
Wraz ze zmianñ ukäadu graficznego konieczne jest znalezienie sposobu na poinformowanie
przeglñdarki internetowej, jak ograniczyè treĈè do konkretnej szerokoĈci, aby byäa wyĈwie-
tlana poprawnie w kaĔdej sytuacji.
Spójrz na prosty przykäad rozwiñzania opartego na zapytaniu mediów CSS:
body {background-color:blue;}
@media only screen and (max-width: 800px) {
body {background-color:red;}
}
Reguäy CSS sñ wykonywane od poczñtku pliku do koþca, wiöc rozpoczynamy od umiesz-
czenia ogólnej reguäy definiujñcej niebieski kolor täa strony.
Nastöpnie znajduje siö reguäa przeznaczona dla konkretnego urzñdzenia — wykorzystane
zostaje zapytanie mediów CSS. Reguäa powoduje zmianö koloru täa na czerwony w urzñdze-
niach, których szerokoĈè ekranu nie przekracza 800 pikseli.
W urzñdzeniach obsäugujñcych zapytania mediów CSS i posiadajñcych ekran o szerokoĈci
poniĔej 800 pikseli täo bödzie wyĈwietlone w kolorze czerwonym. Natomiast w pozostaäych
urzñdzeniach kolorem täa pozostaje niebieski. (ZauwaĔ, Ĕe zmiana koloru täa podczas zmiany
wielkoĈci strony nie jest operacjñ wykonywanñ w rzeczywistych aplikacjach. Zamiast tego
w omówionym przykäadzie koncentrujemy siö na pokazaniu sposobu uĔywania zapytania
mediów w celu stosowania róĔnych stylów na podstawie okreĈlonych warunków).
228 _
Rozdziaĥ 10. Programowanie na platformy mobilne
Poleć książkęKup książkęBardzo waĔne jest umieszczenie ogólnej reguäy na poczñtku, a nastöpnie jej usprawnianie po-
przez dodanie obsäugi zapytaþ mediów i wykrywania dostöpnoĈci poszczególnych funkcji.
Dziöki temu witryna internetowa bödzie wyĈwietlana w peänej krasie w przeglñdarkach in-
ternetowych oferujñcych obsäugö najnowszych funkcji i jednoczeĈnie bödzie wyĈwietlana po-
prawnie (choè mniej atrakcyjnie pod wzglödem wizualnym) w starszych wersjach przeglñda-
rek internetowych.
Widoki dla konkretnych przeglédarek internetowych
Nowa funkcja platformy ASP.NET MVC 4, jakñ jest tryb wyĈwietlania, pozwala na wczyty-
wanie odmiennych widoków w zaleĔnoĈci od zdefiniowanych warunków. Przykäadem uĔy-
cia tej funkcji moĔe byè utworzenie oddzielnych widoków przeznaczonych dla smartfonów
(urzñdzeþ o maäych ekranach) i tabletów (urzñdzeþ o ekranach wiökszych niĔ w smartfonach,
ale jednoczeĈnie mniejszych niĔ w urzñdzeniach biurkowych). Przygotowanie widoków dla
tych klas urzñdzeþ pozwala na optymalne wykorzystanie dostöpnej powierzchni ekranu. Po-
nadto stanowi przykäad dostarczenia efektywnej i uĔytecznej aplikacji przystosowanej do
moĔliwoĈci oferowanych przez konkretne urzñdzenia.
Pierwszym krokiem podczas realizacji wymienionego podejĈcia jest rejestracja trybów wy-
Ĉwietlania przeprowadzana w trakcie uruchamiania aplikacji.
using System.Web.WebPages;
// Rejestracja widoku przeznaczonego dla iPhone’a.
DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode( iPhone )
{
ContextCondition = (ctx = ctx.Request.UserAgent.IndexOf(
iPhone , StringComparison.OrdinalIgnoreCase) = 0)
});
// Rejestracja widoku przeznaczonego dla Windows Phone.
DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode( WindowsPhone )
{
ContextCondition = (ctx = ctx.Request.UserAgent.IndexOf(
Windows Phone , StringComparison.OrdinalIgnoreCase) = 0)
});
Drugim krokiem jest przygotowanie odpowiednich widoków. Utwórz widok dla iPhone’a
poprzez skopiowanie widoku Auctions.mobile.cshtml i zmianö jego nazwy na Auctions.iPhone.cshtml.
Nastöpnie nagäówek w nowym widoku zmieþ na Aukcje iPhone’a, aby go odróĔniè od pozosta-
äych. Aby zobaczyè tak przygotowanñ stronö w dziaäaniu (rysunek 10.9), uruchom aplikacjö
za pomocñ emulatora przeglñdarki internetowej dla urzñdzenia mobilnego (pokazane tutaj
przykäady uĔywajñ rozszerzenia User Agent Switcher dla przeglñdarki internetowej Firefox
pozwalajñcego na emulacjö przeglñdarki internetowej w iPhonie).
Aby przygotowaè wersjö widoku dla Windows Phone, utwórz kolejnñ kopiö Auctions.mobile.cshtml
i zmieþ jego nazwö na Auctions.WindowsPhone.cshtml. Nastöpnie nagäówek w nowym widoku
zmieþ na Aukcje Windows Phone, aby go odróĔniè od pozostaäych. Po uruchomieniu aplikacji
w emulatorze przeglñdarki internetowej na urzñdzeniu mobilnym (rysunek 10.10) bödziesz
mógä podziwiaè przygotowanñ stronö w dziaäaniu.
Technika Adaptive Rendering
_
229
Poleć książkęKup książkęRysunek 10.9. Widok utworzony dla iPhone’a
Aby sprawdziè, czy Ĕñdanie pochodzi z urzñdzenia mobilnego, platforma ASP.NET
analizuje je i porównuje z zestawem doskonale znanych definicji przeglñdarek inter-
netowych dla urzñdzeþ mobilnych.
Dziöki klasie HttpBrowserCapabilities (http://msdn.microsoft.com/en-us/library/system.web.
httpbrowsercapabilities.aspx) platforma otrzymuje bardzo duĔñ iloĈè informacji dotyczñ-
cych moĔliwoĈci danej przeglñdarki. Informacje te sñ dostöpne poprzez wäaĈciwoĈè
Request.Browser.
Ewentualnie zamiast polegaè na wbudowanych w platformö definicjach przeglñdarek,
moĔesz skorzystaè z usäugi takiej jak 51Degrees.mobi (http://51degrees.mobi/Support/Blogs/
tabid/212/EntryId/26/51Degrees-mobi-and-MVC4.aspx), która oferuje znacznie bardziej
aktualnñ bazö informacji o róĔnych urzñdzeniach mobilnych.
230
_
Rozdziaĥ 10. Programowanie na platformy mobilne
Poleć książkęKup książkęRysunek 10.10. Widok utworzony dla Windows Phone
Tworzenie nowej aplikacji mobilnej
zupeĥnie od poczétku
Platforma ASP.NET MVC 4 bardzo uäatwia dodawanie widoków mobilnych do istniejñcych
aplikacji. Równie äatwo moĔesz jednak zupeänie od poczñtku tworzyè aplikacje mobilne. To uĔy-
teczne rozwiñzanie, jeĈli nie masz jeszcze aplikacji, którñ mógäbyĈ wykorzystaè jako punkt
wyjĈcia, bñdĒ gdy z jakiegoĈ powodu nie chcesz äñczyè witryn w wersji zwykäej i mobilnej.
Na platformie ASP.NET MVC 4 znajdziesz szablon Aplikacja dla urzñdzeþ przenoĈnych, dziöki
któremu szybko bödziesz mógä rozpoczñè tworzenie aplikacji dla urzñdzeþ mobilnych. Szablon
ten w duĔej mierze opiera siö na platformie jQuery Mobile. Aby zatem rozpoczñè tworzenie
efektywnych aplikacji, w pierwszej kolejnoĈci musisz poznaè jQuery Mobile.
Tworzenie nowej aplikacji mobilnej zupeĥnie od poczétku
_
231
Poleć książkęKup książkęPlatforma jQuery Mobile
Podczas pracy z jQuery Mobile bardzo istotne jest pojöcie strony. W tradycyjnym programo-
waniu sieciowym strona oznacza dokument HTML, stronö .aspx w ASP.NET Web Forms lub
widok .cshtml na platformie ASP.NET MVC. Pliki te zawierajñ kod znaczników oraz logikö
pozwalajñce na wygenerowanie strony w przeglñdarce internetowej.
Jednak na platformie jQuery Mobile jeden plik moĔe zawieraè wiele „stron” dla urzñdzeþ
mobilnych. Z technicznego punktu widzenia strona jQuery Mobile to tak naprawdö znacznik
div wraz z przypisanym mu atrybutem data-role= page . W jednym pliku widoku moĔesz
umieĈciè dowolnñ liczbö takich znaczników, a jQuery zamieni je na wiele stron wyĈwietlanych
jednoczeĈnie.
PoniewaĔ na podstawie jednego widoku dla urzñdzenia biurkowego moĔe powstaè wiele
mniejszych widoków dla urzñdzenia mobilnego (gäównie wskutek przeprojektowania strony,
aby jej nawigacja lepiej odpowiadaäa ekranowi urzñdzenia mobilnego), takie podejĈcie po-
maga w zmniejszeniu liczby plików; w przeciwnym razie pliki te trzeba by utworzyè.
Szablon aplikacji mobilnej w ASP.NET MVC 4
Aby utworzyè nowñ aplikacjö mobilnñ, rozpoczynasz pracö dokäadnie tak samo jak w przy-
padku zwykäej aplikacji sieciowej ASP.NET MVC — wybierz opcjö menu Plik/Nowy/Projekt…,
a nastöpnie wybierz typ Aplikacja sieci Web platformy ASP.NET MVC 4 (rysunek 10.11).
Rysunek 10.11. Tworzenie nowego projektu
232
_
Rozdziaĥ 10. Programowanie na platformy mobilne
Poleć książkęKup książkęW kolejnym oknie dialogowym wybierz szablon Aplikacja dla urzñdzeþ przenoĈnych (rysunek 10.12).
Rysunek 10.12. Wybór szablonu aplikacji dla urzñdzeþ przenoĈnych
W ten sposób utworzysz nowñ aplikacjö ASP.NET MVC wraz z przykäadowymi kontrolerami
i widokami zawierajñcymi oferowane przez platformö ASP.NET MVC funkcje obsäugi urzñ-
dzeþ mobilnych. Szablon ten pozwoli Ci na szybkie rozpoczöcie pracy.
Uruchom projekt, naciskajñc klawisz F5 bñdĒ wybierajñc z menu Debug/Start. Visual Studio
rozpocznie kompilacjö rozwiñzania, a nastöpnie uruchomi przeglñdarkö internetowñ, w której
zostanie wyĈwietlona strona gäówna witryny internetowej w wersji przystosowanej dla urzñ-
dzeþ mobilnych (rysunek 10.13).
UŜywanie szablonu aplikacji mobilnej w ASP.NET MVC 4
Jak moĔesz siö przekonaè, utworzony projekt aplikacji mobilnej standardowo zawiera duĔñ
iloĈè przygotowanego kodu. Struktura projektu jest podobna do projektu zwykäej witryny
internetowej, ale z dwoma zmianami.
x Katalog Content zawiera arkusze stylów dla jQuery Mobile (rysunek 10.14):
x jquery.mobile-1.1.0.css (i jego zminimalizowana wersja),
x jquery.mobile.structure-1.1.0.css (i jego zminimalizowana wersja).
Tworzenie nowej aplikacji mobilnej zupeĥnie od poczétku
_
233
Poleć książkęKup książkęRysunek 10.13. DomyĈlna strona gäówna aplikacji mobilnej
Rysunek 10.14. Nowa zawartoĈè katalogu Content projektu
x Katalog Scripts zawiera dwa nowe pliki (rysunek 10.15):
x jquery.mobile-1.1.0.js,
x jquery.mobile.structure-1.1.0.js.
Te nowe pliki stanowiñ czöĈè platformy jQuery Mobile, czyli platformy JavaScript dostarcza-
jñcej urzñdzeniom mobilnym caäe dobrodziejstwo jQuery i jQueryUI.
Teraz spójrz na zmodyfikowanñ wersjö pliku _Layout.cshtml, którego znacznik head zawiera
kilka nowych wierszy.
234 _
Rozdziaĥ 10. Programowanie na platformy mobilne
Poleć książkęKup książkęRysunek 10.15. Nowa zawartoĈè katalogu Scripts projektu
Znacznik meta name= viewport okreĈla wielkoĈè viewportu. To jest bardzo waĔne, poniewaĔ
wiökszoĈè przeglñdarek w wersji dla urzñdzeþ mobilnych wprawdzie pozwala uĔytkowni-
kom na zmniejszanie i powiökszanie strony wedle wäasnego uznania, ale lepsze wraĔenie
wywoäa w uĔytkowniku ustawienie szerokoĈci poczñtkowej. Jak juĔ wczeĈniej powiedziano,
wartoĈè width=device-width powoduje, Ĕe treĈci jest automatycznie przypisywana szerokoĈè
odpowiadajñca szerokoĈci uĔywanego urzñdzenia:
meta name= viewport content= width=device-width /
Alternatywnym rozwiñzaniem jest zdefiniowanie konkretnej szerokoĈci dla viewportu po-
przez podanie odpowiedniej wartoĈci wyraĔonej w pikselach. Na przykäad w poniĔszym
poleceniu poczñtkowa szerokoĈè strony zostaäa okreĈlona na 320 pikseli:
meta name= viewport content= width=320px /
Przedstawiony poniĔej znacznik powoduje dodanie do strony stylów jQuery Mobile. Ponadto
pozwala na konfiguracjö motywów za pomocñ jQuery Theming (http://jquerymobile.com/demos/
1.0/docs/api/themes.html):
link rel= stylesheet a href= @Url.Content( ~/Content/jquery.mobile-1.0b2.min.css ) /
Wreszcie poniĔszy znac
Pobierz darmowy fragment (pdf)