Page 1


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 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 mo na 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Ä&#x2026;ĹźkÄ&#x2122;

_ 463

PoleÄ&#x2021; ksiÄ&#x2026;ĹźkÄ&#x2122;


Kup książkę

Poleć książkę


ASP.NET MVC 4. Programowanie  
Read more
Read more
Similar to
Popular now
Just for you