Custom Widgets in IBM Host Access Transformation Services

HATS provides host components that recognize elements of the host screen and widgets that render transformed elements on web page. HATS supports a rich set of default widgets.

​Widgets are used to display host components in our GUI. Customizing a widget specifies how widgets appear on the web page. If the default settings of the widgets don’t satisfy your needs, you can customize them to suit your needs.

​We can customize widgets by creating a new widget or by modifying an existing one.
             1. To create a new widget, extend the abstract widget parent class,                                                      com.ibm.hats.transform.widgets.Widget, and implement the                                                              com.ibm.hats.transform.rendererers.HTMLRenderer interface and the public                                    StringBuffer  drawHTML() method.
           
​            2.  To modify an existing widget, extend existing widget classes and overwrite its                              drawhtml() method.

Creating New Widget:
Select HATS-- > New-- > Widget menu in HATS toolkit, to get the dialogue below:

Click on finish.
A new CustomWidget class gets created and the code looks as below:
​

When a new widget is created, below operations are performed in HATS:

• A new MyCustomWidget class is created, which extends the widget class and implements the HTMLRenderer interface. Also, a method drawHtml() gets created for web project output.
• The new widget class is compiled, if “Build Automatically” is selected in workspace.
  
• ​The new widget class is registered in the ComponentWidget.xml file so that it is available in HATS toolkit.

Example of creating new widget:
Below is a piece of code which generates responsive design for table elements:
​

Following screen shot show us, how the table looks when we maximize browser. This is achieved due to the code that we wrote in the widget
​

And below picture shows how it looks when we use restore option in browser:
​

Modifying existing widgets:
You can modify any of the existing widgets present in ComponentWidget.xml by extending one of the Widget classes and overwriting its drawMethod(). Refer to the HATS API References for details about widget interfaces and methods.

Create Custom widget by following the steps mentioned before and extend the existing widgets as below:

public class MyCustomWidget extends com.ibm.hats.transform.widgets.FieldWidget

Refer the link below for more examples:

​https://www.ibm.com/developerworks/community/wikis/home?lang=en#!/wiki/Wcd0f7758d3a2_4be8_a938_ffe8271d536b/page/HATS+Custom+Widget+Tutorial

Soumya Surgihalli
Senior Consultant – IBM Host Access Transformation Services
soumyamallappa.s@hcl.com