ASP.NET AJAX Control Toolkit

Transkrypt

1 Piotr Bubacz Moduł 14 Wersja 1 Spis treści... 1 Informacje o module... 2 Przygotowanie teoretyczne... 3 Przykładowy problem... 3 Podstawy teoretyczne... 3 Przykładowe rozwiązanie... 4 Uwagi dla studenta... 6 Dodatkowe źródła informacji... 6 Laboratorium podstawowe... 7 Problem 1 (czas realizacji 10 min)... 7 Problem 2 (czas realizacji 35 min)... 8

2 Informacje o module Opis modułu W tym module znajdziesz informacje dotyczące biblioteki ASP.NET AJAX Control Toolkit. Nauczysz się rozszerzad możliwości standardowych kontrolek ASP.NET o funkcjonalności zawarte w bibliotece. Cel modułu Celem modułu jest przedstawienie możliwości wykorzystania biblioteki w projektach stron internetowych do szybkiego tworzenia zaawansowanych efektów. Uzyskane kompetencje Po zrealizowaniu modułu będziesz: wiedział jakie kontrolki wchodzą w skład ASP.NET AJAX Control Toolkit potrafił rozszerzad możliwości standardowych kontrolek ASP.NET o funkcjonalności zawarte w bibliotece 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 2008, w szczególności tworzenia stron internetowych znad podstawy ASP.NET AJAX 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, Wprowadzenie do ASP.NET oraz ASP.NET AJAX. MODUŁ 13 MODUŁ 12 MODUŁ 1 MODUŁ 11 MODUŁ 2 MODUŁ 10 MODUŁ 14 MODUŁ 3 MODUŁ 9 MODUŁ 4 MODUŁ 8 MODUŁ 6 MODUŁ 5 Rys. 1 Mapa zależności modułu Strona 14-2

3 Przygotowanie teoretyczne Przykładowy problem Tworzenie rozbudowanych stron z efektownie wyglądającym interfejsem użytkownika wymaga dużo pracy. Niestety w codziennej pracy programistów jest mało czasu na implementacje tego, co dla użytkownika jest najważniejsze interfejsu. Aby na stronie pojawiały się zwijane, wysuwany, wyskakujące czy animowane elementy niezbędna jest znajomośd języka JavaScript oraz szczegółów jego implementacji we wszystkich popularnych przeglądarkach. Niestety na to nie ma czasu i musimy sięgnąd po gotowe komponenty, które najczęściej nie są tanie. Zatem mamy wybór: albo sami implementujemy rozwiązania, albo kupujemy drogie kontrolki od innych dostawców. Podstawy teoretyczne udostępnia zbiór komponentów umożliwiających szybkie tworzenie stron o rozbudowanej funkcjonalności. Zawiera kod źródłowy, szablony, dokumentacje i przykłady. Po dodaniu do Visual Studio 2008 każda kontrolka posiada Smart Tag z opcją Add Extender, umożliwiającą rozszerzenie funkcjonalności kontrolki o możliwości oferowane przez ASP.NET AJAX Control Toolkit. Po dodaniu do kontrolki rozszerzenia dodana funkcjonalnośd jest wyświetlana w oknie Properties. W widoku źródła możemy skonfigurowad funkcjonalnośd w kontrolce rozszerzenia. Możliwe jest dodanie kilku rozszerzeo do jednej kontrolki. zawiera następujące kontrolki i rozszerzenia: Accordion umożliwia przesłanie kilku paneli i wyświetlenie jednego z nich AlwaysVisibleControl jest prostym rozszerzeniem umożliwiającym przypięcie kontrolki do strony tak, że pojawia się jako ruchome okno ponad treścią strony Animation umożliwia tworzenie animacji dla elementów i kontrolek AutoComplete rozszerza możliwości kontrolki TextBox o mechanizm podpowiedzi Calendar rozszerza możliwości kontrolki TextBox wyświetlając kalendarz i przekazując wybraną datę do kontrolki CascadingDropDown umożliwia łączenie kontrolek DropDown i wypełnianie ich zawartości asynchronicznie CollapsiblePanel rozszerza kontrolkę Panel o możliwośd zwijania i rozwijania jej zawartości ConfirmButton rozszerza możliwości kontrolki Button o potwierdzenie po stronie klienta DragPanel rozszerza kontrolkę Panel o możliwośd przesuwania i umieszczania jej w dowolnym miejscu na stronie DropDown rozszerza możliwości niemal każdej kontrolki, udostępniając funkcjonalnośd menu, które może byd innym panelem lub kontrolką DropShadow rozszerza dowolne kontrolki wizualne o możliwośd rzucania cienia DynamicPopulate wypełnia zawartośd elementu strony wynikiem pobranym z zapytania do usługi Web FilteredTextBox rozszerza możliwości kontrolki TextBox o zezwolenie na wprowadzania informacji jednego typu HoverMenu rozszerza dowolną kontrolkę o możliwośd wyświetlenia podręcznego menu w momencie, kiedy kursor myszy znajdzie się nad kontrolką MaskedEdit rozszerza kontrolkę TextBox o możliwośd wyświetlenia formatu wprowadzanych danych oraz ich walidację po stronie klienta ModalPopup umożliwia wyświetlenie okna dialogowego na stronie i zablokowanie strony przed jej edycją Strona 14-3

4 MutuallyExclusiveCheckBox rozszerza kontrolki CheckBox o możliwośd wzajemnego wykluczania się NoBot stosuje proste metody zapobiegające wysyłaniu strony przez automatycznych klientów NumericUpDown rozszerza kontrolkę TextBox o możliwośd zwiększenia lub zmniejszenia wartości w kontrolce przy pomocy powiązanych przycisków PagingBulletedList rozszerza możliwości kontrolki BulletedList o sortowanie i stronicowanie po stronie klienta PasswordStrength rozszerza kontrolkę TextBox o możliwośd sprawdzenia i wyświetlenia siły wprowadzanego hasła PopupControl umożliwia dodanie do dowolniej kontrolki okna wyskakującego (pop-up) Rating umożliwia łatwą ocenę dowolnej zawartości za pomocą gwiazdek ReorderList umożliwia przestawianie elementów listy poprzez przeciąganie ich myszą ResizableControl umożliwia zmianę wielkości dowolnego element w przeglądarce RoundedCorners rozszerza wizualne kontrolki o zaokrąglone rogi Slider pełni funkcję paska przewijania TabContainer umożliwia wyświetlenie części interfejsu użytkownika w zakładkach TextBoxWatermark rozszerza kontrolkę TextBox o możliwośd wyświetlania znaku wodnego, gdy użytkownik nie wprowadził żadnej wartości ToggleButton rozszerza kontrolkę CheckBox o możliwośd wyświetlania obrazków w miejscu elementów zaznaczonych i niezaznaczonych UpdatePanelAnimation animuje elementy na stronie umożliwiając graficzne reprezentowanie stanu pobierania danych ValidatorCallout rozszerza możliwości standardowych kontrolek do sprawdzania poprawności danych wprowadzanych przez użytkownika Podsumowanie W tym rozdziale przedstawiony został. Przykładowe rozwiązanie Wyobraźmy sobie, że mamy rozszerzyd funkcjonalnośd naszej aplikacji o możliwości oferowane przez bibliotekę. Dodanie do Visual Studio Zanim będziemy mogli wykorzystad funkcjonalnośd w naszych aplikacjach, musimy pobrad ze strony archiwum zawierające kontrolki przeznaczone dla.net Framework 3.5. Archiwum możemy rozpakowad w dowolnym miejscu, jednak ze względu na lepsze zarządzanie proponujemy zapisad zawartośd do katalogu C:\Program Files\Microsoft ASP.NET. Dzięki temu będziemy mieli jedno miejsce na poszukiwanie elementów związanych z ASP.NET. Najważniejszą bibliotekę AjaxControlToolkit.dll, znajdziemy w katalogu C:\Program Files\Microsoft ASP.NET\SampleWebSite\Bin. Najbezpieczniej jest ją skopiowad od razu do katalogu C:\Program Files\Microsoft ASP.NET\Binaries. W przyszłości będziemy ingerowad w kod kontrolek i sami kompilowad tę bibliotekę, więc bezpiecznie mied kopię zapasową. Kolejnym krokiem jest dodanie kontrolki do Visual Studio W tym celu dodamy nową zakładkę w oknie Toolbox, klikajad w jego obszarze prawym przyciskiem myszy, a następnie wybierając Add Tab. Możemy nazwad ją dowolnie, np. AJAX Control Toolkit. Następnie musimy wskazad lokalizację biblioteki. W tym celu klikamy dodaną przed chwilą zakładkę prawym przyciskiem myszy i wybieramy Choose Items. Strona 14-4

5 Po wskazaniu pliku za pomocą przycisku Browse możemy dodad bibliotekę AjaxControlToolkit.dll. W tym momencie w zakładce pojawi się lista kontrolek i rozszerzeo zawartych w bibliotece. Jeśli znajdziesz chwilę czasu warto przetestowad wszystkie kontrolki dostępne w bibliotece. W tym celu w Visual Studio otwieramy projekt C:\Program Files\Microsoft ASP.NET\ AjaxControlToolkit.sln. Rozszerzanie funkcjonalności kontrolek przy pomocy Teraz nauczymy się rozszerzad funkcjonalnośd kontrolek przy użyciu. Aby dodad którąś z funkcjonalności oferowanych przez do kontrolki, wybieramy kontrolkę, do której chcemy dodad rozszerzenie, a następnie w menu Smart Tag klikamy Add Extender. Rys. 2 Rozszerzanie funkcjonalności kontrolki TextBox przy pomocy W kolejnym oknie Extender Wizard (Rys. 3) musimy wybrad rozszerzenie, które chcemy dodad do kontrolki. W naszym przypadku dodamy kontrolkę TextBoxWatermarkExtender rozszerzającą kontrolkę TextBox o możliwośd wyświetlania znaku wodnego, gdy użytkownik nie wprowadził żadnej wartości. Rys. 3 Okno Extender Wizard Po dodaniu rozszerzenie w oknie Properties kontrolki znajdziemy nową grupę Extenders. Rys. 4 Okno Properties kontrolki TextBox po dodaniu rozszerzenia TextBoxWatermarkExtender Strona 14-5

6 Możemy rozwinąd i sprawdzid dodatkowe właściwości kontrolki. Ustalimy, że kontrolka będzie posiadała znak wodny o treści Podaj nazwę produktu (właściwośd WatermarkText) oraz wykorzystamy zdefiniowaną w szablonie strony klasę CSS o nazwie watermarked (właściwośd WatermarkCssClass). Po uruchomieniu strony w przeglądarce możemy sprawdzid działanie rozszerzenia. W naszym przypadku na stronie zostanie wyświetlona kontrolka TextBox ze znakiem wodnym Podaj nazwę produktu. Po kliknięciu znak wodny znika (Rys. 5). Uwagi dla studenta a) b) Rys. 5 Kontrolka TextBox po dodaniu TextBoxWatermarkExtender wyświetlona w przeglądarce a) przed b) po kliknięciu kontrolki Jesteś przygotowany do realizacji laboratorium jeśli: potrafisz dodad do projektu umiesz dodawad rozszerzenia do kontrolek 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. ASP.NET AJAX Extender Controls, Na stronie znajdziesz szczegółowe informacje odnośnie możliwości rozszerzania funkcjonalności kontrolek przy użyciu kontrolek bazujących na ExtenderControl. 2. Adam Calderon, Joel Rumerman, Advanced ASP.NET AJAX Server Controls For.NET Framework 3.5, Addison-Wesley, 2008 W książce autor przedstawia wszystkie najważniejsze zagadnienia związane z kontrolkami serwerowymi w ASP.NET AJAX z uwzględnieniem AJAX Control Toolkit. 3. : The Official Microsoft ASP.NET Site, Oficjalna strona AJAX Control Toolkit, znajdziesz tu zawsze najnowsze wersje kontrolek, dokumentację oraz wideotutoriale ułatwiający szybkie rozpoczęcie pracy z tą biblioteką. Strona 14-6

7 Laboratorium podstawowe Problem 1 (czas realizacji 10 min) Twój zespół chciałby dodad kilka nowych rozwiązao, które można zobaczyd na innych stronach. Niestety okazało się, że wymagają one znajomości języka JavaScript. Już prawie zrezygnowaliście i chcieliście oddad projekt w takim stanie w jakim jest, ale na szczęście jeden z Twoich kolegów znalazł informacje o bibliotece. Na stronie głównej był link do wersji live, po przejrzeniu możliwości biblioteki stwierdziliście jednogłośnie, że to jest to, czego chcecie. Jeden z członków zespołu miał wątpliwości, czy dacie radę szybko nauczyd się tej biblioteki i za jej pomocą uatrakcyjnid waszą aplikację. Na szczęście pobraliście kod biblioteki i okazało się, że Visual Studio 2008 na tyle ułatwia współpracę z nią, że mogliście od razu zacząd pracę. Waszym pierwszym zadaniem jest dodanie funkcjonalności bibliotece do Visual Studio. Zadanie 1. Dodanie ASP.NET AJAX Control Toolkit do Visual Studio Tok postępowania Pobierz ze strony archiwum zawierające kontrolki przeznaczone dla.net Framework 3.5. Rozpakuj archiwum na dysku w katalogu C:\Program Files\Microsoft ASP.NET. Z katalogu C:\Program Files\Microsoft ASP.NET\SampleWebSite\Bin skopiuj pliki AjaxControlToolkit.dll i AjaxControlToolkit.pdb do katalogu C:\Program Files\Microsoft ASP.NET\Binaries. Otwórz stronę przygotowaną w poprzednim dwiczeniu. Otwórz dowolny plik z rozszerzeniem aspx. W oknie Toolbox kliknij prawy przyciskiem myszy i wybierz Add Tab. Nazwij ją AJAX Control Toolkit. Kliknij prawym przyciskiem myszy nowo dodaną zakładkę i wybierz Choose Items. Rys. 6 Okno Choose Toolbox Items Kliknij Browse. Wskaż plik C:\Program Files\Microsoft ASP.NET\Binaries\AjaxControlToolkit.dll i kliknij Open. Następnie kliknij OK. Strona 14-7

8 2. Przetestuj możliwości rozszerzeo dostępnych w ASP.NET AJAX Control Toolkit W zakładce AJAX Control Toolkit powinna pojawid się lista nowych kontrolek i rozszerzeo. W Visual Studio otwórz projekt C:\Program Files\Microsoft ASP.NET\ AjaxControlToolkit.sln. Naciśnij Ctrl+F5 lub wybierz Debug -> Start without debugging. Zapoznaj się z możliwościami kontrolek i rozszerzeo kontrolek dostępnymi w zbiorze. Szczególnie zapoznaj się z rozszerzeniami: AlwaysVisibleControlExtender, CalendarExtender i FilteredTextBoxExtender i TextBoxWatermarkExtender. Problem 2 (czas realizacji 35 min) Teraz Twój zespół wyznaczył sobie następujące zadnia: dodad efekt znaku wodnego do wszystkich kontrolek TextBox w aplikacji, ustawid pozycję kontrolki AdRotator w prawym górnym rogu strony, dodad filtrowanie wprowadzania numerów i kodu pocztowego oraz zmienid kontrolki kalendarza na wyświetlanie kalendarza po kliknięciu na kontrolkę TextBox. Zadanie 3. Rozszerz możliwości kontrolki Szukaj 4. Rozszerz możliwości kontrolki Reklama Tok postępowania Otwórz kontrolkę użytkownika Kontrolki\Szukaj.aspx. Wybierz kontrolkę TextBox o ID="NazwaProduktuTextBox", a następnie kliknij Smart Tag. Wybierz Add Extender. W oknie Extender Wizard wybierz TextBoxWatermarkExtender i kliknij OK. W oknie Properties kontrolki TextBox znajdź grupę Extenders i rozwio NazwaProduktuTextBox_TextBoxWatermarkExtender. W polu WatermarkText wpisz Podaj nazwę produktu, a w polu WatermarkCssClass wpisz watermarked. Do pliku Style.css dodaj styl:.watermarked { height:20px; width:150px; padding:2px 0 0 2px; border:1px solid #BEBEBE; background-color:#f0f8ff; color:gray; } Zapisz zmiany i przetestuj działanie aplikacji. Otwórz stronę Szukaj.aspx i sprawdź, jak wygląda kontrolka TextBox. Otwórz kontrolkę użytkownika Kontrolki\Reklama.aspx. Wybierz kontrolkę AdRotator i kliknij Smart Tag. Wybierz Add Extender. W oknie Extender Wizard wybierz AlwaysVisibleControlExtenderi kliknij OK. W oknie Properties znajdź grupę Extenders i rozwio AdRotator1_AlwaysVisibleControlExtender. W polu HorizontalSide z listy rozwijanej wybierz Right. Zapisz zmiany i otwórz dowolną stronę. Zmniejsz okno przeglądarki tak, aby konieczne było przewijanie treści. Gdzie znajduje się kontrolka AdRotator podczas przewijania zawartości strony? Strona 14-8

9 5. Dodaj rozszerzenia do strony Ankieta.aspx Otwórz stronę Ankieta.aspx. Wybierz kontrolkę TextBox o ID="imieTextBox", a następnie kliknij Smart Tag. Wybierz Add Extender. W oknie Extender Wizard wybierz TextBoxWatermarkExtender i kliknij OK. W oknie Properties znajdź grupę Extenders i rozwio NazwaProduktuTextBox_TextBoxWatermarkExtender. W polu WatermarkText wpisz Podaj imię, a w polu WatermarkCssClass wpisz watermarked. Podobnie postępuj ze wszystkimi kontrolkami TextBox na stronie. Wybierz kontrolkę TextBox o ID="telTextBox", a następnie kliknij SmartTag. Wybierz Add Extender. W oknie Extender Wizard wybierz FilteredTextBoxExtender i kliknij OK. W oknie Properties znajdź grupę Extenders i rozwio teltextbox_filteredtextboxextender. W polu FilterType z listy rozwijanej wybierz Numbers. Podobnie postępuj ze kontrolkami TextBox o ID: domtextbox, miesztextbox, wzrosttextbox, odtextbox, dotextbox, liczbakmtextbox. Wybierz kontrolkę TextBox o ID="kodTextBox", a następnie kliknij Smart Tag. Wybierz Add Extender. W oknie Extender Wizard wybierz FilteredTextBoxExtender i kliknij OK. W oknie Properties znajdź grupę Extenders i rozwio kodtextbox_filteredtextboxextender: w polu FilterType do listy rozwijanej wpisz Custom, Numbers w polu ValidChars wpisz - (myślnik). Zapisz stronę. Uruchom ją w przeglądarce i z menu strony wybierz Ankiety -> Szukam towarzystwa na wycieczki, a następnie Ankiety -> Szukam roweru i przetestuj działanie dodanych rozszerzeo. Usuo kontrolki Calendar ze strony. Poniżej napisu Ostatnia wycieczka dodaj kontrolkę TextBox. Określ jej ID="ostatniaTextBox". Dodaj rozszerzenie TextBoxWatermarkExtender i w polu WatermarkText wpisz Kliknij, aby podad datę ostatniej wycieczki, a w polu WatermarkCssClass wpisz watermarked. Dodaj do kontrolki rozszerzenie CalendarExtender. Określ właściwośd FirstDayOfWeek="Monday". Poniżej napisu Następna wycieczka dodaj kontrolkę TextBox. Określ jej ID="nastepnaTextBox". Dodaj rozszerzenie TextBoxWatermarkExtender i w polu WatermarkText wpisz Kliknij, aby podad datę następnej wycieczki, a w polu WatermarkCssClass wpisz watermarked. Dodaj do kontrolki rozszerzenie CalendarExtender. Określ właściwośd FirstDayOfWeek="Monday". Zapisz stronę. Uruchom w przeglądarce i z menu strony wybierz Ankiety -> Szukam towarzystwa na wycieczki. W jakim języku wyświetlana jest kontrolka kalendarza prezentowana po kliknięciu kontrolek ostatniatextbox lub nastepnatextbox? Strona 14-9

10 6. Zmiana wyświetlania języka w rozszerzeniu CalendarExtender W pliku SzablonStrony.master znajdź kontrolkę ScriptManager. Dodaj do niej następujące atrybuty: EnableScriptGlobalization="true" Zapisz stronę. Uruchom w przeglądarce i z menu strony wybierz Ankiety -> Szukam towarzystwa na wycieczki. W jakim języku wyświetlana jest kontrolka kalendarza prezentowana po kliknięciu kontrolek ostatniatextbox lub nastepnatextbox? Jeśli kontrolka jest nadal wyświetlana w języku angielskim, to w przeglądarce Internet Explorer wybierz Tools -> Internet Options. Kliknij przycisk Languages. Jeśli na liście nie ma języka polskiego, kliknij przycisk Add i wybierz Polish (Poland) [pl-pl]. Wciśnij OK. Za pomocą przycisku Move up przesuo wpis Polish (Poland) [pl-pl] tak, aby był na górze listy. Wciśnij OK. Wciśnij OK. Zapisz stronę. Uruchom w przeglądarce i z menu strony wybierz Ankiety -> Szukam towarzystwa na wycieczki. Strona 14-10