IBM Content Navigator, Version 2.0.3

Creating a widget

You can create a widget to provide the user interface for your plug-in. For example, you might create a widget that enables users to run a custom action. You also might create a widget to enable administrators to configure the plug-in.

About this task

You can reuse the widgets in the IBM® Content Navigator visual widget library in the user interface for your custom actions, features, layouts, and services. For example, rather than creating your own tree widget to browse a folder hierarchy, you can use the ecm.widget.FolderTree widget.

If no IBM Content Navigator widget meets your requirements, you can create a custom widget. The classes in the IBM Content Navigator JavaScript modeling library that make it easier to build new widgets from the basic Dojo dijit widgets. This library includes models of Dojo data stores that provide common methods for representing data. These data store model classes enable multiple widgets to easily use and present data. The library also includes models of Dojo trees that you can use to obtain data for navigation trees in custom widgets.

Procedure

To create a custom widget:

If your widget is extending the Dojo dijit._Templated class, create an HTML template to define the visual presentation of the widget, including buttons, fields, and labels. This template is used to generate the initial DOM structure for the widget.
Create a JavaScript file to define the class for the custom widget by extending the Dojo dijit._widget class or another Dojo dijit class.
Use the Dojo dijit._Templated class and reference the template that you created in step 1.
Create a JavaScript file to instantiate the widget in the plug-in.
Add the widget script as a component in your Plugin.java subclass. To add the script, implement the getScript method to return the JavaScript file that you created in step 3.

Sample plug-in files for custom widgets

The following files in the sample plug-in define custom widgets:

Table 1. Sample files that define custom widgets
File	Description
MessagesDialog.js	This file extends the Dojo dijit.Dialog class to define widget that provides a message dialog box.
MessagesDialog.html	This file provides an HTML template that is used for the widget that is defined in the MessagesDialog.js file.
PopupDialog.js	This file extends the Dojo dijit.Dialog class to define a widget that provides a pop-up dialog box.
PopupDialog.html	This file provides an HTML template that is used for the widget that is defined in the PopupDialog.js file.
SamplePlugin.js	This file instantiates the MessagesDialog.js class to display progress messages for the sample plug-in. The file instantiates the PopupDialog.js class to open the help file for the sample plug-in in a pop-up window.

What to do next

Use the widget to provide a user interface for the custom actions or features that are defined by your plug-in.