×
Creating solutions

Na čo si dať pozor pri práci s widgetmi vo frameworku Dojo

Pri práci dijitmi, ale aj s rôznymi widgetmi, môže autor naraziť na viacero situácií, kedy sa daný widget nevykresli alebo namiesto vykreslenia widgetu sa zobrazí chybové hlásenie v konzole internetového prehliadača. A práve vyhnutiu sa uvedeným problémom je venovaný tento článok.

Widgety v template

Najčastejším problémom, ktorý spôsobuje nesprávne zobrazenie výsledného widgetu, je absencia niektorého z potrebných modulov.
Ak má widget v template definované dijity, je potrebné vo funkcii define() definovať modul dijit/_WidgetsInTemplateMixin. Obdobne je potrebné postupovať aj vo funkcii declare(). Okrem modulu dijit/_WidgetsInTemplateMixin je potrebné vo funkcii define() definovať aj moduly použitých dijitov. Modul dojo/parser nie je pre bežnú funkcionalitu potrebné vo funkcii define() definovať.

Nezobrazovanie widgetu

V prípade, že sa widget nezobrazí v prehliadači alebo vznikne chybové hlásenie, môže ísť o jeden z nasledujúcich problémov.
Používateľ pri deklaratívnom zápise uviedol vo vlastnosti data-dojo-props nesprávny názov modulu alebo widgetu. V rámci súčasnej migrácie môže ísť napríklad o nepodporovaný zápis typu MID alebo preklep v názve modulu. Väčšina modulov začína veľkým písmenom, kým cesta k modulu je písaná malými písmenami. Niektoré moduly majú zápis typu camelCase.
Ďalšou príčinou nezobrazovania widgetu môže byť fakt, že inštancie widgetu je potrebné spúšťať cez metódu startup().
Príklad: Použitie metódy startup().
1
2
var WidgetInstance = new Widget();
WidgetInstance.startup();
V prípade, že nie je potrebné s widgetom ďalej manipulovať, stačí volať metódu startup() priamo s constructorom.
Príklad: Použitie metódy startup().
1
new Widget().startup();
V niektorých prípadoch je potrebné definovať miesto, kde má byť widget umiestnený. Pre tieto účely je potrebné volať metódu placeAt(). Argumentom je hodnota atribútu id ako reťazec v elemente, do ktorého má byť widget umiestnený. Nie je potrebné použiť modul dojo/dom.
Príklad: Použitie metódy placeAt().
1
2
var WidgetInstance = new Widget();
WidgetInstance.placeAt("insertWidget");
Podobne ako pri metóde startup() je možné postupovať aj pri metóde placeAt().
Príklad: Použitie metódy placeAt().
1
new Widget().placeAt("insertWidget");
Pri použití metódy placeAt() netreba zabúdať, že element s danou hodnotou atribútu id musí existovať. Veľmi častým problémom môže byť preklep v názve hodnoty atribútu.
Posledným z najčastejších problémov, ktoré môžu spôsobovať absenciu zobrazenia, je nastavenie widgetu na východiskový stav display : none;. Niektoré dijity preto musia byť zobrazené cez metódu show().
Príklad: Použitie metódy show().
1
2
var WidgetInstance = new Widget();
WidgetInstance.show();
Pri používaní widgetov od tretích strán, môže byť potrebné volať inú metódu widgetu ako tie, ktoré boli uvedené v tomto článku. V takomto prípade je vhodné pozrieť dokumentáciu k widgetu, prípadne jeho zdrojový kód.

Iné chyby

Pri vytváraní widgetu programaticky nie je možné widget priradiť už raz priradenému id. Použitie rovnakej hodnoty id v ďalšom constructore spôsobí chybu. Pre vkladanie widgetov do kontajnera slúži metóda placeAt().
Príklad: Správny zápis constructora.
1
2
new Widget(Options, id1);
new Widget(Options, id2);
Príklad: Nesprávny zápis constructora.
1
2
new Widget(Options, id);
new Widget(Options, id);

Záver

Okrem absencie volania metódy widgetu môže byť príčinou problému so zobrazovaním aj absencia argumentov v constructore alebo hodnôt v atribúte data-dojo-props, ktoré môžu súvisieť so zobrazovaním. V prípade, že poznáte ďalšie užitočné rady ako sa vyhnúť najčastejším chybám pri práci s widgetmi, podeľte sa o ne prostredníctvom komentára.
Autor: Matej Lednár
Dátum: 11.5.2013
Kategória: Dojo
Značky: programovanie, html, dojo, javascript, dijit/_templatedmixin, dojo/text!, define, declare, widget, startup, placeat


Dojo,programovanie,HTML,dojo,JavaScript,dijit/_Templatedmixin,dojo/text!,define,declare,widget,startup,placeAt
No part of this article may be reproduced without mention of the author and URL to this website.
For more information, see the About section.

Comments

Article has no comments.

Add a comment

Name (required)
Website
Message (required)
Submit
From latest