XML alapú adatkötés JavaScriptben

Amikor először meghallottam, hogy az ASP.NET AJAX többek között a címben megnevezett szolgáltatást is nyújta, bizony kis híján elment tőle a kedvem: nem vagyok oda sem az XML-ért, sem pedig a JavaScriptért – noha mindkettőnek látom a maga előnyeit bizonyos esetekben. Jobban megismerkedve ezzel a lehetőséggel, egészen barátságos kis jószággá szelídült az a fránya JavaScript.

Kezdjük az elején: az ASP.NET AJAX több részből áll, ezek közül az egyik a Microsoft AJAX Library, amely egy böngésző és szerver független JavaScript osztálykönyvtár. Lényegében azokat a szolgáltatásokat adja, amikre eddig is szükségünk volt, ha a weblapjaink kliens oldali szolgáltatásait akartuk felturbózni: HTML tag-ek elérése és adatok manipulálása. (Ennél persze lényegesen többről van szó.) A funkciók közül sajnos még nincs minden készen, tehát ha valaki meg akar ismerkedni vele, telepítse fel az ASP.NET AJAX Futures CTP-t, majd indítsa el a Visual Studiot és hozzon létre egy új webhelyet, amely támogatja ezt a komponenst. (File – New – Web Site… – ASP.NET AJAX CTP-Enabled Web Site).

Az a kedvencem ebben az osztálykönyvtárban, hogy teljesen elfedi a JavaScript böngészőfüggéseit, ráadásul olyan névtereket és osztályokat tartalmaz, amelyek kísértetiesen hasonlítanak a .NET-es osztályokhoz.

A szükséges kliens oldali JavaScripteket a ScriptManager komponens fogja az oldalba ágyazni, ha megnyitjuk a Default.aspx fájlt Markup nézetben, láthatjuk is benne. Egészítsük ki ezt úgy, hogy a Microsoft.Web.Preview.dll-ben lévő PreviewScript.js is elérhető legyen:

<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewScript.js" />
    </Scripts>
</
asp:ScriptManager>

Hello World!

Kezdjük rögtön a Hello World! megírásával. A <HEAD> és </HEAD> közé tegyünk egy üzenetablakot, majd csapjunk a Ctrl-F5-re:

<head runat="server">
    <title>ASP.NET AJAX kliens szkript demó</title>
    <script language="javascript" type="text/javascript">
        function pageLoad()
        {
            Sys.Preview.UI.Window.messageBox( "Az oldal inicializálása befejeződött." );
        }
    </script>
</head>

Aki már írt JavaScriptet, annak két dolog biztosan feltűnt:

1. Nem az alert függvényt használtuk. Ennek az osztálykönyvtárnak a segítségével nem kell a window.alert(), a window.confirm() és a window.prompt() metódusokat használnunk, hanem hívhatjuk a szerver oldalon már megszokott messageBox() és inputBox() függvényeket. Persze a camelCase-re oda kell figyelni, meg a paraméterezés is eltér egy kicsit, sőt, azt a hosszú névteret is ki kell írni, de azért valljuk be, mégis csak barátságosabb smile_sarcastic

2. A második figyelemreméltó dolog, hogy nem kellett feliratkoznunk a BODY onload eseményére. A pageLoad metódus meghívódik automatikusan, ráadásul azután, hogy az ASP.NET AJAX runtime inicializálta magát.

(Megjegyzés: a kódrészletek az ASP.NET AJAX 1.0 2007. januári Futures CTP alapján készültek, a névterek és a metódusok nevei változhatnak a jövőben!)

HTML elemek elérése

A JavaScript és a DOM eltérő implementációjának "köszönhetően", nem azonos módon tudjuk elérni a HTML oldal egyes elemeit kliens oldalon. Magyarul ha hivatkozni szeretnénk egy gombra vagy egy képre, akkor már pusztán ahhoz töb sor kódot kell írnunk, hogy egy referenciát szerezzünk az adott elemre. Na ezt is szépen elfedi előlünk az ASP.NET AJAX. Íme egy példa:

Tegyünk egy szövegdobozt, egy gombot és egy cimkét az oldalra:

    Az Ön neve:
    <input id="txtName" type="text" />
    <input id="btnWelcome" type="button" value="Mondd szia!" onclick="greetMe()" />
    <span id="lblMessage"></span>

A feladat természetesen a szövegdöbözba írt szöveg megjelenítése a cimkében. A megoldást nyújtó greetMe() metódust írhatjuk a HEAD-ben korábban megnyitott SCRIPT elembe:

    function greetMe()
    {
        var txtName = new Sys.Preview.UI.TextBox( $get( "txtName" ) );
        var message = String.format( "Szia, {0}!", txtName.get_text() );
        var lblMessage = new Sys.Preview.UI.Label( $get( "lblMessage" ) );
        lblMessage.set_text( message );
    }

A $get() megkímél minket a document.all és a document.getElementById szörnyektől és lényegesen olvashatóbb kódot eredményez.

A legdurvább az egészben az, hogy mindezt lehet automatizálni, erre szolgál az:

Adatkötés

Ugyanúgy, ahogy szerver oldalon már megszoktuk, adatkötés segítségével összekapcsolhatunk adatforrásokat és kontrollokat. Ezt megtehetjük akár kódból, akár XML-ből, és itt jön a képbe az XML-script. Sok szövegelés helyett próbáljuk ki:

Hozzunk létre egy images nevű mappát és tegyünk bele néhány képet, mondjuk ezeket:

 

Nevezzük el a fájlokat rendre: flag_at.gif, flag_es.gif, flag_fi.gif, flag_gb.gif, flag_hu.gif

Hogy ne keveredjen a művünk az előzővel, hozzunk létre egy új ASPX oldalt és a ScriptManagert a fentiek szerint egészítsük ki. Ezek után adjunk az oldalhoz egy lenyitható listát és egy képet:

    <select id="selCountries" size="6">
        <option value="HU" selected="selected">Magyarország</option>
        <option value="GB">Nagy Britannia</option>
        <option value="FI">Finnország</option>
        <option value="ES">Spanyolország</option>
        <option value="AT">Ausztria</option>
    </select>
    <img src="" id="imgFlag" alt="Zászló" />

A feladat az, hogy a kiválasztott ország zászlóját azonnal jelenítsük meg. Ehhez írhatnánk eseménykezelő kódot, vagy megfogalmazhatnánk az adatkötést a pageLoad() metódusban a Binding osztály segítségével. Ehelyett inkább tegyük meg mindezt deklaratívan XML-scriptben:

<head id="Head1" runat="server">
    <title>ASP.NET AJAX adatkötés</title>
    <script type="text/xml-script">
        <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
            <components>
                <selector id="selCountries" />
                <image id="imgFlag" >
                    <bindings>
                        <binding dataContext="selCountries" dataPath="selectedValue" 
property="imageURL" transform="ToString"
transformerArgument="images/flag_{0}.gif" /> </bindings> </image> </components> </page> </script> </head>

A fontosabb pontok:

  • A selector jelenti a hivatkozást a lenyitható listára, az image pedig a képre.
  • Az adatkötés megfogalmazása WPF stílusban történik, a cél kontrollnál adunk meg mindent, azért van bindings az image tag elett:
    • dataContext: a forrás kontroll
    • dataPath: a forrás kontroll forrás tulajdonsága
    • property: a cél kontroll cél tulajdonsága
    • transform: egy kis adatgyúrás. A ToString gyakorlatilag egy String.Format hívást fog jelenteni, amihez a formátumot bemenő paraméterként adjuk a transformerArgument attribútumban.

És kész, ennyi, működik, ki lehet próbálni!

Természetesen egy elemhez több bindingot is rendelhetünk. Tehetünk például az oldalra egy jelölőnégyzetet és megadhatjuk, hogy a kép csak akkor jelenjen meg, ha a checkboxot a felhasználó bepipálta. Így tegyük az oldalra a kontrollt:

    <input id="chkShow" type="checkbox" checked="CHECKED" /> 
A kiválasztott ország zászlajának megjelenítése:

Az adatkötést pedig így írjuk át:

    <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
        <components>
            <selector id="selCountries" />
            <checkBox id="chkShow" />
            <image id="imgFlag" >
                <bindings>
                    <binding dataContext="chkShow" dataPath="checked" property="visible" />
                    <binding dataContext="selCountries" dataPath="selectedValue" 
property="imageURL" transform="ToString"
transformerArgument="images/flag_{0}.gif" /> </bindings> </image> </components> </page>

Mit tegyünk akkor, ha pont ez ellenkező irányban szeretnénk használni a checkbox-ot? Mi sem egyszerűbb: használjuk az Invert transformert, ami meginvertálja a boolean értékeket:

<binding dataContext="chkShow" dataPath="checked" property="visible" transform="Invert" />

Ugye, hogy ütős? (Hát még ha majd lesz hozzá designer az Orcas-ban!) És mindez csak ízelítő, aki szeretne jobban megismerkedni a Microsoft AJAX Library lehetőségeivel, annak jó hír, hogy a csütörtök-pénteki MSDN Kompetenciák Egyetemén lesz róla szó részletesen, lehet még regisztrálni!

A cikkhez tartozó teljes forráskód letölthető a devPORTALról.

Technorati tags: ,

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s