Laboratorium z przedmiotu Aplikacje WWW - zestaw 07 Cel zajęć. Celem zajęć jest zapoznanie się z technologią AJAX w aplikacjach WWW. Wprowadzenie teoretyczne. Rozważana w ramach niniejszych zajęć tematyka stanowi wprowadzenie do tworzenia stron opartych o asynchroniczny JavaScript i XML, czyli Ajax. Aby ze zrozumieniem zrealizować zadania, przewidziane do wykonania w ramach zajęć laboratoryjnych, należy zapoznać się z następującymi zagadnieniami: co to jest Ajax i jak on działa, kontrolki UpdatePanel oraz ScriptManager w ASP.Net. 1. Ajax Klasyczny model aplikacji internetowej oparta jest o schemat: komunikacja, transfer danych poprzez sieć, oczekiwanie na wyniki oraz przetwarzanie na serwerze. Działanie tego wygląda następująco: Klient zgłasza żądanie jakieś operacji(chce otrzymać pewne dane). Zgłaszając swoją chęć przesyła pakiet danych z żądanie do serwera, który to analizuje otrzymane dane(np. pod kątem poprawności) następnie przygotowuje wymagane dane i wysyła je z powrotem do klienta. Jest to najczęściej spotykany sposób przeglądania stron WWW w całym Internecie. Jego ogromną wadą jest czas jaki musi czekać klient za każdym razem gdy zgłosi żądanie o następne dane. Pierwszym ważnym krokiem jaki rozwój projektowania i budowy stron WWW wykonał w przód było odciążenie serwera od przetwarzania części danych chodzi tu o użycie języków skryptowych jak JScript, czy JavaScript do sprawdzania czy dane z formularzy są poprawne jeżeli nie informacja tak zostaje zgłoszona zanim klient naciśnie przycisk wyślij, który zmusiłby serwer do przetworzenia błędnych danych. W 2005 roku nastąpiło tzw. trzęsienie ziemi dla twórców stron WWW. Powstałą technologia bez której praktycznie nie można sobie wyobrazić działania takich serwisów jak Google Doc, Google Maps, Flickr, MyYahoo! I wiele, wiele innych. W lutym 2005 roku Jasse James Garret w artykule na swojej stronie po raz pierwszy użył sformułowania Asynchroniczny JavaScript i XML. Połączono razem ze sobą kilka rzeczy, które były znane, między innymi: język XHTML i CSS do tworzenia struktury i prezentacji dokumentów, obiekt XMLHttpRequest do przesyłania danych pomiędzy klientem a serwerem, języka XML do formatowania danych przepływających pomiędzy klientem a serwerem oraz językiem JavaScript do dynamicznego wyświetlania i interakcji z wszystkimi wymienionymi elementami. W skrócie asynchroniczny oznacza, że komunikacja odbywa się nie regularnie bez ustalonego harmonogramu jeżeli dane będą wymagane zostaną przesłane na bieżąco. JavaScript wszystko to nadzoruje, a sposób przesyłania danych formatuje język XML. Czym się charakteryzuje Ajax? Zwiększenie wydajności aplikacji za pomocą wykonywania części operacji po stronie klienta w przeglądarce. Możliwość wykorzystania elementów interfejsu użytkownika znanych z aplikacji Windows tj. wskaźniki postępu. Częściowa aktualizacja tylko tych części strony, które zostały zaktualizowane. Integracja klienta z usługami aplikacji ASP. NET dla autoryzacji formularzy i profili użytkownika. Integracja danych z różnych źródeł za pomocą zapytań do Web serwisu. Wsparcie większości popularnych u używanych przeglądarek tj. MS IE, Mozilla Firefox, Google Chrome, Opera. 1
2. Kontrolka ScriptManager Kontrolka zarządza zasobami skryptowymi dla komponentów klienta, częściową aktualizacja strony, lokalizacją, globalizacją i skryptami własnymi użytkownika. Kontrolka ta musi zostać umieszczona przed innymi kontrolkami ASP.Net Ajax na stronie. Ważnymi elementami z punktu widzenia debugowania jakie posiada ta kontrolka to metody AllowCustomErrorsRedirect, która mówi co zrobić z błędem który się pojawi; Metoda AssyncPostBackErrorMessage przesyła ustalona wcześniej treść błędu do przeglądarki, na wypadek jakiś problemów w trakcie pracy. 3. Kontrolka UpdatePanel Jest to kontener kontrolek wskazujący aktualizowany region na stronie. Dodatkowo generuje wszystkie wymagane skrypty i wysyła je do przeglądarki. Ważna metodą jaką posiada ta kontrolka jest UpdateMode, która odpowiada za to kiedy zostanie odświeżona zawartość UpdatePanel a. Ustawiona na Always działa zawsze gdy tylko pojawi się takie zgłoszenie. Ustawiona na Conditional zadziała gdy: zostanie uruchomiony wyzwalacz dla UpdatePanel a lub kiedy zostanie wywołana metoda Update() lub kiedy panel znajduje się w innym panelu, a ten zostaje odświeżony lub została ustawiona wartość true w właściwości ChildrenAsTriggers, gdzie odświeżenie pola zawartego w panelu spowoduje odświeżenie jego całej zawartości. 4. Inne kontrolki Z pozostałych kontrolek jaki również wchodzą w skład technologii Ajax w ASP.Net można wymienić jeszcze: UpdateProgress udostępnia informacje o statusie aktualizacji kontrolki UpdatePanel. Timer wykonuje 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. Zadanie 1. Proszę zrealizować aplikację WWW, która powinna odznaczać się następującymi cechami: Aplikacja ma stanowić przeglądarkę zdjęć z określonego katalogu. Jednocześnie na stronie internetowej ma znajdować się jedno zdjęcie. Do nawigacji pomiędzy zdjęciami mają służyć przyciski Poprzednie, Następne. Przeładowanie zdjęć ma odbywać się bez odświeżania strony. Pod każdym zdjęciem ma znajdować się podpis informujący o numerze aktualnego zdjęcie oraz ilości wszystkich zdjęć (np. Zdjęcie 2/10 ). Gdy wyświetlane jest pierwsze zdjęcie, przycisk Poprzednie ma być nieaktywny. Gdy wyświetlane jest ostatnie zdjęcie, przycisk Następne ma być nieaktywny. Należy założyć, że aplikacja ma działać z dowolną ilością zdjęć w określonym katalogu, a nazwy plików ze zdjęciami nie są dostosowane do żadnego schematu. 2
Aby zrealizować zadanie należy wykonać następujące kroki: Proszę w swoim katalogu utworzyć projekt o nazwie Zadanie 7.1. UWAGA! Przy dodawaniu do strony kolejnych kontrolek proszę o używanie unikalnych ID kontrolek o nazwie związanej z ich przeznaczeniem, np. buttonpoprzednie. Proszę o dodanie do projektu katalogu o nazwie images i dodanie do niego czterech dołączonych do zestawu zdjęć. Następnie proszę o umieszczenie na stronie kontrolki typu ScriptManager. Po wykonaniu powyższej czynności, proszę o dodanie do strony kontrolki typu UpdatePanel. Następnie proszę umieścić wewnątrz kontrolki UpdatePanel kontrolkę typu Image, dwie kontrolki typu Button (służące do nawigacji pomiędzy zdjęciami) oraz kontrolkę typu Label (służącą jako podpis zdjęcia). UWAGA! Proszę zauważyć, że wywołanie zdarzenia OnClick poprzez przyciski umieszczone wewnątrz kontrolki UpdatePanel nie powoduje przeładowania całej strony, powoduje natomiast odświeżenie zawartości kontrolki UpdatePanel. Po wykonaniu powyższej czynności proszę o implementację funkcjonalności ujętej w treści zadania. Podpowiedzi: Informacje na temat ilości plików w katalogu oraz ich nazw można wydobyć używając obiektu typu DirectoryInfo Tworząc obiekt typu DirectoryInfo należy pamiętać o mapowaniu ścieżki. Informacja na temat numeru aktualnego zdjęcia może zostać przechowana w kontrolce typu HiddenField. Przykładowy wygląd aplikacji: Przy ocenie zadania główny nacisk będzie kładziony na: Wykonanie wszystkich założeń ujętych w treści zadania. Wygląd aplikacji (wykorzystanie CSS). 3
Prawidłowe nazewnictwo obiektów kontrolek. Sposób implementacji. Zadanie 2. Proszę zrealizować aplikację WWW, która powinna odznaczać się następującymi cechami: Aplikacja ma wyszukiwać studentów znajdujących się w bazie danych na podstawie podanego przez użytkownika imienia i/lub nazwiska studenta. Aplikacja ma wyszukiwać dane studentów także w wypadku podania niepełnego imienia lub nazwiska (np. wpisując w pole Imię literę A, powinni zostać wyszukani wszyscy studenci, których imiona zaczynają się od tej litery) Wyszukane dane (imiona i nazwiska) studentów mają zostać wyświetlone w postaci listy. Po wyborze danego studenta z listy, aplikacja ma pobrać i wyświetlić pozostałe dane związane z wybranym studentem (np. numer indeksu, rok, itp.). Wyszukiwanie oraz pobieranie danych ma odbywać się bez przeładowania strony internetowej. Aby zrealizować zadanie należy wykonać następujące kroki: Proszę w swoim katalogu utworzyć projekt o nazwie Zadanie 7.2. Następnie proszę o sprawdzenie, czy włączony został SQL Server. Po wykonaniu powyższych czynności proszę o utworzenie tabeli Studenci, zawierającej następujące pola: Następnie proszę o dodanie do utworzonej tabeli kilku rekordów. Po wykonaniu tej czynności proszę o umieszczenie na stronie kolejnych kontrolek, aby wyglądała ona zgodnie z poniższym rysunkiem (niebieska ramka oznacza kontrolkę typu UpdatePanel, w której znajdują się kontrolki typu RadioButtonList i Label ): 4
Proszę zauważyć, że przycisk znajduje się na zewnątrz kontrolki UpdatePanel. Aby wywołanie zdarzenia OnClick przycisku powodowało jedynie odświeżenie zawartości kontrolki typu UpdatePanel, należy edytować jej właściwość Triggers. Należy dodać do kolekcji nowy wyzwalacz, określając ID przycisku oraz nazwę zdarzenia: Następnie proszę o implementację zdarzenia przycisku, powodującego wyszukiwanie studentów według zadanych kryteriów. Przykładowy wynik wyszukiwania przedstawia poniższy rysunek: Podpowiedź: Można skorzystać z połączeniowej metody dostępu do danych i obiektów typu SqlConnection, SqlCommand, SqlDataReader. Następnie proszę o ustawienie właściwości AutoPostBack kontrolki typu RadioButtonList jako true. Po wykonaniu tej czynności proszę o implementację zdarzenia SelectedIndexChanged tej kontrolki. Wystąpienie zdarzenia ma pobierać pozostale dane o wybranym studencie i wyświetlać je w dodanej wcześniej kontrolce typu Label. Proszę zauważyć, że wywołanie zdarzenia będzie powodować odświeżenie zawartości kontrolki UpdatePanel. Przykładowy wynik tej operacji wygląda następująco: 5
Przy ocenie zadania główny nacisk będzie kładziony na: Wykonanie wszystkich założeń ujętych w treści zadania. Wygląd aplikacji (wykorzystanie CSS). Prawidłowe nazewnictwo obiektów kontrolek. Sposób implementacji. Zadanie do domu. Proszę zrealizować aplikację WWW, która powinna odznaczać się następującymi cechami: Aplikacja ma stanowić przeglądarkę informacji. Informacje te są umieszczone w osobnych plikach tekstowych, w określonym katalogu. Jednocześnie na stronie internetowej ma znajdować się jedna informacja. Przeładowanie informacji ma odbywać się bez odświeżania strony. Każda informacja ma zawierać tytuł, datę dodania i treść (proszę o dostosowanie formatu pliku tekstowego do tych wymagań). Należy założyć, że aplikacja ma działać z dowolną ilością informacji w określonym katalogu. Zagadnienia, które należy uznać za przyswojone w trakcie zajęć. Po zajęciach będzie obowiązywać praktyczna znajomość: Zasada działania technologii AJAX. Korzystanie z kontrolek przeznaczonych do wykorzystania technologii AJAX. Zagadnienia do samodzielnego zgłębienia dla dociekliwych. Osoby zainteresowane mogą dodatkowo zapoznać się z następującymi tematami: Kontrolki UpdateProgress i Timer. 6
Zestaw kontrolek AJAX Control Toolkit Zagadnienia do powtórzenia na następne zajęcia. Przed kolejnymi zajęciami należy powtórzyć następujące zagadnienia: Współpraca z serwerem IIS (m.in. tworzenie wirtualnych katalogów). Zasada działania usług WWW (Web Services). Tworzenie usług WWW z wykorzystaniem Visual Studio. Korzystanie z dostępnych usług WWW. Wybrane aspekty dotyczące implementacji z wykorzystaniem języka PHP. Rewolucja stron WWW zaczęła się dość prosto, bo od artykułu na stronie(http://www.adaptivepath.com/ideas/e000385): W nim to wyjaśnione jest czym w zasadzie jest AJAX nie jest to nowa technologia, a technika łącząca istniejące już od dawna w sieci WWW metody i idee. Od czego w takim razie zacząć? AJAX jak sama nazwa wskazuje opiera się o język JavaScript. Jego innowacyjnym wykorzystaniem jest użycie obiektu: XMLHttpRequest do odbierania danych i wyświetlania ich na oknie przeglądarki. Poniżej zostanie przedstawiony przykład zastosowania tej technologii. Przykład będzie się składać z zestawu czterech plików: Plik - nazwa script01.html script01.js Zastosowanie Odpowiada za wygląd strony WWW. Inicjuje też i wywołuje żądanie AJAX. Odpowiedzialny za obsługę żądania AJAX, w nim 7
zawarta jest całą definicja i działanie skryptów. gaddress.txt us-states.xml Plik tekstowy z dowolnym ciągiem znaków np. treścią podstrony WWW. Plik XML z jakimiś metadanymi w tym wypadku dla przykładu użyte zostały nazwy województw polskich województw. Przykład pliku tekstowego z treścią jaki może być użyty to: Przykład pliku XML: Wygląd strony WWW: Oraz jej kod wygląda następująco: 8
Jak łatwo zauważyć jedyną innowacją jaką posiada jest przypisanie znacznikom A atrybutu ID linie 9 i 10 oraz przygotowanie miejsca pod odpowiedź serwera linia 11 na razie pusty znacznik DIV w którym w zależności od żądania powinno się wyświetlić albo województwo albo treść książki. Czas przejść do najważniejszego elementu pliku skryptowego: 9
W linii 1 po załadowaniu strony wywoływana jest metoda z linii 3 6. Jej zadanie to ustawić obsługę zdarzenia po kliknięciu na odpowiednie znaczniki A z dokumentu HTML(stąd ich odpowiednie atrybuty ID). Wywoływana jest jedna funkcja dla dwóch różnych parametrów HREF znacznika A. W linii 13 do 35 znajduje się funkcja która jest zupełną nowością. Została wywołana z funkcji getnewfile oraz parametrze odnośnika na jaki wskazywało hiperłącze ze strony WWW czyli na plik tekstowy lub plik XML owy. Pierwszym zadaniem funkcji jest sprawdzenie, czy istnieje w przeglądarece internetowej obsługa obiektu XMLHttpRequest linia 14. Przeglądarka może być jednak odporna na standaryzację i uznawać jedyną słuszną drogę wskazana przez M$ - dlatego też jeżeli nie obsługuje obiektu Request może obsługiwać inny ale o takich samym działaniu linia 18 23. Jeżeli jednak nie uda się zainicjować obiektu Request zgłaszany jest komunikat - w miejsce odpowiedzi zostanie wypisany odpowiednia informacja błędu linia 32(napisów w JS nie można dzielić znakiem Enter tutaj jest to zrobione aby przykład był bardziej czytelny). Jeżeli jednak przeglądarka jest w miarę nowa i utworzy obiekt bądź XMLHttp bądź ActiveX Możemy wykonać pewne zawsze powtarzalne czynności. Pierwszym zadaniem jest ustalenie procedury obsługi zdarzeń onreadystatechange przypisana tu funkcja będzie zawsze wywoływana przy każdej zmianie właściwości obiektu xhr.readystate. Linia 27 Drugim krokiem jest wywołanie funkcji open() oraz przekazanie do niej trzech parametrów metodę żądania http(np. GET, POST, HEAD), adres url z którego zostaną pobrane dane może to być plik(tak jak w przykładzie) lub żądanie odpowiednio sformułowane, ostatnim elementem jest wartość logiczna informującą serwer czy żądanie jest wykonywane w trybie asynchronicznym oczekuje się na jego zakończenie. Linia 28 Trzecim i ostatnim krokiem jest wywołanie funkcji send() wysyłającej przygotowane wcześniej żądanie. Linia 29. Żądanie zostało wysłane. Przeglądarka oczekuje na wynik zostało to określone w linii 26. Czyli w przypadku otrzymania lub nie odpowiedzi zostanie wywołana ta właśnie funkcja której definicja znajduje się w liniach 37 do 48 kodu pliku skryptowego. Pierwszym krokiem jest sprawdzenie właściwości odpowiedzi obiektu xhr - readystate. Może on przyjmować różne wartości: Wartość Opis 0 Niezainicjowane obiekt jest pusty. 1 Ładowanie dane są aktualnie ładowane. 2 Załadowane. Obiekt zakończył ładowanie danych. 3 Interaktywny. Można się komunikować z obiektem, ale ten nie zakończył jeszcze swojego ładowania. 4 Zakończone. Obiekt zakończył procedurę inicjacji. Pomimo tych różnych wartości jedyna słuszną jest ostatnia 4. Wtedy obiekt jest w pełni funkcjonalny i mamy pewność jego prawidłowego działania. Stąd w linii 38 warunek sprawdzający. Kolejnym elementem jest sprawdzenie statusu linia 39. Status ten tak jak w przypadku stron WWW posiada te same wartości kodowe 404, 303 czy 200 czyli wszystko w porządku.(404 to plik nie istnieje na serwerze). Jeżeli tak nie jest wartością zwracaną przez funkcję jest informacja o błędzie linia 44. Jeżeli optymistycznie wszystko się jednak udało i jakaś informacja nie będąca błędem został przez przeglądarkę odczytana trzeba taką informację przetworzyć. W linii 40 sprawdzamy z czym mamy do czynienia plikiem tekstowym czy plikiem XML. Jeżeli to plik XML to można go odczytać metodą responsexml(), jeżeli nie to wystarczy responsetext(). I też tak tu jest to zrobione wystarczy sprawdzić czy odczytany plik ma nagłówek(plik XML takie coś posiada) i odpowiednio do tego się ustosunkować. 10
Ostatnią rzeczą jest wyświetlenie tego co udało się uzyskać z wywołania skryptu(błąd lub poprawna informacja) jest to linia 46 i wpisanie w miejsce znacznika DIV odpowiedzi. Wynikiem takiego skryptu będzie : Plik tekstowy: Plik XML: 11