Spoznávame Dojox form manager - časť 1

Permalink: http://how-to.mldgroup.com/index.php?article=spoznavame-dojox-form-manager-cast-1

1.6.2013 (aktualizované 10.6.2013), Matej LednárKategória: Dojo

Súčasťou frameworku Dojo je aj zaujímavý widget s názvom Dojox form manager. Aj keď vyzerá jednoducho, práca s ním môže byť komplikovaná. Prvým problémom je demonštrácia len deklaratívneho spôsobu zápisu observera, ktorý je žiaľ veľmi ťažko debugovateľný. Druhým vážnym problémom je práca s atribútom data-dojo-attach-event. Widget Dojox form manager pracuje s elementmi formulára a zároveň podporuje aj prácu s inými elementmi, ktoré nie sú súčasťou elementu <form>. Práve toto je najčastejší dôvod prečo sa autori rozhodujú pre Dojo form manager.

V tomto seriáli sa zameriam na programatický spôsob zápisu funkcie observera, mixovanie elementov, získavanie hodnôt, nastavovanie hodnôt a atribút data-dojo-attach-event. Ako prvé bude predstavený štandardný zápis Dojox form managera. Ten je založený na module dojox/form/Manager. Hneď na začiatok využijem jeho tri hlavné funkcionality, ktoré z neho robia silný nástroj a zároveň sú dôvodom, prečo je tak často používaný.

Medzi tieto funkcionality patria atribút data-dojo-observer, vlastnosť intermediateChanges a metóda gatherFormValues(). Vhodnou kombináciou všetkých uvedených prvkov je možné okamžite získať informácie o stave formulára. Základom Dojox form manager je wrapper, ktorý obsahuje jednotlivé prvky formulára.

Príklad: Formát zápisu wrappera.

1
2
3
<div data-dojo-type="dojox/form/Manager">
  <!-- form elements here -->
</div>
<div data-dojo-type="dojox/form/Manager">
  <!-- form elements here -->
</div>

Vo wrapperi je možné kombinovať polia z dijitov a widgetov spolu s klasickými elementmi, ktoré môžu slúžiť ako popis k poliam alebo ako informatívne elementy k formuláru. Všetkým elementov formulára je možné nastavovať hodnoty cez metódu setFormValues(). Získavanie hodnôt sa vykonáva cez metódu gatherFormValues().

Pre sledovanie zmien na elementoch formulára je možné využiť observer. Observer sa aktivuje atribútom data-dojo-observer. Hodnotou je názov udalosti, ktorá spustí obslužnú funkciu. V prípade programatického zápisu je hodnotou názov metódy. Pri dijite TextBox je observer aktívny na udalosť blur. Pre okamžitú reakciu slúži vlastnosť intermediateChanges. Pri dijite Button je observer aktívny na udalosť click.

Ak chceme obsluhovať observer "deklaratívne", je potrebné do wrappera vložiť element <script> s atribútmi type, data-dojo-event a data-dojo-args. Pre aktiváciu observera musí mať atribút type hodnotu dojo/method a atribút data-dojo-event hodnotu v podobe názvu eventu, ktorý bude pri programatickom riešení zároveň definovať názov metódy pre obslužnú funkciu. Atribút data-dojo-args podporuje len dve hodnoty, ktoré zastupujú parametre funkcie eventu. Prvý parameter definuje hodnotu HTML atribútu name alebo data-dojo-attach-point a druhý parameter definuje hodnotu HTML atribútu value alebo vlastnosti innerHTML.

Hodnoty z atribútov name a value sú získané z elementov formulára (napr. <input>). Hodnoty z data-dojo-attach-point a innerHTML sú z ostatných elementov (napr. <span>).

Príklad: Deklaratívny formát zápisu skriptu obsluhujúci observer.

1
2
3
<script type="dojo/method" data-dojo-event="observerEventName" 
   data-dojo-args="value,name">
</script> 
<script type="dojo/method" data-dojo-event="observerEventName" 
   data-dojo-args="value,name">
</script> 

Uvedený formát zápisu musí byť umiestnený v elemente <div data-dojo-type="dojox/form/Manager">. Nasledujúci príklad demonštruje jednoduchý Dojox form manager s jedným poľom a observerom. Funkcia observera s názvom observerFunction reaguje na každý pridaný znak do poľa. Výsledkom je zápis do konzoly s informáciou o vloženej hodnote a výsledkom metódy gatherFormValues(), ktorá vráti hodnoty formulára v podobe objektu.

Príklad: Zápis do elementu <body>.

1
2
3
4
5
6
7
8
9
10
<div data-dojo-type="dojox/form/Manager">
  <input data-dojo-type="dijit/form/TextBox" 
   data-dojo-observer="observerFunction" 
   data-dojo-props="intermediateChanges : true" name="textbox-field">
  <script type="dojo/method" data-dojo-event="observerFunction" 
   data-dojo-args="value,name">
      console.log("Field name: " + name + " Field value: " + value);
      console.log(this.gatherFormValues());
  </script> 
</div>
<div data-dojo-type="dojox/form/Manager">
  <input data-dojo-type="dijit/form/TextBox" 
   data-dojo-observer="observerFunction" 
   data-dojo-props="intermediateChanges : true" name="textbox-field">
  <script type="dojo/method" data-dojo-event="observerFunction" 
   data-dojo-args="value,name">
      console.log("Field name: " + name + " Field value: " + value);
      console.log(this.gatherFormValues());
  </script> 
</div>

Príklad: Zápis do elementu <script>.

1
2
3
4
5
require(["dojo/ready", "dojo/parser"],
        function(ready) {
          ready(function() {
          });
        });
require(["dojo/ready", "dojo/parser"],
        function(ready) {
          ready(function() {
          });
        });

Demonštrácia možného výstupu:

1
2
Field name: textbox-field Field value: manager
Object {textbox-field: "manager", ownerDocumentBody: null}
Field name: textbox-field Field value: manager
Object {textbox-field: "manager", ownerDocumentBody: null}

V ďalšom článku venovanému widgetu Dojox form manager bude deklaratívny zápis funkcie pre observer nahradený programatickým zápisom vďaka čomu pribudne widgetu metóda, s ktorou je možné oveľa jednoduchšie pracovať ako v prípade uvedeného deklaratívneho zápisu.

Záver

Na záver ešte jedno upozornenie. Dojox form manager ešte stále nie je dokonalý. Ako príklad možno uviesť skutočnosť, že ak programátor nepoužíva framework Dojo 1.9 a novší, v prípade vytvorenia vlastného widgetu s Dojox form managerom nebude takýto widget fungovať správne.

Spoznávame Dojox form manager - časť 1

Záver

Komentáre

Pridať komentár