ASP.NET 2.0 alkalmazások arculata és testreszabása - PowerPoint PPT Presentation

asp net 2 0 alkalmaz sok arculata s testreszab sa l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
ASP.NET 2.0 alkalmazások arculata és testreszabása PowerPoint Presentation
Download Presentation
ASP.NET 2.0 alkalmazások arculata és testreszabása

play fullscreen
1 / 61
ASP.NET 2.0 alkalmazások arculata és testreszabása
203 Views
Download Presentation
nodin
Download Presentation

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

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