IBM WebSphere Multichannel Bank Transformation Toolkit, Version 7.1

Data type extension sample

A data type extension sample is provided to demonstrate how to implement a data type extension in the IBM® WebSphere® Multichannel Bank Transformation Toolkit framework. In the sample, we will implement a simple ‘TimeZone' data type to demonstrate all the tasks that are required to extend a data type.

About this task

TimeZone is a common data type in business. In this sample, TimeZone type is required in the format of GMT+(-)DD where DD is two digits that range from 0 to 12. The TimeZone type can have two validation parameter, minoffset and maxoffset, which limit the range of valid TimeZone data.

Procedure

To implement the TimeZone type, do the following steps:

  1. Define the data type by adding the following lines to the type.xml file:
    <type id="TimeZone" implClass="com.ibm.btt.base.DataField">
    	<Descriptor id="typeDefault" implClass="com.ibm.btt.base.types.impl.SimplePropertyDescriptor">
     	<Converter convTypes="default" implClass="com.ibm.btt.alphatest.types.impl.TimeZoneConverter"> 
    	</Converter> 
    	<Validator implClass="com.ibm.btt.alphatest.types.impl.TimeZoneValidator"/> 
    	</Descriptor>
    </type>
  2. Implement TimeZoneValidator for the TimeZone type.
    1. Create a new class, com.ibm.btt.alphatest.types.impl.TimeZoneValidator, which extends com.ibm.btt.base.types.impl.BaseValidator, and override the validate method
    2. The TimeZone type has two validation parameters, maxoffset and minoffset. Implement a class, TimeZoneValidationParamBean, which extends BaseValidator.ValidationParamBean in TimeZoneValidator.
      public static class TimeZoneValidationParamBean extends BaseValidator.ValidationParamBean{
      		//in format:  GMT Sign TwoDigitHours : Minutes
      		public String maxoffset; 
      		public String minoffset;
      	}
  3. Implement TimeZoneConverter for TimeZone by creating a new class, com.ibm.btt.alphatest.types.impl.TimeZoneConverter, which extends com.ibm.btt.base.types.impl.BaseConverter. TimeZoneConverter must override the format and the unformat methods.
  4. Implement a presentation widget for Timezone, and name the widget as TimeZoneTextBox.

    The TimeZoneTextBox widget is used to validate whether the input text conforms to the format of TimeZone. This must be implemented in the validator: function(/*anything*/value, /*dijit.form.ValidationTextBox.__Constraints*/constraints) method.

    After implementing the widget for the TimeZone type, ensure that the TimeZoneTextBox can be generated as an input text box for the TimeZone type data when WebSphere Multichannel Bank Transformation Toolkit generates HTML from JSP. By default, WebSphere Multichannel Bank Transformation Toolkit runtime generates a JSP file to an HTML file. WebSphere Multichannel Bank Transformation Toolkit uses com.ibm.btt.dojo.tag.DojoTextBoxTag to generate the tag for the input data. DojoTextBoxTag can handle only original WebSphere Multichannel Bank Transformation Toolkit data types such as String, Number, and Currency. Because DojoTextBoxTag cannot generate a tag for a new data type, you must extend DojoTextBoxTag. Name the new class as com.ibm.btt.alphatest.dojo.tag.AlphaTextBoxTag. You must also override the getWidgetType method to generate a new widget tag for the TimeZone data type.
    protected String getWidgetType(String type) {
    		if ("TimeZone".equalsIgnoreCase(type)) {
    			return "com.ibm.btt.dijit.TimeZoneTextBox";
    		}
    		else{
    			return super.getWidgetType(type);
    		}
    	}
    Update the bttdojo.tld file to replace DojoTextBoxTag with AlphaTextBoxTag. To replace DojoTextBoxTag with AlphaTextBoxTag, open bttdojo.tld, and replace the following lines:
    <tag>
    		<name>textbox</name>
    		<tag-class>com.ibm.btt.dojo.tag.DojoTextBoxTag</tag-class>
    with:
    <tag>
    		<name>textbox</name>
    		<tag-class>com.ibm.btt.alphatest.dojo.tag.AlphaTextBoxTag</tag-class>
  5. Test the TimeZone data type extension.
    1. Run the Eclipse application. For detailed information on how to run an Eclipse application, refer to the Setting up an XUI web application project topic.
    2. Export the AlphaWidget project as a plugin and copy it to the RAD plugin folder.
    3. Export the following classes into to a JAR file, and then name the JAR file alphatype.jar.
      • com.ibm.btt.alphatest.types.impl.TimeZoneConverter
      • com.ibm.btt.alphatest.types.impl.TimeZoneValidator
      • com.ibm.btt.alphatest.dojo.tag.AlphaTextBoxTag
    4. Copy types.xml and bttdojo.xml from the AlphaWidget project to the same place in the AlphaTest_v7.1 project; and then copy alphatype.jar into the “WebContent->WEB-INF->lib” folder of the AlphaTest_v7.1 project.

  6. Create a test operation.
    1. Create a new operation definition file named datatypeExtensionOp.xml.
    2. In datatypeExtensionOp.xml, define an operation named datatypeExtensionOp. The implclass of this operation is com.ibm.btt.sample.operation.DataTypeExtensionOperation. Define a context named dataTypeExtensionCtx for the operation. In this context, define two ‘TimeZone' type data named ‘preferTimeZone' and ‘timezone', and define a data list named timeZoneList. The definition of the datatypeExtensionOp operation is shown as below:
      <datatypeExtensionOp.xml>
      	 <!-- This operation gets from the context a field containing the page wanted to be shown to the user and places it in the right place to make Composer understand that this page must be shown. -->
           <!-- Operation definition -->
           <operation context="dataTypeExtensionCtx" id="datatypeExtensionOp" implClass="com.ibm.btt.sample.operation.DataTypeExtensionOperation">
           </operation>
           
          <context id="dataTypeExtensionCtx" type="oper">
      		<refKColl refId="dataTypeExtensionData" />
      	</context> 
      	
      	<kColl id="dataTypeExtensionData">
      		<refData id="preferTimeZone" />
      		<field id="timezone" refType="TimeZone"/>
      		<kColl id="timeZoneList">
      			<field id="GMT+1" value="GMT+1"/>
      			<field id="GMT+2" value="GMT+2"/>
      			<field id="GMT+3" value="GMT+3"/>	
      			<field id="GMT+4" value="GMT+4"/>	
      			<field id="GMT+5" value="GMT+5"/>	
      			<field id="GMT+6" value="GMT+6"/>	
      			<field id="GMT+7" value="GMT+7"/>	
      			<field id="GMT+8" value="GMT+8"/>	
      			<field id="GMT+9" value="GMT+9"/>		
      		</kColl> 
      	</kColl>		
      	<data id="preferTimeZone" refType="TimeZone">
      		<param value="true" id="isMandatory"/>
      		<param value="GMT+8" id="maxoffset"/>
      		<param value="GMT+6" id="minoffset"/>
      	</data>  	
      </datatypeExtensionOp.xml>
    3. Implement the com.ibm.btt.sample.operation.DataTypeExtensionOperation class. Because this is a simple sample, the com.ibm.btt.sample.operation.DataTypeExtensionOperation class simply extends BTTServerOperation and overrides the execute method with the following lines. No business logic needs to be implemented.
      		System.out.println("DataTypeExtensionOperation");
      		setValueAt(HtmlConstants.REPLYPAGE, "datatypeExtension.jsp");
  7. Create a test XUI file.
    1. Expand the Alpha_Testv7.1 project.
    2. Right-click the xui folder, and then click New > Other > New XUI File.
    3. In the File name field of the Create XUI File window, enter datatypeExtension.xui. Click Finish.
    4. Open datatypeExentsion.xui in the XUI editor, and then click the grey area to open the Properties tab.
    5. In the Properties tab, click Select Context.
    6. In the Please select a context window, click datatypeExtensionOp.xml > dataTypeExtensionCtx . Click OK.
    7. In the XUI editor, create a page as shown below:
    8. Click the Text Widget. In the Properties tab of the Text widget, edit the dataName property by selecting datatypeExtension > dataTypeExtensionCtx > preferTimeZone.
    9. Click the Combo widget. In the Properties tab, edit the dataName property by selecting datatypeExtension > dataTypeExtensionCtx > timezone; and then for the dataNameForList property select datatypeExtension > dataTypeExtensionCtx > timezoneList .
    10. Save the file.
    11. Right-click the datatypeExentsion.xui file, and then click Generate dojo to generate JSP.
    12. Open the index.xui file in the XUI editor, and then add a Link widget.
    13. In the Properties tab of the Link widget, select the Action tab. Select Launch Operation for Action Type, and then select datatypeExtensionOp for operationId.
    14. Save the file.
    15. Right-click the index.xui file, and then select Generate dojo to generate JSP.
    16. Copy TimeZoneTextBox.js from the AlphaWidget project to the AlphaTest_v7.1 project.
    17. Deploy the test application to WebSphere Application Server and run.

Results

When you open the datatypeExtension.jsp page, it is displayed as shown in Figure 1.
Figure 1. The datatypeExtension.jsp page.
As shown in Figure 1, the text box validates whether the user input String is in the format GMT+(-)DD. Also, as shown in Figure 2, the text box validates whether the value is within the specified range, for example from GMT+6 to GMT+8.
Figure 2. The text box validates whether the value is in within the specified range.


Feedback