xxxmatko blog : dojo, widget, Javascript

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.

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; } } })();

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ú.