View Designer 

The 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:

·        ActiveComponent

·        Adobe

·        Business Graphics

·        BusinessIntelligence

·        Mobile

·        OfficeIntegration

·        Pattern

·        Standard Simple

·        Standard Complex

·        Standard Container

The categories ActiveComponent and Pattern will be provided in a later release.

 

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 the work area of the View Designer, the View Editor, in What-You-See-Is-What-You-Get (WYSIWYG) mode and you can also reposition the elements within the work area 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 (in alphabetical order).

In the History category, all UI elements that were 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.

Available UI Elements (in Alphabetical Order)

B

BarCodeReader (Mobile Add-On)

BIApplicationFrame (BusinessIntelligence)

BreadCrumb(Complex)

BusinessGraphics (Business Graphic)

Button (Simple)

ButtonRow (Complex)

C

Caption (Simple)

Checkbox(Simple)

CheckboxGroup(Simple)

D

DateNavigator(Complex)

DropDownByIndex(Simple)

DropDownByKey(Simple)

F

FileDownload (Simple)

FileUpload (Simple)

FunctionKey (Mobile Add-On)

G

GeoMap (Business Graphic)

Group(Container)

H

HorizontalGutter (Simple)

I

InputField (Simple)

InteractiveForm (Adobe)

InvisibleElement (Simple)

ItemListBox (Simple)

L

Label(Simple)

LinkToAction(Complex)

LinkToURL(Complex)

O

OfficeIntegration (Office Integration)

P

ProgressIndicator (Complex)

R

RadioButton (Simple)

RadioButtonGroupByIndex (Simple)

RadioButtonGroupByKey (Simple)

RFIDReader (Mobile Add-On)

RoadMap(Complex)

S

ScrollContainer(Container)

T

TabStrip(Complex)

Table(Complex)

TextEdit (Simple)

TextView (Complex)

TimedTrigger(Simple)

ToggleButton (Simple)

ToggleLink (Simple)

TransparentContainer (Container)

Tray (Container)

Tree(Complex)

TriStateCheckBox (Simple)

V

ValueComparison (Simple)

ViewContainerUIElement (Simple)

 

The UI elements Explanation (Simple), Gantt (ActiveComponent), and Network (ActiveComponent) will be provided with a later release.

The individual UI element sections contain information about all available UI elements and their properties.

 

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 and with a separate ID for each element. The root container of every application view is called RootUIElementContainer; it holds the reference to the defined UI elements. You open Outline and Properties by choosing Window ® Show View.

Starting the View Designer Tool

Prerequisites

The View Designer is used after you have created a view in the Navigation Modeler or Data Modeler.

Procedure

To open the View Designer tool, choose Edit from the context menu for the view name in the Web Dynpro Explorer, Navigation Modeler, or Data Modeler and then choose the Layout tab if you wish to open the graphical tool for the interface layout. The perspective containing the work area is the Diagram View. The source code of the application view can be accessed via the Implementation tab.

If you want to enlarge the work area in which you position the individual interface elements, double-click the Diagram View bar. To revert to the original size, double-click the same bar again.