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 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. 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)

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)

E

Explanation (Text)

F

FileDownload (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)

InputField (Text)

InteractiveForm (Integration)

InvisibleElement (Layout)

ItemListBox (Selection)

L

Label (Text)

Legend (Complex)

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)

T

TabStrip (Layout)

Table (Complex)

TextEdit (Text)

TextView (Text)

TimedTrigger (Action)

ToggleButton (Selection)

ToggleLink (Selection)

ToolBarButton (Toolbar)

ToolBarButtonChoice (Toolbar)

ToolBarDropDownByIndex (Toolbar)

ToolBarDropDownByKey (Toolbar)

ToolBarInputField (Toolbar)

ToolBarLinkToAction (Toolbar)

ToolBarLinkToUrl (Toolbar)

ToolBarToggleButton (Toolbar)

TransparentContainer (Layout)

Tray (Layout)

Tree (Complex)

TriStateCheckBox (Selection)

V

ValueComparison (Graphic)

ViewContainerUIElement (Layout)

 

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. Also have a look at the icons which are displayed on the upper right-hand side of the Properties view. When you click  you can choose whether you would like to display additional information for the used user interface elements.

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. You open Outline and Properties by choosing Window → Show View.

Starting the View Designer

To use the View Designer, you must have made a view definition before.

More information: Defining Views

Procedure

       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.

Making Settings for View Designer

Layout Settings

You can personalize the View Designer theme by choosing Window → Preferences → Web Dynpro → View Designer → Theme. The colors affect the background of the design area. Select the required layout, then choose Apply and OK. Restarting the View Designer to enable the new layout is not required. The following table shows the options for theme adaptation:

Theme	Layout
tradeshow (default)	Light-blue background color, black font, white and grey graphics
hcb	Black background color, white font, white graphics
chrome	Same as tradeshow theme, additonally scrollbar light-grey
standard	Light-blue background color, black font, white and grey graphics
highcont	White background color, black font

Furthermore, you can apply custom themes to View Designer to provide a new stylesheet to the user interface elements in the graphical editor.

More information: Applying Themes to View Designer

Additional Settings

Setting	Description
Enable accessibility texts	Supports accessibility compliance 508 (not activated as default)
Create a Text View element on view creation	Basic element TextView is automatically integrated into the view unit (selected as default)