End to End Sample (applying for the credit card)

  1. Install Multichannel Bank Transformation Toolkit 6.1.2 on Windows® system.
  2. 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_6.1.2
    • com.ibm.btt.rcp.xui_6.1.2
    • com.ibm.btt.rcp.xui.editor_6.1.2
  3. Open RAD, and create a new Plug-in project named 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 the Design view.
  5. 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.
    Screen capture showing Show Palette icon
  6. Click the Composite on the palette and put it in 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 screen capture.
    Screen capture showing the table in 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. You can refer to the following screen capture.
    Screen capture showing an example of modifying the table properties
  9. 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.
    Screen capture showing an example of modifying the text properties
  10. Put three labels on the Composite to display three types of credit cards for users.
    Screen capture showing how to modify the label properties
  11. Put a Group, and three CheckBoxes in it for users to select different types of cards, as shown in the following screen capture:
    Screen capture showing credit card application
  12. Put a Group and two RadioButtons for users to select whether to continue the application, as shown in the following screen capture:
    Screen capture showing credit card application
  13. Put a button on the Composite to confirm the operations, as shown in the following screen capture:
    Screen capture showing credit card application

    When you design the above interface, the corresponding source code is being created automatically, shown as follows:

    Screen capture showing source code

    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 screen capture.
    Screen capture showing the designed UI