Implementing the View Composition 

Use

By defining the view composition, you specify all view assemblies of a Web Dynpro application that can be accessed at runtime by navigation. The view composition of this example application looks like this:

Prerequisites

You have created an empty Web Dynpro project that you want to use for implementing the view composition. You are in the Web Dynpro Explorer of the SAP NetWeaver Developer Studio.

You can graphically trace the development process in the Navigation Modeler. Open the Navigation Modeler by choosing Edit in the context menu of your Web Dynpro window Quiz.

You can also use the following procedure, which is graphically supported in the Navigation Modeler.

Procedure

The view composition is implemented by the visual insertion of the following parts:

·        T-Layout view set in the window of the Web Dynpro component

·        Views: Welcome, Question, QuestionMark, and Answer

·        Two empty views

·        Inbound plugs and outbound plugs

·        Exit plug for terminating a Web Dynpro application

·        Navigation links for defining view assembly changes

Integrating a View Set in a Web Dynpro Window

When you created the new Web Dynpro component Quiz, the system generated a corresponding window with the same name. You now insert a view set as a container for individual views in this window.

       1.      Double-click the node of the Web Dynpro window Quiz in the Web Dynpro Explorer to start the Navigation Modeler. It then appears in the view Diagram View.

       2.      In the left toolbar, choose  Create Viewset.

       3.      Place the cursor anywhere on the user interface of the Diagram View and right-click. The icon  is added to the cursor.

       4.      Enter a name for the new view set – for example, QuizViewSet.

       5.      Choose TLayout as ViewSetDefinition and chooseFinish.

       6.      In the Web Dynpro Explorer, select the node WebDynpro ® Web Dynpro Components ® Quiz ® Windows ® Quiz ® QuizViewSet.

       7.      Assign the value 50% to the view set QuizViewSet under Properties of the property VerticalSashPosition.

Along with the graphical representation of the Navigation Modeler, the new view set QuizViewSet is displayed together with the three view areas Left, Right, and Top below the Quiz window node in the Web Dynpro Explorer.

Embedding Views in View Areas

Embed four new views and two empty views in the existing view areas. Use the following views for the procedure described below:

View Area	View Name	Properties - default
Top	Welcome	true
Left	Question	false
Left	No entry (= empty view)	true
Right	Answer	false
Right	QuestionMark	false
Right	No entry (= empty view)	true

 

...

       1.      In the toolbar of the Navigation Modeler, select the icon  Embed View.

       2.      Place the cursor on the view area in which the new view is to be embedded and and left-click the area.

       3.      Choose Embed new View and enter a descriptive view name for it. If you want to create an empty view, choose Embed empty View.

       4.      In the Web Dynpro Explorer, select the newly added view – for example, WebDynpro ® Web Dynpro Components ® Quiz ® Windows ® Quiz ® QuizViewSet ® Left ® Question. Display the corresponding Properties view.

       5.      Assign the appropriate entry according to the table above to the view property default. This specifies which view within the view area is displayed in the first view assembly.

The newly created views are displayed under the corresponding view area nodes. The views that you have not declared as empty views, also appear under the view node.

Adding Inbound Plugs to Views

You must add inbound plugs and/or outbound plugs to the individual views before you can define the navigation structure. An inbound plug is automatically generated for newly created empty views. Use the following views for the procedure described below:

View Name	Inbound Plug (Name)	Outbound Plug (Name)
Welcome	EndQuizIn	StartQuizOut
Question	ShowQuestionIn	ShowAnswerOut ShowQuestionMarkOut
QuestionMark	ShowQuestionMarkIn
Answer	ShowAnswerIn	EndQuizOut

 

...

       1.      Choose  Create Inbound Plug or  Create Outbound Plug in the context menu of the view node  to which you want to assign the new plug. You can also define inbound plugs and outbound plugs in the Navigation Modeler.

Defining the Exit Plug in the Component Interface View

You must add an exit plug with a URL parameter to the interface view QuizInterfaceView of the Web Dynpro component Quiz to exit the application and navigate to an external Web page such aswww.sap.com . The Quiz component should be seen as an external visual representation of a window (internal visual representation of a Web Dynpro component).

...

       1.      Open the node WebDynpro ® Web Dynpro Components ® Quiz ® Component Interface ® Interface Views in the overview tree of your project. Double-click the interface view QuizInterfaceView.

       2.      Select the Plugs tab in the Plugs area.

       3.      Choose New next to the outbound plug table. Enter a descriptive name for the new outbound plug, for example, GotoUrl, and choose Exit Plug.

       4.      Select the new outbound plug GotoUrl and choose New next to the parameter table. Enter the name Url (the correct spelling is important) for the new parameter and choose string as the type.

Defining Navigation Links

You define the navigation links to uniquely specify the view composition within the quiz window. You always define a navigation link that starts from the outbound plug of the start view and points to the inbound plug of the target view. Create the following navigation links using the procedure described below:

Start View	Outbound Plug	Target View	Inbound Plug
Welcome	StartQuizOut	QuestionMark	ShowQuestionMarkIn
		Question	ShowQuestionIn
Question	ShowQuestionMarkOut	QuestionMark	ShowQuestionMarkIn
	ShowAnswerOut	Answer	ShowAnswerIn
Answer	EndQuizOut	Welcome	EndQuizIn
		EmptyView (view area left)	ShowEmptyView
		EmptyView (view area right)	ShowEmptyView

 

...

Multiple navigation links can originate from one individual outbound plug.

The individual navigation links do not have names. The navigation is programmatically started when an outbound plug is triggered and the assigned navigation links are executed. For further information, refer to Defining Action Events and Establishing Navigation Changes.

       1.      Choose  Create Navigation Link in the context menu of the outbound plug of the start view.

A list is displayed containing all possible target views and the inbound plugs contained in them. The view area in which the target view is contained is displayed in brackets next to the target view.

       2.      Select the target view and the corresponding inbound plug.

Result

You have implemented the view composition of the quiz application and can now continue with the detailed design of the different view layouts.

      . Design the layouts of the views Welcome, Question, QuestionMark, and Answer.