IBM WebSphere Multichannel Bank Transformation Toolkit, Version 7.1

Adding containers and widgets to XUI files

This topic describes how to create a user interface by adding a container and widgets to an XUI file.

Before you begin

To create a user interface by adding a container and widgets to an XUI file, you must first create an XUI web project and then create an XUI file. For information on how to create an XUI web project, refer to the Creating an XUI project topic. For information on how to create an XUI file, refer to the Creating an XUI file topic.

Procedure

To create a user interface by adding a container and widgets to an XUI file, do the following steps:

  1. Open the XUI file to which you want to add containers, or widgets, or both.
  2. Drag and drop a container from the Palette view to the XUI editor area.
    Note: Each XUI file must contain one root container, and it cannot contain more than one root container. However, a root container can contain other containers as sub-containers.
    For more information on the containers that are provided by WebSphere Multichannel Bank Transformation Toolkit, refer to the XUI containers topic.
  3. Drag and drop widgets for the user interface that you are creating from the Palette view to a container in the XUI editor area. For more information on the widgets that are provided by WebSphere Multichannel Bank Transformation Toolkit, refer to the XUI widget descriptions section.
  4. Optional: If you want to delete a widget or a container element, right-click the element that you want to delete in the XUI editor area, and then click Delete. If you want to delete more than one widget or container element at the same time, press Shift and then select the elements that you want to delete. Right-click the selected elements, and then click Delete.
    Note: After you delete a widget, the cell that contained the widget becomes empty, and the empty cell is then called a placeholder. Placeholders are displayed in the Outline view.
    Two placeholders in the XUI editor area. The placeholders are displayed in the Outline view.
    If you want to delete a placeholder, right-click the placeholder in the XUI editor area, and then click Delete.


Feedback