Embedding a View Set in a ViewContainerUIElement 

In the simplest case, the ViewContainerUIElement only contains a single view. It is possible to embed additional view sets; this special container UI element thus provides you with an additional flexible means of modeling view compositions.

In this step, you embed an inner view set in the ViewContainerUIElement AViewContainerUIElement. To be more exact, you enhance the existing view composition by adding those view assemblies that are modeled in the contained view set.

The initial project template already contains the two views LeftView and RightView for embedding in the inner view set.

Procedure

Embedding an Inner View Set

...

       1.      Open the Navigation Modeler for the window.

       2.      In the toolbar, choose  Create a viewset.

       3.      Use the mouse pointer to bind a new view set called ContainedViewSet of type GridLayout into the ViewContainerUIElement AViewContainerUIElement.

       4.      In the Web Dynpro Explorer, choose the ContainedViewSet node.

       5.      Switch to the Properties perspective view and enter the value 1 for the rows property.

       6.      Enter the value 50% for both properties cellWidth[1,1] and cellHeight[1,2].

       7.      In the Navigation Modeler, adjust the position and size of the new view set.

Embedding Views in the Inner View Set

You can now enhance the view set that is contained in the ViewContainerUIElement by adding a view composition.

       8.      In the Navigation Modeler toolbar, choose  Embed a view.

       9.      Embed the LeftView view in the ContainedViewSet – cell[1,1] view area.

   10.      Embed an EmptyView in the ContainedViewSet – cell[1,2] view area.

   11.      Embed the RightView view in the ContainedViewSet – cell[1,2] view area.

Defining Navigation Links

   12.      To finish, you complete the modeling of this view composition by declaring two navigation links. The project template already contains the corresponding inbound and outbound plugs for the LeftView and RightView views.

   13.      In the Navigation Modeler, declare the following navigation links. If necessary, enlarge the symbol of the LeftView view until both outbound plugs are visible.

Navigation Links
Start View	Outbound Plug	Target View	Inbound Plug
LeftView	ShowRightOut	RightView	NavigateToRightIn
LeftView	ShowEmptyViewOut	EmptyView	ShowEmptyView

Starting the Application in a Browser

Once you reach this stage, you can start the example application in the Web browser and look at the status of your development.

   14.      Choose the node TutWD_ViewComposition_Init à Web Dynpro à Web Dynpro Applications à ViewCompostionApp.

   15.      In the context menu, choose Deploy new archive and run.

Result

The view assembly comprising the two views LeftView and RightView that is embedded in the ViewContainerUIElement in the ContainerView view is displayed in the browser window.

Next Step:

More information about Using the ViewContainerUIElement.