reklama

Začínáme s ASP.NET 2.0 – 8. díl: jednotný vzhled ASP.NET aplikací

V minulých dvou lekcích jsme se věnovali práci s daty na stránkách ASP.NET. Dnes zabrousíme do zcela jiné oblasti – zajištění jednotného vzhledu ASP.NET aplikací. Pro tento účel jsou zajímavé dvě technologie. První je skinování pomocí témat, které se stará o jednotný vzhled ovládacích prvků (barev, druhů písma apod.) Druhou technologií jsou tzv. master pages, které mají za úkol zajistit jednotné rozložení potřebných sekcí na stránce jako celku.

Skinování (themes)

Prakticky každý, kdo vytvářel webové stránky, se někdy setkal s technologií Cascading Style Sheets (CSS). CSS jsou v podstatě šablonou, která na jednom místě nastavuje vzhled a vlastnosti HTML značek. CSS například může říkat, že hlavička úrovně 2 je napsána velkým tučným modrým fontem Arial. Skinování v ASP.NET funguje na podobném principu, ale na vyšší úrovni.

Princip a použití témat

Skinování totiž nepracuje s jednotlivými HTML značkami, ale s ovládacími prvky ASP.NET jako s objekty. Skin mi například říká, že všechna tlačítka v mé aplikaci mají pozadí (vlastnost BackColor) nastavenou na námořnickou modř, anebo že všechny kalendáře mají vybraný den znázorněný tučně (vlastnost SelectedDayStyle.Font.Bold je nastavena na True).

Skinování v ASP.NET není v rozporu s technologií CSS. Jako součást tématu můžeme mít CSS soubor, kterým se pak zobrazení stránky rovněž řídí, anebo při definici skinu můžeme definovat, kterou CSS třídu bude vybraný den v kalendáři používat (vlastnost SelectedDayStyle.CssClass). CSS sjednocuje vzhled na úrovni HTML značek, zatímco skinování dělá totéž na úrovni objektů ovládacích prvků, mohou se tedy výborně doplňovat.

Pro první pokusy využijeme dvou připravených témat definovaných ve starter kitu Personal Web Site. Ve VWD si vytvoříme nový projekt podle tohoto starter kitu a v okně Solution Explorer se zaměříme na složku App_Themes:

Klepněte pro větší obrázek

V této systémové složce jsou umístěna témata, každá podsložka odpovídá jednomu tématu – v našem případě máme tedy k dispozici témata Black a White. V každém tématu jsou typicky obsaženy:

  • skiny - soubory s příponou .skin
  • CSS stylesheety, které jsou automaticky vloženy do hlaviček stránek, jež téma používají
  • další pomocné soubory (např. obrázky), na které se skiny a CSS stylesheety odkazují

Použití určitého tématu je možné nastavit buď pro celý web anebo pro každou stránku. Nastavení na úrovni webu se provádí v konfiguračním souboru web.config, kde je uvnitř elementu <system.web> vložen element <pages> s atributem theme. Přepnutí na černé téma tedy provedeme nastavením řádku:

<pages theme="Black"/>

a přepnutí na bílé téma přepsáním na:

<pages theme="White"/>

Úvodní stránka osobního portálu pak vypadá jedním z těchto způsobů.

Klepněte pro větší obrázek

Klepněte pro větší obrázek

Nastavení pro celý web je možné „přebít“ na úrovni jedné stránky v direktivě @Page, pomocí vlastnosti Theme například takto:

<%@ Page Language="C#" MasterPageFile="~/Default.master" Title="Titulek" CodeFile="Default.aspx.cs" Inherits="Default_aspx" Theme="Black" %>

Vytvoření vlastního tématu

Opustíme nyní ukázkové použití témat v personálním webu. Místo toho se vrátíme k našemu webu, který jsme používali pro zkoušení až do 7. dílu. Vytvoříme si vlastní téma jménem Divocina (to abychom neměli výčitky svědomí kvůli estetickému dojmu) a ukážeme si, jak pomocí něj můžeme změnit a sjednotit vzhled stránky ProchazeniKatalogu.aspx.

Nejprve si vytvoříme příslušnou složku. Zobrazíme-li kontextovou nabídku na našem webu v okně Solution Explorer, najdeme zde nabídku Add Folder/Theme Folder. Tím vytvoříme na webu složku App_Themes a v ní podsložku Theme1, kterou ihned přejmenujeme na Divocina. Zobrazíme si kontextovou nabídku na složce Divocina a vybereme si možnost Add New Item..., kde z nabídky typů vybereme Skin File. Jméno můžeme nechat libovolné, např. MujSkin.skin.

Skin soubory obsahují definice objektů s nastavením jejich vlastností ve tvaru velmi podobném jako ASPX stránky. Protože pro skin soubory není k dispozici grafický designér a ani editor nenabízí při psaní nápovědu, uchýlíme se k jednoduchému triku. Vytvoříme si novou stránku Pomocna.aspx, přepneme do zobrazení Design a z palety nástrojů na ni přeneseme prvek DropDownList. Nyní můžeme nastavit některé jeho vizuální vlastnosti – např. pozadí (BackColor) nastavíme na zelenou (Green), barvu písma (ForeColor) na červenou (Red) a tučnost písma (Font/Bold) na True. Nyní přepneme do zobrazení Source a myší navolíme celý prvek asp:DropDownList, který by měl vypadat zhruba takto:

<asp:DropDownList ID="DropDownList1" runat="server" BackColor="Green" Font-Bold="True" ForeColor="Red"></asp:DropDownList>

Tento text pak nakopírujeme do .skin souboru (např. MujSkin.skin) a vymažeme z něj text:

ID="DropDownList1"

takže ve .skin souboru zůstane pouze:

<asp:DropDownList ID="DropDownList1" runat="server" BackColor="Green" Font-Bold="True" ForeColor="Red"></asp:DropDownList>

Dalším prvkem, který upravíme bude GridView. Stránku Pomocna.aspx přepneme opět do zobrazení Design a přeneseme na ni prvek GridView z panelu nástrojů. Nastavíme některé jeho vizuální vlastnosti, např. barvu pozadí pro hlavičky řádků (HeaderStyle/BackColor) na červenou (Red), pozadí řádků (RowStyle/BackColor) na žlutou a pozadí střídavých řádků (AlternatingRowStyle/BackColor) na světle zelenou (LightGreen). Opět přepneme do pohledu Design, nakopírujeme celý prvek asp:GridView do našeho .skin souboru a analogicky z něj vymažeme

ID="GridView1"

takže nám zůstane

<asp:GridView runat="server"> <RowStyle BackColor="Yellow" /> <HeaderStyle BackColor="Red" ForeColor="Yellow" /> <AlternatingRowStyle BackColor="LightGreen" /> </asp:GridView>

Zbývá nám pouze zapnout naše téma Divocina, aby se projevilo na všech prvcích DropDownList a GridView na našem webu. Ještě před tím si můžeme v prohlížeči zobrazit stránku ProchazeniKatalogu.aspx, abychom si ověřili, že na ní zatím nejsou žádné změny patrné. Používání tématu zapneme v konfiguračním souboru web.config (pokud ho ve svém projektu ještě nemáme, vytvoříme si nový pomocí Add New Item.../Web Configuration File). Soubor otevřeme a do prvku system.web dopíšeme tučně zvýrazněný text:

<system.web> <pages theme="Divocina"/>

Po uložení změn ve všech souborech si znovu necháme zobrazit stránku ProchazeniKatalogu.aspx:

Klepněte pro větší obrázek

Jak vidíme, stránka nyní připomíná barvy amazonského pralesa. Jednoduchým použitím témat a skinů jsem zajistili jednotný (byť poněkud divoký) vzhled všech prvků DropDownList a GridView na našem webu.

Pokročilejší funkce témat

V práci se skiny lze použít i některé pokročilejší možnosti. První je možnost pojmenování skinů, kdy při definici skinu nastavíme vlastnost SkinID na nějaký identifikátor např. DuleziteTlacitko. Takový skin se pak nazývá named skin, zatímco pro skin bez jména je označení default skin. Při vytváření ovládacích prvků pak můžeme nastavit jejich vlastnost SkinID, čímž určíme, který pojmenovaný skin se použije – pro důležitá tlačítka tedy nastavíme SkinID=”DuleziteTlacitko”. Pokud tuto vlastnost nevyplníme, použije se automaticky default skin pro tlačítko.

Druhou možností je rozlišování vlastností Theme a StyleSheetTheme na celém webu nebo na stránce. Obě vlastnosti mají podobný efekt, liší se pouze svojí váhou při rozhodování o tom, jaká vlastnost prvku bude nakonec použita. ASP.NET používá pro rozhodnutí o vzhledu ovládacího prvku následující postup:

  • Je-li vlastnost definovaná v rámci skinů v Theme tématu, použije se
  • Není-li tomu tak a je-li vlastnost definovaná přímo na stránce u ovládacího prvku, použije se
  • Není-li tomu tak a je-li vlastnost definovaná v rámci skinů StyleSheetTheme tématu, použije se

Jinými slovy, Theme má přednost před nastavením jednotlivých prvků na stránce a zaručuje nám jednotný vzhled ovládacích prvků za každých okolností. Naproti tomu StyleSheetTheme je jakési doporučené výchozí nastavení, které může vývojář nastavením jednotlivých ovládacích prvků přepsat.

Více informací o použití skinů můžete najít např. v tomto článku.

Jednotné rozložení (master pages)

Master pages zajišťují jednotné rozložení webových stránek tak, aby jednotlivé stránky webu působily jednotným dojmem.

Jak fungují?

Master stránka je vlastně jakousi šablonou určující vzhled stránek, jež ji používají. Typická master stránka definuje hlavičku, patičku a levý pruh webové stránky. Stránky, jež tento master používají, pak zpravidla doplňují „vnitřek“ stránky k vnějším oblastem definovaných masterem. Podobný princip používají např. venkovské hudební skupiny, které si nechávají předtisknout plakáty s bílými místy, do kterých pak vepisují, kdy a kde se jejich produkce koná – master stránky fungují analogicky.

Dobrým příkladem je personální web, který jsme zkoumali i v případě témat. Vzhled master stránky je v souboru s příponou .master – otevřeme tedy soubor Default.master a přepneme do zobrazení Design. Na první pohled nepoznáme žádný rozdíl mezi normální stránkou a masterem – můžete na ně umisťovat ovládací prvky, nastavovat jejich vlastnosti, psát události apod. Jeden rozdíl ale existuje – existence prvku ContentPlaceHolder. Jedná se o speciální prvek, který bude vyplněn skutečným obsahem na stránkách používajících příslušný master (na každé master stránce může být i více pojmenovaných prvků typu ContentPlaceHolder).

Zajímavější bude otevřít některou stránku používající master. Otevřeme například stránku Resume.aspx a přepněme ji do zobrazení Design:

Klepněte pro větší obrázek

Vidíme, že oblasti definované na masteru jsou zašedlé a nemůžeme je upravovat. Naproti tomu ContentPlaceHolder označuje oblast, se kterou můžeme na stránce pracovat tak, jak jsme zvyklí – vytvářet zde ovládací prvky apod.

Zobrazíme-li si stránku v režimu Source, vidíme vazbu na master stránku hned na prvním řádku v direktivě @Page:

<%@ Page Language="C#" MasterPageFile="~/Default.master" ... %>

Za povšimnutí stojí ještě následující řádek:

<asp:content id="Content1" contentplaceholderid="Main" runat="server">

asp:content označuje speciální ovládací prvek, jehož jedinou úlohou je vyplnit prvek ContentPlaceHolder definovaný v master stránce, jehož ID je shodné s contentplaceholderid vlastností zde definovanou. Při používání VWD nás ovšem tyto podrobnosti nemusíš až tak zajímat.

Vytvoření master stránky

Po vysvětlení principů se pustíme do úpravy našeho pokusného projektu pro používání masteru. Vytvoření master stránky je jednoduché – v okně Solution Explorer vybereme z kontextové nabídky Add New Item..., jako typ vybereme Master Page a jméno zvolte Sablona.master.

Stránka bude mít hlavičku, patičku, boční lištu vlevo a hlavní obsah vpravo. Přepneme stránku Sablona.master do zobrazení Design a vymažeme z ní vložený prvek ContentPlaceHolder1. Z nabídky vložíme tabulku volbou Layout/ Insert Table, kde z nabídky šablon (Template) zvolíme Header, footer and side.

Nejprve upravíme hlavičku stránky. Navolíme myší horní pole tabulky a v okně Properties nastavíme pozadí (BgColor) na žlutou (Yellow). Na žlutě označeném poli tabulky si zobrazíme kontextovou nabídku a vybereme Resize/Resize Row, kde pak výšku nastavíme na 100px. Do políčka vepíšeme nějaký text (např. „Naše firma“), který můžeme pomocí nabídky na formátovací liště zvětšit na hlavičku první úrovně (Heading 1). Vytvoříme nový řádek a vložíme prvek SiteMapPath pro zobrazení navigace (můžeme pro něj použít Auto Format... pro vylepšení vzhledu) – viz obrázek dále.

Upravíme též patičku. Navolíme myší dolní pole tabulky a v okně Properties nastavíme pozadí (BgColor) na červenou (Red). Na červeně označeném poli tabulky si zobrazíme kontextovou nabídku a vybereme Resize/Resize Row, kde pak výšku nastavíme na 50px. Do políčka vepíšeme nějaký text (např. „ (C) Naše firma, 2005“), pro lepší efekt ho můžeme umístit na střed (Justify Center) tlačítkem ve formátovací liště nahoře – viz obrázek dále.

Nyní vytvoříme hlavní oblast. Stačí přetáhnout myší z panelu nástrojů prvek ContentPlaceHolder do pravého prostředního políčka tabulky a jeho jméno (ID) změníme z ContentPlaceHolder1 na HlavniObsah – viz obrázek:

Klepněte pro větší obrázek

Zbývá vytvoření levé navigační lišty. Navolíme myší levé prostřední pole tabulky a v okně Properties nastavíme pozadí (BgColor) na světle zelenou (LightGreen). Na světle zeleném označeném poli tabulky si zobrazíme kontextovou nabídku a vybereme Resize/Resize Column, kde pak šířku nastavíme na 150px. Do pole tabulky vložíme datový zdroj SiteMapDataSource a hned pod něj ovládací prvek TreeView. U prvku TreeView1 si zobrazíme jeho smart tag a zdroj dat (Choose Data Source) nastavíme na SiteMapDataSource1, rovněž můžeme upravit jeho vzhled použitím volby Auto Format... ze smart tagu nastavením např. na volbu Arrows.

Poslední úpravou bude nastavení odstupů (cellpadding) na 10 bodů a zrušení maximální výšky a šířky tabulky úpravou prvku <table> v zobrazení Source na:

<table border="0" cellpadding="10" cellspacing="0">

Master stránka by nyní po přepnutí do režimu Design měla vypadat podobně jako na obrázku výše. Stránku uložíme.

Stránky používající master

Vytvoření stránky používající master je velmi snadné. Založíme novou stránku, nazveme ji Ukazka2.aspx a na dialogu Add New Item zatrhněte možnost Select master page (viz obrázek):

Klepněte pro větší obrázek

V dalším dialogu Select a Master Page pak vybereme master stránku Sablona.master. Pokud stránku Ukazka2.aspx přepneme do zobrazení Design, můžeme editovat pouze oblast hlavního obsahu stránky. Hlavička, patička a levá lišta jsou zašedlé a nelze je měnit. Do pole Content1 vepíšeme libovolný text. Zobrazíme-li si stránku v prohlížeči, vidíme správnou funkci master stránky:

Klepněte pro větší obrázek

Poslední úlohou bude úprava existující stránky ProchazeniKatalogu.aspx pro používání naší master stránky. Stránku ProchazeniKatalogu.aspx si otevřeme v zobrazení Source a provedeme několik jednoduchých úprav, spočívajících ve vymazání standardních HTML značek a uzavření obsahu stránky do prvku asp:content.

Nejprve vymažeme na začátku stránky text:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server">

a nahradíme ho textem

<asp:Content ID="Content1" ContentPlaceHolderID="HlavniOblast" Runat="Server">

Podobně na konci stránky vymažeme značky

</form> </body> </html>

a nahradíme je značkou

</asp:Content>

Poslední nutnou úpravou je dopsání odkazu na master stránku do direktivy @Page, kam stačí doplnit tučně označený text:

<%@ Page Language="C#" MasterPageFile="~/Sablona.master" AutoEventWireup="true" CodeFile="ProchazeniKatalogu.aspx.cs" Inherits="ProchazeniKatalogu" %>

Tím jsme provedli nezbytné úpravy, po nichž můžeme stránku upravovat i v režimu Design anebo si ji v novém rozložení podle master stránky zobrazit v prohlížeči:

Klepněte pro větší obrázek

Úprava existující stránky tedy vyžadovala trochu ruční editace, ale výsledek stojí za to. Více informací o master pages lze najít např. v tomto článku.

Závěrem

Dnes jsem se věnovali sjednocení vzhledu stránek – jednotný vzhled ovládacích prvků lze zajistit pomocí témat a skinů, jednotné rozložení stránek pomocí master stránek. V příštím předposledním díle se pro změnu budeme věnovat zabezpečení webu – definici uživatelů, přihlašování na web, vytváření rolí a zabezpečení obsahu pouze pro uživatele v určité roli.

Neustále se opakující uzavření – pokud něco nebude fungovat jak by mělo, zkuste využít možnosti podpory zmíněné ve druhé části, zejména diskusní skupinu microsoft.public.cs.developer.

Témata článku: Software, Microsoft, Programování, Master, Skin, Item, Yellow, Arrows

7 komentářů

Nejnovější komentáře

  • Mah-Pee'-Yah-Too 25. 6. 2007 13:11:39
    Proč to neřešite nalinkováním JavaScriptů? Pak by snad až tak nevadilo, že...
  • Rudidlo, Rudidlo 8. 2. 2007 16:03:56
    Je možné použít stylesheettheme rodičovského webu, když mám definován...
  • Vladislav Korecký 16. 5. 2006 13:36:52
    Dobrý den,

    v článku píšete že se má na stránce aspx, která využívá...
reklama
Určitě si přečtěte

UPC překopli páteřní kabel. V Brně i druhý den nejede internet ani kabelovka

UPC překopli páteřní kabel. V Brně i druhý den nejede internet ani kabelovka

** V Brně byl velký výpadek služeb UPC ** Důvodem je překopnutý páteřní kabel ** V některých lokalitách služby stále nefungují

5.  12.  2016 | Jakub Čížek | 102

17 expertek Microsoftu předpovědělo rok 2027. Splní se alespoň něco?

17 expertek Microsoftu předpovědělo rok 2027. Splní se alespoň něco?

** Zmizí klasické vyhledávače ** Budeme programovat buňky ** Kvantové počítače překonají šifry

6.  12.  2016 | Jakub Čížek | 36

11 tipů na dobrý stolní počítač: od základu po herní mašiny

11 tipů na dobrý stolní počítač: od základu po herní mašiny

** Postavte si stolní počítač! Máme pro vás 11 vzorových sestav s rozpisem komponent ** Většina tipů cílí na hráče, věnujeme se ale i základnímu PC a počítačům na střih videa ** Nadělte si nový počítač třeba pod stromeček

5.  12.  2016 | Adam Kahánek | 74


reklama