W poprzedniej części kursu ASP.NET przedstawiliśmy Państwu podstawowe informacje związane z technologią Microsoft .NET i platformą .NET Framework. Niniejsza część jest poświęcona tworzeniu stron Web Forms - czyli interfejsu użytkownika każdej aplikacji internetowej korzystającej z ASP.NET.

Łyk historii. Dlaczego ASP.NET?

We wczesnych początkach Internetu wszystkie witryny webowe składały się jedynie ze statycznych, niemal wyłącznie tekstowych, stron napisanych w języku HTML. Mimo że rozwiązanie to całkiem dobrze nadawało się do przekazywania informacji - nawet dość dużych ich ilości - to nie zapewniało interaktywności niezbędnej do tworzenia bardziej zaawansowanych serwisów. Sklepy internetowe, serwisy aukcyjne, forum pozwalające budować społeczność czytelników wokół witryny czy nawet prosty licznik odwiedzin - wszystkie te zastosowania wymagają aby serwer był w stanie dynamicznie odpowiedzieć na różnorodne akcje użytkowników.

Stopień interaktywności witryny internetowej może być bardzo różny. Działanie licznika odwiedzin sprowadza się do zapamiętania na serwerze (w bazie danych lub zwykłym pliku tekstowym) pojedynczej liczby, zwiększenia jej przy każdym odwołaniu do związanej z licznikiem strony i wyświetlenia aktualnej wartości. Na drugim biegunie interaktywności znajdują się ogromne i złożone serwisy - takie jak na przykład MSN.com, Amazon.com czy choćby korporacyjna witryna Microsoft.com. Perełki oprogramowania internetowego łączą w sobie funkcjonalność e-commerce, pełną personalizację pozwalajacą na dostosowywanie się witryny do upodobań odwiedzającego, elementy związane z budowaniem społeczności użytkowników, rozwiązania analityczne pozwalające autorom serwisu śledzić preferencje klientów i wiele innych składników.

CGI

Wszystkie wymienione powyżej elementy łączy ze sobą jedno - wymagają pewnego wsparcia ze strony platformy serwerowej. Interaktywność strony internetowej jest niemal nierozerwalnie związana ze skryptami lub programami działającymi na serwerze internetowym. Pierwsze tego typu rozwiązania były oparte na skryptach lub programach CGI. Serwer internetowy był w stanie uruchomić zewnętrzny proces - np. interpreter skryptu (np. Perl) lub dedykowany program napisany w języku takim jak C. Wyniki działania tego programu (czyli po prostu tekst wypisywany przezeń na standardowym wyjściu) były przechwytywane przez serwer internetowy i przesyłane do przeglądarki klienta.

Technologia CGI miała wiele wad. Główną z nich była niska wydajność i jeszcze mniejsza skalowalność. Każde rządanie obsługiwane przez serwer wymagało uruchomienia w systemie operacyjnym oddzielnego procesu, co jest zadaniem bardzo kosztownym. Bardzo utrudnione było zarządzanie stanem aplikacji, czyli powiązaniami pomiędzy poszczególnymi akcjami użytkownika - w praktyce każde rozwiązanie oparte na CGI rozwiązywało ten problem we własny sposób. Wszelkie zmiany na stronie internetowej wymagały modyfikacji skryptu lub wręcz - w przypadku dedykowanych programów CGI - ich rekompilacji. Wszystko to razem zmusiło programistów Web do poszukiwania nowych rozwiązań.

PHP i ASP

CGI jest używane w wielu witrynach do dziś, jednakże w przypadku nowo tworzonych serwisów zostało niemal całkowicie wyparte przez nowszą generację języków skryptowych, takich jak ASP lub PHP. Ich główną cechą jest specyficzny sposób generowania dynamicznej treści - kod odpowiedzialny za to zadanie jest umieszczony bezpośrednio w treści strony internetowej i wykonywany podczas jej przetwarzania przed wysłaniem do przeglądarki klienta. Przykładowo, umieszczenie w kodzie strony internetowej ASP linii Dzisiaj jest: <% response.Write Date() %> spowoduje wygenerowanie tekstu "Dzisiaj jest: 2003-09-22" - oczywiście z wstawioną aktualną datą. Na tej samej zasadzie działa technologia PHP.

Na pierwszy rzut oka widać wyższość powyższego podejścia nad starą technologią CGI. Żadnych zewnętrznych skryptów lub programów, a kod przetwarzany jest przez specjalny moduł działający w wydzielonym lub tym samym procesie systemu operacyjnego, co serwer internetowy - znacznie zwiększa to wydajność i skalowalność takiego rozwiązania. W niewielkich serwisach umieszczenie kodu w tym samym miejscu, co źródło strony w języku HTML jest rozwiązaniem bardzo wygodnym i pozytywnie wpływającym na komfort pracy. Zarówno PHP jak i ASP dysponują bardzo bogatymi bibliotekami funkcji pozwalających m. in. na dostęp do bazy danych, wysyłanie poczty, stosowanie technik krytpograficznych itp.

Pomimo swojej prostoty (a częściowo także i z jej przyczyny) rozwiązania te mają jednak pewne wady. Najważnieszą z nich jest jednocześnie największa ich zaleta - wymieszanie kodu specyficznego dla języka (PHP lub VBScript/JScript w ASP) z kodem HTML. Koncepcja ta sprawdza się doskonale w przypadku niewielkich witryn, jednakże wraz ze wzrostem komplikacji tworzonego systemu przestaje być ona zaletą a staje się przeszkodą. Kod strony zaczyna przypominać talerz spaghetti, w którym język HTML jest wymieszany z kodem PHP/ASP, a nierzadko także i z zapytaniami SQL. Autor niniejszego kursu spotkał się kiedyś ze skryptem, który z poziomu języka PHP generował zapytanie SQL do bazy danych, na podstawie którego były tworzone instrukcje JavaScript dla skryptu działającego po stronie klienta - który z kolei generował kod HTML! Wszystko po to, aby wyświetlić na stronie internetowej rozwijane menu, którego pozycje pochodziły z tabeli zapisanej w bazie danych. I choć strona ta całkiem dobrze funkcjonowała, to nietrudno wyobrazić sobie potencjalne kłopoty przy wprowadzaniu do niej zmian.

ASP.NET

Zarówno PHP jak i ASP pozwalają w pewnym zakresie na modularyzację kodu, a nawet na programowanie obiektowe. Nie są to jednak rozwiązania w jakiś sposób preferowane przez te środowiska - ich wykorzystanie jest dość trudne, a funkcjonalność ograniczona. Klasa w języku PHP lub ASP jest w dalszym ciągu skryptem, a PHP nie pozwala nawet na ukrywanie szczegółów implementacji w jej wnętrzu - wszystkie atrybuty i metody klasy są publiczne (więcej informacji o klasach i programowaniu obiektowym pojawi się w trzeciej części kursu). Odpowiedzią na te i inne problemy jest ASP.NET - w pełni obiektowe środowisko tworzenia dynamicznych aplikacji internetowych. W niniejszym odcinku pokażemy jak można tworzyć proste aplikacjie ASP.NET i w jaki sposób technologia ta pozwala na odseparowanie wizualnej części strony od kodu odpowiedzialnego za jej interaktywne elementy.

Projekty aplikacji WWW w Visual Studio .NET

Tworzenie aplikacji ASP.NET rozpoczniemy od wygenerowania nowego, pustego projektu. Przy standardowych ustawieniach, po uruchomieniu Visual Studio .NET widoczna jest strona startowa zawierająca m.in. listę ostatnio otwieranych projektów. Aby utworzyć nowy projekt, należy kliknąć przycisk New Project znajdujący się poniżej. W oknie dialogowym New Project należy wprowadzić nazwę nowo tworzonej aplikacji - tutaj cz2. Czytelnicy, którzy wykonali ćwiczenia z poprzedniej części kursu, mają już na swoim serwerze internetowym wirtualny katalog o nazwie kursASP i mogą swój nowy projekt umieścić w jego wnętrzu - jak widać na poniższym rysunku (\\goofy - to nazwa serwera na którym przygotowywano niniejszy kurs). Należy jeszcze pamiętać o wybraniu typu projektu - Visual C# lub Visual Basic - oraz szablonu (ang. Template) o nazwie ASP.NET Web Application. Następnie można już kliknąć przycisk OK.

Jeżeli wszystko pójdzie dobrze, to najprawdopodobniej... pojawi się okienko z informacją o błędzie, jak na rysunku poniżej. Dzieje się tak dlatego, że Visual Studio .NET generując nową aplikację webową próbuje utworzyć dla niej folder i skopiować do niego kilka podstawowych plików. Domyślnie, Visual Studio .NET przyjmuje za lokalizację dla nowych projektów ścieżkę sieciową \\serwer\wwwroot$\katalog_aplikacji, która odpowiada katalogowi c:\inetpub\wwwroot\katalog_aplikacji na serwerze internetowym. W naszym przypadku pliki kursu umieściliśmy w wygodniejszym w użyciu katalogu c:\kursASP. Aby środowisko Visual Studio .NET mogło odszukać katalog dla nowej aplikacji, należy udostępnić katalog c:\kursASP (pamiętając o nadaniu sobie pełnych uprawnień) lub - jeżeli serwer internetowy jest zainstalowany na komputerze lokalnym - zamiast ścieżki sieciowej wpisać po prostu ścieżkę do katalogu na dysku twardym. W pierwszym przypadku w polu Location należy wpisać ścieżkę typu \\serwer\kursASP\cz2, a w drugim - po prostu c:\kursASP\cz2.

Po utworzeniu nowej aplikacji w głównym oknie środowiska Visual Studio .NET pojawi się pusty edytor nowej strony ASP.NET oraz innych kilka elementów środowiska programistycznego, z którymi warto się w tym momencie zapoznać.

1. Edytor. W tym miejscu jest wyświetlana zawartość edytowanego elementu - strony internetowej, pliku z kodem, tabeli bazy danych itp.
2. Zakładki palet narzędzi. Po przesunięciu kursora myszy nad jedną z tych zakładek pojawiają się palety zawierające różne narzędzia projektowe. Po wyświetleniu palety można ją dla wygody zablokować na ekranie klikając na ikonę pinezki umieszczoną w prawym górnym jej narożniku. Narzędzia są pogrupowane - w tej części kursu będziemy korzystali z grup Web Forms i HTML.
3. Eksplorator projektu. Tutaj wyświetlane jest drzewo projektu, zawierające wszystkie składające się na projekt pliki, umieszczone w różnych folderach, oraz inne dodatkowe informacje.
4. Właściwości. Tabela zawierająca zbiór atrybutów i ich wartości specyficznych dla obiektu wybranego w edytorze lub eksploratorze projektu.
5. Paski przycisków. Zestaw dostępnych przycisków zmienia się kontekstowo w zależności od zawartości i trybu pracy edytora.

Saper.NET

Aplikacją, którą będziemy budować w aktualnym i kolejnym odcinku kursu, jest internetowa wersja dobrze wszystkim znanej gry Saper. Nie potrzeba raczej w tym miejscu przypominać jej reguł, czytelnicy mogą ją sami znaleźć w folderze Gry w menu Start i poddać drobiazgowej obserwacji. Będziemy chcieli, żeby nasza aplikacja replikowała działanie Sapera i pozwalała na wybór rozmiaru planszy i liczby ukrytych na niej min. Na końcu tego odcinka kursu można znaleźć link do działającej wersji Sapera.NET - warto w tym momencie obejrzeć tą aplikację, ponieważ znajomość efektu końcowego może znacznie pomóc przy analizowaniu przykładów.

Aplikacje internetowe mają pewne ograniczenia - jednym z nich jest brak obsługi prawego klawisza myszy. Oczywiście istnieją sztuczki, które pozwalają na dowolne jego oprogramowanie, jednakże wykraczają one poza zakres niniejszego kursu. Windowsowy Saper korzysta z prawego klawisza myszy do oznaczania pól na których może znajdować się mina - my będziemy musieli poradzić sobie inaczej, tworząc w tym celu w każdym polu planszy dodatkowy przycisk. Poza tym jednym wyjątkiem nasz Saper.NET będzie działał zupełnie tak samo, jak w wersji dołączonej do systemu.

Pierwszą czynnością, jaką należy wykonać przy tworzeniu nowej aplikacji, jest zmiana nazwy domyślnie otwartej, pustej strony WebForm1.aspx. W tym celu należy wybrać ją w Eksploratorze projektu (Solution Explorer), a następnie w panelu Właściwości (Properties) zmienić wartość wpisu File Name - w tym przypadku na Saper.aspx. Po kliknięciu w obszarze edytora strony można ponadto zmienić w polu Właściwości wartość jej atrybutu Title, odpowiadającego za tytuł strony wyświetlany na belce tytułowej przeglądarki.

Z każdą stroną ASP.NET jest związana tzw. klasa strony. Więcej informacji na ten temat będzie można znaleźć w kolejnej części kursu, w tej chwili warto jednak wiedzieć, że klasa strony jest miejscem, w którym oprogramowuje się logikę jej działania, oraz że posiada ona swoją nazwę. Ponieważ zmieniliśmy nazwę pliku strony na Saper.aspx, to chcielibyśmy także, aby za tą zmianą nadążyła też związana z nią klasa. Nie jest to konieczne, ale warto tego pilnować dla utrzymania porządku. Aby zmienić nazwę klasy strony, należy kliknąć na zakładkę Class View (Widok klas) znajdującą się pod Eksploratorem Projektu, rozwinąć drzewo klas tak, aby widoczna była klasa WebForm1, wybrać ją, a następnie zmodyfikować wartość wpisu (Name) w panelu Właściwości. Na potrzeby naszego projektu należy wpisać nazwę frmSaper.

Interfejs użytkownika

Tworzenie aplikacji zaczniemy od narysowania jej interfejsu. Będzie się on składał z dwóch paneli - górnego pozwalającego na wybranie parametrów gry i dolnego zawierajacego planszę i informację o liczbie pozostałych min. Dolny panel będzie domyślnie ukryty, wyświetlany będzie jedynie po wprowadzeniu prawidłowych parametrów.

Interfejs stron ASP.NET może być tworzony na dwa sposoby: w trybie siatki (Grid Layout) lub strumienia tekstu (Flow Layout). W pierwszym trybie projektant ma precyzyjną kontrolę nad lokalizacją poszczególnych elementów interfejsu użytkownika i ich nakładaniem się. Drugi tryb jest bardziej znany większości osób które miały już do czynienia z tworzeniem stron internetowych i przypomina sposób działania edytora tekstu - strona składa się z elementów umieszczonych jeden za drugim, pogrupowanych w formie kolejnych akapitów. Aby zmienić układ strony należy kliknąć jej tło, a następnie wybrać odpowiednią wartość jej właściwości pageLayout. Najczęściej używaną i najbardziej przydatną opcją jest Flow Layout, jednakże z niewiadomych przyczyn domyślnym ustawieniem w Visual Studio .NET jest tryb siatki - Grid Layout. Z tego powodu w większości przypadków przestawienie tego atrybutu jest pierwszą czynnością wykonywaną poczas projektowania strony - tak będzie i tym razem.

Po wybraniu układu strony, projektant nie musi się cały czas sztywno tego wyboru trzymać. W sytuacji, gdy wygodne jest skorzystanie w pewnym fragmencie strony z innego układu, niż zastosowany dla niej całej, można skorzystać z kontrolek Flow Layout Panel i Grid Layout Panel znajdujących sie na palecie HTML. Kontrolki te włączają alternatywny układ strony w ściśle wydzielonym jej obszarze. W edytorze można łatwo rozróżnić obydwa rodzaje układów strony: elementy korzystające z trybu siatki oznaczone są drobną, regularną siateczką punktów. Widać to dobrze na poniższym rysunku.

Następnie należy za pomocą edytora umieścić na stronie pozostałe elementy interfejsu, jak pokazano na rysunku. Po wskazaniu kursorem myszy poszczególnych elementów można dowiedzieć się, jakiego typu kontrolki zostały wybrane z palety narzędzi. W poniższej tabeli znajduje się lista kontrolek i atrybutów, które należy dla nich ustawić w panelu Właściwości.

Logika strony

Po zakończeniu projektowania interfejsu użytkownika konieczne jest oprogramowanie zależności pomiędzy znajdującymi się na niej elementami i możliwych interakcji. Jak już napisano wyżej, Visual Studio .NET przypisuje każdej stronie ASP.NET odpowiadającą jej klasę strony. Klasa ta jest fragmentem kodu w języku wysokiego poziomu, takiego jak C# lub Visual Basic .NET i znajduje się w pliku o nazwie takiej samej jak nazwa pliku strony, z dołączonym rozszerzeniem .cs lub .vb. Angielskojęzyczne publikacje określają plik klasy terminem code-behind, czyli kod ukryty.

Plik z kodem ukrytym nie jest wyświetlany w Eksploratorze projektu - Visual Studio .NET zarządza plikiem strony i plikiem związanej z nim klasy jako jedną całością. Zmiany wprowadzane w projekcie strony - np. dodanie lub usunięcie kontrolki - są automatycznie odzwierciedlane w kodzie klasy. Aby wyświetlić kod klasy, należy kliknąć prawym przyciskiem myszy nazwę strony ASP.NET (tutaj Saper.aspx) w Eksploratorze projektu i wybrać polecenie View Code lub kliknąć przycisk View Code znajdujący się nad drzewem projektu. Plik z kodem ukrytym zostanie wyświetlony także po dodaniu procedury obsługi zdarzenia za pomocą panelu Właściwości przypisanego do którejś z kontrolek umieszczonych na stronie. Skorzystamy teraz z tej drugiej metody.

Pierwszy fragment kodu, który powstanie w tej części kursu będzie związany z walidacją wprowadzanych przez użytkownika parametrów gry. Kontrolki typu Validator świetnie sobie radzą ze sprawdzaniem danych w polach txtKolumny i txtWiersze - można to sprawdzić już teraz, uruchamiając aplikację (w tym celu należy wybrać polecenie Start z menu Debug lub po prostu nacisnać F5). Mimo że nie napisaliśmy jeszcze żadnej linijki kodu, to pola te są już zabezpieczone przed nieprawidłowymi danymi - wpuszczają jedynie wartości liczbowe z zadanego przedziału i nie pozwalają na pozostawienie ich pustych.

W przypadku pola txtMiny sytuacja nie jest już tak prosta. Jaka jest maksymalna liczba min jaką można umieścić na planszy? Oczywiście zależy ona od jej rozmiaru. W naszej grze wartość ta będzie wyliczana z wzoru: maksymalna liczba min = liczba wierszy x liczba kolumn x 0,3. Ponieważ wartość pola txtMiny jest sprawdzana przez walidator valMiny, to musimy w jakiś sposób określić jego parametry - maksymalną liczbę min i treść komunikatu o błędzie - na podstawie wprowadzonych przez użytkownika rozmiarów planszy.

Aby rozwiązać opisany powyżej problem musimy skorzystać z koncepcji zdarzenia. W technologii ASP.NET wszystko co się dzieje ze stroną jest związane ze zdarzeniami - kliknięcie użytkownika na przycisk powoduje wygenerowanie wywołanie na serwerze internetowym odpowiedniego zdarzenia. Początek lub zakończenie generowania strony powoduje wywołanie zdarzenia. I tak dalej. Z każdym występującym na serwerze zdarzeniem może zostać powiązany fragment kodu, czyli podprogram, który w jakiś sposób może je obsłużyć - na przykład zdarzenie kliknięcie przycisku przez użytkownika może uruchomić kod odpowiedzialny za wygenerowanie i wyświetlenie planszy do gry Saper. Jednym z pierwszych zdarzeń występujących w czasie obsługi żądania wygenerowania strony ASP.NET jest zdarzenie Load - występuje ono zawsze, jeszcze przed obsługą zdarzeń związanych z interakcją użytkownika lub walidacją kontrolek na stronie. Z tego powodu będzie ono doskonałym miejscem na określenie parametrów walidacji pola txtMiny.

Aby utworzyć procedurę obsługi zdarzenia Load związanego z klasą frmSaper, należy wybrać tę klasę z pola rozwijanego znajdującego się na górze panelu Właściwości i kliknąć ikonkę Events (Zdarzenia) oznaczoną żółtą błyskawicą. W miejsce listy właściwości pojawi się lista zdarzeń związanych z wybraną klasą. Należy odszukać na niej zdarzenie Load i kliknąć je dwukrotnie. Zostanie wyświetlona zawartość pliku Saper.aspx.cs, z kursorem ustawionym na początku procedury obsługi zdarzenia Load. Działanie walidatora valMiny zmodyfikujemy wpisując następujący kod (linie zaczynające się od znaków // zawierają komentarz):

// Parametry walidatora valMiny będziemy ustalać jedynie, gdy liczba wierszy i kolumn planszy // została uprzednio ustalona. if jest instrukcja warunkową - fragment kodu pomiędzy // nawiasami klamrowymi {...} zostanie wykonany jedynie gdy warunek umieszczony w nawiasie () // będzie spełniony. Zapis != oznacza "różne niż", natomiast && - oznacza "i" - stąd // cała poniższa linia oznacza "gdy pola txtKolumny i txtWiersze nie są puste, wykonaj {}"
if(txtKolumny.Text != "" && txtWiersze.Text != "")
{

	// w polach txtKolumny i txtWiersze mamy wartości tekstowe, więc konieczna jest kowersja // na wartość liczbową (typ int, jak integer - czyli liczba całkowita)
	int Kolumny = Convert.ToInt32(txtKolumny.Text);
	int Wiersze = Convert.ToInt32(txtWiersze.Text);
	// Po przemnożeniu przez ułamek 0.3 również konieczna jest konwersja na liczbę całkowitą
	int MaxLMin = Convert.ToInt32(Kolumny * Wiersze * 0.3);
	
	// Ustawiamy wartość maksymalną dla walidatora valMiny, sprawdzając dodatkowo, // czy nie jest ona mniejsza od wartości minimalnej
	if(MaxLMin > Convert.ToInt32(valMiny.MinimumValue))
		valMiny.MaximumValue = MaxLMin.ToString();
	
	// Ustawiamy treść komunikatu o błędzie dla walidatora valMiny
	valMiny.ErrorMessage = String.Format("Tylko liczby od 10 do {0}!", MaxLMin);

	// Metoda String.Format pozwala na tworzenie tekstów składających się ze stałych // fragmentów uzupełnionych o wartości różnych zmiennych. W nawiasach klamrowych // podaje się nr parametru (licząc od 0), który ma zostać w to miejsce wklejony.
}

Skoro dane wprowadzane przez użytkownika już są sprawdzone, to w dalszej kolejności należy zatroszczyć się o wygenerowanie na ich podstawie planszy do gry. Procedurę za to odpowiedzialną podczepimy do zdarzenia Click przycisku Nowa gra. W tym celu należy wrócić do edytora strony (korzystając z zakładki w górnej części edytora) i dwukrotnie kliknąć ten przycisk. W treści funkcji btnNowaGra_Click należy wpisać następujący kod:

// Planszę generujemy tylko, jeżeli wszystkie pola na stronie są prawidłowo wypełnione. // Informację tą można odczytać z atrybutu IsValid, należącego do klasy strony - stąd odwołanie // this, odnoszące się właśnie do bieżącej klasy.
if(this.IsValid)
{
	// Wyświetlamy panel z grą.
	pnlGra.Visible = true;
	// Wpisujemy liczbę min do etykiety zawierającej liczbę pozostałych min.
	lblLiczbaMin.Text = txtMiny.Text;
	// Wywołujemy funkcję generującą planszę.
	Plansza();
}
else
{
	// W przeciwnym wypadku, czyli gdy wprowadzono błędne dane - ukrywamy panel z grą.
	pnlGra.Visible = false;
}

Na tym etapie naszej aplikacji nie da się uruchomić - brakuje funkcji Plansza(), której zadaniem jest wygenerowanie pola minowego o zadanych parametrach. W kontekście niniejszego kursu jej zadanie jest nie mniej ważne: funkcja ta demonstruje jak można tworzyć kontrolki HTML "w locie", tzn. programowo, wewnątrz działającej już aplikacji, bez uprzedniego umieszczania ich na stronie za pomocą edytora.

// Funkcję Plansza() dodajemy wewnątrz klasy frmSaper, ale na zewnątrz innych funcji w tej klasie.
private void Plansza()
{
	// Czyścimy aktualną zawartość planszy
	tblPoleMinowe.Rows.Clear();
	// Pobieramy liczbę wierszy i kolumn.
	int Kolumny = Convert.ToInt32(txtKolumny.Text);
	int Wiersze = Convert.ToInt32(txtWiersze.Text);
	// Zmienne x i y przydadzą nam się do określania współrzędnych pola planszy.
	int y = 0;
	// Ta pętla dodaje wiersze do tabeli tblPoleMinowe tak długo, jak długo jest ich mniej // niż chciał użytkownik.
	while(tblPoleMinowe.Rows.Count < Wiersze)
	{
		int x = 0;
		// Tworzymy nowy wiersz tabeli. Wiesz też jest kontrolką!
		TableRow nowyWiersz = new TableRow();
		// Dodajemy go do tabeli.
		tblPoleMinowe.Rows.Add(nowyWiersz);
		// Ta pętla dodaje komórki do nowego wiersza tak długo, jak długo jest ich mniej // niż chciał użytkownik.
		while(tblPoleMinowe.Rows[tblPoleMinowe.Rows.Count-1].Cells.Count < Kolumny)
		{
			// Tworzymy nową komórkę tabeli. Ona też jest kontrolką!
			TableCell nowaKomorka = new TableCell();
			// Dodajemy ją do nowego wiersza
			tblPoleMinowe.Rows[tblPoleMinowe.Rows.Count-1].Cells.Add(nowaKomorka);

			// Tworzymy nowy przycisk - sprawdzający czy komórka jest zaminowana
			Button nowyPrzycisk = new Button();
			// Dodajemy go do utworzonej przed chwilą komórki
			nowaKomorka.Controls.Add(nowyPrzycisk);
			// Wysokość, szerokość, tekstu na przycisku brak...
			nowyPrzycisk.Width = 10;
			nowyPrzycisk.Height = 20;
			nowyPrzycisk.Text = "";
			// Przycisk nie bierze udziału w kontroli sprawdzania poprawności danych
			nowyPrzycisk.CausesValidation = false;
			// Stan przycisku nie będzie pamiętany przez mechanizmy ASP.NET
			nowyPrzycisk.EnableViewState = false;
			// Naciśnięcie przycisku spowoduje wykonanie komendy "Sprawdz"
			nowyPrzycisk.CommandName = "Sprawdz";
			// Parametrami tej komendy będą współrzędne przycisku
			nowyPrzycisk.CommandArgument = String.Format("{0},{1}", x, y);
			// A obsłuży ją procedura obsługi zdarzenia btnPole_Command()
			nowyPrzycisk.Command += new CommandEventHandler(btnPole_Command);

			// Podobnie jak powyżej - tworzymy nowy przycisk za pomocą którego gracz // będzie mógł oznaczyć pole jako zaminowane (w Windowsowym Saperze // tą funkcję spełniał prawy klawisz myszy).
			nowyPrzycisk = new Button();
			nowyPrzycisk.Width = 10;
			nowyPrzycisk.Height = 20;
			nowyPrzycisk.Text = "";
			nowyPrzycisk.CausesValidation = false;
			nowyPrzycisk.EnableViewState = false;
			// Naciśnięcie przycisku spowoduje wykonanie komendy "Oznacz"
			nowyPrzycisk.CommandName = "Oznacz";
			nowyPrzycisk.CommandArgument = String.Format("{0},{1}", x, y);
			nowyPrzycisk.Command += new CommandEventHandler(btnPole_Command);
			nowaKomorka.Controls.Add(nowyPrzycisk);
			// Po utworzeniu komórki tabeli zwiększamy współrzędną poziomą
			x++;
		}
		// Po utworzeniu wiersza tabeli zwiększamy współrzędną pionową
		y++;
	}
}

W tym momencie nasza gra wciąż nie będzie działać prawidłowo. Brakuje funkcji btnPole_Command, której zadaniem będzie obsługiwanie zdarzeń pochodzących od przycisków umieszczonych na planszy gry. W aktualnym odcinku kursu nie wbudujemy tutaj skomplikowanej logiki - na tą chwilę wystarczy nam rozpoznanie przypisanej przyciskowi komendy i jej parametrów - współprzędnych oraz wpisanie ich do pola Label umieszczonego poniżej planszy.

private void btnPole_Command(object sender, System.Web.UI.WebControls.CommandEventArgs e)
{
	// Wyświetlamy nazwę komendy skojarzonej z klikniętym przyciskiem i jego współrzędne.
	lblInfo.Text = String.Format("Kliknięto: {0} {1}", e.CommandName, e.CommandArgument);
}

Po uruchomieniu aplikacji czeka nas jeszcze jedna niespodzianka. Serwer prawidłowo obsługuje wpisane przez użytkownika parametry planszy, generuje ją, ale po naciśnięciu któregoś z przycisków na polu minowym... plansza znika. Dlaczego tak się dzieje? Przeanalizujmy, kiedy w cyklu życia strony tworzona jest plansza gry.

Po raz pierwszy ma to miejsce w treści funkcji btnNowaGra_Click(). Ale to zdarzenie występuje tylko raz - po kliknięciu przycisku Nowa gra. Nic dziwnego, że naciśnięcie przycisku na polu minowym powoduje ominięcie tego fragmentu kodu. Dlaczego jednak w takim razie plansza zniknęła?

Dzieje się tak z bardzo prostego powodu. W dużym uproszczeniu, obsługa żądania strony ASP.NET wygląda następująco: serwer otrzymuje żądanie od przeglądarki, wywołuje zdarzenie Load strony internetowej, a następnie wywołuje zdarzenia związane z akcjami użytkownika (kliknięcie!). Czyli, w momencie gdy strona ASP.NET mogłaby wywołać procedurę obsługi zdarzenia związaną z przyciskiem na polu minowym, to tego pola jeszcze na stronie nie ma! Nie zostało ponownie wygenerowane - a przecież trzeba to robić przy każdym odświeżeniu strony! Powoli chyba staje się jasne co trzeba zrobić - dodać wywołanie funkcji Plansza() na końcu funkcji Page_Load(), która jak juz wiemy zostanie wykonana przed obsługą zdarzeń użytkownika.

private void Page_Load(object sender, System.EventArgs e)
{
	// [...] Tutaj kod odpowiedzialny za ustalenie parametrów walidatora valMiny [...]

	// Generujemy planszę - ale tylko jeżeli gra się już zaczęła
	if(pnlGra.Visible)
		Plansza();
}

Ostatnie szlify

Tym razem wszystko powinno działać prawidłowo. Jeżeli tak nie jest, to należy jeszcze raz sprawdzić wszystkie fragmenty kodu lub pobrać archiwum zip zawierające kompletną aplikację - link na końcu kursu. Jedyne co nam pozostało to upiększyć nieco wygląd strony. W tym celu należy utworzyć nowy arkusz stylów CSS - kliknąć w Eksploratorze projektu nazwę projektu (u nas cz2) prawym przyciskiem myszy i wybrać polecenie Add - New Item. Następnie należy wskazać szablon Style Sheet i wpisać nazwę nowo tworzonego pliku - np. style.css. Więcej informacji na temat arkuszów stylów znajdzie się w jednej z kolejnych lekcji, dlatego w tym momencie podajemy jedynie przykładową zawartość i zachęcamy do eksperymentów. Po zapisaniu arkusza stylów wystarczy przeciągnąć go z Eksploratora projektu do edytora strony, ustawić atrybut CssClass etykiety lblTytul na tytul oraz tabeli tblPoleMinowe na plansza i zapisać cały projekt. Po uruchomieniu aplikacji można już cieszyć oko bardziej eleganckim jej wyglądem.

body
{
	background-color: WhiteSmoke;
	font-family: Verdana, Tahoma, Arial;
	font-size: 10pt;
}
HR
{
	height: 1px;
	color: Black;
}
.tytul
{
	font-weight: bold;
	font-size: 14pt;
}
.plansza
{
	background-color: gray;
	padding: 2px;
}

Podsumowanie

W drugiej części kursu ASP.NET przedstawiliśmy Państwu podstawy korzystania ze środowiska Visual Studio .NET, tworzenia interfejsu aplikacji webowych i zdarzeniowego programowania związanego z obsługą akcji użytkowników. Pokazaliśmy także, jak łatwo można dynamicznie tworzyć na stronie nowe kontrolki webowe i w jaki sposób się je oprogramowuje. Nasza aplikacja - Saper.NET - reaguje już na działania użytkowników i umie je w prosty sposób zinterpretować i obsłużyć, a ponadto jest niewrażliwa na błędne parametry.

Kolejna, trzecia część kursu będzie poświęcona przede wszystkim klasom. Więcej uwagi skierujemy na konstrukcje składniowe języka Visual C#, a ponadto nauczymy się tworzyć własne klasy i wykorzystywać bogatą bibliotekę klas .NET Framework. Saper.NET zyska funkcjonalność związaną z obsługą rozgrywki, a czytelnicy - mamy nadzieję - nowe, praktyczne umiejętności.

Kończąc drugą odsłonę kursu ASP.NET prosimy Czytelników o udział w dyskusji uruchomionej na forum naszego serwisu. Wszystkie Wasze uwagi będą czytane, postaramy się także odpowiedzieć na pojawiające się wątpliwości. W wątku Kurs ASP.NET opublikowany został ponadto ramowy plan dalszych części tego kursu, zachęcamy do zgłaszania własnych propozycji - plan ten może się jeszcze nieco zmienić.

Dodatek: lista kontrolek w Visual Studio .NET

Poniżej przedstawiono listę podstawowych kontrolek w Visual Studio .NET. Znajdują się na niej jedynie kontrolki związane z tworzeniem interfejsu użytkownika, czyli pochodzące z palet Web Forms oraz HTML. Pozostałe palety kontrolek będą omawiane w kolejnych częściach kursu.

Kontrolka	Opis
Paleta Web Forms
	Etykieta tekstowa
	Pole tekstowe (element formularza do wprowadzania tekstu) działające w trybie jednowierszowym, wielowierszowym i trybie wprowadzania hasła
	Przycisk
	Przycisk tekstowy (przypominający hiperłącze)
	Przycisk graficzny
	Hiperłącze (popularnie zwane 'linkiem')
	Lista rozwijana (element formularza)
	Pole listy (element formularza)
	DataGrid - tabela danych. Bardzo rozbudowana kontrolka pozwalająca na wyświetlanie i edycję dowolnych danych możliwych do przedstawienia w formie tabeli. Umożliwia m. in. sortowanie i stronicowanie danych. Jeden z odcinków kursu będzie poświęcony zasosowaniu tej i dwóch kolejnych kontrolek.
	DataList - lista, która może być wypełniona dowolnymi danymi.
	Repeater - najprostsza kontrolka pozwalająca na pracę z danymi tabelarycznymi. Umożliwia powielanie przygotowanego szablonu dla wszystkich elementów w zbiorze danych.
	Pole wyboru (element formularza).
	Umożliwia tworzenie dynamicznych list pól wyboru
	Pole opcji (element formularza).
	Umożliwia tworzenie dynamicznych list pól opcji
	Obrazek.
	Prostokątny panel umożliwiający wygodne grupowanie dowolnych kontrolek.
	Kontenter pozwalający na przechowywanie i dynamiczne tworzenie dowolnych kontrolek.
	Kalendarz.
	Kontrolka umożliwiająca cykliczne wyświetlanie zestawu reklam.
	Tabela.
	Walidator sprawdzający, czy dane pole nie jest puste.
	Walidator sprawdzający, czy wprowadzona wartość jest równa zadanej.
	Walidator sprawdzający, czy wprowadzona wartość należy do zadanego przedziału.
	Walidator sprawdzający, czy wprowadzona wartość jest zgodna z zadanym wzorcem - tzw. wyrażeniem regularnym.
	Walidator realizujący funkcję kontroli danych przygotowaną przez programistę.
	Kontrolka pozwalająca na wyświetlenie informacji - podsumowania - o wszystkich błędach w danych wprowadzonych przez użytkownika.
	Wyświetla zawartość dokumentu XML bez formatowania lub przy zastosowaniu arkusza transformacji XSLT.
	Umożliwia zarezerwowanie na stronie miejsca na wyświetlenie statycznego tekstu.
Paleta HTML
	Etykietka tekstowa - tag HTML <div>...</div>.
	Przycisk - tag HTML <input type="Button">.
	Przycisk czyszczenia zawartości forumlarza - tag HTML <input type="Reset">.
	Przycisk wysyłania formularza - tag HTML <input type="Submit">.
	Pole tekstowe - tag HTML <input type="Text">.
	Duże (kilkuwierszowe) pole tekstowe - tag HTML <textarea>...</textarea>.
	Pole pliku (umożliwia przesłanie pliku do serwera internetowego) - tag HTML <input type="File">.
	Pole hasła (pole tekstowe maskowane znakami ***) - tag HTML <input type="Password">.
	Pole wyboru - tag HTML <input type="Checkbox">.
	Pole opcji - tag HTML <input type="Radio">.
	Ukryte pole formularza - tag HTML <input type="Hidden">.
	Tabela - tag HTML <table>...</table>.
	Panel w obrębie którego obowiązuje układ strony typu "strumień tekstu" - zrealizowany jako odpowiednio sformatowany tag HTML <div>...</div>.
	Panel w obrębie którego obowiązuje układ strony typu "siatka" - zrealizowany jako odpowiednio sformatowany tag HTML <div>...</div>.
	Obrazek - tag HTML <img>.
	Pole listy - tag HTML <select size="n">...</select>, gdzie n-liczba wierszy.
	Pole rozwijane - tag HTML <select>...</select>.
	Pozioma linia oddzielająca - tag HTML <hr>.

Dodatkowe zasoby

• Działająca aplikacja Saper.NET
• Kody źródłowe projektu Saper.NET
• Więcej o cyklu życia strony ASP.NET w artykule Dino Esposito The ASP.NET Page Object Model
• Kurs ASP.NET, Część I (Podstawy .NET)

Spis treści

• Łyk historii. Dlaczego ASP.NET?
• Projekty webowe w Visual Studio .NET
• Saper.NET
• Podsumowanie
• Dodatek: lista kontrolek w Visual Studio .NET
• Dodatkowe zasoby

Autor: Michał Chaniewski