Projektowanie serwisów internetowych

Transkrypt

1 Piotr Bubacz Moduł 6 Wersja 1 Spis treści Projektowanie serwisów internetowych... 1 Informacje o module... 2 Przygotowanie teoretyczne... 3 Przykładowy problem... 3 Podstawy teoretyczne... 3 Przykładowe rozwiązanie... 7 Porady praktyczne Uwagi dla studenta Dodatkowe źródła informacji Laboratorium podstawowe Problem 1 (czas realizacji 25 min) Problem 2 (czas realizacji 25 min) Problem 3 (czas realizacji 25 min) Problem 4 (czas realizacji 25 min) Laboratorium rozszerzone... 19

2 Informacje o module Opis modułu W tym module znajdziesz informacje dotyczące zarządzania wyglądem aplikacji i tworzenia elementów nawigacyjnych. Poznasz możliwości centralnego zarządzania wyglądem witryny przy pomocy stron wzorcowych i kompozycji. Poznasz metody tworzenia mapy witryny internetowej oraz nauczysz się, jak wykorzystywad kontrolki nawigacyjne. Cel modułu Celem modułu jest przedstawienie możliwości utrzymania wspólnego wyglądem aplikacji przy użyciu stron wzorcowych i kompozycji oraz możliwości tworzenia centralnie zarządzanych elementów nawigacyjnych. Uzyskane kompetencje Po zrealizowaniu modułu będziesz: wiedział jak zarządzad wyglądem aplikacji przy użyciu stron wzorcowych i kompozycji potrafił tworzyd centralnie zarządzane mapy witryny potrafił wyświetlad mapę witryny przy pomocy kontrolek nawigacyjnych Wymagania wstępne Przed przystąpieniem do pracy z tym modułem powinieneś: znad zasady pracy w środowisku Visual Studio, w szczególności tworzenia stron internetowych, potrafid tworzyd nowe aplikacje internetowe i dodawad strony. Mapa zależności modułu Zgodnie z mapą zależności przedstawioną na Rys. 1, przed przystąpieniem do realizacji tego modułu należy zapoznad się z materiałem zawartym w modułach Podstawy HTML, Kaskadowe Arkusze Stylów CSS i Wprowadzenie do ASP.NET MODUŁ 14 MODUŁ 13 MODUŁ 1 MODUŁ 12 MODUŁ 2 MODUŁ 11 MODUŁ 6 MODUŁ 3 MODUŁ 10 MODUŁ 4 MODUŁ 9 MODUŁ 8 MODUŁ 5 Rys. 1 Mapa zależności modułu Strona 6-2

3 Przygotowanie teoretyczne Przykładowy problem Przeglądając serwisy internetowe możemy zauważyd, że każda strona wygląda podobnie. Wspólnymi elementami są menu, baner czy inne wizualne komponenty strony. Aby utrzymad wspólny wygląd strony tworzonej w XHTML należało zaprojektowad wspólne elementy, a później przekopiowad je na każdą nową stronę. Oczywiście nie było to rozwiązanie dobre. Nie mówiąc o problemach przy kopiowaniu należy pamiętad, że zmiana jakiegokolwiek elementu w części wspólnej powodowała koniecznośd zmian we wszystkich plikach serwisu. Kolejnym problemem jest wygląd strony. Już wiesz, że można go określid w pliku CSS, ale co, jeśli chcemy okresowo zmieniad wygląd naszej witryny. Co jeśli chcemy, aby strona wyglądała inaczej w zimie, lecie czy na jesieo i wiosnę. Oczywiście możemy podmieniad wskazania pliku CSS na stronie, jednak nie jest dobre rozwiązanie, szczególnie jeśli mamy kilka stron w serwisie. Chcielibyśmy mied centralne zarządzanie plikami CSS wykorzystywanymi przez stronę. Ostatni problem na jaki napotkasz się tworząc serwisy internetowe to menu. Tworzenie menu jako zbioru odnośników do stron jest może rozwiązaniem prostym, ale zdecydowanie nieoptymalnym. Chcielibyśmy mied centralne miejsce do zarządzania elementami nawigacyjnymi. Dodatkowo musimy mied możliwośd prostego wyświetlania naszej strony. Do tego celu potrzebujemy zbioru kontrolek nawigacyjnych. Podstawy teoretyczne Budowanie wyglądu serwisu w oparciu o strony wzorcowe Strony serwisu internetowego posiadają wiele wspólnych elementów, które powinny byd wyświetlane na każdej ze stron (np. logo, elementy nawigacyjne itp.). Tworzenie podobnych stron można wykonad kopiując wspólne elementy. Gdy tych stron jest dużo lub jeśli w pewnym momencie zaistnieje potrzeba zmiany wyglądu serwisu, wtedy takie rozwiązanie jest niepraktyczne. ASP.NET został wyposażony w mechanizm stron wzorcowych, umożliwiających grupowanie pewnych wspólnych elementów z wielu stron w jednym pliku. Strona wzorcowa (ang. Master Page) umożliwia tworzenie wspólnego wyglądu dla całej witryny internetowej. Stanowi ona szkielet dla treści dostarczanej przez poszczególne strony i zawiera tylko wspólne elementy. Miejsce, w którym ma zostad umieszczona treśd właściwej strony, jest określone przez specjalną kontrolkę ContentPlaceHolder. Ze względu na fakt, że możliwe jest umieszczenie dowolnej ilości kontrolek ContentPlaceHolder, każda kontrolka musi byd jednoznacznie nazwana za pomocą identyfikatora kontrolki ID. Strona z zawartością (ang. Content Page) korzysta ze strony wzorcowej, wypełniając miejsca określone przez ContentPlaceHolder. Treśd jest umieszczona w kontrolce Content. Kontrolka ta musi odwoływad się do odpowiedniej kontrolki ContentPlaceHolder za pomocą parametru ContentPlaceHolderID (Rys. 2). ContentPlaceHolder1 ContentPlaceHolder2 Strona wzorcowa Content1 Content2 + = Strona zawartości Content1 Content2 Strona w przeglądarce Rys. 2 Tworzenie strony internetowej na podstawie stron: wzorcowej i zawartości Strona wzorcowa i strona zawartości mogą zawierad dowolne kontrolki serwerowe, jak również własny kod programowy. Zawartości obu stron są łączone w jedną strukturę i wysyłane do klienta, dzięki temu są widoczne jako jedna całośd. Strona 6-3

4 Strona zawartości może umieszczad kontrolki tylko w wyznaczonych miejscach. Istnieje możliwośd umieszczenia kontrolki w dowolnym miejscu na stronie przy pomocy pozycjonowania CSS, ale jest to w najwyższym stopniu niewskazane. Zmiana szablonu nie spowoduje zmiany położenia kontrolki. Jeśli musimy coś dodad w określonym miejscu, najłatwiej jest zdefiniowad w stronie wzorcowej kolejną kontrolkę ContentPlaceHolder. Aby ułatwid tworzenie rozbudowanych serwisów internetowych, możliwe jest zagnieżdżanie stron wzorcowych. Visual Studio 2008 wspiera ich wizualne projektowanie. Konwersja istniejącej strony Web na stronę zawartości Przy projektowaniu aplikacji istnieje czasami koniecznośd dopasowania istniejącej strony Web do całego portalu. W tym celu należy z konwertowanej strony usunąd następujące znaczniki: <!DOCTYPE> <html> <head> <body> <form> Następnie należy do dodad atrybut MasterPageFile, podając właściwą nazwę pliku strony wzorcowej. W kolejnym kroku przed treścią strony powinno się dodad znacznik <asp:content>. Znacznik ten musi posiadad atrybuty ID (dowolna nazwa), ContentPlaceHolderID (nazwa kontrolki ContentPlaceHolder na stronie wzorcowej, w której ma znaleźd się treśd strony) oraz runat="server". Na koocu pliku należy zamknąd znacznik </asp:content>. Jeśli na stronie wzorcowej znajduje się klika kontrolek ContentPlaceHolder, to musimy zapewnid, że każda z nich będzie posiadała na tej stronie kontrolkę Content z odpowiednim ContentPlaceHolderID. Sterowanie wyglądem aplikacji przy użyciu kompozycji Przy użyciu arkusza styli (CSS) możliwe jest definiowanie wyglądu elementów w języku HTML, nie jest to jednak możliwe w przypadku kontrolek serwerowych ASP.NET. CSS może zmienid interpretacje kodu HTML generowanego przez kontrolkę serwerową, ale nie ma wpływu na samą kontrolkę. Aby umożliwid scentralizowany sposób sterowania wyglądem kontrolek, wprowadzono kompozycje (ang. themes). Kompozycje są umieszczone na serwerze w specjalnym katalogu App_Themes, w podkatalogach, których nazwy są nazwami kompozycji. Podkatalogi zawierad mogą pliki.skin (plik motywu) oraz pliki arkuszy styli.css. Pliki styli zostaną dołączone do nagłówka każdej ze stron. Wizualne cechy kontrolek Web określa się za pośrednictwem pliku motywu (.skin). Pojedynczy folder kompozycji może zawierad dowolną liczbę takich plików. Pliki motywów zawierają znacznik identyfikujący daną kontrolkę serwerową wraz z parametrami. Definicja motywów ma wpływ tylko na wygląd kontrolek serwerowych Web, nie ma natomiast wpływu na następujące elementy: elementy HTML kontrolki serwerowe HTML kontrolki serwerowe Web, które nie mają właściwości wizualnych niewizualne właściwości kontrolek serwerowych Web (np. AutoPostBack) Stosowanie kompozycji do wszystkich stron witryny jest możliwe w pliku Web.config w sekcji <system.web> przy pomocy znacznika <pages>. Przykład: <pages theme="niebieskaskorka" /> Strona 6-4

5 W celu utworzenia kompozycji należy w oknie Solution Explorer kliknąd prawym przyciskiem i wybrad Add ASP.NET Folder, a następnie Theme. W tym momencie możliwe jest określenie dowolnej nazwy folderu, która jednocześnie będzie nazwą kompozycji. W celu dodania pliku kompozycji należy kliknąd prawym przyciskiem katalog zawierający kompozycję i wybrad z menu opcje Add New Item, a następnie Skin File i wcisnąd przycisk Add. Rys. 3 Dodanie pliku motywu W utworzonym pliku należy następnie umieścid znaczniki i parametry definiujące wygląd strony. Nawigacja w serwisie internetowym Większośd serwisów internetowych posiada menu zbiór odnośników do poszczególnych stron. Możliwe jest określenie tego zbioru ręcznie na każdej stronie lub na stronie wzorcowej, jednak nie jest to rozwiązanie elastyczne. Dodatkowo problemem jest ukrywanie części odnośników przed użytkownikami anonimowymi oraz ograniczanie dostępu do odnośników dla różnych grup użytkowników. W ASP.NET 2.0 zaproponowano spójny, łatwy do zarządzania, scentralizowany system dostarczania informacji o mapie serwisu. Możliwości systemu nawigacji: Centralne zarządzanie logiczną strukturą witryny dodawanie lub usuwanie odnośników do stron domyślnie odbywa się w pliku Web.sitemap. Możliwe jest określenie innego dostawcy. Kontrolki nawigacyjne kontrolki umożliwiające wyświetlenie menu serwisu bazujące na pliku Web.sitemap. Reguły dostępu możliwośd określania reguł wyświetlania lub ukrywania odnośników w menu nawigacji. Możliwośd programowego dostępu do kontrolek nawigacji i wyświetlanych w nich informacji. Tworzenie mapy witryny Pierwszym krokiem wykorzystania systemu nawigacji w ASP.NET jest określenie struktury serwisu. Standardowo system nawigacji serwisem wykorzystuje plik XML Web.sitemap zawierający hierarchię stron. Plik Web.sitemap musi byd umieszczony w katalogu głównym aplikacji. Zawiera on elementy <sitemapnode> dla każdej strony serwisu. Hierarchię serwisu ustala się poprzez osadzanie elementów <sitemapnode>. Każdy z nich zawiera następujące atrybuty: title określa tekst wyświetlany w kontrolkach nawigacyjnych Strona 6-5

6 description - określenia tekst pomocy pojawiający się po ustawieniu kursora nad pozycją menu (ang. tool tip) url określa lokalizację strony Przykład pliku Web.sitemap: <?xml version="1.0" encoding="utf-8"?> <sitemap xmlns=" > <sitemapnode> <sitemapnode url="default.aspx" title="strona główna" description="przenieś do strony głównej" /> <sitemapnode title="produkty" description="zapoznaj się z ofertą"> <sitemapnode url="produkty.aspx" title="przeglądaj" description="przejrzyj dostępne artykuły" /> <sitemapnode url="szukaj.aspx" title="szukaj" description="wyszukaj po nazwie" /> </sitemapnode> </sitemapnode> </sitemap> Kontrolki nawigacyjne Kolejnym krokiem po określeniu struktury jest wyświetlenie jej na stronie serwisu. ASP.NET udostępnia następujące kontrolki nawigacyjne: SiteMapPath TreeView Menu Kontrolka SiteMapPath Kontrolka SiteMapPath wyświetla ścieżkę nawigacji. Prezentuje ona użytkownikowi lokalizację i wyświetla odnośniki umożliwiające nawigację do strony domowej. Rys. 4 Kontrolka SiteMapPath Kontrolka TreeView Kontrolka TreeView wyświetla mapę serwisu w postaci struktury. Węzły zawierające elementy potomne mogą byd rozwijane lub zwijane po kliknięciu ich. a) b) Rys. 5 Przykład kontrolki TreeView a) cała b) zwinięty jeden węzeł Strona 6-6

7 Kontrolka Menu Kontrolka Menu wyświetla menu rozwijane. Węzły zawierające elementy potomne są rozwijane w momencie, kiedy przesunie się nad nimi kursor. Podsumowanie Rys. 6 Przykład działania kontrolki Menu W tym rozdziale przedstawiliśmy podstawowe informacje dotyczące budowania witryn internetowych w oparciu o strony wzorcowe. Pokazaliśmy, jak tworzyd i zarządzad wyglądem witryny przy pomocy kompozycji oraz jak tworzyd mapę witryny i wykorzystywad kontrolki nawigacyjne do jej prezentowania. Przykładowe rozwiązanie Tworzenie strony wzorcowej i stron zawartości Naszym zadaniem jest utworzenie szablonu serwisu internetowego dla klienta. Szablon ma zawierad elementy przedstawione na Rys. 7. Logo Menu Treść Rys. 7 Szablon strony Po utworzeniu nowego projektu aplikacji internetowej dodamy stronę wzorcową do projektu. Za pomocą menu Website -> Add New Item, lub poprzez kombinację klawiszy Ctrl+Shift+A. W oknie dialogowym Add New Item należy wybrad szablon Master Page oraz w oknie Name nadad mu nazwę SzablonStrony.master. Dodatkowo zaznaczymy opcję Place Code In Separate File, aby umieścid kod strony w osobnym pliku. Po kliknięciu przycisku Add tworzony jest plik strony wzorcowej zawierający już dwie kontrolki ContentPlaceHolder. Pierwsza kontrolka umożliwia dodanie treści do nagłówka strony. Dzięki temu na stronie zawartości możemy dodad plik CSS lub skrypt wykonywany po stronie klienta. Druga kontrolka zawiera treśd, która zostanie wypełniona na stronie zawartości. Teraz należy odpowiednio przygotowad naszą stronę wzorcową. Aby to wykonad, usuniemy kontrolkę ContentPlaceHolder. Ułatwi nam to opisanie kolejnych czynności. Następnie dodamy do znacznika <div> właściwośd ID="Strona". W kolejnym kroku dodamy dwa znaczniki <div>, pierwszy o ID="Naglowek", drugi o ID="ObszarRoboczy". Następnie do znacznika zawierającego nagłówek dopiszemy: Logo. Do znacznika <div> o ID="ObszarRoboczy" dodamy kolejne dwa znaczniki <div> o ID="Menu" i ID="Tresc". Do znacznika <div> o ID="Menu" wpiszemy Menu, a do znacznika o ID="Tresc" dodamy kontrolkę ContentPlaceHolder. Tak przygotowana strona wzorcowa będzie stanowiła bazę dla kolejnych podstron. Warto jeszcze zdefiniowad wygląd poszczególnych sekcji w CSS, ze szczególnym uwzględnieniem odpowiedniego rozmieszczenia obszaru treści i menu. Zauważmy, że strona wzorcowa różni się od formularza internetowego tylko dwiema kontrolkami ContentPlaceHolder. Kontrolki te będą wypełniane przez strony zawartości bazujące na tej Strona 6-7

8 stronie. Strona zawartości korzystająca z tej strony wzorcowej musi zawierad dwie kontrolki Content, których atrybut ContentPlaceHolderID jest równy ContentPlaceHolder1 oraz head. Naszym zadaniem jest umieścid odpowiednią treśd w tych kontrolkach, która później zostanie połączona z szablonem strony i wyświetlona w przeglądarce użytkownika jako jedna strona XHTML. Nie możemy zobaczyd szablonu strony bez strony zawartości. Musimy zatem dodad nową stronę zawartości bazującą na naszym szablonie. Dodawanie stron zawartości Kolejnym krokiem jest dodanie strony zawartości, która będzie bazowała na stronie wzorcowej. Strona zawartości to formularz internetowy, którego treśd umieszczona jest w kontrolkach Content odpowiadających kontrolkom ContentPlaceHolder na stronie wzorcowej. Stronę zawartości dodajemy do aplikacji podobnie jak formularz internetowy, z tą tylko różnicą, że w oknie Add New Item (Rys. 8) dodatkowo zaznaczamy opcję Select master page. Rys. 8 Okno Add New Item dla strony zawartości Po kliknięciu przycisku Add zostaniemy proszeni o wybranie strony wzorcowej (Rys. 9). W aplikacji możemy zdefiniowad klika szablonów stron. Co więcej, szablony te mogą byd zagnieżdżane. Rys. 9 Okno Select a Master Page Strona 6-8

9 Po wybraniu przycisku OK tworzona jest nowa strona zawartości oparta na wybranej stronie wzorcowej. Zawiera ona w której oprócz standardowych właściwości znajduje się właściwośd określająca szablon strony. Na stronie znajdują się również dwie kontrolki Content odwołujące się do odpowiednich kontrolek ContentPlaceHolder. Po przełączeniu w widok Design (Rys. 10) widoczna jest strona będąca połączeniem strony wzorcowej i strony zawartości. Dzięki temu programista widzi ją tak, jak zostanie ona wysłana do użytkownika. Częśd zdefiniowana w stronie wzorcowej jest oznaczona kolorem szarym, a dodawanie kontrolek jest możliwe wyłącznie w kontenerze Content oznaczonym kolorem białym. Umieszczenie kursora na szarym tle powoduje zmianę kursora na znak zakazujący. Rys. 10 Widok WYSIWYG strony zawartości Możemy teraz wyświetlid naszą stronę zawartości w przeglądarce. Po uruchomieniu widzimy stronę składającą się z elementów umieszczonych zarówno na stronie wzorcowej, jak i stronie zawartości. Konwersja istniejącej strony Web na stronę zawartości Projektując aplikację internetową czasami potrzebujemy dodad do projektu starą stronę przygotowaną bez użycia szablonu. W tym celu należy ze strony usunąd następujące znaczniki ze starej strony: <!DOCTYPE> <html> <head> <body> <form> Należy pamiętad, że musimy usunąd znaczniki początkowe i koocowe zostawiając właściwą treśd strony. Następnie należy do dodad atrybut MasterPageFile, określający lokalizację pliku strony wzorcowej. Następnie pod a przed treścią strony należy dodad znacznik: <asp:content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> </asp:content> Jeśli potrzebujemy dodad coś w nagłówku strony, to możemy to umieścid właśnie w tym znaczniku. W naszym prostym przypadku nie potrzebujemy nic dodawad, zatem zostawiamy pustą zawartośd. Kolejno do strony należ dodad znacznik <asp:content>. Znacznik ten musi posiadad atrybuty ID (dowolna nazwa), ContentPlaceHolderID (nazwa kontrolki ze strony wzorcowej ContentPlaceHolder, w której ma znaleźd się treśd strony) oraz runat="server". W naszym przypadku: <asp:content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> Na koocu pliku musimy zamknąd znacznik </asp:content>. Strona 6-9

10 Jeśli w stronie wzorcowej znajduje się więcej niż dwie kontrolki ContentPlaceHolder, to należy do strony zawartości dodad odpowiednio tyle kontrolek Content tak, aby każda kontrolka ze strony wzorcowej miała odniesienie na stronie zawartości. Sterowanie wyglądem aplikacji przy użyciu kompozycji Naszym zadaniem będzie stworzenie wyglądu witryny w taki sposób, aby możliwa była szybka zmiana wyglądu strony. Do tego celu użyjemy kompozycji. W celu utworzenia kompozycji należy w oknie Solution Explorer kliknąd prawym przyciskiem i wybrad Add ASP.NET Folder, a następnie Theme. W tym momencie możliwe jest określenie nazwy folderu, która jednocześnie będzie nazwą kompozycji. W naszym przypadku będzie to SkorkaZima. Następnie dodajemy do folderu plik CSS, w którym znajdują się odpowiednie definicje wyglądu elementów na stronie. Oprócz pliku CSS możemy również wykorzystad plik motywów. W celu dodania pliku motywów należy kliknąd prawym przyciskiem katalog zawierający kompozycję i wybrad z menu opcje Add New Item, a następnie Skin File i wcisnąd przycisk Add. W utworzonym pliku należy następnie umieścid znaczniki i parametry definiujące wygląd strony. Aktualnie wykorzystywaną kompozycje przez aplikacje definiujemy w pliku Web.config w sekcji <system.web> przy pomocy znacznika <pages>. Przykład: <pages theme="skorkazima" /> Możliwe jest również umieszczenie bezpośredniego odniesienia do odpowiedniego pliku w sekcji head każdej strony w aplikacji, jednak ustawienia wykonane w pliku Web.config przykrywają ustawienia lokalne w sekcji <head>. Porady praktyczne Strony wzorcowe Praca ze stroną wzorcową jest analogiczna do pracy z formularzem internetowym. Możliwe jest dodawanie dowolnych kontrolek i wykonywanie dowolnego kodu aplikacji. Należy jednak pamiętad, że kontrolki i kod tej strony będą wykonywane na wszystkich potomnych stronach. Przy dodawaniu do projektu strony już istniejącej należy: w wskazad lokalizację bezwzględną strony wzorcowej rozpoczynając od głównej strony serwisu "~/" dodad tyle kontrolek Content, aby wszystkie kontrolki ContentPlaceHolder miały swoje odwzorowanie Kompozycje Tworzenie kompozycji należy zacząd od stworzenia kompozycji bazowej, a następnie zmieniad ją odpowiednio do potrzeb. Aby możliwe było projektowanie strony w trybie podglądu, powinieneś określid styl bazowy w nagłówku strony wzorcowej. W katalogu kompozycji możemy umieścid nie tylko pliki CSS i kompozycje, ale również elementy graficzne niezbędne dla odpowiedniego wyglądu strony. Nawigacja w serwisie W pliku Web.sitemap określaj zawsze element nadrzędny <sitemapnode>, a następnie w kontrolce Menu określ właściwośd ShowStartingNode="False". W pliku Web.sitemap staraj się zawsze umieszczad właściwośd description. Ułatwi to odnajdowanie ważnych elementów użytkownikom strony Strona 6-10

11 W pliku Web.sitemap nie musisz zawsze określad właściwości url. Jest to szczególnie przydatne dla nadrzędnych opcji menu. Uwagi dla studenta Jesteś przygotowany do realizacji laboratorium jeśli: rozumiesz jak działają strony wzorcowe umiesz dodawad do projektu stronę wzorcową i stronę zawartości potrafisz dodawad i zarządzad kompozycjami potrafisz tworzyd mapy witryny w pliku Web.sitemap oraz wykorzystywad te informacje do wyświetlania w kontrolkach nawigacyjnych Pamiętaj o zapoznaniu się z uwagami i poradami zawartymi w tym module. Upewnij się, że rozumiesz omawiane w nich zagadnienia. Jeśli masz trudności ze zrozumieniem tematu zawartego w uwagach, przeczytaj ponownie informacje z tego rozdziału i zajrzyj do notatek z wykładów. Dodatkowe źródła informacji 1. Strony wzorcowe wprowadzenie, Na stronie znajdziesz opis najważniejszych kwestii związanych ze stronami wzorcowymi. 2. Stephen Walther, ASP.NET 2.0. Księga eksperta, Helion, 2008 W książce autor porusza wiele zagadnieo związanych z ASP.NET 2.0. Z książki nauczysz się tworzyd efektowne witryny internetowe, a także dbad o ich bezpieczeostwo oraz wysoką skalowalnośd. Dowiesz się, jak można dodawad nowe, jednolite strony do aplikacji webowych. 3. Webcast Wykorzystanie stron wzorcowych, ych/default.aspx Webcast w języku polskim umożliwiający zapoznanie się w nieco ponad 11 min z najważniejszymi kwestiami związanymi ze stronami wzorcowymi w ASP.NET. Nauczysz się dodawad strony wzorcowe i strony zwartości. Poznasz również mechanizm tworzenia mapy witryny i dodawania kontrolek nawigacyjnych. 4. Instrukcja: Dodawanie nawigacji do witryny sieci Web, Fragment podręcznika do ASP.NET, który w prosty sposób na przykładzie pokazuje, jak tworzyd mapę witryny oraz dodawad kontrolki nawigacyjne. Strona 6-11

12 Laboratorium podstawowe Problem 1 (czas realizacji 25 min) Firma Adventure Works chciałaby w Polsce otworzyd sklep internetowy sprzedający rowery. Ponieważ poprzednia ankieta, którą przygotowałeś bardzo im się spodobała, zaproponowali Tobie wykonanie tej strony. Ich grafik zaproponował układ przedstawiony na Rys. 11. Twoim zadaniem jest przygotowanie strony wzorcowej oraz zaprezentowanie jej klientowi. Rys. 11 Szkic wyglądu strony Zadanie 1. Utwórz nową stronę w Visual Web Developer 2008 Express Edition 2. Utwórz wzorzec strony 3. Utworzenie głównych elementów strony Tok postępowania Otwórz Visual Web Developer 2008 Express Edition. Z menu wybierz File -> New Web Site. Z listy Visual Studio installed templates wybierz ASP.NET Web Site. Z listy Location wybierz File System, a w polu obok określ lokalizację dla pliku w dowolnym miejscu na dysku. Z listy Language wybierz Visual C#. Kliknij OK. Usuo z projektu stronę Default.aspx. Wybierz z menu opcję Websites -> Add New Item lub naciśnij kombinację Ctrl+Shift+A. Z wyświetlonego okna dialogowego wybierz następujące opcje: Templates: Master Page Language: Visual C# Name: SzablonStrony.master Place Code In Separate File: zaznaczona Naciśnij przycisk Add. Program utworzy stronę wzorcową z dwiema kontrolkami ContentPlaceHolder. Usuo kontrolkę ContentPlaceHolder o id="contentplaceholder1". Zmieo tytuł strony na Adventure Works. Wewnątrz znacznika <body> dodaj: <div id="strona"> <div id="naglowek"></div> <div id="tresc"></div> </div> Strona 6-12

13 4. Podział głównych elementów 5. Dodanie nowego arkusza stylów 6. Określenie pozycji w obszarach roboczych 7. Określenie podstawowego wyglądu zawartości strony 8. Określenie wyglądu pozostałych elementów strony Wewnątrz znacznika zawierającego nagłówek (id="naglowek") dodaj: Logo <div id="menu">menu</div> <div id="obszarlogowania">zaloguj</div> Wewnątrz znacznika zawierającego treśd (id="tresc") dodaj: <div id="pierwszyobszarboczny">pierwszy obszar boczny</div> <div id="drugiobszarboczny">drugi obszar boczny</div> <div id="obszarroboczy"> <asp:contentplaceholder ID="ContentPlaceHolder1" runat="server"> </asp:contentplaceholder> </div> Wybierz Website -> Add New Item. Z listy Visual Studio installed templates wybierz Style Sheet. W polu Name wpisz Style.css. Kliknij OK. Przełącz widok strony na Design lub Split. Wybierz Format -> New Style. W polu Selector wpisz #PierwszyObszarBoczny. W górnej części okna z listy Define in wybierz Existing Style Sheet, a z listy rozwijanej URL wybierz Style.css. Z listy Category wybierz Layout, a następnie określ właściwośd float: left. Z listy Category wybierz Position, a następnie określ właściwości width: 200 px oraz height: 300 px. Kliknij OK. Postępuj podobnie z selektorem #DrugiObszarBoczny, tylko zmieo właściwośd float na right. W pliku Style.css standardowo jest już dodany selektor znacznika <body>. Kliknij go prawym przyciskiem myszy i wybierz Build Style. Określ właściwości font-family: Verdana, font-size: 8 pt i color: # Z listy Category wybierz Background, a następnie określ właściwośd backgroud-color: white. Z listy Category wybierz Box, a następnie określ właściwośd margin: 0. Upewnij się, że opcja Same for all jest zaznaczona. Kliknij OK. Otwórz plik SzablonStrony.master. W oknie Solution Explorer chwyd myszką plik Style.css i upuśd go w sekcji nagłówka strony za znacznikiem </title>. Zobacz jak zmienił się podgląd pliku. Przy pomocy narzędzi Visual Studio lub w kodzie pliku Style.css określ następujące style: #Menu: kolor tła: #55BBFF, wielkośd tekstu: 7.5pt #ObszarLogowania: wyrównanie tekstu (właściwośd text-align): do prawej, kolor tła #C3DBEA, margines wewnętrzny (ang. padding) z góry i dołu 5px, z lewej i prawej 10px #ObszarRoboczy: kolor tła #EEE, margines wewnętrzny (ang. padding) z góry i dołu 50px, z lewej i prawej 20px, margines z góry i dołu 0, z lewej i prawej 200px Strona 6-13

14 9. Dodaj logo do strony 10. Dodawaj stronę z zawartością 11. Sprawdzenie wyglądu strony w przeglądarce Do aplikacji dodaj katalog Images. Wybierz Website -> New folder, a następnie nazwij go Images. Do katalogu dodaj obrazek AWlogo.jpg. W oknie Solution Explorer wskaż nowo dodany folder, wybierz Website -> Add Existing Item, a następnie wskaż obrazek AWlogo.jpg. Usuo napis Logo na górze strony, a następnie w to miejsce dodaj kontrolkę Image i w oknie Properties w polu ImageUrl wpisz ~/Images/AWlogo.jpg. W oknie Solution Explorer wskaż nazwę aplikacji. Wybierz z menu opcję Websites -> Add New Item lub naciśnij kombinację Ctrl+Shift+A. Z wyświetlonego okna dialogowego wybierz następujące opcje: Templates: Web Form Language: Visual C# Place Code In Separate File: zaznaczona Select Master Page: zaznaczona Nazwa: Default.aspx Naciśnij przycisk Add. W oknie dialogowym Select a Master Page wybierz SzablonStrony.master, a następnie wciśnij OK. Zawartośd strony Default.aspx i wszystkich pozostałych można dodad w kontrolce Content. Aby zmienid zawartośd pozostałych części strony należy dokonad edycji strony wzorcowej. W oknie Solution Explorer kliknij prawym przyciskiem myszy plik Default.aspx i wybierz View In Browser. Strona w przeglądarce powinna wyglądad podobnie jak na Rys. 12. Rys. 12 Wygląd strony po zastosowaniu stylów Strona 6-14

15 Problem 2 (czas realizacji 25 min) Aby przetestowad szablon strony chciałbyś dodad stronę z ankietami wykonaną w dwiczeniu w module 4. Zadanie 1. Dodaj stronę do projektu 2. Usuo niepotrzebne znaczniki 3. Określ parametry 4. Dodaj kontrolkę Content 5. Dodaj do strony głównej odnośniki do ankiety Tok postępowania Wybierz Website -> Add Existing Item. Znajdź na dysku stronę Ankieta.aspx. Kliknij Add. Do projektu dodaj również katalog Adv z jego zawartością. Usuo następujące znaczniki ze strony: <!DOCTYPE> <html> <head> <body> <form> Nie zapomnij o znacznikach koocowych. Na stronie w dodaj atrybuty: MasterPageFile="~/SzablonStrony.master" Title="Ankieta" Po dodaj znacznik: <asp:content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> Na koocu strony po całej treści zamknij dodany znacznik </asp:content>. Do strony głównej dodaj odnośniki odpowiednio uruchamiający ankietę dla nowego klienta oraz dla osoby posiadającej już rower. Przetestuj działanie ankiety klikając na linki na stronie głównej. Strona 6-15

16 Problem 3 (czas realizacji 25 min) Klient jest bardzo zadowolony z wyniku Twoich prac. Chciałby, abyś dodał jeszcze elementy nawigacyjne do strony. Zaproponował, aby na stronie w miejscu, gdzie jest napis Menu pojawiło się prawdziwe menu z rozsuwanymi elementami. Zadanie 1. Dodaj nowe strony do projektu 2. Utwórz mapę witryny Tok postępowania Do aplikacji internetowej utworzonej w poprzednim zadaniu dodaj cztery nowe strony aspx. Nazwij je kolejno: Produkty.aspx, Szukaj.aspx, Uwagi.aspx oraz Informacje.aspx i dla każdej określ następujące właściwości: Language: Visual C# Place code in separate file: zaznaczona Select master page: zaznaczona W kolejnym oknie wybierz SzablonStrony.master i naciśnij Add. Strony dodajemy, aby po kliknięciu na pozycje menu nie pojawiła się informacja o błędzie. Wybierz z menu opcję Websites -> Add New Item lub naciśnij kombinację Ctrl+Shift+A. W wyświetlonym oknie dialogowym w obszarze Templates wybierz Site Map a w polu Nazwa wpisz Web.sitemap. Naciśnij przycisk Add. W głównym oknie aplikacji zostanie zaprezentowana zawartośd pliku. Zamieo zawartośd pliku na następującą: <?xml version="1.0" encoding="utf-8"?> <sitemap xmlns=" 1.0" > <sitemapnode> <sitemapnode url="default.aspx" title="strona główna" description="przenieś do strony głównej" /> <sitemapnode title="produkty" description="zapoznaj się z ofertą"> <sitemapnode url="produkty.aspx" title="przeglądaj" description="przejrzyj dostępne filmy" /> <sitemapnode url="szukaj.aspx" title="szukaj" description="wyszukaj po nazwie" /> </sitemapnode> <sitemapnode title="ankiety" description="wypełnij ankietę na stronie"> <sitemapnode url="ankieta.aspx?view=nowy" title="szukam roweru" description="określ preferowane produkty" /> <sitemapnode url="ankieta.aspx?view=wycieczki " title="szukam towarzystwa na wycieczki " description="opowiedz nam o sobie" /> </sitemapnode> <sitemapnode title="informacje" description="dowiedz się więcej o nas"> <sitemapnode url="informacje.aspx" title="o nas" description="dowiedz się więcej o nas" /> <sitemapnode url="uwagi.aspx" title="zgłoś uwagę" description="zgłoś uwagę odnośnie działania serwisu" /> </sitemapnode> </sitemapnode> </sitemap> Zapisz zmiany. Strona 6-16

17 3. Dodaj kontrolkę Menu 4. Określ wygląd kontrolki menu Przejdź do strony wzorcowej SzablonStrony.master. Przejdź do widoku Source. W miejsce napisu Menu wstaw kontrolkę SiteMapDataSource (okno Toolbox, sekcja Data) i w oknie Properties: w polu ID wpisz MapaSerwisu w polu ShowStartingNode z listy rozwijanej wybierz False kontrolkę Menu (okno Toolbox, sekcja Navigation): Obok dodanej kontrolki dodaj kontrolkę Dla kontrolki Menu (okno Toolbox, sekcja Navigation) i w oknie Properties: w polu ID wpisz MenuGlowne w polu DataSourceID wpisz MapaSerwisu w polu Orientation z listy rozwijanej wybierz Horizontal Zapisz zmiany i uruchom przygotowaną aplikację. Sprawdź wyświetlanie menu i możliwośd wybierania poszczególnych stron. Ponownie wybierz kontrolkę Menu MenuGlowne i w oknie Propoerties: Określ właściwości CssClass dla następujących elementów: w polu DynamicHoverStyle-CssClass wpisz ZaznaczonyElementMenu w polu DynamicMenuItemStyle-CssClass: wpisz ElementMenuRozwijanego w polu StaticHoverStyle-CssClass wpisz ZaznaczonyElementMenu w polu StaticMenuItemStyle-CssClass wpisz ElementMenuNadrzednego Do pliku Style.css dodaj następujące definicje stylów:.elementmenunadrzednego { color: #000033; font-weight: bold; padding: 3px 10px; }.ElementMenuRozwijanego { background: #F5F5F5; color: #000033; padding: 3px 10px; }.ZaznaczonyElementMenu { background: #000033; color: White; } Zapisz zmiany i uruchom przygotowaną aplikację. Sprawdź wyświetlanie menu. Strona 6-17

18 Problem 4 (czas realizacji 25 min) Twój klient jest bardzo zadowolony z Twoich postępów w projekcie. Na dzisiejszym spotkaniu pojawiła się nowa kwestia. Firma chciałby mied możliwośd szybkiej zmiany wyglądu strony bez konieczności ingerencji w jej kod. Zadanie 1. Dodaj kompozycje do projektu 2. Skopiuj plik css z głównego katalogu aplikacji do nowych kompozycji i odpowiednio przygotuj kompozycje CzerwonaSkorka 3. Określ aktywną kompozycją CzerwonaSkorka 4. Testowanie zmian Tok postępowania W oknie Solution Explorer kliknij prawym przyciskiem i wybierz Add ASP.NET Folder, a następnie Theme. Określ nazwę nowej kompozycji jako NiebieskaSkorka. Kliknij prawym przyciskiem myszy na folderze App_Themes i wybierz Add ASP.NET Folder, a następnie Theme. Określ nazwę kompozycji jako CzerwonaSkorka. Skopiuj plik Style.css do katalogu CzerwonaSkorka. Przenieś plik Style.css do katalogu NiebieskaSkorka. W nagłówku strony wzorcowej zmieo odniesienie do pliku CSS umieszczonego w katalogu NiebieskaSkorka. Zmieo style w kompozycji CzerwonaSkorka, tak, aby wyświetlana strona była w odcieniach czerwieni. Otwórz plik Web.config, a następnie odszukaj znacznika <pages>. Dodaj do niego właściwośd theme="czerwonaskorka", teraz ten znacznik ma wyglądad następująco: <pages theme="czerwonaskorka" > Zapisz zmiany i przetestuj aplikację w przeglądarce. Dlaczego w Visual Studio widad kompozycję NiebieskaSkorka, a w przeglądarce widad CzerwonaSkorka? Strona 6-18

19 Laboratorium rozszerzone Przygotuj projekt strony dla firmy Adventure Works sprzedającej rowery. Do tego celu możesz wykorzystad wybrany przez Ciebie szablon ze strony Open Source Web Design ( W ramach projektu zdefiniuj wspólny wygląd przy pomocy strony wzorcowej oraz kompozycji. Przygotuj i przetestuj co najmniej dwie różne kompozycje. Przygotuj też strukturę nowego serwisu. Zaplanuj, że w serii będą dostępne następujące strony (lub grupy stron): Strona główna strona zawierająca informacje ogólne o sprzedawanym towarze Nowości strona zawierająca informacje o nowościach Strona z informacją o produktach strony umożliwiające przeglądanie lub wyszukiwanie produktów Ankieta dla klientów ankieta dla klientów oraz ankieta opinie o stronie Informacja o firmie informacje o działalności firmy Zawartość serwisu strona zawiera mapę serwisu wyświetloną w postaci struktury Wyświetl strukturę w menu oraz na stronie Zawartosc.aspx umieśd kontrolkę wyświetlającą mapę serwis w postaci struktury. Strona 6-19