dojo.require anything

xxxmatko — Wed, 29 Feb 2012 12:10:00 GMT

Ten, kto sa už niekedy stretol s javascript-ovým frameworkom dojo vie, že umožňuje vytvárať kvázi triedy pomocou metódy dojo.declare a tieto združovať do kvázi namespace-ov skrz metódu dojo.provide. Každá takáto trieda predstavuje jeden javascript-ový súbor a kvázi namespace, do ktorého je táto trieda zaradená, určuje adresárovú štruktúru, v rámci ktorej sa táto trieda nachádza. Následne potom môžeme využívať kvázi using implementovaný pomocou metódy dojo.require pre pripojenie javascript-ov do stránky namiesto pripájania jednotlivých javascript-ových súborov pomocu html elementu <script>.

Príklad jednoduchého widgetu
dojo.provide("Widgets.Parent"); dojo.require("dijit._Widget"); dojo.require("Widgets.Child1")¹; dojo.require("Widgets.Child2"); dojo.declare("Widgets.Parent"², [dijit._Widget]³, { constructor: function (args, srcNodeRef) { }, buildRendering: function () { }, postCreate: function () { } });

V ukážke je implementovaná trieda Widgets.Parent (²), ktorá dedí z triedy dijit._Widget(³) a "vyžaduje" ďalšie triedy Widgets.Child1, Widgets.Child2 (¹). Na akom princípe funguje volanie dojo.require? Na to, aby sme mohli použiť dojo framework, musíme ho na stránke referencovať. Nič prevratné. Povedzme, že ho referencujem z adresy "http://nejakaadreas.sk/dojo/dojo.js". Na základe tejto adresy sa konfiguračná property basePath objektu djConfig (základná cesta kde je umiestnené dojo core) nastaví na hodnotu "/dojo/". Volanie metódy dojo.require("Widgets.Child2") na základe uvedených konfiguračných hodnôt sa pomocou GET requestu pokúsí stiahnuť skript z adresy "http://nejakaadreas.sk/dojo/Widgets/Child2.js". Ak však nechceme, aby sa naše triedy nachádzali v tom istom priečinku ako dojo core, možeme definovať umietnenia custom tried (respektíve modulov) pomocou metódy dojo.registerModulePath("<moduleName>", "<modulePath>"), alebo ešte lepšie pomocou property paths objektu djConfig (v starších verziách dojo frameworku sa používala property modulePaths).

Nastavenie umiestnenia custom moduolov
var djConfig = { paths: { Widgets: "/custom/Widgets" } };

S vyššie uvedenou konfiguráciou volanie metódy dojo.require("Widgets.Child2") sa pomocou GET requestu pokúsí stiahnuť skript z adresy "http://nejakaadreas.sk/custom/Widgets/Child2.js". Pri definovaní cesty pre custom moduly je táto cesta relatívna k parent priečinku, v ktorom sa nachádza dojo core.

Neznamená to však, že teraz všetky naše custom moduly/triedy musia byť umiestnené v tej istej lokalite ako aj samotné dojo alebo, že musíme mať dojo umiestnené vždy v rámci samotnej webovej aplikácie. Cesta pre custom moduly môže byť reprezentovaná aj kompletnou url adresou. A konečne sa dostávame k meritu veci. Majme v webovú aplikáciu. Táto webová aplikácia referencuje knižnicu, v ktorej sú implementované server ovládacie prvky (server controls). Každý server control pozostáva zo server kódu, ktorý je zodpovedný za vyrenderovanie požadovaného html a inicializáciu dojo widgetu pre vyrenderovaný html kód. Javascript kód widgetu (tak ako je uvedený v prvej ukážke) sa nachádza ako Embedded Resource v rámci referencovanej dynamickej knižnice.

Štruktúra ukážkového projektu
Solution WebApp Custom UI WebControls Widgets Parent Parent.cs Parent.js Child1 Child1.cs Child1.js Child2 Child2.cs Child2.js

Ak by sme sa teraz pokúsili vytvoriť na stránke widget (tak ako je to uvedené v nasledovnej ukážke), tak by sme neuspeli, pretože volanie dojo.require("Widgets.Parent") zlyhá, nakoľko javascript kód widgetu "Parent" sa nenechádza na adrese "http://localhost:#####/dojo/Widgets/Parent.js", ale dá sa načítať cez handler "WebResource.axd". Jednou možnosťou, ako sa s danou situáciou vysporiadať, je to, že pred vyrenderovaním stránky vložíme do nej referencie na všetky potrebné skripty pomocu metód "RegisterClientScriptInclude" a "GetWebResourceUrl".

<html> <head> <script type="text/javascript"> var djConfig = { paths: { Widgets: "/Widgets" } }; </script> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("Widgets.Parent"); dojo.addOnLoad(function() { var parent = new Widgets.Parent({ // input params }, dojo.byId("parent")); }); </script> </head> <body> <div id="parent"></div> </body> </html>
Inicializá widgetu "Parent"

<html>
    <head>
        <script type="text/javascript">
            var djConfig = {
                paths: {
                    Widgets: "/Widgets"
                }
            };
        </script>
        <script type="text/javascript">
            dojo.require("dojo.parser");
            dojo.require("Widgets.Parent");

            dojo.addOnLoad(function() {
                var parent = new Widgets.Parent({
                    // input params
                }, dojo.byId("parent"));
            });
        </script>
    </head>
    <body>
        <div id="parent"></div>
    </body>
</html>

Inicializá widgetu "Parent"

Toto riešenie ale nie je optimálne a tak isto stráca sa funkčnosť volania dojo.require. V tomto prípade skončíme s tromi chybnými requestami typu "Not Found" pre javascriptové súbory "Parent.js" (ktorý je referencovaný na samotnej html stránke) a súbory "Child1.js", "Child2.js", ktoré sú vyžadované widgetom Parent. Iným riešením môže byť použite HttpHandlerFactory, ktorá pre spracovanie každého requestu vzniknutého volaním dojo.require použije custom HttpHandler, ktorý dokáže na základe requestu načítať resource z assembly a tento zapísať do Response, a pre každý iný request použije DefaultHttpHandler.

Konfigurácia použitia HttpHandlerFactory
<configuration> <system.web> <httpHandlers> <add verb="" path=".js" type="WebApp.DojoRequireFactory" /> </httpHandlers> </system.web> </configuration>

public class DojoRequireFactory : IHttpHandlerFactory { public IHttpHandler GetHandler(HttpContext context, string requestType, string url, string pathTranslated) { // Overime ci request koresponduje s tvarom requestu pre volania // dojo.require ak nie tak pouzijeme pre spracovanie requestu defaultny handler if (!DojoRequireHandler.Path.IsMatch(url)) { return new DefaultHttpHandler(); } // Z url adresy requestu ziskame informaciu o tom v akom nasmespace // sa resource nachadza a aky ma byt nazov skriptu var match = DojoRequireHandler.Path.Match(url); string script = match.Groups["script"].Value; List<string> scriptNamespace = new List<string>(1); var namespaces = match.Groups["namespace"].Captures; for (int i = 0; i < namespaces.Count; i++) { scriptNamespace.Add(namespaces[i].Value); } // Na spracovanie pouzijeme specialny handler return new DojoRequireHandler(script, string.Join(".", scriptNamespace)); } }
Handler Factory ktorá určí ktorý handler má spracovať request

public class DojoRequireFactory : IHttpHandlerFactory
{
    public IHttpHandler GetHandler(HttpContext context, string requestType,
        string url, string pathTranslated)
    {
        // Overime ci request koresponduje s tvarom requestu pre volania
        // dojo.require ak nie tak pouzijeme pre spracovanie requestu defaultny handler
        if (!DojoRequireHandler.Path.IsMatch(url))
        {
            return new DefaultHttpHandler();
        }

        // Z url adresy requestu ziskame informaciu o tom v akom nasmespace
        // sa resource nachadza a aky ma byt nazov skriptu
        var match = DojoRequireHandler.Path.Match(url);
        string script = match.Groups["script"].Value;
        List<string> scriptNamespace = new List<string>(1);

        var namespaces = match.Groups["namespace"].Captures;
        for (int i = 0; i < namespaces.Count; i++)
        {
            scriptNamespace.Add(namespaces[i].Value);
        }

        // Na spracovanie pouzijeme specialny handler
        return new DojoRequireHandler(script, string.Join(".", scriptNamespace));
    }
}

Handler Factory ktorá určí ktorý handler má spracovať request

public class DojoRequireHandler : IHttpHandler { // Regularny vyraz, ktory definuje v akom tvare maju vyzerat requesty vykonane cez dojo.require public static Regex Path = new Regex(@"[\w\d:/]WebResource.axd(?:/(?<namespace>\w+))/(?<script>\w+)\.js"); private string _scriptName; private string _namespaces; public DojoRequireHandler(string scriptName, string namespaces) { this._scriptName = scriptName; this._namespaces = namespaces; } public void ProcessRequest(HttpContext context) { string content = null; // Niektore assemblies chceme preskocit string [] toSkip = { "system", "microsoft"}; // Prejdem vsetky pozadovane assemblies foreach (Assembly assembly in AppDomain.CurrentDomain.GetAssemblies()) { string name = assembly.FullName.Split(',')[0].ToLower(); // Preskocime assemblies ktore nechcem spracovavat if(Array.IndexOf(toSkip, name.Split('.')[0]) != -1) { continue; } // Dynamcike assemblies nechceme spracovavat if(assembly.IsDynamic) { continue; } // Ziskame zoznam resourcov v aktualnej assembly string[] resourceNames = assembly.GetManifestResourceNames(); // Skusime najst konkretny resource foreach(string resourceName in resourceNames) { // Ak resource name nekonci nazvom skriptu a nezacina nazvom namespacu tak pokracujeme if(!resourceName.EndsWith(this._scriptName + ".js", StringComparison.InvariantCultureIgnoreCase) \|\| !resourceName.StartsWith(this._namespaces, StringComparison.InvariantCultureIgnoreCase)) { continue; } // Nacitame resource using (var resourceStream = new StreamReader(assembly.GetManifestResourceStream(resourceName))) { content = resourceStream.ReadToEnd(); } break; } // Ak bol uz nacitany resource tak dalsi nehladame if (content != null) { break; } } // Ak sa nepodarilo nacitat resource ukoncime response ako notfound if(content == null) { context.Response.StatusCode = (int)HttpStatusCode.NotFound; context.Response.Flush(); context.ApplicationInstance.CompleteRequest(); return; } // Obsah resourcu zapiseme do response context.Response.ContentType = "text/javascript"; context.Response.Write(content); context.Response.Flush(); context.ApplicationInstance.CompleteRequest(); } }
Handler pre načítanie resource z assembly

public class DojoRequireHandler : IHttpHandler
{
    // Regularny vyraz, ktory definuje v akom tvare maju vyzerat requesty vykonane cez dojo.require
    public static Regex Path = new Regex(@"[\w\d:/]*WebResource.axd(?:/(?<namespace>\w+))*/(?<script>\w+)\.js");

    private string _scriptName;
    private string _namespaces;

    public DojoRequireHandler(string scriptName, string namespaces)
    {
        this._scriptName = scriptName;
        this._namespaces = namespaces;
    }

    public void ProcessRequest(HttpContext context)
    {
        string content = null;

        // Niektore assemblies chceme preskocit
        string [] toSkip = { "system", "microsoft"};

        // Prejdem vsetky pozadovane assemblies
        foreach (Assembly assembly in AppDomain.CurrentDomain.GetAssemblies())
        {
            string name = assembly.FullName.Split(',')[0].ToLower();

            // Preskocime assemblies ktore nechcem spracovavat
            if(Array.IndexOf(toSkip, name.Split('.')[0]) != -1)
            {
                continue;
            }

            // Dynamcike assemblies nechceme spracovavat
            if(assembly.IsDynamic)
            {
                continue;
            }

            // Ziskame zoznam resourcov v aktualnej assembly
            string[] resourceNames = assembly.GetManifestResourceNames();

            // Skusime najst konkretny resource
            foreach(string resourceName in resourceNames)
            {
                // Ak resource name nekonci nazvom skriptu a nezacina nazvom namespacu tak pokracujeme
                if(!resourceName.EndsWith(this._scriptName + ".js", StringComparison.InvariantCultureIgnoreCase)
                    || !resourceName.StartsWith(this._namespaces, StringComparison.InvariantCultureIgnoreCase))
                {
                    continue;
                }

                // Nacitame resource
                using (var resourceStream = new StreamReader(assembly.GetManifestResourceStream(resourceName)))
                {
                    content = resourceStream.ReadToEnd();
                }

                break;
            }

            // Ak bol uz nacitany resource tak dalsi nehladame
            if (content != null)
            {
                break;
            }
        }

        // Ak sa nepodarilo nacitat resource ukoncime response ako notfound
        if(content == null)
        {
            context.Response.StatusCode = (int)HttpStatusCode.NotFound;
            context.Response.Flush();
            context.ApplicationInstance.CompleteRequest();
            return;
        }

        // Obsah resourcu zapiseme do response
        context.Response.ContentType = "text/javascript";
        context.Response.Write(content);
        context.Response.Flush();
        context.ApplicationInstance.CompleteRequest();
    }
}

Handler pre načítanie resource z assembly

Jediné čo ostáva ešte spraviť, je nastaviť cestu pre náš modul v djConfig tak, aby dojo.require volania boli v takom tvare, na základe ktorého HandlerFactory bude vedieť určiť, že request má spracovať custom handler a následne, aby tento handler vedel aký resource má nájsť.

Upravená djConfig konfigurácia
var djConfig = { paths: { Widgets: "http://localhost:####/WebResource.axd/Custom/Widgets" } };

S touto konfiguráciou volanie metódy dojo.require("Widgets.Parent") spustí GET request na súbor "http://localhost:####/WebResource.axd/Custom/Widgets/Parent.js, pre spracovanie ktorého DojoRequireFactory vyberie custom handler DojoRequireHandler, ktorý načíta obsah súboru z assembly a ten zapíše do Response. Takto nám bude requirovanie skriptov pomocou dojo fungovať aj pokiaľ budú tieto uložené ako resources v assembly.

xxxmatko blog : dojo.declare, C#

dojo.require anything