Előadást letölteni
Az előadás letöltése folymat van. Kérjük, várjon
1
Közös kinézet Mester oldal, témák, skin-ek, css Webalkalkalmazás fejlesztése ASP.NET-ben Krizsán Zoltán
2
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
3
Mester oldal koncepció
4
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.
5
Mester oldal példa Master Language="C#" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <html xmlns=" > <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>
6
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ő.
7
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
8
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!
9
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
10
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)
11
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.
12
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
13
Mester oldal létrehozása vs 2010
14
Tartalom oldal létrehozása vs 2010
15
Mester oldal beállítása tartalom oldalhoz vs 2010
16
Mester oldal - gyakorlat
Walkthrough: Creating and Using ASP.NET Master Pages in Visual Web Developer
17
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.
18
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)
19
Téma hozzáadása vs 2010
20
globális, lokális téma %windows%\Microsoft.NET\Framework\version\ASP. NETClientFiles\Themes lokális App_theme mappán belüli mappák.
21
Téma beállítása Theme="ThemeName" %> StyleSheetTheme="ThemeName" %> <configuration> <system.web> <pages theme="ThemeName" /> </system.web> </configuration> <configuration> <system.web> <pages styleSheetTheme="Themename" /> </system.web> </configuration>
22
Téma tiltás oldalra, direktívával: EnableTheming="false" %> egy vezérlőre tulajdonsággal: <asp:Calendar id="Calendar1" runat="server" EnableTheming="false" />
23
css kezelés – új bejegyzés hozzáadása
24
css kezelés – új bejegyzés hozzáadása II
25
Gyakorlat How to: Define ASP.NET Page Themes
Walkthrough: Customizing a Web Site Using Themes in Visual Studio Walkthrough: Creating User-Selectable Themes
Hasonló előadás
