End to End Sample (apply for the credit card)

  1. Install Multichannel Bank Transformation Toolkit 6.1.1 on Windows® system.
  2. 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
  3. Open WID/RAD, and create a new Plug-in project whose name is Sample.
  4. 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.
  5. 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.
    Screen capture shows where is the show palette arrow
  6. Click the Composite on the palette and put it on the design panel. It can be resized as you require.
  7. 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.
    Screen capture shows the table on the design panel and its properties in the properties view
  8. Modify its properties, such as text, font, alignment, background color, foreground color and so on. See the following figure for reference.
    Screen capture shows an example of modifying the table properties
  9. 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.
    Screen capture shows an example of modifying the text properties
  10. Put three Labels on the Composite to display three types of credit cards for the users apply.
    Screen capture shows an example of how to modify the label properties
  11. Put a Group, and three CheckBoxes in it for the user to select different types of cards.
  12. Put a Group and two RadioButtons for the user to select whether to continue the application.
  13. 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.

  14. Add com.ibm.btt.core and com.ibm.btt.rcp.xui in the Dependencies of the plug-in proect.
  15. Right click the XUI file name, end2end.xui, and select Run As > XUI Preview, the UI is displayed as shown in the following figure.
    Screen capture shows the designed UI