Megismerkedünk az Ajax Control Toolkit (ACT) csomaggal, ennek néhány vezérlőjével, azok működésével

ASP.NET ALAPOZÓ 4. gyak ACT 2. feladat

Áttekintés Megismerkedünk az Ajax Control Toolkit (ACT) csomaggal, ennek néhány vezérlőjével, azok működésével.

Segítség ACT vezérlőiről leírás és példák a következő oldalon találhatóak: http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/ Csala Péter (gyakorlatvezező) régebben írt az ACT-ről: http://csalapeter.wordpress.com/2007/09/14/ajax-control-toolkit-i-alapok/

Telepítés ACT használatba vételéhez, azt hozzá kell adnunk a projektünkhöz. Ezt a NuGet csomagkezelő alkalmazással tehetjük meg, ami a Visual Studio 2010 szerves részét képezi. A létező projektünk elindítása után a Solution Explorerben jobb klikk a projekt nevére majd Manage NuGet packages linkre kattintva indíthatjuk el a NuGet csomagkezelőt.

Baloldalon több opcióból lehet választani. Nekünk most az Online kell. Jobb oldalt pedig a kereső mezőbe beírva az ajax szót ki is dobja középen a találatok között az ACT-et. Azt kiválasztva, majd install gombra kattintva már használatba is lehet venni.


Használatához minden oldal tetejére el kell helyeznünk az alábbi hivatkozást, vagy akár a teljes projektre is beállítjuk ezt a web.config-ban. Lokálisan így állíthatjuk be az oldal tetején: <%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit"%>

Míg projekt szinten a web.configban pedig így: <system.web> ... <pages>

A gyakorlat feladata Először megismerkedünk az Extender jelentésével, majd pedig bemutatásra kerül kettő közülük:  

AlwaysVisibleControlExtender AutoCompleteExtender

Végezetül pedig megnézünk egy olyan vezérlőt, mely szintén az ACT része, de mégsem extender: 

Accordion


Extender alapok Az extender-ekhez az egyik alap 5letet a custom control adta, ezen belül is az, amikor egy meglévő vezérlőből származtatjuk az új egyedi vezérlőnket, nem pedig az absztrakt Control ősosztályból. Ha valamilyen plusz funkcionalitást szeretnénk adni pl.: mondjuk a textbox-hoz, hogy csak numerikus karaktereket lehessen bevenni a beviteli mezőbe, akkor ehhez a feladathoz létre kellett hoznunk egy új vezérlőt, ami sok idő és + erőforrás. Az Extender vezérlők egy teljesen új elgondolásnak köszönhetően sokkal hatékonyabb fejlesztést eredményeznek. A kiterjesztők egy úgynevezett behavior objektum segítségével megváltoztatják a vezérlő alatt lévő DOM-ot (Document Object Model) és kliens oldali eseményekre regisztrálnak fel. A behavior a kliens oldali logikáért felelős, míg az extender egy szerver oldali vezérlő! Fontos azt is látnunk, hogy ettől még a programozói interfésze nem változik meg a kiterjesztett vezérlőnek. Azt is érdemes észrevenni, hogy az Extenderek sokban hasonlítanak a DHTML-re. A nagy különbség csupán annyi, hogy míg a Dynamic HTML egy HTML tag viselkedését, kinézetét változtatja meg, addig az Extender egy markup blokkot bővíti ki, amit egy ASP.NET vezérlő generált. Az igazi nagy előnye az extender-eknek az, hogy általában nem csak egyféle vezérlő típust támogatnak, hanem többet is. Ezzel megspóroljuk azt a sok plusz munkát, hogy minden egyes kiterjesztendő vezérlőből készítünk egy-egy szuper vezérlőt. (Az extender-ök használnak kliens oldali kódot is, így ahhoz ezek helyesen működjenek, szükségük van az AJAX Framework-re és az AJAX Extensions-szel együtt települő ScriptManager-re!) Az extender vezérlők mindegyike az úgynevezett ExtenderControl osztályból van származtatva, mely tartalmazza a közös tulajdonságokat is, pl.: Enabled, TargetControlID. Az utóbbi tulajdonság egy string-et vár értékül, mely az azonosítója a kiterjesztendő vezérlőnek, tehát például: TextBox1.

Extender csoportok Az extender vezérlőket aszerint szokás csoportosítani, hogy milyen típusú vezérlőket képesek kibővíteni. Ezek alapján az alábbi osztályokat különböztetjük meg: - Panel Extenders: CollapsiblePanelExtender, DragPanelExtender, DropDownExtender - Button Extenders: ConfirmButtonExtender, MutuallyExclusiveCheckBoxExtender, ToggleButtonExtender - Pop-up Extenders: HoverMenuExtender, ModulPopupExtender, PopupControlExtender - User-Interface Extenders: AlwaysVisibleControlExtender, CascadingDropDownExtender, DropShadowExtender, DynamicPopulateExtender, PagingBulletedListExtender, ResizableControlExtender, RoundedCornersExtender - Input Extenders: AutoCompleteExtender, CalendarExtender, FilteredTextBoxExtender, MaskedEditExtender, NoBotExtender, NumericUpDownExtender, PasswordStrengthExtender, SliderExtender, TextBoxWatermarkExtender, ValidatorCalloutExtender - Animation Extenders: AnimationExtender, UpdatePanelAnimationExtender


AlwaysVisibleControlExtender Mint ahogy a fentebbi csoportosításból is látszik az AlwaysVisibleControlExtender egy felhasználói-felület változtató extender. Gondolom már mindenkivel megtörtént, hogy amikor egy hosszú weboldalt lefelé görgetett, akkor a scrollozást követette a képernyőn egy panel. Vagyis mindig látszott a panel. Ezek általában baromi idegesítők tudnak lenni, hiszen sokszor olyan részre csúsznak rá, amelyet el szeretnénk érni. Nem is beszélve arról, hogy ezek általában reklámot tartalmaznak. Azért létezik értelmes felhasználásuk, bár nem túl gyakori. Tegyük fel, hogy az oldalunk tartalmi része csak a 80%-át foglalja el a képernyőnek Így a maradék 20%-ban tud szabadon „mozogni” az ACVE panel, anélkül, hogy különösebb gondot okoznak. A tartalomnak, pedig nem feltétlenül kell reklámnak lennie, lehet kezelési útmutató (short keys), határidő figyelmeztetés, vagy akár szavazógép, stb.. Nézzük, hogyan is történik az ACVE használata a gyakorlatban! Itt szerencsénkre van design támogatás, amelyet ki is fogunk használni. Tehát design nézetben húzzunk a forumnak egy AlwaysVisibleControlExtender-t. Egy panel-t szeretnénk megjeleníteni mindig a képernyő jobb felső sarkában. Így adjunk egy panel-t az oldalhoz. Fontos, hogy csak a tartalmát adjuk meg, (illetve formázzuk meg), esetleg a kinézetét szabjuk testre, de az elhelyezkedését ne állítsuk be, azt majd az AVCE-vel tesszük! Állítsuk be az AVCE TargetControlId-ját a panelünk id-jára:

A dropdownlist-ben megjelenő vezérlőlistán lenne még mit javítaniuk az ACT fejlesztőinek, hiszen olyan vezérlőket is felajánl, mint például a ScriptManager. Ezek után, válasszuk ki az av_panel-t, majd F4. Megjelent a tulajdonság ablakában egy új csoport, avce(AlwaysVisibleControlExtender) néven. Nyissuk ki:


A BehaviorID az Extender azonosítóját szabja meg. A HorizontalSide a vízszintes elhelyezkedését állítja be a Panel-nek, ami lehet jobbra, középre illetve balra zárt (right, center, left). A VerticalSide tulajdonság értelemszerűen a vertikális, függőleges helyzetet szabja meg, ami lehet fent, lent vagy középen (top, bottom, middle). A HorizontalOffset a pixelekben megadott távolság a böngésző adott széle és a panel között. Ez alapértelmezés szerint 10px. A VerticalOffset hasonlóan a böngésző szélétől való távolságot állítja be, pl.: ha a VerticalSide=Top, akkor a böngésző menüsorától 10px-lel lesz lejjebb a panel teteje. Végül a ScrollEffectDuration tulajdonság segítségével azt tudjuk szabályozni, hogy a panel hány másodperc alatt tegye meg azt az utat, hogy szinkronban legyen a scroll mozgásával. Az alapértelmezett érték a .1. Adjunk valami hosszú szöveget az oldalunkhoz, állítsuk a szöveg szélességét 80%-ra, majd futassuk! Érdekesség CodeBehind-ban!

Tegyük fel, hogy dinamikusan szeretnénk állítani a panelünk elhelyezkedését. Amikor a code-behind fájlban beírjuk az av_panel. -ot, majd sasoljuk az IntelliSence-t, akkor láthatjuk, hogy nincsen se VerticalSide, se HorizontalOffset, stb. tulajdonság. Akkor még is hol keressük őket? A válasz: az Exentder-nél. Az exentder-en keresztül a behavior paramétereit állítjuk be, majd ezt ragasztjuk rá a vezérlőnkre. Ha megnézzük a markup fájlunk source nézetét, ott is látni fogjuk, hogy az AVCE attribútumai lesznek a fentebb felsorolt tulajdonságok. Magyarul az csak egy design módbeli feature, hogy a kiterjesztendő vezérlő tulajdonságainál tudjuk beállítani a behavior objektumot. Visszatérve az extender programozására, így állíthatjuk át a vízszintes elhelyezkedést: avce.HorizontalSide = AjaxControlToolkit.HorizontalSide.Right;


AutoCompleteExtender AutoCompleteExtender alapok

Ez az extender, arra szolgál, hogy felhasználó által begépelt szövegrészletet kiegészítse, olyan szavakkal (mondatokkal), melyeknek a prefixe (előtagja) megegyezik az eddig begépelt szöveggel. Ilyen szolgáltatással már találkozhattunk a böngészőinkben, melyek megjegyzik az összes eddigi beviteli mezőbe beírt szöveget, és a későbbiekben egy legördülő lista segítségével tudunk ezek között válogatni. Nos pontosan ezt a szolgáltatás tudjuk implementálni alkalmazásainkba, úgy hogy mi (fejlesztők) mondhatjuk meg, hogy mikor, milyen és hány darab lehetséges szó közül választhasson majd a kliens. A „mikor” alatt azt értem, hogy megszabható, hogy hány leütött karakter után jelenjenek meg a lehetséges végződések, melyek prefixe illeszkedik ezekre a betűkre. Ezt a MinimumPrefixLength tulajdonság segítségével állíthatjuk be. A „milyen”, itt arra utal, hogy mi fejlesztők szabjuk meg a lehetséges végződéseket. Ezt, stílusosan, egy Webszolgáltatás segítségével tehetjük meg. A „hány” pedig értelemszerűen azt szabja meg, hogy mennyi végződési lehetőséget engedünk meg egyszerre megjelenni a textbox alatt lévő legördülő listában. Ezt a CompletionSetCount tulajdonságon keresztül tudjuk szabályozni. Még egy hasznos és fontos tulajdonságát érdemes megjegyezni az ACE vezérlőnek, ez pedig nem más, mint az EnabledCaching. Ez akkor igazán hasznos, ha a prefix-től független végződéseket generálunk, így a következő karakter bevitele után nem fog ismét lefutni a webszolgáltatás, hanem már a gyorsítótárból lesz kinyerve a lehetséges végződések gyűjteménye! Most, hogy már tisztában vagyunk az ACE alapjaival, ideje megnéznünk ezt a többször is emlegetett webszolgáltatást.

WebService, mint az ACE lelke Először hozzá kell adnunk a projektünkhöz egy webszolgáltatást, valamilyen hasonló módon: Solution Explorer-ben, Projecten jobb klikk >> Add new item.. >> WebService >> névnek adjuk meg, hogy AutoComplete.asmx. Ilyenkor két fájl is létre fog jönni. Lesz AutoComplete.asmx fájlunk a projekt gyökér könyvtárában, ami igazándiból csak referenciaként szolgál az AutoComplete.cs fájlból futásidőben generálódó szerelvényre. Ha most megnézzük az asmx fájl tartalmát, akkor egyetlen sornyi kóddal fogunk csak találkozni. Ezt ne is piszkáljunk! Nekünk a másik fájlra van szükségünk, amire hivatkozik az asmx, vagyis az AutoComplete.cs. Ezt nyissuk meg, de a szerkesztés előtt három fontos dolgot még meg kell néznünk! 1. – A webszolgáltatások úgynevezett webmetódusokat tartalmaznak. Ezek annyiban térnek a sima metódusoktól, hogy van egy kötelező WebMethod attribútumok.


2. – Ahhoz, hogy az ACE el tudja, majd érni a webmetódusunkat, az őt tartalmazó osztálynak is kell adnunk egy attribútumot: [System.Web.Script.Services.ScriptService] Ez azért kell, hogy a kliens oldali java script kód is meg tudja hívni a webszolgáltatást. 3. – Az elkészítendő webservice-ünk szintaktikája kötött, olyannyira, hogy a bemenő paraméterek neve is fix! Vessünk is erre egy pillantást: public string[] webmethod_name(string prefixText, int count) { A prefixText tartalmazza a felhasználó által eddig bevitt szövegrészletet. A count pedig az ACE CompletionSetCount tulajdonságnál megszabott érték. Fontos azt is észrevennünk, hogy string tömböt kell visszaadnia a webmetódusunknak.

Ezen három dolog figyelembe vételével készítsünk most egy olyan webszolgáltatást, mely e-mail címeket fog kiegészíteni kukaccal illetve az utána jövő domain résszel. Nézzük a kódot, majd utána a magyarázatot: [WebMethod] public string[] GetDomainList(string prefixText, int count) { List<string> items = new List<string>(count); string[] suffix = new string[10]; suffix[0] = "freemail.hu"; suffix[1] = "citromail.hu"; suffix[2] = "vipmail.hu"; suffix[3] = "mailbox.hu"; suffix[4] = "freestrat.hu"; suffix[5] = "gmail.com"; suffix[6] = "hotmail.com"; suffix[7] = "yahoo.com"; suffix[8] = "inbox.com"; suffix[9] = "microsoft.com"; if (!prefixText.Contains("@")) prefixText += "@"; else { if (!prefixText.EndsWith("@")) return items.ToArray(); }//end else for (int i = 0; i < count; i++) { items.Add(String.Format("{0}{1}", prefixText, suffix[i])); } //end for return items.ToArray(); }


A kódunk elején használunk generikus osztályt (List), ezért szükségünk van a System.Collections.Generic névtérre! Utána egy 10 hosszú tömbben eltároljuk a leggyakoribb domain-eket. Majd megvizsgáljuk azt, hogy eddig mit írt be a felhasználó: - ha nem jutott még el a kukacig, akkor a domain elé beszúrunk egy @ jelet. - ha beírta a kukacot és ez az utolsó karakter, akkor kiírjuk egyszerűen a domain-okat (így nem lesz két @ egymás után). - ha pedig tartalmaz kukacot, és ez nem az utcsó karakter, akkor nem jelenítünk meg semmit, hiszen ilyenkor már elkezdte írni a domain-t. (Természetesen a kód szebb lenne, ha regexp-et használnánk, de most a funkcionalitáson van a hangsúly!) Végül pedig meghívjuk a lista objektumunk ToArray() tagfüggvényét, amely segítségével a listából tömböt készítünk. ACE használata

Most hogy már megvan a webszolgáltatásunk ideje kipróbálnunk az ACE képességeit. Az AutoCompleteExtender-t értelemszerűen csak és kizárólag TextBox-hoz lehet hozzá kötni! Ennek a fényében húzzunk a formunkra egy textbox-ot és egy ACE-t. Az ACE TargetControlID-ját állítsuk be Textbox1-re. Menjünk a TextBox tulajdonságai közé, keressük meg az AutoCompleteExtender1… tulajdonság csoportot, és az alábbiakat állítsuk be: - ServicePath = AutoComplete.asmx (fontos, hogy a kiterjesztés is ott legyen!) - ServiceMethod = GetDomainList A MinimumPrefixLength tulajdonság alapértéke 3, ami nekünk tökéletesen megfelel ugyanúgy, mint a CompletionSetCount alapértelmezett 10-es értéke, ezért ezeket külön nem kell beállítanunk. (Ha nagyobb értéket állítunk be, mint amekkora a service által generált tömb mérete, akkor nem fog jelenni egyetlen lehetséges végződés se)! És most már működéskész is az alkalmazásunk, futassuk!


Accordion Megjelenésre vonatkozó beállítások - A SelectedIndex attribútum értelemszerűen azt állítja be, melyik legyen az alapértelmezetten kiválasztott, azaz megjelenő, panelünk. Most ez a legelső panel lesz. - A HeaderCssClass a panel, (amit innentől kezdve nevezzünk AccordioPane-nek), fejlécének a stílusát állítja be. /A kövi bekezdésnél, láthattunk erre egy példa css-t!/ Mi most az accordionHeader osztály használjuk. - A ContentCssClass-ban megadott osztály, az AccordionPane-k content-jeinek (megjelenő szövegrész) formázásáért felelős. - Az AutoSize segítségével azt tudjuk megszabni, hogy a vezérlőnövekedése automatikus legyene vagy sem. Valóban három lehetőség közül választhatunk a None, a Fill és a Limit közül. IE6 illetve IE7 alatt a Fill és a Limit ugyanazt eredményezi, mivel nem támogatják a max-height CSS tulajdonságot. FF alatt a kettő között a különbség az, hogy a Limit-nél nincs autoresize, így maximum a height tulajdonságban megadott teret töltheti csak ki, és ha túl lógna, akkor jelenik meg a scroll. Míg Fill esetén az Accordion mindig ugyanakkora helyet tölt ki (max Height). Pl.: content-500, accordion-700 magas. Fill esetén accordion 700px mindig, Limit esetén 500 + fejlécek magasságú! Értelemszerűen a None pedig engedélyezi az autoresize-t, vagyis az alatta lévő vezérlőket lejjebb csúsztatja. Viselkedéssel kapcsolatos beállítások - A FadeTransitions beállítás egy bináris értéket vár értékül, aszerint hogy szeretnénk-e fade effektet használni (tehát amikor összecsukjuk, vagy kinyitjuk valamelyik accordionpane-t, akkor szépen elhalványodjon, illetve előtűnjön a kiválasztott panel). Ha true-ra állítjuk, akkor lesz fade effect is, ha false-ra, akkor csak az alap animáció lesz pane váltáskor. Mi erre most nem tartunk igényt, de ha mégis szükségünk lenne rá, akkor a TransitionDuration tulajdonságon keresztül tudjuk beállítani milliszekundumokban a fade effect időtartamát. Ezt általában 250-re szokás állítani! - A FramePerSecond az fps-t szabja meg, vagyis hogy hány kép/másodperc frissítéssel hajtódjon végre az animáció. A neten található példákban, mindenhol 40 fps a standard, bár a szem 25 fps felett már folyamatosnak látja a képet. - A RequireOpenedPane tulajdonsággal az Accordion két állapotát (egy van nyitva, egy sincs nyitva) le tudjuk csökkenteni egy állapotúra, mindig van egy nyitott Pane-re. Magyarul, ha a kinyitott Pane fejlécére kattintunk és ez a tulajdonság true értéket vesz fel, akkor nem tudjuk összecsukni! - A SuppressHeaderPostbacks egy alternatíva arra, hogy hogyan kezeljük a fejlécben megadott hyperlinket (lentebb bővebben). A Hyperlink accessibility szempontból lényeges, hiszen így az oldalt felolvasó program tudja, hogy erre rá lehet kattintani. De mi nem szeretnénk teljes PostBack-et, ha valaki rákattint a fejlécre, ezért ezt a tulajdonságot állítsuk true-ra! Lentebb látható majd egy másik alternatíva is erre.

Megismerkedünk az Ajax Control Toolkit (ACT) csomaggal, ennek néhány vezérlőjével, azok működésével

Recommend Documents