Adding containers and widgets

Before you begin

To create a user interface by adding a container and widgets to an XUI page, 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, see Creating an XUI file.

Procedure

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

  1. Open the XUI page 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 page 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 Containers Description 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, see Widget Descriptions.
  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.