Weblabor

A Dojo Toolkit (továbbiakban: Dojo) elsődlegesen böngésző alapú fejlesztést támogató JavaScript eszközkészlet. Az alábbi írás nem kíván és nem nyújt átfogó képet az eszközkészletről, ehelyett egy Dojora támaszkodó példa alkalmazás fejlesztésén keresztül bemutatja a toolkit képességeinek, szolgáltatásainak egy szeletét. A kitűzőtt feladat az alábbi: jelenítsünk meg tíz, URL hashként megadott kulcsszóra illeszkedő fotót a Flickrről Lightbox jellegű albumba szervezve.

dojo.provide("bpjs");

A Dojo aktívan épít a moduláris kódszervezésre. Nem követeli meg a móduláris kódszervezést, de ahhoz minden eszközt megad. Modul rendszere ihlette a RequireJS-t, de filozófiája fellelhető a Google Closure és a YUI3 keretrendszerek megvalósításban is. A modulok több funkciót látnak el: névtér kezelés, függőség feloldás, függvénytár behívása futásközben, gyorstárazás.

A Dojo összesen négy globális névteret foglal le: dojo (a keretrendszer magja), dijit (widgetek), dojox (egyfajta contrib gyűjtemény) és doh (egységteszt keretrendszer). A dojo.provide()-dal definiálható új modul. Jelen esetben az alkalmazás számára létrehozzuk a bpjs modult. Ezzel többek között a globális objektumhoz (böngészőben praktikusan window) kötöttünk egy bpjs változót. Ez alatt építkezünk.

dojo.require("dojo.hash");
dojo.require("dojox.data.FlickrRestStore");
dojo.require("dojox.image.Lightbox");

A dojo.require() függvénnyel jelezhetők az adott modul (most bpjs) függőségei. A Dojo a modulokat nyilvántartja, szükség szerint gyorstárazza. A függőségek feloldását a nyilvántartás alapján végzi el, egy modult egyszer tölt be.

A Dojo a JQuery-vel ellentétben nem bővíthető a klasszikus értelemben vett pluginokkal. A Dojo keretrendszert ad komponensek fejlesztéséhez. Központi tárolót nem tart fent a nem hivatalos Dojo komponenseknek. A dojox névtér alá kerülnek azon megbízható komponensek, amelyek még nem teljesítik az összes Dojo komponenssel szemben támasztott elvárást. (Valamennyi Dojo widget kötelezően kielégíti az akadálymentességi irányelveket és lokalizált.)

A dojo.hash modul tartalmazza a location hash kezeléshez szükséges funkcionalitást. A dojox.data.FlickrRestStore a dojo.data.api-t kiterjesztő alrendszer. A Lightbox egy képgaléria widget.

dojo.mixin(bpjs, {
    run: function() {
        // ...
    }
});

A Dojo objektum-orientált szemléletű. Keretrendszert nyújt JavaScript alapú objektum-orientált fejlesztéshez. Támogatja a többszörös öröklődést. Az objektumok a pseudo-klasszikus iskola szerint és mixinekkel kiterjeszthetők. A példa alkalmazásban definiálunk egy run() metódust a bpjs objektumon belül, amely az alkalmazás elindításért lesz felelős.

run: function() {
    var flickrStore = new dojox.data.FlickrRestStore(),
        lightbox = new dojox.image.LightboxDialog(),
        tags = dojo.hash() || "javascript";
    lightbox.startup();
    flickrStore.fetch(/* ... */);
    dojo.subscribe("/dojo/hashchange", this, 'run');
}

Inicializáljuk a lightbox widgetet, lekérjük a képeket a Flickrről, és hash változás esetén újraindtjuk az alkalmazást. A standard DOM-közeli eseménykezelőkön túl egy komplett feliratkozás-hirdetés (pub-sub) alapú eseménykezelő alrendszert valósít meg a Dojo. Tetszőleges saját események válthatók ki és figyelhetők.

flickrStore.fetch({
    query: {
        tags: tags,
        apikey: "1fb3caaf3c852f2dab4c83f0a33dc48e"
    },
    count: 10,
    onComplete: function(items) {
        // ...
    }
});

Az erősen változó paraméterlistájú függvényekhez a Dojo az új hullámos objektum literál jelölésen alapuló mintát használja. Ez egyfelől kényelmes, másrészt future-proof API-ként szolgál.

Lekérdezzük a Flickr store-t a megadott kulcsszóra. Legfeljebb 10 találatot kérünk vissza.

onComplete: function(items) {
    var set = tags + "-set";
    dojo.forEach(items, function(item) {
        lightbox.addImage({
            title: flickrStore.getValue(item, "title"),
            href: flickrStore.getValue(item, "imageUrl")
        }, set);
    });
    lightbox.show({ group: set });
    lightbox._nextImage();
}

A dojo.forEach az 1.5-ös JavaScript szerinti forEach-et valóstja meg. Számos, a böngészőgyártók által még nem implementált JavaScript jellemző elérhető a Dojon keresztül. Az API-juk és viselkedésük megegyezik a szabvánnyal definiálttal, azzal a kitétellel, hogy míg a szabványos függvény az elem saját metódusa, addig a dojos a dojo névtér alatt érhető el, és első argumentumként mindig az elemet várja. A Dojo jellemzően nem terjeszti ki az alap javascriptes objektumokat.

Az eredményhalmaz szerint feltöltjük a Lightbox albumot, majd az első képnél kinyitjuk.

<script src="http://o.aolcdn.com/dojo/1.4/dojo/dojo.xd.js"></script>

A Dojo bevetéséhez egyszerűen töltsük be valamelyik CDN-ről az alap keretrendszert. Cross-domain (XDomain) módban minden az alap keretrendszében (Base, Core) nem szereplő komponens a háttérben aszinkron kerül letöltése. Lehetőség van helyi kópia használatára is. Ebben az esetben a Dojo Toolkittel érkező build rendszerrel saját magunk készíthetünk JavaScript csomagokat annak minden előnyével.

<script src="bpjs.js"></script>

Töltsük be a kódtárunkat. A fájl neve a modul nevével megegyező.

<script>
dojo.ready(function() {
    bpjs.run();
});
</script>

<style type="text/css">
  @import "http://o.aolcdn.com/dojo/1.4/dojo/themes/tundra/dojo.css";
  @import "http://o.aolcdn.com/dojo/1.4/dijit/themes/tundra/tundra.css";
  @import "http://o.aolcdn.com/dojo/1.4/dojox/image/resources/Lightbox.css";
</style>

A Dojoval érkezik egy stíluslap, amely az elemek megjelenését konszolidálja. Az általános deklarációkon túl négy beépített sminket támogat a Dojo: tundra, nihil, claro, soria. Minden widget szállíthat saját stíluslapot.

<body class="tundra">

A body osztályaként jelölhetjük meg a használandó sminket.

dojo.provide("bpjs");

dojo.require("dojo.hash");
dojo.require("dojox.data.FlickrRestStore");
dojo.require("dojox.image.Lightbox");

dojo.mixin(bpjs, {

    run: function() {
        var flickrStore = new dojox.data.FlickrRestStore(),
            lightbox = new dojox.image.LightboxDialog(),
            tags = dojo.hash() || "javascript";
        lightbox.startup();
        flickrStore.fetch({
            query: {
                tags: tags,
                apikey: "1fb3caaf3c852f2dab4c83f0a33dc48e"
            },
            count: 10,
            onComplete: function(items) {
                var set = tags + "-set";
                dojo.forEach(items, function(item) {
                    lightbox.addImage({
                        title: flickrStore.getValue(item, "title"),
                        href: flickrStore.getValue(item, "imageUrl")
                    }, set);
                });
                lightbox.show({ group: set });
                lightbox._nextImage();
            }
        });
        dojo.subscribe("/dojo/hashchange", this, 'run');
    }

});

Mint a felvezetőben említett, a bemutatott alkalmazás közel sem aknázza ki a Dojo nyújtotta eszköz palettát, Mindenazonáltal jó kiindulási pontként szolgálhat mindazok számára, akik megismerkednének a Dojo Toolkittel.