ASP.NET AJAX és az ASP.NET rejtelmei

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 .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()!!!!

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"); 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

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.

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=" <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;

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

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

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

ASP.NET AJAX és az ASP.NET rejtelmei

Hasonló előadás

Az előadások a következő témára: "ASP.NET AJAX és az ASP.NET rejtelmei"— Előadás másolata:

Hasonló előadás

Projectumról

Visszajelzés

Bejelentkezés

A társadalmi hálózaton keresztül belépni:

ASP.NET AJAX és az ASP.NET rejtelmei

Hasonló előadás

Az előadások a következő témára: "ASP.NET AJAX és az ASP.NET rejtelmei"— Előadás másolata:

Hasonló előadás

Projectumról

Visszajelzés