4. Proste przekazywanie stanu

Transkrypt

1 4. Proste przekazywanie stanu 4.1. Cel przedsięwzięcia i zasada działania W celu sprawdzenia tradycyjnego sposobu przekazywania parametrów między stronami wykonamy teraz nieskomplikowane ćwiczenie Kwadraty liczb. Będzie ono prezentować następujące zagadnienia: walidację strony z poziomu kodu, wykorzystanie właściwości strony IsPostBack oraz IsValid, przekierowanie (ang. redirect) przeglądarki między stronami oraz programową obsługę kontrolki Table dodawanie wierszy i komórek z dynamicznie generowaną zawartością. Rysunek 1. Planowany wygląd aplikacji Zasada działania jest następująca: na pierwszej stronie umieścimy formularz HTML zawierający pole do wpisania liczby, liczba ta będzie przekazywana na drugą stronę, przez wysłanie parametrów odczytanych z formularza, na drugiej stronie liczba podana w postaci parametru będzie używana przy dynamicznym tworzeniu tablicy kwadratów liczb, od 1 do żądanej liczby, następnie tablica ta będzie wykorzystywana do zbudowania zawartości tabeli na stronie, kliknięcie w łącze Wstecz lub podanie błędnych danych będzie przekierowywać przeglądarkę z powrotem na stronę pierwszą. 1

2 4.2. Budowa interfejsu użytkownika W celu stworzenia żądanej strony, wykonaj poniższe polecenia: 1. Załóż na dysku twardym własny katalog na pliki dla tego zadania. 2. Otwórz program WebMatrix. 3. Stwórz nową stronę ASP.NET Page, upewnij się czy w polu Language jest wybrana opcja C#, a następnie zapisz stronę w swoim katalogu, w pliku o nazwie Kwadraty.aspx. 4. Wstaw do tej strony nagłówek: Kwadraty. 5. Warto będzie wstawić do strony dwie tabele. Pierwsza będzie jedynie dodawać ramkę wokół drugiej, właściwej tabeli z kontrolkami. Bez tego włączenie ramek dla jednej tylko tabeli spowoduje, że każda komórka będzie otoczona ramką, co nie jest zbyt eleganckie i ujawnia zastosowanie kontrolek walidujących. Wstaw więc tabelę, poleceniem HTML Insert Table. 6. Podaj następujące dane: Rows: 1 (liczba wierszy), Width: (szerokość wyczyść), Columns: 1 (liczba kolumn), Height: (wysokość wyczyść). 7. Kliknij we wstawioną tabelę (w jedną z jej ramek), aby zaznaczył się znacznik <TABLE>. W celu wskazania znacznika <TABLE> możesz również kliknąć wewnątrz dowolnej komórki tabeli i skorzystać z listy znaczników w oknie właściwości, zatytułowanej Click to see parent HTML elements. 8. Ustaw jej właściwości: border na 1, bordercolor na Black, oraz bgcolor (poprzez zakładkę z kolorami Web) na NavajoWhite. 9. Umieść kursor wewnątrz tabeli (wymaga to chwili uwagi). Wstaw teraz do środka drugą tabelę, ponownie poleceniem HTML Insert Table. 10. Podaj następujące dane: Rows: 3 (liczba wierszy), Width: 300 (szerokość), Columns:1 (liczba kolumn), Height: 120 (wysokość). Trzy wiersze będą potrzebne na: informację, główne kontrolki oraz kontrolki walidujące. 11. Wpisz w pierwszym wierszu tekst, zgodnie z rysunkiem W drugim wierszu wstaw kontrolkę TextBox i nazwij ją (ustawiając właściwość (ID)) TxtIleLiczb. 13. W okienku Toolbox otwórz zakładkę HTML Elements i wstaw za polem tekstowym kontrolkę Submit Button. Kluczowym elementem jest tutaj zastosowanie takiej właśnie kontrolki oraz ustawienie jej właściwości runatserver, żeby można było formularz wysłać, naciskając klawisz Enter. Nie jest to niestety możliwe, jeśli 2

3 użyjemy przycisku Button i jego zdarzenia Click nadal trzeba wskazać przycisk i nacisnąć go. 14. W okienku Toolbox wróć na zakładkę Web Controls i wstaw w trzecim wierszu tabeli kontrolki sprawdzania poprawności: RequiredFieldValidator i RangeValidator. Zabezpieczy to przed sytuacją braku lub nieprawidłowych danych. 15. Ustaw właściwości kontrolek zgodnie z poniższą tabelą: Kontrolka Nazwa kontrolki (ID) Nazwa właściwości Wartość właściwości TextBox TxtIleLiczb Width 235 MaxLength 5 <INPUT type="submit"> value " OK " runatserver True RequiredFieldValidator ReqLiczba ControlToValidate TxtIleLiczb Display Dynamic ErrorMessage Wpisz wartość! RangeValidator RngLiczba ControlToValidate TxtIleLiczb Display Dynamic ErrorMessage Wpisz liczbę z zakresu ! Type Integer MinimumValue 1 MaximumValue Zapisz dokonane zmiany i sprawdź, czy strona poprawnie działa. Powinny wyświetlać się komunikaty o prawidłowych (bądź nieprawidłowych) liczbach Przekazywanie parametrów między stronami Pora teraz na przekazanie odczytanej liczby do drugiej strony, która coś ciekawego z nią zrobi (wyświetli tablicę kwadratów). W tym celu: 17. Odszukaj okienko Properties (prawy dolny panel w WebMatrix). W liście rozwijanej kontrolek wskaż element Page. 18. Przełącz się na zakładkę ze zdarzeniami i kliknij dwukrotnie w zdarzenie Load. Wpisz poniższy kod: Przykład 14. Przekazanie danych na drugą stronę przez przekierowanie (ang. redirect) void Page_Load(object sender, EventArgs e) { if (IsPostBack) { 3

4 Validate(); if (IsValid) { Response.Redirect("Kwadraty1.aspx?ile=" + TxtIleLiczb.Text); Powyższy kod działa według następującego algorytmu: użytkownik wpisuje liczbę i zatwierdza ją. Po sprawdzeniu, czy użytkownik wysyłał stronę na serwer (warunek IsPostBack) wywoływane jest żądanie sprawdzenia poprawności wprowadzonych danych (instrukcja Validate()). Dzięki temu możliwe jest sprawdzenie poprawności danych (warunek IsValid). Jeśli dane są w porządku, budowany jest adres strony docelowej, z uwzględnieniem parametrów jak dla metody GET przez znak zapytania (ang. query string). Następnie dane są przekazywane dzięki przekierowaniu przeglądarki użytkownika do wskazanej strony (wywołanie Response.Redirect()). Druga strona będzie mogła odczytać przekazane parametry dzięki wykorzystaniu predefiniowanego obiektu ASP.NET Request Budowa strony odbierającej parametry Zanim będzie można wyświetlać kwadraty liczb, trzeba najpierw przygotować na wszystko miejsce. Potrzebny jest więc interfejs użytkownika drugiej strony, jak pokazano poniżej. Rysunek 2. Planowany wygląd aplikacji W celu stworzenia żądanej strony, wykonaj poniższe czynności: 4

5 19. Stwórz nową stronę ASP.NET Page, upewnij się, czy w polu Language została wybrana opcja C#, a następnie zapisz stronę w swoim katalogu, w pliku o nazwie Kwadraty1.aspx. 20. Wstaw do tej strony nagłówek: Kwadraty obliczenia. 21. Tym razem wystarczy wstawić do strony jedną tabelę, ponieważ będzie miała ona tylko jeden wiersz. Wstaw więc tabelę, poleceniem HTML Insert Table. 22. Podaj następujące dane: Rows: 1 (liczba wierszy), Width: 230 (szerokość), Columns: 1 (liczba kolumn), Height: 40 (wysokość). 23. Kliknij we wstawioną tabelę (w jedną z jej ramek), aby zaznaczył się znacznik <TABLE>. W celu wskazania znacznika <TABLE> możesz również kliknąć wewnątrz dowolnej komórki tabeli i skorzystać z listy znaczników w oknie właściwości, zatytułowanej Click to see parent HTML elements. 24. Ustaw jej właściwości: border na 1, bordercolor na Black oraz bgcolor (poprzez zakładkę z kolorami Web) na NavajoWhite. 25. Wpisz w pierwszym wierszu tekst, zgodnie z rysunkiem Wstaw kontrolkę Label i nazwij ją LabLiczba. 27. Poniżej wstaw kontrolkę Table. Tym razem ma to być kontrolka z zakładki Web Controls, a nie tabela HTML. Nazwij ją TblWyniki. Będzie ona dynamicznie wypełniana wierszami z kwadratami liczb. 28. Wstaw poniżej kontrolkę HyperLink i nazwij ją LnkWstecz. Dzięki niej będzie można powrócić do pierwszej strony ćwiczenia. 29. Ustaw właściwości kontrolek zgodnie z poniższą tabelą: Kontrolka Nazwa kontrolki (ID) Nazwa właściwości Wartość właściwości Label LabLiczba Text Table TblWyniki HyperLink LnkWstecz Text Wstecz NavigateUrl Kwadraty.aspx 4.5. Odczyt i użycie przekazanych parametrów Jedyna rzecz, jaka pozostała, to napisanie kodu realizującego założoną funkcjonalność. Przyznać trzeba, że pierwsza strona jest raczej prosta jej celem jest jedynie 5

6 odczytanie liczby i wysłanie jej do drugiej strony. Druga strona natomiast ma wykonać całą pracę: utworzenie i wyświetlenie tablicy kwadratów. Zrobimy to w dwóch etapach. Najpierw trzeba będzie przygotować tablicę zawierającą kwadraty liczb. Następnie stworzona zostanie uniwersalna metoda wyświetlająca zawartość tablicy, która będzie do podanej tabeli dodawać wiersze i komórki z odpowiednią zawartością (liczby oraz ich kwadraty z tablicy). Odczyt parametrów zostanie umieszczony w obsłudze zdarzenia Page_Load: Przykład 15. Odczyt parametrów przekazanych z pierwszej strony void Page_Load(object sender, EventArgs e) { string liczba = Request["ile"]; try { int zabezpieczenie = liczba.length + Convert.ToInt32(liczba); catch (Exception ex) { Response.Redirect("Kwadraty.aspx"); LabLiczba.Text = liczba; int ile = Convert.ToInt32(liczba); // Tablica "wyniki" jest typu long, bo * = // a > nie mieści się w zakresie int long[] wyniki = new long[ile]; for (int x = 1; x <= ile; x++) { // przynajmniej jedna z liczb musi być typu long, żeby // uniknąć błędów w obliczeniach wyniki[x - 1] = (long) x * x; Wyswietl(wyniki, TblWyniki); Jak widać, odczyt parametrów jest dość prosty. Wystarczy w tym celu pobrać z obiektu Request żądany parametr ile. Następnie zastosowane jest zabezpieczenie (w bloku try/catch) przed dwoma rzeczami po pierwsze sprawdzamy, czy podany parametr ma niezerową długość (czy w ogóle został podany), a po drugie, czy da się go przekonwertować na liczbę (czy jest poprawną liczbą całkowitą). Nieistotne jest tu, że na pierwszej stronie były zastosowane kontrolki walidujące nie można niestety wierzyć wszystkim danym przysyłanym z Internetu. Jeśli występuje błąd, przeglądarka jest kierowana na stronę pierwszą. 6

7 Jeśli dane wyglądają na poprawne, to przekazany parametr jest wyświetlany w kontrolce LabLiczba oraz odczytywana jest jego wartość liczbowa. Następnie tworzona jest tablica wyniki i zapisywane są do niej kwadraty liczb, zgodnie z żądaną ich liczbą. Ostatnim elementem jest metoda wyświetlająca kwadraty w tabeli TblWyniki. Przykład 16. Dynamiczne tworzenie wierszy w tabeli void Wyswietl(long[] kwadraty, Table tabela) { int i = 1; foreach (long kwadrat in kwadraty) { // komórka z liczbą TableCell c1 = new TableCell(); c1.text = " " + (i++).tostring() + " "; c1.horizontalalign = HorizontalAlign.Center; // komórka z wynikiem TableCell c2 = new TableCell(); c2.text = " " + kwadrat.tostring() + " "; c2.horizontalalign = HorizontalAlign.Center; // wiersz TableRow r = new TableRow(); r.cells.add(c1); r.cells.add(c2); // rozbudowa tabeli tabela.rows.add(r); Zastosowana jest tutaj pętla foreach, która pozwala na cykliczny odczyt zawartości tablicy liczb całkowitych podanej jako parametr. Najpierw tworzone są dwie komórki TableCell z liczbą (zliczaną niezależnie za pomocą zmiennej i warto zauważyć jak zmienia się jej wartość) oraz komórka z wynikiem. Następnie tworzony jest wiersz TableRow i są do niego dodawane komórki. Dodatkowe odstępy " " służą do lepszej prezentacji zawartości komórek. Na końcu wiersz jest dodawany do przekazanej tabeli Table. Nie jest tu istotne, czy w przekazanej do wyświetlenia tablicy są kwadraty liczb, sześciany, czy jeszcze coś innego. Nie ma również znaczenia, czy na stronie jest tylko jedna, czy wiele tabel do wyświetlania wyników. 7

8 5. Przechowywanie stanu na stronie Poprzedni temat dotyczył przekazywania stanu w postaci parametrów między stronami. Jednak ciekawszym zagadnieniem jest wykorzystanie wbudowanych mechanizmów ASP.NET do przechowywania stanu kontrolek (ich właściwości) między wywołaniami strony. Mowa tu głównie o mechanizmie ViewState, dzięki któremu w ukrytym polu formularza wysyłanym do przeglądarki zapamiętywany jest stan kontrolek. Stan ten przywracany jest na samym początku ponownego wywołania strony (tzw. PostBack). Daje to gwarancję zachowania stanu między zdarzeniami dotyczącymi tej samej strony podobnie jak w zwykłych, lokalnych aplikacjach Cel przedsięwzięcia i zasada działania Aby sprawdzić w praktyce, jak takie rozwiązanie upraszcza tworzenie aplikacji ASP.NET, stworzymy stronę, na której będzie wyświetlana galeria zdjęć Pory roku. Dla każdej pory roku będzie dostępny link, kliknięcie w który spowoduje wyświetlenie miniaturek zdjęć dla odpowiednich trzech miesięcy. Kliknięcie w miniaturkę spowoduje natomiast wyświetlenie zdjęcia w normalnym rozmiarze. O ile w innych technologiach takie rozwiązanie często oparte jest o kilka stron, między którymi przesyłane są parametry, o tyle tutaj wystarczy jedna strona. Kluczem do stworzenia takiej strony jest wykorzystanie paneli, których zawartość będzie odpowiednio ukrywana lub wyświetlana. Rysunek 3. Planowany wygląd aplikacji 8

9 5.2. Budowa interfejsu użytkownika W celu stworzenia żądanej strony, wykonaj poniższe czynności: 30. Załóż na dysku twardym własny katalog na pliki dla tego zadania. 31. Skopiuj do tego katalogu z załączonych materiałów zawartość katalogu PoryRoku, czyli następujące podkatalogi: mini, foto, ads oraz plik: ads_468x60.xml. 32. Otwórz program WebMatrix. 33. Stwórz nową stronę ASP.NET Page, upewnij się czy w polu Language wybrana została opcja C#, a następnie zapisz stronę w swoim katalogu, w pliku o nazwie PoryRoku.aspx. 34. Wstaw do tej strony kontrolkę AdRotator wyświetlającą zmieniające się reklamy i nazwij ją AdRotatorTop (właściwość (ID)). Ustaw jej właściwość AdvertismentFile tak, aby zawierała nazwę przygotowanego pliku opisującego reklamy (ads_468x60.xml). Będą one pobierane z podkatalogu ads. 35. W następnej linii wstaw kontrolkę Panel. Nadaj jej nazwę PanelCalosc. 36. Kliknij w kontrolkę AdRotatorTop i wciśnij na klawiaturze kursor w lewo, aby wejść do edycji akapitu. Zmień wyrównanie elementów akapitu na centrowanie (ustaw właściwość align na Center). Wykonaj taką samą czynność dla kontrolki PanelCalosc. 37. Zaznacz kontrolkę PanelCalosc i zmień szerokość (właściwość Width) na 600px. 38. Wstaw do panelu cztery kontrolki LinkButton, nazywając je LBtnPora1, LBtnPora2, LBtnPora3 i LBtnPora4 oraz ustawiając odpowiednio napisy (Text) na nazwy kolejnych pór roku. 39. Kliknij dwa razy w kontrolkę PanelCalosc, aby przejść do edycji jego zawartości. Usuń napis Panel, zaś każdą kontrolkę LinkButton rozdziel od sąsiednich dwoma spacjami. 40. Przejdź na koniec linii w panelu i dodaj nowy akapit (naciścij Enter). Wstaw teraz jeden za drugim dwa panele. Nazwij je PanelMini i PanelFoto. Ustaw każdemu z nich szerokość (Width) na 600px. 41. Usuń z kontrolki PanelMini napis Panel, wstaw kontrolkę LinkButton i nazwij ją LBtnZwin. 42. Stwórz teraz nowy akapit (naciśnij Enter) i wstaw tabelę poleceniem HTML Insert Table. 43. Podaj następujące dane: Rows: 1 (liczba wierszy), Width: 300 (szerokość), Columns: 3 (liczba kolumn), Height: 50 (wysokość). 44. Włącz wyświetlanie ramki tabeli ustaw jej właściwość border na 1. 9

10 45. W pierwszej komórce tabeli ustaw wyrównanie align na Center, wstaw kontrolkę ImageButton (nazwij ją ImbMini1), zaznacz ją, wciśnij na klawiaturze kursor w prawo, wstaw złamanie wiersza (naciśnij Shift + Enter) i na końcu wstaw kontrolkę LinkButton (nazwij ją LBtnMiesiac1). 46. Czynność z punktu 15 powtórz dla pozostałych dwóch komórek tabeli, nazywając odpowiednio kontrolki. 47. Usuń z kontrolki PanelFoto napis Panel, wstaw kontrolkę LinkButton i nazwij ją LBtnPowrot. 48. Stwórz teraz nowy akapit (naciśnij Enter) i wstaw tabelę poleceniem HTML Insert Table. 49. Podaj następujące dane: Rows: 1 (ilość wierszy), Width: 50 (szerokość), Columns: 1 (ilość kolumn), Height: 50 (wysokość). 50. Włącz wyświetlanie ramki tabeli ustaw jej właściwość border na W komórce tabeli ustaw wyrównanie align na Center. Następnie wstaw do środka kontrolkę Image, która będzie wyświetlać obrazek w naturalnej wielkości. Nazwij ją ImgFoto. 52. Pod tabelą wstaw kontrolkę Label i nazwij ją LabMiesiac. 53. Pozmieniaj wyrównanie (align) w akapitach i tabelach tak, aby uzyskać wygląd aplikacji zgodny z założonym. 54. Na końcu wyłącz wyświetlanie paneli PanelMini oraz PanelFoto, ustawiając właściwości Visible na False. 55. Ustaw właściwości kontrolek zgodnie z poniższą tabelą: 10

11 Kontrolka Nazwa kontrolki (ID) Nazwa właściwości Wartość właściwości AdRotator AdRotatorTop AdvertismentFile ads_468x60.xml Height 60 Width 468 Panel PanelCalosc Width

12 LinkButton LBtnPora1 Text Wiosna LinkButton LBtnPora2 Text Lato LinkButton LBtnPora3 Text Jesień LinkButton LBtnPora4 Text Zima Panel PanelMini Visible False Width 600px ImageButton ImbMini1 Visible False ImageButton ImbMini2 Visible False ImageButton ImbMini3 Visible False LinkButton LBtnMiesiac1 Visible False LinkButton LBtnMiesiac2 Visible False LinkButton LBtnMiesiac3 Visible False Panel PanelFoto Visible False Width 600px Image ImgFoto Visible False Label LabMiesiac Visible False 56. Zapisz dokonane zmiany i sprawdź, czy strona poprawnie działa. Powinny wyświetlać się komunikaty o prawidłowych (bądź nieprawidłowych) liczbach Centralna obsługa zdarzeń Istnieje jedna, dobrze znana reguła programistyczna, o angielskiej nazwie DRY: Nie powtarzaj się (ang. Don t Repeat Yourself). Oznacza ona mniej więcej tyle, że w dobrze napisanym kodzie nie ma sekcji, które są po prostu skopiowane i delikatnie zmienione, gdyż są one kłopotliwe w utrzymaniu, zwłaszcza przy zmianach (np. skąd wiadomo, że wszędzie, gdzie trzeba, są już wprowadzone potrzebne zmiany?). Zamiast tego pisze się metody, które zamykają w sobie wymaganą funkcjonalność, zaś zmienne elementy zamienia się na parametry. W ten sposób ewentualne zmiany wystarczy wprowadzać w jednym miejscu, zaś pozostała część programu automatycznie z nich korzysta. My także zastosujemy się do tej zasady i stworzymy bardzo prostą bo jednolinijkową obsługę zdarzeń kontrolek znajdujących się na stronie. Te pojedyncze linijki będą wywoływać odpowiednie metody wykonawcze, przekazując im wymagane parametry. Rozpoczniemy od pustych wersji tych metod, następnie stworzymy obsługę zdarzeń, aby na końcu napisać właściwą treść metod wykonawczych. W tym momencie strona będzie już działać. Przykład 17. Początkowa wersja metod wykonawczych // Reakcja na kliknięcie w nazwę pory roku. // Wyświetla miniaturki dla żądanej pory roku (gdy Pora równa 1-4) // lub ukrywa panel miniaturek (gdy Pora równa 0). void AktywujPoreRoku(int Pora) { 12

13 // Ustawia ścieżki do miniaturek obrazków oraz opisy do nich. void AktywujMiesiace(int Start) { // Ustawia ścieżkę i opis do dużego obrazka wybranego miesiąca. void PokazMiesiac(string SciezkaObrazka, string Opis) { Jak widać, logika działania podzielona jest na trzy metody. Rozpoczniemy od wykorzystania pierwszej z nich AktywujPoreRoku. W tym celu dla kontrolki LBtnPora1 dodaj obsługę zdarzenia Click i wpisz wywołanie tej metody, z parametrem 1. Podobną obsługę dodaj dla kontrolek LBtnPora2, LBtnPora3 i LBtnPora4. Dzięki temu klikanie w nazwy pór roku będzie wyświetlać odpowiednie miniaturki zdjęć. Natomiast dla kontrolki LBtnZwin w obsłudze zdarzenia Click wpisz wywołanie metody z parametrem 0 będzie to ukrywać wszystkie miniaturki. Przykład 18. Obsługa zdarzeń dla wyboru pór roku void LBtnPora1_Click(object sender, EventArgs e) { AktywujPoreRoku(1); void LBtnPora2_Click(object sender, EventArgs e) { AktywujPoreRoku(2); void LBtnPora3_Click(object sender, EventArgs e) { AktywujPoreRoku(3); void LBtnPora4_Click(object sender, EventArgs e) { AktywujPoreRoku(4); void LBtnZwin_Click(object sender, EventArgs e) { AktywujPoreRoku(0); Drugą część stanowi wyświetlanie obrazka w pełnym rozmiarze, w reakcji na kliknięcie w miniaturkę lub podpis pod nią. Odpowiada za to metoda PokazMiesiac. W tym celu dla kontrolki LBtnMiesiac1 stwórz obsługę zdarzenia Click i wpisz wywołanie tej metody, podając odczytaną z miniaturki ścieżkę do obrazka oraz opis z kontrolki pod nią. Metoda 13

14 PokazMiesiac zamieni podaną ścieżkę na ścieżkę do dużego obrazka i wpisze ją do kontrolki ImgFoto, a podany opis skopiuje do etykietki LabMiesiac poniżej. Podobną obsługę zdarzeń Click stwórz także dla kontrolek LBtnMiesiac2 i LBtnMiesiac3. Pozostaje tylko pytanie, co z kontrolkami ImbMini1 ImbMini3? Ponieważ mają one robić to samo, co kontrolki LinkButton, najłatwiej będzie wywoływać samodzielnie obsługę odpowiednich zdarzeń Click. W ten sposób zamiast kopiować wywołanie metody PokazMiesiac, sterowanie zostanie przekazane z jednej metody obsługi zdarzenia do drugiej. Dopiero tam będzie umieszczone właściwe wywołanie metody PokazMiesiac. Takie rozwiązanie będzie ponadto zgodne z regułą DRY. Obsługa zdarzenia Click dla kontrolki LBtnPowrot będzie wyjątkowo dwulinijkowa. Chodzi tu bowiem tylko o ukrycie panelu z dużym zdjęciem, a pokazanie panelu z miniaturkami. Dociekliwi mogą także zauważyć, że drugi parametr przekazywany przy wywołaniu będzie ustawiany na null, jak np. przy LBtnMiesiac1_Click(sender, null);. Można tak zrobić, ponieważ nie jest on wykorzystywany, ale przede wszystkim dlatego, że obiekty przenoszące informację o zdarzeniach Click kontrolek LinkButton i ImageButton są różne (EventArgs dla LinkButton, zaś ImageClickEventArgs dla ImageButton). Przykład 19. Obsługa zdarzeń dla wyboru miesięcy void LBtnMiesiac1_Click(object sender, EventArgs e) { PokazMiesiac(ImbMini1.ImageUrl, LBtnMiesiac1.Text); void LBtnMiesiac2_Click(object sender, EventArgs e) { PokazMiesiac(ImbMini2.ImageUrl, LBtnMiesiac2.Text); void LBtnMiesiac3_Click(object sender, EventArgs e) { PokazMiesiac(ImbMini3.ImageUrl, LBtnMiesiac3.Text); void ImbMini1_Click(object sender, ImageClickEventArgs e) { LBtnMiesiac1_Click(sender, null); void ImbMini2_Click(object sender, ImageClickEventArgs e) { 14

15 LBtnMiesiac2_Click(sender, null); void ImbMini3_Click(object sender, ImageClickEventArgs e) { LBtnMiesiac3_Click(sender, null); void LBtnPowrot_Click(object sender, EventArgs e) { PanelFoto.Visible = false; PanelMini.Visible = true; 5.4. Logika zmiany wyglądu strony Pora na wstawienie treści metody pokazującej miniaturki zdjęć dla wybranej pory roku. Wykorzystamy tu ciekawe rozwiązanie uchwyty kontrolek LinkButton umieszczone będą w tablicy. Pozwoli to na proste wyłączenie pogrubienia wszystkich linków w pętli for oraz na ustawienie pogrubienia dla aktywnej pory roku. W tym celu wystarczy jedna linia kodu to również jest zastosowanie reguły DRY. Jeśli przekazany będzie numer pory roku od 1 do 4, wywołana zostanie metoda AktywujMiesiace, z podaniem numeru pierwszego miesiąca dla tej pory, pomniejszonego o 1 (czyli: wiosna 0, lato 3, jesień 6, zima 9). Jeśli zaś numer pory roku będzie równy 0, panele z miniaturkami oraz ze zdjęciem zostaną ukryte (kliknięcie w kontrolkę LBtnZwin). Przykład 20. Reakcja na kliknięcie w nazwę pory roku void AktywujPoreRoku(int Pora) { LinkButton[] Linki = { LBtnPora1, LBtnPora2, LBtnPora3, LBtnPora4 ; // Wyłączenie pogrubienia wszystkim linkom 15

16 for (int i = 0; i < Linki.Length; i++) Linki[i].Font.Bold = false; // Opcjonalne włączenie pogrubienia wybranego linku if ((Pora >= 1) && (Pora <= Linki.Length)) { Linki[Pora - 1].Font.Bold = true; AktywujMiesiace((Pora - 1) * 3); else { PanelMini.Visible = false; PanelFoto.Visible = false; Zajmiemy się teraz metodą pokazującą żądane miniaturki. Potrzebne tu informacje będą ponownie umieszczone w tablicach. Tablica Miesiące jest kluczowa dla działania całej strony. Jest to dwuwymiarowa tablica, przechowująca 12 par napisów nazwy plików miniaturek oraz nazwy miesięcy. Mimo że bardzo podobne, nazwy te nie są takie same. Z nazw plików z rozmysłem zostały usunięte polskie znaki, aby pozbyć się problemu wyboru kodowania. Natomiast w nazwach miesięcy polskie znaki zostały zachowane (gdyż będą wyświetlane na stronie). Rozpoczynając od podanego indeksu Start (równego 0, 3, 6 lub 9), trzy pary danych będą kopiowane z tej tablicy do kontrolek umieszczonych w tablicach Obrazki i Opisy. Dokładnie to robi poniższa pętla for zmienia ścieżkę do pliku z miniaturką (dodając nazwę katalogu "mini/") oraz podpis (nazwę miesiąca), na końcu odpowiednio ustawiana jest widoczność paneli. Przykład 21. Wyświetlenie miniaturek zdjęć dla miesięcy void AktywujMiesiace(int Start) { string[][] Miesiace = { new string[] {"mini_marzec.gif", new string[] {"mini_kwiecien.gif", new string[] {"mini_maj.gif", "marzec", "kwiecień", "maj", new string[] {"mini_czerwiec.gif", new string[] {"mini_lipiec.gif", new string[] {"mini_sierpien.gif", "czerwiec", "lipiec", "sierpień", 16

17 new string[] {"mini_wrzesien.gif", "wrzesień", new string[] {"mini_pazdziernik.gif", "październik", new string[] {"mini_listopad.gif", "listopad", ; new string[] {"mini_grudzien.gif", new string[] {"mini_styczen.gif", new string[] {"mini_luty.gif", "grudzień", "styczeń", "luty", ImageButton[] Obrazki = { ImbMini1, ImbMini2, ImbMini3 ; LinkButton[] Opisy = { LBtnMiesiac1, LBtnMiesiac2, LBtnMiesiac3 ; // Ustawienie ścieżek do miniaturek oraz nazw miesięcy w opisach for (int i = 0; i < Obrazki.Length; i++) { string NazwaPliku = Miesiace[Start + i][0]; string Opis = Miesiace[Start + i][1]; Obrazki[i].ImageUrl = "mini/" + NazwaPliku; Opisy[i].Text = Opis; PanelMini.Visible = true; PanelFoto.Visible = false; Trzecia z metod PokazMiesiac korzysta z informacji zapamiętanych w kontrolkach (ścieżka do miniaturki oraz podpis) w celu stworzenia ścieżki do dużego zdjęcia dla kontrolki ImgFoto oraz opisu dla etykietki LabMiesiac. Wykorzystana jest tu wiedza o tym, że wszystkie miniaturki znajdują się w podkatalogu mini, a zdjęcia w podkatalogu foto, oraz że pliki mają charakterystyczne nazwy. W ten sposób nazwa do zdjęcia tworzona jest przez odrzucenie 10 początkowych znaków mini/mini_ oraz rozszerzenia.gif i dołączenia do wynikowego napisu (czyli miesiąca) nazwy podkatalogu foto/ oraz rozszerzenia.jpg. Wykorzystane są tutaj metody klasy string: Substring() oraz LastIndexOf(). Na końcu odpowiednio ustawiana jest widoczność paneli. Przykład 22. Wyświetlenie miniaturek zdjęć dla miesięcy void PokazMiesiac(string SciezkaObrazka, string Opis) { int Poz = SciezkaObrazka.LastIndexOf(".gif"); string NazwaPliku = SciezkaObrazka.Substring(10, Poz - 10); ImgFoto.ImageUrl = "foto/" + NazwaPliku + ".jpg"; LabMiesiac.Text = Opis; 17

18 PanelMini.Visible = false; PanelFoto.Visible = true; Jeśli wszystko dobrze poszło, czyli kod został poprawnie wpisany, wszystkie zdarzenia są odpowiednio dodane do kontrolek i zgadzają się ścieżki do obrazków, to strona jest skończona! Powstałe rozwiązanie polega na rozsądnym uniknięciu zbędnego powtarzania kodu, przekazywaniu istotnych parametrów do metod oraz zorganizowaniu przetwarzanych danych w tablice. Taki sposób tworzenia strony ASP.NET kładzie nacisk na przemyślane rozwiązanie problemu, a niekoniecznie na szybkie pisanie dużej ilości po prostu działającego kodu niskiej jakości. Warto o tym pamiętać. 18