1 / 61

ASP.NET 2.0 alkalmazások arculata és testreszabása

ASP.NET 2.0 alkalmazások arculata és testreszabása. Kereskényi Róbert roby@aut.bme.hu MSDN Kompetencia Központ Budapesti Műszaki és Gazdaságtudományi Egyetem Automatizálási és Alkalmazott Informatikai Tanszék. Tartalom. Személyre szabhatóság Felhasználói élmény Mesteroldalak Témák

nodin
Download Presentation

ASP.NET 2.0 alkalmazások arculata és testreszabása

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  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, ... <ZoneTemplate> <asp:CalendarTitle="Calendar" ID="Calendar1" RunAt="server" /> <user:WeatherTitle="Weather" ID="Weather1" RunAt="server" /> <custom:SearchTitle="Search" ID="Search1" RunAt="server" /> </ZoneTemplate>

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

  7. 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

  8. 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

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

  10. 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

  11. 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

  12. Webkijelzők

  13. Tartalom • Személyre szabhatóság • Felhasználói élmény • Mesteroldalak • Témák • Navigáció • Lokalizáció

  14. Mesteroldalak • Vizuális öröklés Mesteroldal Tartalom oldal

  15. Mesteroldalak működése • Mester oldal tartalmazza a közös tartalmat és tartalom helyőrzőket (<asp:ContentPlaceHolder>) • Tartalom oldalhivatkozik a mesterre és kitölti a helyőrzőket (<asp:Content>) Site.master default.aspx http://.../default.aspx Content-PlaceHolder Content

  16. Mester oldal definiálása <%@ Master %> <html> <body> <!-- Banner shown on all pages that use this master --> <tablewidth="100%"> <tr> <tdbgcolor="darkblue" align="center"> <spanstyle="font-size: 36pt; color: white"> Webes megoldások ASP.NET 2.0 alapokon</span> </td> </tr> </table> <!-- Placeholder for content below banner --> <asp:ContentPlaceHolderID="Main" RunAt="server" /> </body> </html>

  17. Mester oldal alkalmazása • Egy oldalra (.aspx) • Az egész webhelyre (Web.config) <%@ PageMasterPageFile="~/Site.master" %> <asp:ContentContentPlaceHolderID="Main" RunAt="server"> Ez a szöveg jelenik meg a mester oldalon definiált "Main" nevű kontrolban </asp:Content> <system.web> <pagesmasterPageFile="~/Site.master" /> … </system.web>

  18. 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 <%@ Master %> ... <asp:ContentPlaceHolderID="Main" RunAt="server"> This is default content that will appear in the absence of a matching Content control in a content page <asp:ContentPlaceHolder>

  19. 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) <!– Level1.Master --> <%@ MasterMasterPageFile="~/Level0.Master" %> <asp:ContentContentPlaceHolderID="..." RunAt="server"> <asp:ContentPlaceHolderID="..." RunAt="server"> ... </asp:ContentPlaceHolder> <asp:Content>

  20. 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

  21. Erősen típusos mesteroldal Mester oldal .aspx <asp:LabelID= "lblTitle" RunAt="server" /> .cs public Label MasterTitle { get { returnthis.lblTitle; } set { this.lblTitle = value; } } Tartalom oldal .aspx <%@ MasterTypeVirtualPath="~/Master1.master" %> .cs Master.MasterTitle.Text = "Orders";

  22. 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 \Level1.master <ahref= "MainPage.aspx" />MainPage</a> \Default\Default.aspx <%@ PageMasterPageFile="~/Level1.master" %> • Megoldás: • Abszolút (/MainPage.aspx) vagy • Alkalmazás relatív (~/MainPage.aspx) URL-ek használata a mesteroldalon MainPage hivatkozás URL-je: \Default\MainPage.aspx

  23. Mester oldalak

  24. Tartalom • Személyre szabhatóság • Felhasználói élmény • Mesteroldalak • Témák • Navigáció • Lokalizáció

  25. 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

  26. 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

  27. Téma alkalmazása • Egy alkalmazás minden lapjára • Egy lap minden vezérlőjére • Kódból <configuration> <system.web> <pagestheme="BasicBlue" /><!-- Case Sensitive!! --> </system.web> </configuration> <%@ PageTheme="BasicBlue"> void Page_PreInit (Object sender, EventArgs e) { Page.Theme = "BasicBlue"; }

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

  29. Globális témák %WINDIR%\Microsoft.NET\Framework\<version>\ASP.NETClientFiles\ ASP.NET_ ClientFiles Téma neve = Alkönyvtár neve Themes BasicBlue SKIN SKIN SmokeAndGlass SKIN SKIN

  30. 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 • StyleSheetTheme tulajdonságok • Lokálisan definiált tulajdonságok (felülírva a StyleSheetTheme-et) • Theme-ben definiált tulajdonságok (felülírva előzőeket)

  31. Témák és bőrök

  32. Tartalom • Személyre szabhatóság • Felhasználói élmény • Mesteroldalak • Témák • Navigáció • Lokalizáció

  33. 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!

  34. Navigáció - alapok Vezérlők Menu TreeView SiteMap- DataSource SiteMapPath Site Map API SiteMap SiteMapNode SiteMapNode SiteMapNode Providerek XmlSiteMapProvider stb. Webhelytérképek Web.sitemap stb.

  35. XML webhely térkép <?xmlversion="1.0" encoding="utf-8" ?> <siteMap> <siteMapNodetitle=„Kezdőlap" description="" url="default.aspx"> <siteMapNodetitle=„Kurzusok" url=„Course.aspx" description=„ASP.NET 2.0 kurzusok"> <siteMapNodetitle=„Adatkezelés" url="Course.aspx?id=1"/> <siteMapNodetitle=„Felhasználói profil" url="Course.aspx?id=2"/> <siteMapNodetitle=„Felhasználói felület" url="Course.aspx?id=3"/> </siteMapNode> <siteMapNodetitle="Adminisztrátoroknak" url="Admin.aspx" description=„Adminisztrátori oldal" roles="Admins"/> </siteMapNode> </siteMap>

  36. SiteMapNode.Roles • Csak azok a navigációs elemek jelennek meg, amihez joga van a felhasználónak <system.web> <siteMap> <providers> <removename="AspNetXmlSiteMapProvider" /> <addname="AspNetXmlSiteMapProvider" …securityTrimmingEnabled="true" siteMapFile="web.sitemap" /> </providers> </siteMap> </system.web> <?xmlversion="1.0" encoding="utf-8" ?> <siteMap> <siteMapNode> <siteMapNodetitle="Admin" url= "~/Admin.aspx"roles="Admins" /> </siteMapNode> </siteMap>

  37. 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

  38. 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

  39. TreeView webhelytérképből <asp:SiteMapDataSourceID="SiteMap" RunAt="server" ShowStartingNode="false"/> <asp:TreeViewDataSourceID="SiteMap" RunAt="server" /> Web.sitemap <?xmlversion="1.0" encoding="utf-8" ?> <siteMap> <siteMapNodetitle="Home" description="" url="default.aspx"> <siteMapNodetitle="Training" url="Training.aspx" description="Training for .NET developers"> <siteMapNodetitle="Programming .NET" url="Classes.aspx?id=1" description="All about the .NET Framework" /> <siteMapNodetitle="Programming ASP.NET" url="Classes.aspx?id=2"description="All about ASP.NET" /> <siteMapNodetitle="Programming Web Services" url="Classes.aspx?id=3"description="All about Web services"/> </siteMapNode> <siteMapNodetitle="Consulting" url="Consulting.aspx" description="Consulting for .NET projects" /> <siteMapNodetitle="Debugging" url="Debugging.aspx" description="Help when you need it the most" /> </siteMapNode> </siteMap>

  40. TreeView On-Demand töltés <asp:TreeViewOnTreeNodePopulate="OnPopulate" EnableClientScript="false" RunAt="server"> <Nodes> <asp:TreeNodeText="Populate this node on demand" PopulateOnDemand="true" RunAt="server" /> </Nodes> </asp:TreeView> . . . <scriptlanguage="C#" 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); } </script>

  41. 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

  42. Menü webhelytérképből <asp:SiteMapDataSourceID="SiteMap" RunAt="server" ShowStartingNode="false"/> <asp:TreeViewDataSourceID="SiteMap" RunAt="server" /> Web.sitemap <?xmlversion="1.0" encoding="utf-8" ?> <siteMap> <siteMapNodetitle="Home" description="" url="default.aspx"> <siteMapNodetitle="Training" url="Training.aspx" description="Training for .NET developers"> <siteMapNodetitle="Programming .NET" url="Classes.aspx?id=1" description="All about the .NET Framework" /> <siteMapNodetitle="Programming ASP.NET" url="Classes.aspx?id=2"description="All about ASP.NET" /> <siteMapNodetitle="Programming Web Services" url="Classes.aspx?id=3"description="All about Web services"/> </siteMapNode> <siteMapNodetitle="Consulting" url="Consulting.aspx" description="Consulting for .NET projects" /> <siteMapNodetitle="Debugging" url="Debugging.aspx" description="Help when you need it the most" /> </siteMapNode> </siteMap>

  43. 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

  44. SiteMapPath használata <asp:SiteMapPathFont-Name="Verdana" Font-Size="10pt" RunAt="server"> <CurrentNodeStyleHeight="24px" BackColor="Yellow" Font-Bold="true" /> <NodeStyleHeight="24px" /> <PathSeparatorTemplate> <ItemTemplate> <asp:ImageImageUrl="~/images/arrow.gif" RunAt="server" /> </ItemTemplate> </PathSeparatorTemplate> </asp:SiteMapPath>

  45. 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

  46. 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

  47. 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 <?xmlversion="1.0" ?> <configurationxmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0"> <system.web> <urlMappingsenabled="true"> <addurl="~/Category.aspx" mappedUrl="~/Default.aspx?category=default" /> <addurl="~/Autos.aspx" mappedUrl="~/Default.aspx?category=autos" /> </urlMappings> </system.web> </configuration>

  48. Navigáció

  49. Tartalom • Személyre szabhatóság • Felhasználói élmény • Mesteroldalak • Témák • Navigáció • Lokalizáció

  50. 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

More Related