Install Multichannel Bank Transformation Toolkit 7.0 on Windows® system.
Copy the following three plug-ins which are necessary for XUI Editor from
%BTT_INSTALL_HOME%/plugins to %RAD_INSTALL_HOME/plugins:
com.ibm.btt.core_7.0
com.ibm.btt.rcp.xui_7.0
com.ibm.btt.rcp.xui.editor_7.0
Open RAD, and create a new Plug-in project named Sample.
Create a new XUI file in the Sample/src/<package name>. Suppose the
package name is end2end.xui. After clicking Finish,
the blank end2end.xui file is opened. The default view is Design view, and
the Source view is next to the Design view.
If the widget palette is hidden, click Show Palette icon,
which is an arrow on the right side of the design panel as highlighted in
the following figure.
Click the Composite on the palette and put it in
the design panel. It can be resized as you require.
Select a label and put it on the Composite. And
the properties of this label are displayed in the Properties view as shown
in the following screen capture.
Modify its properties, such as text, font, alignment, background color,
foreground color and so on. You can refer to the following screen capture.
Put a text on the Composite. Resize and locate
it with the ruler and the guide, and then modify its properties. You can refer
to the following screen capture.
Put three labels on the Composite to display three
types of credit cards for users.
Put a Group, and three CheckBoxes in it for users to select different
types of cards, as shown in the following screen capture:
Put a Group and two RadioButtons for users to select whether to continue
the application, as shown in the following screen capture:
Put a button on the Composite to confirm the operations,
as shown in the following screen capture:
When you design the above interface, the corresponding source code
is being created automatically, shown as follows:
After
the XUI file is ready, you can simulate the actual runtime environment and
preview the designed UI.
Add com.ibm.btt.core and com.ibm.btt.rcp.xui in the Dependencies of the
plug-in proect.
Right click the XUI file name, end2end.xui, and select Run
As > XUI Preview, the UI is
displayed as shown in the following screen capture.