Use Dojo to develop custom widgets, part 1th: Generating dojo markup with a common markup handler

Use DOJO to develop widgets for Business space

Our custom widgets developed for this series are based on DOJO 1.2.3 and have been tested in V6.2 space Business on WebSphere integration Developer V6.2 using Mozilla Firefox 3.0.11 。 However, the common framework concept we developed also applies to DOJO applications that do not use Business space. Understanding this series requires a basic knowledge of the DOJO and iWidget frameworks.

We want to discuss topics that are frequently encountered in DOJO based applications. This series is organized into the following sections:

Part 1th: Generate DOJO markup using a generic markup handler

Part 2nd: Create a Dojo DataGrid component with paging functionality with a common grid handler

Part 3rd: Using multiple templates in IWidget and how to inherit basic widgets

Part 4: Use a common rest handler to emit a configurable rest call from IWidget

For easy reference, the following files are available in the downloadable samplecode.zip:

Dojomarkuphandler.js: This is the JavaScript class for the generic markup handler.

Markuphandler.json: This JSON file contains the properties of the widget on the screen.

Markuphandler.html: This is the template HTML file, which contains HTML markup. All the div declared in the JSON file should appear here.

Brief introduction

In part 1th, learn how to use a generic markup handler to easily create DOJO markup. Writing DOJO code is never so easy! We'll introduce a simple way to generate DOJO markup using the Dojomarkuphandler JavaScript class. This markup handler class can generate markup for DOJO widgets such as Dijit.form.ValidationTextBox, Dijit.form.SimpleTextarea, and Dijit.form.MultiSelect.

This article describes the steps required to use the DOJO markup handler to explain how the markup handler works.

Understanding Widget Properties

First, you need to define the properties of all the widgets on the screen in the JSON file. The following is a list of required attributes and optional attributes:

Must have attributes

Divname: This is the name of the Div, where the components should be placed in HTML. This div should appear in the template HTML file.

Type: This is the type of DOJO widget. The following types are supported:

Radiogroup (Dijit.form.RadioButton)

TextField (Dijit.form.ValidationTextBox)

ComboBox (Dijit.form.ComboBox)

Filteringselect (Dijit.form.FilteringSelect)

button (Dijit.form.Button)

TextArea (Dijit.form.SimpleTextarea)

CheckBox (Dijit.form.CheckBox)

MultiSelect (Dijit.form.MultiSelect)

Datetextbox (Dijit.form.DateTextBox)

Autocompleter (Autocompleter)

ID: This is the ID or dojoattachpoint of the component to be created.

Searchattr: When you enter a value in a combo box, the database is searched based on this field. (This property is required for MultiSelect, ComboBox, Filteringselect, and Autocompleter.) ）

Labelattr: the label to display. (This property is required for MultiSelect, ComboBox, Filteringselect, and Autocompleter.) ）