Creating and Designing a View 

Use

The layout of a rectangular unit of logically associated UI elements (for example, input fields, checkboxes, or radio buttons) is represented in a view, in which the user can interact with the application. When designing more complex user interfaces within a Web Dynpro application, a view is the smallest unit of UI elements that cannot be divided any further.

The following procedure describes how to design a simple user interface using the integrated View Designer.

Procedure

The first part of the procedure describes how to create a new view in the existing Web Dynpro component. In the second part, you design the layout and UI elements of the view using the View Designer.

Creating a New View

...

       1.      Open the newly created component in the overview tree of the Web Dynpro Explorer. Open the context menu for the View node.

       2.      Choose  Create View.

       3.      Enter a name for the new view – for example, WelcomeView – and choose Finish.

After the completion of several generation routines, the new view is displayed under the Views node in the Web Dynpro Explorer.

Next to the Web Dynpro Explorer is the View Designer, which consists of several tabs. You can visually design a view in the Layout tab.

Designing the View Layout

...

Proceed with designing your first view. You want to embed a TextView UI element and an Image UI element in a Group UI element. At design time, the view is displayed in the View Designer of the SAP NetWeaver Developer Studio as follows:

Add a Group UI element to the RootUIElementContainerUI element, which already contains a default TextView UI element, the DefaultTextView UI element.

The RootUIElementContainer UI element contains the TransparentContainer type and is integrated into each view as an invisible shell for all UI elements that are contained in it.

       1.      Choose Insert Child in the context menu of the UI element RootUIElementContainer[Transparent Container].

       2.      Enter a name for the UI element, for example WelcomeGroupBox. Select Group as the UI element type and choose Finish.

       3.      Fill the newly created UI element with the following UI elements. Choose Insert Child in the context menu of the WelcomeGroupBox UI element:

¡        TextView control called WelcomeText. (In this example, you must delete the DefaultTextView element using the context menu or drag and drop it into WelcomeGroupBox if they have identical names.)

¡        Image control called WelcomeImage

The various properties of a UI element can be edited in the Properties tab of the properties window in the View Designer.

       4.      Select the WelcomeText element in the outline window. Assign a static value to the individual properties in the Properties tab.

¡        text property: Welcome to Your First Web Dynpro Application

¡        design property: header1 (this entry is on the right of the dropdown list box after selecting  )

       5.      Assign the Welcome_View value to the text property of the WelcomeGroupBox_ Header [Caption] UI element.

       6.      Insert a picture by assigning its file name - in this example, clouds.png - as a value to the source property of the WelcomeImage UI element.

       7.      The picture file must be stored in the directory <WebDynproProjectFolder>/src/mimes/Components/<ComponentPackageName>. In this example, the location is C:/.../WebDynpro_Basics/src/mimes/ Components/com.sap.tc.webdynpro.tutorials.introduction.basics. This directory was automatically created when adding the Web Dynpro component FirstComponent.

The layout property of the Group control remains unchanged (FlowLayout). This means that all UI elements contained in it are displayed in one row and are only wrapped when the space of the corresponding container control is insufficient.

Result

You have developed the largest part of your first Web Dynpro application. However, the development process was purely declarative.

Further Procedure

       Now, that you have created and designed the WelcomeView view in the Web Dynpro component FirstComponent, you can include this view in the external visual representation of the Web Dynpro component, known as Window.

For further information on the UI element properties and methods that are available for the UI element interfaces, refer to UI Element Reference Guide.