Minikurs ASP.NET 2.0 cz.3 – Estetyka ASP.NET 2.0

W ostatniej części minikursu przedstawiającego ASP.NET 2.0 i Visual Web Developer 2005 Express Edition (VWD) zajmiemy się wyglądem witryny. Po pierwsze, zaprzęgniemy do pracy kaskadowe arkusze stylów CSS. A po drugie wykorzystamy moc technologii AJAX, konkretnie częściową aktualizację strony oraz przykładowy komponent biblioteki AJAX Control Toolkit.

Kaskadowe arkusze stylów

Kaskadowe arkusze stylów (ang. cascade style
sheet) to kolejne obok wzorca narzędzie ujednolicenia
stron witryny WWW. I w tym przypadku
wsparcie ze strony VWD jest godne pochwały. Aby
utworzyć plik CSS, z menu File wybieramy New
File…, w oknie Add New Item zaznaczamy pozycję
Style Sheet, zmieniamy nazwę pliku na Galeria.css
i klikamy Add. Powstanie plik zawierający jedynie
pusty styl dla elementu body.

Zacznijmy od stworzenia stylu dla hiperłączy
(elementy A w kodzie HTML).

Możemy z menu kontekstowego
edytora arkusza stylów (prawy klawisz
myszy podczas edycji pliku Galeria.css) wybrać
polecenie Add Style Rule…, a następnie w rozwijanej
liście Element wybrać pozycję A i kliknąć OK,
ale chyba prościej wpisać samodzielnie prosty kod:

A
{
 
}

Natomiast teraz warto już skorzystać z kreatora
stylu, który uruchomimy, stawiając kursor myszy
wewnątrz powyższego kodu i wybierając polecenie
Build Style… z menu kontekstowego.

Dzięki niemu
możemy określić wygląd czcionki, tła, obramowania
itp. w elementach HTML, za które odpowiada
budowany styl. Proponuję wziąć za wzór ustawienia
widoczne na rysunku 1.

Powstanie wówczas następujący styl:

A{
text-transform: none;
color: maroon;
font-family: Arial;
text-decoration: underline;
}

Określmy też styl łączy, gdy znajduje się nad nimi
kursor myszy. Odpowiada za to element A:hover.
Definicję nowego stylu możemy utworzyć ręcznie
lub za pomocą opisanego wyżej kreatora. Definiując
styl „podelementu”, nie warto ustawiać tych opcji,
które mogą być przejęte ze stylu macierzystego.

W naszym przypadku ładnie osiągniemy dobry
efekt, zmieniając kolor na nieco jaśniejszy od tego,
jaki wybraliśmy w stylu elementu A. Poza elementami
A i A:hover można również zdefiniować style dla
innych stanów łącza: A:visited określa wygląd linku,
który został już odwiedzony, A:link – linku jeszcze
nieodwiedzonego i A:active – styl używany w momencie
wczytywania wskazanej przez łącze strony.

Do pustego stylu body określającego wygląd
„zwykłego” tekstu na stronie dodajmy krój i kolor
czcionki oraz kolor tła zgodnie z poniższym wzorem:

body
{
color: peru;
font-family: Arial;
background-color: beige;
}

Teraz przejdźmy do widoku projektowania
wzorca Galeria.master. Przeciągnijmy na niego
z okna projektu (Solution Explorer) utworzony plik
.css. Do kodu strony dodany zostanie element , dzięki któremu wzorzec i wszystkie
strony, które go używają, będzie korzystał
z arkusza i zdefiniowanych w nim stylów. W podglądzie
wzorca i stron natychmiast zobaczymy
zmianę – tekst zmieni kolor na brązowy, linki na
jasnobrązowy.

Określmy teraz wygląd zdefiniowanego we
wzorcu i widocznego na każdej stronie nagłówka.
Aby można było określić styl każdej jego linii
osobno, należy każdej z nich nadać osobne identyfikatory.

Wobec tego proponuję uporządkować
kod nagłówka, usuwając wszelkie formatowania,
a w zamian wstawiając identyfikatory naglowek1
i naglowek2. Identyfikator można przypisać do
elementu HTML, korzystając z pola (Id) w podoknie
Properties lub używając atrybutu id wprost
w kodzie znacznika. Kod pliku wzorca powinien po
porządkach wyglądać następująco:

<body>
<form id=\"form1\" runat=\"server\">
<div>
<span id=\"naglowek1\">Wirtualna Galeria</span><br />
<span id=\"naglowek2\">Doskonałe miejsce na Twoją wystawę</span><br />
<hr width=\"30%\" align=\"left\">

Teraz przejdźmy do arkusza stylów i określmy
wygląd poszczególnych linii nagłówka, wstawiając
definicje widoczne na listingu poniżej. Zwróć uwagę,
że w przypadku definiowania stylu konkretnego
komponentu jego nazwa składa się ze znaku
hash (#) i identyfikatora komponentu.

#naglowek1
{
color: maroon;
font-size: 303%;
font-variant: small-caps;
font-family: Times;
}
#naglowek2
{
color: maroon;
font-size: 133%;
font-variant: small-caps;
font-family: Times;
}

Przetestujmy nowe formatowania, uruchamiając
witrynę i wczytując stronę Upload.aspx (rys. 2).
Modyfikacje mogłyby pójść o wiele dalej. Można
zmienić wygląd pól edycyjnych, przycisków i innych
komponentów. W tych zmianach nieoceniony
jest poznany kreator stylów VWD, który podpowie,
jakie parametry można umieścić w definicji stylu
i pomoże wybrać ich wartości.

AJAX. Częściowa aktualizacja strony

W pierwszej części minikursu oprócz samego
VWD zainstalowaliśmy także dodatek Microsoft
ASP.NET 2.0 AJAX Extension 1.0. Szablon witryny,
którego wówczas użyliśmy, tworząc projekt Galerii
pochodził właśnie z tego dodatku. Dzięki temu
do projektu można dodać elementy AJAX-a (patrz
ramka). I teraz zrobimy z tego użytek.

Wczytajmy do VWD stronę Default.aspx. W widoku
projektowania umieśćmy na niej komponent
ScriptManager z zakładki AJAX Extensions okna
Toolbox. Taki komponent (i tylko jeden) musi być
na każdej stronie korzystającej z dodatku AJAX.
Następnie umieśćmy na niej komponent Update-
Panel z tej samej zakładki i przeciągnijmy do niego
myszką wszystkie komponenty ze strony, a więc
rozwijaną listę kategorii i komponent Repeater
(rysunek 3). Teraz możemy uruchomić projekt (zakładam,
że w bazie jest już kilka zdjęć należących
do różnych kategorii).

Warto zwrócić uwagę na to, że przełączając kategorię,
nie zobaczymy, jak miało to miejsce do tej
pory, typowego przeładowania strony z paskiem
postępu w dolnej części okna przeglądarki i charakterystycznym
kliknięciem po jej załadowaniu. Teraz wszystko odbywa się „gładko”.

Nie dajmy się jednak omamić. Za zmianę zdjęć
nie jest odpowiedzialny żaden skrypt uruchomiony
w przeglądarce. Nawet jeżeli nie widać tego po zachowaniu
przeglądarki, jednak wysłała ona żądanie
do aplikacji ASP.NET na serwerze, aby ta wykonała
wszystkie metody związane z postbackiem,
m.in. zdefiniowaną w poprzedniej części metodę
Page_Load odpowiedzialną za wyświetlanie zdjęć
tylko z wybranej kategorii i odesłała do przeglądarki
odpowiedź w postaci nowego kodu HTML.

W przeglądarce nie doszło jednak do pełnego
przeładowania strony, a jedynie do aktualizacji
tej jej części, która związana jest z komponentem
UpdatePanel. Dzięki temu strona sprawia wrażenie,
jakby działała bez kontaktu z serwerem.
Przeładowanie strony jest teraz mniej oczywiste.
To ładnie wygląda, ale może dezorientować
użytkownika witryny, który nie widzi takiej
reakcji przeglądarki, do jakiej jest przyzwyczajony.
Możemy temu zaradzić, umieszczając na stronie
komunikat pokazywany w czasie aktualizacji. Na
stronie w widocznym miejscu wstawiamy komponent
UpdateProgress z zakładki AJAX Extensions.

Umieszczamy w nim napis informujący o tym, że
trwa aktualizacja galerii (można go np. uzupełnić
animowanym gifem z obracającą się klepsydrą).
Następnie łączymy nowy komponent z panelem
UpdatePanel, wskazując go we własności
AssociatedUpdatePanelID. Własność DisplayAfter
odpowiada za liczbę milisekund, po których
pojawić się ma komunikat. Ponieważ wiemy, że to
trochę potrwa, możemy komunikat wyświetlić od
razu, tj. wpisać do tej własności zero.

Ja otoczyłem
napis z komponentu UpdateProgress tabelą z jedną
komórką. Dzięki temu mogłem wypośrodkować
napis w pionie i poziomie (kod projektu dostępny
jest na CD). Ponadto w widoku projektowania
z menu kontekstowego rozwiniętego na rzecz
tabeli wybrałem polecenie Style… i za pomocą
edytora sformatowałem styl tego konkretnego elementu
(rysunek 4). Użyłem przy tym odwróconych
kolorów stylu body.

Do zaprezentowania częściowej aktualizacji
nadawałaby się doskonale strona Upload.aspx, na
której sporo czasu czeka się na przesłanie zdjęcia.
Niestety FileUpload jako jeden z niewielu komponentów
biblioteki Web Forms nie współpracuje
z asynchronicznym AJAX-em. Aby efekt był lepiej
widoczny, na stronie Default.aspx wprowadziłem
do metody polecenie usypiające ją na 2 sekundy.
Po umieszczeniu aplikacji na serwerze nie będzie
to już potrzebne.

AJAX. Biblioteka kontrolek

Częściowe odświeżanie strony to miła rzecz, ale
naprawdę dobra zabawa rozpoczyna się dopiero
po zainstalowaniu biblioteki kontrolek AJAX Control
Toolkit (ACT). Pakiet ten można pobrać ze strony
http://www.codeplex.com (jest to strona z projektami
open source firmowanym przez Microsoft).

Rozpowszechniany jest on w postaci archiwum .zip, który trzeba samodzielnie rozpakować. Najlepiej umieścić go w katalogu c:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\AJAX Control Toolkit. Do ściągnięcia są dwa pliki. Proponuję pobrać większy, czyli ten zawierający dodatkowo kody źródłowe. Informacje na temat ACT można także znaleźć na stronie http://ajax.asp.net/ajaxtoolkit/.
To właśnie tej bibliotece jest poświęcona większość dostępnych na stronie filmów instruktażowych, które gorąco polecam obejrzeć.

Czym jest ACT? To zbiór komponentów serwerowych ASP.NET korzystających z technologii AJAX. Oznacza to, że do generowanych przez nie kodów HTML dodawane są skrypty JavaScript działające po stronie klienta (w przeglądarce). Dzięki nim można wspaniale urozmaicić wygląd i zachowanie strony WWW. Aby lepiej zrozumieć, z jakim typem kontrolek mamy do czynienia, rozpocznijmy naszą przygodę z ACT od wczytania do Visual Web Developer stronyASP.NET znajdującej się w katalogu c:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\AJAX Control Toolkit\SampleWeb- Site. Można też utworzyć dla niej alias i uruchomić w serwerze IIS.

Zobaczymy stronę z rysunku 5, na której w menu z lewej strony wymienione są kontrolki, których działanie możemy podziwiać. Pierwszy to Accordion (akordeon) złożony z kilku rozwijalnych paneli. Nagłówki wszystkich paneli są widoczne jednocześnie, ale tylko jeden z nich jest rozwinięty i widać jego zawartość.

Przełączanie oglądanych paneli wiąże się z miłą dla oka animacją. Pośród wielu komponentów warto zwrócić także uwagę na komponent AlwaysVisibleControl (zawsze widoczna kontrolka) – który to komponent pozostaje zawsze ponad innymi elementami strony. Doskonały np. do przygotowywania reklam lub okien komunikatów. Tego komponentu za chwilę użyjemy, aby „nad” stroną wyświetlić okno komunikatu o aktualizacji.

Podobny komponent prezentowany jest w pozycji Animation. Jeszcze innym rodzajem pseudookna jest ModalPopup. Wyróżnia go jednak to, że w momencie jego wyświetlenia, pozostała część strony zostaje przygaszona i nie ma do niej dostępu. Z kolei rozmiar kontrolki ResizableControl może być kontrolowany myszką, jak w przypadku zwykłych okien. Są jeszcze suwaki, których brakuje w bibliotece Web Forms (kontrolka Slider), panel z zakładkami (Tabs) i kontrolka analogiczna do komponentu ValidationSummary, z tą róznicą, że teraz informacje o błędach pokazywane są w atrakcyjnych dymkach (rysunek 6).

Składniki biblioteki ACT dzielą się na samodzielne kontrolki i rozszerzenia kontrolek. Samodzielny jest na przykład akordeon. Natomiast AlwaysVisibleControl, Slider czy ConfirmButton są jedynie rozszerzeniami (w nazwie ich klas na końcu dodane jest „Extender”). Rozszerzenia zmieniają lub wzbogacają możliwości zwykłych komponentów.

Dla przykładu klasa ConfirmButtonExtender związana z przyciskiem Button powoduje, że po jego kliknięciu pojawia się pytanie z prośbą o potwierdzenie. Klasa SliderExtender związana z kontrolką TextBox powoduje, że ta ostatnia zastąpiona jest na stronie przez suwak. Natomiast AlwaysVisibleControlExtender sprawia, że wskazany w tym rozszerzeniu komponent jest zawsze widoczny i nie zmienia pozycji mimo przewijania strony.

W katalogu witryny SampleWebSite, którą przed chwilą przeglądaliśmy, znajdziemy podkatalog Bin z zarządzaną biblioteką DLL, w której znajdują się wszystkie kontrolki i rozszerzenia. Możemy je zainstalować w zakładkach okna Toolbox. W tym celu zamknijmy bieżący projekt, wybierając z menu File polecenie Close project. Z menu kontekstowego okna Toolbox wybieramy polecenie Add Tab, dzięki czemu dodamy nową zakładkę, którą nazwijmy AJAX Control Toolkit. Następnie z menu kontekstowego nowej zakładki wybieramy polecenie Choose Items…. Pojawi się okno z listą zainstalowanych komponentów (rysunek 7), w którym klikamy przycisk Browse.

Za pomocą typowego okna dialogowego odnajdujemy bibliotekę AjaxControlToolkit.dll z katalogu SampleWebSite/Bin umieszczonego w miejscu, do którego rozpakowaliśmy pakiet ACT. Do listy komponentów zostaną dodane nowe kontrolki, które poznaliśmy w przykładowej aplikacji prezentującej ACT. Po zamknięciu okna nie zobaczymy wprawdzie nowych kontrolek w zakładce okna Toolbox, ale pojawią się one, gdy tylko wczytamy projekt witryny.

Spróbujmy teraz wykorzystać komponent rozszerzenia AlwaysVisibleControlExtender do umieszczenia powiadomienia o aktualizacji „nad” właściwą zawartością strony. Co więcej, bez względu na przewijanie strony, komunikat zawsze będzie w centrum okna przeglądarki. Z zakładki AJAX Control Toolkit wstawiamy na stronę komponent AlwaysVisibleControlExtender i jego własność TargetControlID ustawmy na panel UpdateProgress1. Następnie przechodzimy do edytora kodu i w oknie Properties ustawiamy pozostałe własności rozszerzenia. Przede wszystkim ustawiamy własność Enabled na True.

Z kolei własność VerticalSide na Middle, a HorizontalSide na Center – tak, aby komunikat był w centrum okna, gdzie nie będzie można go przeoczyć.

Kod elementu rozszerzenia widoczny jest poniżej:

<cc1:AlwaysVisibleControlExtender ID=\"AlwaysVisibleControlExtender1\"runat=\"server\"TargetControlID=\"Panel1\"Enabled=\"true\" VerticalSide=\"Middle\"HorizontalSide=\"Center\"></cc1:AlwaysVisibleControlExtender>

Efekt widoczny jest na rysunku 4. Przy użytych ustawieniach komunikat będzie zawsze pozostawać w środku bez względu na zmiany rozmiaru okna przeglądarki i przewijanie tekstu znajdującego się pod spodem. W identyczny sposób można przygotować reklamę pojawiającą się po załadowaniu strony (rysunek 8). Oczywiście należy wówczas rozszerzenie dodać do panelu, który nie pojawia się czasowo i zawiera link do reklamowanej strony (najlepiej otwieranej w osobnym oknie przeglądarki). Przyzwoitość nakazuje umieścić na panelu reklamy obraz lub przycisk, którego kliknięcie usunie ją z okna przeglądarki (kod znajduje się na CD w projekcie Reklama).

Wystarczy tylko zapoznać się ze środowiskiem Visual Web Developer, aby przekonać się jak niewielki zbiór możliwości przedstawiłem w zakończonym właśnie minikursie. Oznacza to, że stworzoną w trzech artykułach witrynę można jeszcze znacznie rozbudować. Warto uzupełnić ją chociażby o możliwość logowania użytkowników, zarządzanie przez nich plikami umieszczonymi na serwerze i organizowanie ich w mniejsze galerie.

Można w tym celu utworzyć coś na wzór menedżera plików pozwalającego na usuwanie plików, zmianę ich kategorii i opisów. Galerie użytkowników mogłyby korzystać z jednego z wielu gotowych tematów bazujących na kaskadowych arkuszach stylów. Warto dodać także tworzenie miniatur zdjęć (thumbnails). I tak dalej, i tak dalej. Najwięcej satysfakcji da jednak przygotowanie tego samodzielnie, dlatego warto poświęcić czas nauce ASP.NET 2.0.

Więcej informacji na temat ASP.NET 2.0 i ADO. NET 2.0 oraz o projektowaniu witryn korzystających z AJAX zawarto w książce „Technologie ASP.NET i ADO.NET w Visual Web Developer” (Helion, 2007) przygotowanej m.in. przez autora artykułu.

Może Cię zainteresować:

O autorze

Tomasz Galanciak

Więcej artykułów autorstwa Tomasz Galanciak »

Internet Maker