Daily Archives: 2007.02.13. 6:16

Saját action XML-Scriptben

Előző bejegyzésemben már írtam arról, mennyire jól használhatóak az akciók XML-Scriptben, hiszen deklaratívan írnak le kliens oldali funkcionalitást, amiből egyszer majd JavaScript keletkezik és ontja a magicet a böngészőben. Sajnos a beépített eksönök száma nem túl nagy, de szerencsére a rendszer nyitott, készíthetünk sajátot, hát nosza! Egy jól működő saját akció feltételei:

  • Saját osztályt kell készíteni JavaScriptben, ami a Sys.Preview.Action osztályból származik.
  • Implementálni kell a performAction metódust. Ha valaki megnézi a PreviewScript.debug.js fájlban, hogyan implementálták az ősosztály metódusát, nagyon elegáns megoldással találkozik, mindössze ennyi van benne: Error.notImplemented(); smile_teeth
  • Definiálni kell egy descriptort, hogy az action deklaratívan is használható legyen.

Essünk neki! Hozzunk létre egy új ASP.NET AJAX CTP-Enabled Web Site-ot Visual Studioban, majd adjunk a projekthez egy JScript File típusú elemet, a neve legyen StatusAction.js. Ebben a fájlban egy olyan akciót fogunk elkészíteni, amely az ablak státuszsorán tud megjeleníteni egy üzenetet.

Ebben a JavaScript fájlban mindenek előtt hozzunk létre egy új névteret, például Budapest néven:

    Type.registerNamespace( 'Budapest' );

Hozzunk létre egy új osztályt ebben a névtérben StatusAction néven. Az osztálynak legyen egy text tulajdonsága, melyet egy get_text és egy set_text metóduson keresztül lehet manipulálni, valamint írjuk meg a szükséges performAction metódust, amiben megjelenítjuk az ablak státuszsorában a text tulajdonság értékét. Az osztály teljes kódja valahogy így fest:

    Budapest.StatusAction = function() {
        this._text;
    }

    Budapest.StatusAction.prototype = {
        get_text : function() {
            return this._text;
        },
        
        set_text : function( value ) {
            this._text = value;
        },
        
        performAction : function() {
            window.status = this._text;
        }
    }

Hozzuk létre a deklaratív használathoz szükséges descriptort, amely az egyedüli text tulajdonságot tartalmazza:

    Budapest.StatusAction.descriptor = {
        properties: [ { name: 'text', type: String } ]
    }

Végül ne felejtsük el beregisztrálni az osztályt a Sys.Preview.Action osztály gyermekeként:

    Budapest.StatusAction.registerClass( 'Budapest.StatusAction', Sys.Preview.Action );

Ezzel az action készen is van, használjuk fel! Hozzunk létre egy ASPX oldalt, adjuk hozzá a ScriptManager kontrollt, majd módosítsuk úgy, hogy a PreviewScript.js és az előbb létrehozott StatusAction.js kezeléséről is gondoskodjon:

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

Tegyünk az oldalra egy egyszerű gombot, amire kattintva majd megjelenítünk egy szöveget a státuszsoron:

    <input type="button" id="btnWriteStatus" value="Írás a státuszsorra" />

Az XML-Scriptünk lényegében a szokásos, mindössze egyetlen apróságra kell figyelnünk: a létrehozott Budapest névterünkhöz létre kell hoznunk egy XML névteret is. Korábban ezt azért nem használtuk, mert az XML-Script parser végignézi az alábbi névtereket az osztályok után kutatva:

  • Sys
  • Sys.UI
  • Sys.Net
  • Sys.Preview
  • Sys.Preview.UI
  • Sys.Preview.Net
  • Sys.Preview.Data
  • Sys.Preview.UI.Data
  • Sys.Preview.Services.Components

A teljes XML tehát így fest:

  <script type="text/xml-script">
        <page xmlns="http://schemas.microsoft.com/xml-script/2005" xmlns:b="Budapest">
            <components>
                <button id="btnWriteStatus">
                    <click>
                        <b:StatusAction text="Üzenet XML-Scriptből!" />
                    </click>
                </button>
            </components>
        </page>
  </script>        

Mivel az action valójában egy osztály, ezért természetesen használhatjuk kódból is, nem csak deklaratívan. Például, ha létrehozunk a HEAD-ben egy SCRIPT elemet és azon belül egy pageLoad metódust, az automatikusan le fog futni, amint az oldal betöltődött. Itt már van lehetőségünk a saját osztályunk használatára:

    <script language="javascript" type="text/javascript">
        function pageLoad()
        {
            var action = new Budapest.StatusAction();
            action.set_text( 'Üzenet kódból' );
            action.performAction();
        }
    </script>

Látható, hogy saját actiont készíteni nem ördöngősség, bár kétségkívül JavaScriptet kell hozzá írni. Ha viszont ezen túl vagyunk, már használhatjuk a kényelmes deklaratív megközelítést, amihez egyszer majd remélhetőleg valamilyen designer eszközt is kapunk….

A fenti StatusAction teljes forráskódja letölthető a devPORTALról.

 

Technorati tags: ,
Advertisements

Action XML-Scriptben

Korábban már írtam az ASP.NET AJAX-ban található actionökről, mégpedig az újraküldés figyelése kapcsán. Az ott bemutatott megoldás az ASP.NET AJAX Control Toolkiten alapult, így szerver oldali kontrollokat és logikát tételezett fel.

Jó hír, hogy van lehetőség actionök használatára a kliens oldalon, ehhez azonban az ASP.NET AJAX Futures CTP-re lesz szükségünk. Telepítsük fel, majd hozzunk létre Visual Studioban egy ASP.NET AJAX CTP-Enabled Web Site-ot. Váltsunk át markup nézetbe a Default.aspx-en, majd adjunk az oldalhoz egy kliens oldali gombot és egy SPAN elemet, valahogy így:

    <span id="lblResult">Egy egy SPAN, itt jelenik majd meg az eredmény.</span>
    <input type="button" id="btnChange" value="Változtatás" />

A továbbiakhoz szükség lesz a PreviewScript.js fájlra, ezért módosítsuk a ScriptManagert:

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

A formon belül hozzunk létre egy XML-Script blokkot, azon belül pedig egy-egy referenciát a fenti két elemre. A SPAN elérhető a Sys.Preview.UI.Label, az INPUT type="button" pedig a Sys.Preview.UI.Button osztályon keresztül, például így:

  <script type="text/xml-script">
        <page xmlns="http://schemas.microsoft.com/xml-script/2005">
            <components>
                <label id="lblResult" />
                <button id="btnChange">
                </button>
            </components>
        </page>
  </script>        

A button elemet szándékosan üresen hagytam, ide fogjuk ugyanis hozzáadni az eseménykezelőket. A gomb click eseményére szeretnénk reagálni, mégpedig úgy, hogy megváltoztatjuk a cimke szövegét, ami a Label osztály text tulajdonságának köszönhetően gyerekjáték. Ehhez használhatjuk a setPropertyAction akciót:

    <button id="btnChange">
        <click>
            <setPropertyAction target="lblResult" property="text" value="Új szöveg a SPAN-be" />
        </click>
    </button>

Ki lehet próbálni, ennek így működnie kell! Újonnan megszerzett tudásunkkal próbáljuk meg átírni a gomb szövegét is! A fenti módon ez sajnos nem fog sikerülni, mert a Button osztálynak nincs text tulajdonsága, vége a gyereknapnak. Ha valaki tudja, hogy miért nincs, írja meg, én hiányolom!

A jó hír, hogy a setPropertyActionnek – és néhány más akcióknak is – van egy propertyKey tulajdonsága is, amivel nem csak a target osztály property tulajdonságát lehet beállítani value értékre target.property=value formában, hanem a target.property.propertyKey értékét is. Ennyi segítséggel felvértezve már ki is lehet találni a megoldást:

    <setPropertyAction target="btnChange" property="element" 
propertyKey="value" value="Új szöveg a gombra" />

Ez persze így már nem volt nehéz, hiszen a HTML kódból nyilvánvaló, hogy a gomb szövegét az INPUT elemen belül a value tulajdonság határozza meg. De mi van akkor, ha az oldalon egy DIV tartalmát szeretnénk átírni. A kérdés tehát, hogy az alábbi elem megjelenő szövege hogyan módosítható a setPropertyAction segítségével:

    <div id="pnlResult">Ez itt egy DIV, aminek nincs kliens oldali kontroll megfelelője.</div>

A DIV elemhez nem tartozik közvetlenül típusos kliens oldali kontroll a Sys.Preview.UI névtérben, tehát látszólag meg vagyunk lőve. Sebaj, használjuk minden kontrollok ősét, a Sys.UI.Control osztályt és azzal definiáljunk egy referenciát a label és a button tag környékére:

    <control id="pnlResult" />

Érdekesség, hogy a Control osztály nem a Sys.Preview.UI névtérben van. Mivel minden kontroll osztály innen örökli a funkcionalitásának egy részét, érdemes megnézni, hogy az ős mi mindent tud a C:Program FilesMicrosoft ASP.NETASP.NET 2.0 AJAX Extensionsv1.0.61025MicrosoftAjaxLibrarySystem.Web.Extensions1.0.61025.0MicrosoftAjax.debug.js fájlban.

Folytatva a fenti példát hátra van még az, hogy a gombra kattintáskor át kellene írnunk a DIV szövegét. A Control osztálynak sincs text tulajdonsága, de legalább el lehet kérni a burkolt HTML elemet az element tulajdonságon keresztül, és annak már meg lehet változtatni a tartalmát a jól ismert innerHTML tulajdonság átírásával:

    <setPropertyAction target="pnlResult" property="element" 
propertyKey="innerHTML" value="Új szöveg a DIV-re" />

A setPropertyAction csak egy a sokféle akció közül, érdemes megismerkedni a többivel is!

A fenti példa teljes forráskódja letölthető a devPORTALról.

 

Technorati tags: ,