Servis-Rhino 4211B Betriebsanweisung PDF herunterladen (Seite 204)

• Dojo Documentation - Writing Your Own Widget

• Understanding _WidgetBase – 1.9

• Creating a custom widget – 1.9

• Creating Dojo Widgets with Inline Templates - 2008-06-24

• Eduzine - Creating Custom Widget in Dojo - Part 1 – 2008-06-12

• Eduzine - Creating Custom Widget in Dojo - Part 2: Templated Widgets – 2008-06-14

• DeveloperWorks - Develop HTML Widgets with Dojo – 2007-02-14

Widget templating

Widget templating is a great way of defining the HTML that will be generated for a new widget.

Amongst the capabilities of templates is the ability to code the "data-dojo-attach-point"

attribute. Consider the following HTML template:

…

</div>

By defining the above, when the new widget is created, in the code of the widget, it will have

automatically created a new property on that widget called "myAttach" which can be referenced

by "this.myAttach". The value of this property will be the DOM node for the HTML element

that defines the "data-dojo-attach-point". This provides a first class and elegant

mechanism for finding elements within the templated HTML. If this property is used on a

templated widget mix-in, then the object will be that of the Widget itself.

For basic templating, include dijit/_TemplatedMixin. To process widgets in the template,

also include dijit/_WidgetsInTemplateMixin

eg.

define([

"dojo/_base/declare",

"dijit/_WidgetBase",

"dijit/_TemplatedMixin",

"dijit/_WidgetsInTemplateMixin",

…

function(declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, …) {

return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], …);

}

);

Templating also provides the capability to use substitution variables. For example:

${myProperty}

will replace this with the value of "myProperty". Here is a good example of its use. Imagine we

have a widget that has the following in its template:

<input type="radio"

data-dojo-type="dijit/form/RadioButton"

name="timeRangeMethod"

id="rollingPeriod"

value="rollingPeriod"/>

<label for="rollingPeriod">Rolling Period</label>

The problem with the above is that the "id" property must be unique within a web page. However if

the above is injected as-is into a widget and two instances of that widget were placed on the screen

we would end up with unwanted duplication. Using the variable substitution mechanism, we can

create unique ids by using the id of the containing widget. For example:

Page 204

1 2 ... 199 200 201 202 203 204 205 206 207 208 209 ... 297 298

Kommentare zu diesen Handbüchern

Keine Kommentare

Servis-Rhino 4211B Betriebsanweisung Seite 204

Kommentare zu diesen Handbüchern