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. Select a container from the and then click on the position where to locate it in the.
    Note: Each XUI page must contain one and only root container. The 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. Select a widget from the and then click on the position where to locate it in the. To add this widget multiple times, press Ctrl when dropping the widget. 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.
  5. Optional: If you want to navigate the element in the through keyboard, use the Arrow key. The element would be selected as if it is clicked on by the mouse, instead of focused as if it is hovered over by the mouse. Press Ctrl+Shift+Spacebar or Ctrl+Spacebar to switch between the two status.