View: Layout 

The Layout tab page is divided into three areas:

·        The left column of the editor contains the UI element library, a number of smaller tab pages with grouped UI elements. You can insert these in the View Designer in the view layout using drag and drop.

·        A simple presentation of the view layout appears in the graphical View Designer in the middle part of the editor window. You can use this layout editor to directly edit the design of the view. Selected elements can be moved using drag and drop.

·        The right area of the editor window is divided into two areas:

·         In the upper part, the UI elements contained in the layout are displayed hierarchically. You can change the order or nesting of the individual UI elements in this hierarchy.

·         In the lower part, the properties of the currently selected UI elements are listed in a table.

 

The UI Element Library

 For detailed documentation of all elements for Web Dynpro for ABAP, see the reference section of this documentation.

The UI element library is divided into various areas. Only a few areas are given as examples here, the reference documentation mentioned above contains the complete list.

Standard (Simple Elements):

This library contains all UI elements such as Button, Table or TextView that are typical of a standard Web Dynpro application.

Standard (Complex Elements):

This library contains UI elements that are required for a more complex Web Dynpro application (such as BreadCrumb, Roadmap, and so on).

Business Graphics:

This library provides interface elements for presentation graphics and geographical maps.

 

UI Element Hierarchy and Properties of the UI Elements

The UI element hierarchy to the right of the editor displays all UI elements that you inserted as a tree structure. The root element of this tree structure is called RootUIElementeContainer. It is created automatically with each view and initially does not contain any visible objects. You can use it, however, to influence general properties that apply to the entire view. These are graphical properties such as the layout, height or width of the view.

As well as using the drag and drop technique, you can use the context menu of the RootUIElementeContainer (position the cursor on the object name and then press the right mouse-button) to insert new elements in your layout:

·        To do this, choose Insert element.....

·        On the screen that follows, enter a name for the new element.

·        Select the UI element you require from the dropdown list.

·        Confirm the dialog box.

As soon as the new element appears in the tree structure, you can select it and main the properties in the corresponding table.

You can move elements in the tree structure using drag and drop to change the layout design.

 If a new UI element from the UI element library is inserted to the layout using drag and drop, a name is automatically assigned to this element. You can change this name in the properties table of the element.

The Properties Table

The properties table is displayed for each UI element when the element is selected in the tree structure. Some properties have to be entered directly in the table (such as the ID of a table column); with other properties you can create a binding to a context element, such as the number of visible rows in a table. In such a case, the number is not constant but changes whenever the value of the corresponding context element changes. For some properties, binding to a context element is required. For example, the data source of a table can only be specified when it is bound to a context element.

In addition to the properties, possible events of UI elements - known as actions - are also managed in the table. Actions are created automatically if you inserted an element into your view’s layout that is expecting a user action (such as a Button pushbutton or an input field). The corresponding event handler is created when you enter a name for the action in the table. When you double-click the action name, an ABAP Editor is called in which you can create the code for the event handler.

  The newly created event handler method is automatically inserted into the Methods tab. If other event handler methods for other buttons have been created in the current view, these methods are similarly entered in the Methods tab. They are offered for selection when you enter the name for the new action.