Install Multichannel Bank Transformation Toolkit 6.1.1 on Windows® system.
Copy the following three plug-ins which are necessary for XUI Editor from
%BTT_INSTALL_HOME%/plugins to %WID(RAD)_INSTALL_HOME/plugins:
com.ibm.btt.core_6.1.1
com.ibm.btt.rcp.xui_6.1.1
com.ibm.btt.rcp.xui.editor_6.1.1
Open WID/RAD, and create a new Plug-in project whose name is 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 it.
If the widget palette is hidden, click Show Palette,
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 on 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
figure.
Modify its properties, such as text, font, alignment, background color,
foreground color and so on. See the following figure for reference.
Put a Text on the Composite. Resize, locate it with the
ruler and the guide, and modify its properties. See the following figure for
reference.
Put three Labels on the Composite to display three types
of credit cards for the users apply.
Put a Group, and three CheckBoxes in it for the user to
select different types of cards.
Put a Group and two RadioButtons for the user to select
whether to continue the application.
Put a Button on the Composite to confirm the operations.
When
you design the above interface, the corresponding source code as the following
is being created automatically.
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 figure.