UWAGA! Promocja dla firm - MICROSOFT OFFICE 365  na 12 miesiecy ZA DARMO! Tylko na CentrumXP.pl!
Wielka promocja Office 365 na CentrumXP.pl!
Do góry Skomentuj

09. Mechanizm Master Pages. Tworzenie mapy witryny.

09. Mechanizm Master Pages. Tworzenie mapy witryny.

Autor: Piotr Gaszewski Opublikowano: 27 stycznia 2006 Odsłon: 64 926

Problemem, z którym często spotykali się twórcy aplikacji ASP.NET, było ujednolicenie ich wyglądu. Wyobraźmy sobie sytuację, w której tworzymy witrynę, składającą się w kilkudziesięciu lub nawet większej ilości formatek. Formatki te mają jednolity graficznie wygląd. Wersje testową naszej strony ogląda klient, który kategorycznie żąda zmiany położenia nazwy, reprezentowanej przez siebie firmy. W tym momencie, chcąc w dalszym ciągu zachować jednolity wygląd wszystkich formatek, twórcy strony musieli modyfikować zawartość wszystkich, co było dość żmudnym i czasochłonnym zajęciem. Częściowo, problem ten rozwiązywało stosowanie własnych kontrolek użytkownika (Web User Control), o których mowa będzie w dalszej części kursu. ASP.NET dwa zero udostępnia prosty w zastosowaniu mechanizm, dzięki któremu w prosty sposób będziemy mogli ujednolicić wygląd wszystkich formatek wchodzących w skład naszej aplikacji.

Wyobraźmy sobie sytuację, w której zajmujemy się tworzeniem aplikacji ASP.NET. Wszystkie formatki, wchodzące w skład naszej aplikacji muszą charakteryzować się jednolitym wyglądem, mają mieć kolejno: tytuł witryny w lewym górnym rogu, menu, umożliwiające nawigację po witrynie z lewej strony, oraz stopkę redakcyjną na samym dole. Oczywiście najprostszym rozwiązaniem byłoby stworzenie takiego układu oddzielnie na każdej formatce. Jednak, gdybyśmy chcieli wprowadzić zmiany w opisywanym układzie, bardzo szybko zorientujemy się, że takie rozwiązanie nie jest rozwiązaniem optymalnym. Natomiast w takim przypadku idealnie sprawdzi się mechanizm Master Page.

Pierwszym czynnością, którą będziemy musieli uczynić, będzie dodanie do projektu nowego elementu. W oknie Visual Studio wybieramy kolejno: "Website" -> "Add New Item". Następnie wybieramy obiekt Master Page. Pozostawiamy jego domyślną nazwę ("MasterPage.master") i naciskamy przycisk "Add".

Widzimy, że obiekt MasterPage nie różni się wiele od "zwykłej" formatki. Wyjątkiem jest fakt, że umieszczony jest na niej obiekt klasy ContentPlaceHolder. Reprezentuje on obszar, który będzie mógł być uzupełniany na stronach wykorzystujących tworzoną przez nas MasterPage.

Zmodyfikujmy teraz zawartość obiektu MasterPage, w następujący sposób:

Spróbujmy wykorzystać teraz stworzony układ na jednej z "właściwych" formatek wchodzących w skład witryny. W oknie Visual Studio wybieramy opcję "Website" -> "Add New Item" i wybieramy obiekt "Web Form". Przed naciśnięciem przycisku "Add" musimy zaznaczyć opcję: "Select master page". Wówczas, kolejnym krokiem, związanym z dodaniem nowej formatki, będzie wybór odpowiedniego szablonu MasterPage.

Wybieramy stworzoną przez nas uprzednio stronę i naciskamy "OK.". Nowo dodana formatka, wyglądać będzie w oknie Visual Studio następująco:

Zauważamy, że możemy edytować tylko zawartość obszaru, zatytułowanego "Content". Obszar ten jest reprezentowany na stronie "głównej" przez kontrolkę "ContentPlaceHolder". Chcąc mieć możliwość wprowadzania zmian w więcej niż jednym obszarze strony, edytując zawartość strony MasterPage, musimy dodać po prostu więcej tego typu obiektów.

Spróbujmy, zatem uzupełnić w jakiś sposób zawartość naszej nowej formatki. Najprościej będzie wstawić jako jej zawartość po prostu łańcuch znakowy np. "Witam na stronie głównej mojej nowej witryny". Po wykonaniu tej czynności uruchamiamy stronę w oknie przeglądarki.

Brakującym elementem na naszej stronie jest jeszcze menu, które powinno znajdować się w lewej kolumnie na stronie. ASP.NET 2.0 udostępnia kilka niezwykle prostych sposobów tworzenia systemów umożliwiających programistom tworzenie systemu nawigacji między formatkami wchodzącymi w skład aplikacji www. Niektóre kontrolki, które możemy wykorzystać do tego celu to: SiteMapPath, Menu, czy TreeView. Wszystkie one wykorzystują do działania plik, zawierający tzw. "mapę witryny" (application site map). Spróbujmy dodać do naszego projektu plik tego typu. W tym celu w oknie Visual Studio klikamy kolejno: Website -> Add New Item i wybieramy Obiekt typu Site Map. Na początku pozostawiamy jego domyślną nazwę (Web.sitemap) i klikamy przycisk "Add". Otwórzmy teraz nowo dodany plik w oknie Visual Studio. Jego zawartość powinna przedstawiać się następująco:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="" title="" description="">
        <siteMapNode url="" title="" description="" />
        <siteMapNode url="" title="" description="" />
    </siteMapNode>
</siteMap>

Widzimy, że plik zawierający mapę witryny jest w rzeczywistości plikiem w formacie xml. W pliku tym możemy zdefiniować mapę naszej witryny. Zakładamy, że ma ona budowę hierarchiczną. Nasz plik Web.sitemap składa się z wielu elementów o nazwie: "siteMapNode". Aby zrozumieć jego zawartość wymagana jest podstawowa znajomość języka xml. W najbardziej możliwym skrócie – mamy tu do czynienia z językiem, definiującym strukturę obiektów za pomocą znaczników. Za pomocą xml-a możemy opisać praktycznie dowolny fragment rzeczywistości. Wyobraźmy sobie, że chcemy za pomocą wspomnianego języka przechowywać informacje na temat naszego miasta. Przykładowy plik zawierający tego typu wiadomość może wyglądać następująco:

<?xml version="1.0" encoding="utf-8" ?>
<Miasto />

Pierwsza linia z pliku, zawiera informacje o wersji języka oraz standardzie kodowania. Kolejne linie mogą zawierać wprowadzane przez użytkowników informacje. Powyższy plik ten nie zawiera jednak żadnych przydatnych w praktyce wiadomości. Chcąc przechować konkretne informacje na temat naszego miasta, możemy to zrobić w następujący sposób:

<?xml version="1.0" encoding="utf-8" ?>
<Miasto nazwa="Mława" ilosc_mieszkancow="30 000"/>

Chcąc przechowywać informacje na temat wielu miast dodajemy po prostu kolejne linie do pliku.

<?xml version="1.0" encoding="utf-8" ?>
<Miasto nazwa="Mława" ilosc_mieszkancow="30 000"/>
<Miasto nazwa="Radom" ilosc_mieszkancow="230 000"/>
<Miasto nazwa="Kraków" ilosc_mieszkancow="760 000"/>

Wyobraźmy sobie teraz, że chcemy przechować bardziej szczegółowe informacje na temat pewnych elementów miasta, na przykład szpitali lub muzeów. Liczby tych elementów mogą różnić się w zależności od miasta, każdy z nich charakteryzują ponadto pewne unikalne cechy. Chcąc zapisać informacje na temat szpitali, znajdujących się w konkretnym mieście postępujemy następująco:

<Miasto nazwa="Postrzynin" ilosc_mieszkancow="30 000">
    <szpital nazwa="Dobrej Nadziei" adres="Jana Pawła 33" />
    <szpital nazwa="imienia Anny Dobrskiej" adres="Słona 23" />
    <muzeum nazwa="Powstania Styczniowego" adres="Wolińska 12 m.2" />
</Miasto>

Chcąc szczegółowo opisać elementy określonego szpitala lub muzeum postępujemy analogicznie.

Wróćmy teraz do naszej mapy witryny. Definiuje ona w podobny sposób strony wchodzące w skład naszej aplikacji internetowej. Centralnym elementem pliku jest znacznik SiteMap, posiadający jeden parametr, definiujący charakterystyczny dla siebie schemat. Zazwyczaj nie będziemy ingerować w zawartość tej linii. O wiele bardziej interesują nas natomiast kolejne znaczniki o nazwie siteMapNode, charakteryzowany przez trzy podstawowe właściwości. Pierwszą z nich jest "url", która określa adres internetowy pliku, wchodzącego w skład aplikacji, kolejna – "title" – definiuje nazwę, która będzie reprezentować daną stroną na formatkach, zawierających kontrolki, korzystające z danej mapy witryny. Ostania właściwość – "description" – zawiera opis, który będzie pojawiał się na stronie, po najechaniu na odnośnik do opisanej w naszym dokumencie strony.

Przykładowa linia wchodząca w skład naszej mapy witryny, może wyglądać następująco:

<siteMapNode url="Default.aspx" title="Strona główna" description="Przejdź na stronę główną serwisu">

Wykorzystując mapy witryny możemy również dzielić strony, wchodzące w skład naszej aplikacji na grupy. Dobrze taką sytuację przedstawia mapa, która mogłaby być wykorzystana przez twórców wirtyny, poświęconej aktualnością filmowym i muzycznym.

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="Filmy.aspx" title="Filmy – strona główna" description="">
        <siteMapNode url="Filmy_nowe.aspx" title="Aktualności" description="" />
        <siteMapNode url="Filmy_zapowiedzi.aspx" title="Zapowiedzi" description="" />
        <siteMapNode url="Filmy_recenzje.aspx" title="Recenzje" description="" />
    </siteMapNode>
    <siteMapNode url="Muzyka.aspx" title="Muzyka – strona główna" description="">
        <siteMapNode url="Muzyka_nowe.aspx" title="Aktualności" description="" />
        <siteMapNode url="Muzyka_zapowiedzi.aspx" title="Zapowiedzi" description="" />
        <siteMapNode url="Muzyka_recenzje.aspx" title="Recenzje płyt" description="" />
        <siteMapNode url="Muzyka_koncerty.aspx" title="Koncerty" description="" />
    </siteMapNode>
</siteMap>

Jak zapewnie zauważyliście w powyższym kodzie pozostawiono puste właściwości "description". Spowoduje to, że po najechaniu myszką na określony w naszym pliku odnośnik, nie będzie pojawiać się stosowna podpowiedź dla użytkownika. W podobny sposób możemy pozostawić puste pozostałe atrybuty znacznika "siteMapNode". Przy tworzeniu mapy witryny możemy również wykorzystać kilka innych atrybutów. Zostały one opisane szczegółowo w dokumentacji Microsoft .NET Framework.

Zobacz również

Komentarze

"Zmodyfikujmy teraz zawartość obiektu MasterPage, w następujący sposób:" Mógłby ktoś wytłumaczyć jak to zostało zmodyfikowane?
kober, 12 grudnia 2007, 22:11
Zostały utworzone tabele
Ziajek, 26 grudnia 2007, 19:43
Jak zrobić, by SiteMap"a wyświetlała sie w lewej kolumnie tabeli? By w ogóle się wyświetlała, bo tu jest tylko podany sposób jej wstawienia do projektu...
Zenek, 27 stycznia 2008, 20:04
Zenek, przenies sobie z toolbara kontrolke TreeView na master page. ;)
gordon, 19 lutego 2008, 12:47
Ale to jest beznadziejnie wytlumaczone!!! "...teraz zawartość obiektu MasterPage, w następujący sposób:..." i nie ma napisane jak sie robi te ramki a ta rada o TreeView jeszcze lepsza, wiadomo ze jak ktos to czyta to nie ma pojecia o tym programie wiec jak ktos pisze cos takiego to niech pisze szczegolowo a nie ogolnikowo!!! Bo kto lapie sie w tych ogolnikach wie takie rzeczy i nie bedzie czytal takich rzeczy!!!
massakra, 19 marca 2008, 01:34
Popieram przedmówcę, ten rozdział ciut słaby...
wyjec_z_Pączy, 20 marca 2008, 18:21
O tym jak sobie menu wrzucić: http://www.microsoft.com/poland/developer/net/podrecznik/customizing-01.mspx
Piotr, 26 marca 2008, 11:31
Na wskazanym wyżej przez Piotra linku znajduje się bardzo dobry kurs
kwaq, 8 kwietnia 2008, 14:08
"ASP.NET 2.0 udostępnia kilka niezwykle prostych sposobów tworzenia systemów umożliwiających programistą tworzenie systemu nawigacji między formatkami wchodzącymi w skład aplikacji www" pisze się: programistOM
beton, 6 czerwca 2008, 14:43
szczerze mowiac to przegladajac te linki do tej pory nie wiem jak to zmodyfikowac bo nigdy czegos takiego nie robilem
H, 18 sierpnia 2008, 16:58
[W oknie Visual Studio wybieramy opcję "Website" -> "Add New Item" i wybieramy obiekt "Web Form"."> - według mnie to "Web Content Form"! Co z resztą doskonale tłumaczy tekst wyświetlający się pod Item-em: "A form for Web Applications that is built from a Master Page".
W każdym razie, podpisuję się pod komentarzami poprzedników. Tutek napisany troche ogólnikowo i po łebkach. Dla początkujących (bo to dla nich jest przecież stworzony) jest zbyt mało szczegółowy.

Poncki, 30 listopada 2009, 18:48
Czyli nie wspomniano o: Z grupy Data
w przyborniku Toolbox przeciągnij na stronę wzorcową formant SiteMapDataSource
Z grupy Navigation
w przyborniku Toolbox przeciągnij formant TreeView
W menu Tasks
formantu TreeView
w polu Choose Data Source
kliknij opcję SiteMapDataSource1
Z grupy Navigation
w przyborniku Toolbox przeciągnij formant SiteMapPath
Potem tworzymy nowe form o nazwach dla tych miast i w *.master podajemy do nich url. THE END

Cro, 27 lutego 2010, 21:44
Nic z tego nie rozumiem ;/ ..
agata, 8 października 2010, 13:27
Ogólnie to bardzo marnej jakości cały ten KURS ASP, jednak dużo jest informacji jak dla mnie - osoby która pierwszy raz tym się interesuje. Dzięki licznym błędom i powierzchownemu opisowi samemu trzeba pogrzebać i pomyśleć o co autorowi chodziło i w jaki sposób doszedł do poszczególnych etapów. Jakbym miał ocenić ten materiał szkoleniowy, to bardzo marnej jakości. Widać, że napisane przez osobę, która w tym grzebie i się zna, ale nie potrafi przekazać wiedzy dalej. Są też plusy. Może długo nie szukałem, ale jest to chyba jedyne źródło jakie znalazłem i jest dla mnie bardzo dobrym materiałem startowym :-)
Jerry, 6 kwietnia 2011, 13:06
Ten rozdzial troche slabo wytlumaczony, widac ze autor sie spieszyl , czego nei mozna powiedziec wielu poprzednich. Prosba do Autora: mozna by troche wieccej czasu poswiecic na ta lekcje
-Rolo, 13 sierpnia 2011, 14:35
Troche ostatnio zacząłem robić w ASP (uczę się z innego kursu) i chciałem ogarnąć temat MasterPage i Content itd... A tu jakieś pierdaczenie o xmlu o jakichś miastach:) Gdybym nie pracował wcześniej z asp to bym wogóle nic nie skumał z tego rozdziału. Tak jak kurs C# był wmiare fajnie wytłumaczony tak tutaj daję 1/5. Masakra. Przez takie amatorskie artykuły ludzie zrażają się do ASP i Visual Studio a to naprawde jest łatwe i fajne. Pozdrawiam
Radek, 16 grudnia 2011, 12:58

Dodaj swój komentarz

Zasady publikacji komentarzyZasady publikacji komentarzy

Redakcja CentrumXP.pl nie odpowiada za treść komentarzy publikowanych na stronach Portalu
i zastrzega sobie prawo do usuwania wypowiedzi, które:

  • zawierają słowa wulgarne, obraźliwe, prowokujące i inne naruszające dobre obyczaje;
  • są jedynie próbami reklamowania stron internetowych (spamowanie poprzez umieszczanie linków);
  • przyczyniają się do złamania prawa bądź warunków licencyjnych oprogramowania (cracki, seriale, torrenty itp.);
  • zawierają dane osobowe, teleadresowe, adresy mailowe lub numery GG;
  • merytorycznie nie wnoszą nic do dyskusji lub nie mają związku z tematem komentowanego newsa, artykułu bądź pliku.

Autor:

Komentarz:

Dodaj komentarz