Customizing widget

There are twelve basic types of widgets which are provided by the XUI Engine. They are Label, Button, Text, Password, Check Box, Radio Button, Combo, Composite, List, Group, Table, and Table Column.

This architecture is extendable which means you can perform the following procedures.

How to extend a new widget? Current XUI engine support SWT widget library. And it uses wrapper pattern to wrap SWT widgets, and add XUI specified functions to wrapped widgets, for instance: validation, error handling, global settings, and so on. If you buy the source code, refer to the code of the pre-build widget for advanced development; otherwise, you can refer to the BTT Java documentation about the interface description.

All supported widgets are defined in “classTable” section in XUIEngine global file. XUIEngine uses Element Factory to instance its widgets and injection attributes. This is a snippet from XUI engine xml:
<map id="classTable">
  <entry key="Composite" value="com.ibm.btt.rcp.xui.widgets.XUIComposite"/>
  ……
</map>
This xml snippet creates the relationship between widget implementation class and its xml tag. When you want to create an instance of XUIComposite using xml, you only need to specify “Composite” as your xml tag name, see the XUI transaction panel file as example, this panel creates a composite and specifies its bounds and id.
<XUI>
	<Composite bounds="74, 61,590,366" id="error Composite">
	……	
	</Composite>
</XUI>

If you have developed your own specified widget, you can add it to XUI engine easily. For example, you have developed a new composite named “CustomerComposite”, and its class name is “com.customer.widgets.CustomerComposite”, you can follow these simple steps to use it in XUI files:

  1. Firstly, you can register this widget in your XUI engine global file, for example:
    <map id="classTable">
    		<entry key="Composite" value="com.ibm.btt.rcp.xui.widgets.XUIComposite"/>
    		<entry key=” CustomerComposite” value=” com.customer.widgets.CustomerComposite”/>
    		……
    	</map>
  2. Secondly, you can use it in your XUI panel file, that’s so easy! This snippet creates an instance of “CustomerComposite” and specifies its bounds and id.
    <XUI>
    	< CustomerComposite bounds="74, 61,590,366" id="Customer Composite">
    	……	
    	</ CustomerComposite >
    </XUI>