Working with User Interface Elements 

There are numerous user interface elements available for designing the user interface of a Web Dynpro application. All available user interface elements are divided into categories and can be selected via buttons in the View Designer.

Creating a User Interface Element

Prerequisites

You have already created a view using the Navigation Modeler.

Procedure

To define a user interface element for the view layout, proceed as follows:

       1.      In the Web Dynpro Explorer, Data Modeler, or Navigation Modeler, start the edit mode for the view by choosing the context menu entry Edit for the view name.

       2.      Select the category of the user interface element by clicking once on the relevant button.

       3.      There is a help function for each interface element, which can be called using the right mouse button; the following shows the help for the element Caption.

       4.      Use Drag&Drop to move the desired UI element to the work area of the View Designer. Alternatively, you can move the individual elements to the UI element container RootUIElementContainer in the Outline view.

You can also place the cursor on the RootUIElementContainer and choose Insert Child in the context menu. In the wizard, you can assign the UI element an ID of your choice and select the UI element type from a dropdown list.

Result

The View Designer graphically displays the newly created UI element. The UI element structure is displayed in the Outline view. The properties of all created UI elements are displayed in the Properties view, where they can also be edited.

Changing the Position of a User Interface Element

You can change the position of a UI element at a later stage. To change the arrangement of UI elements within a view, proceed as follows.

Procedure

In the View Designer, select the UI element and drag it to the new position.

Alternatively, you can assign the UI element a new position in the Outline view by choosing Move up or Move down in the context menu for the element.

Result

The UI element is displayed at the new position.

Editing User Interface Element Properties

When you create a UI element, the system generates default values for the properties of the element. You can change these values manually.

Prerequisites

You have created a view and its UI elements. You have opened the View Designer tool and the Eclipse views Outline and Properties by choosing Window → Show View → Other → Basic.

Procedure

Properties of a UI element are changed in the Properties view. In the Outline view, select the UI element whose properties you wish to change. The Properties view then lists the default values of the element, provided you have not already changed them. Editable values for a table, for example, include the user interface ID and the number of rows. In the right column of the Properties view, you can overwrite the default values or select a new value from a dropdown list.

For a description of the UI element properties, refer to UI Elements: Methods, Properties and Events.

Deleting a User Interface Element

Procedure

There are two ways of deleting a UI element: You can either place the cursor on the UI element to be deleted in the View Designer and choose the context menu entry Delete,

or you can select the UI element in the Outline view and choose Delete from the context menu.