02. Gdzie te obiekty?

02. Gdzie te obiekty?

Autor: Piotr Gaszewski

Opublikowano: 12/9/2005, 12:00 AM

Liczba odsłon: 132538

W poprzedniej części kursu udało się nam stworzyć pierwszą, najprostszą stronę internetową, wykorzystując do tego środowisko programistyczne Visual Studio Web Developer 2005. W tym rozdziale postaram się natomiast wyjaśnić dokładniej zasady działania, oraz wzajemnej współpracy elementów, tworzących aplikację ASP.NET.

Przymnijmy, do tej pory udało się nam stworzyć stronę internetową zawierającą pole tekstowe, w którym domyślnie wyświetlany był napis „przykładowy tekst". Dokonaliśmy tego w prosty sposób, przeciągając wymagany przez nas element z paska narzędzi, a następnie edytując jego właściwości za pomocą okna Properties. W stworzonym przez nas projekcie Visual Studio, spróbujmy ponownie otworzyć plik Default.aspx, w trybie Source. Szybko spostrzeżemy, że dodanie przez nas pola tekstowego w trybie „Design" spowodowało pojawienie się w kodzie strony nowej linii:

<input id="Text1" type="text" value="przykładowy tekst" />

Linia ta, jak zapewnie zdążyliście się domyślić jest odpowiedzialna za wyświetlanie przez przeglądarkę pola tekstowego. W podobny sposób, przeciągając na edytowaną stronę inne elementy html, wyświetlane w pasku narzędzi możemy w prosty sposób edytować zawartość strony. W praktyce do tworzenia prostych serwisów WWW, ręczne edytowanie źródeł pliku Default.aspx, jest rzadko wymagane.

W poprzednim rozdziale kursu wspomniałem, że interaktywne strony ASP.NET tworzymy, wykorzystując obiektowy model programowania i języki, takie jak: Visual Basic .NET, C#, czy J#. W tym miejscu należy wyjaśnić pewną kwestię. Każda strona internetowa, stworzona w technologii ASP.NET składa się zasadniczo z dwóch warstw. Pierwsza z nich, jest to warstwa prezentacji i odpowiedzialna jest ona za to, co wyświetlane jest w oknie przeglądarki. Warstwa ta tworzona jest w języku xhtml i zawarta jest zazwyczaj w plikach z rozszerzeniem *.aspx. Natomiast druga warstwa jest to właściwy kod aplikacji, tworzony we wspomnianych wyżej językach i wykonywany po stronie serwera. Zerknijmy jeszcze raz na kod naszej strony Default.aspx. Pierwsza linia w pliku przedstawia się następująco:

<%@  Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

To, co nas w tym momencie interesuje, to atrybut dyrektywy “Page" o nazwie “CodeFile". Zawiera on nazwę pliku, w którym znajduje się właściwy kod odpowiedzialny za działanie strony. Jego zawartość możemy podejrzeć klikając dwukrotnie lewym przyciskiem myszy w oknie Visual Studio w trybie Design, klikając w tym samym miejscu prawym przyciskiem myszy i wybierając opcję: View Code, bądź też klikając na „plus" znajdujący się przy pliku Default.aspx w oknie Solution Explorera i otwierając pojawiający się wówczas w oknie plik o nazwie Default.aspx.cs.

Po otwarciu pliku Default.aspx.cs widzimy, że została zdefiniowana w nim jedna klasa o nazwie _Default. Klasa ta dziedziczy z klasy System.Web.UI.Page, która reprezentuje pojedynczą formatkę (czyli w praktyce stronę widzianą w oknie przeglądarki). Klasa ta, zawiera aktualnie tylko jedną metodę o nazwie „Page_Load", która uruchamiana jest przy każdym załadowaniu strony w oknie przeglądarki.

public partial class _Default : System.Web.UI.Page
{
      protected void Page_Load(object sender, EventsArgs e)
      {

      }
}

Widzimy, więc że każda tworzona przez nas formatka jest oddzielnym obiektem, działającym na serwerze. Obiekt ten tworzony jest za każdym razem, w momencie zapytania klienta do serwera, jego zadaniem jest wygenerowanie odpowiedzi dla klienta. Po wykonaniu tego zadania obiekt jest niszczony. Dlatego między innymi w obiekcie tego typu nie można przechowywać wartości jako jego właściwości, między kolejnymi wywołaniami strony.

@STRONA@

Otwórzmy ponownie w oknie środowiska programistycznego plik Default.aspx. Dotychczas, przy tworzeniu stron w technologii ASP.NET wykorzystywaliśmy kontrolkę html. Tym razem użyjemy kontrolek serwerowych. W pasku narzędzi wybierzmy grupę kontrolek „Standard". Następnie przeciągnijmy na formatkę obiekty: „Label" oraz „Buton".

Zadaniem kontrolki Label jest wyświetlanie tekstu w oknie przeglądarki. Żeby zmienić wyświetlany tekst kliknijmy na obiekcie lewym przyciskiem myszy, a następnie w oknie właściwości (Properties) zmieńmy wartość atrybutu Text. Proponuje zmienić jego wartość na: „pierwsze uruchomienie strony".

Następnie kliknijmy dwukrotnie lewym przyciskiem myszy na przycisku Button. W tym momencie zostanie ponownie otwarty plik Default.aspx.cs, gdzie wewnątrz klasy _Default, została wygenerowana nowa metoda Button1_Click. Metoda ta będzie uruchamiana w momencie naciśnięcia przez użytkownika przycisku. Załóżmy, że chcemy, aby po naciśnięciu przycisku zmieniał się tekst widoczny w przeglądarce internetowej. W tym celu musimy zmodyfikować metodę Button1_Click w następujący sposób.

protected void Button1_Click(object sender, EventsArgs e){
    this
.Label1.Text = "Właśnie nacisnąłeś przycisk!";
}

Wszystkie obiekty obecne na formatce są właściwościami naszej klasy _Default, do których mamy dostęp dzięki słowu kluczowemu „this" (jego stosowanie nie jest jednak wymagane). „Label1" jest nazwą obiektu, reprezentującego pole tekstowe, natomiast Text, zmienianą już przez nas wcześniej (z wykorzystaniem okna „Properties") polem tego obiektu.

Otwierając źródło pliku Default.aspx w edytorze Visual Studio możemy dostrzec pojawienie się nowych linii kodu:

<asp:Label ID="Label1" runat="Server" Text="Pierwsze uruchomienie strony"></asp:Label>
<asp:Buton ID="Button1" runat="Server" OnClick="Button1_Click" Text="Buton"></asp:Buton>

Najważniejszą zmianą, w porównaniu ze stosowanym poprzednio polem tekstowym html, jest obecność atrybutu runat="Server" przy obu kontrolkach. Oznacza to, że działają one po stronie serwera. Wyjaśnimy to dokładnie na przykładzie stworzonej przez nas formatki. Zdefiniowany na niej Buton posiada właściwość „OnClick", która mówi o tym, jaka akcja powinna być wykonana w momencie naciśnięcia przycisku przez użytkownika. „Życie" naszej aplikacji rozpoczyna się w momencie, kiedy użytkownik zechce wyświetlić w oknie przeglądarki stronę Default.aspx. Przeglądarka wysyła zapytanie do serwera, gdzie tworzony jest obiekt klasy _Default. Następnie serwer wysyła odpowiedź do klienta (czego efektem będzie pojawienie się strony w oknie przeglądarki). Obiekt reprezentujący pojedynczą formatkę jest w tym momencie niszczony.

Następnie użytkownik naciska przycisk „Button" w oknie przeglądarki. W tym momencie przeglądarka klienta wysyła ponowne zapytanie do serwera (zdarzenie to, określane jest jako „PostBack"). Tym razem zawiera ono jednak obiekt ViewState, zawierający informacje, na temat zawartości strony. Na serwerze tworzony jest ponownie obiekt klasy _Default.aspx, wywoływana jest jego metoda Button1_Click, następnie do klienta odsyłana jest odpowiedź, a sam obiekt jest ponownie niszczony. Efektem działania wspomnianej metody widoczny jest w oknie przeglądarki klienta.

Aplikacja kończy działanie w momencie wygaśnięcia sesji użytkownika (domyślnie jest to dwadzieścia minut). W tym czasie, żaden klient nie może kierować zapytań do aplikacji. Natomiast obiekty reprezentujące poszczególne formatki tworzone są tylko w celu odpowiedzi na konkretne zapytanie klienta i po udzieleniu odpowiedzi przez serwer są natychmiast niszczone.

Oprócz plików reprezentujących poszczególne formatki w skład aplikacji WWW wchodzić może wiele innych obiektów. Aby zobaczyć ich listę w oknie Visual Studio wybieramy opcję: Website -> Add New Item. Wyświetli się wówczas okno, zawierające umożliwiające wybór obiektów, które mogą wchodzić w skład aplikacji.

Widzimy, że środowisko programistyczne daje nam możliwość dołączenia do projektu kolejnych formatek („Web Form"), zwykłych stron html, plików zawierających szablony stylów, oraz skryptów wykonywanych po stronie klienta. W sumie do wyboru mamy prawie trzydzieści rozmaitych obiektów, począwszy od najprostszych plików tekstowych, poprzez obiekty odpowiedzialne za wygląd i działanie witryny, a skończywszy na obiektach odpowiedzialnych za pobieranie i przechowywanie danych w pamięci serwera. Spróbujmy dodać do projektu nową formatkę. W tym celu wybieramy w wyświetlonym oknie szablon „Web Form", nadajemy mu nazwę (domyślnie jest to: „Default2.aspx"), wybieramy język programowania w jakim tworzony będzie kod źródłowy strony. W końcu, musimy odpowiedzieć na pytanie czy chcemy by kod strony był umieszczany w oddzielnym pliku (jest to rozwiązanie zalecane, znacznie zwiększające przejrzystość tworzonych obiektów), oraz czy strona powinna być powiązana z obecnym w projekcie obiektem MasterPage (mechanizm ten służący do prostego ujednolicania wyglądu wszystkich formatek obecnych w projekcie zostanie omówiony w kolejnych rozdziałach kursu). Po kliknięciu „Ok", w Solution Explorerze będzie widoczny nowy obiekt reprezentujący dodaną formatkę. Jeżeli chcemy, aby nowa strona była wyświetlana jako pierwsza po uruchamianiu projektu, klikamy na nią w oknie Solution Explorera prawym przyciskiem myszy i wybieramy opcję: „Set As Start Page".

Jak wykorzystać Copilot w codziennej pracy? Kurs w przedsprzedaży
Jak wykorzystać Copilot w codziennej pracy? Kurs w przedsprzedaży

Wydarzenia