Web Dynpro View 

The view is the smallest unit of a Web Dynpro application visible for the user. The layout elements and dialog elements - for example, tables, text fields, or buttons - required for the application are arranged in a view. The view contains a controller and a controller context in which the application data to be processed is stored in a hierarchical structure. This allows the linking of the graphical elements with the application data.

Creating a View

To create a new view for your component, select the Views node of the component in the object list on the left side of the Workbench and choose Create from its context menu (right mouse button). Once the view is created, the View Editor appears on the right side of the Object Navigator in the tools area. You can now edit the graphical design of the view using the tools available in the Layout tab.

 To be able to see the view in the browser, you must embed it actively in a Web Dynpro window; the embedding never occurs automatically, not even if the component contains only one single window.

View Editor

Once a view is created, the Layout tab of the View Editor is automatically called. The Layout tab is divided into three areas:

 

●     In the left column of the editor, you can find the UI element library, a set of small tabs with grouped UI elements - see chapter Web User Interfaces in the reference part of the documentation.

●     A simple presentation of the view layout appears in the graphical View Designer in the middle part of the editor window. You can use the View Designer 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:

○     UI Element Hierarchy

In the upper part, the UI elements contained in the layout are displayed as nodes of a tree structure. You can change the order or nesting of the individual UI elements in this hierarchy.

○     UI Element Properties

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

Inserting a UI Element

The layout of a newly created view does not contain visible objects. Only the root element of the future UI element hierarchy is already created. The individual UI elements are to be embedded in this element called ROOTUIELEMENTCONTAINER, . In general, you can use two different procedures:

 

●     Drag&Drop in the UI Element Library:

You can use drag and drop for the corresponding icons to move the UI elements from the UI element library to the left of the View Editor to the View Designer area and place them to the desired position in the layout.

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

 

●     Context Menu of Elements in the Tree Structure:

These UI elements can embed other UI elements - for example, Group, Table, or the ROOTUIELEMENTCONTAINER. They provide the context menu function Insert Element in the tree structure. You can specify the name and type of the new UI element in a subsequent dialog box.