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 showing the MyRedText.class content

    The content of MyRedTextBean.java is as follows:

    Screen capture showing the MyRedTextBean.class content
  3. Run the plug-in project. The configuration dialog opens as shown in the following screen capture. Enter 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 in the design panel and a PrivateText in the Composite. It is red as shown in the following figure.
    Screen capture showing the red private text in the design panel

    Because the PrivateText is extended from the XUIText class which is provided by XML UI Engine, 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 show these two property items. You can refer to the following screen capture:

    Screen capture showing two property item
  5. Extend a new property which is a textbox, with the name of rdtxt for the PrivateText. Because the textbox content is String, define a class to convert String to Object, as shown in the following screen capture.
    Screen capture showing class converting String to Object

    Define a PropertyDescriptor class, as shown in the following screen capture.

    Screen capture showing a PorpertyDescriptor class
  6. Open 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 in the Composite. The property rdtxt can be displayed in the Properties view, as shown in the following screen capture:
    Screen capture showing the property rdtxt