Spoznávame Dojox form manager - časť 6

V tejto časti venovanej widgetu Dojox form manager sa opäť vrátim k HTML atribútom data-dojo-attach-point a data-dojo-attach-event, keďže všímavý čitateľ určite postrehol, že HTML atribút data-dojo-attach-event nebolo možné aplikovať na dijity vo widgete Dojox form manager. Pre tieto účely bolo možné použiť len observer.

V tomto článku bude predstavený ďalší postup ako pracovať s HTML atribútmi data-dojo-attach-point a data-dojo-attach-event. Jeho základom je vytvorenie vlastného komponentu, ktorý bude obsahovať Dojox form manager. Postup vychádza zo šablóny pre tvorbu widgetov vo frameworku Dojo. Pre aplikovanie atribútov data-dojo-attach-point a data-dojo-attach-event je potrebné použiť tri súbory. Prvý súbor (index.html) obsahuje nahratie komponentu s Dojox Form managerom (súbor widget.js) a element pre jeho umiestnenie. Druhý súbor (widget.js) obsahuje JavaScript pre vytvorenie komponentu a nahratie templatu s Dojox Form managerom. Tretí súbor (template.html) obsahuje template s Dojox form managerom. Ide o HTML fragment, ktorý bol predstavený v predchádzajúcich častiach.

V prvom príklade je demonštrované použitie atribútu data-dojo-attach-event.

Príklad: Obsah elementu <body> v súbore index.html.

1
2
3
4
5
6
7
8
9
<div data-dojo-type="formManager"></div>
 
<script>
  require(["dojo/ready", "dojo/parser", "widget"],
          function(ready) {
            ready(function() {
            });
          });
</script>
<div data-dojo-type="formManager"></div>
 
<script>
  require(["dojo/ready", "dojo/parser", "widget"],
          function(ready) {
            ready(function() {
            });
          });
</script>

Príklad: Obsah súboru widget.js.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
define([
  "dojo/_base/declare",
  "dijit/_Widget",
  "dijit/_WidgetBase",
  "dijit/_TemplatedMixin",
  "dijit/_WidgetsInTemplateMixin",
  "dojo/text!template.html",
  "dojox/form/Manager",
  "dijit/form/TextBox"
],
        function(
                declare,
                _Widget,
                _WidgetBase,
                _TemplatedMixin,
                _WidgetsInTemplateMixin,
                template
                ) {
          return declare("formManager", [
            _Widget,
            _TemplatedMixin,
            _WidgetsInTemplateMixin
          ], {
            templateString : template,
            display : function() {
              console.log("Click");
            }
          });
        }); 
define([
  "dojo/_base/declare",
  "dijit/_Widget",
  "dijit/_WidgetBase",
  "dijit/_TemplatedMixin",
  "dijit/_WidgetsInTemplateMixin",
  "dojo/text!template.html",
  "dojox/form/Manager",
  "dijit/form/TextBox"
],
        function(
                declare,
                _Widget,
                _WidgetBase,
                _TemplatedMixin,
                _WidgetsInTemplateMixin,
                template
                ) {
          return declare("formManager", [
            _Widget,
            _TemplatedMixin,
            _WidgetsInTemplateMixin
          ], {
            templateString : template,
            display : function() {
              console.log("Click");
            }
          });
        }); 

Príklad: Obsah súboru template.html.

1
2
3
4
5
6
7
8
9
<div>
  <div data-dojo-type="dojox/form/Manager" id="formManager">
    <input data-dojo-type="dijit/form/TextBox" 
      data-dojo-attach-event="onClick : display" name="field-text">
    <span data-dojo-attach-event="onClick : display">
      Click me
    </span>
  </div>
</div>
<div>
  <div data-dojo-type="dojox/form/Manager" id="formManager">
    <input data-dojo-type="dijit/form/TextBox" 
      data-dojo-attach-event="onClick : display" name="field-text">
    <span data-dojo-attach-event="onClick : display">
      Click me
    </span>
  </div>
</div>

Uvedený príklad reaguje na kliknutie do poľa formulára a na text Click me. Výstupom je zápis do konzoly (text Click).

V druhom príklade je demonštrované použitie atribútu data-dojo-attach-point.

Príklad: Obsah elementu <body> v súbore index.html.

1
2
3
4
5
6
7
8
9
<div data-dojo-type="formManager"></div>
 
<script>
  require(["dojo/ready", "dojo/parser", "widget"],
          function(ready) {
            ready(function() {
            });
          });
</script>
<div data-dojo-type="formManager"></div>
 
<script>
  require(["dojo/ready", "dojo/parser", "widget"],
          function(ready) {
            ready(function() {
            });
          });
</script>

Príklad: Obsah súboru widget.js.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
define([
  "dojo/_base/declare",
  "dijit/_Widget",
  "dijit/_WidgetBase",
  "dijit/_TemplatedMixin",
  "dijit/_WidgetsInTemplateMixin",
  "dojo/text!template.html",
  "dojox/form/Manager",
  "dijit/form/TextBox"
],
        function(
                declare,
                _Widget,
                _WidgetBase,
                _TemplatedMixin,
                _WidgetsInTemplateMixin,
                template
                ) {
          return declare("formManager", [
            _Widget,
            _TemplatedMixin,
            _WidgetsInTemplateMixin
          ], {
            templateString : template,
            startup : function() {
              this.inherited(arguments);
              this.field1.set("value", "Input field value")
              this.field2.innerText = "Span element value";
            }
          });
        }); 
define([
  "dojo/_base/declare",
  "dijit/_Widget",
  "dijit/_WidgetBase",
  "dijit/_TemplatedMixin",
  "dijit/_WidgetsInTemplateMixin",
  "dojo/text!template.html",
  "dojox/form/Manager",
  "dijit/form/TextBox"
],
        function(
                declare,
                _Widget,
                _WidgetBase,
                _TemplatedMixin,
                _WidgetsInTemplateMixin,
                template
                ) {
          return declare("formManager", [
            _Widget,
            _TemplatedMixin,
            _WidgetsInTemplateMixin
          ], {
            templateString : template,
            startup : function() {
              this.inherited(arguments);
              this.field1.set("value", "Input field value")
              this.field2.innerText = "Span element value";
            }
          });
        }); 

Príklad: Obsah súboru template.html.

1
2
3
4
5
6
7
8
9
<div>
  <div data-dojo-type="dojox/form/Manager" id="formManager">
    <input data-dojo-type="dijit/form/TextBox" 
     data-dojo-attach-point="field1" name="field-text">
    <span data-dojo-attach-point="field2">
      Click me
    </span>
  </div>
</div>
<div>
  <div data-dojo-type="dojox/form/Manager" id="formManager">
    <input data-dojo-type="dijit/form/TextBox" 
     data-dojo-attach-point="field1" name="field-text">
    <span data-dojo-attach-point="field2">
      Click me
    </span>
  </div>
</div>

Uvedený príklad mení prostredníctvom hodnoty atribútu data-dojo-attach-point obsah poľa formulára a elementu <span>. Pole preto obsahuje text Input field value a element <span> text Span element value.

Záver

Týmto rozsiahlejším článkom bol opäť obohatený seriál venovaný widgetu Dojox form manager. Verím, že vám uvedené informácie pomôžu pri tvorbe webových aplikácií s týmto zaujímavým komponentom. Žiaľ uvedeným spôsobom nie je možné aplikovať observer. V prípade, že poznáte riešenia ako sfunkčniť observer, podeľte sa o ne prostredníctvom komentára.

Spoznávame Dojox form manager - časť 6

Záver

Komentáre

Pridať komentár