Background information
The Dojo Extension Feature Set can be used to enable a IBM
® WebSphere
® Portlet Factory model to leverage functionality provided by the Dojo JavaScript Toolkit.
The Dojo toolkit is an open source JavaScript toolkit, which allows you to easily build rich dynamic capabilities into web pages.
For more information on the Dojo JavaScript Toolkit, please visit
http://dojotoolkit.org
.
Sample description
Here are some of the techniques illustrated in the sample models. There are eight models illustrating the Dojo techniques.
Drag and Drop. Drag and Drop functionality can be achieved by using the Dojo Drag Source and the Dojo Drop Target Builders together in a single model or across models.
The Dojo Drag Source Builder is used to define a drag page location and the source for the data being passed top the target. The Dojo Drop Target Builder is used to declare a drop target page location and a target Model action to invoke when the source data is dropped onto the target.
Sample models showing this technique:
DragDropSource, DragDropTarget
Inline Edit. The Inline Edit functionality allows you to add editing capabilities to a Data Page field so that it initially appears as read only text. The text can be edited by clicking a pencil edit icon next to the text field. The Dojo Inline Edit Builder is used to specify the Data Page field to enable the inline edit capability on. The inline edit submit leverages the Data Page submit functionality to place the modified data back to the original source data just as if it were a normal input field.
Sample model showing this technique:
InlineEdit
Tooltip. The Tooltip functionality allows you to display a popup text box when you mouse over a target page area. The tooltip text can be a simple caption string, or an entire page in your model. The Tooltip Builder is used to declare the page location to enable as the hover location and allows you to specify the data to display in the tooltip area.
Sample models showing this technique:
Tooltip, TooltipYahooMap
Dojo Enable. The Dojo Enable Builder allows you to add Dojo capabilities to a page in your model. This builder provides the low level functionality of adding the proper JavaScript to bring in the dojo.js, and the specified dojo.require(...) packages on to the specified page. This is useful when a desired Dojo builder is not available and you wish to manually add a Dojo widget to a page. Typically, you will use this Builder along with an attribute setter builder or some custom html code to add the desired functionality.
Sample models showing this technique:
DojoDialog, DojoTreeWithSubmit, ProgressBar
This shows the running InlineEdit Model:
This shows the running Tooltip Model:
This shows the running DojoTreeWithSubmit Model:
Notes on running the sample and prerequisites
To run the sample application:
- Download the sample ZIP file and import it into a project using the File, Import, WebSphere Portlet Factory Archive command. You will need to have the Dojo Extension feature set installed in the project you are using.
- Open the desired model from the models\samples\dojo folder and run it.
Download
dojo_sample.zip
If you are using WPF Beta 2 (and beyond) then you will need to use the samples from the dojo_1.x_sample.zip. This is required because Dojo in this release has been upgraded to version 1.0.x, and some of the samples include manually added Dojo controls. Note - The dojo_1.x_sample.zip has not been verified.
dojo_1.x_sample.zip