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 interface elements available, all of which can be adapted to suit your requirements by adjusting the properties appropriately. The interface elements are divided into the following categories:

·        Mobile

·        Simple Standard

·        Complex Standard

·        Container Standard

·        Business Graphics

·        Adobe

·        Office Integration

The Pattern button will be available in a future release.

There is one button available for each category. After choosing the relevant button, you can select the individual interface elements for your application layout. The UI elements are displayed in the work area 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 view, the following interface elements, which are based on GUI Controls technology, are available in the individual categories (in alphabetical order):

Available User Interface Elements (in Alphabetical Order)

  AdobeInteractiveForm (Adobe)

      BarCodeReader (Mobile)

  BusinessGraphics (BusGraph)

  Button (Simple)

  Caption (Simple)

  Checkbox (Simple)

  CheckboxGroup (Simple)

   DateNavigator (Complex)

  DropDownByIndex (Simple)

  DropDownByKey (Simple)

  FileDownload (Simple)

  FileUpload (Simple) 

FunctionKey (Mobile)

  GeoMap (Complex)

  Group (Container)

  HorizontalGutter (Simple)

  IFrame (Simple)

  Image (Simple)

  InputField (Simple)

  InvisibleElement (Simple)

  Label (Simple)

  LinkToAction (Simple)

  LinkToURL (Simple)

  OfficeIntegration (Office Int)

PhaseIndicator (Complex)

  ProgressIndicator (Simple)

  RadioButton (Simple)

  RadioButtonGroupByIndex (Simple)

  RadioButtonGroupByKey (Simple)

      RFIDReader (Mobile)

  RoadMap (Complex)

  ScrollContainer (Container)

  Table (Complex)

  TextEdit (Simple)

  TextView (Simple)

Toolbar (Simple)

  ToolBarButton (Simple)

  ToolBarDropDownByIndex (Simple)

  ToolBarDropDownByKey (Simple)

  ToolBarInputField (Simple)

  TransparentContainer (Container)

  Tray (Container)

  Tree (Complex)

  ViewContainerUIElement (Simple)

The UI Element Reference Guide contains information about all available user interface elements and their properties.

 

When you are creating user interfaces, the perspectives Outline and Properties are also of great importance. The UI element properties are defined and maintained under Properties. Outline displays the user interface elements of a view with their corresponding UI element IDs in a tree structure.

Opening 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, choose Edit from the context menu for the view name in the Web Dynpro Explorer; Navigation Modeler, or Data Modeler.

The Layout tab leads you to the View Designer tool in the right screen area. The perspective that contains the work area of the View Designer is the Diagram View.

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

Additional Information

The perspectives Properties and Outline are opened by choosing Window ® Show View.

See also:

Creating a View

Working with User Interface Elements