Kereskényi Róbert MSDN Kompetencia Központ Budapesti Műszaki és Gazdaságtudományi Egyetem Automatizálási és Alkalmazott Informatikai Tanszék ASP.NET 2.0 alkalmazások arculata és testreszabása

2 Tartalom  Személyre szabhatóság  Felhasználói élmény  Mesteroldalak  Témák  Navigáció  Lokalizáció

3 Webkijelző keretrendszer  Keretrendszer portál stílusú alkalmazásokhoz  System.Web.UI.WebControls.WebParts  Gazdag UI minimális kód árán  Fogd-és-vidd átrendezés  Megjelenés, viselkedés, stb. szerkesztése  Automatikus személyre szabhatóság  Összekapcsolás, üzenetek

4 WebPartManager, WebPartZone  WebPartManager  Oldalanként egy van  Nem vizuális vezérlőelem  Az oldalon lévő webkijelzőket menedzseli  WebPartZone  Zónákat definiál egy oldalon  Ebben lehetnek majd a webkijelzők  Definiálja a webkijelzők megjelenését  WebPartChrome – címsor és keret

5 WebPart  Webkijelző zónákban lévő kontrollok  WebControls, UserControls, CustomControls  Ha nem implementálja IWebPart-ot  GenericWebPart-ba csomagolódik  Webkijelző tulajdonságokat kap: Title, Description,...

6 Példa WebPartzone WebPart Címsor Keret Menü gombok

7 WebPartManager.DisplayMode  Get/Set az oldal megjelenítési módjára ÉrtékLeírás BrowserDisplayMode"Normal" mód; szerkesztés nélkül EditDisplayModeWebkijelzők kinézetének és viselkedésének szerkesztése DesignDisplayModeWebkijelzők drag-and-drop mozgatása a zónákban CatalogDisplayModeWebkijelzők hozzáadása az oldalhoz ConnectDisplayModeWebkijelzők összekapcsolásának lehetősége

8 CatalogZone  CatalogZone  CatalogPart vezérlőket tartalmaz  Ezekből webkijelzőket tehetünk fel az oldalunkra  DeclarativeCatalogPart  Fejlesztő által definiált lista  PageCatalogPart  Bezárt webkijelzők listája  ImportCatalogPart  webkijelzőket importálhatunk fájlból

9 EditorZone  EditorPart vezérlőket tartalmaz  Webkijelzők kinézetét szerkeszthetjük  AppearanceEditorPart  Title, width, height, …  BehaviorEditorPart  Edit, Close, Minimize button  LayoutEditorPart  Chrome State, Zone, Zone Index  PropertyGridEditorPart  Saját Property-k szerkesztése

10 PropertyGridEditorPart  Saját tulajdonságok szerkesztése futás közben  [WebBrowsable] Így néz ki felületen Ezáltal megjelenik majd PropertyGridEditorPart -on string _stocks; // e.g., "MSFT,INTC,AMZN" [WebBrowsable] public string Stocks { get { return _stocks; } set { _stocks = value; } } string _stocks; // e.g., "MSFT,INTC,AMZN" [WebBrowsable] public string Stocks { get { return _stocks; } set { _stocks = value; } }

11 Webkijelzők együttműködése  A webkijelzők képesek együttműködni  Üzenetet küldeni  Üzenetet fogadni  Adott interfészen keresztül  WebPartManager felügyeli  Kikeresi az interfészt a szolgáltatótól  Átadja a fogyasztónak  Statikus, dinamikus összekapcsolás

12 Webkijelzők együttműködése  Connection Provider  Egy metódusban visszaadja az interfészt  [ConnectionProvider] attribútum  Connection Consumer  Metódusban megkapja az interfészt  [ConnectionConsumer] attribútum

13 Static Connections  Statikusan definiált a WebPartManager elemén belül   <asp:Connection ID="ZipCodeConnection" Runat="server" ProviderID="Weather1" ProviderConnectionPointID="ZipCodeProvider" ConsumerID="News1" ConsumerConnectionPointID="ZipCodeConsumer" /> <asp:Connection ID="ZipCodeConnection" Runat="server" ProviderID="Weather1" ProviderConnectionPointID="ZipCodeProvider" ConsumerID="News1" ConsumerConnectionPointID="ZipCodeConsumer" />

14 Személyre szabhatóság  Automatikusan eltárolja a webkijelzők tulajdonságait  felhasználónként vagy közösen  Layout, kinézet, …  Saját property, ami [Personalizable]  PersonalizationAdministration osztály  Provider-alapú  rugalmas

15 Webkijelzők

16 Tartalom  Személyre szabhatóság  Felhasználói élmény  Mesteroldalak  Témák  Navigáció  Lokalizáció

17 Mesteroldalak  Vizuális öröklés Mesteroldal Tartalom oldal

18 Mesteroldalak működése  Mester oldal tartalmazza a közös tartalmat és tartalom helyőrzőket ( )  Tartalom oldal hivatkozik a mesterre és kitölti a helyőrzőket ( ) Site.masterdefault.aspx Content Content- PlaceHolder

19 Mester oldal definiálása Webes megoldások ASP.NET 2.0 alapokon Webes megoldások ASP.NET 2.0 alapokon

20 Mester oldal alkalmazása  Egy oldalra (.aspx)  Az egész webhelyre (Web.config) Ez a szöveg jelenik meg a mester oldalon definiált "Main" nevű kontrolban Ez a szöveg jelenik meg a mester oldalon definiált "Main" nevű kontrolban … …

21 Alapértelmezett tartalom  Tartalom helyőrzőknek lehet saját tartalmuk (alapértelmezett tartalom)  Ez csak akkor jelenik meg ha a tartalom oldal nem tölti ezt ki... This is default content that will appear in the absence of a matching Content control in a content page... This is default content that will appear in the absence of a matching Content control in a content page

22 Mesteroldal mesteroldala  Mesteroldalak egymásba ágyazhatók  Ha egy mesteroldalnak van mesteroldala, akkor az alsóbb mesteroldal  Tölti ki a felsőbb helyőrzőit  De neki is lehetnek saját helyőrzői  Csak forrás nézetben (nincs design támogatás)......

23 Elérés kódból  Page.MasterPageFile  Master beállítása futási időben  Pre_Init fázisban vagy hamarabb  Page.Master  System.Web.UI.Page új tulajdonsága  Referencia a mester oldalra  NULL ha nincs mesteroldal  A mester vezérlőinek elérése  A mester public és protected metódusainak és tulajdonságainak elérése  A mester és a tartalom oldalak kód szintű összekapcsolása

24 Gyengén típusos mesteroldal Tartalom oldal Mester oldal ((Label) Master.FindControl ("lblTitle")).Text = "Orders";

25 Erősen típusos mesteroldal Tartalom oldal Mester oldal.aspx.cs.aspx.cs Master.MasterTitle.Text = "Orders"; public Label MasterTitle { get { return this.lblTitle; } set { this.lblTitle = value; } } public Label MasterTitle { get { return this.lblTitle; } set { this.lblTitle = value; } }

26 URL Rebasing  URL hivatkozások a mester oldalban gondot okozhatnak, ha  Mester és tartalom oldal fizikailag külön helyen van  Mester oldalon relatív URL hivatkozás  Megoldás:  Abszolút (/MainPage.aspx) vagy  Alkalmazás relatív (~/MainPage.aspx) URL-ek használata a mesteroldalon \Level1.master MainPage \Default\Default.aspx \Level1.master MainPage \Default\Default.aspx MainPage hivatkozás URL-je: \Default\MainPage.aspx

27 Mester oldalak

28 Tartalom  Személyre szabhatóság  Felhasználói élmény  Mesteroldalak  Témák  Navigáció  Lokalizáció

29 Témák és bőrök  Webhely stílusinformációinak csoportokba gyűjtése  Bőr = vezérlők vizuális jellemzője .skin fájlokban tárolva  Alapértelmezett és nevesített bőrök  Téma = bőrök halmaza, gyűjteménye  Themes alkönyvtárban  Globális és lokális témák

30 Bőrök  Alapértelmezett (default)  SkinID nélkül definiált bőrök  Minden olyan adott típusú kontrollra, aminek nincs SkinID tulajdonsága  Nevesített (named)  SkinID-val definiált bőrök  Lehet ugyanabban a fájlban mint az alapértelmezett bőr  A vezérlők SkinID tulajdonságával hivatkozhatunk a nevesített bőrökre

31  Egy alkalmazás minden lapjára  Egy lap minden vezérlőjére  Kódból Téma alkalmazása void Page_PreInit (Object sender, EventArgs e) { Page.Theme = "BasicBlue"; } void Page_PreInit (Object sender, EventArgs e) { Page.Theme = "BasicBlue"; }

32 Lokális témák App_Themes Shocking- Pink Autumn- Leaves SKIN Webapp_ root Téma neve = Alkönyvtár neve

33 Globális témák Themes BasicBlue SmokeAnd Glass SKIN ASP.NET_ ClientFiles Téma neve = Alkönyvtár neve %WINDIR%\Microsoft.NET\Framework\ \ASP.NETClientFiles\

34 Theme vs StyleSheetTheme  Theme  a bőrben definiált tulajdonságok felülírják az azonos nevű a lapban lokálisan definiált tulajdonságokat  StyleSheetTheme  Lokálisan definiált tulajdonság írja felül a bőrben definiáltat  Theme és StyleSheetTheme egyszerre 1. StyleSheetTheme tulajdonságok 2. Lokálisan definiált tulajdonságok (felülírva a StyleSheetTheme-et) 3. Theme-ben definiált tulajdonságok (felülírva előzőeket)

35 Témák és bőrök

36 Tartalom  Személyre szabhatóság  Felhasználói élmény  Mesteroldalak  Témák  Navigáció  Lokalizáció

37 Adatvezérelt navigáció  Navigációs felületet nehéz megvalósítani  Kliens oldali scriptek, frissítés, stb.  Új navigációs vezérlőelemek  SiteMapPath – „Kenyérmorzsa” vezérlőelem  SiteMapDataSource – XML webhely térkép  TreeView, Menu – navigációs vezérlők  Publikus webhely térkép és API  Provider alapú  Rugalmas!

38 Navigáció - alapok Site Map API Webhely térképek Web.sitemap stb. Vezérlők MenuTreeViewSiteMapPath SiteMap- DataSource SiteMap SiteMapNode XmlSiteMapProviderstb. Providerek

39 XML webhely térkép <siteMapNode title=„Kurzusok" url=„Course.aspx" description=„ASP.NET 2.0 kurzusok"> <siteMapNode title="Adminisztrátoroknak" url="Admin.aspx" description=„Adminisztrátori oldal" roles="Admins" /> <siteMapNode title=„Kurzusok" url=„Course.aspx" description=„ASP.NET 2.0 kurzusok"> <siteMapNode title="Adminisztrátoroknak" url="Admin.aspx" description=„Adminisztrátori oldal" roles="Admins" />

40 SiteMapNode.Roles  Csak azok a navigációs elemek jelennek meg, amihez joga van a felhasználónak <add name="AspNetXmlSiteMapProvider" … securityTrimmingEnabled="true" siteMapFile="web.sitemap" /> <add name="AspNetXmlSiteMapProvider" … securityTrimmingEnabled="true" siteMapFile="web.sitemap" />

41 SiteMapDataSource  Nem látható vezérlőelem  A webhelytérképet reprezentálja  A SiteMapPath, TreeView és Menu vezérlőkhöz adatforrás  Provider alapú  rugalmas!  SiteMap fájlnév megadása  Saját adatforrás megadása

42 TreeView vezérlőelem  Hierarchikus struktúra fa szerkezetben való megjelenítésére  Nyitható-zárható szintek  A node-ok kiválaszthatók, navigálni tudnak, és checkbox-ot is tartalmazhatnak  TreeNode objektumokból áll  Deklaratívan, kódból, és adatkötéssel is megadható  On-demand is betölthető  Könnyen definiálható UI

43 TreeView webhelytérképből <siteMapNode title="Training" url="Training.aspx" description="Training for.NET developers"> <siteMapNode title="Programming.NET" url="Classes.aspx?id=1" description="All about the.NET Framework" /> <siteMapNode title="Programming ASP.NET" url="Classes.aspx?id=2" description="All about ASP.NET" /> <siteMapNode title="Programming Web Services" url="Classes.aspx?id=3" description="All about Web services"/> <siteMapNode title="Consulting" url="Consulting.aspx" description="Consulting for.NET projects" /> <siteMapNode title="Debugging" url="Debugging.aspx" description="Help when you need it the most" /> <siteMapNode title="Training" url="Training.aspx" description="Training for.NET developers"> <siteMapNode title="Programming.NET" url="Classes.aspx?id=1" description="All about the.NET Framework" /> <siteMapNode title="Programming ASP.NET" url="Classes.aspx?id=2" description="All about ASP.NET" /> <siteMapNode title="Programming Web Services" url="Classes.aspx?id=3" description="All about Web services"/> <siteMapNode title="Consulting" url="Consulting.aspx" description="Consulting for.NET projects" /> <siteMapNode title="Debugging" url="Debugging.aspx" description="Help when you need it the most" /> Web.sitemap

44 TreeView On-Demand töltés <asp:TreeView OnTreeNodePopulate="OnPopulate" EnableClientScript="false" RunAt="server"> <asp:TreeNode Text="Populate this node on demand" PopulateOnDemand="true" RunAt="server" />. void OnPopulate (Object sender, TreeNodeEventArgs e) { // Called first time the populate-on-demand node is expanded TreeNode node = new TreeNode ("This node added dynamically"); e.Node.ChildNodes.Add (node); } <asp:TreeView OnTreeNodePopulate="OnPopulate" EnableClientScript="false" RunAt="server"> <asp:TreeNode Text="Populate this node on demand" PopulateOnDemand="true" RunAt="server" />. void OnPopulate (Object sender, TreeNodeEventArgs e) { // Called first time the populate-on-demand node is expanded TreeNode node = new TreeNode ("This node added dynamically"); e.Node.ChildNodes.Add (node); }

45 Menu vezérlőelem  Hierarchikus struktúra lenyíló/kinyíló menüben való megjelenítésére  Kiválasztható vagy navigálható menüelem  Vízszintes vagy függőleges orientáció  MenuItem objektumokból áll  Deklaratívan, kódból, és adatkötéssel is megadható  Könnyen definiálható UI

46 Menü webhelytérképből Web.sitemap <siteMapNode title="Training" url="Training.aspx" description="Training for.NET developers"> <siteMapNode title="Programming.NET" url="Classes.aspx?id=1" description="All about the.NET Framework" /> <siteMapNode title="Programming ASP.NET" url="Classes.aspx?id=2" description="All about ASP.NET" /> <siteMapNode title="Programming Web Services" url="Classes.aspx?id=3" description="All about Web services"/> <siteMapNode title="Consulting" url="Consulting.aspx" description="Consulting for.NET projects" /> <siteMapNode title="Debugging" url="Debugging.aspx" description="Help when you need it the most" /> <siteMapNode title="Training" url="Training.aspx" description="Training for.NET developers"> <siteMapNode title="Programming.NET" url="Classes.aspx?id=1" description="All about the.NET Framework" /> <siteMapNode title="Programming ASP.NET" url="Classes.aspx?id=2" description="All about ASP.NET" /> <siteMapNode title="Programming Web Services" url="Classes.aspx?id=3" description="All about Web services"/> <siteMapNode title="Consulting" url="Consulting.aspx" description="Consulting for.NET projects" /> <siteMapNode title="Debugging" url="Debugging.aspx" description="Help when you need it the most" />

47 SiteMapPath vezérlőelem  „Kenyérmorzsa vezérlő”  A legfelső szinttől az aktuális oldalig vezető utat mutatja  Aktuális oldal  statikus szöveg  Szülők  hivatkozások (hyperlink)  Könnyen definiálható UI  A csomópontok és az elválasztó elemek jól sablonizálhatóak  SiteMapProvider-re épül

48 SiteMapPath használata

49 SiteMap Providers  SiteMap provider alapú  A webhelytérkép adatait feldolgozza és SiteMapDataSource-nak biztosítja  Aktuális weblap információ meghatározása a webhely térkép alapján  SiteMapPath vezérlőelem forrása  ASP.NET 2.0-ban egy beépített provider  XmlSiteMapProvider  Kiterjeszthető  saját providerek saját adatforrásokhoz

50 SiteMap API  System.Web.SiteMap  Webhelytérképet reprezentálja  RootNode  CurrentNode  SiteMapNode  Egyetlen node-ot reprezentál  Node tulajdonságai lekérdezhetők, beállíthatók  Föl, le, oldalra lépkedhetünk a hierarchiában

51 URL leképzés  Web.config-ban kell definiálni  Könnyen megjegyezhető címek a bonyolult paraméteres címek helyett  Pontos egyezés estén a bejövő cím leképződik egy másik címre

52 Navigáció

53 Tartalom  Személyre szabhatóság  Felhasználói élmény  Mesteroldalak  Témák  Navigáció  Lokalizáció

54 Lokalizáció  Böngésző nyelvének automatikus felismerése  Címkék megadása  Lokális és globális erőforrás fájlok

55 Böngésző preferált kultúrája  Automatikus nyelv detektálás  Culture, UICulture automatikus beállítása  Oldal szinten (.aspx)  Alkalmazás szinten (web.config)  „auto:en-US”  használjuk a böngészőben beállított preferált nyelvet ha tudjuk, egyébként pedig az en-us –t.

56 Lokalizációs erőforrások  Erőforrás fájlok  Lokális erőforrások  Minden form-nak saját erőforrásfájl minden támogatott nyelvhez  RESX fájlok az App_LocalResources mappában  Elnevezés:.aspx..resx.aspx.resx (alapértelmezett).aspx.resx (alapértelmezett)  Globális erőforrások  az egész alkalmazásban használható erőforrások  RESX fájlok a ~/App_GlobalResources mappában  Elnevezés:..resx.resx (alapértelmezett).resx (alapértelmezett)

57 Erőforrás kifejezések  Deklaratív szintaktika  Lokális és globális erőforrásokhoz is  Runtime, design-time  Formái:  Explicit:  Implicit: <asp:Label ID="Label1" runat="server" Text=" " /> <asp:Label ID="Label1" runat="server" Text=" " />

58 Explicit kifejezések  Bármilyen vezérlőelem tulajdonságra használható  Finoman hangolható  Lokális és globális erőforrásokhoz is  Runtime:  Vezérlőelem tulajdonság és erőforrás-érték összerendelés  Design-time:  Vezérlőelemek tulajdonságai az „Expressions…” tulajdonságon keresztül  Lokális erőforrás értékeket jeleníti meg

59 Implicit kifejezések  Részben vagy teljes egészében lokalizálni egy vezérlőelemet  Csak lokális erőforrásra alkalmazható  VisualStudio2005 automatikusan tudja generálni  meta:ResourceKey –ek a Page direktívába és a vezérlőkbe  App_LocalResources mappa és.apsx.resx fájl generálása

60 Erőforrás hivatkozás  Globális erőforrás  Deklaratív  Csak explicit  Kódból  Erősen típusos  Segédmetódussal <asp:Label ID="Label1" runat="server" Text="" /> Text=" " /> <asp:Label ID="Label1" runat="server" Text="" /> Text=" " /> Label1.Text = Resources...ToString(); Label1.Text = (string) GetAppResourceObject(, ); Label1.Text = (string) GetAppResourceObject(, );

61 Erőforrás hivatkozás  Lokális erőforrás  Deklaratív  Explicit  Implicit  Kódból  Csak segédmetódussal <asp:Label ID="Label1" runat="server" Text="" /> Text=" " /> <asp:Label ID="Label1" runat="server" Text="" /> Text=" " /> <asp:Label ID="Label1" runat="server" meta:resourcekey="resource-key-prefix" /> <asp:Label ID="Label1" runat="server" meta:resourcekey="resource-key-prefix" /> Label1.Text = (string) GetPageResourceObject( ); Label1.Text = (string) GetPageResourceObject( );

62 Lokalizáció

63 Összefoglalás  Könnyen kialakítható egységes felület  Mesteroldalak, témák, bőrök  Személyre szabhatóság  Webkijelző keretrendszer  Egyszerű navigáció  Beépített kontrollok  Kiterjeszthető  Rugalmas!  Erőforrás alapú lokalizáció

64 További információk  Fejlesztői Portál:   Webfejlesztés témaközpont:   ASP.NET honlap   MSDN ASP.NET Developer Center   Visual Studio 2005 MSDN Documentation   Visual Web Developer 2005 Express Edition   Visual Web Developer 2005 Express Edition MSDN documentation   ASP.NET 2.0 Quickstart tutorial   Scott Guthrie blogja 

65 Kérdések és válaszok Értékelőlapok!

66 Délutáni gyakorlatok: V2.520

67 © 2006 Microsoft Corporation. Minden jog fenntartva. Az előadás csupán tájékoztató jellegű, a Microsoft Magyarország a benne szereplő esetleges hibákért vagy tévedésekért semmilyen felelősséget nem vállal.