Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

Kereskényi Róbert MSDN Kompetencia Központ Budapesti Műszaki és Gazdaságtudományi Egyetem Automatizálási és Alkalmazott Informatikai Tanszék.

Hasonló előadás


Az előadások a következő témára: "Kereskényi Róbert MSDN Kompetencia Központ Budapesti Műszaki és Gazdaságtudományi Egyetem Automatizálási és Alkalmazott Informatikai Tanszék."— Előadás másolata:

1 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 2 Tartalom  Személyre szabhatóság  Felhasználói élmény  Mesteroldalak  Témák  Navigáció  Lokalizáció

3 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 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 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 6 Példa WebPartzone WebPart Címsor Keret Menü gombok

7 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 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 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 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 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 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 13 Static Connections  Statikusan definiált a WebPartManager elemén belül  

14 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 15 Webkijelzők

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

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

18 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 19 Mester oldal definiálása Webes megoldások ASP.NET 2.0 alapokon Webes megoldások ASP.NET 2.0 alapokon

20 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 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 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 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 24 Gyengén típusos mesteroldal Tartalom oldal Mester oldal ((Label) Master.FindControl ("lblTitle")).Text = "Orders";

25 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 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 27 Mester oldalak

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

29 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 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 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 32 Lokális témák App_Themes Shocking- Pink Autumn- Leaves SKIN Webapp_ root Téma neve = Alkönyvtár neve

33 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 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 35 Témák és bőrök

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

37 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 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 39 XML webhely térkép

40 40 SiteMapNode.Roles  Csak azok a navigációs elemek jelennek meg, amihez joga van a felhasználónak

41 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 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 43 TreeView webhelytérképből Web.sitemap

44 44 TreeView On-Demand töltés . 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); } . 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 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 46 Menü webhelytérképből Web.sitemap

47 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 48 SiteMapPath használata

49 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 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 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 52 Navigáció

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

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

58 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 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 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 Text=" " /> Text=" " /> Label1.Text = Resources...ToString(); Label1.Text = (string) GetAppResourceObject(, ); Label1.Text = (string) GetAppResourceObject(, );

61 61 Erőforrás hivatkozás  Lokális erőforrás  Deklaratív  Explicit  Implicit  Kódból  Csak segédmetódussal Text=" " /> Text=" " /> Label1.Text = (string) GetPageResourceObject( ); Label1.Text = (string) GetPageResourceObject( );

62 62 Lokalizáció

63 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 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 65 Kérdések és válaszok Értékelőlapok!

66 66 Délutáni gyakorlatok: V2.520

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


Letölteni ppt "Kereskényi Róbert MSDN Kompetencia Központ Budapesti Műszaki és Gazdaságtudományi Egyetem Automatizálási és Alkalmazott Informatikai Tanszék."

Hasonló előadás


Google Hirdetések