Niezwykle trudno jest stworzyć artykuł omawiający

ASP.NET Starter Kit Stefan Turalski Podstawy ASP.NET 2.0 tworzenie aplikacji internetowych Niezwykle trudno jest stworzyć artykuł omawiający wszystkie aspekty zastosowania najnowszej platformy programistycznej firmy Microsoft. Wszak ASP.NET 2.0 to zestaw wielu narzędzi oraz możliwość skorzystania z całego potencjału platformy.net 2.0. Jeszcze trudniej jest przedstawić zarówno nowe, jak i istniejące już w poprzednich wersjach elementy środowiska, tak aby zarówno doświadczeni programiści jak i osoby stawiające pierwsze kroki mogły czerpać z tego artykułu. Postaraliśmy się przedstawić na prostym przykładzie w miarę szeroki wachlarz możliwości ASP.NET 2.0. Zapraszamy do podróży nasz cel to poznanie podstawowych funkcji ASP.NET 2.0 i narzędzi firmy Microsoft wspierających proces tworzenia aplikacji w tym środowisku. Narzędzia Zanim rozpoczniemy naszą podróż warto się do niej odpowiednio przygotować, kolekcjonując odpowiedni ekwipunek. Jak wiadomo, co do sprzętu i narzędzi opinii jest tyle, ilu jest ekspertów. Na początek proponujemy sprawdzony duet: Visual Web Developer 2005 Express Edition oraz SQL Server 2005 Express Edition. Dlaczego? Przede wszystkim dlatego, że oprogramowanie to możemy nieodpłatnie pobrać ze strony Microsoft. Także dlatego, że wersje te posiadają niemal wszystkie funkcje potrzebne do rozwoju aplikacji internetowych. Są wręcz przygotowane z myślą o osobie, która dopiero rozpoczyna przygodę z ASP.NET. Środowisko IDE pozwalające programiście w sposób łatwy i przyjemny tworzyć aplikacje jest jednym z wielu powodów, dla jakich początkujący deweloperzy decydują się na wybór platformy.net jako podstawy do dalszej nauki. Pod tym względem środowisko IDE Visual Web Developer nie odstępuje o wiele bardziej rozbudowanym, ale dostępnym odpłatnie wersjom Visual Studio: Zawiera graficzny interfejs, który umożliwia tworzenie interfejsu użytkownika przy pomocy drag-anddrop. Zastosowano w nim usprawnioną technologię IntelliSense, która podpowiada programiście składnię podczas tworzenia kodu. Mechanizm ten został udoskonalony w porównaniu z poprzednią wersją Plik konfiguracyjny Web.config Plik Web.config jest plikiem konfiguracyjnym aplikacji w formacie XML. Pozwala on modyfikować zachowanie aplikacji w takich aspektach jak: bezpieczeństwo, zarządzanie pamięcią, czy też tryb kompilacji oraz wiele innych ustawień dotyczących elementów działania aplikacji webowej. Ustawienia modyfikujemy dodając do elementu <configuration><system.web> odpowiednie podelementy np. <trace enabled= true />. Lista elementów jakie może zawierać Web.con fig znajduje się w pliku Web.config.comments w katalogu C:\Windows\ Microsoft.NET\Framework\WersjaFramework\Config produkt. Podpowiadanie działa nie tylko wtedy, gdy kod aplikacji tworzony jest w osobnym pliku, ale także gdy jest on wymieszany wraz z kodem odpowiedzialnym za wizualną część strony internetowej. Co więcej, IntelliSense wspomaga programistę także w tworzeniu tagów HTML, czy nawet w skryptów JavaScript. Wraz z platformą ASP.NET dostarczany jest bogaty zestaw kontrolek, przydatnych szczególnie przy tworzeniu konwencjonalnych rozwiązań, takich jak: typowe serwisy, strony internetowe czy standardowe metody uwierzytelniania. Znajdziemy też komponenty usprawniające proces przeprowadzania operacji związanych z pobieraniem danych z wszelkich źródeł, takich jak bazy danych, pliki XML, itp. W rozwiązanie wbudowany jest również samodzielny serwer HTTP o ograniczonej funkcjonalności, dzięki czemu tworzenie oprogramowania jest łatwiejsze. Jeśli poważnie myślisz o rozwoju aplikacji.net polecam jednak pełną wersję środowiska IDE, używanego do rozwoju komercyjnych rozwiązań. Podczas tworzenia aplikacji internetowych często korzysta się z bazy danych. Dlatego kolejnym narzędziem przydatnym w naszej podróży z ASP.NET jest SQL Server 2005 Express Edition. Wybór był oczywisty SQL Server Autor pracuje na stanowisku projektant oprogramowania w firmie Silicon & Software Systems Polska. Z zainteresowaniem przygląda się rozwojowi technologii IT, dawno już straciwszy nadzieję, że jest w stanie ogarnąć tę dziedzinę wiedzy. Kontakt z autorem stefan.turalski@gmail.com Rysunek 1. Okno Solution Explorer 14 www.sdjournal.org Software Developer s Journal Extra! 20

Zarządzanie kodem Visual Web Developer pozwala Ci wybrać jeden z dwóch modeli zarządzania kodem. Pierwszy model zakłada, że cały kod: HTML i funkcje wywoływane po stronie serwera znajdują się w tym samym pliku. W odróżnieniu od ASP.NET 1.1 wersja 2.0 dostarcza pełnego wsparcia dla takiego rozwiązania. Możemy także wybrać opcję rozdzielenia kodu. Wtedy oprócz pliku.aspx, zostanie utworzony dodatkowo powiązany z nim plik.cs lub vb. Jest to rozwiązanie zalecane głównie ze względu na czytelność kodu. 2005 Express Edition posiada bowiem wiele funkcji silnie zintegrowanych ze środowiskiem.net, jest dostępny nieodpłatnie i standardowo dołączony do pakietu instalacyjnego Visual Web Developer. SQL Server 2005 Express Edition to także pełnowartościowy silnik bazy danych SQL Server 2005. Mimo pewnych ograniczeń, które stają się istotne dopiero przy wdrażaniu komercyjnych aplikacji, doskonale sprawdza się w warunkach deweloperskich. Przygodę czas zacząć Najtrudniej będzie nam rozpocząć podróż. Część z Was być może jeszcze nie miała doświadczenia w budowaniu aplikacji webowych. Może tworzyliście rozwiązania w ASP lub w oparciu o PHP i z zainteresowaniem przypatrujecie się rozwojowi konkurencyjnego środowiska. A może doskonale znacie rozwiązania ze świata J2EE lub programowaliście w ASP.NET 1.1 i interesują Was tylko zmiany wprowadzone w nowej wersji? Jakakolwiek będzie Wasza odpowiedź, wędrówkę najlepiej będzie rozpocząć od początku, czyli od samych podstaw tworzenia aplikacji webowych w technologii ASP 2.0. Trasa będzie jednak na tyle urozmaicona, że mam nadzieję, że osoby sprawnie posługujące się ASP.NET 1.* także znajdą w tym artykule coś dla siebie. Doświadczonych programistów rozwiązań webowych prosimy jednak o wyrozumiałość. Aby artykuł ten był ogólnie przystępny i zrozumiały, zastosowano w nim wiele uogólnień czy też uproszczeń. Sugerowane rozwiązania mogą być zalecane głównie przy tworzeniu niewielkich serwisów informacyjnych lub wręcz nie zalecane, np. jawne podanie hasła w Connection- String w pliku konfiguracyjnym, który powinien być odpowiednio zaszyfrowany i niedostępny dla postronnych użytkowników. Jak działają aplikacje internetowe? Aplikacje webowe funkcjonują dzięki współpracy i komunikacji pomiędzy serwerem webowym (HTTP) oraz przeglądarką klienta. Wymiana danych odbywa się przy użyciu protokołu HTTP, a sam mechanizm komunikacji jest prosty i oferuje zestaw komend, z których najistotniejsze to HEAD, GET i POST. Serwer webowy nasłuchuje na żądania najczęściej na porcie TCP 80. Gdy serwer otrzyma żądanie typu HEAD, po odpowiednim przygotowaniu, klientowi zostaną odesłane informacje o udostępnionym pod danym adresem URI dokumencie. Otrzymanie przez serwer żądania typu GET spowoduje odesłanie oprócz informacji zawierających opis dokumentu także jego zawartość, natomiast polecenie POST uruchamia proces, który przetwarza informacje dostarczone przez klienta do serwera, a następnie odsyła odpowiedź. Dokument przesyłany do przeglądarki to najczęściej: strumień znaków składających się na plik HTML, dane w formacie XML, zawartość multimedialna taka jak pliki graficzne, animacje, słowem wszystko z czego zbudowany jest dzisiejszy Internet. W przeszłości serwisy internetowe złożone były głównie ze statycznych stron HTML. Znacznie ograniczało to ich funkcjonalność, a zarządzanie tego typu witryną, w miarę jej rozwoju, stawało się bardzo pracochłonnym zadaniem. W związku z tym pojawiało się wiele rozwiązań pozwalających na dynamiczne generowanie stron HTML. Jednym z tych rozwiązań jest technologia Active Server Pages (ASP) oraz oczywiście jej następca ASP.NET. Być może znasz już inne platformy pozwalające na tworzenie dynamicznych serwisów i zarządzanie nimi w łatwy i przyjemny sposób. Postaramy się jednak zaprezentować, w czym ASP.NET jest lepszy. Musimy zdać sobie sprawę z tego, że ASP.NET jest swoistym rozszerzeniem zwykłego serwera HTTP. Gdy serwer otrzyma żądanie przetwarzania strony, która jest uruchamiana w środowisku ASP.NET, silnik ASP.NET wywołuje specjalną metodę ProcessRequest interfejsu IHttpHandler. Metoda ta dynamicznie tworzy specjalną klasę służącą do obsługi żądania pliku aspx. Automatycznie jest ustanawiany cały kontekst wywołania HTTP oraz tworzone są obiekty Request i Response służące jako wejście i wyjście w komunikacji środowiska ze światem. Środowisko przygotowuje również drzewo kontrolek, które są zadeklarowane wewnątrz plików stron ASP.NET (aspx). Następnie kolejno, w zależności od typu żądania, wczytywana i odpowiednio interpretowana jest zawartość strony. To właśnie dzięki temu, że praktycznie każde odwołanie się do serwera może spowodować wygenerowanie nowej, zmodyfikowanej strony, środowiska typu ASP.NET są dziś tak powszechnie stosowane przy tworzeniu zaawansowanych rozwiązań internetowych. Każda kontrolka może być odpowiednio modyfikowana w czasie działania aplikacji. Dane pochodzące od klienta mogą być odpowiednio przetwarzane po stronie serwera np. mogą wpływać na proces przetwarzania i wyświetlania strony. Proces przetwarzania po stronie serwera umożliwia bardzo łatwą integrację ze źródłami danych i warstwą logiki biznesowej. A przy tym budowanie dynamicznych stron jest stosunkowo łatwe, dzięki wspomnianym już narzędziom. Jak wykorzystać potencjał tego środowiska postaramy się zaprezentować na poniżej zaprezentowanym przykładzie. Rysunek 2. WelcomePage.aspx w widoku Source i Design Rysunek 3. Web Form AddAlbum.aspx po dodaniu kontrolek Software Developer s Journal Extra! 20 www.sdjournal.org 15

ASP.NET Starter Kit Listing 1. Obsługa zdarzenia oraz pobranie pliku graficznego protected void ButtonAddPhoto_Click(object sender, EventArgs e) { string newfilename=""; if (FileUpload.HasFile) { try { string fileextention = FileUpload.FileName.Substring( FileUpload.FileName.LastIndexOf('.'), 4); newfilename = System.Guid.NewGuid().ToString()+ fileextention; FileUpload.SaveAs(System.Configuration. ConfigurationManager.AppSettings[ "PhotoResources"].ToString()+" catch (Exception ex) { else { LabelInfo.Text = "Wystapil blad podczas zapisywania pliku " + ex.message; LabelInfo.Text = "Obrazek pobrano i zapisano na serwerze"; ViewState.Add("Filename", newfilename); ImageCover.ImageUrl = " LabelInfo.Text = "Wskaz lokalizacje obrazka"; Tworzymy aplikację w ASP.NET 2.0 Aby utworzyć nowy projekt należy z menu File->New Web Site wybrać opcję Empty Web Site oraz podać nazwę projektu w naszym przypadku WebSitePhotoAlbums. Postaramy się zbudować prosty webowy serwis służący do prezentowania albumów zdjęć. Podczas tworzenia projektu mamy możliwość dokonania wyboru języka programowania. Zamieszczone w tym artykule fragmenty kodu są stworzone w języku C#. Choć jeśli znasz Visual Basic.NET nic nie stoi na przeszkodzie, abyś wybrał tę opcję. Dużą zaletą środowiska.net jest fakt, że sposób podejścia do rozwoju aplikacji ASP.NET jest prawie niezależny od języka programowania. Im lepiej poznasz samą platformę.net tym szybciej zorientujesz się, że wszystkie języki programowania, są wykonywane przez wspólny silnik Common Language Runtime (CLR). Kontynuując konfigurowanie nowego projektu lokację pozostawimy bez zmian (File System). Szczegółowe informacje o tym, jakie możliwości stwarza, a jakie odbiera wybranie takiej lokacji, zawiera artykuł pod tytułem: Możliwości umiejscowienia Web Applications oferowane przez Visual Studio 2005. Pusta aplikacja internetowa została utworzona. Pliki wchodzące w skład projektu można zawsze obejrzeć w oknie Solution Explorer. Jeśli twoje środowisko jest skonfigurowane tak, że okno to nie jest widoczne, można je uruchomić korzystając z opcji menu View->Solution Explorer. Narzędzie to, nie tylko prezentujące w widoku drzewa pliki wchodzące w skład naszej aplikacji, ale także pozwalajala na zarządzanie nimi poprzez m.in. dodawanie nowych elementów, zmianę ich nazwy, czy też przenoszenie ich w obrębie projektu. Należy zwrócić uwagę na fakt, że w skład aplikacji mogą wchodzić różne typy plików: począwszy od charakterystycznych dla stron ASP.NET plików o rozszerzeniu aspx, plików cs czy vb zawierających kod źródłowy poprzez pliki z kodem HTML, pliki graficzne, arkusze styli CSS, pliki XML zawierające dane konfiguracyjne i wiele, wiele innych. Załóżmy, że posiadamy już stronę HTML, którą chcielibyśmy dołączyć do tworzonej aplikacji ASP.NET 2.0. Możemy to zrobić, klikając prawym klawiszem myszki WebSitePhotoAlbums w Solution Explorer i wybierając z menu Add Exiting Item Następnie wskazujemy ścieżkę do pliku HTML, który automatycznie zostanie dołączony do projektu. Pozostaje nam tylko dodać pliki graficzne. Obrazy dodajemy do projektu tak samo jak wszystkie inne pliki. Aby jednak zachować pewien porządek, środowisko umożliwia nam tworzenie w ramach projektu struktury katalogów. Zakładamy zatem nowy folder o nazwie graph, w którym przechowywać będziemy pliki graficzne. Aby dodać nowy folder do projektu, z menu kontekstowego WebSitePhotoAlbums wybieramy opcję New Folder. Gdy już utworzyliśmy katalog, możemy dodać do niego odpowiednie pliki. Po zakończeniu operacji, widok w oknie Solution Explorer powinien prezentować się mniej więcej tak, jak na Rysunku 1. Możemy teraz podejrzeć, jak wygląda nasza strona. Aby uruchomić projekt, wybieramy opcję menu Debug->Start Debugging. Środowisko zareaguje pytaniem, czy stworzyć nowy plik konfiguracyjny na potrzeby naszej aplikacji, czy wolimy uruchomić aplikację bez funkcji debuggowania. My wybieramy opcję Add a new Web.config file i w oknie przeglądarki możemy oglądać nasze dzieło. Nic imponującego? Faktycznie, mimo iż Visual Web Developer udostępnia funkcjonalność związaną z tworzeniem tradycyjnych stron, taką jak kolorowanie składni czy formatowanie kodu, to szkoda nie wykorzystać pełni możliwości tego środowiska IDE, ograniczając się jedynie do tworzenia stron HTML. Dodajmy zatem do projektu prawdziwą stronę ASP.NET. Klikamy prawym klawiszem WebSitePhotoAlbums i korzystamy z funkcji Add New Item. W pojawiającym się oknie wybieramy Web Form i podajmy nazwę pliku WelcomePage.aspx. Ponownie będziemy mogli wybrać język programowania. Będziemy mogli także zadecydować, czy chcemy aby kod został umieszczony w osobnym pliku. Ze względu na to, że przykład zawiera niewielką ilość kodu, opcję Place code in separate file pozostawiamy niezaznaczoną. Na razie nie wybieramy także opcji Select Master Page do czego ona służy, dowiemy się w ramce Zarządzanie kode. Nowo utworzona strona pojawi się w oknie Solution Explorer. Poprzez dwukrotne kliknięcie otwieramy ją w głównym oknie środowiska IDE. Strona jest pusta, istnieje wiele sposobów na wypełnienie jej treścią. Wykonać to zadanie możemy edytując zawartość strony w domyślnym widoku, jakim jest Source. Wówczas modyfikujemy zawartość strony, tak jak zawartość zwykłego pliku Layout Po upuszczeniu kontrolki zostanie ona przesunięta tak, by jej położenie było dopasowane do położenia poprzedniej kontrolki lub lewego górnego brzegu strony. Taki layout nazywa się flow i jest domyślnym sposobem rozmieszczenia elementów na stronie. Jednak jeśli chcemy, aby po upuszczeniu kontrolka znajdowała się dokładnie w miejscu, w którym ją położyliśmy, możemy zmienić wartość własności layout na absolute. W menu Layout->Position->Auto position Options należy wybrać opcję Absolutely positioned. 16 www.sdjournal.org Software Developer s Journal Extra! 20

HTML w dowolnym edytorze. Możemy także skopiować fragment dokumentu HTML czy nawet treści pochodzącej z innej aplikacji np. programu Microsoft Word, zmienić widok na Design i wkleić zawartość schowka na stronę. Dodatkowo trzeba także zachować szczególną ostrożność przy linkach oraz obrazkach. Aby strona WelcomePage.aspx była uruchamiana jako pierwsza strona naszego serwisu, w jej menu kontekstowym wybieramy opcję Set As Start Page. I tak oto powstał zalążek pierwszego serwisu internetowego. Jednak aby stworzyć taki serwis, wystarczy przecież zwykły edytor HTML, więc aby wyjaśnić zaletę wykorzystania ASP.NET będziemy musieli zaprezentować kilka bardziej zaawansowanych elementów platformy. Kontrolki Jedną z zalet, która sprawia, że pisanie aplikacji w ASP.NET jest tak szybkie, jest zestaw kilkudziesięciu kontrolek gotowych do użycia na naszych stronach WWW. Kontrolki, które są przetwarzane po stronie serwera HTTP możemy podzielić na dwie grupy. Są to kontrolki HTMLServer controls, czyli dobrze znane języka HTML tagi: button, text, radio, select i inne oraz kontrolki Web Server controls czyli charakterystyczne dla ASP.NET kontrolki, posiadające funkcje renderujące je do kodu HTML Oczywiście jeśli chcesz, możesz nadal bezpośrednio w kordzie używać kontrolek HTML, do których jesteś zapewne przyzwyczajony. Ale warto skorzystać z kontrolek Web Server, ponieważ mają one dużo większą funkcjonalność. Zawierają między innymi możliwość konfigurowania własności (j.ang. Properties) które pozwalają nam zarządzać wyglądem, zawartością i stanem kontrolki. Każda kontrolka posiada tzw.handlery reprezentujące charakterystyczne dla danej kontrolki zdarzenia (j.ang. Events), które pozwalają nam określić zachowanie kontrolki w interakcji z użytkownikiem. Dysponują także mechanizmem pomagające zarządzać stanem kontrolki (j.ang. ViewState). Aby dodać nową kontrolkę do strony, wystarczy wybrać odpowiedni symbol z listy dostępnej w oknie Toolbox a następnie przeciągnąć ją na Web Form (można to zrobić zarówno w widoku Design jak i Source). Bardziej szczegółowe informacje zawiera artykuł Kontrolki serwerowe dostępne w ASP.NET. Otwórzmy nowy Web Form o nazwie AddAlbum i przejdźmy do prezentacji strony w widoku Design. Aby ułatwić rozmieszczanie kontrolek, najpierw umieszczamy na formularzu tabelę o 6 wierszach i 3 kolumnach (Layout->Insert Table ). A następnie w odpowiednie miejsca (patrz Rysunek 3) przeciągamy na formularz kilka kontrolek, które umożliwią użytkownikowi podanie podstawowych informacji o albumie: TextBox(x3), Label(x1), Image(x1), FileUpload(x1), Button (x2). Jak widzimy na Rysunku 3, po prawej stronie okna znajduje się narzędzie Properties umożliwiające nam zmianę własności kontrolek. Skoro już dodaliśmy kontrolki, wykorzystajmy teraz ich możliwości. Na formularzu znajduje się kontrolka FileUpload. Ma ona bardzo podobną funkcjonalność uzyskana poprzez fragment kodu HTML <input type="file">, którą być może już dobrze znacie. Gdy użytkownik kliknie przycisk [Browse] podczas przeglądania strony, uruchomi dialog umożliwiający mu wskazanie lokacji pliku na dysku. Po kliknięciu OK wybrana ścieżka pojawi się w polu tekstowym kontrolki. Obok kontrolki FileUpload znajduje się Button, a poniżej kontrolka Image. Chcemy, aby po kliknięciu przycisku [Dodaj Album], wskazany za pośrednictwem kontrolki FileUpload obrazek został przesłany do serwera, a następnie wyświetlony w kontrolce Image. Musimy zatem podpiąć odpowiednią ViewState ViewState jest jednym z mechanizmów pozwalających przechowywać informacje zawarte na stronie. Jeśli własność EnableViewState dla kontrolki jest ustawiona na true, jej stan czyli np. tekst który wpisaliśmy do pola TextBox nie znika po zajściu zdarzenia postback czyli odesłaniu treści strony do serwera. Należy jednak pamiętać, że dla każdej kontrolki obiekt ViewState musi dokonać odpowiedniego ukrytego zapisu informacji, co może znacznie zwiększyć ilość przesyłanych danych. ViewState działa nie tylko dla kontrolek ale i dla całej strony. Możemy wykorzystać go także do zapisu informacji w postaci pary klucza i skojarzonej z nim wartości. funkcję pod zdarzenie kliknięcia przycisku ButtonAddPhoto. Jest kilka sposobów, aby to zrobić. Możemy np. zaznaczyć przycisk, a następnie w oknie Properties kliknąć symbol błyskawicy. W miejsce listy własności kontrolki pojawi się lista zdarzeń. My wybieramy zdarzenie Click, poprzez dwukrotne kliknięcie pola obok nazwy zdarzenia. Automatycznie zostaniemy przeniesieni do widoku Source, w którym czekać na nas będzie już przygotowany szkielet funkcji. Uzupełnimy ją kodem zgodnie z Listingiem 1. Powyższa funkcja pobiera wskazaną przez użytkownika ścieżkę do pliku graficznego, który zawiera okładkę albumu. Dla uproszczenia zakładamy, że to rzeczywiście jest plik graficzny. Aby nazwy plików nie kolidowały ze sobą, za pomocą klasy System.GUID generowany jest unikalny klucz, który będzie nową nazwą pliku. Następnie plik jest pobierany i zapisywany w folderze Photo na serwerze. Adres do miejsca na serwerze, w którym chcemy zapisywać pliki jest pobierany z pliku konfiguracyjnego Web.config. Dlatego w pliku tym dodano element: <appsettings> <add key="photoresources" value="c:\documents and Settings\ Developer\My Documents\Visual Studio 2005\WebSites\ WebSitePhoto\"/> </appsettings> Na zakończenie funkcja zapamiętuje nazwę zapisywanego pliku w ViewState i wyświetla zawartość pliku graficznego w kontrolce ImageCover. Master Pages Stworzona do tej pory niewielka kolekcja formularzy, sprawia raczej wrażenie chaotycznego zbioru niż aplikacji webowej. Aby to zmienić, proponujemy wykorzystać kilka dodatkowych elementów i funkcjonalności specyficznych dla ASP.NET 2.0. Serwisy internetowe składają się najczęściej nie z kilku ani kilkudziesięciu, ale wręcz z setek podstron. I tu projektant interfejsu użytkownika napotyka wiele problemów. Jednym z głównych wyzwań jest zapewnienie spójności w obszarze układu (struktury) strony. Twórcy środowiska ASP.NET opracowali dedykowane do tego problemu rozwiązanie. ASP.NET 2.0 wprowadza nowy mechanizm tzw. Master Pages. Master page jest szablonem, definiującym ogólny wygląd strony w obszarach wspólnych dla wszystkich podstron. Dodatkowo Master Page wyznacza regiony (j.ang. containers), w których umieszczona zostanie zawartość stron podrzędnych. Tak więc efekt końcowy jest jakby złożeniem podstrony z zawartością zdefiniowaną w stronie podrzędnej. Software Developer s Journal Extra! 20 www.sdjournal.org 17

ASP.NET Starter Kit Listing 2. Przykładowy ContentPlaceHolder <script runat="server"> ( ) </script> <asp:content ID="Content1" runat="server" ContentPlaceHolderID="ContentPlaceHolder"> <div> <p align="center" style="text-align: center; font-family: Arial">Witajcie miłośnicy fotografii. ( ) </p></div></asp:content> Jak pozostałe elementy, Master Page dodajemy do aplikacji korzystając z menu Add New Item. Master Page edytuje się jak zwykły plik html, tak więc tworzenie go nie powinno przysporzyć Wam trudności. Trzeba tylko pamiętać, aby odpowiednio wybrać miejsce dla elementu ContentPlaceHolder to w tym miejscu pojawiać się będzie zawartość stron podrzędnych względem Master Page. Jak już się pewnie domyślacie, aby stworzyć stronę podrzędną wystarczy dodając nowy Web Form zaznaczyć opcję Select Master Page i wskazać odpowiedni plik. Jednak ponieważ nasz serwis zawiera już strony, chcielibyśmy je także uwzględnić podczas wykorzystywania mechanizmów Master Page. Jest to zadanie nieco trudniejsze, aczkolwiek nie niewykonalne. Jako przykład weźmy plik WelcomePage.aspx. Po pierwsze musimy dodać w dyrektywie Page odpowiednia deklarację: <%@ Page Language="C#" MasterPageFile="~/MasterPage.master"%> Dodatkowy warunek to taki, że Content file nie może zawierać takich elementów html jak: <html>, <body>, <form>, a treść, którą chcemy wyświetlić, powinna zawierać się w elemencie <asp:content>. Zatem najlepiej jest wyciąć właściwy fragment kodu, usuwając całą resztę zbytecznych elementów HTML. A następnie dodać element <asp:content> z odpowiednio ustawionym atrybutem ContentPlaceHolderID (nazwa powinna być taka sama, jak nazwa odpowiedniego ContentPlaceHolder w pliku MasterPage). Po przekształceniu na Content file, plik WelcomePage.aspx wygląda jak na Listingu 2. Theme i skin Wykorzystanie Master Pages nie jest jedynym mechanizmem ułatwiającym developerowi zachowanie spójnego tzw. Look&Feel aplikacji. Aby ułatwić zarządzanie układem strony oraz jej szatą graficzną w ASP.NET 2.0 wprowadzono dwa nowe mechanizmy: Themes i Skins. Na temat, bo tak pozwolę sobie przetłumaczyć Theme, składać się mogą arkusze styli, obrazki, XSLT lub też skins. Skin to specjalny rodzaj arkusza stylów dedykowany do formatowania wyglądu kontrolek serwerowych. Funkcjonalność powyższych mechanizmów najłatwiej będzie zrozumieć, obserwując je w działaniu. Aby stworzyć nowy temat w Solution Explorer zaznaczamy korzeń strony i wybieramy Add ASP.NET Folde r-> Theme. W ten sposób do projektu zostanie dodany folder App_Theme wraz z przykładowym, ale pustym tematem. Zmieńmy jego nazwę na Szaruga. Temat, jak już wspomniano, może składać się z różnych typów plików. Na początek dodajmy do naszego tematu zwykły i dobrze znany arkusz styli (j.ang. Style Sheet). Nie będziemy tłumaczyli, co można wpisać do arkuszów styli, ponieważ zakładamy, że już nieraz je tworzyliście. Dodawanie nowych styli dla poszczególnych tagów oraz klas nie różni się niczym od tworzenia CSS formatującego zwykłe pliki HTML. Z tą małą różnicą, że w skład Visual Web Developer wchodzi narzędzie Style Builder, które może ułatwić definiowanie styli. Ale oczywiście programista nadal może wpisywać selektory bez pomocy kreatora lub też dodać do swojego projektu plik CSS stworzony w innym narzędziu. Oprócz arkusza styli, do naszego tematu Szaruga dodamy także Skin File ( Add New Item -> Skin file). Skin file tworzy się prawie identycznie jak arkusz styli. Pozwala on jednak na formatowanie kontrolek serwera (takich jak np. Label, GridView czy Calendar), dlatego lista właściwości wchodzących w skład stylu jest znacznie szersza i zależy od typu kontrolki. I tak oto temat został stworzony. Teraz wystarczy tylko zadeklarować jego użycie na stronie. Można to zrobić na kilka sposobów, w zależności od tego czy chcemy zastosować temat do całej aplikacji, czy tylko do wybranych stron. My zastosujemy wariant pierwszy. Aby podpiąć temat pod wszystkie strony dodajemy odpowiedni element do pliku Web.config: <pages theme="szaruga" stylesheettheme="szaruga"/> Po dokonaniu powyższych operacji wszystkie strony wchodzące w skład aplikacji powinny zostać sformatowane. Zastosowanie tematów ułatwia także personalizację aplikacji webowych, czyli zmianę wyglądu aplikacji w zależności od preferencji użytkownika. W takich sytuacjach twórca aplikacji tworzy kilka tematów, aby dać użytkownikowi możliwość wyboru. Ale to już wykracza poza temat tego artykułu. Nawigacja Mimo, iż w zakres naszego serwisu wchodzi już całkiem pokaźny zbiór elementów, nadal nie tworzą one spójnej całości. Brakuje bowiem funkcjonalności, która umożliwiałaby nam swobodne poruszanie się między stronami. Przy użyciu kilku elementów wchodzących w skład ASP.NET 2.0 możemy szybko umożliwić sprawną nawigację po stronie. Zaczynamy od dodania do projektu nowego elementu Site Map. Site Map jest to plik XML o rozszerzeniu sitemap przechowujący, jak sama nazwa mówi, mapę strony. Każda strona, do której chcemy umożliwić nawigację, jest reprezentowana w postaci elementu <sitemapnode>. Zawartość naszego pliku Web.sitemap jest zaprezentowana na Listingu 4. Gdy stworzyliśmy już mapę strony, pozostało nam tylko udostępnienie elementu prezentującego tą mapę. Element ten proponuję dodać do Master Page, tak aby nawigacja była dostępna Listing 3. Przykładowy fragment pliku skin <asp:button runat="server" BackColor="#6D7894" Font-Bold="True" ForeColor="White"/> <asp:gridview runat="server" GridLines="Horizontal" BorderColor="#6d7894" BorderStyle="Double" BorderWidth="3px" CellSpacing="1" ForeColor="DimGray"> <RowStyle BackColor="#F5F7FC" ForeColor="#483D64" BorderColor=Gray BorderStyle=Solid BorderWidth=5px /> <HeaderStyle BackColor="#6D7894" Font-Bold="True" </asp:gridview> ForeColor="White" /> 18 www.sdjournal.org Software Developer s Journal Extra! 20

na każdej podstronie. Gdy na formularzu Master Page umieścimy element TreeView, automatycznie otworzy się okienko TreeView Tasks. Z listy Choose Data Source wybieramy opcję New Data, a na pojawiającym się oknie Data Source Configuration Wizard opcję Site Map. Po czym zatwierdzamy wybór. Utworzona przez nas mapa strony zostanie automatycznie wyszukana i podpięta pod TreeView. Aż trudno uwierzyć, że to takie proste. Zachęcam do klikania niepozornie wyglądających małych czarnych strzałek przy kontrolkach. Zawierają one wiele interesujących kreatorów, takich jak np. Auto Format który umożliwia wybór jednego z kilkunastu szablonów formatowania kontrolki. Listing 4. Mapa strony Web.sitemap <?xml version="1.0" encoding="utf-8"?> <sitemap xmlns="http://schemas.microsoft.com/aspnet/ SiteMap-File-1.0" > <sitemapnode url="default.aspx" title="strona glowna" > <sitemapnode url="welcomepage.aspx" title="strona Powitalna" /> <sitemapnode url="addalbum.aspx" title="dodaj Album" /> <sitemapnode url="topgaleries.html" </sitemapnode></sitemap> title="najlepsze Albumy" /> Listing 5. Konfiguracja GridView <asp:gridview ID="GridView1" runat="server" <Columns> AutoGenerateColumns="False" DataSourceID="SqlDataSource1" > <asp:imagefield DataImageUrlField="Cover" HeaderText="Okladka" ReadOnly="True" NullImageUrl="~/graph/DefaultCover.jpg" DataImageUrlFormatString="~/Photo/{0 " > <ControlStyle Width="80px" /> </asp:imagefield> <asp:boundfield DataField="Title" HeaderText="Tytul" /> <asp:boundfield DataField="Author" HeaderText="Autor" /> </Columns> </asp:gridview> Wstęp do ADO.NET Korzystając z zaprezentowanych do tej pory elementów składających się na ASP.NET 2.0 można stworzyć serwis internetowy o bogatej funkcjonalności. Jednak na zakończenie chcielibyśmy jeszcze pokazać, jaki dodatkowy potencjał stwarza wykorzystanie w aplikacji bazy danych. Na początku musimy stworzyć bazę, korzystając przy tym rzecz jasna z SQL Server Express Edition. Jak wspominaliśmy SQL Express jest silnie zintegrowany z aplikacją Visual Web Developer. Środowisko IDE będziemy wykorzystywali do wykonywania wszystkich podstawowych operacji na bazie danych. Aby stworzyć nową bazę, dodajemy do projektu folder App_Data (menu Add ASP.NET Folder ). Folder ten pojawi się w oknie Solution Explorer. W jego menu kontekstowym znajduje się opcja Add New Item, wybieramy SQL Database i wpisujemy nazwę bazy dbalbums.mdf. Ponieważ obsługa baz danych leży poza obszarem tego artykułu, pominiemy etap dodawania do bazy tabel i wypełniania ich danymi. Podpowiemy tylko, że we wszelkich operacjach wykonywanych na bazie danych pomocne jest narzędzie Database Explorer (dostępne w menu View). Zakładamy, że mamy już wypełnioną danymi bazę danych dbalbums zawierająca tabelę tblalbum. Do prezentacji danych służyć nam będzie nowy Web Form TopAlbums.aspx. Aby wyświetlić na formularzu zawartość tabeli tblalbum, wystarczy chwycić tabelę w oknie Database Explorer i przeciągnąć ją na odpowiednie miejsce w Web Form. Kontrolka GridView, który pojawi się na formularzu, jest wierną reprezentacją danych znajdujących się w wybranej tabeli. Wiadomo jednak, że do prezentacji chcielibyśmy wybrać tylko kilka kolumn. Edycji kolumn można dokonać w widoku Design, jednak GridView jest kontrolką o bardzo rozbudowanej funkcjonalności i do jej formatowania służy wiele rożnych narzędzi. Zatem tym razem zaprezentujemy, jak wygląda fragment kodu w widoku Source. Na Listingu 5 widzimy przykładową konfigurację Gridview. W zademonstrowanym fragmencie kodu pominięto formatowanie samego elementu GridView, ponieważ jest ono już zadeklarowane w stworzonym uprzednio pliku skin (patrz Listing 3). Do zaprezentowania wybrano kolumny Title, Author oraz Cover - pole Cover zawiera nazwę pliku graficznego znajdującego się na serwerze. Atrybut DataImageUrlFormatString pozwala stworzyć adres url obrazka - wstawiając wartość pola DataImageUrlField w miejsce {0. Dodatkowo dzięki zastosowaniu <ControlStyle Width="80px" /> wczytywany obrazek jest proporcjonalnie skalowany. I tak oto praktycznie bez konieczności pisania kodu, udało nam się połączyć z serwerem i zaprezentować dane z bazy danych. To oczywiście tylko minimalny wycinek z tego, co oferuje ASP.NET 2.0 w kwestii obsługi bazy danych. W skład platformy wchodzi wiele mechanizmów pozwalających na dodawanie, edycję i usuwanie danych. Publikujemy aplikację W sekcji dotyczącej ekwipunku wspomniano, że Visual Web Developer posiada wbudowany lokalny serwer HTTP (Cassini). Jednak jest on przeznaczony tylko do wspomagania procesu rozwoju aplikacji Web i prędzej czy później i tak zaistnieje potrzeba umieszczenia naszej aplikacji na pełnowartościowym serwerze HTTP. W ASP.NET rolę tą pełni IIS (Internet Information Services). O tym jak przeprowadzić poprawną konfigurację serwera IIS przeczytasz w artykule Aplikacje ASP.NET na platformie Internet Information Services Podsumowanie I tak oto od początku do końca stworzyliśmy naszą pierwszą aplikację internetową przy pomocy programu Visual Web Developer, SQL Server 2005 Express Edition i środowiska ASP.NET 2.0. Zadania, których się podjęliśmy nie są być może ambitne aczkolwiek pozwoliły nam poznać te z elementów ASP.NET 2.0, które są najważniejsze dla początkującego programisty. Z czasem z pewnością Twój apetyt na wiedzę o ASP.NET będzie rósł. Mamy nadzieję, że pomoże Ci w tym ten numer naszego czasopisma. Software Developer s Journal Extra! 20 www.sdjournal.org 19