You can
write widgets that are based on the Dojo Toolkit,
a popular JavaScript™ library that is
described at http://dojotoolkit.org.
We provide a sample named
dojo, which includes the following four
files:
- Button.egl introduces the following EGL external type,
which uses
the text field from the native Rich UI Button type extended by the
new widget:
ExternalType Button extends Button type JavaScriptObject
{ relativePath = "dojo",
javaScriptName = "Button",
includeFile = "dojo/dojo.html"
}
end
As shown, the implementation language is JavaScript, and use of the Button type
requires access to dojo.html.
- Button.js contains the JavaScript implementation
that is referenced in the external type definition. The JavaScript identifies the new widget and
defines the following functions:
- egl$$initializeDOMElement loads
Dojo and defines
code to enable event handlers (written by the EGL developer) to respond
to onClick events. The function then replaces the DOM node with a
Dojo equivalent and causes the EGL widget to refer to the Dojo node.
- setText ensures that the new widget can write
text into the Dojo-specific DOM node.
- getText ensures
that the new widget can retrieve
text from the Dojo-specific DOM node.
- dojo.html
is an HTML file containing two script tags for inclusion
in the EGL-generated JavaScript.
The first of the two tags accesses a version of the Dojo library,
which is being provided at a Web site hosted by America Online. The
second of the two tags indicates that a specific widget definition
(dijit.form.Button) will be retrieved from the Dojo library.
In
your own projects, you might download and install Dojo into your workspace
and refer directly to the dojo.js file that is included with the Dojo
distribution you downloaded. The benefits are as follows:
- Your
code is insulated from changes that a Dojo provider might
make to its version of the JavaScript file
- You can work with Dojo without needing to access an external Web
site
- DojoSample.egl is EGL code that demonstrates
use of the new widget.
Notice that DojoSample.egl,
the code written for interacting with
the new widget, is all-but identical to the code written to interact
with the Rich UI button in the buttontest sample (file OneButton.egl);
the APIs are the same, for ease of use by the EGL developer.
You
can place the files Button.egl, Button.js, and dojo.html in
a standalone project and store that project in a repository so that
others in your organization can use the Dojo functionality without
their needing to maintain duplicate JavaScript implementations.
Also, you can expose additional DoJo widgets to EGL developers; for
example, by coding Tree.egl and Tree.js to provide the Dojo Tree widget.
As shown in the sample, you need to be aware of an unusual requirement
when you create widgets with Dojo. When any Rich UI application is
running, a hierarchy of EGL widgets is in memory, and each widget
refers to one or more nodes of the document object model (DOM). The
difference when you work with Dojo is that you first replace native
DOM elements with nodes that are specific to Dojo and then ensure
that the EGL widgets refer to those nodes.