xxxmatko blog : Javascript

Ako na dojo.deferred

xxxmatko — Thu, 22 Nov 2012 13:14:00 GMT

Dnes by som chcel ukázať ako možno využiť dojo.Deferred na "synchronizáciu" viacerých asynchrónnych úloh.

Nasledovný kód simuluje tri asynchrónne operácie, pre ktoré treba určiť kedy dobehli, inak povedané je potrebné vykonať nejakú operáciu, ale až potom ako boli ukončené uvedené tri operácie.

Asynchrónne operácie
setTimeout(function() { console.log("Skoncilo volanie 1"); }, 2000); setTimeout(function() { console.log("Skoncilo volanie 2"); }, 1000); setTimeout(function() { console.log("Skoncilo volanie 3"); }, 3500);

Na synchronizáciu môžeme použiť dojo.Deferred objekt a counter pomocou ktorého budeme sledovať počet vykonaných/nevykonaných operácií.

// Vytvorime Deferred objekt var d = new dojo.Deferred(); // Pocitadlo zostavajucich uloh d.counter = 3; // Napojime callbacky pre deferred d.then( // Callback pre udalost ked je deferred objekt resolved function(result) { console.info("Ulohy ukoncene: '" + result + "'"); }, // ErrorCallback null, // Callback pre udalost zmeny progresu function(update) { // Znizime counter d.counter--; // Ak uz je counter na nule resolvujeme deferred if(d.counter === 0) { d.resolve("Ok!"); } } ); setTimeout(function() { console.log("Skoncilo volanie 1"); // Nahlasime zmenu stavu pre deferred objekt d.progress(1); }, 2000); setTimeout(function() { console.log("Skoncilo volanie 2"); // Nahlasime zmenu stavu pre deferred objekt d.progress(2); }, 1000); setTimeout(function() { console.log("Skoncilo volanie 3"); // Nahlasime zmenu stavu pre deferred objekt d.progress(3); }, 3500);
Synchronizácia pomocou dojo.Deferred

// Vytvorime Deferred objekt
var d = new dojo.Deferred();

// Pocitadlo zostavajucich uloh
d.counter = 3;

// Napojime callbacky pre deferred
d.then(
    // Callback pre udalost ked je deferred objekt resolved
    function(result) {
        console.info("Ulohy ukoncene: '" + result + "'");
    },
    // ErrorCallback
    null,
    // Callback pre udalost zmeny progresu
    function(update) {
        // Znizime counter
        d.counter--;
        // Ak uz je counter na nule resolvujeme deferred
        if(d.counter === 0) {
            d.resolve("Ok!");
        }
    }
);

setTimeout(function() {
    console.log("Skoncilo volanie 1");
    // Nahlasime zmenu stavu pre deferred objekt
    d.progress(1);
}, 2000);

setTimeout(function() {
    console.log("Skoncilo volanie 2");
    // Nahlasime zmenu stavu pre deferred objekt
    d.progress(2);
}, 1000);

setTimeout(function() {
    console.log("Skoncilo volanie 3");
    // Nahlasime zmenu stavu pre deferred objekt
    d.progress(3);
}, 3500);

Synchronizácia pomocou dojo.Deferred

Ak nechceme použiť counter premennú, tak môžeme využiť aj dojo.DeferredList.

// Vytvorime pole deferred objektov - jeden objekt pre jednu operaciu var dArray = [new dojo.Deferred(), new dojo.Deferred(), new dojo.Deferred()]; // Inicializujeme deferred list var dList = new dojo.DeferredList(dArray); // Callback pri ukonceni vsetkych deferred objektov v zozname dList.then(function(result){ console.info("Ulohy ukoncene: '" + result + "'"); }); setTimeout(function() { console.log("Skoncilo volanie 1"); // Nahlasime ukoncenie pre deferred objekt dArray[0].resolve(1); }, 2000); setTimeout(function() { console.log("Skoncilo volanie 2"); // Nahlasime ukoncenie pre deferred objekt dArray[1].resolve(2); }, 1000); setTimeout(function() { console.log("Skoncilo volanie 3"); // Nahlasime ukoncenie pre deferred objekt dArray[2].resolve(3); }, 3500);
Synchronizácia pomocou dojo.DeferredList

// Vytvorime pole deferred objektov - jeden objekt pre jednu operaciu
var dArray = [new dojo.Deferred(), new dojo.Deferred(), new dojo.Deferred()];

// Inicializujeme deferred list
var dList = new dojo.DeferredList(dArray);

// Callback pri ukonceni vsetkych deferred objektov v zozname
dList.then(function(result){
    console.info("Ulohy ukoncene: '" + result + "'");
});

setTimeout(function() {
    console.log("Skoncilo volanie 1");
    // Nahlasime ukoncenie pre deferred objekt
    dArray[0].resolve(1);
}, 2000);

setTimeout(function() {
    console.log("Skoncilo volanie 2");
    // Nahlasime ukoncenie pre deferred objekt
    dArray[1].resolve(2);
}, 1000);

setTimeout(function() {
    console.log("Skoncilo volanie 3");
    // Nahlasime ukoncenie pre deferred objekt
    dArray[2].resolve(3);
}, 3500);

Synchronizácia pomocou dojo.DeferredList

Dojo.Deferred sa používa v dojo framework-u ako návratový typ pre mnohé volania (napr. dojo AJAX volania) a aj v iných framework-och postavených na dojo (napr. Esri JsAPI). Preto dúfam, že aj táto krátka ukážka bude niekomu aspoň trochu nápomocná.

Obmedzenie zobrazenia mapovej služby podľa mierky

xxxmatko — Tue, 25 Sep 2012 07:15:00 GMT

Esri js api od verzie 3.1 prináša okrem iného aj novú funkcionalitu, ktorá umožňuje pre jednotlivé vrstvy nastaviť minimálnu a maximálnu zobrazovanú mierku. Inak povedané, ak je aktuálna mierka mimo tohto rozsahu, tak sa vrstva nezobrazuje, ale čo je dôležité, nedochádza ani k predtým zbytočnému requestu na mapovú službu, ktorá tak či tak v takomto prípade vracala prázdny obrázok. I keď táto funkčnosť tu mohla byť už dávno, nevadí, radšej neskôr ako nikdy.

Aplikácia, v ktorej som chcel túto funkčnosť použiť bola postavená na staršej verzii api. Takže, ďalší krok bol veľmi jasný - treba použiť nové api. Esri api však od verzie 3.0 interne používa dojo verziu 1.7, ktoré v zmienej verzii podporuje už aj AMD. Napriek tomu, že dojo samotné až do verzie 2.0 má podporovať súčasne AMD aj legacy (synchrónny) mód, a teda aj aplikácie postavené na starších verziách dojo frameworku by mali fungovať, v kombinácii s esri js api to tak nebolo. Začali sa objavovať "zázračné" chybové hlášky. Odstrániť ich bude možné asi iba aplikovaním prvého z dvoch odporúčaných postupov esri, pre prechod na novšiu verziu "Re-factor application code to use the loader to load custom classes" :-(. Keďže refaktorovanie by zabralo veľa času, rozhodol som sa implementovať min-max funkčnosť aj pre staršie verzie esri js api.

Každý layer v esri js api dedí zo základnej triedy esri.layers.Layer. Preto najprv rozšírime túto triedu o minScale a maxScale vlastnosti:

Rozšírenie esri.layers.Layer o minScale a maxScale vlastnosti
dojo.extend(esri.layers.Layer, { // Základná maximálna mierka je 1:1 maxScale: 1, // Základná minimálna mierka je 1:int.MAX minScale: Math.pow(2, 32) });

Ďalším krokom je pri vytváraní nejakej vrstvy (napr. ArcGISDynamicMapServiceLayer) nastaviť tieto atribúty na požadované hodnoty.

Inicializácia dynamickej vrstvy a nastavenie minScale a maxScale
// Vytvorim ArcGISDynamicMapServiceLayer vrstvu var layer = new esri.layers.ArcGISDynamicMapServiceLayer("service url", { id: "id vrstvy", imageParameters: {}, visible: true }); // Vrstva sa ma zobrazovat od mierky 1:500 000 layer.minScale = 500000; // Vrstva sa ma zobrazovat do mierky 1:100 000 layer.maxScale = 100000;

Keď už vieme ako nastaviť požadované parametre, treba ešte upraviť funkčnosť vrstvy ako takej, aby pred samotným vykonamím requestu na obrázok s mapou, skontrolovala, či aktuálna mierka mapy zodpovedá obmedzeniam pre danú vrstvu. Vrstva reaguje na rôzne udalosti v mape. Jednou z nich je aj zmena extent-u (výrezu) mapy, ktorý vrstva obsluhuje handlerom _onExtentChangeHandler. Tento handler je aj miestom, kde treba vykonať kontrolu mierky, a ak je mimo rozsah, zastaviť ďalšie spracovanie.

dojo.extend(esri.layers.DynamicMapServiceLayer, { // Uchovame si referenciu na povodny handler __onExtentChangeHandler: esri.layers.DynamicMapServiceLayer.prototype._onExtentChangeHandler, // Implementujeme vlastny handler _onExtentChangeHandler: function (extent, point, c, lod) { // Notifikujeme mapu o tom ze zacal update vrstvy this._fireUpdateStart(); // Zistime mierku var scale = -1; if (lod) { // Ak ma mapa pevne definovany zoznam LOD (Level Of Detail) // tak netreba mierku pocitat scale = lod.scale; } else { // Vypocitame mierku podla noveho extentu, velkosti mapy a // pouziteho suradnicoveho systemu scale = Math.round(esri.geometry.getScale(extent, this._map.width, extent.spatialReference.wkid)); } // Je vrstva v danej mierke viditelna? var isLayerVisible = (this.minScale >= scale) && (this.maxScale <= scale); // Ak je vrstva nezobrazovana v danej mierke tak zastavime request if (!isLayerVisible) { // Notifikujeme mapu o tom, ze skoncil update mapy this._fireUpdateEnd(); // Musime skryt aj div element s obrazkom mapy s predoslej mierky esri.hide(this._div); return; } // Vrstva je viditelna v danej mierke tak znova zobrazime div element // ktory obsahuje obrazok if (this.visible) { esri.show(this._div); } // Zavolame povodnu implementaciu handlera this.__onExtentChangeHandler.apply(this, arguments); } });
Rozšírenie triedy esri.layers.DynamicMapServiceLayer o kontrolu na povolenú mierku

dojo.extend(esri.layers.DynamicMapServiceLayer, {
    // Uchovame si referenciu na povodny handler
    __onExtentChangeHandler:
        esri.layers.DynamicMapServiceLayer.prototype._onExtentChangeHandler,

    // Implementujeme vlastny handler
    _onExtentChangeHandler: function (extent, point, c, lod) {
        // Notifikujeme mapu o tom ze zacal update vrstvy
        this._fireUpdateStart();

        // Zistime mierku
        var scale = -1;
        if (lod) {
            // Ak ma mapa pevne definovany zoznam LOD (Level Of Detail)
            // tak netreba mierku pocitat
            scale = lod.scale;
        }
        else {
            // Vypocitame mierku podla noveho extentu, velkosti mapy a
            // pouziteho suradnicoveho systemu
            scale = Math.round(esri.geometry.getScale(extent, this._map.width,
                extent.spatialReference.wkid));
        }

        // Je vrstva v danej mierke viditelna?
        var isLayerVisible = (this.minScale >= scale) && (this.maxScale <= scale);

        // Ak je vrstva nezobrazovana v danej mierke tak zastavime request
        if (!isLayerVisible) {
            // Notifikujeme mapu o tom, ze skoncil update mapy
            this._fireUpdateEnd();

            // Musime skryt aj div element s obrazkom mapy s predoslej mierky
            esri.hide(this._div);
            return;
        }

        // Vrstva je viditelna v danej mierke tak znova zobrazime div element
        // ktory obsahuje obrazok
        if (this.visible) {
            esri.show(this._div);
        }

        // Zavolame povodnu implementaciu handlera
        this.__onExtentChangeHandler.apply(this, arguments);
    }
});

Rozšírenie triedy esri.layers.DynamicMapServiceLayer o kontrolu na povolenú mierku

Povedzme, že máme mapovú aplikáciu v ktorej máme päť služieb, čo sa týka zobrazovanej mierky, zreťazených tak, že vždy je viditeľná len jedna služba. Ak použijeme minScale/maxScale funkčnosť, v konkrétnom okamihu sa namiesto piatich requestov bude vykonávať vždy len jeden, čím môžeme výrazne zrýchliť aplikáciu ako takú.

dojo masked input plugin

xxxmatko — Fri, 31 Aug 2012 08:39:00 GMT

Síce dojo framework poskytuje mnoho hotových UI komponentov, osobne mi medzi nimi chýba MaskedTextBox, tak ako ho poznám z jQuery (viď. Masked Input Plugin). Naprieč rôznymi typmi textboxov (MappedTextBox, ValidationTextBox, ...) tento typ mi tam chýba, a nenašiel som žiadnu jeho implementáciu. Tak som si jedno poobedie sadol za počítač, a "jemne" inšpirovaný spomínaným jQuery pluginom som dal dokopy veľmi podobný plugin aj pre dojo.

Samotný mask plugin na svoje správane fungovanie potrebuje ešte jeden plugin, a to caret plugin, pre pozicovanie kurzora v textboxe.

define("xDev/plugins/caret",["dojo/_base/lang", "dojo/dom"], function (lang, dom) { if (dojo.caret) { return; } lang.mixin(dojo, { caret: function (node, begin, end) { if (typeof (node) === "string") { node = dom.byId(node); } if (!node) { throw new Error("Node is undefined."); } if (typeof (begin) !== "number") { if (node.setSelectionRange) { begin = node.selectionStart; end = node.selectionEnd; } else if (document.selection && document.selection.createRange) { var range = document.selection.createRange(); begin = 0 - range.duplicate().moveStart("character", -100000); end = begin + range.text.length; } return { "begin": begin, "end": end }; } end = (typeof (end) === "number") ? end : begin; if (node.setSelectionRange) { return node.setSelectionRange(begin, end); } else { var range = node.createTextRange(); range.collapse(true); range.moveEnd("character", end); range.moveStart("character", begin); range.select(); return range; } } }); });
dojo.caret plugin

define("xDev/plugins/caret",["dojo/_base/lang", "dojo/dom"], function (lang, dom) {
    if (dojo.caret) {
        return;
    }

    lang.mixin(dojo, {
        caret: function (node, begin, end) {
            if (typeof (node) === "string") {
                node = dom.byId(node);
            }

            if (!node) {
                throw new Error("Node is undefined.");
            }

            if (typeof (begin) !== "number") {
                if (node.setSelectionRange) {
                    begin = node.selectionStart;
                    end = node.selectionEnd;
                }
                else if (document.selection && document.selection.createRange) {
                    var range = document.selection.createRange();
                    begin = 0 - range.duplicate().moveStart("character", -100000);
                    end = begin + range.text.length;
                }
                return {
                    "begin": begin,
                    "end": end
                };
            }

            end = (typeof (end) === "number") ? end : begin;
            if (node.setSelectionRange) {
                return node.setSelectionRange(begin, end);
            }
            else {
                var range = node.createTextRange();
                range.collapse(true);
                range.moveEnd("character", end);
                range.moveStart("character", begin);
                range.select();
                return range;
            }
        }
    });
});

dojo.caret plugin

Samotný mask plugin vyzerá nasledovne:

define("xDev/plugins/mask", ["dojo/_base/lang", "dojo/dom", "dojo/_base/array", "dojo/dom-attr", "dojo/on", "dojo/_base/event", "dojo/keys", "xDev/plugins/caret"], function (lang, dom, array, attr, on, event, keys) { if (dojo.mask) { return; } var masks = []; var placeholders = { "": "_" }; var definitions = { "9": "[0-9]", "a": "[A-Za-z]", "": "[A-Za-z0-9]" }; // Help methods function concatArrays(left, right) { var result = []; for (key in left) { result[key] = left[key]; } for (key in right) { result[key] = right[key]; } return result; }; function getPlaceHolder(defKey, placeholders) { return placeholders[defKey] ? placeholders[defKey] : placeholders["*"]; }; function initTests(mask, definitions) { var tests = []; array.forEach(mask.split(""), function (c, i) { if (!definitions[ c]) { tests.push(null); return; } tests.push(new RegExp(definitions[ c])); }); return tests; }; function getFirstNonMasPosition(tests) { var firstNonMaskPos = null; array.some(tests, function (t, i) { firstNonMaskPos = i; return (t != null); }); return firstNonMaskPos; }; function initBuffer(mask, definitions, placeholders) { return array.map(mask.split(""), function (c, i) { if (c != "?") { return definitions[ c] ? getPlaceHolder(c, placeholders) : c; } }); }; lang.mixin(dojo, { // Vypnutie pluginu unmask: function (node) { if (typeof (node) === "string") { node = dom.byId(node); } if (!node) { throw new Error("Node is undefined."); } var id = attr.get(node, "id"); if (!masks[id]) { return; } array.forEach(masks[id]._connections, function (con) { if (typeof (con.remove) === "function") { con.remove.apply(); } }); masks[id]._connections = null; delete masks[id]; attr.set(node, "value", ""); }, // Zapnutie pluginu mask: function (node, args) { if (typeof (node) === "string") { node = dom.byId(node); } if (!node) { throw new Error("Node is undefined."); } args = lang.mixin({}, { "placeholders": {}, "definitions": {}, "mask": "" }, args \|\| {}); if (args.mask.length === 0) { throw new Error("Mask is empty"); } var length = args.mask.length; var mask = args.mask; var tb = node; var originText = attr.get(tb, "value"); var focusText = originText; var ph = concatArrays(placeholders, args.placeholders); var defs = concatArrays(definitions, args.definitions); var tests = initTests(args.mask, defs); var firstNonMaskPos = getFirstNonMasPosition(tests); var buffer = initBuffer(args.mask, defs, ph); function getValue() { return attr.get(node, "value"); }; function setValue(value) { setTimeout(function () { attr.set(node, "value", value); }, 0); }; function getRawData() { return array.filter(buffer, function (bChar, i) { if (!tests[i]) { return false; } if (bChar == getPlaceHolder(mask.charAt(i), ph)) { return false; } return true; }); }; function seekNext(pos) { while ((++pos <= length) && !tests[pos]); return pos; }; function seekPrev(pos) { while ((--pos >= 0) && !tests[pos]); return pos; }; function clear(start, end) { if (typeof (start) !== "number") { start = 0; } if (typeof (end) !== "number") { end = length; } for (var i = start; (i < end) && (i < length); i++) { if (tests[i]) { var maskChar = mask.charAt(i); buffer[i] = getPlaceHolder(maskChar, ph); } } }; function flush() { var val = buffer.join(""); setValue(val); return val; }; function isOk() { var pos = check(); pos = seekNext(pos); return (pos - 1) === length; }; function isComplete() { var testVal = getValue(); for (var i = 0; i < length; i++) { if (!tests[i]) { continue; } var testChar = testVal.charAt(i); if (!tests[i].test(testChar)) { return false; } } return true; }; function check(valueToTest) { var testVal = valueToTest \|\| getValue(); var testValPos = -1; var i; for (i = 0; i < length; i++) { if (tests[i]) { var maskChar = mask.charAt(i); buffer[i] = getPlaceHolder(maskChar, ph); while (++testValPos < testVal.length) { var testChar = testVal.charAt(testValPos); if (tests[i].test(testChar)) { buffer[i] = testChar; break; } } if (testValPos === testVal.length) { i--; break; } } if ((testValPos + 1) === testVal.length) { break; } } return (i == -1) ? firstNonMaskPos : i; }; function shiftToLeft(from, shiftStart) { shiftStart--; for (var i = from; i < length; i++) { if (!tests[i]) { continue; } if (shiftStart >= length) { break; } while (++shiftStart < length) { if (!tests[shiftStart]) { continue; } if (buffer[shiftStart] == getPlaceHolder(mask.charAt(shiftStart), ph)) { continue; } buffer[i] = buffer[shiftStart]; buffer[shiftStart] = getPlaceHolder(mask.charAt(shiftStart), ph); break; } } }; function node_OnFocus(e) { focusText = getValue(); var pos = check(); flush(); if (pos != 0) { pos = seekNext(pos); } var moveCaret = function () { if ((pos == length) \|\| ((pos - 1) == length)) { dojo.caret(node, 0, pos); } else { dojo.caret(node, pos); } }; setTimeout(moveCaret, 0); }; function node_OnBlur(e) { var pos = check(); pos = seekNext(pos); if ((pos - 1) !== length) { clear(); attr.set(node, "value", ""); return; } if (getValue() != focusText) { on.emit(node, "change", { bubbles: true, cancelable: true }); } }; function node_OnBackspace() { var caret = dojo.caret(node); if ((caret.end - caret.begin) == 0) { if (caret.begin === 0) { return; } caret.begin = seekPrev(caret.begin); } clear(caret.begin, caret.end); flush(); if (!tests[caret.begin]) { caret.begin = seekNext(caret.begin); } setTimeout(function () { dojo.caret(node, caret.begin);}, 0); }; function node_OnDelete() { var caret = dojo.caret(node); if ((caret.end - caret.begin) == 0) { if (caret.end === length) { return; } caret.end = seekNext(caret.end); } clear(caret.begin, caret.end); shiftToLeft(caret.begin, caret.end); flush(); if (!tests[caret.begin]) { caret.begin = seekNext(caret.begin); } setTimeout(function () { dojo.caret(node, caret.begin); }, 0); }; function node_OnLeftArrow() { var caret = dojo.caret(node); if (dojo.isIE) { setTimeout(function () { dojo.caret(node, seekPrev(caret.begin)); }, 0); } else { dojo.caret(node, seekPrev(caret.begin)); } }; function node_OnRightArrow() { var caret = dojo.caret(node); if (dojo.isIE) { setTimeout(function () { dojo.caret(node, seekNext(caret.begin)); }, 0); } else { dojo.caret(node, seekNext(caret.begin)); } }; function node_OnEscape() { attr.set(node, "value", focusText); dojo.caret(node, 0, length); }; function node_OnKeypress(e) { if (e.ctrlKey \|\| e.altKey \|\| e.shiftKey \|\| e.metaKey \|\| (e.which < 32)) { return true; } event.stop(e); var caret = dojo.caret(node); if ((caret.end - caret.begin) > 0) { clear(caret.begin, caret.end); flush(); } caret.begin--; while ((++caret.begin <= length) && !tests[caret.begin]); if (caret.begin >= length) { return false; } var pos = caret.begin; var c = String.fromCharCode(e.charCode \|\| e.keyCode); if (tests[pos] && tests[pos].test(c)) { buffer[pos] = c; pos = seekNext(pos) } else { buffer[pos] = getPlaceHolder(mask.charAt(pos), ph); } flush(); setTimeout(function () { dojo.caret(node, pos); if (isComplete()) { on.emit(node, "complete", { bubbles: true, cancelable: true }); } }, 0); return false; }; function node_OnKeydown(e) { if (e.ctrlKey \|\| e.altKey \|\| e.shiftKey \|\| e.metaKey) { return true; } switch (e.keyCode) { case keys.BACKSPACE: node_OnBackspace(); event.stop(e); return false; case keys.DELETE: node_OnDelete(); event.stop(e); return false; case keys.LEFT_ARROW: node_OnLeftArrow(); event.stop(e); return false; case keys.RIGHT_ARROW: node_OnRightArrow(); event.stop(e); return false; case keys.ESCAPE: node_OnEscape(); event.stop(e); return false; case keys.END: dojo.caret(node, length); event.stop(e); return false; case keys.HOME: dojo.caret(node, 0); event.stop(e); return false; default: return true; } }; function node_OnPaste(e) { var pos = check(); flush(); if (pos != 0) { pos = seekNext(pos); } var moveCaret = function () { if ((pos == length) \|\| ((pos - 1) == length)) { dojo.caret(node, 0, pos); } else { dojo.caret(node, pos); } if (isComplete()) { on.emit(node, "complete", { bubbles: true, cancelable: true }); } }; setTimeout(moveCaret, 0); }; if (!attr.get(node, "readonly")) { var con = []; con.push(on(node, "focus", node_OnFocus)); con.push(on(node, "blur", node_OnBlur)); con.push(on(node, "keydown", node_OnKeydown)); con.push(on(node, "keypress", node_OnKeypress)); con.push(on(node, dojo.isIE ? "paste" : "input", function (e) { setTimeout(node_OnPaste, 0); })); masks[attr.get(node, "id")] = { id: attr.get(node, "id"), _connections: con }; } } }); });
dojo.mask plugin

define("xDev/plugins/mask", ["dojo/_base/lang", "dojo/dom", "dojo/_base/array",
    "dojo/dom-attr", "dojo/on", "dojo/_base/event", "dojo/keys",
    "xDev/plugins/caret"], function (lang, dom, array, attr, on, event, keys) {

    if (dojo.mask) {
        return;
    }

    var masks = [];

    var placeholders = {
        "*": "_"
    };

    var definitions = {
        "9": "[0-9]",
        "a": "[A-Za-z]",
        "*": "[A-Za-z0-9]"
    };

    // Help methods
    function concatArrays(left, right) {
        var result = [];

        for (key in left) {
            result[key] = left[key];
        }

        for (key in right) {
            result[key] = right[key];
        }
        return result;
    };

    function getPlaceHolder(defKey, placeholders) {
        return placeholders[defKey] ? placeholders[defKey] : placeholders["*"];
    };

    function initTests(mask, definitions) {
        var tests = [];
        array.forEach(mask.split(""), function (c, i) {
            if (!definitions[ c]) {
                tests.push(null);
                return;
            }
            tests.push(new RegExp(definitions[ c]));
        });
        return tests;
    };

    function getFirstNonMasPosition(tests) {
        var firstNonMaskPos = null;
        array.some(tests, function (t, i) {
            firstNonMaskPos = i;
            return (t != null);
        });
        return firstNonMaskPos;
    };

    function initBuffer(mask, definitions, placeholders) {
        return array.map(mask.split(""), function (c, i) {
            if (c != "?") {
                return definitions[ c] ? getPlaceHolder(c, placeholders) : c;
            }
        });
    };

    lang.mixin(dojo, {
        // Vypnutie pluginu
        unmask: function (node) {
            if (typeof (node) === "string") {
                node = dom.byId(node);
            }
            if (!node) {
                throw new Error("Node is undefined.");
            }
            var id = attr.get(node, "id");
            if (!masks[id]) {
                return;
            }
            array.forEach(masks[id]._connections, function (con) {
                if (typeof (con.remove) === "function") {
                    con.remove.apply();
                }
            });
            masks[id]._connections = null;
            delete masks[id];
            attr.set(node, "value", "");
        },
        // Zapnutie pluginu
        mask: function (node, args) {
            if (typeof (node) === "string") {
                node = dom.byId(node);
            }
            if (!node) {
                throw new Error("Node is undefined.");
            }
            args = lang.mixin({}, {
                "placeholders": {},
                "definitions": {},
                "mask": ""
            }, args || {});

            if (args.mask.length === 0) {
                throw new Error("Mask is empty");
            }
            var length = args.mask.length;
            var mask = args.mask;
            var tb = node;
            var originText = attr.get(tb, "value");
            var focusText = originText;
            var ph = concatArrays(placeholders, args.placeholders);
            var defs = concatArrays(definitions, args.definitions);
            var tests = initTests(args.mask, defs);
            var firstNonMaskPos = getFirstNonMasPosition(tests);
            var buffer = initBuffer(args.mask, defs, ph);

            function getValue() {
                return attr.get(node, "value");
            };

            function setValue(value) {
                setTimeout(function () {
                    attr.set(node, "value", value);
                }, 0);
            };

            function getRawData() {
                return array.filter(buffer, function (bChar, i) {
                    if (!tests[i]) {
                        return false;
                    }
                    if (bChar == getPlaceHolder(mask.charAt(i), ph)) {
                        return false;
                    }
                    return true;
                });
            };

            function seekNext(pos) {
                while ((++pos <= length) && !tests[pos]);
                return pos;
            };

            function seekPrev(pos) {
                while ((--pos >= 0) && !tests[pos]);
                return pos;
            };

            function clear(start, end) {
                if (typeof (start) !== "number") {
                    start = 0;
                }
                if (typeof (end) !== "number") {
                    end = length;
                }
                for (var i = start; (i < end) && (i < length); i++) {
                    if (tests[i]) {
                        var maskChar = mask.charAt(i);
                        buffer[i] = getPlaceHolder(maskChar, ph);
                    }
                }
            };

            function flush() {
                var val = buffer.join("");
                setValue(val);
                return val;
            };

            function isOk() {
                var pos = check();
                pos = seekNext(pos);
                return (pos - 1) === length;
            };

            function isComplete() {
                var testVal = getValue();
                for (var i = 0; i < length; i++) {
                    if (!tests[i]) {
                        continue;
                    }
                    var testChar = testVal.charAt(i);
                    if (!tests[i].test(testChar)) {
                        return false;
                    }
                }
                return true;
            };

            function check(valueToTest) {
                var testVal = valueToTest || getValue();
                var testValPos = -1;

                var i;
                for (i = 0; i < length; i++) {
                    if (tests[i]) {
                        var maskChar = mask.charAt(i);
                        buffer[i] = getPlaceHolder(maskChar, ph);

                        while (++testValPos < testVal.length) {
                            var testChar = testVal.charAt(testValPos);
                            if (tests[i].test(testChar)) {
                                buffer[i] = testChar;
                                break;
                            }
                        }
                        if (testValPos === testVal.length) {
                            i--;
                            break;
                        }
                    }
                    if ((testValPos + 1) === testVal.length) {
                        break;
                    }
                }
                return (i == -1) ? firstNonMaskPos : i;
            };

            function shiftToLeft(from, shiftStart) {
                shiftStart--;
                for (var i = from; i < length; i++) {
                    if (!tests[i]) {
                        continue;
                    }
                    if (shiftStart >= length) {
                        break;
                    }
                    while (++shiftStart < length) {
                        if (!tests[shiftStart]) {
                            continue;
                        }
                        if (buffer[shiftStart] ==
                            getPlaceHolder(mask.charAt(shiftStart), ph)) {
                            continue;
                        }
                        buffer[i] = buffer[shiftStart];
                        buffer[shiftStart] =
                            getPlaceHolder(mask.charAt(shiftStart), ph);
                        break;
                    }
                }
            };

            function node_OnFocus(e) {
                focusText = getValue();
                var pos = check();
                flush();
                if (pos != 0) {
                    pos = seekNext(pos);
                }
                var moveCaret = function () {
                    if ((pos == length) || ((pos - 1) == length)) {
                        dojo.caret(node, 0, pos);
                    }
                    else {
                        dojo.caret(node, pos);
                    }
                };
                setTimeout(moveCaret, 0);
            };

            function node_OnBlur(e) {
                var pos = check();
                pos = seekNext(pos);
                if ((pos - 1) !== length) {
                    clear();
                    attr.set(node, "value", "");
                    return;
                }
                if (getValue() != focusText) {
                    on.emit(node, "change", {
                        bubbles: true,
                        cancelable: true
                    });
                }
            };

            function node_OnBackspace() {
                var caret = dojo.caret(node);
                if ((caret.end - caret.begin) == 0) {
                    if (caret.begin === 0) {
                        return;
                    }
                    caret.begin = seekPrev(caret.begin);
                }
                clear(caret.begin, caret.end);
                flush();
                if (!tests[caret.begin]) {
                    caret.begin = seekNext(caret.begin);
                }
                setTimeout(function () { dojo.caret(node, caret.begin);}, 0);
            };

            function node_OnDelete() {
                var caret = dojo.caret(node);

                if ((caret.end - caret.begin) == 0) {
                    if (caret.end === length) {
                        return;
                    }
                    caret.end = seekNext(caret.end);
                }
                clear(caret.begin, caret.end);
                shiftToLeft(caret.begin, caret.end);
                flush();
                if (!tests[caret.begin]) {
                    caret.begin = seekNext(caret.begin);
                }
                setTimeout(function () { dojo.caret(node, caret.begin); }, 0);
            };

            function node_OnLeftArrow() {
                var caret = dojo.caret(node);

                if (dojo.isIE) {
                    setTimeout(function () {
                        dojo.caret(node, seekPrev(caret.begin));
                    }, 0);
                }
                else {
                    dojo.caret(node, seekPrev(caret.begin));
                }
            };

            function node_OnRightArrow() {
                var caret = dojo.caret(node);
                if (dojo.isIE) {
                    setTimeout(function () {
                        dojo.caret(node, seekNext(caret.begin));
                    }, 0);
                }
                else {
                    dojo.caret(node, seekNext(caret.begin));
                }
            };

            function node_OnEscape() {
                attr.set(node, "value", focusText);
                dojo.caret(node, 0, length);
            };

            function node_OnKeypress(e) {
                if (e.ctrlKey || e.altKey || e.shiftKey || e.metaKey
                    || (e.which < 32)) {
                    return true;
                }
                event.stop(e);
                var caret = dojo.caret(node);
                if ((caret.end - caret.begin) > 0) {
                    clear(caret.begin, caret.end);
                    flush();
                }
                caret.begin--;

                while ((++caret.begin <= length) && !tests[caret.begin]);
                if (caret.begin >= length) {
                    return false;
                }
                var pos = caret.begin;
                var c = String.fromCharCode(e.charCode || e.keyCode);
                if (tests[pos] && tests[pos].test(c)) {
                    buffer[pos] = c;
                    pos = seekNext(pos)
                }
                else {
                    buffer[pos] = getPlaceHolder(mask.charAt(pos), ph);
                }
                flush();

                setTimeout(function () {
                    dojo.caret(node, pos);
                    if (isComplete()) {
                        on.emit(node, "complete", {
                            bubbles: true,
                            cancelable: true
                        });
                    }
                }, 0);
                return false;
            };

            function node_OnKeydown(e) {
                if (e.ctrlKey || e.altKey || e.shiftKey || e.metaKey) {
                    return true;
                }
                switch (e.keyCode) {
                    case keys.BACKSPACE:
                        node_OnBackspace();
                        event.stop(e);
                        return false;
                    case keys.DELETE:
                        node_OnDelete();
                        event.stop(e);
                        return false;
                    case keys.LEFT_ARROW:
                        node_OnLeftArrow();
                        event.stop(e);
                        return false;
                    case keys.RIGHT_ARROW:
                        node_OnRightArrow();
                        event.stop(e);
                        return false;
                    case keys.ESCAPE:
                        node_OnEscape();
                        event.stop(e);
                        return false;
                    case keys.END:
                        dojo.caret(node, length);
                        event.stop(e);
                        return false;
                    case keys.HOME:
                        dojo.caret(node, 0);
                        event.stop(e);
                        return false;
                    default:
                        return true;
                }
            };

            function node_OnPaste(e) {
                var pos = check();
                flush();

                if (pos != 0) {
                    pos = seekNext(pos);
                }
                var moveCaret = function () {
                    if ((pos == length) || ((pos - 1) == length)) {
                        dojo.caret(node, 0, pos);
                    }
                    else {
                        dojo.caret(node, pos);
                    }
                    if (isComplete()) {
                        on.emit(node, "complete", {
                            bubbles: true,
                            cancelable: true
                        });
                    }
                };
                setTimeout(moveCaret, 0);
            };

            if (!attr.get(node, "readonly")) {
                var con = [];
                con.push(on(node, "focus", node_OnFocus));
                con.push(on(node, "blur", node_OnBlur));
                con.push(on(node, "keydown", node_OnKeydown));
                con.push(on(node, "keypress", node_OnKeypress));
                con.push(on(node, dojo.isIE ? "paste" : "input", function (e) {
                    setTimeout(node_OnPaste, 0);
                }));
                masks[attr.get(node, "id")] = {
                    id: attr.get(node, "id"),
                    _connections: con
                };
            }
        }
    });
});

dojo.mask plugin

Ospravedlňujem sa za vynechanie komentárov - ale už aj tak je to dosť dlhé ;-). Daný plugin som testoval v FF, IE8, Safari, Chrome a v Opere. Fungoval všade. Ak by sa ho niekto odhodlal použiť a našiel by nejaký ten bug, tak budem len rád ak mi dá vedieť.

require(["xDev/plugins/mask", "dojo/domReady!"], function () { dojo.mask("tbDate", { mask: "99/99/9999" }); dojo.mask("tbDateTime", { mask: "99.99.9999 99:99:99" }); dojo.mask("tbDateTimeCustom", { mask: "dd.MM.yyyy hh:mm:ss", definitions: { "d": "[0-9]", "M": "[0-9]", "y": "[0-9]", "h": "[0-9]", "m": "[0-9]", "s": "[0-9]" }, placeholders: { "d": "d", "M": "M", "y": "y", "h": "h", "m": "m", "s": "s" } }); dojo.mask("tbEyeScript", { mask: "~9.99 ~9.99 999", definitions: { "~": "[+-]" } }); });
Použitie pluginu

require(["xDev/plugins/mask", "dojo/domReady!"], function () {
    dojo.mask("tbDate", {
        mask: "99/99/9999"
    });

    dojo.mask("tbDateTime", {
        mask: "99.99.9999 99:99:99"
    });

    dojo.mask("tbDateTimeCustom", {
        mask: "dd.MM.yyyy hh:mm:ss",
        definitions: {
            "d": "[0-9]",
            "M": "[0-9]",
            "y": "[0-9]",
            "h": "[0-9]",
            "m": "[0-9]",
            "s": "[0-9]"
        },
        placeholders: {
            "d": "d",
            "M": "M",
            "y": "y",
            "h": "h",
            "m": "m",
            "s": "s"
        }
    });

    dojo.mask("tbEyeScript", {
        mask: "~9.99 ~9.99 999",
        definitions: {
            "~": "[+-]"
        }
    });
});

Použitie pluginu

Lokalizovanie výsledkov pre esri IdentifyTask

xxxmatko — Fri, 08 Jun 2012 09:35:00 GMT

Po krátkej dobe opäť niečo k esri technológii. Ako už vyplýva z nadpisu, pôjde o lokalizáciu výsledkov ktoré esri vracia pri použití IdentifyTasku. Aby som však hneď na úvod neodradil tých, ktorí s esri ešte nemali tú česť, tak krátky úvod do problematiky.

Esri ArcGIS API for JavaScript umožňuje vyvýjať veľmi výkonné a ľahko použiteľné internetové mapové aplikácie (aspoň oni to tvrdia ;-)). Jedna z mnohých funkcionalít, ktoré spomínané API poskytuje, je aj dopytovanie sa na údaje prostredníctvom publikovaných REST-ových služieb. Konkrétny dopyt sa realizuje pomocou task-u. Existuje niekoľko typov taskov. Každý sa v niečom odlišuje a jeho použitie závisi od toho, aké údaje chceme získať a hlavne ako ich chceme získať.

I keď mám v nadpise IdentifyTask, na to, aby som plynule prešiel k problému a jeho riešeniu, musím začať s QueryTask-om. QueryTask a IdentifyTask sú si dosť podobné. Oba tieto tasky umožňujú získať informácie o objektoch a to jednak atribútové informácie (hodnoty atribútov jednotlivých záznamov v geo databáze) ale aj samotnú geometriu objektov. Rozdiel je v tom, že QueryTask vykonáva dopyt tak, že sa nadefinuje SQL podmienka a táto sa vykoná pre konkrétnu vrstvu v mapovej službe - inak povedané dopyt je realizovaný nad jednou "tabuľkou" (napr. ak chcem nájsť všetky budovy vyššie ako 20 metrov). IdentifyTask identifikuje objekty nad viacerými vrstvami v mapovej službe naraz, pričom dopyt je reprezentovaný geometriou (napr. chcem identifikovať všetky budovy nachádzajúce sa na určitom území).

Výsledky, ktoré tieto dva tasky vracajú sú takmer rovnaké. Ale len takmer. Oba tasky vrátia atribúty objektu ako asociatívne pole, kde kľúčom je názov atribútu a hodnota asociovaná pre kľúč reprezentuje hodnotu atribútu. QueryTask ale vracia hdonoty tak, že "zachováva" dátové typy atribútov. Zachováva treba chápať v zmysle, že keď atribút bol string, tak sa vráti ako string, keď bol double, tak sa vráti ako double.

{ "displayFieldName" : "SCHEMA.TABULKA.OBJECTID", "fieldAliases" : { "SCHEMA.TABULKA.OBJECTID" : "Id", "SCHEMA.TABULKA.NAZOV" : "Názov", "SCHEMA.TABULKA.CISLO" : "Číslo", "SCHEMA.TABULKA.DATUM" : "Dátum" }, "fields" : [ // ... ], "features" : [{ "attributes" : { "SCHEMA.TABULKA.OBJECTID" : 123, "SCHEMA.TABULKA.NAZOV" : "Názov objektu", "SCHEMA.TABULKA.CISLO" : 102.50385, "SCHEMA.TABULKA.DATUM" : 1337040000000 } }, // ... ] }
Ukážka výsledku QueryTask-u

{ "displayFieldName" : "SCHEMA.TABULKA.OBJECTID",
  "fieldAliases" : {
    "SCHEMA.TABULKA.OBJECTID" : "Id",
    "SCHEMA.TABULKA.NAZOV" : "Názov",
    "SCHEMA.TABULKA.CISLO" : "Číslo",
    "SCHEMA.TABULKA.DATUM" : "Dátum"
  },
  "fields" : [
    // ...
  ],
  "features" : [{
      "attributes" : {
        "SCHEMA.TABULKA.OBJECTID" : 123,
        "SCHEMA.TABULKA.NAZOV" : "Názov objektu",
        "SCHEMA.TABULKA.CISLO" : 102.50385,
        "SCHEMA.TABULKA.DATUM" : 1337040000000
      }
    },
    // ...
  ]
}

Ukážka výsledku QueryTask-u

Keď chceme výsledky ďalej interpretovať a zobraziť používateľovi, je pomerne jednoduché s nimi pracovať. Vezmime do úvahy napríklad atribút s dátumom. Ten môžeme konvertovať na Date objekt a následne naň použiť ľubovolný formátovací reťazec.

Formátovanie dátumu pre QueryTask
// Hodnota atributu var dateAtt = 1337040000000; // Vytvorim date objekt var date = new Date(dateAtt); // Vlastny format pre zobrazenie var fmt = "d. M. yyyy HH:mm:ss"; // Naformatujem datum pomocou dojo var dateAttFormatted = dojo.date.locale.format(date, { selector: "date", datePattern: fmt });

Pri IdentifyTask-u však nastáva problém. Už v samotnom helpe sa niekde píše, že výsledky pre tento task, sú už prispôsobené tak, aby ich bolo možné okamžite zobraziť užívateľovi. Čo znamená že "prispôsobené" už popísané nie je, ba čo, viac nikde nie je zadokumentované ako toto "prispôsobenie" ovplyvniť.

Ukážka výsledku IdentifyTask-u
{ "results" : [{ "layerId" : 1, "layerName" : "Moj Layer", "value" : "123", "displayFieldName" : "Id", "attributes" : { "Id" : "123", "Názov" : "Názov objektu", "Číslo" : "102,50385", "Dátum" : "15. 5. 2012" } }, // ... ] }

Pri pohľade na výsledok IdentifyTask-u je jasné, že prvé prispôsobenie spočíva v tom, že ako názov atribútu nie je použitý názov stĺpca tabuľky, ale alias name, ktorý je definovaný v mapovej službe. Toto je ešte ok. Druhé prispôsobenie je už horšie. Hodnoty všetkých atribútov sú vo forme textového reťazca - "nezachovali sa" dátové typy - a pri tejto konverzii bola použitá konkrétna culture (v tomto prípade regionálne nastavenia pre Slovenskú republiku). Toto nám zabraňuje využiť zobrazovací systém ako pri QueryTasku, pretože ak zoberieme do úvahy opäť dátum, tak z hodnoty "15. 5. 2012" sa nám nepodarí vytvoriť Date objekt. Určite takmer každého, kto sa dočítal až sem, teraz napadne: "Veď ten string sa dá rozparsovať". Rozparsovať sa dá, ale naskytuje sa otázka: "Prečo sa použili práve nastavenia pre SR?", "Určite sa to dá niekde nastaviť". Pokiaľ totiž nevieme zabezpečiť, že pri konverzii výsledkov pre IdentifyTask sa použije vždy jedna a tá istá culture, nemá význam implementovať nejaké parsovanie. Nastaviť sa to dá. Zistiť ale, kde a čo treba nastaviť bol v celku pôrod, nakoľko esri help je na túto tému pomerne skúpy a rady vo fóre boli len o parsovaní a nemysleli na to, že formát sa môže meniť v závislosti od regionálnych nastavení. Po absolvovaní maratónu nastavovania regionálných nastavení všade kde to len šlo (zahrňujúc zmenu regionálnych nastavení pre "rest" aplikáciu vystavujúcu restové služby, zmenu regionálnych nastavení pre užívateľa aplikačného poolu v ktorom beží aplikácia a iné) sa s pomocou helpdesku podarilo nájsť riešenie. Formát nie len pre dátumové pole a nie len pre IdentifyTask ale aj niektoré iné operácie je závislí od regionálnych nastavení užívateľa ArcGISSOC, respektíve od užívateľa, pod ktorým beží proces ArcSOC.exe na SOC serveri. Asi trochu neštandardné ale budiš. Škoda len, že táto informácie nie je nikde spomenutá a ak aj je, tak minimálne pre mňa je doposiaľ nenájditeľná.

Esri map - vypnutie Numpad navigation

xxxmatko — Wed, 30 May 2012 09:11:00 GMT

Asi každý programátor pozná vetu "It's not a bug, it's a feature.". Väčšinou sa to berie ako vtip, ale niekedy je možné túto vetu použiť ako plne kvalifikovanú odpoveď na pripomienku zákazníka/zadávateľa úlohy.

V rámci mapovej aplikácie, postavenej na esri techonlógii a ArcGIS JS API, prišla pripomienka, že keď má užívateľ otvorený v aplikácii nejaký dialóg (napr. vyhľadávací formulár) a zadáva do textbox-u vo formulári čísla cez numpad, tak tieto sa nevkladajú do inkriminovaného textbox-u ale spôsobujú posun mapy. Aby sa čísla zadávali, musí užívateľ klinúť na plochu dialógu. No a v tomto prípade naozaj nejde o chybu aplikácie, ale o jej vlastnosť.

Esri map widget totiž odchytáva udalosti moseenter a moseleave, v rámci ktorých spúšťa alebo vypína odchytávanie udalosti stlačenia klávesy. Ak dôjde potom k stlačeniu klávesy, ktorá vykonáva posun mapy, respektíve jej priblíženie a oddialenie (numpad klávesy + a -), tak sa posunie mapa a event sa už ďalej nepropaguje. Preto aj keď užívateľ má focus na danom textbox-e, ale prešiel kurzorom myšky ponad mapu, tak pri použítí numpad-u sa mu posúva mapa a nezapisujú sa čísla do textového poľa.

Map widget umožňuje pri svojej inicializácii nastaviť parameter isKeyboardNavigation, ktorý ak je false, tak navigácia pomocou klávesnice bude vypnutá (prípadne môžeme použiť metódy enableKeyboardNavigation() a disableKeyboardNavigation()). Ak takto vypneme navigáciu, docielime síce, že pri písaní do textbox-u s použitím numpad-u sa nebude mapa posúvať a čísla sa budú zapisovať tak ako majú, ale vypneme si aj navigáciu pomocou šípok klávesnice a možnosť priblížiť a oddialiť mapu cez tlačítka + a -, čo je zas tiež nežiadúce.

Riešením by bolo mať možnosť vypnúť len navigáciu pomocou numpad-u. Esri map widget však toto neumožňuje, takže si to musíme umožniť sami ;-). Po preskúmaní map widgetu som našiel metódu _onKeyDownHandler, ktorá obsluhuje udalosť stlačenia klávesy po prechode kurzora myšky ponad mapu. Stačilo už len prepísať túto metódu nasledovne:

dojo.extend(esri.Map, { // Flag pre vypnutie a zapnutie navigacie cez numpad isNumpadNavigation: true, // Prepisanie povodného handlera _onKeyDownHandler: function(evt) { // Ak je vypnuta celkova navigacia tak nerobim nic if (!this.isKeyboardNavigation) { console.log("Keyboard navigation is disabled"); return; } // Zoznam navigacnych klaves numpad-u var numpadKeys = [dojo.keys.NUMPAD_1, dojo.keys.NUMPAD_2, dojo.keys.NUMPAD_3, dojo.keys.NUMPAD_4, dojo.keys.NUMPAD_6, dojo.keys.NUMPAD_7, dojo.keys.NUMPAD_8, dojo.keys.NUMPAD_9]; // Bola stlacena Numpad klavesa ? var isNumpad = numpadKeys.indexOf(evt.keyCode) !== -1; // Ak nie je zapnuta navigacia cez Numpad a bola stlacena // klavesanica Numpadu tak nepokracujem if (!this.isNumpadNavigation && isNumpad) { console.log("Numpad navigation is disabled"); return; } // Vyvolam original event handler; this.onKeyDown.apply(this, [evt]); } });
Prepis metódy _onKeyDownHandler

dojo.extend(esri.Map, {
    // Flag pre vypnutie a zapnutie navigacie cez numpad
    isNumpadNavigation: true,

    // Prepisanie povodného handlera
    _onKeyDownHandler: function(evt) {
        // Ak je vypnuta celkova navigacia tak nerobim nic
        if (!this.isKeyboardNavigation) {
            console.log("Keyboard navigation is disabled");
            return;
        }

        // Zoznam navigacnych klaves numpad-u
        var numpadKeys = [dojo.keys.NUMPAD_1, dojo.keys.NUMPAD_2,
            dojo.keys.NUMPAD_3, dojo.keys.NUMPAD_4, dojo.keys.NUMPAD_6,
            dojo.keys.NUMPAD_7, dojo.keys.NUMPAD_8, dojo.keys.NUMPAD_9];

        // Bola stlacena Numpad klavesa ?
        var isNumpad = numpadKeys.indexOf(evt.keyCode) !== -1;

        // Ak nie je zapnuta navigacia cez Numpad a bola stlacena
        // klavesanica Numpadu tak nepokracujem
        if (!this.isNumpadNavigation && isNumpad) {
            console.log("Numpad navigation is disabled");
            return;
        }

        // Vyvolam original event handler;
        this.onKeyDown.apply(this, [evt]);
    }
});

Prepis metódy _onKeyDownHandler

V implementácii som použil volanie dojo.extend, ktoré umožňuje rozšíriť, respektíve upraviť, definíciu dojo triedy. Možno v nasledujúcej verzii esri api budú myslieť už aj na takýto scenár použitia.

Event komunikácia medzi browser parent/child oknami

xxxmatko — Tue, 22 May 2012 12:23:00 GMT

Keď je potrebné v rámci webovej aplikácie otvoriť nové okno, po väčšine siahnem po javascript plugine simulujúcom modálne okno, jedno aký js framework používam. A určite nie som jediný. Niekedy je však výhodnejšie použiť staré dobré window.open().

Aby som bol konkrétnejší, načrtnem situáciu. V rámci webovej aplikácie máme zoznam obrázkov. Po výbere obrázka potrebujeme tento otvoriť v novom okne a umožniť užívateľovi orezať obrázok. Keďže obrázky sú veľmi veľké, z užívateľského hľadiska je nepríjemné otvárať ich v nejakom kvázi "modálnom" okne. Elegantnejšie je otvoriť obrázok v novom okne cez volanie window.open() a v tomto okne realizovať orezanie. Nastala už len otázka, ako notifikovať parent window o tom, že obrázok bol už orezaný. Samozrejme najjednoduchšie riešenie by vezeralo asi takto:

// Funckia v parent window-e pre zistenie orezania obrazka function onCropped (args) { // Spracovanie parametrom orezania } // Otvorim child okno, width a height su vopred zistene rozmery obrazku var child = window.open("Crop.aspx", "Crop", "width=" + width + ",height=" + height); // ... // V child window nastane crop tak notifikujem parent if(window.opener && (typeof(window.opener.onCropped) === "function")) { window.opener.onCropped({ // Crop args }); }
Jednoduchá komunikácia priamym volaním parent okna

// Funckia v parent window-e pre zistenie orezania obrazka
function onCropped (args) {
    // Spracovanie parametrom orezania
}

// Otvorim child okno, width a height su vopred zistene rozmery obrazku
var child = window.open("Crop.aspx", "Crop", "width=" + width + ",height="
    + height);

// ...

// V child window nastane crop tak notifikujem parent
if(window.opener && (typeof(window.opener.onCropped) === "function")) {
    window.opener.onCropped({
        // Crop args
    });
}

Jednoduchá komunikácia priamym volaním parent okna

Toto riešenie však nie je dobré, pretože dochádza k vytvoreniu priamej závislosti medzi child a parent oknom, kde child okno predpokladá že parent okno obsahuje definíciu určitej metódy. Čistejší spôsob je previazanie okien prostredníctvom event-ov. Na child okno sa totiž môžeme pozerať ako na akýkoľvek iný komponent, ktorý existuje v rámci hlavného okna a vykonáva nejakú činnosť a poskytuje možnosť zistiť zmenu svojo stavu prostredníctvom publikovaných udalostí. A teda v child okne vyrobíme vlastnú udalosť a v parent okne sa na túto udalosť napojíme.

Event komunikácia okien pomocou jQuery

Pokiaľ použijeme jQuery, tak máme k dispozícií dve metódy. Prvou je metóda .trigger(), ktorá umožňuje vyvolať udalosť na nejakom objekte. Tou druhou je metóda .on(), ktorá zaregistruje event handler pre udalosť konkrétneho objektu (prípadne môžeme použiť staršie metódy .bind(), .delegate() alebo .live()).

Pomocou vyššie uvedených metód možeme komunikáciu implementovať nasledovne:

// Otvorim child okno var child = window.open("Cover.aspx", "Cover", "width=" + width + ",height=" + height); // Pockam na nacitanie okna $(child).on("load", function () { // Napojim sa na custom event child okna $(this).on¹("oncrop", function (evt, sender) { // Spracovanie udalosti crop }); }); // ... // V child window nastane crop tak vytvorim udalost $²(window).trigger({ type: "oncrop", cropArgs: { // Crop args } }, [window]);
Komunikácia medzi oknami s jQuery

// Otvorim child okno
var child = window.open("Cover.aspx", "Cover", "width=" + width + ",height="
    + height);

// Pockam na nacitanie okna
$(child).on("load", function () {
    // Napojim sa na custom event child okna
    $(this).on¹("oncrop", function (evt, sender) {
        // Spracovanie udalosti crop
    });
});

// ...

// V child window nastane crop tak vytvorim udalost
$²(window).trigger({
    type: "oncrop",
    cropArgs: {
        // Crop args
    }
}, [window]);

Komunikácia medzi oknami s jQuery

Pri takejto implementácii však parent okno nezaregistruje to, že v child okne došlo ku vzniku udalosti "oncrop". Problém spočíva v tom, ako jQuery odpamätáva connect-y. Hoci sa my napojíme na udalosť "oncrop" objektu "child" (¹) (naše child okno), tento connect sa odpamätá v jQuery objekte parent okna. V child okne, ktoré má vlastný scope, existuje ďalšia inštancia jQuery objektu a my sme vyvolali udalosť "oncrop" (²) pre tento druhý jQuery objekt, a nie pre ten, ktorý existuje v scope parent okna. Preto je nutné ešte pozmeniť vyvolanie udalosti v child okne tak, aby sme referencovali jQuery inštanciu existujúcu v scope parent okna (³), a to nasledovne:

Správne vyvolanie custom udalosti v child okne pomocou jQuery
// V child window nastane crop tak vytvorim udalost window.opener.$³(window).trigger({ type: "oncrop", cropArgs: { // Crop args } }, [window]);

Ďalšou možnosťou ako zabezpečiť komunikáciu medzi oknami, je aj využitie rôznych pluginov (napr. jQuery.windowMsg). To je ale trochu zbytočné, keďže sa to dá vyriešiť aj pomocou core metód frameworku jQuery.

Event komunikácia okien pomocou dojo

Pretože okrem jQuery intenzívne využívam aj dojo, hneď som sa pozrel na to, ako by sa dala táto komunikácia zabezpečiť pomocou tohto framework-u. Opäť máme k dispozícii dve metódy. Prvou je metóda dojo.publish(), ktorá "publikuje" udalosť, všetkým odberateľom danej "témy". Pod témou, si môžeme predstaviť práve našu custom udalosť. Téma je definovaná ako string v ľubovolnom tvare. Druhou je metóda dojo.subscribe() umožňujuca zapísať sa na odber nejakej témy. Inak povedané prvou metódou vyvolám udalosť, a druhou zaregistrujem handler pre túto udalosť. Treba však myslieť na to, že tieto dve metódy operujú nad globálnym objektom, preto treba názov udalosti prefixnúť identifikátorom inštancie objektu, ktorý udalosť vyvoláva. V našom prípade týmto identifikátorom môže byť názov (name) child okna.

// Otvorim child okno var child = window.open("Cover.aspx", "Cover", "width=" + width + ",height=" + height); // Pockam na nacitanie okna dojo.connect(child, "onload", window, function() { // Nastavim event handler pre udalost dojo.subscribe(child.name + ".onCrop", function(args) { // Spracovanie udalosti crop }); }); // ... // V child window nastane crop tak vytvorim udalost window.opener.dojo⁴.publish(window.name + ".onCrop", [{ // Crop args }]);
Komunikácia medzi oknami s dojo

// Otvorim child okno
var child = window.open("Cover.aspx", "Cover", "width=" + width + ",height="
    + height);

// Pockam na nacitanie okna
dojo.connect(child, "onload", window, function() {
    // Nastavim event handler pre udalost
    dojo.subscribe(child.name + ".onCrop", function(args) {
        // Spracovanie udalosti crop
    });
});

// ...

// V child window nastane crop tak vytvorim udalost
window.opener.dojo⁴.publish(window.name + ".onCrop", [{
    // Crop args
}]);

Komunikácia medzi oknami s dojo

Opäť platí to, čo platilo aj pri jQuery a teda, že keď udalosť vyvolávame, musíme referencovať dojo inštanciu parent okna (⁴). Na komunikáciu tak isto, môžeme použiť nejaký ten plugin. Pokiaľ by sme vychádzali z pluginu pre jQuery, tak pre dojo by sme ho mohli implementovať nasledovne:

(function (d) { if(d._windowEvents) { return; } // Zoznam udalosti d._windowEvents = d._windowEvents \|\| []; // Prida handler pre udalost d.listen = function() { var event = undefined; var callback = undefined; var scope = undefined; // Spracovanie vstupnych parametrov d.forEach(arguments, function (a, idx) { switch (idx) { case 1: callback = a; break; case 2: scope = callback; callback = a; break; default: event = a; break; } }); // Informacie o connecte na udalost var connect = { type: event, handler: callback }; // Pripadny scope pre handler if(typeof(scope) !== "undefined") { connect.scope = scope; } d._windowEvents.push(connect); return connect; } // Vyvola udalost d.trigger = function() { var evtName = undefined; var evtArgs = undefined; var w = undefined; // Spracovanie argumentov d.forEach(arguments, function (a, idx) { switch (idx) { case 1: evtArgs = a; break; case 2: w = evtName; evtName = evtArgs; evtArgs = a; break; default: evtName = a; w = window.opener; break; } }); // Pouzitie hidden formulara pre notifikaciu var form = w.document.forms["__WINDOW_COMMUNICATION"]; if (form) { d.attr(form["__WINDOW_COMMUNICATION_EVTNAME"], "value", evtName); d.attr(form["__WINDOW_COMMUNICATION_EVTARGS"], "value", d.toJson(evtArgs)); form["__WINDOW_COMMUNICATION_SUBMIT"].click(); return true; } return false; } d.addOnLoad(function() { // Vytvorenie komunikacneho formulara if(d.byId("__WINDOW_COMMUNICATION")) { return; } var form = d.create("form", { id: "__WINDOW_COMMUNICATION", name: "__WINDOW_COMMUNICATION" }); var hdnEventName = d.create("input", { type: "hidden", name: "__WINDOW_COMMUNICATION_EVTNAME" }, form); var hdnEventArgs = d.create("input", { type: "hidden", name: "__WINDOW_COMMUNICATION_EVTARGS" }, form); var btnSubmit = d.create("input", { id: "__WINDOW_COMMUNICATION_SUBMIT", type: "button", name: "__WINDOW_COMMUNICATION_SUBMIT", value: "", style: { display: "none" } }, form); // Spracovanie klik udalosti na tlacitko v komunikacnom formulari d.connect(btnSubmit, "onclick", function() { var evtName = d.attr(hdnEventName, "value"); var evtArgs = d.attr(hdnEventArgs, "value"); // Pokusim sa najst dany event for(var i = 0; i < d._windowEvents.length; i++) { var evt = d._windowEvents[i]; if(evt.type != evtName) { continue; } // Spustim event handler [evtArgs, sedner] evt.handler.apply(null \|\| evt.scope, [d.fromJson(evtArgs)]); break; } }); d.place(form, d.body()); }); })(dojo);
Implementácia pluginu dojo.windowMessage na komunikáciu medzi oknami

Implementácia pluginu dojo.windowMessage na komunikáciu medzi oknami

S použitím vyššie uvedeného pluginu by sme komunikáciu zabezpečeili nasledovne:

// Otvorim child okno var child = window.open("Cover.aspx", "Cover", "width=" + width + ",height=" + height); // Pockam na nacitanie okna dojo.connect(child, "onload", window, function() { // Nastavim event handler pre udalost dojo.listen("onCrop", function(args) { // Spracovanie argumentov }); }); // ... // V child window nastane crop tak vytvorim udalost dojo.trigger("onCrop", { // Crop arguments });
Komunikácia medzi oknami s dojo pluginom

// Otvorim child okno
var child = window.open("Cover.aspx", "Cover", "width=" + width + ",height="
    + height);

// Pockam na nacitanie okna
dojo.connect(child, "onload", window, function() {
    // Nastavim event handler pre udalost
    dojo.listen("onCrop", function(args) {
        // Spracovanie argumentov
    });
});

// ...

// V child window nastane crop tak vytvorim udalost
dojo.trigger("onCrop", {
    // Crop arguments
});

Komunikácia medzi oknami s dojo pluginom

Pri porovnaní jQuery a dojo sa ako lepší framework javí jQuery. A to preto, lebo s použitím core metód umožňuje velmi jednoducho a elegantne napojiť sa na custom udalosť konkrétnej inštancie child okna. Pri dojo musíme subscribe-ovanie na udalosť konkrétnej inštancie child okna odlíšiť nejakým prefixom. Bez tohto prefixu (napr. len dojo.subscribe("onCrop", handler)), ak by sme mali otvorené naraz dve inštancie child okna, ktoré každé by robilo crop pre iný obrázok, tak by sme jedným "handlerom" handlovali, síce rovnakú, udalosť dvoch nezávislých inštancií child okna naraz. Dojo podobne ako jQuery poskytuje možnosť napojiť sa na udalosť nejakého objektu pomocou metódy dojo.connect ale táto nefunguje pre custom udalosti objektu window.

Javascript help methods - Part 1

xxxmatko — Thu, 12 Apr 2012 09:12:00 GMT

Z času na čas, počas takého kľudného programovania, sa môže objaviť nejaký malý problém, ktorý treba vyriešiť. Ak je riešenie opakovateľne aplikovateľné a využiteľné aj pri iných podobných situáciách, u mňa realizácia skončí implementáciou tzv. helper metódy. Na tomto mieste by som sa chcel podeliť o moje riešenia týkajúce sa javascriptu. Možno niekomu pomôžu a uľahčia mu prácu, prípadne prostredníctvom konštruktívnych pripomienok budem môcť aj ja sám vylepšiť existujúce riešenia.

Vyvolanie udalosti na html elemente

V ostatnom čase sa dosť intenzívne venujem javascript-ovému framework-u dojo. V aplikácii, v ktorej sa v značnej miere využíva widget dijit.Tooltip sa tento prestal skrývať po odídení kurzora myšky z daného html prvku, ak na tento prvok bolo predtým kliknuté. Prvok si stále držal focus a tooltip ostával zobrazený. Po pátraní po internete som zistil, že nie som jediný, kto má problém so správnym skrývaním, respektíve zobrazovaním, tooltipu. Skúsil som rôzne navrhované riešenia, ktoré do istej miery znásilňovali daný widget, ale žiadne z nich nezabralo v mojom prípade. Po preskúmaní správania sa widgetu a html prvkov na ktoré bol aplikovaný, som prišiel na riešenie, ktoré zafungovalo. Bolo potrebné "násilne" vyvolať udalosť "blur" nad html elementom, pre ktorý bol tooltip vytvorený. A tu je finálna implementácia fireEvent metódy:

function fireEvent(element, event) { if (typeof (event) !== "string") { throw new TypeError("Input event name must of type string."); } if ((typeof (element) === "undefined") \|\| (element == null)) { throw new Error("Element can not be null."); } // IE if (document.createEventObject) { var evt = document.createEventObject(); return element.fireEvent("on" + event, evt); } // Ostatne prehliadace var evt = document.createEvent("HTMLEvents"); // Inicializacia eventu (Event type, bubbling, cancelable) evt.initEvent(event, true, true); return !element.dispatchEvent(evt); };
Metóda pre vyvolanie udalosti nad html elementom

Metóda pre vyvolanie udalosti nad html elementom

Distinct metóda pre polia

Na inom mieste som potreboval získať zo vstupného poľa len distinct-né prvky, a už trocha zdeformovaný zo C#-pu som hneď písal pole.distinct(). Čuduj sa svete, error ;-). Tak som nakoniec rozšíril Array objekt o metódu distinct takto:

Distinct metóda pre Array objekt
(function () { if (!Array.prototype.distinct) { Array.prototype.distinct = function () { var distinctArray = []; for (var i = 0; i < this.length; i++) { if (distinctArray.indexOf(this[i]) === -1) { distinctArray.push(this[i]); } } return distinctArray; } } })();

Ako zistiť či je objekt html element pomocou javascriptu

xxxmatko — Fri, 03 Feb 2012 09:05:00 GMT

Jedna z vlastností, ktorá sa mi páči na javascripte je Weak Typing. Nie že by som to pokladal za nejakú super výhodu. Na otázku, či je lepší pogramovací jazyk podporujúci Strong Typing alebo Weak Typing, by som si za víťaza zvolil určite toho skôr menovaného.

Na druhej strane to, že v javascripte sa môže dátový typ premennej meniť počas behu programu umožňuje písať kód tak, ako by sme ho napríklad v C# nikdy nenapísali.

Príklad zmeny dátového typu premennej
var x; x = 1; console.info(x); console.log(typeof(x)); x = "some string"; console.info(x); console.log(typeof(x)); x = {}; console.info(x); console.log(typeof(x));

Častým takýmto prípadom využitia je metóda, ktorá na základe dátového typu vstupného parametra vykoná rôzne operácie. Ja som si takúto metódu vyrobil. Moja metóda mala jeden vstupný parameter. Ak tento bol typu string, tak to znamenalo, že parameter reprezentuje id html elementu, ale ak bol typu object, tak to bol priamo html element. A konečne sa dostávam k jadru problému. Zistiť, či je premenná typu string je jednoduché použitím operátora typeof (viď. Príklad zmeny dátového typu premennej). Ak je však premenná handle na html element, operátor typeof zahlási že je to object. No dobre, ale objekt môže byť aj niečo iné ako len html element. Po relatívne krátkej dobe, som našiel spôsob, ako overiť či premená predstavuje handle na html element. Výsledok mojej snahy je možné vidieť na nasledovnej úkážke:

var isHtmlNode = function (o) { if (typeof (Node) === "object") { return o instanceof Node; } else { return (typeof (o) === "object") && (typeof (o.nodeType) === "number") && (typeof (o.nodeName) === "string"); } }; var isHtmlElement = function (o) { if (typeof (HTMLElement) === "object") { return o instanceof HTMLElement; } else { return (typeof (o) === "object") && (o.nodeType === 1) && (typeof (o.nodeName) === "string"); } };
Metódy overujúce, či je premenná html element

Metódy overujúce, či je premenná html element

Prvá metóda overí, či je vstupný objekt inštanciou triedy Node a druhá či je vstupný objekt inštanciou triedy HTMLElement. Ich použitie môže vyzerať aj takto:

Príklad použitia metód pre detekciu objektu typu HTMLElement
var setContent = function (o) { if (isHtmlElement(content) \|\| isHtmlNode(content)) { // o is an html element } else if (typeof(o) === "string") { // o is id of an html element } else { // throw an error } };

Takto si môžeme vyrobiť aj oveľa presnejšie metódy pre detekciu konkrétnych elementov, či už to podľa atribútu tagName alebo detekciou na konkrétne triedy, ktoré dedia z triedy HTMLElement (HTMLAnchorElement, HTMLAppletElement, HTMLAreaElement, HTMLBaseElement, HTMLBaseFontElement, HTMLBlockquoteElement, HTMLBodyElement, HTMLBRElement, HTMLButtonElement, HTMLDirectoryElement, HTMLDivElement, HTMLDListElement, HTMLFieldSetElement, HTMLFontElement, HTMLFormElement, HTMLFrameElement, HTMLFrameSetElement, HTMLHeadElement, HTMLHeadingElement, HTMLHRElement, HTMLHtmlElement, HTMLIFrameElement, HTMLImageElement, HTMLInputElement, HTMLIsIndexElement, HTMLLabelElement, HTMLLayerElement, HTMLLegendElement, HTMLLIElement, HTMLLinkElement, HTMLMapElement, HTMLMenuElement, HTMLMetaElement, HTMLModElement, HTMLObjectElement, HTMLOListElement, HTMLOptGroupElement, HTMLOptionElement, HTMLParagraphElement, HTMLParamElement, HTMLPreElement, HTMLQuoteElement, HTMLScriptElement, HTMLSelectElement, HTMLStyleElement, HTMLTableCaptionElement, HTMLTableCellElement, HTMLTableColElement, HTMLTableElement, HTMLTableRowElement, HTMLTableSectionElement, HTMLTextAreaElement, HTMLTitleElement, HTMLUListElement).

Inicializovanie vlastností v dojo widgete

xxxmatko — Mon, 10 Oct 2011 08:32:00 GMT

Nedávno som narazil na problém pri nastavovaní hodnôt atribútov pre dojo widget. Na stránke som mal vytvorené dve rôzne inštancie jedného widgetu. Problém spočíval v tom, že keď som zmenil hodnotu vlastnosti vo widgete A, tak hodnota, ktorú som do tejto vlastnosti nastavil, sa nastavila aj do tej istej vlastnosti vo widgete B. Inak povedané, táto vlastnosť sa správala, ako keby bola statickou vlastnosťou a teda prístup k nej bol zdielaný všetkými inštanciami daného widgetu.

Všetky atribúty boli zadeklarované presne podľa popisu, ktorý je uvedený na stránke doja v časti deklarácia atribútov. A teda boli zadeklarované v rámci prototypu spolu s hodnotou, ktorá slúži ako default hodnota, v prípade že pri vytvorení widgetu nebola žiadna iná hodnota poskytnutá, a taktiež definuje aj dátovy typ atribútu pre dojo.

dojo.provide("Widgets.Sample"); dojo.require("dijit._Widget"); dojo.declare("Widgets.Sample", [dijit._Widget], { _label: "Some label", _duration: 100, _isDisabled: false, _startPosition: { x: 0, y: 0 }, constructor: function (args, srcNodeRef) { args = args \|\| {}; this._label = args.label \|\| "Some label"; this._duration = args.duration \|\| 100; this._isDisabled = args.isDisabled \|\| false; }, postCreate: function () { var coords = dojo.position(this.domNode); this._startPosition.x = coords.x; this._startPosition.y = coords.y; }, write: function () { console.info(dojo.toJson({ label: this._label, disabled: this._isDisabled, duration: this._duration, start: this._startPosition })); } });
Definícia ilustračného widgetu

dojo.provide("Widgets.Sample");

dojo.require("dijit._Widget");

dojo.declare("Widgets.Sample", [dijit._Widget],
{
    _label: "Some label",
    _duration: 100,
    _isDisabled: false,
    _startPosition: {
        x: 0,
        y: 0
    },

    constructor: function (args, srcNodeRef) {
        args = args || {};
        this._label = args.label || "Some label";
        this._duration = args.duration || 100;
        this._isDisabled = args.isDisabled || false;
    },

    postCreate: function () {
        var coords = dojo.position(this.domNode);
        this._startPosition.x = coords.x;
        this._startPosition.y = coords.y;
    },

    write: function () {
        console.info(dojo.toJson({
            label: this._label,
            disabled: this._isDisabled,
            duration: this._duration,
            start: this._startPosition
        }));
    }
});

Definícia ilustračného widgetu

Problém si môžeme demonštrovať na vyššie uvedenom wdigete. Pre widget boli zadeklarované štyri vlastnosti:

_label : premenná typu string,
_duration : premenná typu int,
_isDisabled : premenná typu bool,
_startPosition : premenná typu object.

Prvé tri vlastnosti boli bezproblémové a tieto sa nastavovali priamo v konštruktore widgetu. Kritickou bola posledná vlastnoť _startPosition, ktorá bola typu object. Táto sa nastavovala automaticky v metóde postCreate (ktorá sa v rámci životného cyklu widgetu volá vo chvíli, keď je widget vyrenderovaný na stránke) a slúžila na uchovanie štartovacej pozície html elementu, pre ktorý bola vytvorená inštancia widgetu. Widget obsahuje aj pomocnú metódu write, ktorá do konzoly vypíše hodnoty atribútov. Na stránku som následne pridal dva html elementy a pre ne vytvoril dve rôzne inštancie nášho pokusného widgetu.

<div id="smaple1" style="position:absolute;left:0px;top:0px;"></div> <div id="sample2" style="position:absolute;left:20px;top:20px;"></div> <script type="text/javascript"> dojo.addOnLoad(function () { window.sample1 = new Widgets.Sample({ label: "sample1", duration: 1, isDisabled: false }, dojo.byId("sample1")); window.sample2 = new Widgets.Sample({ label: "sample2", duration: 2, isDisabled: true }, dojo.byId("sample2")); }); </script>
Vytvorenie dvoch rôznych inštancií pokusného widgetu

<div id="smaple1" style="position:absolute;left:0px;top:0px;"></div>
<div id="sample2" style="position:absolute;left:20px;top:20px;"></div>

<script type="text/javascript">
    dojo.addOnLoad(function () {
        window.sample1 = new Widgets.Sample({
            label: "sample1",
            duration: 1,
            isDisabled: false
        }, dojo.byId("sample1"));

        window.sample2 = new Widgets.Sample({
            label: "sample2",
            duration: 2,
            isDisabled: true
        }, dojo.byId("sample2"));
    });
</script>

Vytvorenie dvoch rôznych inštancií pokusného widgetu

Po zavolaní metódy write som zistil, že oba widgety majú atribút _startPosition nastavený na rovnakú hodnotu reprezentujúcu štartovaciu pozíciu druhého widgetu, pričom hodnoty ostatných atribútov boli rôzne. Hodnota sa menila súčasne pre oba widgety aj pri jej nastavení pre prvý a rovnako tak aj pre druhý widget. Odpoveď na otázku: "Prečo je to tak, keď všetko bolo spravené podľa návodu?" spočíva v tom, ako dojo vytvára triedy. Keďže javascript nemá class systém ako C#, Java alebo iné OOP jazyky, dojo simuluje tento prístup prostredníctvom metódy dojo.declare, ktorej tretím vstupným argumentom je objekt, ktorý reprezentuje prototype triedy, a jeho vlastnosti sú skopírované do dynamicky vytvoreného prototypu. No a kľučovým je to "skopírovanie". Pri tzv. primitívnych dátových typoch ako sú reťazce, čísla a iné nie je problém. Pokiaľ však v objekte reprezentujúcom prototype triedy zadeklarujeme atribút ako dátový typ object, tak tento bude do každej novej inštancie widgetu predaný odkazom a teda bude zdieľaný pre každú jednu inštanciu. Inak povedané, pri nastavení atribútu _startPosition dôjde k prepísaniu hodnoty aj v druhom widgete preto, lebo oba widgety sa odkazujú na tú istú premennú v rámci toho istého scope. A keďže v javascripte je objekt a pole v podstate to isté, tento istý problém nastáva aj pri poliach. Riešením by bolo, ak by dojo pri vytváraní protypu triedy klonoval objekty a polia. To sa však nedeje, a preto pokiaľ chceme zabrániť tomuto "zdielaniu" musíme upraviť deklaráciu atribútu a jeho incializáciu vykonať až v rámci metódy constructor, ktorá reprezentuje košntruktor pre triedu.

dojo.provide("Widgets.Sample"); dojo.require("dijit._Widget"); dojo.declare("Widgets.Sample", [dijit._Widget], { _label: "Some label", _duration: 100, _isDisabled: false, _startPosition: null, constructor: function (args, srcNodeRef) { args = args \|\| {}; // Inicializacia az v kontruktore this._startPosition = { x: 0, y: 0 }; this._label = args.label \|\| "Some label"; this._duration = args.duration \|\| 100; this._isDisabled = args.isDisabled \|\| false; }, //... });
Upravená definícia ilustračného widgetu

Upravená definícia ilustračného widgetu

Týmto docielime to, že pri vytvorení nových inštancií nášho widgetu sa bude premenná _startPosition odkazovať vždy na novú premennú.

Javascript closures - vo vnútri cyklu

xxxmatko — Thu, 29 Sep 2011 07:07:00 GMT

Správne pochopenie fungovania javascript closures si vyžaduje určité zdatnosti a nie každému programátorovi webových aplikácie je jasné o čo vlastne ide a aj velké percento tých lepších programátorov, ktorí aspoň tušia o čo ide, sa mu úspešne vyhýbajú.

Využívanie closures však môže veľmi zjednodušiť niektoré programátorské úkony a kedže najlepšie sa učí na príkladoch, ukážeme si ako je možné veľmi efektívne využiť closures v rámci bežiaceho cyklu.

Majme cyklus s konečným počtom iterácií, pričom v každej iterácií spúšťame nejakú asynchrónnu úlohu. Káždá asynchróna úloha je identifikovateľná svojou url adresou. Výsledok každej úlohy spracováva jedna callback metóda, pričom v tejto metóde chceme zistiť, ku ktorej úlohe patrí aktuálne spracovávaný výsledok. Na simuláciu asynchrónnej udalosti môžeme použiť metódu setTimeout s náhodným nastavením času pre odpočet vykonania udalosti.

Metóda simulujúca vykonanie asynchrónnej udalosti
setTimeout(function () { console.log('job done'); }, parseInt(Math.random()*10000));

Táto metóda môže reprezentovať napríklad spustenie vyhľadávania objektov s použitím webovej služby. Ak máme viacero vyhľadávacích služieb, môžeme túto úlohu spustiť pre každú jednu službu v rámci cyklu a v callback handleri zapísať do konzoly, pre ktorú službu prišiel výsledok.

Spustenie asynchrónnej udalosti v tele cyklu
var urls = [ "url1", "url2", "url3", "url4" ]; for(var url in urls) { setTimeout(function () { console.log('job done for ' + urls[url]); }, parseInt(Math.random()*10000)); }

Keď však spustíme vyššie uvedený kód a počkáme si na výpis prijatých výsledkov, tak v konzole uvidíme nasledovný text:

Výsledok viacnásobného spustenia asynchrónnej udalosti
job done for url4 job done for url4 job done for url4 job done for url4

Dôvod, prečo je tomu tak, spočíva v tom, že síce sa asynchrónna udalosť spúšťa zvlášť pre každú url adresu, callback handler pre každú udalosť je vykonaný v tom istom scope-e, v rámci ktorého je hodnota indexu url rovná číslu 3 (na túto hodnotu bol index nastavený pri poslednej iterácii) a teda pre každé volanie callbacku získame url adresu pre posledný job v rade. Riešením je použitie closure a teda vytvorenie vlastného scope pre každé jedno volanie.

Použitie closure na vytvorenie nového scope
var urls = [ "url1", "url2", "url3", "url4" ]; for(var url in urls) { (function¹(u²) { setTimeout(function () { console.log('job done for ' + u); }, parseInt(Math.random()10000)); })(urls[url]*³); }

Podstata spočíva v tom, že namiesto toho, aby sme rovno spustili asynchrónnu udalosť, vytvoríme pomocnú metódu (¹), ktorá má jeden vstupný argument (²) a tento argument predáva ďalej našej asynchrónnej metóde. Následne túto metódu ihneď spustíme, pričom ako vstupný parameter použijeme url adresu služby (³). Týmto docielime to, že callback handler pre jednotlivé udalosti bude spúšťaný v rámci scop-u našej pomocnej metódy a keďže pre každé volanie našej pomocnej metódy je vytvorený nový scope, v rámci ktorého obsahuje premenná u vždy inú hodnotu url adresy služby, vieme odsledovať, ktorý job bol práve skončený.