binding,context mapping,navigation exercise

1 Data Binding, Context Mapping & Navigation

Exercise

Data Binding, Context Mapping & Navigation Exercise

Chapter: Context at Design Time Theme: Binding UI elements to the view context,

mapping view context nodes to the component controller context and create navigation between two views

At the end of this Exercise, you will be able to:

• Create a node and child attributes in a context

• Map a view context node to component controller’s context

• Bind UI elements to the view context

• Create navigation between two views

1 Development Objectives This exercise has the following objectives:

- Make the data stored in the context of the component controller available to view controllers.

- Create some UI elements on the view layout that can display the data in the context of the view controller.

- Create navigation between two views.

The context of the component controller will act as the data source. Then using context mapping, the data will be shared with two view controllers. Once the data is available to the context of the view controller, UI elements can be added to the view layout. These UI elements will then be bound to the context of the view controller. At last the navigation from one view to the other one will be enabled.


Exercise

2 Result

In this exercise, you will create a new component with two views. You will add two input fields and a push button on the first view. On the second view you will create only display fields for displaying your input from the first view. You also will have to create the navigation between these two views.

Template Solution: Web Dynpro Component: WD_03S_SIMPLE_APPLICATION Application: WD_03S_SIMPLE_APPLICATION Group number: ## stands for the two-digit group number 3 Developing

3-1 Create Component Create a new Web Dynpro Component called ZWD_##_SIMPLE_APPLICATION. Change the proposed window name to MAIN.

3-2 Build Context in the component controller

Locate the Component Controller node in the project structure that is located immediately under the component. Double click on Component Controller to open the Custom Controller editor. - Add a new node to the Custom Controller Context, having the name FlightInfo.


Exercise

- On the popup enter sflight in the field Dictionary structure and press Add Attribute from structure.

- Choose fields carrid and connid and press Continue. - Change property Input Help Mode of the attributes carrid and connid

to automatisch. This setting will provide both input fields on the Input_View (will be created next) with a F4 help for value selection.

3-3 Create Input_View 3-3-1 Create a view called Input_View and navigate to the context tab. Use drag

& drop to copy and map the node FlightInfo from the context of the Component Controller to the context of the View Controller. The two attributes carrid and connid are automatically created.

3-3-2 Navigate to the view’s Layout tab. Change the property Layout of the ROOTUIELEMENTCONTAINER to MatrixLayout.

Create a group with the name Group_1. Change the Layout property to MatrixLayout and the LayoutData property to MatrixHeadData. Change the property Text of the element Caption_1 to Please fill in values!

Right mouse click on Group_1 and choose Container-Formular erzeugen (Create container form) from the context menu. Choose context node FlightInfo and press Confirm entry.

The two Labels and Inputfields for the context attributes carrid and connid have been created.

Change the property LayoutData of Connid_Label_1 to MatrixHeadData. 3-4 Create Output_View 3-4-1 Make a copy of view Input_View and name it Output_View. Adjust the

Description on the properties tab to Output View. 3-4-2 Change the text of Caption_1 to Your input was…. 3-4-3 Enable property readOnly for both input fields. 3-5 Create Navigation from Input_View to Output_View 3-5-1 Navigate to the tab Inbound Plugs on the Output_View and create a

Inbound Plug named to_output_view. 3-5-2 Navigate to the tab Outbound Plugs on the Intput_View and create a

Outbound Plug named from_input_view. 3-5-3 Go to the Main window (on the window tab) and embed the two views

Input_View and Output_View. Set Input_View as default. Expand the node of embedded view Input_View, right mouse click on the

outbound plug and choose Create Navigation Link from the context menu. Choose Destination View OUTPUT_VIEW via F4 help and press Continue.


Exercise

As a result a new node with a chain symbol appears under the outbound plug.

3-5-4 Create a button element named Go_Button under Group_1 of the view Input_View. Insert Go! for property Text. Create action Go for the button. Enter a description and choose outbound plug From_Input_View. Press Continue.

3-6 Create Web Dynpro Application Right mouse click on the component node and select Create -> Web

Dynpro Anwendung (Web Dynpro Application) from the context menu. Create the application having the following attributes: Name: (accept default) Description: Simple Web Dynpro Application Accept all default settings and press Save and run your application.

binding,context mapping,navigation exercise

Documents