Defining a View Composition 

View Composition Without Navigation

Assign the four views Welcome, Question, QuestionMark, and Answer to the three view areas.

At design time, you can model the state of a view area that is empty at runtime using specific empty views. These empty views do not contain UI elements, but can be used for defining the view composition.

At runtime, only one view can be displayed within a view area. The default view, which is initially displayed, is the Welcome view in the view area top and the default view for the remaining two view areas is the empty view.

The assignment of views and empty views to the three view areas top, left, and right specifies all possible view assemblies – that is, the possible combinations of views that can be displayed in the window at the same time. In this example, the following view assembly is the default view assembly:

View area top: Welcome, View area left: Empty view, View area right: Empty view

By specifying the possible views in a view area, you determine in this example that there is a maximum of six different view assemblies at runtime.

View Composition with Navigation

The view composition comprises all view assemblies that can be accessed by navigation. The change from one view assembly to another is established by specifying one or more navigation links.

A navigation link is the association between an outbound plug belonging to view A and an inbound plug of the target view B. You can assign multiple navigation links to one individual outbound plug. An outbound plug defines an event that can trigger a change of one view assembly to another. An inbound plug defines the starting point of a view for any number of navigation links and can be considered an onLoad event or an onDisplay event. You can use the corresponding event handling methods in the view controller to make state changes in the content of a view.

The following graphic illustrates the desired view composition:

The Welcome view is associated with the Question view and QuestionMark view. The Question view is associated with the Answer view and QuestionMark view, whereas the Answer view is associated with the Welcome view and the two empty views.

This view composition enables you to access three of the six possible view assemblies using navigation links.

View Area Top	View Area Left	View Area Right
Welcome	Empty view	Empty view
Welcome	Question	QuestionMark
Welcome	Question	Answer

 

However, the following three view assemblies cannot be accessed:

View Area Top	View Area Left	View Area Right
Welcome	Empty view	QuestionMark
Welcome	Empty view	Answer
Welcome	Question	Empty view

 

The following graphics illustrate the state changes between the view assemblies at runtime. These changes are defined by the navigation links between the outbound plug and the inbound plug.

A Web Dynpro application terminates when, in a view, the user triggers an outbound plug that is specified as an exit plug. The navigation link of this exit plug does not have a target view. In this example, the exit plug contains the address of an internet page (for example, www.sap.com), which is called after the Web Dynpro application terminates.

The change from the first to the second view assembly is established by triggering the startQuizOut outbound plug of the Welcome view. This view contains two navigation links to the views Questions and QuestionMark. Before the target views Question and QuestionMark are displayed, the event handling routines of the inbound plugs displayQuestion and displayQuestionMark are executed.

   This conceptual introduction has prepared you for the actual visual development of the view composition in the SAP NetWeaver Developer Studio.