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: ,

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