Creating and Designing a View

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

   Note

   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.

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.

   

   Note

   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.

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

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 the descriptions of the individual elements.