Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00608 011512 11058602 na godz. na dobę w sumie
ASP.NET 2.0 i Ajax. Wprowadzenie - książka
ASP.NET 2.0 i Ajax. Wprowadzenie - książka
Autor: , , Liczba stron: 488
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-1510-0 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> ajax
Porównaj ceny (książka, ebook, audiobook).

ASP.NET jest technologią stworzoną przez firmę Microsoft, pozwalającą na tworzenie dynamicznych stron WWW. Dostarcza ona wielu kontrolek, które wspomagają programistę w codziennych działaniach i pozwalają na znaczące przyspieszenie prac nad projektowaną witryną. Wykorzystanie technologii AJAX ułatwia tworzenie stron dostarczających niezapomnianych wrażeń ich użytkownikom. ASP.NET wraz z technologią AJAX w połączeniu z narzędziami programistycznymi firmy Microsoft stanowią wiodące rozwiązanie na rynku aplikacji internetowych, a wsparcie potentata z Redmond gwarantuje stały rozwój tej platformy.

'ASP.NET 2.0 i Ajax. Wprowadzenie' odkrywa tajniki wykorzystania technologii AJAX oraz ASP.NET. Dzięki tej książce dowiesz się, jak tworzyć interaktywne i wydajne aplikacje WWW z wykorzystaniem języka VisualBasic 2005. Jednocześnie nauczysz się zapewniać bezpieczeństwo w tworzonych aplikacjach i korzystać z poszczególnych kontrolek. Autorzy książki pokażą Ci metody radzenia sobie z błędami, usterkami i wyjątkami występującymi w trakcie tworzenia i używania strony. Na koniec każdego rozdziału Jesse, Dan i Brian sprawdzą Twoją wiedzę w krótkim quizie -- ale nie martw się, na końcu książki znajdziesz odpowiedzi na poszczególne pytania.

Wejdź w świat dynamicznych stron WWW -- wykorzystaj najnowsze technologie ASP.NET!

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

Darmowy fragment publikacji:

ASP.NET 2.0 i Ajax. Wprowadzenie Autor: Jesse Liberty, Dan Hurwitz, Brian MacDonald T‡umaczenie: Daniel Kaczmarek ISBN: 978-83-246-1510-0 Tytu‡ orygina‡u: Learning ASP.NET 2.0 with AJAX: A Practical Hands-on Guide Format: B5, stron: 488 (cid:149) Jak stworzy(cid:230) stronŒ WWW w ASP.NET 2.0? (cid:149) Jak skorzysta(cid:230) z dobrodziejstw technologii AJAX? (cid:149) Jak zapewni(cid:230) bezpieczeæstwo, poprawno(cid:156)(cid:230) i trwa‡o(cid:156)(cid:230) danych w ASP.NET 2.0? ASP.NET jest technologi„ stworzon„ przez firmŒ Microsoft, pozwalaj„c„ na tworzenie dynamicznych stron WWW. Dostarcza ona wielu kontrolek, kt(cid:243)re wspomagaj„ programistŒ w codziennych dzia‡aniach i pozwalaj„ na znacz„ce przyspieszenie prac nad projektowan„ witryn„. Wykorzystanie technologii AJAX u‡atwia tworzenie stron dostarczaj„cych niezapomnianych wra¿eæ ich u¿ytkownikom. ASP.NET wraz z technologi„ AJAX w po‡„czeniu z narzŒdziami programistycznymi firmy Microsoft stanowi„ wiod„ce rozwi„zanie na rynku aplikacji internetowych, a wsparcie potentata z Redmond gwarantuje sta‡y rozw(cid:243)j tej platformy. (cid:132)ASP.NET 2.0 i Ajax. Wprowadzenie(cid:148) odkrywa tajniki wykorzystania technologii AJAX oraz ASP.NET. DziŒki tej ksi„¿ce dowiesz siŒ, jak tworzy(cid:230) interaktywne i wydajne aplikacje WWW z wykorzystaniem jŒzyka VisualBasic 2005. Jednocze(cid:156)nie nauczysz siŒ zapewnia(cid:230) bezpieczeæstwo w tworzonych aplikacjach i korzysta(cid:230) z poszczeg(cid:243)lnych kontrolek. Autorzy ksi„¿ki poka¿„ Ci metody radzenia sobie z b‡Œdami, usterkami i wyj„tkami wystŒpuj„cymi w trakcie tworzenia i u¿ywania strony. Na koniec ka¿dego rozdzia‡u Jesse, Dan i Brian sprawdz„ Twoj„ wiedzŒ w kr(cid:243)tkim quizie (cid:151) ale nie martw siŒ, na koæcu ksi„¿ki znajdziesz odpowiedzi na poszczeg(cid:243)lne pytania. (cid:149) Podstawy tworzenia stron WWW (cid:149) Za‡o¿enia i wykorzystanie technologii AJAX (cid:149) Spos(cid:243)b zapisywania i odczytywania danych oraz kontrolki wspieraj„ce ten proces (cid:149) Zapewnianie poprawno(cid:156)ci danych (cid:149) Definiowanie i wykorzystanie arkuszy styl(cid:243)w CSS (cid:149) Wykorzystanie stron wzorcowych (cid:149) Obs‡uga i zasady nawigacji na stronie (cid:149) Zapewnienie bezpieczeæstwa witrynie (cid:149) Wykrywanie i rozwi„zywanie problem(cid:243)w w kodzie (cid:149) Obs‡uga wyj„tk(cid:243)w Wejd(cid:159) w (cid:156)wiat dynamicznych stron WWW (cid:151) wykorzystaj najnowsze technologie ASP.NET! Wydawnictwo Helion ul. Ko(cid:156)ciuszki 1c 44-100 Gliwice tel. 032 230 98 63 e-mail: helion@helion.pl Spis treści Wstęp .......................................................................................................................................11 1. Pierwsze kroki ..............................................................................................................17 18 19 22 24 29 29 30 31 Witaj świecie Tworzenie nowej witryny WWW Tworzenie witryny HelloWorld Rozszerzanie witryny HelloWorld o mechanizmy interaktywne Podsumowanie wykonanych czynności Podsumowanie Quiz Ćwiczenia Podstawowe wiadomości na temat witryn WWW Strona Kontrolki Pliki z kodem źródłowym Zdarzenia i wywołania zwrotne Synchroniczne i asynchroniczne wywołania zwrotne Kontrolki 2. Tworzenie aplikacji WWW ..........................................................................................33 33 33 35 38 38 39 47 47 48 52 55 56 57 57 62 63 67 68 69 69 Struktura okna właściwości Kontrolki podstawowe Tworzenie tabel Definiowanie właściwości Kontrolki wyboru wartości Panele Kontrolki wyboru wartości Inne kontrolki wyboru wartości Wyświetlanie tekstu Obrazki Łącza Kontrolka LinkButton Kod źródłowy 5 Podsumowanie Quiz Ćwiczenia 73 75 75 Krótka wizyta po stronie klienta Kontrolka ScriptManager Rozszerzone kontrolki dostępne w Control Toolkit 3. Sprytne witryny WWW z technologią Ajax ................................................................79 79 81 86 86 90 96 100 104 105 106 Kontrolka TextBoxWatermarkExtender Kontrolka PopupControlExtender Kontrolka CollapsiblePanelExtender Kod źródłowy Podsumowanie Quiz Ćwiczenia Pobieranie danych z bazy Powiązane kontrolki danych Tworzenie przykładowej strony WWW Działanie kontrolki DataSource „Nie trzeba się martwić tym, co dzieje się w środku” Działanie kontrolki GridView Kod wygenerowany automatycznie Dodawanie instrukcji Insert, Update i Delete 4. Zapisywanie i odczytywanie danych ........................................................................ 109 110 110 112 112 116 119 121 124 127 128 130 134 135 138 144 145 145 Test działania aplikacji Modyfikacja zawartości siatki w odpowiedzi na zdarzenia Odczytywanie danych z siatki danych GridView Przekazywanie parametrów do zapytania SELECT Kod źródłowy Podsumowanie Quiz Ćwiczenia Wyświetlanie i uaktualnianie danych Kontrolki weryfikacji poprawności danych Kontrolka RequiredFieldValidator Kontrolka ValidationSummary Kontrolka CompareValidator 5. Weryfikacja poprawności danych ............................................................................. 149 150 151 158 160 162 163 Sprawdzanie typu danych wejściowych Porównywanie z wartością innej kontrolki 6 | ASP.NET 2.0 i Ajax. Wprowadzenie Sprawdzanie zakresów Wyrażenia regularne Własny algorytm weryfikacji poprawności danych Podsumowanie Quiz Ćwiczenia 165 166 168 170 171 172 Style i arkusze stylów Strony wzorcowe Nawigacja Kaskadowe arkusze stylów Style wplatane Style na poziomie dokumentu Zewnętrzne arkusze stylów Tworzenie strony wzorcowej Dodawanie stron z treścią Korzystanie z zagnieżdżonych stron wzorcowych Zmiana strony wzorcowej w fazie wykonania 6. Arkusze stylów, strony wzorcowe i nawigacja .........................................................177 177 178 178 180 182 187 188 191 194 196 201 201 205 208 210 216 219 221 222 Przyciski i hiperłącza Menu i łańcuchy nawigacji Mapy witryn Używanie map witryn Łańcuchy nawigacji Podsumowanie Quiz Ćwiczenia Cykl życia strony Stan 7. Stan i cykl życia strony ..............................................................................................225 225 231 232 242 248 248 250 250 Stan widoku Stan sesji Stan aplikacji Podsumowanie Quiz Ćwiczenia Przykładowa aplikacja Śledzenie 8. Błędy, wyjątki i usterki ..............................................................................................253 253 257 257 259 Śledzenie na poziomie strony Wstawianie informacji do dziennika śledzenia Spis treści | 7 Debugowanie Pasek narzędziowy Debug Punkty przerwania Krokowe wykonywanie kodu Sprawdzanie zmiennych i obiektów Okna debugowania Obsługa błędów Błędy nieobsłużone Strony błędu dla całej aplikacji Strony błędu dla pojedynczych stron Podsumowanie Quiz Ćwiczenia 262 263 264 269 270 270 273 274 276 279 279 281 282 Bezpieczeństwo bazujące na formularzach Personalizacja Profile Personalizacja anonimowa Motywy i skórki Tworzenie użytkowników przy użyciu WAT Zarządzanie użytkownikami w kodzie źródłowym Role Ograniczanie dostępu 9. Bezpieczeństwo i personalizacja ..............................................................................285 285 286 291 297 301 306 306 316 321 322 323 326 326 330 331 333 334 Tworzenie witryny testowej Nadawanie organizacji motywom i skórkom Udostępnianie motywów i skórek Wskazywanie motywów dla strony Używanie skórek nazwanych Podsumowanie Quiz Ćwiczenia 10. Kompletna aplikacja ..................................................................................................337 337 338 340 344 345 349 351 Pierwsze kroki Implementacja stylów Zastosowanie stron wzorcowych Definiowanie ról i użytkowników Logowanie się użytkowników Nawigacja Strona produktów 8 | ASP.NET 2.0 i Ajax. Wprowadzenie Implementacja technologii Ajax Strona koszyka na zakupy Strona zakupu produktów Strona potwierdzenia zamówienia Własne strony obsługi błędów Podsumowanie Listingi z kodami źródłowymi Strona koszyka na zakupy Strona potwierdzenia zamówienia Strona główna Strona logowania Strona wzorcowa Strona produktów Strona zakupu produktów Plik Web.config 360 361 364 371 374 375 375 375 377 379 380 380 382 385 389 A Instalowanie aplikacji ...............................................................................................393 B Kopiowanie witryny WWW ......................................................................................405 C Odpowiedzi na pytania. Rozwiązania ćwiczeń ....................................................... 417 Skorowidz.................................................................................................................. 473 Spis treści | 9 Ściąga treści Ściąga z VB Klasy Metody, procedury obsługi zdarzeń, parametry i argumenty Zmienne i ciągi znaków Zmienne logiczne Instrukcje If-Then Metoda CType Właściwości publiczne i prywatne Obiekt Me Pętla For Each Przechwytywanie błędów Metody pomocnicze Tablice i słowniki Operator += Instrukcja Select Case Pętle For Klasa StringCollection Właściwości Ściąga z SQL Parametry Złączenia 37 44 66 68 132 133 200 201 215 217 236 239 241 246 256 312 328 127 359 10 | ASP.NET 2.0 i Ajax. Wprowadzenie ROZDZIAŁ 3. Sprytne witryny WWW z technologią Ajax Technologia Ajax zrewolucjonizowała ASP.NET, a od momentu jej udostępnienia praktycznie wszystkie aplikacje ASP.NET zawierają w sobie kontrolki Ajax. Dzięki technologii Ajax aplikacje ASP.NET, które wcześniej w 99 procentach przypadków zawierały jedynie kod wykonywany na serwerze, mogły wreszcie wykonywać większość przetwarzania po stronie klienta, którym zazwyczaj jest przeglądarka użytkownika. W ten sposób znacząco zwiększyła się zarówno rzeczywista, jak i odczuwana przez użytkownika wydajność aplikacji ASP.NET. Aby zademonstrować dynamizm i elastyczność technologii Ajax, od nowa utworzymy formularz zamówień przedstawiony w rozdziale 2., wykorzystując w nim kontrolki Ajax. Witrynę roz- szerzymy o wyświetlanie w polach, które służą do wprowadzania danych, tak zwanych znaków wodnych. Znak wodny to fragment tekstu, który jest wyświetlany w polu tekstowym, lecz znika w momencie, gdy użytkownik rozpocznie wpisywanie danych. Jest to zatem elegancki znak zachęty dla użytkownika. Utworzymy również panel pojawiający się w odpowiednich okolicznościach, dzięki któremu będzie można ukrywać kontrolki do czasu, aż użytkownik rzeczywiście będzie ich potrzebował. Dodane zostanie również rozwijane pole tekstowe, któ- rego zadaniem będzie wyświetlanie informacji o produkcie w sposób pozwalający zaoszczędzić miejsce na stronie. Krótka wizyta po stronie klienta Aplikacje internetowe działające po stronie klienta mają niewątpliwie szereg zalet, lecz posia- dają także jedną niezaprzeczalną wadę — za każdym razem, gdy trzeba wykonać jakiś kod (albo odczytać dowolne dane), trzeba ponieść koszt „podróży w dwie strony” z przeglądarki do serwera i z powrotem, a sama strona musi zostać wyświetlona całkowicie od nowa. Takie odwołania do serwera i z powrotem mogą zająć stosunkowo dużo czasu (mimo że prędkość przesyłu danych w internecie stale się zwiększa), zaś konieczność narysowania strony na nowo powoduje, że na chwilę znika ona z oczu użytkownika. Technologia Ajax (jej nazwę powinno się tak naprawdę pisać jako AJX, choć byłoby to znacznie trudniejsze do wymówienia) to akronim słów Asynchronous JavaScript and XML. Jest to technika łączenia ze sobą klasycznych (niektórzy powiedzieliby „starych”) technologii dla sieci internet na nowe sposoby, dzięki którym możliwe jest zdecydowane zwiększenie wydajności aplikacji 79 internetowych. Aplikacje, w których używa się technologii Ajax, są obecnie bardzo popularne, ponieważ pod względem wydajności biją one na głowę aplikacje działające wyłącznie na serwerze. Ajax nie istnieje Tak naprawdę nie istnieje coś takiego jak Ajax. Nie jest to produkt ani standard, trudno to nawet nazwać technologią. Ajax to jedynie pojęcie określające zbiór już istniejących technologii, dla których wymyślono nowe zastosowania, osiągając w ten sposób znacznie ciekawsze re- zultaty. Nazwa Ajax jako skrót sformułowania „Asynchronous JavaScript and XML” została użyta po raz pierwszy przez Jamesa Garretta w lutym 2005 roku. Garrett wymyślił to pojęcie pod pryszni- cem (jeśli kogoś to interesuje), rozmyślając w tym samym czasie o potrzebie ukucia skrótowej nazwy dla zestawu technologii proponowanych klientowi (którego, według gorących zapewnień Jamesa, wtedy pod prysznicem nie było). Z drugiej strony, pojęcie to zostało użyte po raz pierwszy około 3000 lat temu przez Homera, który pisał o wojowniku imieniem Ajaks Wielki (a także o Ajaksie Małym) w „Iliadzie” (księga siódma, wiersze 181 – 312). Ajaks Wielki był najwyższym i najsilniejszym wojownikiem Acha- jów, a pod względem umiejętności i męstwa przewyższał go jedynie Achilles. Nie jest wcale pewne, czy historia technologii Ajax również będzie opiewana za 3000 lat (ani nawet za 3000 dni); trudno jednak oprzeć się wrażeniu, że istnieje silna analogia między wojną trojańską a wojnami środowisk graficznych dla systemów Linux, ale to już historia na inną książkę. Według Garretta „Ajax […] to tak naprawdę zbiór technologii, z których każda posiada własne mechanizmy, a w połączeniu z innymi pozwala osiągać nowe, niespotykane dotąd efekty”. Na Ajax składają się: • Standardowe środki prezentacji oparte na technologiach XHTML i CSS, w których mechanizmy dynamicznej interakcji i wyświetlania zawartości korzystają z modelu DOM (ang. Document Object Model). Dzięki temu Ajax może bezpośrednio manipulować dowolnym elementem strony za pośrednictwem języka JavaScript. • Środki wymiany i manipulowania danymi przy użyciu technologii XML i XSLT, czyli otwar- tych i niezależnych od platformy sposobów przetwarzania danych, dzięki którym Ajax może działać na dowolnej platformie, wykorzystując technologie powszechnie uznawane za stan- dardowe. • Asynchroniczne operacje wywoływania i odczytywania danych przy użyciu obiektu XMLHttp (cid:180)Request, który służy do wywoływania jednostkowych danych zawierających tylko część strony. Takie rozwiązanie charakteryzuje się dwiema bardzo ważnymi zaletami: znacznie zmniejsza się ilość danych, jakie trzeba przesyłać za pośrednictwem sieci, a przeglądarka nadal może kontynuować przetwarzanie innych fragmentów strony, czekając jednocześnie na odpowiedź z serwera. • Silny nacisk na przetwarzanie po stronie klienta, którego celem jest wyeliminowanie jak największej liczby odwołań do serwera i z powrotem i zwiększenie dzięki temu wydajno- ści aplikacji. • Język JavaScript, który spaja ze sobą wszystkie pozostałe technologie. Ajax korzysta ze stan- dardowego języka skryptowego, którego obsługa jest zaimplementowana w praktycznie wszystkich przeglądarkach internetowych. 80 | Rozdział 3. Sprytne witryny WWW z technologią Ajax Decydenci z firmy Microsoft szybko zdali sobie sprawę, że Ajax jest technologią, której nie można zignorować. Jednocześnie już wcześniej dostali nauczkę, że otwarte standardy muszą nadal pozostać otwarte, dlatego zdecydowali się jeszcze bardziej ulepszyć tę technologię, jedno- cześnie pozostawiając ją jako otwartą. Cel ten został osiągnięty dzięki połączeniu możliwości, szybkości i elastyczności technologii Ajax z prostotą operacji „przeciągnij i upuść” powszechnie stosowanych w ASP.NET. Micro- soft opracował bibliotekę kontrolek Ajax, z których korzysta się równie prosto jak z kontrolek serwerowych ASP.NET, używanych chyba już od czasów średniowiecza. Jednak co jeszcze ważniejsze, projektanci z firmy Microsoft opracowali także stosunkowo prosty sposób tworzenia własnych kontrolek Ajax, które również można przeciągać i upuszczać. Wszystko to oznacza, że pracę z kontrolkami Ajax udostępnianymi przez Microsoft można zacząć od razu, bez konieczności uczenia się języków JavaScript ani DHTML. Okazuje się więc, że właściwie nie ma powodu, aby wzbraniać się przed używaniem technologii Ajax we wszyst- kich tworzonych aplikacjach ASP.NET. Czytelnicy, którzy uwielbiają język JavaScript i chcą tworzyć własne kontrolki Ajax, nie mają powodów do obaw — jest to nadal możliwe. Podobnie jak w przypadku kontrolek opracowanych samodzielnie, funkcje kontrolek Ajax można rozszerzać, a nawet implementować ich zupełnie nowe zastosowania. Obecnie można więc zjeść ciastko i mieć ciastko. Nadal można tworzyć aplikacje ASP.NET w tym samym środowisku IDE, co dotychczas, a jednocześnie dodawać do nich skrypty wyko- nywane po stronie klienta, realizujące asynchroniczne wywołania zwrotne (a zwłaszcza odczy- tujące dane w sposób asynchroniczny!). Ponadto można do tego celu wykorzystywać bibliotekę gruntownie przetestowanych, gotowych do użycia kontrolek zawierających pełny wymagany kod JavaScript. Jednak najważniejszą informacją jest to, że uaktualnienia asynchroniczne polepszają zarówno wydajność aplikacji, jak i sposób, w jaki tę wydajność odczuwa użytkownik. Efekt taki osiągany jest dzięki temu, że strona nie jest przesyłana z powrotem do serwera, lecz dane są odczyty- wane niezależnie od procesu odtwarzania wyglądu strony. Dzięki temu strona nie migoce, a operacja odczytu danych jest realizowana znacznie szybciej. Kontrolka ScriptManager W firmie Microsoft szybko zdano sobie sprawę, że integrowanie standardowych kontrolek ASP.NET i stron z kontrolkami Ajax (zawierających kody JavaScript i DHTML) byłoby zada- niem skomplikowanym, nużącym i wykonywanym wielokrotnie. Utworzono więc kontrolkę ScriptManager, dzięki czemu programiści mają dostęp do w pełni przetestowanego, niezawod- nego narzędzia, którego zadaniem jest zarządzanie wykonaniem „brudnej” roboty. Dodanie kontrolki ScriptManager do strony (środowisko IDE dodaje ją automatycznie w momencie utworzenia projektu wykorzystującego technologię Ajax) rozwiązuje problem integracji kon- trolek ASP.NET z kontrolkami Ajax, a obecność kontrolki na stronie, która z niej nie korzysta, nie stanowi tak naprawdę żadnego dodatkowego obciążenia. Poniżej przedstawiono deklarację, która musi pojawić się na każdej stronie i którą automatycznie umieszcza środowisko IDE: asp:ScriptManager ID= ScriptManager1 runat= server / Kontrolka ScriptManager | 81 Kontrolka ScriptManager jest widoczna w widoku projektowania Design, co widać na ry- sunku 3.1, natomiast po uruchomieniu witryny nie będzie ona widoczna dla użytkownika. Rysunek 3.1. Kontrolka ScriptManager jest widoczna na stronie w widoku Design, natomiast w przeglądarce będzie ona niewidoczna dla użytkownika Implementacja mechanizmu częściowych uaktualnień strony przy użyciu technologii ASP.NET i Ajax przebiega nadspodziewanie łatwo. Wystarczy jedynie pozostawić domyślną wartość True właściwości EnablePartialRendering kontrolki ScriptManager. Po wykonaniu jakże skomplikowanego zadania polegającego na tym, by nie zmieniać wartości właściwości EnablePartialRendering, na stronę można przeciągnąć jedną lub więcej kontrolek UpdatePanel. Każdy panel UpdatePanel jest uaktualniany oddzielnie i w sposób asynchroniczny, bez wpływu na inne panele ani na inne kontrolki znajdujące się na stronie. I to wszystko. Niemal bez wysiłku osiągnęliśmy natychmiastowy wzrost wydajności naszej aplikacji. Aby przekonać się, jak imponujący efekt można w ten sposób osiągnąć, zmodyfikujemy pro- jekt AdventureWorks z poprzedniego rozdziału — wstawimy do niego kontrolki UpdatePanel, aby zwiększyć wydajność działania aplikacji. Jak pamiętamy, w przykładzie tym (widocznym na rysunku 2.9) utworzono parę przycisków opcji (które wtedy nie zostały jednak udostępnione), których zadaniem było sterowanie widocznością kontrolki Panel służącej do gromadzenia infor- macji osobistych podawanych przez użytkownika. Teraz udostępnimy właśnie ten mechanizm. 82 | Rozdział 3. Sprytne witryny WWW z technologią Ajax Zazwyczaj kliknięcie przycisku opcji powoduje wykonanie wywołania zwrotnego do serwera, a to z kolei doprowadziłoby do chwilowego zniknięcia strony i jej ponownego wyświetlenia. Jednak dzięki kontrolce Ajax UpdatePanel uaktualnienie strony zostanie wykonane w sposób asynchroniczny, a więc strona będzie cały czas widoczna dla użytkownika. Najpierw należy utworzyć kopię Formularza Zamówień Firmy AdventureWorks. Niech nowy projekt nosi nazwę AdventureWorksRevisited. Należy go od razu uruchomić, aby przekonać się, że działa poprawnie. Sposób kopiowania witryn internetowych opisano w dodatku A. Następnie trzeba usunąć wszystkie kontrolki znajdujące się pod panelem pnlPersonalInfo (wszystkie elementy znajdujące się pod kontrolką Panel z wyjątkiem znacznika zamykającego formularz). Konieczne będzie również usunięcie z pliku z kodem źródłowym niepotrzebnych już procedur obsługi zdarzenia. (Bez trudu można zidentyfikować te procedury, które nie są już potrzebne — wystarczy uruchomić witrynę i sprawdzić zgłoszone błędy kompilacji). Jak się okazuje, niepotrzebne są wszystkie procedury obsługi zdarzeń zaimplementowane w poprzednim przykładzie. Teraz na stronie trzeba umieścić kontrolkę Ajax UpdatePanel, która otoczy przyciski opcji. Aplikację w finalnej postaci przedstawiono na rysunku 3.2 — widać na nim stronę z panelem — zarówno widocznym, jak i ukrytym. Niech przyciski opcji Tak i Nie zaczną w końcu wykonywać jakieś działania. Każdą z kontrolek RadioButton należy zaznaczyć i sprawdzić zawartość okna właściwości Properties. Najpierw trzeba się upewnić, że właściwość Text każdej kontrolki ma właściwą wartość: Tak oraz Nie. Następnie właściwości AutoPostBack obydwu kontrolek należy przypisać wartość True. Jak wspomniano już w rozdziale 2., gdy AutoPostBack będzie mieć wartość True, wówczas na- tychmiast po jego kliknięciu przycisk opcji zainicjuje wywołanie zwrotne do serwera, co z kolei spowoduje wykonanie zaimplementowanych czynności. Jak pokazano już w rozdziale 2., czynności przeznaczone do wykonania definiuje się w ramach procedur obsługi zdarzeń. W widoku projektowania Design należy utworzyć procedurę obsługi zdarzenia dla przycisku opcji Tak — w tym celu trzeba kliknąć myszą przycisk opcji rbYes. W oknie właściwości Properties należy kliknąć przycisk z błyskawicą, aby przełączyć się z widoku właściwości do widoku zdarzeń, w którym jednym z dostępnych zdarzeń będzie Checked- Changed. W polu po prawej stronie nazwy zdarzenia należy wpisać tekst YesNoEventHandler, następnie nacisnąć klawisz tabulacji (albo Enter), aby przejść do pliku z kodem źródłowym, w którym kursor zostanie od razu umieszczony w szablonie nowej procedury obsługi zdarzenia i będzie można przystąpić do implementacji własnego kodu źródłowego. Jednak zanim wpiszemy od- powiednie polecenia, należy powrócić do widoku Design i kliknąć przycisk opcji rbNo. Po raz wtóry trzeba kliknąć myszą pole po prawej stronie zdarzenia CheckedChanged. Tym razem w polu tym pojawi się przycisk strzałki skierowanej w dół. Jego kliknięcie umożliwi wybranie z listy już istniejącej procedury obsługi zdarzenia, co widać na rysunku 3.3. Kontrolka ScriptManager | 83 Rysunek 3.2. Witryna WWW AdventureWorkRevisited z ukrytą i widoczną kontrolką Panel. Wkrótce będzie się można przekonać, że wersja witryny korzystająca z technologii Ajax działa znacznie efektowniej niż wersja opracowana w rozdziale 2 Rysunek 3.3. Kliknięcie strzałki skierowanej w dół znajdującej się obok zdarzenia CheckedChanged kontrolki umożliwi podłączenie kontrolki do procedury obsługi zdarzenia, która została utworzona już wcześniej 84 | Rozdział 3. Sprytne witryny WWW z technologią Ajax Na liście rozwijanej należy wskazać procedurę YesNoEventHandler. Ponownie IDE przeniesie użytkownika bezpośrednio do kodu źródłowego procedury obsługi zdarzenia znajdującego się w pliku z kodem źródłowym. Warto zwrócić uwagę, że tym razem instrukcja Handles wska- zuje, iż procedura obsługuje zdarzenie CheckedChanged już dla dwóch przycisków opcji. W pro- cedurze należy dopisać kod źródłowy wyróżniony na poniższym listingu pogrubioną czcionką: Protected Sub YesNoEventHandler(ByVal sender As Object, _ ByVal e As System.EventArgs) _ Handles rbNo.CheckedChanged, rbYes.CheckedChanged pnlPersonalInfo.Visible = rbYes.Checked End Sub Program można już uruchomić i kliknąć najpierw przycisk opcji Tak, a następnie przycisk Nie. Po kliknięciu Tak panel powinien zostać wyświetlony na stronie, natomiast zaznaczenie opcji Nie powinno doprowadzić do zniknięcia panelu. Jak pokazano w poprzednim rozdziale, atrybut Visible wskazuje, czy panel ma być wyświetlany, a w powyższym kodzie źródłowym wartość właściwości Visible powiązano z wartością kontrolki rbYes. Jednak po kliknięciu dowolnego przycisku opcji da się zapewne zauważyć krótkie mignięcie strony albo jej poruszenie w momencie, gdy cała strona zostanie odświeżona. Czasami odświeże- nie strony może nawet nastąpić z dość znacznym opóźnieniem. Przyczyną jest fakt, że po każ- dym kliknięciu przycisku opcji cała strona zostaje odesłana do serwera w celu jej przetworzenia, na serwerze wykonywana jest procedura obsługi zdarzenia, po czym strona znowu w całości jest przesyłana z powrotem do przeglądarki. Ajax rozwiązuje problem migotania w taki sposób, że odświeżane są jedynie wybrane części strony, i to w trybie asynchronicznym. Dzięki odświeżaniu segmentów strony „w tle”, unika się konieczności wysyłania całej strony do serwera oraz ponownego jej generowania całkowicie od nowa. W przykładowej aplikacji AdventureWorks — w takiej postaci, w jakiej znajduje się ona obecnie, wywołanie zwrotne powoduje również utratę aktualnej pozycji użytkownika na stronie. Gdy strona jest generowana od nowa, przeglądarka wyświetla ją od począt- kowego elementu, co może być bardzo irytujące. Niedogodności tej można uniknąć przez przypisanie właściwości MaintainScroll (cid:180)PositionOnPostBack dyrektywy Page wartości True. W tym celu w widoku Source należy otworzyć plik z kodem znaczników i zmienić definicję dyrektywy Page znajdującej się na początku strony: @ Page Language= VB AutoEventWireup= true CodeFile= OrderForm.aspx.vb Inherits= _Default MaintainScrollPositionOnPostBack= true W widoku Design należy zaznaczyć kontrolkę ScriptManager i sprawdzić zawartość okna Properties. Jeśli okno właściwości nie jest widoczne, należy kliknąć kontrolkę prawym przyci- skiem myszy i wybrać polecenie Properties. W oknie właściwości trzeba się upewnić, że wła- ściwość EnablePartialRendering ma wartość True. Naszym celem jest doprowadzenie do tego, by w momencie, gdy użytkownik kliknie jeden z przycisków opcji, uaktualniany był wyłącznie sam panel pnlPersonalInfo. Aby to osiągnąć, trzeba umieścić Panel i przyciski opcji wewnątrz kontrolki UpdatePanel, dostępnej w sekcji Ajax Extensions okna narzędziowego Toolbox. Kontrolka ScriptManager | 85 W oknie projektowania Design należy otworzyć zakładkę Ajax Extensions okna narzędziowego Toolbox i przeciągnąć z niej na formularz kontrolkę UpdatePanel (tę samą operację można oczy- wiście wykonać w widoku Source). Następnie trzeba zaznaczyć tekst pytania o udostępnienie danych osobistych, przyciski opcji i panel pnlPersonalInfo, po czym wszystkie te elementy przeciągnąć do kontrolki UpdatePanel. I to właściwie już wszystko. Wykonanie tych samych czynności w widoku Source przebiega bardzo podobnie: naj- pierw z okna Toolbox trzeba przeciągnąć do okna kontrolkę UpdatePanel, a następnie przenieść odpowiednie znaczniki do jej wnętrza. Program należy ponownie uruchomić i kliknąć najpierw jeden, a potem drugi przycisk opcji — różnica będzie widoczna gołym okiem. Tym razem strona nie powinna już migotać, ponie- waż odświeżany jest wyłącznie panel. Możemy więc już z dumą powiedzieć: „Nieźle!”. Rozszerzone kontrolki dostępne w Control Toolkit Pakiet narzędziowy Ajax Control Toolkit udostępnia szereg dodatkowych kontrolek wyko- rzystujących technologię Ajax, za pomocą których można rozszerzyć możliwości tworzonej aplikacji internetowej. W tabeli 3.1 opisano wybrane, najbardziej użyteczne kontrolki dostępne w pakiecie Ajax Control Toolkit. Kontrolka TextBoxWatermarkExtender Wiele kontrolek dostępnych w pakiecie narzędziowym ma w nazwie słowo „extender” — ozna- cza to, że nie działają one samodzielnie, ale rozszerzają działanie jednej ze standardowych kontrolek. Na przykład kontrolka TextBoxWatermarkExtender współpracuje z kontrolką TextBox i dodaje do niej efekt znaku wodnego. Kontrolka rozszerzająca posiada właściwości, za pomocą których można wskazać modyfikowane przez nią pole tekstowe TextBox, zdefiniować tekst wyświetlany jako znak wodny, a także styl, jaki należy zastosować względem znaku wodnego. Na rysunkach 3.4 i 3.5 zaprezentowano działanie znaków wodnych. Rysunek 3.4. Wygląd kontrolki ze znakiem wodnym, zanim użytkownik zacznie wpisywać jakiekolwiek dane. Znak wodny przypomina użytkownikowi, co należy wpisać w polu tekstowym, a także upewnia go, że w danym momencie pole tekstowe nie zawiera żadnej wartości Rysunek 3.5. Gdy użytkownik zaczyna wpisywać dane w polu tekstowym, znak wodny znika i wobec danych stosowany jest styl wyraźnie odróżniający je od znaku wodnego 86 | Rozdział 3. Sprytne witryny WWW z technologią Ajax Tabela 3.1. Wybrane kontrolki z pakietu narzędziowego Ajax Control Toolkit Kontrolka Accordion AlwaysVisibleControlExtender AnimationExtender CascadingDropDown CollapsiblePanelExtender ConfirmButtonExtender DragPanelExtender FilteredTextBoxExtender HoverMenuExtender MutuallyExclusiveCheckBoxExtender NoBot NumericUpDownExtender PagingBulletedListExtender PasswordStrength Rating ReorderList TextBoxWaterMarkExtender UpdatePanelAnimationExtender ValidatorCalloutExtender Opis Kontrolka udostępnia okna zadaniowe, z których w danym momencie widoczne jest tylko jedno. Kontrolka pozostaje widoczna również w trakcie przewijania strony przez użytkownika. Kontrolka wspiera animowanie panelu lub innej kontrolki znajdującej się na stronie. Opcja wybrana przez użytkownika w jednej kontrolce rozwijanej determinuje zakres wartości dostępnych w drugiej kontrolce. Umożliwia zwijanie i rozwijanie kontrolki Panel. Gdy użytkownik kliknie przycisk, wyświetlane jest okno dialogowe z prośbą o potwierdzenie dokonanego wyboru. Pozwala użytkownikowi na przeciąganie panelu w dowolne miejsce strony. Zapewnia, że w polu tekstowym zostanie wpisany jedynie „prawidłowy” tekst. Wyświetla menu, gdy nad kontrolką umieszczony zostanie kursor myszy. Pozwala na wybranie jednego lub żadnego spośród pól wyboru. Kontrolka działa podobnie do przycisków opcji, z tą różnicą że użytkownik może również odznaczyć wszystkie dostępne opcje. Kontrolka, której zadaniem jest zablokowanie spamu i działalności robotów w witrynie internetowej. Dodaje do kontrolki TextBox możliwość przewijania wartości w górę i w dół. Przewijane mogą być wartości liczbowe albo wartości wskazane na liście. Rozszerza działanie kontrolki BulletedList o możliwość stronicowania i sortowania po stronie klienta. Pomaga użytkownikowi zdefiniować hasło trudne do złamania. Kontrolka umożliwiająca dokonanie oceny przez wskazanie liczby gwiazdek z uwzględnieniem jej maksymalnego pułapu (kontrolki można użyć na przykład do zdefiniowania 4-gwiazdkowego, 5-gwiazdkowego albo 10-gwiazdkowego systemu oceny restauracji albo filmów wyświetlanych w kinach). Pozwala użytkownikowi na zmianę kolejności elementów listy przez przeciągnięcie ich myszą na nowe pozycje. Wyświetla w polu tekstowym tekst pomocy i ukrywa go, gdy użytkownik rozpocznie wpisywanie danych w tym polu. Zapewnia animowanie panelu: przenoszenie, zmianę rozmiaru i znikanie. Rozszerza działanie kontrolek weryfikacji poprawności ASP.NET o możliwość wyświetlania ostrzeżenia z obrazkiem w przypadku, gdy wartość w polu okaże się nieprawidłowa. Aby przekonać się, jak działa znak wodny, należy skopiować poprzedni przykład Adventu- reWorksRevisited do nowej witryny o nazwie AdventureWorksWatermarks. Zanim przystąpimy do wprowadzania zmian na stronie, trzeba najpierw utworzyć arkusz stylów, w którym zdefiniowane będą style tekstu ze znakiem wodnym i bez niego. Style i arkusze stylów zostaną szczegółowo opisane w rozdziale 6., dlatego w tym punkcie zaprezentujemy jedynie najważniejsze informacje na ich temat. Rozszerzone kontrolki dostępne w Control Toolkit | 87 Aby utworzyć arkusz stylów, należy wybrać polecenie Website/Add New Item…. W oknie dialo- gowym Add New Item trzeba wskazać opcję Style Sheet, zaakceptować domyślną nazwę arkusza stylów StyleSheet.css i kliknąć przycisk Add, jak na rysunku 3.6. Rysunek 3.6. Aby do witryny WWW dodać arkusz stylów, należy skorzystać z okna dialogowego Add New Item W odpowiedzi w edytorze otwarty zostanie arkusz stylów z pustym elementem body. Do arkusza należy dopisać kod wyróżniony na listingu 3.1. Listing 3.1. Zawartość arkusza stylów StyleSheet.css dla znaków wodnych body { } .watermarked { padding:2px 0 0 2px; border:1px solid #BEBEBE; background-color:#F0F8FF; color:gray; font-family:Verdana; font-weight:normal; } .unwatermarked { height:18px; width:148px; font-weight:bold; } Przedstawiony kod dodaje dwie klasy stylów: watermarked i unwatermarked, które w niniejszym przykładzie będą stosowane dla tekstów. W oknie Design trzeba otworzyć plik OrderForm.aspx, zaznaczyć pole tekstowe txtName służące do wpisywania imienia i nazwiska klienta i w oknie właściwości Properties przypisać właściwo- ści CssClass wartość unwatermarked (wielkości liter w nazwach klas stylów są uwzględniane). 88 | Rozdział 3. Sprytne witryny WWW z technologią Ajax Tak samo należy postąpić względem pola tekstowego txtAddress. W ten sposób wskazana zostanie klasa stylu, który będzie stosowany względem tekstu wpisywanego przez użytkow- nika w polu tekstowym, co widać na rysunku 3.5. W oknie narzędziowym Toolbox należy rozwinąć sekcję Ajax Controls Toolkit i przeciągnąć znajdującą się w nim kontrolkę TextBoxWatermarkExtender do tej samej komórki tabeli, w której znajduje się pole tekstowe txtName. Właściwości ID nowej kontrolki należy przypisać wartość CustomerNameWatermark, zaś jako TargetControlID wpisać txtName. Właściwość ID spełnia taką samą rolę, co ID wszystkich innych kontrolek, natomiast TargetControlID wskazuje kontrolkę, w której ma zostać zastosowany efekt znaku wodnego — w naszym przypadku jest to kontrolka pola tekstowego TextBox o nazwie txtName. Ekran powinien się prezentować podobnie jak na rysunku 3.7 (nietrudno zauważyć, że w oknie Properties właściwości posor- towano alfabetycznie). Rysunek 3.7. Do formularza należy dodać kontrolkę TextBoxWatermarkExtender i odpowiednio zdefiniować jej właściwości ID i TargetControlID Konieczne jest jeszcze odpowiednie zdefiniowanie dwóch dodatkowych właściwości kontrolki: WatermarkCssClass oraz WatermarkText. Niestety, właściwości te nie są dostępne w oknie właściwości Properties, dlatego trzeba przełączyć się do widoku Source i wpisać je ręcznie. Jednak przedtem do komórki tabeli, w której znajduje się pole tekstowe txtAddress, należy przeciągnąć kolejną kontrolkę TextBoxWatermarkExtender i jako jej identyfikator ID wpisać CustomerAd- dressWatermark, zaś właściwości TargetControlID przypisać wartość txtAddress. Po umieszczeniu kontrolki w komórce tabeli należy wrócić do widoku Source i dodać atrybuty WatermarkCssClass oraz WatermarkText. Do obydwóch kontrolek pola tekstowego trzeba dopisać dwa wiersze kodu, aby osiągnąć efekt przedstawiony na listingu 3.2. Rozszerzone kontrolki dostępne w Control Toolkit | 89 Listing 3.2. Znacznik TextBoxWatermarkExtender tr td style= width: 100px Imię i nazwisko klienta: /td td style= width: 100px asp:TextBox ID= txtName runat= server CssClass= unwatermarked /asp:TextBox cc1:TextBoxWatermarkExtender ID= CustomerNameWatermark runat= server TargetControlID= txtName WatermarkCssClass= watermarked WatermarkText= Twoje imię i nazwisko /cc1:TextBoxWatermarkExtender /td /tr tr td style= width: 100px Adres: /td td style= width: 100px asp:TextBox ID= txtAddress runat= server CssClass= unwatermarked /asp:TextBox cc1:TextBoxWatermarkExtender ID= CustomerAddressWatermark runat= server TargetControlID= txtAddress WatermarkCssClass= watermarked WatermarkText= Adres domowy /cc1:TextBoxWatermarkExtender /td /tr Powyższy kod dodaje do kontrolki TextBox znak wodny, zanim użytkownik zacznie cokolwiek wpisywać. Właściwość WatermarkText wskazuje tekst, który ma być wyświetlany w polu Text- Box, zaś WatermarkCssClass zawiera klasę stylu do zastosowania względem znaku wodnego. Klasę tę zdefiniowaliśmy wcześniej w arkuszu stylów. Efekt jest taki, że w polach tekstowych TextBox wyświetlane jest elegancko sformatowane przypomnienie dla użytkownika, które znika dopiero w momencie, gdy użytkownik zacznie wpisywać jakąś wartość z klawiatury. Przypomnienie zostało przedstawione na rysunku 3.4. W ostatnim kroku w pliku znaczników, w znaczniku head , należy dopisać jeszcze jeden wiersz kodu HTML, aby arkusz stylów stał się widoczny dla strony. Bez tego wiersza na stronie nie można byłoby zastosować żadnej klasy stylów zdefiniowanych wcześniej: style type= text/css @import url(StyleSheet.css); /style Teraz można już uruchomić aplikację. Pola tekstowe Imię i nazwisko klienta oraz Adres będą wyglądać podobnie jak na rysunku 3.4. Gdy w którymś z tych pól użytkownik zacznie wpisywać jakąś wartość, dotychczas znajdujący się w nich tekst zostanie usunięty, aby nie powodować ewentualnego zamieszania, co widać na rysunku 3.5. Kontrolka PopupControlExtender Oszczędne gospodarowanie miejscem dostępnym na stronie jest zawsze dobrą praktyką, dlatego kontrolka PopupControlExtender jawi się jako bardzo przydatne narzędzie do prezentowa- nia jak największej ilości informacji na jak najmniejszej powierzchni. Kontrolkę PopupContro- lExtender dołącza się do innej, wybranej kontrolki. Gdy użytkownik kliknie taką kontrolkę, wówczas wyświetlane jest podręczne okno z dodatkową zawartością. Jeżeli w oknie podręcz- nym umieścimy kontrolkę UpdatePanel, będzie w nim można wyświetlać dane odczytywane z serwera w sposób asynchroniczny. Efekt będzie więc bardzo interesujący. 90 | Rozdział 3. Sprytne witryny WWW z technologią Ajax Aby zobaczyć, w jaki sposób działa kontrolka PopupControlExtender, zmodyfikujemy po- przedni przykład i zamiast listy przycisków opcji RadioButtonList służącej do wyboru kategorii wiekowej wstawimy zwykłe pole tekstowe TextBox. Następnie dodamy PopupControlExtender i połączymy ją z polem tekstowym. Kontrolka PopupControlExtender będzie używać panelu UpdatePanel, aby móc wyświetlać RadioButtonList w oknie podręcznym. Na rysunku 3.8 widać pole tekstowe TextBox, które oczekuje na kliknięcie go przez użytkow- nika. Aby zachęcić użytkownika do kliknięcia pola tekstowego, wykorzystano dodatkowo kontrolkę TextBoxWatermarkExtender. Rysunek 3.8. Pole tekstowe TextBox ma dodatkowo powiązane ze sobą kontrolki: PopupControlExtender oraz TextBoxWatermarkExtender, która zachęca użytkownika do kliknięcia pola myszą Rysunek 3.9 pokazuje, co dzieje się, gdy użytkownik kliknie myszą pole tekstowe TextBox. Znak wodny znika, a zamiast niego pojawia się okno podręczne zawierające listę przycisków opcji RadioButtonList z kategoriami wiekowymi do wyboru przez użytkownika. Ponieważ lista znajduje się wewnątrz panelu UpdatePanel, nie trzeba wykonywać wywołania zwrotnego do serwera (a więc unikamy także migotania ekranu). Wszystkie czynności są wykonywane po stronie klienta. Rysunek 3.9. Gdy użytkownik kliknie myszą pole tekstowe TextBox z kontrolką PopupControlExtender, otwierane jest podręczne okno zawierające przyciski opcji Gdy użytkownik zaznaczy konkretny przycisk opcji, wybrana wartość zostanie odesłana do serwera. Jednak również w tym przypadku użyty zostanie UpdatePanel, zatem cała reszta strony pozostanie bez zmian. Okno podręczne zostanie zamknięte, a w polu tekstowym TextBox wy- świetlona zostanie wybrana wartość, jak na rysunku 3.10. Aby zaimplementować rozwiązanie zaprezentowane powyżej, należy skopiować poprzednią przykładową aplikację AdventureWorksWatermarks do nowej witryny internetowej o nazwie AdventureWorksPopupControl. Najpierw przeciągniemy wszystkie wymagane kontrolki i uzu- pełnimy ich kod, a następnie opiszemy, w jaki sposób działa całe rozwiązanie. Rozszerzone kontrolki dostępne w Control Toolkit | 91 Rysunek 3.10. Po wybraniu przez użytkownika konkretnej wartości UpdatePanel zostanie zamknięty, a sama wartość pojawi się w polu tekstowym TextBox W poprzednim przykładzie znacznik komórki tabeli zawierającej tytuł Przedział wieku i przyciski opcji miał następującą postać: td style= width: 367px Przedział wieku nbsp; br / asp:RadioButtonList ID= rblAge runat= server AutoPostBack= True Width= 125px asp:ListItem Poniżej 21 /asp:ListItem asp:ListItem Od 21 do 30 /asp:ListItem asp:ListItem Od 31 do 50 /asp:ListItem asp:ListItem Powyżej 50 /asp:ListItem /asp:RadioButtonList /td W widoku Design należy przeciągnąć standardową kontrolkę TextBox z okna narzędziowego Toolbox do komórki, w której aktualnie znajduje się grupa przycisków opcji rblAge. Jako ID nowego pola tekstowego należy wpisać txtAgeCategory, a jego właściwości Width przypisać wartość 280px. Następnie z pakietu narzędziowego Ajax Control Toolkit okna Toolbox do tej samej komórki tabeli trzeba przeciągnąć kontrolki TextBoxWatermarkExtender oraz PopupCon- trolExtender. Ponadto w komórce tej potrzebować będziemy standardowej kontrolki Panel, której identyfikatorem ID powinno być pnlAgeCategories. Jako wartość właściwości TargetControlID kontrolki TextBoxWatermarkExtender należy wpisać txtAgeCategory (czyli ID nowego pola tekstowego TextBox), natomiast jako tekst znaku wod- nego WatermarkText można wpisać Kliknij, by wyświetlić dostępne kategorie (tekst ten trzeba wpisać w widoku Source, ponieważ właściwość nie jest dostępna w widoku Design). Ponadto można wskazać klasę stylów WatermarkCssClass, jak uczyniono to w poprzednim punkcie, jednak nie będziemy się tym przejmować w tym przykładzie. Pozostając nadal w widoku Source (niestety, wciąż nie wszystkie właściwości są dostępne w widoku projektowania Design), należy zdefiniować właściwości kontrolki PopupContro- lExtender. Właściwości TargetControlID należy przypisać identyfikator ID pola TextBox (txtAgeCategory). Dzięki temu okno podręczne zostanie wyświetlone, gdy użytkownik kliknie pole tekstowe txtAgeCategory. Jako PopupControlID należy wpisać pnlAgeCategories — jest to kontrolka, która zostanie wyświetlona w momencie kliknięcia pola tekstowego (samą kontrolkę Panel wypełnimy odpowiednimi elementami za chwilę). Na końcu jako Position kontrolki PopupControlExtender należy wskazać Bottom. Teraz trzeba wypełnić kontrolkę Panel. W tym celu należy przełączyć się do widoku Design, a następnie z sekcji Ajax Extensions okna narzędziowego Toolbox do panelu pnlAgeCategories przeciągnąć kontrolkę UpdatePanel. Następnie już wcześniej istniejącą listę przycisków Radio- ButtonList o nazwie rblAge trzeba umieścić wewnątrz dopiero co przeciągniętego panelu UpdatePanel. 92 | Rozdział 3. Sprytne witryny WWW z technologią Ajax Moglibyśmy w tym momencie już zakończyć prace i wszystko działałoby zgodnie z oczeki- waniami. Warto jednak jeszcze jawnie zdefiniować wartości Value dla każdego elementu znajdującego się na liście przycisków opcji RadioButtonList. W tym celu trzeba kliknąć tag inteligentny kontrolki RadioButtonList i wybrać polecenie Edit Items, aby uruchomić edytor ListItem Collection Editor, widoczny na rysunku 3.11. Rysunek 3.11. Po kliknięciu tagu inteligentnego kontrolki RadioButtonList zostanie uruchomiony edytor ListItem Collection Editor, służący do edycji elementów listy W oknie dialogowym ListItem Collection Editor należy kolejno wybierać wszystkie pozycje listy widoczne w oknie Members i zmieniać ich wartości Value zgodnie z poniższą tabelą: Text Poniżej 21 Od 21 do 30 Od 31 do 50 Powyżej 50 Value Poniżej 21 — Ciesz się! 21 do 30 — Życie na maksa 31 do 50 — Życie jest piękne Powyżej 50 — Złote lata Gdy wszystkie wartości zostaną już zmodyfikowane, widok Design powinien się prezentować podobnie jak na rysunku 3.12. Warto poświęcić dodatkową chwilę i wrócić do widoku Source, aby rzucić okiem na znaczniki wygenerowane przez środowisko IDE. Znaczniki te można oczywiście wpisać ręcznie w widoku Source, jednak wtedy trzeba by umieścić znacznik contentTem- plate wewnątrz znacznika updatePanel . Natomiast IDE wykonuje tę operację automatycznie, gdy w widoku Design wykonana zostanie operacja przeciągania i upusz- czania. W ostatnim kroku trzeba zaimplementować procedurę obsługi zdarzenia dla kontrolki Radio (cid:180)ButtonList (o nazwie rblAge), która będzie obsługiwać zdarzenie polegające na zmianie wy- branej opcji. Można tego dokonać w bardzo prosty sposób, podobny do stosowanego już wcze- śniej — wystarczy w widoku Design dwukrotnie kliknąć kontrolkę rblAge. Spowoduje to Rozszerzone kontrolki dostępne w Control Toolkit | 93 Rysunek 3.12. Widok projektowania Design formularza zawierającego kontrolkę PopupControlExtender. Warto zwrócić uwagę na panel UpdatePanel i znajdującą się w nim listę przycisków opcji RadioButtonList otwarcie pliku z kodem źródłowym, utworzenie szablonu procedury obsługi zdarzenia o nazwie rblAge_SelectedIndexChanged i umieszczenie we wnętrzu tej metody kursora, dzięki czemu od razu będzie można przystąpić do implementacji. Należy zatem wpisać następujący wiersz kodu: PopupControlExtender1.Commit(rblAge.SelectedValue.ToString()) Wpisany kod będzie wykonywany za każdym razem, gdy użytkownik zmieni opcję wybraną na liście RadioButtonList. Wartość wybrana przez użytkownika zostanie przekształcona w ciąg znaków przez metodę ToString(), zaś wywołanie metody Commit wskaże kontrolce Popup- ControlExtender, że należy wymusić automatyczne odświeżenie strony. ToString() jest specjalną metodą, przekształcającą wartości tekstowe w ciągi znaków, które można następnie wyświetlać jako tekst w etykietach albo w innej przeznaczonej do tego kontrolce. Komórka tabeli zawierająca elementy listy Przedział wieku powinna prezentować się w wido- ku Source w sposób przedstawiony na listingu 3.3. 94 | Rozdział 3. Sprytne witryny WWW z technologią Ajax Listing 3.3. Kontrolka PopupControlExtender td style= width: 10885px Przedział wieku nbsp; br / asp:TextBox ID= txtAgeCategory runat= server Width= 280px /asp:TextBox cc1:TextBoxWatermarkExtender ID= TextBoxWatermarkExtender1 runat= server TargetControlID= txtAgeCategory WatermarkText= Kliknij, by wyświetlić dostępne kategorie /cc1:TextBoxWatermarkExtender cc1:PopupControlExtender ID= PopupControlExtender1 runat= server TargetControlID= txtAgeCategory PopupControlID= pnlAgeCategories Position= Bottom /cc1:PopupControlExtender asp:Panel ID= pnlAgeCategories runat= server Height= 50px Width= 125px asp:UpdatePanel ID= UpdatePanel2 runat= server ContentTemplate asp:RadioButtonList ID= rblAge runat= server AutoPostBack= True Width= 125px OnSelectedIndexChanged= rblAge_SelectedIndexChanged asp:ListItem Value= Poniżej 21 - Ciesz się! Poniżej 21 /asp:ListItem asp:ListItem Value= 21 do 30 - Życie na maksa Od 21 do 30 /asp:ListItem asp:ListItem Value= 31 do 50 - Życie jest piękne Od 31 do 50 /asp:ListItem asp:ListItem Value= Powyżej 50 - Złote lata Powyżej 50 /asp:ListItem /asp:RadioButtonList /ContentTemplate /asp:UpdatePanel /asp:Panel nbsp; /td Głowa do góry! Kod wygląda na skomplikowany, ale tak naprawdę nietrudno go zrozumieć. Cały powyższy kod opisuje kontrolkę TextBox (o identyfikatorze ID txtAgeCategory), dwie kontrolki rozszerzające oraz kontrolkę Panel. Pierwszą kontrolką rozszerzającą jest Text- BoxWatermarkExtender, drugą zaś kontrolka PopupControlExtender (fakt, że ze sobą sąsiadują, jest przypadkowy). Obydwie kontrolki rozszerzające mają zdefiniowaną właściwość Target- ControlID, która zawiera identyfikator ID pola tekstowego txtAgeCategory, zresztą nietrudno zrozumieć dlaczego. Otóż zarówno PopupControlExtender, jak i TextBoxWatermarkExtender „rozszerzają” możliwości pola tekstowego TextBox o nazwie txtAgeCategory, dlatego celem obydwu kontrolek jest właśnie txtAgeCategory. Definicja kontrolki TextBoxWatermarkExtender nie wymaga dodatkowych wyjaśnień, większe trudności może natomiast sprawić PopupControlExtender. Kontrolka ta nie tylko musi mieć wskazaną kontrolkę docelową (tzn. którą kontrolkę rozszerza), ale również znać ID własnej kontrolki PopupControl — czyli kontrolki, która ma zostać wyświetlona, gdy nadejdzie odpo- wiedni moment. W naszym przykładzie wyświetlaną kontrolką jest pnlAgeCategories, czyli kontrolka ASP.NET Panel, która jednocześnie zawiera w sobie inne kontrolki. Pierwszą kontrolką znajdującą się Rozszerzone kontrolki dostępne w Control Toolkit | 95 wewnątrz panelu jest UpdatePanel o nazwie UpdatePanel2. Jak wiadomo, wszystkie elementy znajdujące się wewnątrz panelu UpdatePanel są uaktualniane asynchronicznie, dlatego listę przycisków opcji RadioButtonList umieszczono właśnie wewnątrz UpdatePanel. Sama kontrolka RadioButtonList zawiera serię elementów listy ListItem. Element listy ListItem może mieć dwie bardzo ważne właściwości (w naszym przypadku rzeczywiście je posiada). Właściwościami tymi są: tekst przeznaczony do wyświetlenia (znajdujący się między nawiasami otwierającym i zamykającym) oraz właściwość Value. W niektórych przypadkach właściwość Value okazuje się szczególnie użyteczna, ponieważ na jej podstawie programista może od razu odczytywać wartość, która jest powiązana z opcją wybraną przez użytkownika i nie musi w tym celu rozszyfrowywać wyświetlanego tekstu. Dla kontrolki RadioButtonList zdefiniowano dodatkowo procedurę obsługi zdarzenia SelectedIndexChanged. Za każdym razem, gdy użytkownik zaznaczy któryś z przycisków opcji, nastąpi wywołanie zaimplementowanej metody (w naszym przykładzie noszącej nazwę rblAge_SelectedIndexChanged), co pozwoli kontrolce na odpowiednie zareagowanie na doko- naną zmianę. W przedstawionym przykładzie reakcja sprowadza się do odczytania wartości powiązanej z wybranym przyciskiem opcji i wyświetlenia go w polu tekstowym. W tym celu wywołuje się metodę Commit kontrolki PopupControlExtender. Właściwość Position kontrolki PopupControlExtender ma wartość Bottom, dzięki czemu okno podręczne jest wyświetlane pod kontrolką docelową. Właściwość Position może przyjmować jedną z następujących dozwolonych wartości: Bottom, Center, Left, Right i Top. Kontrolka CollapsiblePanelExtender Kontrolka CollapsiblePanelExtender rozszerza działanie standardowej kontrolki Panel w ten sposób, że panel można zwijać i rozwijać. Dzięki temu na stronie można definiować regiony, które użytkownik może zwijać i rozwijać zgodnie z własną wolą. Panel rozwijany można zastosować na przykład do wyświetlania szczegółowych informacji na temat produktu, które mogą zainteresować klienta. W naszym przykładzie w panelu zostanie umieszczony tekst oraz fotografia jednego z autorów tej książki, tak aby jego dzieciom wydawało się, że wniósł on niebagatelny wkład w jej powstanie — choć, prawdę mówiąc, wkład ten był mizerny. Tekst Lorem Ipsum to standardowy wypełniacz tekstowy stosowany już od bez mała 600 lat, który drukarze nazywają greką. Sam tekst ma umożliwić jego czytelnikowi skupienie się nie na konkretnych słowach, lecz na ich układzie. Fragment wywodzi się z dzieła Cycerona pod tytułem De finibus bonorum et malorum (O granicy dobra i zła). Panel można samodzielnie zwijać i rozwijać w dowolnym momencie. Gdy CollapsiblePa- nelExtender będzie zwinięty, strona będzie wyglądać podobnie jak na rysunku 3.13. Natomiast po jego rozwinięciu strona będzie wyglądać jak na rysunku 3.14. Aby sworzyć przykładową aplikację, należy skopiować wcześniej utworzoną witrynę Adventu- reWorksPopupControl do nowej witryny WWW o nazwie AdventureWorksCollapsiblePanelExtender. Więcej informacji na temat kopiowania witryn znajduje się w dodatku A. 96 | Rozdział 3. Sprytne witryny WWW z technologią Ajax Rysunek 3.13. Gdy panel CollapsiblePanelExtender jest zwinięty, nie jest on w ogóle widoczny na stronie, a o jego obecności świadczy jedynie strzałka Rysunek 3.14. Gdy użytkownik kliknie strzałkę, panel CollapsiblePanelExtender zostanie rozwinięty i na stronie ukaże się tekst oraz obrazek W widoku projektowania Design na stronę trzeba przeciągnąć standardową kontrolkę ASP.NET Panel (a nie kontrolkę Ajax UpdatePanel), dostępną w sekcji Standard okna narzędziowego Toolbox, i umieścić ją pod pozostałymi kontrolkami już obecnymi na stronie. Jako ID kontrolki Panel należy wpisać pnlProductInfoHeader. W panelu znajdować się będzie obrazek, za pomo- cą którego użytkownicy będą ten panel zwijać, oraz tekst informujący użytkownika o zawartości zwiniętego panelu. Aby móc prezentować obrazek, należy do panelu przeciągnąć kontrolkę Image, a następnie w oknie właściwości Properties jako ID obrazka wpisać imgProductInfo_Toggle (cid:180)Image, zaś właściwości ImagUrl przypisać wartość collapse.jpg. Z kolei bezpośrednio w panelu należy wpisać słowa Informacja o produkcie. Rozszerzone kontrolki dostępne w Control Toolkit | 97 Obrazki ze strzałkami, znajdujące się nad słowami „Informacja o produkcie” i widoczne na rysunkach 3.13 i 3.14, noszą nazwy, odpowiednio: collapse.jpg oraz expand.jpg. Obydwa obrazki zostały dołączone do kodu źródłowego przykładowej aplikacji. Aby wskazać je (albo dowolne inne obrazki) bezpośrednio w oknie właściwości Properties, trzeba najpierw dołączyć pliki obrazków do witryny WWW poleceniem Website/Add Exi- sting Item…. Znacznik kontrolki Panel, który można odczytać po przełączeniu się do widoku Source, po- winien mieć następującą postać: asp:Panel ID= pnlProductInfoHeader runat= server Height= 50px Width= 144px asp:Image ID= imgProductInfo_ToggleImage runat= server ImageUrl= ~/collapse.jpg / br / Informacja o produkcie /asp:Panel Tak naprawdę nie ma większego znaczenia, czy w definicji kontrolki Image jako ImageUrl wpisany zostanie plik expand.jpg, czy collapse.jpg, ponieważ i tak to kontrolka CollapsiblePanelExtender będzie sterować wyświetlaniem odpowiedniego obrazka. Do obszaru projektowania należy przeciągnąć i umieścić pod panelem kolejną kontrolkę Panel. Ten panel z kolei będzie prezentować zawartość „rozwiniętej” kontrolki Panel. W oknie Pro- perties jako ID nowego panelu należy wpisać pnlProductInfo, jako jego kolor tła BackColor wybrać LightGray (kolor wybiera się na zakładce Web palety kolorów), a jako Width wpisać 450. W dalszej kolejności z okna narzędziowego Toolbox do panelu trzeba przeciągnąć standardową kontrolkę Label oraz również standardową kontrolkę Image. W oknie Design albo Source trzeba także zdefiniować właściwości ID i Text etykiety Label oraz właściwości ID i ImageUrl obrazka Image, zgodnie z przedstawionym poniżej fragmentem kodu. asp:Panel ID= pnlProductInfo runat= server BackColor= LightGray Width= 450px asp:Label ID= myLabel runat= server Text= Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam eleifend, turpis sit amet tincidunt euismod, urna eros mattis neque, vitae facilisis nulla dui ut dolor. Proin pretium. Etiam ultrices eleifend neque. Mauris vestibulum purus quis nibh. Phasellus dignissim. Vivamus laoreet magna id purus. In hac habitasse platea dictumst. Vivamus congue elit quis arcu. Sed lorem mauris, convallis non, porta sed, interdum id, nisl. Aenean id tortor. Sed ac quam. Suspendisse ornare luctus sapien. Praesent aliquet, lacus nec venenatis placerat, massa metus mattis dolor, non eleifend pede sapien et lorem. Curabitur dapibus faucibus nunc. /asp:Label br / br / asp:Image ID= Image1 runat= server ImageUrl= Dan at Vernal Pool.jpg / /asp:Panel Panele zwinięty i rozwinięty znajdują się już na swoich miejscach, można zatem dodać kon- trolkę Ajax CollapsiblePanelExtender i odpowiednio zdefiniować jej atrybuty. Kontrolkę CollapsiblePanelExtender należy przeciągnąć na stronę z sekcji Ajax Control Toolkit okna narzędziowego Toolbox i umieścić na samym dole. Jako identyfikator ID kontrolki trzeba wpisać cpeProductInfo, a pozostałe jej właściwości należy zdefiniować zgodnie z poniższym kodem deklaracji kontrolki: cc1:CollapsiblePanelExtender ID= cpeProductInfo runat= server CollapseControlID= pnlProductInfoHeader Collapsed= true CollapsedImage= expand.jpg 98 | Rozdział 3. Sprytne witryny WWW z technologią Ajax CollapsedText= Informacja o produkcie (pokaż szczegóły...) ExpandControlID= pnlProductInfoHeader ExpandedImage= collapse.jpg ExpandedText= Informacja o produkcie (ukryj szczegóły...) ImageControlID= imgProductInfo_ToggleImage SuppressPostBack= true TargetControlID= pnlProductInfo /cc1:CollapsiblePanelExtender Również w tym przypadku właściwości trzeba zdefiniować w widoku Source, ponieważ nie są one dostępne w widoku projektowania Design. Na tym etapie widok Design powinien się prezentować podobnie jak na rysunku 3.15. Rysunek 3.15. Widok Design witryny WWW AdventureWorksCollapsiblePanelExtender, w którym widoczna jest kontrolka Panel rozwijana przez użytkownika oraz kontrolka CollapsiblePanelExtender odpowiedzialna za samą operację rozwijania Poniżej przedstawiono znaczenie poszczególnych właściwości kontrolki CollapsiblePane- lExtender. • CollapseControlID/ExpandControlID — te właściwości wskazują kontrolki, które będą, odpowiednio: rozwijać lub zwijać panel w reakcji na kliknięcie myszą przez użytkownika. Jeżeli obydwie właściwości będą mieć tę samą wartość, jak w naszym przykładzie, wówczas z każdym kliknięciem myszy przełączany będzie status samego panelu. Obydwu właści- wościom należy przypisać wartość pnlProductInfoHeader. Rozszerzone kontrolki dostępne w Control Toolkit | 99 • Collapsed — wskazuje początkowy stan rozwijanego panelu. W naszym przykładzie właściwości przypisano wartość true, dzięki czemu na początku panel będzie zwinięty. Gdyby właściwości przypisać wartość false, panel byłby na początku rozwinięty. Zazwy- czaj przyjmuje się, że na początku panel powinien być zwinięty. • ImageControlID — identyfikator ID kontrolki Image, w której umieszczana będzie ikona sygnalizująca stan panelu (zwinięty lub rozwinięty). Stosownie do sytuacji, kontrolka rozszerzająca zastąpi zawartość kontrolki Image obrazkami wskazywanymi przez adresy URL zawarte w właściwościach CollapsedImage i ExpandedImage. Jeżeli ustawione będą wartości właściwości ExpandedText oraz CollapsedText, zostaną one użyte jako tekst obrazka wyświetlany w oknie porady. W przykładowej aplikacji właściwości ImageCon- trolID należy przypisać wartość imgProductInfo_ToggleImage. • CollapsedImage — ścieżka do obrazka wyświetlanego przez ImageControlID, gdy Panel jest zwinięty. Gdy panel jest zwinięty, klienci powinni ujrzeć ikonę wskazującą, że można go rozwinąć. Zatem właściwości należy przypisać nazwę obrazka expand.jpg. • CollapsedText — tekst, który ma być wyświetlany przez kontrolkę CollapseControlID, gdy panel jest zwinięty. Jest to zamienny tekst dla obrazka, gdy ImageControlID ma okre- śloną wartość; jest on także wyświetlany jako porada dla użytkownika. Właściwości należy przypisać wartość Informacja o produkcie (pokaż szczegóły...). • ExpandDirection — tej właściwości można przypisać wartość Vertical lub Horizontal, aby wskazać, czy panel ma się rozwijać, odpowiednio: z góry na dół czy od strony lewej do prawej. W przykładowej aplikacji właściwość ma wartość Vertical. • ExpandedImage — ścieżka do obrazka wyświetlanego przez ImageControlID, gdy Panel jest rozwinięty. Gdy panel jest rozwinięty, klienci powinni ujrzeć ikonę wskazującą, że można go zwinąć. Zatem właściwości należy przypisać nazwę obrazka collapse.jpg. • ExpandedText — tekst, który ma być wyświetlany przez kontrolkę CollapseControlID, gdy panel jest rozwinięty. Jest to zamienny tekst dla obrazka, gdy ImageControlID ma określoną wartość; jest on także wyświetlany jako porada dla użytkownika. Właściwości należy przypisać wartość Informacja o produkcie (ukryj szczegóły...). • SuppressPostBack — właściwość true sprawi, że w momencie zwinięcia lub rozwinięcia panelu kontrolka nie wykona wywołania zwrotnego. Jest to zgodne z naszymi oczekiwa- niami, zatem właściwości należy przypisać wartość true. • TargetControlID — kontrolka podlegająca zwijaniu i rozwijaniu — w naszym przykładzie jest to pnlProductInfo. Kluczową rzeczą, o której należy pamiętać, jest fakt, że to nie CollapsiblePanelExtender jest kontrolką zwijaną albo rozwijaną, lecz odpowiada ona za zwijanie i rozwijanie innej kontrolki. Atrybut TargetControlID wskazuje panel, który będzie rozwijany przez CollapsiblePanelExtender. Po uruchomieniu witryny panel będzie zwinięty, tak jak na rysunku 3.13. Kliknięcie myszą ikony znajdującej się nad tekstem Informacja o produkcie spowoduje rozwinięcie panelu i wyświetlenie zawartej w nim informacji, co przedstawiono na rysunku 3.14. Kod źródłowy Pełny kod źródłowy ostatniej przykładowej aplikacji prezentowanej w tym rozdziale przed- stawiono na listingu 3.4. 100 | Rozdział 3. Sprytne witryny WWW z technologią Ajax Listing 3.4. OrderForm.aspx @ Page Language= VB AutoEventWireup= true CodeFile= OrderForm.aspx.vb Inherits= _Default @ Register Assembly= AjaxControlToolkit Namespace= AjaxControlToolkit TagPrefix= cc1 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.1//EN http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd html xmlns= http://www.w3.org/1999/xhtml head runat= server style type= text/css @import url(StyleSheet.css); /style title AdventureWorks - CollapsiblePanelExtender /title /head body form id= form1 runat= server asp:ScriptManager ID= ScriptManager1 runat= server / div h1 Formularz Zamówienia Firmy AdventureWorks /h1 table
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

ASP.NET 2.0 i Ajax. Wprowadzenie
Autor:
, ,

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


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