When you first add a host component rendered by a HATS Dojo widget to a transformation .jsp file, the component and widget selections are defined within a <HATS:Component> tag. For more information about the <HATS:Component> tag, see HATS component tag and attributes. If the HATS default widget definitions meet you needs, then this is all that is required.
The example below shows a Command line component rendered by a HATS default Dojo Combo box widget.
In the transformation .jsp file this default component and widget are defined within a <HATS:Component> tag as shown below.
<HATS:Component
type="com.ibm.hats.transform.components.CommandLineComponent"
componentSettings=""
row="20" col="7" erow="20" ecol="21"
alternate=""
widget="com.ibm.hats.transform.widgets.dojo.ComboBoxWidget"
widgetSettings="stringListItems:Boats=boats;JK=strqm;Sign Off=90;
|autoSubmitOnSelect:false|useString:true|"
alternateRenderingSet="" textReplacement="" />If you want to customize a HATS Dojo widget to add function in addition to what is provided using the defaults, you must first transform the component and widget definitions. To do this, select the <HATS:Component> tag, right-click, and select HATS Tools > Transform for Dojo Editing. The Transform for Dojo Editing wizard transforms the <HATS:Component> tag to a <HATS:Render> tag. The example below shows the <HATS:Component> tag above after being transformed to a <HATS:Render> tag.
<HATS:Render
<!-- Start of component settings -->
type="com.ibm.hats.transform.components.CommandLineComponent"
componentSettings=""
row="20" col="7" erow="20" ecol="21"
textReplacement="">
<!-- End of component settings -->
<!-- Start of ComboBoxWidget -->
<!-- com.ibm.hats.transform.widgets.dojo.ComboBoxWidget -->
<!-- Start of JSON data source -->
<!-- Start of JSON data for the component element -->
<script>var HATSJSON_<HATS:ElementId/> = <HATS:JSON/>;</script>
<!-- End of JSON data for the component element -->
<!-- Start of JSON widget settings -->
<script>var DOJOWidgetSettings_<HATS:ElementId/> =
{"type":"ComboBoxWidget",
"value":{"stringListItems":"Boats=boats;JK=strqm;Sign Off=90;",
"autoSubmitOnSelect":"false","useString":"true"
}
};
<!-- End of JSON widget settings -->
</script>
<!-- End of JSON data source -->
<!-- Start of rendered widget -->
<div id="<HATS:ElementId/>">
<label for id="<HATS:ElementId/>_input"
id="<HATS:ElementId/>_label"></label>
<input id="<HATS:ElementId/>_input"></input>
</div>
<!-- End of rendered widget -->
<!-- Start of data binding -->
<script type="text/javascript"
src="../common/hatsdojo/hsr_comboboxwidget.js">
</script>
<script type="text/javascript">
if (HATSJSON_<HATS:ElementId/> && (HATSJSON_<HATS:ElementId/>.value){
dojo.addOnLoad(function(){
var uLabel = dojo.byId("<HATS:ElementId/>_label");
var jsonData = (HATSJSON_<HATS:ElementId/>;
var widgetSettings = DOJOWidgetSettings_<HATS:ElementId/>;
var jsonList = getListItemsFromJSONData(jsonData,
getListItemsFromHATSWidgetSettings(widgetSettings));
var storeList = new dojo.data.ItemFileReadStore(
{data: {identifier:"value",
items:createUniqueItemsList(jsonList,"value")
}
}
);
var uComboBoxWidget = new dijit.form.ComboBox(
{name:getPosLengthStringFromJSONData(jsonData),
store:storeList,searchAttr:"fullName"
},
"<HATS:ElementId/>_input"
);
//load the JSON information and behavior into the Widget
bindJSONDataToComboBox(uLabel, uComboBoxWidget,
jsonData, widgetSettings);
setInputFieldFocus();
});
}
</script>
<!-- End of data binding -->
<!-- /com.ibm.hats.transform.widgets.dojo.ComboBoxWidget -->
<!-- End of ComboBoxWidget -->
</HATS:Render>Notice in the example above, comments have been added to separate different sections of the <HATS:Render> tag. These sections are described below.
These settings are the same as on the <HATS:Component> tag. For descriptions, see HATS component tag and attributes.
The widget settings are contained in a JavaScript Object Notation (JSON) object and used in the creation and binding of the Dojo widget in JavaScript for behaviors, options, and default values.
<HATS:ElementId/> creates a unique identity for the rendered component element at runtime.
<HATS:JSON/> creates the actual JSON object at runtime.
The JSON data source is created from the ComponentElements using a toJSON() method. This JSON data is used to bind the Dojo widget to HATS data. More information can be found in the APIs for the ComponentElements. See Using the API documentation (Javadoc).
The rendered widget is the base HTML and JavaScript that is changed at Dojo load time to create a HATS Dojo widget.
The data binding uses the settings and data provided to change the rendered widget into a HATS Dojo widget. This typically includes providing the Dojo widget event behaviors such as focus and selection, default values, and any options, settings, or data necessary for correct operation and layout.
The following sections include examples of customized HATS Dojo widgets. For more information about these and other Dojo widgets, see the Dojo Toolkit API documentation at http://dojotoolkit.org/api/.
This example shows various ways to customize a HATS Dojo Combo box widget.
Start by creating a Combo box widget, for example, for the From City input field on the following host screen for the Flights Reservation System application.
When creating the Combo box widget use the Fill from string setting to specify the List items to fill the drop-down list. In this example, use the following string of city names:
Albany;Albuquerque;Atlanta;Boston;Chicago;Dallas;Los Angeles;Miami;
Montreal;Raleigh;Rochester, MN;Salt Lake City;San Diego;Toronto;Vancouver;Washington DCAfter you create the Input field component rendered with the Combo box widget, the widget appears on the transformation .jsp file as shown below:
When you preview or run this example, type the letters, al, into the Combo box. Notice that all of the cities that contain the letters, al, are displayed in the drop-down list.
To customize the Combo box widget so that only cities that start with the typed letters are display in the drop-down list, edit the transformation .jsp file and perform the following steps:
<HATS:Component
type="com.ibm.hats.transform.components.InputComponent"
componentSettings="" textReplacement=""
row="12" erow="12" col="17" ecol="32"
widget="com.ibm.hats.transform.widgets.dojo.ComboBoxWidget"
widgetSettings="stringListItems:Albany;Albuquerque;Atlanta;Boston;Chicago;Dallas;
Los Angeles;Miami;Montreal;Raleigh;Rochester, MN;Salt Lake City;San Diego;
Toronto;Vancouver;Washington DC|
autoSubmitOnSelect:false|useString:true|" alternate="" alternateRenderingSet="" /> setInputFieldFocus();
uComboBoxWidget.queryExpr = "\${0}*";Now when you preview or run this example, and type the letters, al, into the Combo box, notice that only cities that start with these letters are displayed in the drop-down list.
The Combo box widget also supports validation of user-supplied input. Again, referring to the Dojo API documentation, you see that the regExp property can be used to restrict the format of user-supplied input. For example, if you want to specify that no numbers are allowed in the user’s input, following the statement you added in the previous example, add the statement shown below:
uComboBoxWidget.regExp = "[^0-9]*";In addition, if you want to add a prompt message and change the text of the default invalid value message , add the final two statements shown below:
setInputFieldFocus();
uComboBoxWidget.queryExpr = "\${0}*";
uComboBoxWidget.regExp = "[^0-9]*";
uComboBoxWidget.promptMessage = "Please enter the departure city.";
uComboBoxWidget.invalidMessage = "Numeric characters are not allowed.";Now when you preview or run this example, notice your prompt message is displayed when you position the cursor in the combo box.
Type a value containing a number. Notice your invalid message is displayed, and the combo box changes color and displays a warning icon.
This example shows how to change the HATS Enhanced grid widget to add a single-selection radio button for each row in the table.
Start by creating an Enhanced grid widget, for example, for a table similar to the one shown on the following host screen.
After you create a Table component rendered with an Enhanced grid widget, the widget appears on the transformation .jsp file as shown below.
To change the indirectSelection plug-in to provide a single-selection radio button for each row, edit the transformation .jsp file and perform the following steps:
var grid = new dojox.grid.EnhancedGrid(
{
autoWidth: true,
autoHeight: true,
structure: tableHeader,
plugins: {nestedSorting: true, dnd: true, indirectSelection: true},
selectionMode: "single"
},
document.createElement('div')
);The Enhanced grid widget now appears on the transformation .jsp file as shown below. In this example, single-selection radio buttons are added to each row in the table. The selected row can be dragged to another location in the table.
This example shows how to fill the drop-down list of a HATS Dojo Filtering select widget from a global variable.
Start by creating a Filtering select widget, for example, for the Account number input field on the following host screen for the Accounts application.
After you create an Input field component rendered with a Filtering select widget, the widget appears on the transformation .jsp file as shown below:
Edit the transformation .jsp file and perform the following steps:
<HATS:Component
type="com.ibm.hats.transform.components.InputComponent"
componentSettings="" textReplacement=""
row="11" erow="11" col="22" ecol="26"
widget="com.ibm.hats.transform.widgets.dojo.FilteringSelectWidget"
widgetSettings="" alternate="" alternateRenderingSet="" /> <%@page import="com.ibm.hats.common.*"%>
<html><%= ((TransformInfo)request.getAttribute(CommonConstants.REQ_TRANSFORMINFO))
.getGlobalVariable("acctnumGV", true).getString(0) %>var jsonList = getListItemsFromJSONData(jsonData, getListItemsFromHATSWidgetSettings(widgetSettings));
var gvString = '<%= ((TransformInfo)request.getAttribute(CommonConstants.REQ_TRANSFORMINFO))
.getGlobalVariable("acctnumGV", true).getString(0) %>';
jsonList = getListItemsFromString(gvString, jsonList);
var storeList = new dojo.data.ItemFileReadStore({data: {identifier:"value",
items:createUniqueItemsList(jsonList,"value")}});The Filtering select widget now appears on the transformation .jsp file as shown below. In this example, the drop-down list contains the set of valid account numbers provided by the accountNum global variable.
This example shows how to create a Number spinner Dojo widget to use for the same Account number input field used in the Filtering select example. See Figure 12.
Start by creating a HATS Text box Dojo widget to render the input field.
After you create an Input field component rendered with a Text box widget, the widget appears on the transformation .jsp file as shown below:
Edit the transformation .jsp file and perform the following steps:
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.NumberSpinner");
</script><HATS:Component
type="com.ibm.hats.transform.components.InputComponent"
componentSettings="" textReplacement="" BIDIOpposite="false"
row="11" erow="11" col="22" ecol="26"
widget="com.ibm.hats.transform.widgets.dojo.TextBoxWidget"
widgetSettings="" alternate="" alternateRenderingSet="" /> // comment out the original text box code
// var uInputWidget = new
// dijit.form.TextBox({"type":inputType},"<HATS:ElementId/>_input");
var uInputWidget = new
dijit.form.NumberSpinner({"smallDelta":1,"constraints":
{"min":10011,"max":10037,"places":0},"required":"true"},
"<HATS:ElementId/>_input");The Number spinner widget now appears on the transformation .jsp file as shown below. In this example, the min and max options are set to match the correct range of account numbers for this particular application.
HATS tabbed folder support is deprecated in HATS V9.7. While support for tabbed folders continues for now, IBM reserves the right to remove this capability in a subsequent release of the product. One alternative is to use the TabContainer Dojo Layout widget to create tabs and use HATS widgets to render host components within the tabs.
The example that follows shows using the Dojo TabContainer widget in a HATS Web project to render the data on the Display Report host screen in two tabs, one using the HATS Dojo Enhanced grid widget and the other using the HATS Graph widget.
To use the Dojo TabContainer widget in this example, follow these steps:
Below is the source for the table area containing the TabContainer in this example.
<!-- Insert your HATS component tags here. -->
<table width="783" height="500" cellspacing="0" cellpadding="0" border="0">
<!-- flm:table -->
<tbody>
<tr>
<td height="31" width="12"></td>
<td width="771"></td>
</tr>
<tr>
<td height="469"></td>
<!-- flm:cell -->
<td valign="top">
<div id="TabContainer" dojoType="dijit.layout.TabContainer"
tabposition="top" style="height: 469px; width: 771px">
<div dojoType="dijit.layout.ContentPane" title="Table" id="Tab1">
<HATS:Component
row="7" erow="16" col="14" ecol="77"
alternate="" alternateRenderingSet="" textReplacement=""
widget="com.ibm.hats.transform.widgets.dojo.EnhancedGridWidget"
widgetSettings=""
type="com.ibm.hats.transform.components.VisualTableComponent"
componentSettings="minRows:1|validateCharacterType:false|
includePreviousLineAsHeader:true|columnBreaks:|minColumns:1|
behaveAsInDefaultRendering:false|areaAsInDefaultRendering:false|
overrideRecognitionBehavior:false|evaluateBetterTableParameter:numberOfCells|
excludeCols:|numberOfTitleRows:0|columnDelimiter: |
betterTableHasLeastOfParameter:false|includeEmptyRows:true|
excludeRows:1|" />
</div>
<div dojoType="dijit.layout.ContentPane" title="Graph" id="Tab2">
<HATS:Component
row="7" erow="16" col="14" ecol="77"
alternate="" alternateRenderingSet="" textReplacement=""
widget="com.ibm.hats.transform.widgets.HorizontalBarGraphWidget"
widgetSettings="extractSource:col|backgroundImage:|dataSource1Color:#ff8040|
backgroundColor:#ffffff|extractLabels:true|dataSource3Legend:Series 3|
dataSource2Color:#00ff00|yAxisTitle:Part Name|textAntialiasing:true|
labelIndex:2|extractDataSetLabels:false|height:400|alternateText:Graph.jpg|
width:400|dataSource3:3|defaultFont:SansSerif-PLAIN-12|dataSource2:2|
dataSource1:3|dataSetNumber:1|dataSource2Legend:Series 2|
dataSource3Color:#ff0000|dataSource1Legend:|xAxisTitle:Inventory|
axisColor:#000000|labelColor:#000000|dataSetLabelIndex:1|"
type="com.ibm.hats.transform.components.VisualTableComponent"
componentSettings="minRows:1|validateCharacterType:false|
includePreviousLineAsHeader:true|columnBreaks:|minColumns:1|
behaveAsInDefaultRendering:false|areaAsInDefaultRendering:false|
overrideRecognitionBehavior:false|evaluateBetterTableParameter:numberOfCells|
excludeCols:|numberOfTitleRows:0|columnDelimiter: |
betterTableHasLeastOfParameter:false|includeEmptyRows:true|
excludeRows:1|" />
</div>
</td>
</tr>
</tbody>
</table>The following figures show this example TabContainer widget displayed at runtime. On the Table tab notice the data rendered using the HATS Dojo Enhanced grid widget.
On the Graph tab notice the data rendered using the HATS Graph (horizontal bar) widget.
You can use the Dojo TabContainer widget in a HATS portlet project.
To use the Dojo TabContainer widget in a HATS portlet project, follow the steps similar to using the widget in a HATS Web project, with the following considerations.
<div dojoType="dijit.layout.TabContainer"
id="tabContainer_<portletAPI:namespace/>"
style="width: 500px; height: 100px"></div><div dojoType="dijit.layout.TabContainer"
id="tabContainer_<portletAPI:namespace/>"
style="width: 500px; height: 100px">
<div dojoType="dijit.layout.ContentPane"
id="contentPane_<portletAPI:namespace/>"></div>
<div dojoType="dijit.layout.ContentPane"
id="contentPane_<portletAPI:namespace/>"></div>
<div dojoType="dijit.layout.ContentPane"
id="contentPane_<portletAPI:namespace/>"></div>
</div>Below is example source for a TabContainer widget, containing three tabs, rendering an IBM® i Main Menu screen. The tabs contain the HATS Selection list, Command line, and Function key host components, respectively.
<!-- Insert your HATS component tags here. -->
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
<!-- flm:table -->
<tbody>
<tr>
<td>
<div dojoType="dijit.layout.TabContainer"
id="tabContainer_<portletAPI:namespace/>"
style="width: 500px; height: 400px">
<div dojoType="dijit.layout.ContentPane"
id="contentPane_<portletAPI:namespace/>" title="MenuOption">
<HATS:Component
row="5" erow="17" col="1" ecol="80"
alternate="" alternateRenderingSet="" textReplacement=""
widget="com.ibm.hats.transform.widgets.SLRadioButtonWidget"
widgetSettings=""
type="com.ibm.hats.transform.components.SelectionListComponent"
componentSettings="" />
</div>
<div dojoType="dijit.layout.ContentPane"
id="contentPane_<portletAPI:namespace/>" title="CommandLine">
<HATS:Component
row="19" erow="21" col="1" ecol="80"
alternate="" alternateRenderingSet="" textReplacement=""
widget="com.ibm.hats.transform.widgets.InputWidget"
widgetSettings=""
type="com.ibm.hats.transform.components.CommandLineComponent"
componentSettings="" />
</div>
<div dojoType="dijit.layout.ContentPane"
id="contentPane_<portletAPI:namespace/>" title="FunctionKey">
<HATS:Component
row="22" erow="23" col="1" ecol="80"
alternate="" alternateRenderingSet="" textReplacement=""
widget="com.ibm.hats.transform.widgets.ButtonWidget"
widgetSettings=""
type="com.ibm.hats.transform.components.FunctionKeyComponent"
componentSettings="" />
</div>
</div>
</td>
</tr>
</tbody>
</table>