View Designer

View Designer is a Web Dynpro tool that provides graphical support when implementing the user interface layout of a Web Dynpro application. The logical Web Dynpro element for the interface layout is the view. There are several standard UI elements available, all of which can be adapted to suit your requirements by adjusting the properties accordingly. The tooltip displays a brief description about the UI element. The UI elements are divided into the following categories:

• Action

• Complex

• Graphic

• Integration

• Layout

• Menu

• Selection

• Text

• Toolbar

• Misc

There is a separate button for each category. You can search for an UI element by entering its name in the text box. After choosing the relevant category, you can compile the individual UI elements for the application layout. The UI elements are displayed in WYSIWYG mode in the View Designer work area. You can reposition the elements within the editor using Drag&Drop. When you design a Web Dynpro view, the following interface elements, which are based on GUI Controls technology, are available in the individual categories.

User Interface Elements (in alphabetical order) A

AnalyticsChart (Complex)

Accordion (Layout)

ApplicationContainer (Layout)

B

BarCodeReader (Integration)

BIApplicationFrame ( Integration )

BreadCrumb (Complex)

BusinessGraphics (Graphic)

Button (Action)

ButtonChoice (Action)

ButtonRow ( Layout )

C

CalendarDayView (Complex)

CalendarMonthView (Misc)

CalendarPaginator (Complex)

CalendarWeekView (Complex)

CalendarYearView (Complex)

Caption (Text)

Checkbox (Selection)

CheckboxGroup (Selection)

ContextualPanel (Layout)

D

DateNavigator (Complex)

DropDownByIndex (Selection)

DropDownByKey (Selection)

DropTarget (Layout)

E

Explanation (Text)

F

FileDownload (Integration)

FileDropTarget (Integration)

FileUpload (Integration)

FormattedTextEdit (Text)

FormattedTextView (Text)

FunctionKey (Integration)

G

Gantt (Graphic)

GeoMap (Graphic)

Group (Layout)

H

HierarchicalCalendarMonthView (Misc)

HorizontalContextualPanel (Layout)

HorizontalGutter (Layout)

I

Image (Graphic)

IFrame (Integration)

InputField (Text)

InputTokenizer (Text)

InteractiveForm (Integration)

InvisibleElement (Layout)

ItemListBox (Selection)

L

Label (Text)

Legend (Complex)

LinkChoice (Action)

LinkToAction (Action)

LinkToURL (Action)

M

MeltingGroup (Layout)

MenuBar (Menu)

MessageArea (Layout)

MessageBasedTrigger (Action)

N

NavigationList (Layout)

Network (Graphic)

O

OfficeControl (Integration)

P

PageHeader (Layout) PatternTabStrip (Layout)

PatternTray (Layout)

PhaseIndicator (Complex)

ProgressIndicator (Graphic)

R

RadioButton (Selection)

RadioButtonGroupByIndex (Selection)

RadioButtonGroupByKey (Selection)

RFIDReader (Integration)

RoadMap (Complex)

RowRepeater (Layout)

S

ScrollContainer (Layout)

Shuttle (Complex)

SectionHeader (Text)

Splitter (Layout)

T

TabStrip (Layout)

Table (Complex)

TextEdit (Text)

TextView (Text)

TimedTrigger (Action)

ToggleButton (Selection)

ToggleLink (Selection)

ToolBar (Toolbar)

ToolBarButton (Toolbar)

ToolBarButtonChoice (Toolbar)

ToolBarDropDownByIndex (Toolbar)

ToolBarDropDownByKey (Toolbar)

ToolBarInputField (Toolbar)

ToolBarLinkChoice (Toolbar)

ToolBarLinkToAction (Toolbar)

ToolBarLinkToUrl (Toolbar)

ToolBarToggleButton (Toolbar)

TransparentContainer (Layout)

Tray (Layout)

Tree (Complex)

TriStateCheckBox ( Selection )

V

ValueComparison (Graphic)

ViewContainerUIElement (Layout)

W

WebWidget (Integration)

In the History category, all UI elements that have been used at least once are listed in chronological order - that is, in the order in which they were used. You can thus easily access the most frequently used elements, even after restarting the View Designer tool.

In addition to the View Designer, the perspectives Outline and Properties are also of great importance when creating user interfaces. The UI element properties are defined and maintained under Properties .

Outline displays the UI elements that were inserted into a view in a tree structure, with a separate ID for each element. The root container of every application view is called RootUIElementContainer ; and contains the reference to the defined UI elements. In the New UI Element window, you can create multiple UI elements simultaneously by selecting the required UI element types. To open Outline and Properties, choose  Window  Show View. 

1. To open the View Designer, choose  Open    Open View Editor  from the context menu for the view name in the Web Dynpro Explorer, Window Editor, or Data Modeler.

2. Choose the Layout tab to open the graphical tool for the interface layout. To enlarge the visible work area in which you can position the individual interface elements, double-click the tab containing the view name. To revert to the original size, double-click the same tab again.