Akademia stron pięknych

Visual Web Developer 2005 Express Edition to narzędzie dla twórców aplikacji internetowych i usług sieciowych przygotowywanych w technologii ASP.NET 2.0. Jest przeznaczone dla hobbystów i początkujących, ale równocześnie wystarczająco mocne do tworzenia niewielkich projektów komercyjnych.

Visual Web Developer 2005 Express Edition to narzędzie dla twórców aplikacji internetowych i usług sieciowych przygotowywanych w technologii ASP.NET 2.0. Jest przeznaczone dla hobbystów i początkujących, ale równocześnie wystarczająco mocne do tworzenia niewielkich projektów komercyjnych.

Visual Web Developer 2005 zapewnia programiście możliwość korzystania z mechanizmu związywania z danymi oraz pełnej gamy kontrolek ASP.NET. Bogata kolekcja przykładów oraz specjalnie przygotowana dokumentacja (skonstruowana inaczej niż pełny MSDN) pozwoli nawet niedoświadczonym programistom szybko zacząć pracę. Co więcej, doświadczenia nabyte podczas stosowania VWD można wykorzystać w pracy z pełnym Visual Studio 2005. Funkcjonowanie IDE jest praktycznie identyczne.

Instalacja

Pakiet instalacyjny można pobrać ze strony http://msdn.microsoft.com/vstudio/express/vwd/ lub z naszej płyty dołączonej do wydania PCWK 1/2006. Oprócz platformy NET 2.0 (instalowanej automatycznie) warto zainstalować SQL Server 2005 Express Edition - specjalną bezpłatną wersję systemu baz danych. W odróżnieniu od poprzednika (MSDE), w tej edycji nie ograniczono liczby równolegle wykonywanych operacji i może z powodzeniem być podstawą prostych aplikacji internetowych.

Jednym z ograniczeń wersji Express jest niemożność łączenia w jednym projekcie np. biblioteki DLL napisanej w C# z aplikacją w VB.NET. Ponieważ jednak na jednym komputerze można zainstalować wszystkie narzędzia z serii Express, nic nie stoi na przeszkodzie, aby utworzyć w VB.NET odpowiedni plik DLL (jako projekt Class Library) i dodać do niego referencję z poziomu VWD lub C#.

W SQL Server 2005 Express Edition obowiązuje ograniczenie do jednego procesora i 1 GB RAM, a bazy do 4 GB. Na jednym komputerze można jednak zainstalować kilka instancji SQL Server 2005 Express Edition.

ASP.NET i VWD

Pierwsza strona w trybie projektowania.

Pierwsza strona w trybie projektowania.

Sama technologia ASP.NET to mechanizm pozwalający na generowanie dynamicznych stron WWW . Projekt takiej strony ma rozszerzenie .aspx i może zawierać dodatkowo kod w języku C#, VB.NET lub w dowolnym innym języku .NET (aczkolwiek VWD obsługuje tylko dwa pierwsze). Strona ASPX może zawierać zwykły kod HTML oraz tzw. kontrolki serwerowe. Przetwarzając stronę, serwer generuje na podstawie właściwości tych kontrolek odpowiedni kod (X)HTML, który jest wysyłany do klienta.

Oczywiście równolegle dostępne jest bogate API, które pozwala ręcznie kontrolować, co dokładnie jest wysyłane. Kontrolki serwerowe (tak jak ich odpowiedniki w Windows Forms) opakowują również cały proces obsługi zdarzeń. Pozwalają, aby zdarzenie (np. kliknięcie elementu siatki) po stronie klienta było obsłużone w kodzie ASPX, działającym po stronie serwera. Wszystkimi technicznymi aspektami przesłania zdarzenia na serwer oraz informacji zwrotnej do klienta zajmuje się ASP.NET.

VWD jest, z jednej strony, środowiskiem do projektowania (pozwala graficznie zaprojektować zawartość strony), a z drugiej - środowiskiem IDE dla programisty .NET, które pozwala ten graficznie zaprojektowany interfejs użytkownika "oprogramować", a następnie przetestować działanie strony.

VWD to także bardzo wygodny edytor HTML do tworzenia statycznych stron HTML i arkuszy stylów CSS, z wieloma funkcjami spotykanymi zwykle w edytorach WYSIWYG witryn WWW.

Pierwsza strona

Nowe narzędzie najłatwiej poznać, tworząc prosty projekt. Po wybraniu z menu File | New Web Site tworzona jest nowa witryna WWW.

Pole Location określa, w którym miejscu witryna zostanie utworzona. Domyślnie wybrana jest opcja File system (wtedy pliki składające się na daną stronę zostaną zapisane w lokalizacji określonej przez podaną ścieżkę), ale można też wskazać adres HTTP/FTP, jeśli zdalny serwer WWW jest dostosowany do pracy deweloperskiej. Warto zwrócić uwagę, że jest to duża zmiana w stosunku do poprzednich narzędzi, które wymagały przechowywania wszystkich plików projektu na serwerze WWW.

Edytor arkuszy stylów CSS.

Edytor arkuszy stylów CSS.

Z technicznego punktu widzenia, witryna to po prostu folder, który jest w specjalny sposób obsługiwany przez serwer WWW i którego zawartość jest wysyłana do przeglądarki. VWD zawiera specjalny lokalny serwer WWW, pozwalający sprawdzić, jak działa tworzona witryna ASP.NET, dlatego nie trzeba korzystać z Windows XP Professional z zainstalowanym serwerem IIS, aby przetestować witrynę. Wbudowany serwer WWW nie nadaje się jednak do uruchamiania gotowych witryn, bo obsługuje tylko połączenia lokalne. Jego głównym zadaniem jest ścisła współpraca z IDE. Dzięki temu, gdy np. uruchamiamy śledzenie aplikacji, serwer WWW jest włączany automatycznie, a debuger "wie", do którego procesu ma się podłączyć.

Pole Language określa język, którego chcemy użyć do programowania witryny (można go też ustawiać niezależnie na poszczególnych stronach). W tym artykule będziemy korzystać z VB.NET.

Domyślnie otwieraną stroną w ASP.NET jest default.aspx. Po lewej stronie (okno Toolbox) znajduje się lista kontrolek serwerowych oraz znaczników ASPX, po prawej - Solution Explorer, zawierający wszystkie elementy danej witryny (pliki składowe). W oknie Properties można natomiast ustawiać właściwości aktualnie wybranego elementu (np. kontrolki czy całej strony).

Załóżmy, że chcemy zbudować prostą interaktywną stronę, która będzie zawierała pole tekstowe (TextBox), etykietę (Label) i przycisk (Button). Po naciśnięciu przycisku na etykiecie ma się pojawić to, co użytkownik wprowadził w pole tekstowe. Oczywiście wszystkie operacje mają być wykonane po stronie serwera.

<body>

<form id="form1" runat="server">

<div>

<asp:Label ID="Label1" runat="server" Text="Label" />

<br />

<br />

<p>Proszę wprowadzić tekst</p>

<asp:TextBox ID="TextBox1" runat="server" />

<br />

<br />

<asp:Button ID="Button1" runat="server" Text="Button" />

</div>

</form>

</body>

Znacznik <asp:> określa typ kontrolki serwerowej. Parametr ID to nazwa elementu (obiektu), którą można posługiwać się w kodzie .NET. Pozostałe atrybuty określają różne właściwości danej kontrolki - w tym wypadku tylko tekst pokazywany użytkownikowi.

Warto wiedzieć, że VWD nie zmienia formatowania kodu HTML. Nawet jeśli programista "po swojemu" uporządkuje kod, to może spokojnie dalej używać edytora w trybie graficznym - żadne dodatkowe elementy nie zostaną przeformatowane. Nic nie stoi też na przeszkodzie, aby połączyć kod HTML z kontrolkami serwerowymi (w powyższym przykładzie wykorzystano znaczniki <br> i <p>) i użyć ich do dodatkowego formatowania treści. Kontrolka serwerowa powinna być stosowana wtedy, gdy chcemy wykonać jakąś akcję po stronie serwera.

Zdarzenia

Dodawanie folderu z tematami (skórkami) witryny.

Dodawanie folderu z tematami (skórkami) witryny.

Jeżeli chcemy, aby po przyciśnięciu przycisku wykonana została jakaś czynność, to należy (jak w aplikacji Windows Forms) przypisać do niego procedurę obsługi zdarzenia. Przekazaniem kontekstu (czyli informacji wprowadzonych przez użytkownika w przeglądarce) oraz wywołaniem odpowiedniego kodu po stronie serwera zajmuje się ASP.NET.

Procedurę obsługi zdarzenia można dodać na dwa sposoby: ręcznie dopisać odpowiedni atrybut (w tym wypadku OnClick) albo po przełączeniu w tryb graficznego projektowania dwukrotnie kliknąć przycisk. Potem wystarczy dodać jeden wiersz kodu, który skopiuje odpowiednie właściwości.

Partial Class _Default

Inherits System.Web.UI.Page

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)

Handles Button1.Click

Label1.Text = TextBox1.Text

End Sub

End Class

Style i skórki

Teraz załóżmy, że chcemy zmodyfikować wygląd naszej witryny. Dzięki (X)HTML można to zrobić, używając stylów CSS, czyli definicji określającej wygląd konkretnego znacznika. Można np. spowodować, że wszystkie akapity (znacznik <P>) będą miały domyślnie określone formatowanie - czcionkę, kolor itp.

Aby dodać styl CSS, z menu podręcznego w Solution Explorer należy wybrać Add New Item i wskazać pozycję Style Sheet.

Potem można każdej stronie ASPX przypisać odpowiedni arkusz stylów, używając odpowiedniej właściwości albo dopisując znacznik <link>:

<link href="StyleSheet.css" rel="stylesheet" type="text/css" />

Ale można też wykorzystać to, że ASP.NET jest technologią działającą po stronie serwera i automatycznie generuje kod HTML strony. Do projektu możemy dodać specjalny folder o nazwie App_Themes, zawierający tematy określające sposób renderowania kodu HTML wysyłanego do przeglądarki klienta.


Zobacz również