ASP.NET MVC 4. Programowanie

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: [email protected]
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 treci
Wprowadzenie ........................................................................................................................11
Cz I. Rozkrcamy si .......................................................................................................... 15
Rozdzia 1. Podstawy ASP.NET MVC .......................................................................................17
Opracowane przez Microsoft platformy tworzenia aplikacji sieciowych
Active Server Pages (ASP)
ASP.NET Web Forms
ASP.NET MVC
Architektura MVC
Model
Widok
Kontroler
17
18
18
18
19
20
20
20
Co nowego w ASP.NET MVC 4?
Wprowadzenie do aplikacji EBuy
Instalacja ASP.NET MVC
Tworzenie aplikacji ASP.NET MVC
20
22
23
23
Szablony projektów
Konwencja przed konfiguracj
Uruchamianie aplikacji
Routing
Konfiguracja tras
Kontrolery
Akcje kontrolera
Obiekt ActionResult
Parametry akcji
Filtry akcji
23
27
28
28
29
31
32
32
33
36
Widoki
Wyszukiwanie widoków
Poznaj Razor
Odrónianie kodu od znaczników
Ukady graficzne
Widoki czciowe
Wywietlanie danych
Metody pomocnicze HTML i URL
Modele
36
37
38
39
40
41
43
45
46
3
Kup książkę
Poleć książkę
Zebranie wszystkich komponentów w cao
Trasa
Kontroler
Widok
Uwierzytelnianie
AccountController
Podsumowanie
47
47
47
49
52
54
55
Rozdzia 2. ASP.NET MVC dla programistów formularzy sieciowych ................................. 57
Wszystko krci si wokó ASP.NET
Narzdzia, jzyki i API
Moduy i procedury obsugi HTTP
Zarzdzanie stanem
Wdraanie i rodowisko uruchomieniowe
Wicej rónic ni podobiestw
Oddzielanie logiki aplikacji od logiki widoku
Adresy URL i routing
Zarzdzanie stanem
Generowanie kodu HTML
Tworzenie widoku ASP.NET MVC za pomoc skadni Web Forms
Sowo ostrzeenia
Podsumowanie
57
58
58
58
59
59
60
60
61
62
66
66
67
Rozdzia 3. Praca z danymi ....................................................................................................69
Tworzenie formularza
Obsuga akcji POST formularza
Zapis danych w bazie danych
Technika Code First — zasada „konwencja przed konfiguracj”
Tworzenie warstwy dostpu do danych z uyciem techniki Code First
w Entity Framework
Weryfikacja danych
Okrelanie regu biznesowych za pomoc adnotacji danych
Wywietlanie komunikatów o bdach z procesu weryfikacji danych
Podsumowanie
69
71
71
72
72
73
74
77
80
Rozdzia 4. Programowanie po stronie klienta .................................................................... 81
Praca z jzykiem JavaScript
Selektory
Udzielanie odpowiedzi na zdarzenia
Manipulacje modelem DOM
AJAX
Weryfikacja danych po stronie klienta
Podsumowanie
4
_
81
83
86
88
89
91
95
Spis treci
Kup książkę
Poleć książkę
Cz II. Kolejny poziom ......................................................................................................... 97
Rozdzia 5. Architektura aplikacji sieciowej .........................................................................99
Wzorzec MVC
99
Zasada separacji zada
MVC i platformy sieciowe
99
100
Architektura aplikacji sieciowej
102
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 wdroenia
Najlepsze praktyki w zakresie architektury fizycznej
102
102
104
105
105
106
107
Reguy dotyczce architektury aplikacji
108
SOLID
Odwracanie sterowania
109
114
Nie powtarzaj si
Podsumowanie
121
122
Rozdzia 6. Usprawnianie witryny poprzez uycie technologii AJAX ............................... 123
Czciowe generowanie strony
123
Generowanie widoków czciowych
124
Wygenerowanie kodu JavaScript
129
Wygenerowanie danych JSON
danie danych JSON
Szablony po stronie klienta
129
131
131
Ponowne uywanie tej samej logiki zarówno w daniach AJAX, jak i pozostaych
134
Udzielanie odpowiedzi na dania AJAX
Udzielanie odpowiedzi na dania JSON
Zastosowanie tej samej logiki w wielu akcjach kontrolera
135
136
137
Wysyanie danych do serwera
138
Przekazywanie skomplikowanych obiektów JSON
Wybór cznika modelu
Efektywne wysyanie i odbieranie danych JSON
140
141
143
Wykonywanie da AJAX midzy domenami
144
JSONP
Wczanie Cross-Origin Resource Sharing
144
147
Podsumowanie
148
Rozdzia 7. Platforma Web API ASP.NET ............................................................................. 149
Tworzenie usugi danych
149
Rejestracja tras Web API
Wykorzystanie techniki „konwencja przed konfiguracj”
Nadpisanie konwencji
Uycie API
151
151
152
153
Spis treci
Kup książkę
_
5
Poleć książkę
Stronicowanie i pobieranie danych
Obsuga wyjtków
Media
Podsumowanie
155
156
158
161
Rozdzia 8. Zaawansowane dane ....................................................................................... 163
Wzorce dostpu do danych
Klasy POCO
Uywanie wzorca repozytorium
Mapowanie obiektowo-relacyjne
Ogólny opis Entity Framework
Wybór podejcia w zakresie dostpu do danych
Wspóbieno w bazie danych
Tworzenie warstwy dostpu do danych
163
163
164
166
168
169
169
171
Podejcie Entity Framework Code First
Model domeny biznesowej aplikacji EBuy
Praca z kontekstem danych
171
173
176
Sortowanie, filtrowanie i stronicowanie danych
Podsumowanie
178
183
Rozdzia 9. Zapewnianie bezpieczestwa .......................................................................... 185
Tworzenie bezpiecznej aplikacji sieciowej
Obrona
Nigdy nie ufaj danym wejciowym
Wymuszanie stosowania reguy najmniejszych uprawnie
Przyjmuj zaoenie, e zewntrzne systemy s niebezpieczne
Ogranicz moliwoci ataku
Wycz niepotrzebne funkcje
Zabezpieczanie aplikacji
Zabezpieczanie aplikacji intranetowej
Uwierzytelnianie formularzy
Ochrona przed atakami
SQL Injection
Cross-Site Scripting
Cross-Site Request Forgery
Podsumowanie
185
185
186
186
186
186
187
187
188
193
200
201
206
207
209
Rozdzia 10. Programowanie na platformy mobilne ...........................................................211
Funkcje mobilne platformy ASP.NET MVC 4
Wiksza przyjazno aplikacji mobilnej
Tworzenie widoku mobilnego dla aukcji
Rozpoczcie pracy z jQuery Mobile
Usprawnianie widoku za pomoc jQuery Mobile
Unikanie widoków biurkowych w witrynie mobilnej
Usprawnianie wersji mobilnej witryny
6
_
211
213
214
215
218
223
224
Spis treci
Kup książkę
Poleć książkę
Technika Adaptive Rendering
225
Znacznik viewport
Wykrywanie funkcji mobilnych
Zapytania mediów CSS
Widoki dla konkretnych przegldarek internetowych
225
226
228
229
Tworzenie nowej aplikacji mobilnej zupenie od pocztku
231
Platforma jQuery Mobile
Szablon aplikacji mobilnej w ASP.NET MVC 4
Uywanie szablonu aplikacji mobilnej w ASP.NET MVC 4
232
232
233
Podsumowanie
236
Cz III. Zagadnienia zaawansowane ............................................................................... 237
Rozdzia 11. Operacje na danych przeprowadzane równolegle,
asynchronicznie i w czasie rzeczywistym .......................................................239
Kontroler asynchroniczny
239
Tworzenie kontrolera asynchronicznego
Kiedy uywa kontrolera asynchronicznego?
240
242
Asynchroniczna komunikacja w czasie rzeczywistym
242
Porównanie modeli aplikacji
Model HTTP polling
Model HTTP long polling
Zdarzenia wysyane przez serwer
WebSocket
Usprawnianie komunikacji w czasie rzeczywistym
Konfiguracja i dostrajanie
242
243
244
245
246
247
250
Podsumowanie
252
Rozdzia 12. Buforowanie ....................................................................................................253
Rodzaje buforowania
253
Buforowanie po stronie serwera
Buforowanie po stronie klienta
253
254
Techniki buforowania po stronie serwera
254
Buforowanie o zasigu dania
Buforowanie o zasigu uytkownika
Buforowanie o zasigu aplikacji
Bufor ASP.NET
Bufor danych wyjciowych
Buforowanie donut caching
Buforowanie donut hole caching
Buforowanie rozproszone
254
255
256
256
258
261
263
264
Techniki buforowania po stronie klienta
269
Dziaanie bufora przegldarki internetowej
AppCache
Local Storage
269
271
273
Podsumowanie
274
Spis treci
Kup książkę
_
7
Poleć książkę
Rozdzia 13. Techniki optymalizacji po stronie klienta ....................................................... 275
Anatomia strony
Anatomia HttpRequest
Najlepsze praktyki
Wykonuj mniejsz liczb da HTTP
Uywaj CDN
Dodawaj nagówek Expires lub Cache-Control
Komponenty skompresowane w formacie GZip
Umieszczaj arkusze stylów na pocztku pliku
Umieszczaj skrypty na kocu dokumentu
Korzystaj z zewntrznych skryptów i arkuszy stylów
Zmniejszanie liczby zapyta DNS
Minimalizacja plików JavaScript i CSS
Unikaj przekierowa
Usunicie powielajcych si skryptów
Konfiguracja nagówka ETag
Pomiar wydajnoci po stronie klienta
Wykorzystanie platformy ASP.NET MVC do pracy
Tworzenie paczek i minimalizacja
Podsumowanie
275
276
277
278
278
280
282
283
283
285
286
286
287
289
289
290
293
294
297
Rozdzia 14. Zaawansowany routing ..................................................................................299
Wayfinding
Adresy URL i techniki SEO
Tworzenie tras
Domylne parametry i opcjonalne trasy
Priorytet i kolejno tras
Routing do istniejcych plików
Ignorowanie tras
Trasy typu Catch-All
Ograniczenia trasy
Narzdzie Glimpse i trasy
Routing oparty na atrybutach
Rozszerzanie routingu
Mechanizm routingu
Podsumowanie
299
301
302
303
305
305
305
306
307
309
310
313
314
318
Rozdzia 15. Ponownie uywane komponenty interfejsu uytkownika ........................... 319
Co platforma ASP.NET MVC oferuje standardowo?
Widoki czciowe
Metody rozszerzajce HtmlHelper czy wasne metody?
Szablony Display i Editor
Html.RenderAction()
Przejcie o krok dalej
Razor Single File Generator
Tworzenie wielokrotnie wykorzystywanych widoków ASP.NET MVC
Tworzenie wielokrotnie uywanych metod pomocniczych ASP.NET MVC
8
_
319
319
319
320
320
321
321
323
327
Spis treci
Kup książkę
Poleć książkę
Testy jednostkowe dla widoków Razor
Podsumowanie
328
330
Cz IV. Kontrola jakoci .................................................................................................... 331
Rozdzia 16. Rejestrowanie informacji ................................................................................333
Obsuga bdów na platformie ASP.NET MVC
333
Wczanie wasnych bdów
Obsuga bdów w akcjach kontrolerów
Definiowanie globalnych procedur obsugi bdów
334
335
335
Rejestrowanie informacji i ledzenie
337
Rejestrowanie informacji o bdach
Monitorowanie stanu ASP.NET
337
340
Podsumowanie
342
Rozdzia 17. Zautomatyzowane testowanie .......................................................................343
Semantyka testowania
343
Rczne testowanie
Zautomatyzowane testowanie
344
345
Poziomy zautomatyzowanego testowania
345
Testy jednostkowe
Szybko (ang. fast)
Testy integracyjne
Testy akceptacyjne
345
347
348
349
Co to jest projekt zautomatyzowanych testów?
350
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 spenienia zalenoci
Testowanie widoków
350
351
354
354
357
358
360
363
364
368
Test pokrycia
370
Mit 100% wyniku testu pokrycia
372
Tworzenie kodu atwego do testowania
Podsumowanie
372
374
Rozdzia 18. Automatyzacja kompilacji .............................................................................. 375
Tworzenie skryptów kompilacji
376
Projekty Visual Studio s skryptami kompilacji!
Dodanie prostego zadania kompilacji
Przeprowadzanie kompilacji
Moliwoci s nieograniczone!
376
376
377
378
Spis treci
Kup książkę
_
9
Poleć książkę
Automatyzacja kompilacji
378
Rodzaje zautomatyzowanej kompilacji
Definiowanie zautomatyzowanej kompilacji
379
380
Ciga integracja
383
Wykrywanie problemów
Reguy cigej integracji
383
384
Podsumowanie
388
Cz V. Umieszczanie aplikacji sieciowej w internecie .....................................................389
Rozdzia 19. Wdraanie ....................................................................................................... 391
Co trzeba wdroy?
391
Podstawowe pliki witryny internetowej
Tre statyczna
Czego nie trzeba wdraa?
Bazy danych oraz inne zewntrzne zalenoci
Jakie s wymagania aplikacji EBuy?
391
394
394
395
396
Wdraanie na serwerze Internet Information Server
396
Przygotowania
Tworzenie i konfiguracja witryny internetowej na serwerze IIS
Publikowanie witryny z poziomu Visual Studio
397
397
399
Wdraanie za porednictwem Windows Azure
403
Tworzenie konta Windows Azure
Tworzenie nowej witryny internetowej Windows Azure
Publikacja witryny internetowej Windows Azure poprzez system kontroli wersji
Podsumowanie
403
404
404
406
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 treci
Kup książkę
Poleć książkę
ROZDZIA 10.
Programowanie na platformy mobilne
Sie mobilna to oferujce bardzo due moliwoci medium dostarczania treci wikszej grupie
uytkowników. Wraz ze zwikszajc si liczb uywanych smartfonów i rozwojem sieci
mobilnej uwzgldnienie urzdze mobilnych podczas przygotowywania projektów staje si
coraz waniejsze.
Najwikszy problem podczas przygotowywania aplikacji do jej uywania w sieci mobilnej
polega na tym, e nie wszystkie urzdzenia mobilne s tworzone w taki sam sposób. Poszczególne urzdzenia maj róne moliwoci sprztowe i zainstalowane przegldarki internetowe,
a take odmienne funkcje, np. w zakresie dotykowej obsugi urzdzenia itd. Przystosowanie
witryny internetowej do prawidowego i spójnego dziaania w rónych urzdzeniach mobilnych
nie jest atwym zadaniem.
W tym rozdziale dowiesz si, jak uywa funkcji oferowanych przez platform ASP.NET
MVC — w szczególnoci nowych funkcji, które pojawiy si w wersji 4. platformy — w celu
zapewnienia prawidowego i spójnego dziaania witryny internetowej na maksymalnej liczbie
urzdze mobilnych. Przekonasz si równie, co zrobi w sytuacji, gdy dla danego urzdzenia
mobilnego nie mona zaoferowa prawidowej obsugi witryny internetowej, któr tworzysz.
Funkcje mobilne platformy ASP.NET MVC 4
Poczwszy od wersji 3., platforma ASP.NET MVC oferuje zestaw funkcji uatwiajcych tworzenie mobilnych wersji witryn internetowych. Funkcje te zostay usprawnione w wersji 4. platformy.
Ponisza lista przedstawia krótki opis funkcji pomagajcych w tworzeniu wersji mobilnej
aplikacji sieciowej, wprowadzonych w ASP.NET MVC 4. W pozostaej czci rozdziau przekonasz si, jak wykorzysta te funkcje w tworzonej aplikacji sieciowej.
Szablon aplikacji mobilnej w ASP.NET MVC 4
Jeeli ju od samego pocztku chcesz utworzy jedynie mobiln wersj aplikacji sieciowej, platforma ASP.NET MVC 4 oferuje szablon Mobile Application, który pozwala na
natychmiastowe przystpienie do tworzenia wersji mobilnej aplikacji sieciowej. Podobnie
jak w przypadku szablonów zwykych aplikacji MVC, w szablonie mobilnym platforma
umieszcza ju pewien kod odpowiedzialny za wygenerowanie widoków dla urzdze
mobilnych, przeprowadza konfiguracj pakietów jQuery Mobile MVC NuGet oraz tworzy
szkielet aplikacji. Dokadne omówienie szablonu aplikacji mobilnej znajdziesz w dalszej czci
rozdziau, w podrozdziale zatytuowanym „Szablon aplikacji mobilnej w ASP.NET MVC 4”.
211
Kup książkę
Poleć książkę
Tryby wywietlania
Aby mona byo jeszcze atwiej dostosowa aplikacj sieciow do rónych urzdze, platforma ASP.NET MVC 4 oferuje tak zwane tryby wywietlania — to funkcja odpowiedzialna za
wykrycie i przygotowanie odpowiedniego widoku dla poszczególnych urzdze.
Poszczególne urzdzenia mobilne maj róne rozdzielczoci ekranu, inne zachowanie
przegldarek internetowych, a nawet odmienne funkcje, które mog by wykorzystane
przez aplikacje sieciowe. Zamiast próbowa dopasowa dany widok do maksymalnej liczby rónych urzdze, lepszym rozwizaniem jest umieszczenie poszczególnych zachowa
i funkcji w oddzielnych widokach przeznaczonych dla konkretnych urzdze.
Zaómy, e masz przygotowany widok o nazwie Index.cshtml, przeznaczony dla zwykych urzdze biurkowych. Otrzymujesz zadanie przygotowania mobilnej wersji tego
widoku przeznaczonej do wywietlania na smartfonach i tabletach. Dziki uyciu trybów
wywietlania moesz przygotowa odpowiednie wersje widoku dla rónych urzdze,
np. Index.iPhone.cshtml i Index.iPad.cshtml, a nastpnie podczas uruchamiania aplikacji zarejestrowa je za pomoc dostawcy widoku na platformie ASP.NET MVC 4. Opierajc si
na kryteriach filtrowania, platforma ASP.NET MVC 4 moe automatycznie wyszuka
widok zawierajcy odpowiedni przyrostek (iPhone lub iPad) i wywietli ten widok zamiast standardowego, przeznaczonego dla urzdze biurkowych. (Zwró uwag, jak dla
widoków alternatywnych platforma ASP.NET MVC stosuje prost konwencj nadawania
nazw plikom w postaci nazwa_widoku.urzdzenie.rozszerzenie). W znajdujcym si w dalszej
czci rozdziau podrozdziale zatytuowanym „Widoki dla konkretnych przegldarek
internetowych” przekonasz si, jak uy tej funkcji w celu zapewnienia obsugi rónych
urzdze.
Nadpisanie zwykych widoków ich wersjami mobilnymi
Platforma ASP.NET MVC 4 wprowadzia prosty mechanizm pozwalajcy na nadpisanie
dowolnego widoku (wczajc w to ukady graficzne i widoki czciowe) dla poszczególnych przegldarek internetowych, w tym take dla przegldarek internetowych uywanych w urzdzeniach mobilnych. Aby dostarczy widok przeznaczony dla urzdzenia
mobilnego, konieczne jest utworzenie pliku widoku zawierajcego w nazwie czon .Mobile.
Na przykad przygotowanie mobilnej wersji widoku Index wymaga utworzenia jego kopii wraz z wymienionym wczeniej czonem w nazwie (Views\Home\Index.Mobile.cshtml);
platforma ASP.NET automatycznie wygeneruje ten (zamiast biurkowego) widok w mobilnej
wersji przegldarki internetowej. Warto doda, e wprawdzie funkcja trybów wywietlania
pozwala na wskazanie widoku dla konkretnej przegldarki internetowej w urzdzeniu
mobilnym, ale odbywa si to na ogólniejszym poziomie. Takie rozwizanie bdzie uyteczne,
jeli widoki s wystarczajco ogólne, aby mogy by prawidowo wywietlane w rónych
mobilnych wersjach przegldarek internetowych. T funkcj moesz równie stosowa,
jeli uywasz platformy takiej jak jQuery Mobile, która zapewnia spójne dziaanie aplikacji
na wikszoci platform mobilnych.
Platforma jQuery Mobile
Platforma jQuery Mobile przynosi aplikacjom sieciowym cae bogactwo i uyteczno bibliotek jQuery oraz jQuery UI. Zamiast zmaga si z niespójnociami dziaania przegldarek internetowych w rónych urzdzeniach mobilnych, moesz po prostu utworzy
jedn aplikacj sieciow, która bdzie dziaa we wszystkich urzdzeniach mobilnych.
Platforma ta oferuje korzyci wynikajce z moliwoci stosowania technik progresywnych usprawnie i zapewnia elastyczny projekt, dziki któremu starsze urzdzenia nadal
212
_
Rozdzia 10. Programowanie na platformy mobilne
Kup książkę
Poleć książkę
otrzymuj funkcjonaln (cho niekoniecznie adn i bogat w funkcje) aplikacj, podczas
gdy nowe urzdzenia korzystaj z peni moliwoci dostarczanych przez funkcje jzyka
HTML5. Platforma jQuery Mobile doskonale obsuguje motywy, co pozwala na utworzenie niepowtarzalnej witryny bez koniecznoci rezygnowania z zalet wynikajcych z progresywnych uaktualnie. W rozdziale tym przekonasz si, jak dziki platformie jQuery
Mobile mona przenie aplikacj na kolejny poziom.
Wiksza przyjazno aplikacji mobilnej
Tematyka zwizana z programowaniem na platformy mobilne jest obszerna i obejmuje wiele
aspektów, które twórca witryny internetowej musi uwzgldni, aby utworzy tego rodzaju
witryn. Prawdopodobnie najwaniejszym aspektem jest najlepszy sposób dostarczenia informacji uytkownikom oraz interakcja z uytkownikami.
We
pod uwag aplikacj sieciow dla urzdzenia biurkowego, w którym okno przegldarki
internetowej jest wywietlone na duym ekranie, a uytkownik ma do dyspozycji szybkie i niezawodne poczenie internetowe, natomiast interakcj z aplikacj sieciow prowadzi za pomoc klawiatury i myszy. Z kolei aplikacje mobilne z reguy s wywietlane na niewielkich
ekranach, internet nie zawsze jest szybki i niezawodny, natomiast do wprowadzania danych
suy najczciej piórko bd
kilka palców.
Wymienione ograniczenia niewtpliwie prowadz do zmniejszenia iloci dostarczanej treci
oraz liczby oferowanych funkcji w porównaniu z aplikacjami sieciowymi przeznaczonymi
dla przegldarek internetowych dziaajcych w urzdzeniach biurkowych. Jednak aplikacje
mobilne dostarczaj pewnych moliwoci, które zazwyczaj nie istniej w tradycyjnych aplikacjach sieciowych; s to np. obsuga danych dotyczcych geograficznego pooenia urzdzenia
mobilnego, wiksze moliwoci komunikacji, obsuga komunikacji audio i wideo itd.
Trafne okrelenie wymaga uytkowników aplikacji to pierwszy krok podczas przygotowywania strategii tworzenia aplikacji mobilnej. Przeanalizuj przedstawione poniej przykady
sposobów wykorzystania urzdze mobilnych.
x Spacer po ulicy i jednoczesne sprawdzanie poczty e-mail (od czasu do czasu podnoszenie
przy tym gowy, aby nie uderzy w latarni).
x Podró komunikacj miejsk i jednoczesne czytanie najnowszych wiadomoci.
x Popijanie kawy w kawiarni — uytkownik jedn rk trzyma filiank z kaw, natomiast
drug urzdzenie mobilne, w którym sprawdza wysoko salda na koncie.
Sytuacje te maj jedn wspóln cech — uytkownik dzieli swoj uwag, próbujc jak najszybciej wykona pewne zadania i przej do kolejnych w dniu wypenionym po brzegi rónymi zajciami.
Dla twórcy witryny internetowej oznacza to, e powinna ona koncentrowa si na dostarczaniu uytkownikowi treci w dany przez niego sposób, szybko, zrozumiale i odpowiednio
do wykonywanego zadania.
Wiksza przyjazno aplikacji mobilnej
Kup książkę
_
213
Poleć książkę
Tworzenie widoku mobilnego dla aukcji
Podczas tworzenia mobilnej aplikacji sieciowej prac rozpoczynasz od dodania do istniejcej
aplikacji widoków przeznaczonych dla urzdze mobilnych lub od utworzenia zupenie od
pocztku nowej aplikacji mobilnej. Ten wybór zaley od wielu czynników; oba podejcia
maj swoje wady i zalety. Jak si przekonasz, platforma ASP.NET MVC oferuje narzdzia
pomagajce w pracy w obu przypadkach.
Skoncentrujemy si teraz na dodaniu widoku mobilnego do istniejcego widoku dla urzdzenia biurkowego, a nastpnie bdziemy 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 Auctions.Mobile.cshtml, co wskazuje, e widok jest przeznaczony dla urzdzenia mobilnego.
Aby zrónicowa generowane widoki, zmieniamy take nagówek <h1> w widoku mobilnym
na Aukcje mobilne.
Utworzenie widoku mobilnego mona potwierdzi poprzez uruchomienie aplikacji sieciowej
i wywietlenie strony aukcji w przegldarce internetowej dla urzdzenia mobilnego. Wynik
tej operacji pokazano na rysunku 10.1.
Rysunek 10.1. Platforma ASP.NET MVC potrafi wykry
i automatycznie wygenerowa
widok
dla urzdzenia mobilnego
214
_
Rozdzia 10. Programowanie na platformy mobilne
Kup książkę
Poleć książkę
Jak moesz zobaczy na rysunku, nagówek Aukcje mobilne potwierdza wywietlenie widoku
mobilnego (przejcie na stron aukcji w biurkowej wersji przegldarki internetowej powoduje
wywietlenie zwykego widoku wraz z nagówkiem Aukcje). Tryby wywietlania to funkcja
platformy pozwalajca na wykrycie przegldarki internetowej uywanej przez klienta i wygenerowanie dla niej odpowiedniego widoku.
Kiedy danie przychodzi z urzdzenia mobilnego, platforma ASP.NET MVC 4 nie ogranicza
si jedynie do automatycznego wczytania widoku mobilnego. W rzeczywistoci wczytuje take
mobilne wersje ukadów graficznych i widoków czciowych — pakiet jQuery.Mobile.MVC jest
wykorzystywany do utworzenia opartego na jQuery Mobile ukadu graficznego zoptymalizowanego dla urzdze mobilnych.
Rozpoczcie pracy z jQuery Mobile
jQuery Mobile pozwala na szybkie usprawnienie istniejcego widoku i utworzenie na jego
podstawie widoku dla urzdze mobilnych, który bdzie mia rodzimy dla nich wygld i rodzime zachowanie. Moliwe jest take uycie motywu w aplikacji; technika uaktualnie progresywnych powoduje, e starsze wersje przegldarek internetowych otrzymuj nieco zredukowan (niezbyt atrakcyjn wizualnie), ale funkcjonujc i uyteczn stron.
Aby móc uywa 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
Wiksza przyjazno aplikacji mobilnej
Kup książkę
_
215
Poleć książkę
Pakiet ten powoduje dodanie nastpujcych 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 urzdze mobilnych.
Views/Shared/_Layout.Mobile.cshtml
Ukad graficzny zoptymalizowany dla urzdze mobilnych i odwoujcy si do plików platformy jQuery Mobile (JavaScript i CSS). Platforma ASP.NET MVC bdzie automatycznie
wczytywaa ten ukad dla widoków mobilnych.
Komponent przeczania widoku
Skada si z widoku czciowego Views/Shared/_ViewSwitcher.cshtml oraz kontrolera
ViewSwitcherController.cs. Ten komponent powoduje wywietlenie w mobilnej przegldarce
internetowej cza pozwalajcego uytkownikowi na przejcie do strony w wersji dla urzdzenia biurkowego. Sposób dziaania tego komponentu zostanie omówiony w dalszej czci
tego rozdziau, w podrozdziale „Przeczanie pomidzy widokami mobilnym i zwykym”.
Platforma jQuery Mobile nadal jest w fazie opracowywania, wic po jej zainstalowaniu
moe si okaza, e jej pliki s w nowszych wersjach ni wymienione w ksice.
Aby umoliwi platformie jQuery Mobile nadanie stronie odpowiedniego stylu, przejd
do
pliku Views/Shared/_Layout.Mobile.cshtml i zmodyfikuj jego tre w taki sposób, aby odpowiadaa
poniszemu 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>
Nastpnie zmodyfikuj plik Auctions.Mobile.cshtml i zoptymalizuj go dla ukadu graficznego
przeznaczonego dla urzdze 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
Kup książkę
Poleć książkę
@foreach (var auction in Model)
{
<li>
@Html.Partial("_AuctionTile", auction);
</li>
}
</ul>
Po wprowadzeniu wymienionych zmian skompiluj i uruchom aplikacj, a nastpnie wywietl
stron gówn aplikacji w mobilnej wersji przegldarki internetowej. Zwró uwag na zmiany
w stosunku do wersji biurkowej. Na ekranie powiniene zobaczy stron podobn do pokazanej na rysunku 10.3.
Rysunek 10.3. Aplikacja EBuy zoptymalizowana dla ukadu graficznego przeznaczonego dla urzdze
mobilnych
Moesz zobaczy, jak widok Auctions zosta zmieniony w celu jego dostosowania do przegldarki internetowej urzdzenia mobilnego. Wprawdzie wygld strony nie jest perfekcyjny, ale
pakiet jQuery Mobile dostarcza podstaw, na bazie których moesz szybko i atwo tworzy
widoki mobilne.
Wiksza przyjazno aplikacji mobilnej
Kup książkę
_
217
Poleć książkę
Usprawnianie widoku za pomoc jQuery Mobile
Pakiet jQuery.Mobile.MVC wykonuje wiksz cz pracy za programist, ale interfejs uytkownika witryny internetowej nadal nie przypomina rodzimej aplikacji dla urzdzenia mobilnego.
Na szczcie platforma jQuery Mobile dostarcza wielu komponentów i stylów, dziki którym
aplikacja otrzyma widok naprawd przypominajcy aplikacj mobiln.
Usprawnianie listy aukcji za pomoc komponentu listview platformy jQuery Mobile
Prac rozpoczynamy od usprawnienia listy aukcji poprzez uycie komponentu listview platformy jQuery Mobile. W celu przeprowadzenia wikszoci transformacji mobilnych platforma
jQuery Mobile operuje na atrybutach data-role. Aby zatem wygenerowa list aukcji jako
listview, koniecznie naley 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 nastpujcy sposób zmodyfikowa widok czciowy _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 wywietleniu widoku Auctions w mobilnej wersji przegldarki internetowej otrzymasz teraz
znacznie adniejsz list aukcji (rysunek 10.4).
Biorc pod uwag to, e element <ul> to w rzeczywistoci lista, moesz uzna za zbyteczne
dodawanie roli listview. Element <ul> wywietla list, ale obszar cza bdzie zbyt may, aby
mona byo klikn go w urzdzeniu mobilnym wyposaonym w niewielki ekran. Zadaniem
atrybutu data-role="listview" jest umoliwienie powikszania obszaru cza i uatwienie
uytkownikom naciskania elementów listy.
218
_
Rozdzia 10. Programowanie na platformy mobilne
Kup książkę
Poleć książkę
Rysunek 10.4. Zawarto
znacznika <ul> wygenerowana przez platform jQuery Mobile jako listview
Umoliwianie przeszukiwania listy aukcji
dziki komponentowi „data filter” platformy jQuery Mobile
Kolejnym krokiem jest zwikszenie przyjaznoci widoku poprzez dodanie uytecznego pola
wyszukiwania, pozwalajcego uytkownikowi na szybkie filtrowanie listy aukcji. Dziki platformie 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 odwieeniu strony w mobilnej wersji przegldarki internetowej powiniene zobaczy na
górze strony pole wyszukiwania (rysunek 10.5).
Wiksza przyjazno aplikacji mobilnej
Kup książkę
_
219
Poleć książkę
Rysunek 10.5. Dziki platformie jQuery Mobile list aukcji mona przeszukiwa
Wprowad
tekst w polu wyszukiwania i zobacz, jak platforma jQuery Mobile automatycznie
filtruje list, wywietlajc jedynie te aukcje, które zostay dopasowane do wprowadzonego
przez Ciebie tekstu (rysunek 10.6).
Przekonae si, jak platforma jQuery Mobile uatwia transformacj dowolnej strony, aby wywietlona w urzdzeniu docelowym miaa dla niego rodzimy wygld i sposób dziaania.
Oprócz wymienionych funkcji jQuery Mobile oferuje take wiele innych uytecznych komponentów, które moesz wykorzysta w widokach witryny internetowej, czynic je tym samym
bardziej dostosowanymi dla uytkowników urzdze mobilnych. Pen list odpowiednich
atrybutów znajdziesz na stronie dokumentacji API platformy jQuery Mobile pod adresem
http://jquerymobile.com/test/docs/api/data-attributes.html.
Przeczanie pomidzy widokami mobilnym i zwykym
Kiedykolwiek dostarczasz wersj mobiln witryny internetowej, ogólnie rzecz biorc, dobrym
rozwizaniem jest automatyczne przekierowanie uytkowników urzdze mobilnych do odpowiedniej wersji witryny. Warto jednak zapewni im moliwo przejcia do penej wersji
witryny internetowej przeznaczonej dla urzdze biurkowych.
220
_
Rozdzia 10. Programowanie na platformy mobilne
Kup książkę
Poleć 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 pozwalajce uytkownikom na przejcie
do „widoku zwykego”. To jest widget ViewSwitcher zainstalowany jako cz pakietu NuGet
jQuery.Mobile.MVC.
Aby dowiedzie si, jaki jest sposób dziaania tego widgetu, konieczne bdzie zagbienie si
w komponenty platformy jQuery Mobile.
Spójrz na nowy widok czciowy o nazwie _ViewSwitcher.cshtml, w którym znajdziesz nastpujcy kod znaczników:
@if (Request.Browser.IsMobileDevice && Request.HttpMethod == "GET")
{
<div class="view-switcher ui-bar-a">
@if (ViewContext.HttpContext.GetOverriddenBrowser().IsMobileDevice)
{
@: Wywietlenie widoku mobilnego.
@Html.ActionLink("Widok zwyky", "SwitchView", "ViewSwitcher",
new { mobile = false, returnUrl = Request.Url.PathAndQuery },
new { rel = "external" })
}
else
{
Wiksza przyjazno aplikacji mobilnej
Kup książkę
_
221
Poleć książkę
@: Wywietlenie widoku zwykego.
@Html.ActionLink("Widok mobilny", "SwitchView", "ViewSwitcher",
new { mobile = true, returnUrl = Request.Url.PathAndQuery },
new { rel = "external" })
}
</div>
}
Wartoci zwrotn metody GetOverridenBrowser() jest obiekt HttpBrowserCapabilities zawierajcy moliwoci oferowane przez nadpisywan przegldark internetow lub aktualnie uywan,
jeli nie jest nadpisywana. W ten sposób moesz sprawdzi, czy urzdzenie, które wykonao
danie, jest urzdzeniem mobilnym. Nastpnie widget okrela widok, który powinien zosta
wygenerowany, oraz tworzy odpowiednie cza pozwalajce na przeczanie pomidzy widokami mobilnym i zwykym.
Bonusem jest ustawienie waciwoci mobile w sowniku RouteValue, wskazujcej aktualnie
aktywny widok.
Spójrz teraz na klas ViewSwitcherController zawierajc logik odpowiedzialn za przeczanie
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 zalenoci od tego, czy danie pochodzi z urzdzenia mobilnego (na co wskazuje warto
waciwoci Request.Browser.IsMobileDevice), kontroler uywa metod ClearOverriddenBrowser()
i SetOverriddenBrowser() w celu poinformowania platformy ASP.NET MVC o sposobie traktowania dania. Nastpnie platforma wywietla odpowiedni wersj witryny, mobiln dla
urzdzenia mobilnego lub pen dla urzdzenia biurkowego.
Przedstawiony poniej fragment kodu umie przez zamykajcym znacznikiem <body> w pliku
Layout.Mobile.cshtml w celu wygenerowania widoku czciowego ViewSwitcher jako stopki (rysunek 10.7):
<div data-role="footer">
@Html.Partial("_ViewSwitcher")
</div>
222
_
Rozdzia 10. Programowanie na platformy mobilne
Kup książkę
Poleć książkę
Rysunek 10.7. Przecznik widoku wywietlony w stopce strony
Po klikniciu cza Widok zwyky nastpi wywietlenie zwykej wersji widoku Auctions. Zwró
jednak uwag, e widok zwyky nie zawiera cza pozwalajcego na przejcie do widoku
mobilnego. Aby to naprawi, przejd
do widoku wspódzielonego _Layout.cshtml i umie w nim
poniszy wiersz kodu:
@Html.Partial("_ViewSwitcher")
Uruchom aplikacj; w mobilnej wersji przegldarki internetowej przejd
do dowolnej strony.
Przekonasz si, e przecznik widoków generuje cza pozwalajce na przeczanie pomidzy widokami zwykym i mobilnym (rysunek 10.8).
Unikanie widoków biurkowych w witrynie mobilnej
Na pewno zauwaysz, e w przypadku braku mobilnej wersji widoku platforma ASP.NET MVC
powoduje wygenerowanie wersji biurkowej widoku w mobilnym ukadzie graficznym strony.
Trzymanie si standardów podczas tworzenia kodu znaczników pomaga w wywietlaniu
w miar uytecznego widoku, ale mog zdarza si sytuacje, w których po prostu bdziesz
wola unikn takiego zachowania platformy.
Wiksza przyjazno aplikacji mobilnej
Kup książkę
_
223
Poleć książkę
Rysunek 10.8. Przecznik widoków wywietlony w widoku biurkowym strony
W tym celu naley przypisa warto true waciwoci RequireConsistentDisplayMode:
@{
Layout = "~/Views/Shared/_Layout.cshtml";
DisplayModeProvider.Instance.RequireConsistentDisplayMode = true;
}
Po wprowadzeniu powyszej zmiany aden widok domylny (to znaczy niemobilny) nie zostanie wygenerowany w mobilnym ukadzie graficznym strony. Ustawienie moesz wprowadzi take globalnie dla wszystkich widoków poprzez przypisanie wartoci true wymienionej waciwoci w pliku /Views/_ViewStart.cshtml.
Usprawnianie wersji mobilnej witryny
Mobilne wersje przegldarek internetowych maj moliwo wywietlania stron HTML,
przynajmniej do pewnego stopnia. Jednak poleganie w caoci na przegldarce internetowej
podczas wywietlania strony wcale nie gwarantuje uzyskania najlepszych wyników. Wynika
to z faktu, e przegldarki internetowe maj jedynie ograniczone moliwoci w zakresie
zmiany wielkoci strony i obrazów. Tylko autor moe zadecydowa, które elementy s najwaniejsze i tym samym powinny by wyrónione na maym ekranie oraz które s mniej wane,
przez co mona je po prostu pomin. Dlatego te Twoim obowizkiem jest zapewnienie witrynie adnego wygldu i umoliwienie jej funkcjonalnego dziaania w rónych przegldarkach
internetowych.
Na szczcie moesz wykorzysta techniki Adaptive Rendering i usprawnienia progresywne
w celu poprawienia sposobu wywietlania witryny. Dziki platformom ASP.NET MVC 4 i jQuery
Mobile jest to do atwe zadanie, o czym si przekonasz w poniszych podrozdziaach.
224 _
Rozdzia 10. Programowanie na platformy mobilne
Kup książkę
Poleć książkę
Technika Adaptive Rendering
Adaptive Rendering to technika pozwalajca widokowi na „zaadaptowanie” moliwoci oferowanych przez przegldark internetow. Przyjmujemy zaoenie, e na stronie znajduje si
mnóstwo kart, a kliknita karta powoduje wykonanie dania AJAX w celu pobrania treci
i jej wywietlenia. W przypadku wyczonej obsugi jzyka JavaScript karta nie bdzie w stanie
wywietli treci danej przez uytkownika. Jednak gdy bdzie stosowana technika Adaptive
Rendering, karta bdzie po prostu zawieraa adres URL prowadzcy do zasobu z treci, a tym
samym uytkownik uzyska dostp do danej treci.
Innym przykadem moe by pasek nawigacyjny zawierajcy poziom list czy. Wprawdzie
przedstawia si on dobrze w urzdzeniu biurkowym, ale na maym ekranie urzdzenia mobilnego moe by przytaczajcy. Dziki technice Adaptive Rendering pasek nawigacyjny bdzie
móg zosta wywietlony jako rozwijane menu, co oznacza dostosowanie jego funkcjonalnoci
do urzdzenia o mniejszym ekranie.
Zalet omawianej techniki jest moliwo wywietlenia „funkcjonalnej” lub inaczej „uytecznej”
wersji witryny w rónych przegldarkach internetowych i urzdzeniach. Sam poziom usugi
moe by zaleny od moliwoci oferowanych przez poszczególne urzdzenia, ale witryna
mimo wszystko nadal pozostanie uyteczna.
Jeeli chcesz, aby uytkownicy nieustannie powracali na Twoj witryn, musisz zagwarantowa im przyjemno z korzystania z niej niezalenie od tego, jakich uywaj urzdze.
Platforma ASP.NET MVC 4 zapewnia techniki adaptacyjne poprzez jQuery Mobile.
Znacznik viewport
W grafice komputerowej pojcie viewport oznacza wywietlany prostoktny obszar. W przypadku
przegldarki internetowej jest to jej okno, w którym nastpuje wywietlanie dokumentu HTML.
Innymi sowy, to wyimaginowana konstrukcja zawierajca znacznik <html>, który z kolei jest
elementem gównym dla caego kodu znaczników strony.
Co si dzieje w przypadku powikszania lub pomniejszania (zmiana stopnia przyblienia) okna
przegldarki internetowej? A co si stanie po zmianie orientacji urzdzenia? Czy viewport
równie ulegnie zmianie?
W wiecie urzdze mobilnych udzielenie odpowiedzi na powysze pytania jest nieco utrudnione, poniewa w rzeczywistoci nie istnieje jeden, ale s dwa viewporty — jeden dla „ukadu
graficznego” oraz jeden „wizualny”.
Viewport ukadu graficznego nigdy nie ulega zmianie — to jest wyimaginowana konstrukcja
stanowica ogranicznik dla znacznika <html> strony. Podczas zmiany poziomu przyblienia
strony lub orientacji urzdzenia zmienia si viewport wizualny, co wpywa na elementy wywietlane na ekranie urzdzenia.
Rol viewportu powiniene postrzega jako sposób zapewnienia uytkownikom funkcjonalnej
i uytecznej witryny internetowej. Kiedy strona jest generowana w urzdzeniu mobilnym, jej
szeroko nie powinna by ani zbyt dua, ani zbyt maa — powinna by idealnie dopasowana
do ekranu. Ponadto strona dopasowana do szerokoci ekranu nie powinna by wywietlana
jako mikroskopijna, zmniejszona wersja penej strony; powinna to by wersja odpowiednio
dostosowana, czytelna.
Technika Adaptive Rendering
Kup książkę
_
225
Poleć książkę
W nowoczesnych przegldarkach internetowych to nie CSS, ale znacznik <meta name="viewport">
pozwala na zdefiniowanie wymiarów wizualnego viewportu:
<meta name="viewport" content="width=device-width" />
Uyta w powyszym kodzie warto "width=device-width" jest wartoci specjaln i oznacza,
e szeroko viewportu odpowiada rzeczywistej szerokoci ekranu urzdzenia. To najbardziej
elastyczna i najczciej uywana warto.
Waciwoci content mona przypisa konkretn warto liczbow, o ile tre bdzie zaadaptowana w ten sposób:
<meta name="viewport" content="width=320px" />
Po uyciu powyszego kodu niezalenie od szerokoci ekranu urzdzenia tre zawsze bdzie
miaa szeroko 320 pikseli. Oznacza to, e uytkownicy wikszych ekranów bd musieli j
powiksza, natomiast mniejszych — zmniejsza.
Znacznik <meta name="viewport"> jest standardem przemysowym, ale w rzeczywistoci nie jest czci standardu W3C.
Wymieniona funkcja zostaa po raz pierwszy zaimplementowana w przegldarce internetowej iPhone’a i bardzo szybko — ze wzgldu na du popularno tego smartfona
— zacza by obsugiwana take przez innych producentów urzdze mobilnych.
Wykrywanie funkcji mobilnych
Poniewa kade urzdzenie mobilne obsuguje odmienny zestaw funkcji, nigdy nie moesz
przyjmowa zaoenia, e konkretna funkcja bdzie dostpna w kadej przegldarce internetowej.
Przyjmujemy zaoenie, e aplikacja uywa funkcji Web Storage HTML5 obsugiwanej wprawdzie przez wiele smartfonów (np. iPhone, Android, Blackberry i Windows Phone), ale jednoczenie nieobsugiwanej przez pozostae.
Programici stosowali zazwyczaj takie techniki jak wykrywanie rodzaju przegldarki internetowej, aby sprawdzi, czy aplikacja moe by uruchomiona w danej przegldarce.
Zamiast wic sprawdza, czy funkcja Web Storage jest obsugiwana, w podejciu klasycznym
sprawdza si, czy uywan przegldark internetow jest Opera Mini.
Tego rodzaju podejcie wie si jednak z pewnymi wadami; niektóre z nich podano poniej.
x Potencjalne wykluczenie przegldarek internetowych, które nie zostay wykluczone wy-
ra
nie, ale obsuguj dan funkcj.
x Niebezpieczestwo nieprawidowego dziaania witryny internetowej, jeli uytkownik
wywietli j z poziomu innego urzdzenia.
Oto przykad omówionego podejcia.
// Ostrzeenie: 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
Kup książkę
Poleć książkę
else if (document.layers) {
// Navigator 4
document.write('<link rel="stylesheet" type="text/css" src="style-nn.css">');
}
Zwró uwag, e powyszy fragment kodu dostarcza arkusze stylów jedynie dla przegldarek Internet Explorer i Netscape Navigator 4 pomimo tego, e przegldarka internetowa musi mie wczon obsug JavaScript. Oznacza to, e w innych przegldarkach internetowych,
takich jak Netscape 6, Netscape 7, CompuServe 7, Mozilla i Opera, dana witryna internetowa
moe nie by wywietlona prawidowo.
Nawet jeli zapewnisz wyra
n obsug wikszoci przegldarek internetowych, nadal moesz pomin nowe wersje przegldarek zawierajce ju obsug funkcji wymaganych do
prawidowego dziaania witryny.
Inny potencjalny problem wie si z bdn identyfikacj przegldarki internetowej.
Poniewa mechanizm wykrywania przegldarki internetowej w duej mierze opiera si na
zgadywaniu na podstawie cigu tekstowego okrelajcego agenta uytkownika i na pewnych
waciwociach, to istnieje niebezpieczestwo bdnej identyfikacji pewnych przegldarek
internetowych.
// Ostrzeenie: nie uywaj tego kodu!
if (document.all) {
// Internet Explorer 4+
elm = document.all['menu'];
}
else {
// Przyjmujemy zaoenie, e przegldarka to Navigator 4.
elm = document.layers['menu'];
}
Zwró uwag na stosowany przez powyszy kod podzia przegldarek internetowych. Jeli
przegldarka nie zostanie rozpoznana jako Internet Explorer, to kod uznaje j za przegldark Netscape Navigator 4 i nastpuje próba uycia warstw.
To czsto spotykane ródo problemów podczas uywania przegldarek Opera i przegldarek opartych na silniku Gecko.
Wynika z tego, e najlepszym rozwizaniem jest wyra
ne sprawdzenie istnienia danej funkcji
zamiast przyjmowanie zaoenia o jej obsudze bd
braku obsugi przez konkretne wersje
poszczególnych przegldarek.
Poniej przedstawiono wczeniejszy fragment kodu, ale zmodyfikowany w celu wykrywania
obsugi konkretnych funkcji zamiast przegldarek.
// Jeeli obsugiwana jest funkcja localStorage, naley jej uy.
if (('localStorage' in window) && window.localStorage !== null) {
// atwa w uyciu waciwo obiektu.
localStorage.wishlist = '["Unicorn","Narwhal","Deathbear"]';
} else {
// W przypadku braku sessionStorage konieczne jest uycie 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
Kup książkę
_
227
Poleć książkę
Powyszy fragment kodu nie tylko jest znacznie bardziej niezawodny, ale równie bdzie
doskonale odgrywa swoj rol w przyszoci — kada przegldarka, w której zostanie dodana obsuga funkcji Web Storage, otrzyma dostp do nowych funkcji aplikacji.
Zapytania mediów CSS
Zapytania CSS media to technika usprawnie progresywnych, która pozwala na zaadaptowanie i wywietlanie alternatywnych stylów w zalenoci od przegldarki 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 zwanych zapyta mediów, czyli technik rozszerzajc koncepcj pomagajc wykrywa w standardowy sposób funkcje oferowane przez przegldarki internetowe.
Niestety, specyfikacja CSS3 nadal pozostaje w fazie „rekomendacji”, co oznacza, e
zapytania mediów — oraz oczywicie inne nowe funkcje wprowadzone w specyfikacji CSS3 — niekoniecznie s doskonale obsugiwane przez wszystkie przegldarki
internetowe.
Dlatego te bardzo wane jest przygotowanie stylów domylnych dostarczanych
przegldarkom internetowym, które nie obsuguj nowych funkcji.
Wczeniej dowiedziae si, jak znacznik viewport pozwala na zdefiniowanie domylnej szerokoci na podstawie ekranu urzdzenia. Wprawdzie viewport powoduje, e strona wyglda
dobrze w standardowej wielkoci, ale nie bdzie pomocny, gdy uytkownik zechce powikszy lub zmniejszy stron w urzdzeniu.
Wraz ze zmian ukadu graficznego konieczne jest znalezienie sposobu na poinformowanie
przegldarki internetowej, jak ograniczy tre do konkretnej szerokoci, aby bya wywietlana poprawnie w kadej sytuacji.
Spójrz na prosty przykad rozwizania opartego na zapytaniu mediów CSS:
body {background-color:blue;}
@media only screen and (max-width: 800px) {
body {background-color:red;}
}
Reguy CSS s wykonywane od pocztku pliku do koca, wic rozpoczynamy od umieszczenia ogólnej reguy definiujcej niebieski kolor ta strony.
Nastpnie znajduje si regua przeznaczona dla konkretnego urzdzenia — wykorzystane
zostaje zapytanie mediów CSS. Regua powoduje zmian koloru ta na czerwony w urzdzeniach, których szeroko ekranu nie przekracza 800 pikseli.
W urzdzeniach obsugujcych zapytania mediów CSS i posiadajcych ekran o szerokoci
poniej 800 pikseli to bdzie wywietlone w kolorze czerwonym. Natomiast w pozostaych
urzdzeniach kolorem ta pozostaje niebieski. (Zauwa, e zmiana koloru ta podczas zmiany
wielkoci strony nie jest operacj wykonywan w rzeczywistych aplikacjach. Zamiast tego
w omówionym przykadzie koncentrujemy si na pokazaniu sposobu uywania zapytania
mediów w celu stosowania rónych stylów na podstawie okrelonych warunków).
228
_
Rozdzia 10. Programowanie na platformy mobilne
Kup książkę
Poleć książkę
Bardzo wane jest umieszczenie ogólnej reguy na pocztku, a nastpnie jej usprawnianie poprzez dodanie obsugi zapyta mediów i wykrywania dostpnoci poszczególnych funkcji.
Dziki temu witryna internetowa bdzie wywietlana w penej krasie w przegldarkach internetowych oferujcych obsug najnowszych funkcji i jednoczenie bdzie wywietlana poprawnie (cho mniej atrakcyjnie pod wzgldem wizualnym) w starszych wersjach przegldarek internetowych.
Widoki dla konkretnych przegldarek internetowych
Nowa funkcja platformy ASP.NET MVC 4, jak jest tryb wywietlania, pozwala na wczytywanie odmiennych widoków w zalenoci od zdefiniowanych warunków. Przykadem uycia tej funkcji moe by utworzenie oddzielnych widoków przeznaczonych dla smartfonów
(urzdze o maych ekranach) i tabletów (urzdze o ekranach wikszych ni w smartfonach,
ale jednoczenie mniejszych ni w urzdzeniach biurkowych). Przygotowanie widoków dla
tych klas urzdze pozwala na optymalne wykorzystanie dostpnej powierzchni ekranu. Ponadto stanowi przykad dostarczenia efektywnej i uytecznej aplikacji przystosowanej do
moliwoci oferowanych przez konkretne urzdzenia.
Pierwszym krokiem podczas realizacji wymienionego podejcia jest rejestracja trybów wywietlania 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.
Nastpnie nagówek w nowym widoku zmie na Aukcje iPhone’a, aby go odróni od pozostaych. Aby zobaczy tak przygotowan stron w dziaaniu (rysunek 10.9), uruchom aplikacj
za pomoc emulatora przegldarki internetowej dla urzdzenia mobilnego (pokazane tutaj
przykady uywaj rozszerzenia User Agent Switcher dla przegldarki internetowej Firefox
pozwalajcego na emulacj przegldarki 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. Nastpnie nagówek w nowym widoku
zmie na Aukcje Windows Phone, aby go odróni od pozostaych. Po uruchomieniu aplikacji
w emulatorze przegldarki internetowej na urzdzeniu mobilnym (rysunek 10.10) bdziesz
móg podziwia przygotowan stron w dziaaniu.
Technika Adaptive Rendering
Kup książkę
_
229
Poleć książkę
Rysunek 10.9. Widok utworzony dla iPhone’a
Aby sprawdzi, czy danie pochodzi z urzdzenia mobilnego, platforma ASP.NET
analizuje je i porównuje z zestawem doskonale znanych definicji przegldarek internetowych dla urzdze mobilnych.
Dziki klasie HttpBrowserCapabilities (http://msdn.microsoft.com/en-us/library/system.web.
httpbrowsercapabilities.aspx) platforma otrzymuje bardzo du ilo informacji dotyczcych moliwoci danej przegldarki. Informacje te s dostpne poprzez waciwo
Request.Browser.
Ewentualnie zamiast polega na wbudowanych w platform definicjach przegldarek,
moesz skorzysta z usugi 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 urzdzeniach mobilnych.
230
_
Rozdzia 10. Programowanie na platformy mobilne
Kup książkę
Poleć książkę
Rysunek 10.10. Widok utworzony dla Windows Phone
Tworzenie nowej aplikacji mobilnej
zupenie od pocztku
Platforma ASP.NET MVC 4 bardzo uatwia dodawanie widoków mobilnych do istniejcych
aplikacji. Równie atwo moesz jednak zupenie od pocztku tworzy aplikacje mobilne. To uyteczne rozwizanie, jeli nie masz jeszcze aplikacji, któr mógby wykorzysta jako punkt
wyjcia, bd
gdy z jakiego powodu nie chcesz czy witryn w wersji zwykej i mobilnej.
Na platformie ASP.NET MVC 4 znajdziesz szablon Aplikacja dla urzdze przenonych, dziki
któremu szybko bdziesz móg rozpocz tworzenie aplikacji dla urzdze mobilnych. Szablon
ten w duej mierze opiera si na platformie jQuery Mobile. Aby zatem rozpocz tworzenie
efektywnych aplikacji, w pierwszej kolejnoci musisz pozna jQuery Mobile.
Tworzenie nowej aplikacji mobilnej zupenie od pocztku
Kup książkę
_
231
Poleć książkę
Platforma jQuery Mobile
Podczas pracy z jQuery Mobile bardzo istotne jest pojcie strony. W tradycyjnym programowaniu 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
pozwalajce na wygenerowanie strony w przegldarce internetowej.
Jednak na platformie jQuery Mobile jeden plik moe zawiera wiele „stron” dla urzdze
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 moesz
umieci dowoln liczb takich znaczników, a jQuery zamieni je na wiele stron wywietlanych
jednoczenie.
Poniewa na podstawie jednego widoku dla urzdzenia biurkowego moe powsta wiele
mniejszych widoków dla urzdzenia mobilnego (gównie wskutek przeprojektowania strony,
aby jej nawigacja lepiej odpowiadaa ekranowi urzdzenia mobilnego), takie podejcie pomaga 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 dokadnie tak samo jak w przypadku zwykej aplikacji sieciowej ASP.NET MVC — wybierz opcj menu Plik/Nowy/Projekt…,
a nastpnie 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
Kup książkę
Poleć książkę
W kolejnym oknie dialogowym wybierz szablon Aplikacja dla urzdze przenonych (rysunek 10.12).
Rysunek 10.12. Wybór szablonu aplikacji dla urzdze przenonych
W ten sposób utworzysz now aplikacj ASP.NET MVC wraz z przykadowymi kontrolerami
i widokami zawierajcymi oferowane przez platform ASP.NET MVC funkcje obsugi urzdze mobilnych. Szablon ten pozwoli Ci na szybkie rozpoczcie pracy.
Uruchom projekt, naciskajc klawisz F5 bd
wybierajc z menu Debug/Start. Visual Studio
rozpocznie kompilacj rozwizania, a nastpnie uruchomi przegldark internetow, w której
zostanie wywietlona strona gówna witryny internetowej w wersji przystosowanej dla urzdze mobilnych (rysunek 10.13).
Uywanie szablonu aplikacji mobilnej w ASP.NET MVC 4
Jak moesz si przekona, utworzony projekt aplikacji mobilnej standardowo zawiera du
ilo przygotowanego kodu. Struktura projektu jest podobna do projektu zwykej 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 zupenie od pocztku
Kup książkę
_
233
Poleć książkę
Rysunek 10.13. Domylna 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 dostarczajcej urzdzeniom mobilnym cae 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
Kup książkę
Poleć książkę
Rysunek 10.15. Nowa zawarto
katalogu Scripts projektu
Znacznik <meta name="viewport"> okrela wielko viewportu. To jest bardzo wane, poniewa
wikszo przegldarek w wersji dla urzdze mobilnych wprawdzie pozwala uytkownikom na zmniejszanie i powikszanie strony wedle wasnego uznania, ale lepsze wraenie
wywoa w uytkowniku ustawienie szerokoci pocztkowej. Jak ju wczeniej powiedziano,
warto "width=device-width" powoduje, e treci jest automatycznie przypisywana szeroko
odpowiadajca szerokoci uywanego urzdzenia:
<meta name="viewport" content="width=device-width" />
Alternatywnym rozwizaniem jest zdefiniowanie konkretnej szerokoci dla viewportu poprzez podanie odpowiedniej wartoci wyraonej w pikselach. Na przykad w poniszym
poleceniu pocztkowa szeroko strony zostaa okrelona na 320 pikseli:
<meta name="viewport" content="width=320px" />
Przedstawiony poniej 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 poniszy znacznik skryptu dodaje do strony pliki platformy jQuery Mobile. W ten
sposób moliwe staje si wykonywanie operacji w technologii AJAX, animacji, sprawdzania
poprawnoci danych itd.:
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.mobile-1.0b2.min.js")">
´</script>
Teraz spójrz na zmodyfikowany kod HTML strony, zawierajcy kilka nowych atrybutów.
Platforma jQuery Mobile identyfikuje róne elementy, takie jak strony, przyciski, listview itd.,
dziki atrybutom data-role. Analizujc zawarto znacznika <body>, moesz dostrzec, e szablon
standardowo umieci atrybuty data-role w znacznikach <div>:
Tworzenie nowej aplikacji mobilnej zupenie od pocztku
Kup książkę
_
235
Poleć książkę
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
@if (IsSectionDefined("Header")) {
@RenderSection("Header")
} else {
<h1>@ViewBag.Title</h1>
@Html.Partial("_LogOnPartial")
}
</div>
<div data-role="content">
@RenderBody()
</div>
</div>
</body>
`
Pierwszy znacznik <div> ma przypisany atrybut data-role="page", który identyfikuje ten znacznik <div> jako pojedyncz stron w aplikacji mobilnej. Podobnie nagówek strony zosta okrelony
atrybutem data-role="header", natomiast znacznik <body> atrybutem data-role="content".
Platforma jQuery Mobile definiuje róne atrybuty dla doskonale znanych elementów HTML,
takich jak <h1>, <h2>, <p>, <table>, a take dla list i elementów formularza, np. przycisków, pól
tekstowych, list wyboru itd. Wicej informacji na temat platformy jQuery Mobile, dokadn
dokumentacj, przykady itd. znajdziesz na witrynie internetowej http://jquerymobile.com/.
Podsumowanie
W rozdziale przedstawiono róne aspekty programowania sieciowego dla urzdze mobilnych. Dowiedziae si, czym tak naprawd jest aplikacja mobilna i jakie s rónice pomidzy
witrynami internetowymi przeznaczonymi dla urzdze mobilnych i dla urzdze biurkowych. Zaprezentowano róne platformy oraz dostpne techniki, dziki którym moesz wydajnie tworzy aplikacje mobilne. Dowiedziae si, jak dziki wykorzystaniu rónych moliwoci oferowanych przez przegldarki internetowe zapewni uytkownikowi jak najlepsze
wraenia podczas uywania aplikacji.
Przedstawiono take oferowane przez platform ASP.NET MVC 4 funkcje pomagajce w tworzeniu aplikacji mobilnych:
x usprawnienia w domylnym szablonie aplikacji mobilnej;
x moliwo dostosowania do wasnych potrzeb szablonu domylnego poprzez zmian jego
ukadu graficznego, widoków i widoków czciowych;
x obsug funkcji oferowanych przez konkretne przegldarki internetowe (np. widok dla
iPhone’a) oraz opcj nadpisania moliwoci przegldarek internetowych;
x usprawnienie widoków mobilnych poprzez uycie platformy jQuery Mobile.
236
_
Rozdzia 10. Programowanie na platformy mobilne
Kup książkę
Poleć książkę
Skorowidz
A
abstrakcja
HttpContextBase, 436
IRepository, 114
System.Web.Mvc.CustomModelBinderAttri
bute, 142
Adaptive Rendering, 225
administracja klastrem pamici, 267
adnotacje danych, 74
ADO.NET Entity Framework, 170
adresy URL, 60, 301
adresy URL dopasowane do wzorca, 30
AJAX, 89, 123, 138
akcja
AucionsController.Create, 73
AuctionsController.Create, 69
Create, 35, 139
Index, 36
JsonResult, 146
Login, 195
POST, 71
Profile, 53
Register, 197
akcje
HTTP, 152
kontrolera, 29, 32
anatomia
pakietu NuGet, 421
strony internetowej, 276
dania HttpRequest, 277
API ApplicationCache, 271
API Data Annotations, 74
API HttpContext.Items, 59
API jQuery, 82
API jQuery AJAX, 91
API Local Storage, 273
API REST, 144
API System.XML, 58
aplikacja
EBuy, 22
Web Forms, 411
aplikacje
.NET, 26
sieciowe, 206
AppCache, 271
architektura
aplikacji sieciowej, 102
fizyczna, 105
logiczna, 102, 103
MVC, 19, 100
arkusze stylów, 283
arkusze stylów dla jQuery Mobile, 233
ASP, Active Server Pages, 18
ASP.NET MVC, 18
ASP.NET MVC 4, 20
ASP.NET Routing, 29
ASP.NET Web API, 149
ASP.NET Web Forms, 18, 57–67, 316, 409
asynchroniczna komunikacja, 242
atak typu
CSRF, 207, 208
SQL Injection, 201–205
XSS, 206, 207
atrybut
AcceptVerbs, 445
AllowAnonymousAttribute, 195
Authorize, 444
AuthorizeAttribute, 53, 191
BindAttribute, 187
CustomModelBinderAttribute, 142
DataAnnotation, 92
HandleErrorAttribute, 335, 337
RangeAttribute, 76
RequiredAttribute, 75
Route, 444
ValidateAntiForgeryTokenAttribute, 208
automatyczne
testowanie, 385
wygenerowanie widoku, 214
automatyzacja
kompilacji, 378
wdraania, 387
autoryzacja, 187, 199
453
Kup książkę
Poleć książkę
B
baza danych, 71, 170, 395
Active Directory, 194
Microsoft SQL Server, 194
SQL Express, 194
bezpieczestwo, 185–187
biaa lista, 205
biblioteka
AntiXSS, 206
jQuery, 81, 85, 91
Modernizr, 294
ReusableComponents, 323
SignalR, 247, 251
System.Web.Optimization, 293
web-socket-js, 247
blok
kodu, 39
try-catch, 338
blokowanie wysyania nagówka, 208
bdy, 333
aplikacji, 340
weryfikacji danych, 77
dania sieciowego, 341
bufor
ASP.NET, 256
przegldarki, 269
buforowanie
danych wyjciowych, 258–260, 445
donut caching, 261
donut hole caching, 263
o zasigu aplikacji, 256
o zasigu uytkownika, 255
o zasigu dania, 254
po stronie klienta, 254, 269, 281
po stronie serwera, 253
rozproszone
redundancja, 265
skalowalno, 265
Velocity, 265
wydajno, 265
Windows AppFabric, 265
C
CDN, Content Delivery Network, 278
chmura Windows Azure, 403
ciga integracja, 383, 387, 434
cige wdraanie, 406
454 _
CMS, Content Management Systems, 206
Code First, 71, 171
COM, Component Object Model, 315
CORS, Cross-Origin Resource Sharing, 144, 147
CRUD, 152
CSRF, Cross-Site Request Forgery, 207
CSS, 228
CSS3, 228
CSV, Comma-Separated Values, 159
cykl yciowy
sesji, 255
dania, 28
czarna lista, 204
czas
trwania aukcji, 74
utraty wanoci, 257
czciowe generowanie strony, 123
D
definicja manifestu, 271
DI, Dependency Injection, 114, 116, 165
DIP, Dependency Inversion Principle, 113
dodawanie widoku, 50
doczanie modelu, model binding, 33–35
DOM, Document Object Model, 81
dopasowanie do wzorca, 30
dostawca czonkostwa, 194
dostp do
bazy danych, 153
bibliotek, 26
danych, 71, 163, 169, 171
elementu <span>, 84
platformy, 22
sownika Request, 35
ViewData, 44
DRY, Don’t Repeat Yourself, 121
DTO, Data Transfer Object, 143
dyrektywa AspCompat, 316
dziaanie
bufora przegldarki, 269
klasy Auction, 174
E
element
<httpCompression>, 283
<p>, 84
<script>, 93
Skorowidz
Kup książkę
Poleć książkę
<span>, 84
<ul>, 218
healthMonitoring, 340
rewrite, 288
Entity Framework, 71, 165, 168, 171
Entity Framework Code First, 171, 176
ETag, Entity Tag, 270, 289
F
faszywe alarmy, 348
filtr
ActionFilter, 121
HandleError, 336
ValidateAntiForgeryTokenAttribute, 209
filtrowanie, 178
danych, 155
listy, 219
filtry
akcji, 36, 137, 441
bdów, 339
wyjtków, 157
Firebug, 292
formatowanie danych, 159
formularz, 69
logowania, 194
rejestracji, 194
funkcja
$(), 83
removeItem(), 273
routingu, 61
success(), 131
wasnych bdów, 334, 339
wywoania zwrotnego, 90
funkcje mobilne, 211, 226
funkcjonalnoci Web Forms, 413
G
generowanie
kodu HTML, 62
pakietu NuGet, 420
strony internetowej, 275
widoków czciowych, 124
graficzny interfejs uytkownika, 26
grupowanie akcji, 441
grupy Windows, 192
GUI, Graphical User Interface, 26
H
hierarchia katalogów, 394
I
ignorowanie tras, 305
IIS, Internet Information Server, 59, 396
IIS, Internet Information Services, 20
instalacja
ASP.NET MVC, 23
pakietu z okna konsoli, 26
Razor Single File Generator, 321
Velocity, 265
wiersza polece NuGet, 417
integracja platform, 409
interfejs
IDependencyResolver, 120
IEntity, 173
IEquatable, 173
IRepository, 115
IRouteConstraint, 308
IRouteHandler, 315
ISearchProvider, 112
ISecurityProvider, 111
System.Web.Mvc.IController, 30
IoC, Inversion of Control, 113
ISP, Interface Segregation Principle, 112
J
JavaScript, 81
jzyk
C#, 38
HTML, 123
JavaScript, 81
SmallTalk, 99
Visual Basic.NET, 38
JIT, Just-In-Time, 392
jQuery JavaScript Library, 81
jQuery Mobile, 212, 215, 232, 235
jQuery Theming, 235
JSON, JavaScript Object Notation, 129, 143
JSONP, JSON with Padding, 144
Skorowidz
Kup książkę
_ 455
Poleć książkę
K
karta
Components, 293
Routes, 309
YSlow, 292
katalog
Content, 233, 234, 421
Controllers, 27, 47, 149
inetsrv, 251
libs, 422
Scripts, 234, 235
Shared, 37
tools, 423
Views, 28
klasa
AccountController, 194, 197
ActionFilterAttribute, 36
ActionResult, 36
ActiveDirectoryProvider, 111
AspCompatHandler, 316
AsyncController, 240, 447
Auction, 46, 174
AuctionsController, 116, 137
BufferedMediaTypeFormatter, 159
CustomHandleError, 341
DBContext, 72
DonutCachingPage, 262
Entity, 173
EntityObject, 171
ErrorLogger, 110, 117
ErrorLoggerManager, 109
FileLogSource, 110
HomeController, 31
HtmlHelper, 46, 319
HttpResponseException, 157
IRepository, 117
JsonModelBinder, 141
Logger, 338
MediaTypeFormatter, 159
MockAuctionRepository, 365, 367
MvcHandler, 317
Page, 317
Payment, 174
PersistentConnection, 248
RouteAttribute, 310
RouteData, 303
RouteGenerator, 311
SearchController, 113, 121, 178
456 _
SearchCriteria, 182
SearchViewModel, 179
System.Data.Entity.DbContexa, 72
System.Web.Mvc.Controller, 32
UrlHelper, 45
ViewSwitcherController, 222
ViewUserControl, 321
klasy POCO, 163
kod
EBuy, 22
formularza, 69
HTML, 52
JavaScript, 93, 250
kolejno tras, 305
kolekcja filtrów, 336
kompilacja, 375
ciga, 379
na okrgo, 379
szablonu klienta, 132
w Visual Studio, 377
wedug harmonogramu, 379
wejciowa, 379
z poziomu wiersza polece, 377
komponent listview, 218
komponenty
bezstanowe, 101
skompresowane, 282
komunikat o bdzie, 76, 78, 92
komunikat o bdzie serwera, 156
konfiguracja
ASP.NET MVC, 281
monitorowania, 340
nagówka ETag, 289
opcji bazy danych, 266
opcji uwierzytelniania, 192
pooenia bufora, 259
serwera IIS, 281
serwera WWW IIS 7, 190
serwera WWW IIS Express, 189
tras, 29
uwierzytelniania Windows, 188
witryny, 397
waciwoci projektu, 190
konsola, 26
konsorcjum W3C, 82
kontekst danych, 176
kontenery IoC, 118
konto usugi dla aplikacji, 188
kontrola wersji pakietu, 433
Skorowidz
Kup książkę
Poleć książkę
kontroler, 20, 31, 47
AccountController, 54
AdminProfile, 192
AjaxController, 441
Auction, 138
AuctionsController, 49, 364
HomeController, 36
SearchController, 112, 179, 182
UserController, 53
Web API, 149, 153, 154, 156
kontrolery asynchroniczne, 20, 239, 242
kontrolki uytkownika, 65
konwencja
PluralizingTableNameConvention, 172
przed konfiguracj, 27, 30, 151
konwersja witryny, 410
kopiowanie plików, 401
L
leniwe wczytywanie skryptów, 284
liczba
pocze, 251
zapyta DNS, 286
lista aukcji, 218
Local Storage, 273
logika biznesowa, 437
lokalizacja usugi, 114, 116
LSP, Liskov Substitution Principle, 111
luka w zabezpieczeniach, 144
cznik
DefaultModelBinder, 142
JsonModelBinder, 143
modelu, 141
M
magiczne cigi tekstowe, 436
mapowanie obiektowo-relacyjne, 164, 166
mechanizm
ETag, 270
Local Storage, 273
routingu, 314
meneder pakietów
bibliotek, 26
NuGet, 26, 435
metoda
$.post(), 139
.after(), 89
.before(), 89
.click(), 87
.contains(), 86
.done(), 91
.error(), 91
.fail(), 91
.html(), 89
.load(), 124
.prepend(), 89
.success(), 91
@Html.AntiForgeryToken(), 208
About(), 32
Assert.AreEqual(), 347
Auction.PostBid(), 354, 356
Bind<T>, 120
CallRemoteWebService(), 373
CheckUserRight(), 121
connection.start(), 248
Content(), 32
Controller.OnException(), 338
Controller.View(), 124
document.getElementById(), 84
ExecuteSqlCommand(), 169
File(), 32
FormsAuthentication.SetAuthCookie(), 196
GetApartmentState(), 315
GetHttpHandler(), 315
GetOverridenBrowser(), 222
GetService(), 153
Html.Partial(), 42, 128
Html.RenderAction(), 440
Html.UserAvatar(), 439
HttpNotFound(), 32
Index(), 178
JavaScript(), 33
Json(), 33, 130
MapRoute(), 303, 307
Membership.GetUser(), 197
Membership.ValidateUser(), 196
ModelBinderDictionary.GetBinder(), 141
OnActionExecuted(), 137
OnModelCreating(), 177
OnReceivedAsync(), 248
OnWriteToStream(), 159
PartialView(), 33, 127, 135
ProcessRequest(), 317
Skorowidz
Kup książkę
_
457
Poleć książkę
metoda
Redirect(), 33
RedirectToAction(), 33
RedirectToActionPermanent(), 33
RedirectToRoute(), 33
RedirectToRoutePermanent(), 33
RegisterGlobalFilters(), 335
Render(), 294
RenderAction(), 320, 330
Request.IsAjaxRequest(), 135, 136
Resolve(), 153
RouteTable.MapHttpRoute(), 151
SearchForBids(), 240, 241
setItem(), 273
SqlQuery(), 169
View(), 32, 42
metody rozszerzajce, 320
minimalizacja skryptów, 287
model, 20
aplikacji, 242
DOM, 81, 88
domeny, 175
HTTP long polling, 244
HTTP polling, 243
obsugujcy EBuy, 46
widoku, 44
moduy HTTP, 58
monitorowanie stanu ASP.NET, 340
MVC, Model-View-Controller, 18
N
nadpisywanie
konwencji, 172
widoków, 212
nagówek
Accept-Encoding, 282
Access-Control-Allow-Origin, 147
Cache-Control, 280
Content-Type, 140
ETag, 289
Expires, 280
Referrer, 208
narzdzie
aspnet_regiis.exe, 399
aspnet_regsel.exe, 341
Glimpse, 309
Install-Package, 430
NuGet, 417
NuGet Package Explorer, 419
458 _
Razor Single File Generator, 321, 327, 330
SQLCMD, 403
YSlow, 292, 295
nawiasy klamrowe, 30
nawigacja po witrynie, 369
nowy typ projektu, 23
numeracja wersji oprogramowania, 430
O
obiekt
ActionResult, 32
Auction, 34
Cache, 257, 268
COM interop, 370
DTO, 143
JSON, 250
ModelState, 73
NavigationMenu ViewData, 440
Request, 35
TempData, 43
ViewBag, 44
ViewData, 43
ViewResult, 446
window, 83
XmlHttpRequest, 89
obiekty imitujce, 365
obsuga
akcji POST, 71
aplikacji ASP.NET, 59
AppCache, 271
bdów, 333, 335
buforowania po stronie klienta, 281
cookies, 209
CORS, 147
formatu JSON, 129
jednego logowania, 102
jQuery, 90, 95
JSONP, 146
kompilacji, 375
konfliktów wspóbienoci, 169
logowania, 195
pliku manifestu, 272
pocze, 251
stronicowania, 155
wyjtków, 156
OCP, Open/Closed Principle, 109
odpowied
JSONP, 145
na zdarzenie, 86
Skorowidz
Kup książkę
Poleć książkę
na dania AJAX, 135
na dania JSON, 136
odwieanie
bufora, 296
komponentu, 281
strony, 89
ograniczenia trasy, 307
okno
Dodaj kontroler, 50
Dodawanie aplikacji, 398
Eksplorator testów, 353
Nowy projekt, 24
opcje wdroenia, 106
operacje CRUD, 152
opó
nianie wykonania skryptu, 284
opó
nienie, 108
oprogramowanie open source, 367
optymalizacja po stronie klienta, 275–297
ORM, Object Relational Mapping, 71, 164, 166
P
paczki, 294
pakiet
Entity Framework, 26
jQuery.Mobile.MVC, 215, 218
meta, 424
narzdzia, 424
NuGet, 26, 417, 420
NuGet MvcDonutCaching, 263
podzespou, 424
PrecompiledMvcEngine, 325
pakiety kodu, 39
parametry akcji, 33
pasek nawigacyjny, 225
ptla foreach, 39, 128
pieko DLL, 429
platforma
.NET, 17
ADO.NET Entity Framework, 169
ASP.NET MVC, 22, 409
ASP.NET Web Forms, 409
jQuery Mobile, 212, 216, 232
Moq, 367
Web API ASP.NET, 149
Web Forms, 18
plik
_Layout.cshtml, 41, 234
_Layout.Mobile.cshtml, 216
_ViewSwitcher.cshtml, 221
About.cshtml, 43, 45
ajax_content.html, 124
ApplicationHost.config, 282
aspnet.config, 251
ASPNETDB.MDF, 194
Auction.cshtml, 45
Auctions.cshtml, 126
Auctions.Mobile.cshtml, 214, 229
AuctionsController.cs, 135
BundleConfig.cs, 295
CompanyInfo.cs, 44
Create.cshtml, 69
EbuyDataContext.cs, 72
GenericError.cshtml, 323
Global.asax, 58, 443
Global.asax.cs, 337
HomeController.cs, 31, 43, 44
Index.cshtml, 37, 439
jquery.mobile.structure-1.1.0.css, 233
jquery.mobile.structure-1.1.0.js, 234
jquery.mobile-1.1.0.css, 233
jQuery.mobile-1.1.0.css, 216
jquery.mobile-1.1.0.js, 234
jQuery.mobile-1.1.0.js, 216
jquery.validate.js, 94
jquery.validate.unobtrusive.js, 94
Layout.cshtml, 294
Layout.Mobile.cshtml, 222
manifestu, 271
NuSpec, 418
RouteConfig.cs, 30
Trace.axd, 306
TwitterHelpers.cs, 327
web.config, 53, 58, 91, 194, 207, 411
WebResource.axd, 306
Wizard.cshtml, 442
WizardController.cs, 442
pliki
.cshtml, 319, 323
.vbhtml, 319
ukadu graficznego, 41
zewntrzne, 285
pobieranie danych aukcji, 135
pobranie wartoci id, 35
POCO, Plain Old CLR Object, 72, 163
polecenie
if-else, 38, 438
Install-Packages, 433
poczenie SignalR, 250
pomiar wydajnoci, 290
Skorowidz
Kup książkę
_ 459
Poleć książkę
portal Windows Azure, 405
powoka PowerShell, 26, 267
PRG, Post-Redirect-Get, 442
priorytet tras, 305
procedura Html.ValidationMessage(), 77
procedury
obsugi HTTP, 58
obsugi zdarze, 87
pomocnicze, 69
projekt, 23
aplikacji sieciowej, 26
EBuy, 24
testowy, 351
testów jednostkowych, 25
projektowanie repozytorium, 164
przechowywanie danych sesji, 256
przekazywanie obiektów JSON, 140
przekierowanie, 33, 287
przekierowanie domeny, 208
przeczanie widoków, 220, 223
przepustowo, 108
przestrze nazw, 105
System.Web.Mvc.*, 57
System.Web.UI.*, 57
przeszukiwanie listy, 219
przyrostek Controller, 30
publikowanie witryny, 399, 404
R
RAD, Rapid Application Development, 61
ramka Forever, 247
Razor Single File Generator, 38, 321
refaktoring testów jednostkowych, 363
reguy cigej integracji, 384
rejestracja
filtru wyjtku, 158
informacji o bdach, 337
nowego uytkownika, 196
tras Web API, 151
trybów wywietlania, 229
repozytorium, 164, 384, 385
NuGet.org, 424
systemu plików, 426
REST, 153
rodzaje buforowania, 253
routing, 28, 60
ASP.NET, 29
oparty na atrybutach, 310
zaawansowany, 299
rozszerzenie Firebug, 292
460 _
S
selektory, 83
SEO, Search Engine Optimization, 301
serializacja typu danych, 160
serwer
IIS, 20, 59, 251, 397
IIS Express, 190
NuGet, 427
WWW, 282
silnik
Razor, 325
routingu, 29
widoku, view engine, 25
skalowalno, 107
skadnia
Razor, 38
Web Forms, 66
skrypt, 283
modernizr.js, 294
MSBuild, 401
skrypty kompilacji, 376
sownik
IDictionary, 255
ModelState, 73
Request, 35
RouteData, 303
RouteTable, 318
RouteValue, 222
ViewData, 44, 437
sowo kluczowe
@model, 45
internal, 366
new, 435
SOLID, 109
sortowanie, 178
sprawdzanie poprawnoci danych, 204
SRP, Single Responsibility Principle, 109
stan widoku, View State, 58
strona
logowania, 54
rejestracji, 55
wyszukiwania, 178
stronicowanie, 155
stronicowanie danych, 178, 183
strony wzorcowe, 65
struktura
katalogów, 27
projektu, 106, 395
system zarzdzania treci, 206
Skorowidz
Kup książkę
Poleć książkę
szablon
Aplikacja dla urzdze przenonych, 25
Aplikacja internetowa, 25
Aplikacja intranetowa, 25, 188
Display, 320
Editor, 320
Interfejs Web API, 25
Podstawowe, 25
Pusta, 24
szablony
aplikacji mobilnej, 211, 232
kontrolerów, 47
po stronie klienta, 131, 133
projektów, 23, 30
S
cieka wirtualna, 31
rodowisko
produkcyjne, 386
uruchomieniowe, 59
T
tabela
Auctions, 201
Categories, 201
CategoryAuctions, 202
routingu, 29
TDD, Test-Driven Development, 357
technika Code First, 72
test
akceptacyjny, 349
integracyjny, 348
jednostkowy, 25
izolacja/niezaleno,
isolated/independent, 346
niepodzielno, atomic, 346
powtarzalno, repeatable, 346
szybko, fast, 347
pokrycia, Code Coverage, 370
testowanie, 343
aplikacji, 354
kontrolerów, 360
logiki aplikacji, 368
logiki dostpu do danych, 361
modelu, 354
rczne, 344
widoków, 368
zautomatyzowane, 345
testy
jednostkowe, 328
zautomatyzowane, 350, 358
TFS, Team Foundation Server, 404
token, 208, 420
token Antiforgery, 444
trasa, 29, 47, 302
trasa Web API, 151
trasy
opcjonalne, 303
typu Catch-All, 306
tre statyczna, 394
tryby wywietlania, 21, 212
tworzenie
aplikacji, 23
faza obsugi, 19
faza testowania, 19
faza tworzenia, 19
aplikacji mobilnej, 231
filtrów wyjtków, 157
formularza, 69
kompilacji cigej, 380
konta Windows Azure, 403
kontrolera asynchronicznego, 240
metod pomocniczych, 327
nowego projektu, 232
nowej witryny, 398
obiektów imitujcych, 365
paczek, 294
pakietów NuGet, 418
projektu testowego, 350
przekierowania, 288
repozytorium pakietów, 426
skryptów kompilacji, 376
testów zautomatyzowanych, 358
testu jednostkowego, 351
tras, 302
usugi danych, 149
widoków Razor, 323
widoku, 51, 66
widoku mobilnego, 214
witryny, 404
wasnego typu, 159
typ MIME, 158
typy pakietów NuGet, 423
U
ukad graficzny, 40, 65
uruchamianie aplikacji, 28
Skorowidz
Kup książkę
_
461
Poleć książkę
urzdzenia mobilne, 211
usuga zautomatyzowanej kompilacji, 378
usprawnianie komunikacji, 247
usuwanie silników widoku, 446
UTA, User Acceptance Testing, 349
uwierzytelnianie, 52, 187
formularzy, 193, 197
uytkowników, 195
uywanie
abstrakcji, 115
CDN, 280
paczek, 296
SSL, 193
szablonu, 133
W
warstwa
aplikacji, 105
danych, 105
dostpu do danych, 171
klienta, 105
wayfinding, 299
wdraanie, 59, 106, 387, 391
aplikacji, 188
na serwerze IIS, 396
typu bin, 392
Web API, 21
Web Forms, 57–67
WebSocket, 246
wersje beta pakietów, 431
weryfikacja danych, 73, 77, 93, 95
po stronie klienta, 79, 91
po stronie serwera, 79
weryfikacja dania, 206
widget ViewSwitcher, 221
widok, 20, 36, 49
AjaxTimedOut, 241
ChangePasswordView, 198
DatabaseError, 335
Search, 179
widoki
czciowe, 42, 65, 124, 221, 319
dla iPhone’a, 229
dla Windows Phone, 231
Razor, 321
wiersz polece NuGet, 418, 425
Windows Azure, 403
waciwoci atrybutu AuthorizeAttribute, 191
462 _
waciwo
encoderType, 207
Model, 44, 45
ModelState, 77
RouteCollections.RouteExistingFiles, 305
Title, 77
ViewBag, 44
ViewData, 44
wczanie CORS, 147
wspóbieno, 169
wstrzykiwanie
zalenoci, 114, 116, 165
repozytorium, 153
wtyczka weryfikacji, 94
WWW, World Wide Web, 123
wybór silnika widoku, 25
wydajno, 107
wyjtek, 34, 157
OptimisticConcurrencyException, 170
QuotaExceededError, 274
System.Data.DataException, 335
wykonywanie da
AJAX, 144
JSONP, 146
wykrywanie funkcji mobilnych, 226
wymagania
aplikacji, 396
PowerShell 2.0, 23
Visual Studio 2010 Service Pack 1, 23
Visual Web Developer Express 2010 Service
Pack 1, 23
wymiatanie, scavenging, 258
wysyanie danych, 138
wysyanie danych JSON, 143
wyszukiwanie widoków, 37
wywietlanie
danych, 43
widoku, 202
wywoanie
$.ajax(), 131
zwrotne, 90
wzorzec
Front Controller, 101
kontrolera, 101
MVC, 99
PRG, 442
repozytorium, 164
trasy URL, 30
Skorowidz
Kup książkę
Poleć książkę
X
XSS, Cross-Site Scripting, 206
Z
zabezpieczanie aplikacji, 187
zablokowanie wtku, thread starvation, 239
zaciemnianie, 287
zalenoci bufora, 258
zapytania
LINQ, 178, 205
mediów CSS, 228
SQL, 168, 205
zapytanie
DNS, 286
do tabeli, 202
zarzdzanie
buforem, 414
poczeniami SignalR, 250
stanem, 58, 61
uytkownikami, 413
widokami, 128
zalenociami, 26, 115, 120
zasada
odwracania zalenoci, 113
odwrócenia sterowania, 113
otwarty/zamknity, 109
podstawienia Liskov, 111
pojedynczej odpowiedzialnoci, 109
segregacji interfejsu, 112
separacji zada, 19, 74, 99, 100
zasady SOLID, 114
zasig zmiennej, 40
zdarzenia serwera, 245
zdarzenie
onClick, 86
onsubmit, 94
zmiana
hasa, 197
waciwoci CSS, 88
zmniejszanie
liczby zapyta DNS, 286
liczby da, 278, 279
pliku, 286
znacznik viewport, 225
znaczniki, 38
znak @, 39
danie
asynchroniczne, 90
JSON, 131, 140
GET, 139, 152
HttpRequest, 276
JSONP, 147
POST, 139
synchroniczne, 89
Skorowidz
Kup książkę
_ 463
Poleć książkę
Kup książkę
Poleć książkę