Extending the widget and the property

During the process of developing business applications for banks, you may have some special needs for widgets. You can use the XUI Editor to extend your own widgets to the palette with your own Java™ classes implementation.

The following example shows how to create a PrivateText, which is a born red Text widget.

  1. Create a clean Plug-in project and add com.ibm.btt.rcp.xui.editor.widgets as the extension.
  2. Make a new widget. Specify the widget name as PrivateText, icon and class as <package name>.MyRedText.

    The content of MyRedText.java is as follows:

    Screen capture shows the MyRedText.class content

    The content of MyRedTextBean.java is as follows:

    Screen capture shows the MyRedTextBean.class content
  3. Run the plug-in project, the configuration prompt pops up as shown in the following figure. Provide the appropriate configuration and click Run.
    Screen capture shows the configuration prompt

    An Eclipse is started and the PrivateText is displayed on the palette after a new workspace and the XUI file are created.

  4. Put a Composite on the design panel and a PrivateText on the Composite It is red as expected as shown in the following figure.
    Screen capture shows the red private text on the design panel

    Because the PrivateText is extended from the XUIText class which is provided by XML UI Engine, so it has all the properties which belong to common Text widget. But you can use annotation to control the appearance of properties. We use @Appearance({"***"}) and @General({"***"}) to just show these two property items in the following figure.

  5. Extend a new property what is a textbox and the name is rdtxt for the PrivateText. Because the textbox content will be String, so a class to convert String to Object should be provided as shown in the following figure.

    A PropertyDescriptor class should also be provided as shown in the following figure.

  6. When these classes are ready, go back to the Dependencies view of plug-in project, add com.ibm.btt.rcp.xui.editor.properties as extension and create a new property. Provide MyRedTextBeanDescriptor to the class.
  7. Run the plug-in project, create a new XUI file and put PrivateText on the Composite, the property rdtxt can be displayed in the Properties view as shown in the following figure.