Construction of a basic example of using the Dojo Toolkit in JavaTM EE applications requires that the client code remain simple. Therefore, a design point of the application was to keep the client scope to a single page. This page displays some dijit widget controls as well as the connection of events between them and effect on the page behavior. The result also provides some simple, yet dynamic effects, demonstrating how writing Ajax-based Java EE Applications using the Dojo Toolkit can be done with a limited amount of work from the developer's part.
Therefore, four basic controls illustrate how to instantiate the controls, how to connect the controls together and how to use these controls to drive an XmlHttpRequest (XHR) call to the server. The controls used in the sample application are listed in the following table.
dijit.form.ValidationTextBox | A form field that can do validation of its contents and display warning messages if validation fails, all without server communication. |
dijit.form.Combobox | A selection box that uses a dojo.data datastore to populate the valid values. This widget also provides look-ahead pattern matching. Therefore, as a user types, the control displays only the valid values that match the current content that has been entered. |
dijit.form.Button | A button with skinnable themes. The application uses the dojo tundra theme. |
dijit.Dialog | A modal dialog for use in Ajax applications. The normal behavior of the dijit.Dialog control when shown is to disable the window of the page and make its contents inaccessible. A floating dialog is then rendered over the page that you can drag and manipulate like a typical dialog window. |
The widgets listed in the previous table are all instantiated with declarative XHTML markup. Therefore, by inserting HTML tags with the attribute, dojoType, the dojo parser replaces those nodes in the document with their corresponding Ajax widget after the page has been loaded by the browser. Any attributes specified in addition to the dojoType attribute are set as JavaScriptTM accessible properties on the widget. The Dojo Toolkit is one of a few JavaScript Toolkits that provide a declarative usage model. This makes the toolkit more usable by the novice Ajax developer. As for basic usage it is as simple as writing HTML code.
While the widgets by themselves are simpler than the default widgets HTML provides, they can do little by themselves. The events widgets emit and the events the page generates on user actions typically must still be connected together in order to perform many tasks. In this sample application the widgets are connected by a script tag in the header. In that script tag, it defines a function, called init that is passed to the dojo.addOnLoad() function. What that does is register init to run after the page has been fully loaded by the browser and all the widgets instantiated.
The purpose of the init function in this application is to look up references to the rendered dijit widgets and connect events between them. In this application, the onChange and onkeypress events of the input widgets are connected to a function that checks the contents of each. Only when the contents of each match certain conditions is the Greet the server button enabled. The onClick event of the Greet the server! button is connected to a function that does an XHR call by collecting the values from the input widgets, building a JSON string, then setting it as the value to POST to the server side service URL. When it gets a reply from its XHR POST, the client takes the reply and sets it as the content of the dijit.Dialog, then displays the dialog to the user.
For more information on how to use the client side, refer to the application source code. Each section in the HTML document is commented, explaining the purpose of the code block. See the following example of the rendered application in use: