ASP.NET AJAX és az ASP.NET rejtelmei Negyedik nap Turóczy Attila diái alapján: Csirmaz Péter MCP, MCTS, MCPD
Egyedi Sever Control-ok létrehozása WebPart-ok MasterPage Tematika Egyedi Sever Control-ok létrehozása WebPart-ok MasterPage Témák, CSS, Skin ASP.NET AJAX Implemetálása
A vezérlők típusai User Control Custom Web Control Composite Control .ascx fájl Portolás másik projektbe -> ascx mozgatással Templated control Több különálló vezérlő összefog Custom Web Control WebControl-ból származik Nulláról kell megírni Meglévő vezérlőből származtatjuk .dll-be mehet, és GAC-be telepíthető Composite Control Több kontrol egyben, Dll-be csomagolható, GAC-be telepíthető GAC – Global Assembly Cache, valahol a Windows mappa melyen
User Control Custom Control Composite Control Tematika Egy rövid áttekintőt fog adni az alábbi fejezetekről. Úgy mint a saját típusok készítése, típus konverziók stb.
User Controlok készítése Több létező kontrolt összecsoportosítunk egy konténerbe. Pl. Cím, szállítási cím páros UserControl ősosztály Add New Item / Web User Control Page <-> Control
User Controlok készítése meglévő WebForm-ból <html>, <body>,<form> tag-ek eltávolítása @Page -> @Control .aspx -> ascx @Control-ban: Inherits=”System.Web.UI.Page” helyett Inherits=”System.Web.UI.UserControl”
User Control használata Design felületre Drag and Drop Regisztrálás: Használatbavétel: Dinamikus betöltés – LoadControl
Hozzáférés a User Control adataihoz A tagváltozók csak belülről, vagy a leszármazottak számára elérhető (protected) Propertyként kipublikálhatók Események a vezérlőbe záródnak
User Control eseményei a Page-n Pl. Egy gomb szeretné az eseményt az oldalnak továbbítani. UserControlban: Form-on:
Templated User Control A megjelenés és az adat elválik Nincs default megjelenés sem Recept: UserControl fájl hozzáadása PlaceHolder elhelyezése ITemplate típusú property hozzáadása Container class hozzáadása TemplateContainerAttribute az ITemplate property elé. Paraméter a Container Class PersistenceModeAttribute felvétele ITemplate elé. Paramétere: PersisenceMode.InnerProperty UserControl code-behindjában property készítése az adatoknak, hogy átadhassák a Container-nek. Page_Init-ben ITemplate ellenőrzése, Példányok létrehozása
ShipperContainer.cs
ShipperControl.ascx(.cs)
Templated User Control felhasználása DataBind()!!!!
User Control Custom Control Composite Control Tematika Egy rövid áttekintőt fog adni az alábbi fejezetekről. Úgy mint a saját típusok készítése, típus konverziók stb.
Custom Web Server Vezérlők WebServer control ősosztály Stílusok használata Override Render –> HtmlTextWriter Meglévő vezérlőből is lehet származtatni
Custom vezérlők készítése Ha az újrafelhasználhatóság fontos, akkor ClassLibrary Származtatás konkrét vezérlőből
Custom Vezérlő felhasználása Default.aspx.cs-ben:
demo WebControl-ból származtatunk saját osztályt Render-t teljesen felül kell írni Page_Init-ben meghívni public string LogoUrl { get; set; } public string CompanyName { get; set; } protected override void Render(HtmlTextWriter writer) { writer.WriteFullBeginTag("div"); writer.Write(@"<img src=""{0}""/><br/>", LogoUrl); writer.Write(CompanyName + "<br/>"); writer.WriteEndTag("div"); }
Custom vezérlők felvétele ToolBox-ba Class Library ToolBox / Choose Items ToolboxBitmap (16x16) ClassLibrary-ba Build Action / Embedded Resource
További kiegészítések ToolBoxDataAttribute TagPrefix – AssemblyInfo.cs
Custom Control – Designer támogatás Nekünk kell megírni MyControlDesigner osztály készítése System.Web.UI.Design.ControlDesigner-ből Override string GetDesignTimeHtml() Override void Initialize(IComponent) Base.Initialize(component) DesignerAttribute elhelyezése
User Control Custom Control Composite Control Tematika Egy rövid áttekintőt fog adni az alábbi fejezetekről. Úgy mint a saját típusok készítése, típus konverziók stb.
Composite Control Alapvetően egy custom control, ami más WebControlokat tartalmaz Nincs designer támogatás, és nincs ascx, dll van. CompositeControl az ősosztály Kezelik a viewstate-et, postbacket Minden vezérlő önálló.
Composite Control készítése Származtatás a CompositeControl-ból Override CreateChildControls Style nincs panelbe kell helyezni a gyerek kontrollokat A from Page_Init-jében lehet hozzáadni a vezérlőt.
User DataControl.cs
Control felhasználása
Creating Custom Web Controls Gyakorlat Creating Custom Web Controls Feladat: A látogatóüdvözlős példából csináljuk custom web kontrolt.
Egyedi Sever Control-ok létrehozása WebPart-ok MasterPage Tematika Egyedi Sever Control-ok létrehozása WebPart-ok MasterPage Témák, CSS, Skin ASP.NET AJAX Implemetálása
Web Part oldal megvalósítása WebPartManager controll Ajánlott: layout | table WebPartZone(ok) Controllok hozzáadása a WebPartZone-hoz Legelőször az WebPartManager-t kell elhelyezni az oldal tetején. Felhasználó számára nem látható, viszont rendkívül fontos szerepe van. Nem kötelező, de ajánlott táblázat használata. WebPartZone-ok tárolják a Web Part-okat. Ezek mozgatása is tulajdonképpen az egyik Zone-ból a másik-ba történik. A kontrollok behúzgálása a Zone-ok ba, amivel egyúttal az alapértelmezett pozíciójukat is meghatározzuk.
Web Part módok A felhasználó tudjon: Módok közötti váltás: Browse – eltüntetni, elrejteni Design – pakolászni Edit – szerkeszteni Catalog – Web Part-okat adni a laphoz Connect – kapcsolatot létrehozni, törölni Módok közötti váltás: WebPartManager.DisplayMode property Amikor el készült az oldal, el kell döntenünk, hogy a felhasználó miket csinálhasson az oldalon lévő Web Part-okkal. Annak meghatározására, hogy a felhasználó milyen műveletek hajthat végre a Web Part-okkal úgynevezett módokat definiáltak. Nekünk kell biztosítani, hogy a felhasználó tudjon ezek között a módok között váltani Pl.: legördülő listából válassza ki, hogy éppen mit akar csinálni. Ezek a következők: Alapértelmezett a Browse mód. Design mód: Engedélyezzük ebben a módban a felhasználónak, hogy a Web Partokat át tudja pakolni egyik helyről a másikra. (Drag and drop módszerrel) Edit mód: Ebben a módban szintén engedélyezzük ebben a módban a felhasználónak, hogy a Web Partokat át tudja pakolni egyik helyről a másikra. (Drag and drop módszerrel). De a user a Web Parts menüjéből ki tudja választani, hogy szerkeszteni akar, és ezáltal tudja szerkeszteni a Web Part címkéjét méretét, elhelyezkedését stb. Ahhoz, hogy ezt a lehetőséget válaszuk a toolboxról fel kell húzzuk az EditorZone controlt a web lapra. És ebbe az editor zoneba huzzúk bele az AppearanceEditorPart vagy/és a LayoutEditorPart controlt. Melyek segítségével egyszerűen szerkeszthetjük a Web Partok túlajdonságait. Catalog mód: Ezzen mód segítségével, hozzáadhatunk web partokat a web lapon. Ahhoz, hogy ezt aktivizáljuka Catalog Zone controlt hozzá kell adnunk a weblapounkhoz. Connect mód: Kapcsolat a webpartok között. Jelentősége óriási. Vegyünk egy példát, ha a felhasználó beállítja, hogy ő Budapesten él akkor pl az időjárás modul nem a berlini időjárást fogja a számára bemutatni hanem a magyart. Ez is az oldal személyre szabását teszi még könyebbé. A Connect módnak 2 típusa van. Van a statikus amikor a mi fejlesztők gondoskodunk, hogy milyen koncepció szerint mit mutasson a web part. Valamint van a dinamikus amikor a felhasználó futási időben hatáozza meg.
Statikus kapcsolat létrehozása Provider Web Part létrehozása Consumer Web Part létrehozása Egy WebPartZone-ba elhelyezem WebPartManager | StaticConnections
Dinamikus kapcsolat Létrehozom a statikus kapcsolato(ka)t Web lapra: ConnectionsZone Futás időben: Connect módra Web Part menüjéből: connect
Web Part perszonalizáció Hasonló a profile-hoz Teljesen automatikus A controll-ok állapotait tárolja Alapállapot visszaállítása: PersonalizationAdministration.ResetAllState(PersonalizationScope.User) A web partok lehetőséget biztosítanak arra, hogy ha a felhasználó testre szabta az oldal kinézetét, és ha legközelebb visszalátogat az oldalra ugyan az a látvány fogadja amit testreszabott. Ezek a beállításokat akár cookiekban a felhasználó gépén vagy akár eltárolva az SQL Serverben is lehetnek. Az SQL serveres megoldás természetesen jóval robosztusabb. Természetesen vannak, helyzetek amikor nem szeretnénk ezt a p ASP.NET automatikusan tárolja az adatokat. Következő látogatáskor is a módosított UI fogadja.
Perszonalizáció++ Minden felhasználóra. Web.config-ban: Tiltása: <authorization> <allow verbs= ”POST” users= ”EN” roles= ”ADMIN” /> </authorization> Tiltása: WebPartManager-ben: <Personalization Enable = ”FALSE” >
demo <script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"></script> <script type="text/javascript"> var map = null; function GetMap() { map = new VEMap('myMap'); map.LoadMap(); } </script> <body onload="GetMap();"> <div id='myMap' style="position:relative; width:200px; height:200px;"></div> </body> void Page_Init(object sender, EventArgs e) Page.InitComplete += new EventHandler(GenerateList); protected void GenerateList(object sender, EventArgs e) WebPartManager manager = WebPartManager.GetCurrentWebPartManager(Page); ModeList.Items.Clear(); foreach (WebPartDisplayMode item in manager.SupportedDisplayModes) ListItem li = new ListItem(item.Name, item.Name); ModeList.Items.Add(li); int selectedIndex = ModeList.Items.IndexOf(ModeList.Items.FindByText(manager.DisplayMode.Name)); ModeList.SelectedIndex = selectedIndex; protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) WebPartDisplayMode mode = manager.SupportedDisplayModes[ModeList.SelectedValue]; if (mode != null) manager.DisplayMode = mode; -----------
Egyedi Sever Control-ok létrehozása WebPart-ok MasterPage Tematika Egyedi Sever Control-ok létrehozása WebPart-ok MasterPage Témák, CSS, Skin ASP.NET AJAX Implemetálása
Mester és Tartalom oldalak használata <asp:contentplaceholder id="CphMain" runat="server" /> A mesteroldalak használatával azokat az oldalelemeket (vezérlőket) melyekre minden oldalon szükség van, megoldhatjuk, hogy nekünk csak egy oldalhoz kell hozzáadni, és minden oldalon meg fog jelenni. Ez nagyban fokozza a kód átláthatóságát, hiszen nem kell kódot duplikálnunk. Az alábbi ábra egy lehetséges elrendezést mutat, ahol az oldalak csak a Main content area részben különböznek, a többi terület mindenhol ugyanúgy néz ki.
Hogyan épül fel egy mesteroldal? A mesteroldal az alábbi tulajdonságokban tér el egy normál oldaltól: .master a kiterjesztése <%@ Master … %> direktívával kezdődik Tartalmaz egy <asp:contentplaceholder … /> taget System.Web.UI.MasterPage-ből származik
Hogyan épül fel egy tartalom oldal? Mivel a tartalom oldal egy mesteroldal belsejébe (ContentPlaceHolder-ébe fog másolódni), ezért nem tartalmazhatja a következő html tageket: <html> <head> <body> <form> Page direktíva <%@ Page MasterPageFile="~/MasterPage.master" Title="Cím" %> A tartalom oldal Page direktívája az alábbi részeken tér el egy normál oldalétól: <%@ Page MasterPageFile="~/MasterPage.master" Title="Cím" %> Ezen felül fontos, hogy minden vezérlő egy Content tegen belül kell, hogy elhelyezkedjen, mert ezt a részt fogja bemásolni a keretrendszer a mester oldalon található megfelelő ContentPlaceHolder-be.
Futási időben is be tudom állítani a mesteroldat? Ha a mester oldalt futási időben szeretnénk megváltoztatni, akkor a Page.MasterPageFile tulajdonságot kell beállítani a Pre_Init-ben, az alábbi módon: protected override void OnPreInit( EventArgs e ) { this.Page.MasterPageFile = "~/MasterPage.master"; base.OnPreInit( e ); } Ha a mester oldalt futási időben szeretnénk megváltoztatni, akkor a Page.MasterPageFile tulajdonságot kell beállítani a Pre_Init-ben,
El tudom érni a a mesteroldal egyes vezérlőit? Vezérlők elérése: Page.Master.FindControl() Poperty-k, függvények elérése: <%@ MasterType VirtualPath="~/MasterPage.master" %> ekkor kódból is elérem: Master.PropertyName A mester oldalon található vezérlőket úgy tudom elérni, hogy a Page.Master visszaadja a mesteroldalt, amin egy FindControl() segítségével egyszerűen meg tudom keresni a kívánt vezérlőt. Abban az esetben, ha az oldanak nincs mesteroldala, akkor a Page.Master értéke null lesz. Lehetőség van arra is, hogy a mesteroldalon definiált propertyket vagy függvényeket is elérjük. Ehhez azonban tudni kell a mesteroldal típusát, amit a tartalom oldalon a MasterType megadásával tudok beállítani. Lehetőség van arra is, hogy a mesteroldalon definiált propertyket vagy függvényeket is elérjük. Ehhez azonban tudni kell a mesteroldal típusát, amit a tartalom oldalon a MasterType megadásával tudok beállítani.
Események lefutásának sorrendje 1. MasterPage_OnInit() 2. Page_OnInit() 3. Page_Load() 4. MasterPage_Load() 5. Page_PreRender() 6. MasterPage_PreRender() 7. Page_Render() 8. MasterPage_Render()
Egyedi Sever Control-ok létrehozása WebPart-ok MasterPage Tematika Egyedi Sever Control-ok létrehozása WebPart-ok MasterPage Témák, CSS, Skin ASP.NET AJAX Implemetálása
CSS – Cascading Style Sheet Három féle módon alkalmazhatjuk: Inline <span style="color:Red;font-weight:bold;">Hello World</span> Embedded <style type="text/css"> .redboldtext { color:Red; font-weight:bold; } </style> External style sheet <link type="text/css" href="MyStyle.css" rel="stylesheet"> Embedded, External -> head tag közé
Témák és Skinek Témák: Egy könyvtárba foglaljuk azokat az allományokat amelyek a megjelenéshez szükségesek App_Theme Skinek: összetett vezérlőkre egyszerűbben tudjuk megadni az egységes kinézetet. Célszerű CSS-t használni Egy absztrakciós szinttel feljebb tudjuk megadni a kinézete Skin használatának kikapcsolása: EnableTheming = false
Egyedi Sever Control-ok létrehozása WebPart-ok MasterPage Tematika Egyedi Sever Control-ok létrehozása WebPart-ok MasterPage Témák, CSS, Skin ASP.NET AJAX Implemetálása
Microsoft AjaxLibrary Javascript kódgyűjtemény Bevezetés Microsoft AjaxLibrary Javascript kódgyűjtemény ASP.NET AJAX server controls AJAX control toolkit közösség által fejlesztett gyűjtemény http://www.asp.net/ajax/AjaxControlToolkit/Samples/ AJAX Előnyei: partial-page updates client-side processing desktop-like ui progress indication improved performance and higher scale Web service calls from the client cross-browser cross-platform support
AJAX server controls ScriptManager és ScriptManagerProxy Update Panel UpdateProgress Timer vezérlő
demo LoginDemo UpdatePanellel
© 2006 Microsoft Corporation. All rights reserved © 2006 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.