×
COOKIES
Prezeraním tejto stránky dochádza k spracovaniu cookies. Spracovaniu cookies zabránite v nastaveniach internetového prehliadača alebo nezobrazovaním tejto stránky v internetovom prehliadači.
Vytvárame riešenia

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>
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");
}
});
});
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>
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>
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";
}
});
});
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>
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.


Dojo,data-dojo-attach-event,data-dojo-attach-point,šablóna,template,programovanie,HTML,dojo,JavaScript,DOM,dojo/ready,dojo/_base/declare,dijit/_Widgetbase,dijit/_Templatedmixin,dojo/text!,dojox/form/Manager
Žiadna časť tohto článku nesmie byť reprodukovaná bez uvedenia autora a URL na túto stránku.
Viac informácií nájdete v sekcii O projekte.

Komentáre

Článok neobsahuje zatiaľ žiadne komentáre.

Pridať komentár

Meno (povinné)
Web
Správa (povinné)
Odoslať
Od najnovších