Piotr Bubacz Moduł 13 Wersja 1 Spis treści... 1 Informacje o module... 2 Przygotowanie teoretyczne... 3 Przykładowy problem... 3 Podstawy teoretyczne... 3 Uwagi dla studenta... 7 Dodatkowe źródła informacji... 7 Laboratorium podstawowe... 9 Problem 1 (czas realizacji 25 min)... 9 Problem 2 (czas realizacji 10 min)... 11 Problem 3 (czas realizacji 10 min)... 12
Informacje o module Opis modułu W tym module znajdziesz informacje dotyczące tworzenia aplikacji internetowych z wykorzystaniem AJAX. Zobaczysz, jak prosto i skutecznie można wykorzystywad podstawowe kontrolki dostępne w. Nauczysz się, jak kilkoma kliknięciami myszy rozszerzyd funkcjonalnośd aplikacji o możliwośd asynchronicznej komunikacji z serwerem. Cel modułu Celem modułu jest przedstawienie AJAX oraz możliwości wykorzystania go w aplikacjach ASP.NET przy użyciu biblioteki. Uzyskane kompetencje Po zrealizowaniu modułu będziesz: potrafił tworzyd strony częściowo aktualizowane potrafił rozbudowywad istniejącą aplikację o AJAX rozumiał zalety stosowania technologii AJAX Wymagania wstępne Przed przystąpieniem do pracy z tym modułem powinieneś: znad podstawy języka XHTML znad zasady pracy w środowisku Visual Studio, w szczególności tworzenia stron internetowych Mapa zależności modułu Zgodnie z mapą zależności przedstawioną na Rys. 1, przed przystąpieniem do realizacji tego modułu należy zapoznad się z materiałem zawartym w modułach Podstawy HTML, Kaskadowe Arkusze Stylów CSS oraz Wprowadzenie do ASP.NET. MODUŁ 14 MODUŁ 12 MODUŁ 1 MODUŁ 11 MODUŁ 2 MODUŁ 10 MODUŁ 13 MODUŁ 3 MODUŁ 9 MODUŁ 4 MODUŁ 8 MODUŁ 6 MODUŁ 5 Rys. 1 Mapa zależności modułu Strona 13-2
Przygotowanie teoretyczne Przykładowy problem Rozbudowane aplikacje internetowe wymagają długiego czasu na przesłanie informacji od klienta do serwera. W czasie przesyłania klient może jedynie cierpliwie oczekiwad na dane z serwera. Niestety większośd osób chciała by dane od razu lub też mied chociaż możliwośd przeglądania strony w czasie pobierania danych. Dodatkowo dobrze by było, gdybyśmy mogli pobierad dane nie całej strony na raz, ale tylko wybranych elementów. Podstawy teoretyczne Klasyczny model aplikacji internetowej W poprzednich modułach wykorzystywano klasyczny model aplikacji internetowej. W modelu takim niewielkie zmiany wykonane przez użytkownika na stronie mogą spowodowad wysłanie danych do serwera i wygenerowanie dla klienta nowego dokumentu HTML, nawet jeśli nie różni się on znacząco od poprzedniego (Rys. 2). Rys. 2 Klasyczny model aplikacji internetowej Przykładem takiej akcji w aplikacji tworzonej na zajęciach może byd wybranie kategorii z listy rozwijanej. W takim przypadku zmienia się tylko niewielka częśd strony odpowiedzialna za wyświetlenie tytułów, ale serwer i tam musi wygenerowad nowy dokument i wysład go do użytkownika. Problemy występujące w klasycznym model aplikacji internetowej: Komunikacja zwrotna po wykonaniu każdej akcji wymagającej przetwarzania po stronie serwera, cała strona jest przeładowywana, nawet jeśli nowy dokument nie różni się znacząco od poprzedniego. Transfer danych poprzez sieć dokument wygenerowany po stronie serwera w wyniku komunikacji zwrotnej musi byd za każdym razem w całości wysłany do klienta. Przetwarzanie na serwerze generowanie całego dokumentu od nowa w przypadku komunikacji zwrotnej powoduje niepotrzebne obciążenie zasobów serwera. Co to jest AJAX? AJAX jest to technika pozwalająca aplikacjom Web komunikowad się asynchronicznie z serwerem (Rys. 3). AJAX nie jest technologią jest podejściem łączącym wiele technologii. AJAX to akronim powstały od słów Asynchronous JavaScript And XML. Strona 13-3
AJAX: Rys. 3 Model aplikacji internetowej z użyciem AJAX Asynchronous komunikacja odbywa się asynchronicznie. JavaScript JavaScript jest odpowiedzialny za wysyłanie informacji do serwera, asynchroniczny odbiór odpowiedzi i przetworzenie jej. XML jest formatem odpowiedzi serwera, dodatkowo komunikacja odbywa się poprzez obiekt XmlHttpRequest. Aktualnie XML wykorzystuje się rzadziej na rzecz mniej kosztownych w przesyłaniu i przetwarzaniu formatów takich jak JSON (ang. JavaScript Object Notation). Zalety i wady AJAX AJAX posiada wiele zalet, w tym m.in.: Strony nie są odświeżane po wykonaniu każdej akcji wymagającej przetwarzania po stronie serwera. Tylko potrzebne dane są wymieniane z serwerem. Zwiększona szybkośd odpowiedzi serwera. Należy jednocześnie zdawad sobie sprawę z pewnych wad tego rozwiązania, m.in.: Wymaga JavaScript, który może byd wyłączony w przeglądarce użytkownika. Aplikacjom AJAX trudno zapewnid zgodnośd z WCAG (ang. Web Content Availability Guidelines, wytyczne dotyczące dostępności materiałów publikowanych w sieci Internet). Jest trudny w oprogramowaniu: należy odpowiedniego zainicjalizowad obiekt XmlHttpRequest duże problemy może sprawiad obsługi przycisków nawigacyjnych w przeglądarce mogą pojawid się problemy z zapamiętywaniem i odtwarzaniem konkretnego stanu aplikacji jest zbiorem rozszerzeo, które umożliwiają wykorzystanie AJAX w aplikacjach ASP.NET. Zalety to: Odciążenie serwera na rzecz przetwarzania po stronie klienta. Możliwośd wykorzystania elementów interfejsu użytkownika znanych z aplikacji Windows, np. wskaźniki postępu. Aktualizacja tylko tych części strony, które tego wymagają. Strona 13-4
Dostęp po stronie klienta do usług aplikacji ASP.NET: autoryzacji formularzy i profili użytkownika. Integracja danych z różnych źródeł za pomocą odwołao do usług Web (niniejszy kurs nie obejmuje zagadnieo związanych z usługami Web więcej informacji na ten temat można znaleźd m.in. pod adresem http://msdn.microsoft.com/webservices). Wsparcie dla większości popularnych i używanych przeglądarek, m.in. Microsoft Internet Explorer, Mozilla Firefox i Apple Safari. Architektura Technologia zawiera biblioteki skryptów klienckich oraz komponenty serwerowe (Rys. 4). Dodatkowo można rozszerzyd jej możliwości o darmowy zestaw kontrolek Control Toolkit. HTML, Script, Markup Service Proxies -enabled ASP.NET Pages Web Services (ASMX or WCF) Client App Services Local Store Browser Integration Microsoft AJAX Library (Client Script Library) Controls, Components Component Model and UI Framework Base Class Library Script Core Browser Compatibility Server Extensions Server Controls ASP.NET 2.0 Page Framework, Server Controls App Services Bridge Web Services Bridge Application Services Rys. 4 Architektura Bibliotek skryptów po stronie klienta Biblioteka skryptów po stronie klienta zawiera rozszerzenia JavaScript, które pozwalają na programowanie zorientowane obiektowo. Taka możliwośd nie była wcześniej bezpośrednio dostępna dla programistów JavaScript. Możliwości programowania zorientowanego obiektowo dodane do biblioteki skryptów pozwalają na tworzenie bardziej spójnego i modularnego kodu po stronie klienta. Następujące warstwy zostały włączone do biblioteki: Biblioteka klas podstawowych udostępnia podstawowe komponenty i rozszerzoną obsługę błędów. Możliwości przeglądarki zapewnia kompatybilnośd skryptów klienckich z większością używanych przeglądarek. Sieci odpowiada za komunikację z aplikacjami i usługami Web i zarządza asynchronicznymi wywoływaniami metod. Usługi jądra zawiera rozszerzenia JavaScript, takie jak klasy, przestrzenie nazw, obsługa błędów, dziedziczenie, typy danych i serializacja obiektów. Strona 13-5
Technologie po stronie serwera Kontrolki serwerowe to: ScriptManager UpdatePanel UpdateProgress Timer Usługi Web, z jakich możemy korzystad z poziomu : uwierzytelnianie formularzy profile Kontrolki serwerowe Kontrolki serwerowe łączą w sobie kod wykonywany zarówno po stronie serwera, jak i klienta. ScriptManager Kontrolka ScriptManager zarządza zasobami skryptowymi dla komponentów klienta, częściową aktualizacją strony, lokalizacją, globalizacją i skryptami własnymi użytkownika. Kontrolka ta musi zostad umieszczona przed innymi kontrolkami na stronie. Koordynuje ona i rejestruje skrypty odpowiedzialne za częściowe odświeżanie strony, odpowiada za konfigurowanie, czy też zwolnienie bądź debugowanie skryptów wysyłanych do przeglądarki oraz interakcję skryptów z metodami usług sieciowych. UpdatePanel Kontrolka UpdatePanel umożliwia aktualizację wybranej części strony przy użyciu asynchronicznych żądao. Jest kluczowym elementem AJAX w ASP.NET. Umożliwia wykorzystanie mechanizmu częściowego odświeżania strony, dzięki czemu możliwe jest ograniczenie czasu potrzebnego na ponowne ładowanie strony. Kontrolka UpdatePanel jest kontenerem elementów podlegających pod system dynamicznego odświeżania strony. Najważniejsze właściwości kontrolki to: ContentTemplate jest kontenerem dla kontrolek, które mają byd dynamicznie aktualizowane. Dodawanie kontrolek jest możliwe tylko do tej części. Triggers zawiera listę wyzwalaczy zdarzeo, które mogą wywoład aktualizację kontrolek znajdujących się w ContentTemplate. Dzielą się na dwie grupy: AsyncPostBackTrigger możemy zdefiniowad zewnętrzną względem UpdatePanel kontrolkę i jej zdarzenie, które spowodują jej aktualizację PostBackTrigger możemy zdefiniowad wewnętrzną względem UpdatePanel kontrolkę i jej zdarzenie, które spowoduje aktualizację nie tylko panelu, ale i całej strony Kontener kontrolek wskazujący aktualizowany region na stronie: Kontrolki i zawartość nie aktualizowane... <asp:updatepanel id="u1" runat="server"> <ContentTemplate> ta zawartość jest dynamicznie aktualizowana! <asp:label id="lablel1" runat="server"/> <asp:button id="button1" text="wciśnij mnie!" runat="server"/> <ContentTemplate> </asp:updatepanel> Pozostała zawartość nie jest aktualizowana... Strona 13-6
Kontrolka UpdatePanel automatycznie generuje wszystkie wymagane skrypty i wysyła je do przeglądarki. Na stronie możemy umieścid wiele kontrolek UpdatePanel i każda z nich będzie niezależnie aktualizowana. UpdateProgress Kontrolka UpdateProgress udostępnia informacje o statusie aktualizacja kontrolki UpdatePanel. Kontrolka wyświetla zawartośd określoną przez właściwośd ProgressTemplate. W momencie aktualizacji kontrolki UpdatePanel pojawia się zawartośd zdefiniowana w kontrolce UpdateProgress. Możemy sterowad czasem, po jakim pojawi się wyświetlana zawartośd kontrolki UpdateProgress za pomocą właściwości DisplayAfter. Właściwośd ta określa czas w milisekundach, po jakim zostanie wyświetlona zawartośd kontrolki UpdatePanel. W przypadku kilku kontrolek UpdatePanel na stronie standardowo kontrolka UpdateProgress wyświetla się podczas aktualizacji każdej z nich. Jeśli potrzebujemy ograniczyd wyświetlanie do jednej kontrolki UpdatePanel, możemy to zrobid przy pomocy właściwości AssociatedUpdatePanelID. Timer Kontrolka Timer odpowiada za komunikację zwrotną do serwera w określonych odstępach czasu. Możliwe jest wysyłanie całej strony lub jej części ujętej w kontrolce UpdatePanel. Właściwośd Interval określa ilośd milisekund, po której nastąpi komunikacja zwrotna do serwera. Podsumowanie W tym rozdziale przedstawiona została technologia AJAX ASP.NET. Uwagi dla studenta Jesteś przygotowany do realizacji laboratorium jeśli: rozumiesz jak działa UpdatePanel znasz kontrolki dostępne w AJAX Extensions wiesz co to jest i jakie ma zalety częściowa aktualizacja strony Pamiętaj o zapoznaniu się z uwagami i poradami zawartymi w tym module. Upewnij się, że rozumiesz omawiane w nich zagadnienia. Jeśli masz trudności ze zrozumieniem tematu zawartego w uwagach, przeczytaj ponownie informacje z tego rozdziału i zajrzyj do notatek z wykładów. Dodatkowe źródła informacji 1. The Official Microsoft ASP.NET Site, http://www.asp.net/ajax Na stronie znajdziesz wiele materiałów dotyczących technologii AJAX. Szczególnie ciekawe są webcasty prezentujące wiele elementów technologii. Ważnym miejscem wartym przejrzenia jest zakładka Showcase, prezentująca listę stron wykorzystujących tę technologię. 2. Maciej Dadela, AJAX w ASP.NET, http://www.codeguru.pl/article-718.aspx W artykule autor prezentuje przegląd najważniejszych informacji dotyczących technologii. Zawarł opis kontrolek i ich właściwości, pozwalając zapoznad się bliżej z tą technologią. 3. Matt Gibbs, Dan Wahlin, ASP.NET 2.0 AJAX. Zaawansowane programowanie, Helion, 2008 W książce autorzy pokazują, jak korzystad z różnych bibliotek, jak używad zaawansowanych kontrolek z pakietu AJAX Toolkit, a także jak budowad własne Strona 13-7
kontrolki. Nauczysz się asynchronicznie uaktualniad fragmenty stron i zarządzad skryptami używanymi w przeglądarce, dowiesz się, jak testowad takie aplikacje i usuwad z nich błędy. Z tą książką zdobędziesz wiedzę potrzebną do kreowania nowoczesnych, interaktywnych aplikacji. Strona 13-8
Laboratorium podstawowe Problem 1 (czas realizacji 25 min) Przed wykorzystaniem technologii Twój zespół postanowił wysład Cię na zwiady. Twoim zadaniem jest zapoznanie się z możliwościami wykorzystania tej technologii w Waszych projektach internetowych. Wynikiem Twoich prac mają byd testy wszystkich kontrolek dostepnych w. Zadanie 1. Utwórz nową aplikację internetową w systemie plików 2. Dodaj kontrolkę UpdatePanel 3. Dodaj procedurę obsługi zdarzenia Page_Load 4. Zapisz i sprawdź działanie strony 5. Zapoznaj się z zaletami częściowej aktualizacji strony. 6. Zapoznanie z możliwością odświeżania zawartości kontrolki UpdatePanel przy Tok postępowania Otwórz Visual Studio wybierz File -> New -> Web Site. W oknie dialogowym New Web Site określ następujące właściwości: szablon: ASP.NET Web Site lokalizacja: z listy rozwijanej wybierz File System, a następnie określ położenie strony język: Visual C# Do strony dodaj kontrolkę ScriptManager i UpdatePanel, przeciągając je myszą z okna Toolbox (kategoria AJAX Extensions). W kontrolce UpdatePanel umieśd kontrolkę Label i w oknie Properties: w polu ID wpisz t1label w polu Text usuo zawartośd Do kontrolki UpdatePanel dodaj kontrolkę Button. Poza kontrolką UpdatePanel umieśd dodatkową kontrolkę Label i w oknie Properties: w polu ID wpisz t2label w polu Text usuo zawartośd Otwórz plik Default.aspx.cs i do metody Page_Load dodaj następujący kod, wyświetlający aktualną datę w kontrolkach Label: t1label.text = DateTime.Now.ToLongTimeString(); t2label.text = DateTime.Now.ToLongTimeString(); Zapisz zmiany i uruchom formularz. Wciśnij przycisk Button. Która kontrolka jest aktualizowana? Dlaczego? Do aplikacji dodaj kolejną stronę ASPX. Do strony dodaj kontrolkę ScriptManager oraz UpdatePanel. W kontrolce UpdatePanel umieśd kontrolkę Calendar z okna Toolbox kategoria Standard. Poza kontrolką UpdatePanel umieśd kolejną kontrolkę Calendar. Zapisz i uruchom formularz. Za pomocą przycisków > kontrolki zmieo miesiące w jednej i drugiej kontrolce. Czy można zaobserwowad różnicę? Do aplikacji dodaj kolejną stronę ASPX. Do strony dodaj kontrolkę ScriptManager oraz UpdatePanel. W kontrolce UpdatePanel umieśd kontrolkę Label i w oknie Properties: w polu ID wpisz t1label w polu Text usuo zawartośd Strona 13-9
użyciu zewnętrznego przycisku Poza kontrolką UpdatePanel dodaj do formularza kontrolkę Button. Dwukrotnie kliknij dodaną kontrolkę. W metodzie obsługi zdarzenia Click przycisku dodaj: t1label.text = DateTime.Now.ToLongTimeString(); Zapisz zmiany i uruchom formularz. Kliknij przycisk. Czy dokonała się pełna czy częściowa aktualizacja strony? Dlaczego? Przejdź do widoku Design formularza. Wybierz kontrolkę UpdatePanel, a następnie w oknie Properities w polu Triggers wybierz ( ). W oknie UpdatePanelTrigger Collection Editor naciśnij przycisk Add. Do listy zostanie dodany wyzwalacz i w obszarze AsyncPostBack:Button1.Click properities: w polu ControlID wpisz Button1 w polu EventName wybierz z listy rozwijanej Click Rys. 5 Okno UpdatePanelTrigger Collection Editor 7. Zapoznanie z możliwościami wykorzystania kontrolki UpdateProgress. Kliknij przycisk OK. Zapisz zmiany i uruchom formularz. Kliknij przycisk. Czy dokonała się pełna czy częściowa aktualizacja strony? Dlaczego? Do aplikacji dodaj kolejną stronę ASPX. Do strony dodaj kontrolkę ScriptManager oraz UpdatePanel. W kontrolce UpdatePanel umieśd kontrolkę Label i w oknie Properties: w polu ID wpisz t1label w polu Text usuo zawartośd Do kontrolki UpdatePanel dodaj kontrolkę Button. Kliknij dwukrotnie dodaną kontrolkę. W metodzie Click przycisku dodaj: System.Threading.Thread.Sleep(3000); //powyższa linijka służy jednie celom TESTOWYM!! t1label.text = DateTime.Now.ToLongTimeString(); obsługi zdarzenia Poza kontrolką UpdatePanel dodaj kontrolkę UpdateProgress. W Strona 13-10
kontrolce UpdateProgress dodaj tekst Przetwarzanie. Zapisz zmiany i uruchom formularz, a następnie kliknij przycisk. Czy dokonała się pełna czy częściowa aktualizacja strony? Co się działo w czasie aktualizacji? 8. Zapoznanie z możliwościami kontrolki Timer. Do aplikacji dodaj kolejną stronę ASPX. Do strony dodaj kontrolkę ScriptManager oraz UpdatePanel. W kontrolce UpdatePanel umieśd kontrolkę Label i w oknie Properties: w polu ID wpisz t1label w polu Text usuo zawartośd Do kontrolki UpdatePanel dodaj kontrolkę Timer. w polu ID wpisz t1timer w polu Interval wpisz 5000 Poza kontrolką UpdatePanel umieśd kontrolkę Label i w oknie Properties: w polu ID wpisz t2label w polu Text usuo zawartośd Do metody Page_Load dodaj następujący kod wyświetlający czas uruchomienia formularza w kontrolce t2label: t2label.text = DateTime.Now.ToLongTimeString(); Kliknij dwukrotnie kontrolkę Timer. W metodzie obsługi zdarzenia Tick dodaj: t1label.text = DateTime.Now.ToLongTimeString(); Zapisz zmiany i uruchom formularz, a następnie poczekaj 5 sekund. Co się stało? Dlaczego? Problem 2 (czas realizacji 10 min) Po zapoznaniu się z technologią Twoim zadaniem jest dodanie funkcjonalności AJAX do aplikacji stworzonej dla firmy Adventure Works. Zadanie 9. Wykorzystaj częściową aktualizacje strony do wyświetlenia produktów 10. Dodaj wyświetlania informacji o aktualizacji Tok postępowania Otwórz aplikację przygotowaną w poprzednim module. Otwórz stronę Produkty.aspx. Przed wszystkimi kontrolkami na górze strony umieśd kontrolkę ScriptManager z okna Toolbox (kategoria AJAX Extensions). Do strony dodaj kontrolkę UpdatePanel i w widoku Design przenieś do niej wszystkie kontrolki Zapisz zamiany w aplikacji i uruchom stronę Produkty.aspx. Czy następuje aktualizacja całej strony? W widoku Design na stronie poniżej kontrolki UpdatePanel umieśd kontrolkę UpdateProgress. Umieśd w niej napis: Pobieranie danych. Wybierz kontrolkę KategorieListBox i w oknie Properties kliknij Events, a następnie kliknij dwukrotnie pole SelectedIndexChanged. W metodzie obsługi zdarzenia dodaj następujący kod: Strona 13-11
System.Threading.Thread.Sleep(3000); Zapisz wszystkie pliki i uruchom ponownie aplikację. 11. Zmiana wyświetlania tekstu na obrazek 12. Dodanie możliwości anulowania aktualizacji Znajdź animowanego gifa (np. na stronie http://www.ajaxload.info). Zamieo wyświetlany tekst w kontrolce UpdateProgress na odnaleziony obrazek. Zapisz wszystkie pliki i uruchom ponownie aplikację. Do kontrolki UpdateProgress w trybie Source dodaj: <br /><input type="button" id="abortbutton" onclick="abortpb()" value="anuluj aktualizację" /> Do kontrolki Content o ID="Content1" dodaj następujący skrypt w języku JavaScript: <script type="text/javascript" >function abortpb() { var obj = Sys.WebForms.PageRequestManager.getInstance(); if (obj.get_isinasyncpostback()) { obj.abortpostback(); } } </script> Zapisz wszystkie pliki i uruchom ponownie aplikacje. Podczas aktualizacji naciśnij przycisk Anuluj aktualizację. Czy aktualizacja została anulowana? Problem 3 (czas realizacji 10 min) Twojemu klientowi zawsze marzyła się reklama, której zawartośd jest cyklicznie odświeżana w przeglądarce. Twoim ostatnim zadaniem jest dodanie wyświetlania reklamy na stronie. Reklama ma byd odświeżana cyklicznie co 6 sekund. Zadanie 13. Przygotuj aplikację do korzystania z kontrolki ScriptMagerProxy 14. Dodaj kontrolkę użytkownika wyświetlającej reklamy 15. Umieśd kontrolkę Reklama.ascx na szablonie strony 16. Zapisz i przetestuj Tok postępowania Otwórz stronę Produkty.aspx. Usuo kontrolkę ScriptManager i w jej miejsce wstaw kontrolkę ScriptMagerProxy z okna Toolbox (kategoria AJAX Extension). Otwórz szablon strony SzablonStrony.master i na górze strony obok kontrolki WebPartManager dodaj kontrolkę ScriptManager. Kliknij prawym przyciskiem myszy katalog Kontrolki i wybierz Add New Item. W obszarze Templates wybierz Web User Control, w polu Name wpisz Reklama.ascx. W liście rozwijanej Language wybierz Visual C#. Dodaj kontrolkę ScriptManagerProxy, a następnie kontrolkę UpdatePanel. W widoku Design dodaj do kontrolki UpdatePanel kontrolkę AdRotator. Określ jej właściwośd AdvertisementFile="~/Adv/adv.xml". Dodaj kontrolkę Timer i określ jej właściwośd Interval="6000". Zapisz zmiany w pliku. Otwórz szablon strony SzablonStrony.master i w widoku Design dodaj do kontrolki div o ID="DrugiObszarBoczny" kontrolkę Reklama.ascx. Zapisz zmiany w pliku. Zapisz zmiany i uruchom aplikację. Otwórz stronę Default.aspx i sprawdź, czy następuje zmiana reklamy. Strona 13-12