Közös kinézet Mester oldal, témák, skin-ek, css Webalkalkalmazás fejlesztése ASP.NET-ben Krizsán Zoltán
Oldalak közös szerkezete probléma: oldalaknak azonos szerkezet szükséges (menü, logo, fejrész, lábrész, …) de mellette egyedi adatok is (title, egyéb mezők) régi megoldás: sablon fájl, majd új létrehozás ez alapján elkészült több száz, és ha változik a koncepció? asp.net megoldás: mester oldal
Mester oldal koncepció
Mester oldal asp.net oldal *.master kiterjesztéssel. tartalma: statikus szöveg, HTML elem, szerver vezérlő, 1 vagy több ContentPlaceHolder. Lehet benne default tartalom. Általában definiálja a html oldal szekcióit: html, head, form.
Mester oldal példa <%@ Master Language="C#" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> <!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>Master page title</title> </head> <body> <form id="form1" runat="server"> <table> <tr> <td><asp:contentplaceholder id="Main" runat="server" /></td> <td><asp:contentplaceholder id="Footer" runat="server„ /></td> </tr> </table> </form> </body> </html>
Tartalom oldal Össze kell kötni a mester oldallal oldal direktíva tartalmak <%@ Page Language="C#" MasterPageFile="~/MasterPages/Master1.master" Title="Content Page"%> Content elemek, melynek a ContentPlaceHoldeId megfelelő.
Mester oldal használatának előnyei Központosított logikai létrehozása Központosított felület részek (menü) Definiálja a közös szerkezetet az oldalaknak Kívülről nem látszik, de a rendszer összefűzi a mester és tartalom oldalak kódját
mester oldal feldolgozása A mester és a tartalom oldalakat összefésülik, de az a tartalom környezetében fut: a mester kódja is (request) a relatív útvonalak a tartalomhoz képest (külső erőforrások, pl. kép) a mester oldalon elhelyezett szerver vezérlők hivatkozásai módosulnak automatikusan (pl.: ImageUrl ). a mester oldalon elhelyezett nem szerver vezérlők nem módosulnak, ezért használjunk mindig szerver vezérlőket!
Mester oldal - téma Mester oldalnak nem lehet témát definiálni (kivétel keletkezik) A tartalom oldalnál oldják fel a témát, de az érvényesül a mester oldal tartalmára is
Mester oldal beállítása Oldal szinten: <%@ Page Language="C#" MasterPageFile="MySite.Master" %> Webalaklmazás szinten (web.config): <pages masterPageFile="MySite.Master" /> web mappákra (web.config)
Mester, tartalom oldal - események Content page PreInit event. Master page controls Init event. Content controls Init event. Master page Init event. Content page Init event. Content page Load event. Master page Load event. Master page controls Load event. Content page controls Load event. Content page PreRender event. Master page PreRender event. Master page controls PreRender event. Content page controls PreRender event. Master page controls Unload event. Content page controls Unload event. Master page Unload event. Content page Unload event.
Mester oldal elemeinek elérése a tartalom oldalból MasterType direktíva hozzáadása a tartalom oldalhoz <%@ MasterType virtualpath="~/Masters/Master1.master" %> Tartalom oldalban használhatjuk a Master nyilvános tulajdonságait. Így már a kiterjesztett saját mester oldalt látjuk. vagy Master.FindControl
Mester oldal létrehozása vs 2010
Tartalom oldal létrehozása vs 2010
Mester oldal beállítása tartalom oldalhoz vs 2010
Mester oldal - gyakorlat Walkthrough: Creating and Using ASP.NET Master Pages in Visual Web Developer
Téma Közös kinézetet biztosítja Tartalma lehet: szkinek (kötelező legalább 1), css, képek, erőforrások VS 2012 segít a téma kiválasztásában VS 2012 segít a skin kiválasztásában, ha téma már ki van.
szkín *.skin kiterjesztésű fájl szerver vezérlők tulajdonságainak közös beállítása (1 vagy több) nem lehet a vezérlő definícióban id! 2 fajtája van: alapértelmezett – default automatikus érvényesül minden vezérlőre, amelynek nincs SkinID beállítva. nevesített – named explicit érvényesül a vezérlő SkinID tulajdonsága alapján. Kliens nem tudja, hogy a tulajdonság szkinből jött e. Csak bizonyos tulajdonságokat lehet ( ThemeableAttribute)
Téma hozzáadása vs 2010
globális, lokális téma %windows%\Microsoft.NET\Framework\version\ASP. NETClientFiles\Themes lokális App_theme mappán belüli mappák.
Téma beállítása <%@ Page Theme="ThemeName" %> <%@ Page StyleSheetTheme="ThemeName" %> <configuration> <system.web> <pages theme="ThemeName" /> </system.web> </configuration> <configuration> <system.web> <pages styleSheetTheme="Themename" /> </system.web> </configuration>
Téma tiltás oldalra, direktívával: <%@ Page EnableTheming="false" %> egy vezérlőre tulajdonsággal: <asp:Calendar id="Calendar1" runat="server" EnableTheming="false" />
css kezelés – új bejegyzés hozzáadása
css kezelés – új bejegyzés hozzáadása II
Gyakorlat How to: Define ASP.NET Page Themes Walkthrough: Customizing a Web Site Using Themes in Visual Studio Walkthrough: Creating User-Selectable Themes