Defining Controller Contexts 

When defining a controller context, you must first specify, which data is variable in your Web Dynpro quiz application and therefore must be mapped to an appropriate representation in a corresponding controller context.

It is helpful to use the following three categories:

...

       1.      View-owned business data: This includes data that is only relevant within a single view. For example, the short text message that is displayed in the Welcome view and customized at the start and before the termination of the application.

       2.      View-owned layout data: Data that is used for customizing UI element layouts. For example, the value of the visibility property of a button UI element. In this way, the layout of UI elements can be controlled at runtime using data binding of UI element properties to value attributes in the view context.

       3.      Cross-view business data: If you want to make context data available for several controllers, you must define a corresponding data source by defining a value attribute in the controller context of the component. After defining a value attribute in the controller context of a view, this attribute can be mapped to the attribute in the controller context of the component, which turns the attribute into a data drain.

For example, the question-answer text pairs in the quiz example application must be stored in the controller context of the component, so they are available both in the Question view context and the Answer view context.

The context mapping between the controller context of a view and the controller context of a Web Dynpro component is only possible if a controller usage has previously defined in the view controller and this controller usage refers to the component controller.

Procedure

Defining a Controller Context of a View

The Web Dynpro tools provide the Context tab within the View Designer for defining the controller context of a view.

To add a new value node, you must open the context menu for the value node (in this case, the root node  Context) in which the attribute is to be added. You can then assign a name to the new value attribute by selecting New ® Value Attribute.

The properties of a selected value attribute are displayed in the Properties tab. Select string as the default data type.

...

       1.      Add the following value attributes as the top level attributes below the root node. How to set the data type of the value attributes to Visibility is described below.

View	Value Attribute Name	Data Type
Welcome	TextMessage	string
	ExitButtonVisibility	Visibility (com.sap.ide.webdynpro.uielementdefinitions)
Question	NextButtonVisibility	Visibility (com.sap.ide.webdynpro.uielementdefinitions)

 

Assigning a Simple Data Type as a Data Type to a Value Attribute

If the values that can fill a value attribute should be restricted to a set of constants, the data type Simple Data Type must be assigned to the type property of the value attribute.

For further information about the data type Simple Data Type, refer to Data Types.

For assigning the data type Simple Datatype Visibility to the two value attributes ExitButtonVisibility and NextButtonVisibility proceed as follows:

...

       1.      Open the dialog box for selecting a static data type Simple Data Type using   (in the value column for the property type).

       2.      Select the DDIC Simple Type radio button and open the node DtDictionary – com.sap.ide.webdynpro.uielementdefinitions. It contains all data types that refer to specific UI element properties.

                            a.     

       3.      Select the data type  Visibility and exit the dialog box by choosing Finish.

Without customizing the data type of the value attribute ExitButtonVisibility it is not possible to bind the visibility property of a UI element to this value attribute at a later time.

Defining Controller Contexts

The question-answer pairs to be displayed in the Question and Answer views must be stored in a superordinate controller context where they can be made available in the controller context of a view using context mapping. The component controller, which is available any time, is such a superordinate controller along with the custom controllers that must be defined by the application development itself. We recommend that, in the controller context of a Web Dynpro component, you define a context structure that is appropriate for a set of the question-answer text pairs. In this case, you do not need to create additional custom controllers.

At runtime, a collection of value node elements represents the set of available question-answer pairs. The type of these value node elements is defined at design time using the set of context elements that belongs to a value node (with the cardinality 0..n or 1 ..n). These context elements can be value attributes or value nodes, for example. The declarative structure of the controller context has the following appearance at design time:

·        QuizData: Value node with the cardinality 0..n

¡        Question: Value attribute of the type string for storing a question text

¡        Answer: Value attribute of the type string for storing an answer text

¡        Counter: Value attribute of the type string for storing a counter, such as "1 to 3"

At runtime, the QuizData value node has then a reference to the collection of node elements of the QuizData type each of them with the attributes question, answer, and counter.

The following diagram illustrates the relationships:

...

       1.      Select the Context tab of the component controller Quiz.

       2.      Add a new value node QuizData to the root node  Context using the context menu. You do not have to customize the properties of this value node.

       3.      Add three new value attributes below the value node QuizData (all of the type string), as described above:

¡        Question

¡        Answer

¡        Counter

Defining Context Mapping

In the controller context of the views Question and Answer, you can now define two data drains for the QuizData data source in the controller context of the Web Dynpro component Quiz.

The Web Dynpro tools provide the Data Modeler for the simple declaration of the context mapping.

Carry out the following steps in both controllers of the Question view and the Answer view.

 

...

       1.      In the context menu of the node WebDynpro_Quiz ® Web Dynpro ® Web Dynpro Components ® Quiz, select the entry  Open Data Modeler:

       2.      In the left toolbar, choose  Create a data link. This is then shaded in grey.

       3.      Place the cursor on the Question view and left-click. Drag the data link to the Component Controller and release the left mouse button. The dialog box for defining the context mapping appears.

       4.      Drag and drop the value node QuizData (in the context of the Quiz component controller) to the root node of the Question view context.

       5.      In the following dialog box, select the QuizData value node.

 

Since the value attributes  Answer in the controller context of the Question view, Counter, and Question in the controller context of the Answer view are not required, you can delete each of these value attributes using the context mapping definition.

 

       6.      The context mapping between the view controller and the component controller is graphically represented:

       7.      To complete the data link definition, choose Finish.

...

...

Context mapping requires the declaration of a controller usage (Required Controllers) – listed in the Properties perspectives view of a controller. This declaration is automatically created by the Data Modeler. In the example application, the controllers of the views Quiz and Answer use the component controller Quiz.java..

       1.       

Result

You have learned how to define the controller context of a view as an information storage and how to use the controller context of a Web Dynpro component to access shared data sources using context mapping. In the following section, individual variable UI element properties are bound to the data sources stored in the controller context of the view.

 In the next step, you can easily define data binding, which is a purely declarative approach to establish a connection between the user interface and different controller contexts.