Designing a UI and data binding

In this step, we define the UI layout of a page and specify the interaction behavior of the UI. We also need to specify how the data is bound to UI elements.

Figure 1 shows the example accountMain XUI page that is created with the WebSphere® Multichannel Bank Transformation Toolkit XUI editor.

The main account list is displayed in a selectionList widget, and the sub account detail information is showed in a table widget. In the transaction group shown in Figure 1, text widgets are used to display data from the sub account that can then be selected for withdrawal. These text fields are filled with data automatically by the ECA rule JavaScript. When a user selects another account number, the sub account list is refreshed through an AJAX calling operation.

For each widget on the page, there is a “dataname” property that is used to bind the widget to a data element in the WebSphere Multichannel Bank Transformation Toolkit context. For the main account number widget and text fields in the transaction group, the data is bound to a flow context. For the sub account list table, the data is bind with the operation context of an operation named “GetSubAccountDetailsOp “which is called by AJAX.

During the application design phase, context data and the UI might be designed and created at the same time.
Figure 1. The accountMain page