Exercise # 3
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Exercise # 3 as PDF for free.
More details
- Words: 564
- Pages: 7
Exercise # 3: Objectives: Develop Web Dynpro Application with more than one view, implement data binding and context binding between different controllers. Tasks required to be performed for development:
1. Creation of package :
Refer exercise # 1 for creation of package.
2. Creation of Web Dynpro component with a window:
Refer previous exercises for creation of Web dynpro Component and window.
3. Creation of Web Dynpro views:
Refer previous exercises for creation of Web dynpro Views.
4. Creation of context and mapping:
In the context of the component controller, create a context node (FLIGHTINFO) based on dictionary type SFLIGHT and with cardinality 1...1 and two attributes from the structure components CARRID and CONNID. • Edit the component controller and choose the context tab page. • Open the context menu of the root context node and choose CreateNode. • Enter the node name, the name of dictionary type (Structure) and the cardinality. • Choose Add Attribute from Structure ‘Tick’ mark the structure components CARRID and CONNID, and choose ‘Tick’ mark.
• •
Create the same context node in each of the two views and map the view controller contexts to the component controller context. Edit one of the Web Dynpro Views and choose the context tab page.
•
Drag the context node FLIGHTINFO from the component controller context and drop it on the root node of the view controller context. Confirm that you want to copy and map the node.
•
Repeat this step for the second view.
5. Placing UI element on the view layout:
Right click on the Root UI Element Insert Element
Enter name as Connection_ID and type as InputField
In the ‘Text’ properties of the control, Enter the ‘ Description’. Repeat the above process for creating Carrier ID too. Now you realize that the carrier ID should be placed above the connection ID, • Right click on the Carrier_ID inputfield and choose ‘Up’ or • Select Connection_ID, right click and choose ‘Down’.
To the right of the value property of both the Input fields you find a button, which when clicked shows the context. Select the relevant attribute by which binding of the context with the UI element would be completed.
Repeat the same process for the output_view too, but uncheck the enabled property of both the fields.
6. Embed both views in the window:
Double click on the Window ‘MAIN_WINDOW’, to the right side, ‘MAIN_WINDOW’ appears. Right click on the ‘MAIN_WINDOW’ and click on ‘Embed view’. Select the ‘View to Be Embedded’ and ‘Component of View’ from the F4 provided. After the views are embedded, the navigation link is created between both the views. Once this is done, you will be able to find the links created as in the following snapshot.
7. Creation of Web Dynpro Application:
Refer to the previous exercises for the creation of Web Dynpro Application.
Save and execute the Web Dynpro Application by selecting the ‘Test’ option or ‘Execute Icon’ from the toolbar. The output on the first view:
The output on the next view when clicked on ‘Show Fight Info’ button from the initial page :
Congratulations!!!!! You have successfully developed Web Dynpro Application showing the passing of data from one view to the other.
1. Creation of package :
Refer exercise # 1 for creation of package.
2. Creation of Web Dynpro component with a window:
Refer previous exercises for creation of Web dynpro Component and window.
3. Creation of Web Dynpro views:
Refer previous exercises for creation of Web dynpro Views.
4. Creation of context and mapping:
In the context of the component controller, create a context node (FLIGHTINFO) based on dictionary type SFLIGHT and with cardinality 1...1 and two attributes from the structure components CARRID and CONNID. • Edit the component controller and choose the context tab page. • Open the context menu of the root context node and choose CreateNode. • Enter the node name, the name of dictionary type (Structure) and the cardinality. • Choose Add Attribute from Structure ‘Tick’ mark the structure components CARRID and CONNID, and choose ‘Tick’ mark.
• •
Create the same context node in each of the two views and map the view controller contexts to the component controller context. Edit one of the Web Dynpro Views and choose the context tab page.
•
Drag the context node FLIGHTINFO from the component controller context and drop it on the root node of the view controller context. Confirm that you want to copy and map the node.
•
Repeat this step for the second view.
5. Placing UI element on the view layout:
Right click on the Root UI Element Insert Element
Enter name as Connection_ID and type as InputField
In the ‘Text’ properties of the control, Enter the ‘ Description’. Repeat the above process for creating Carrier ID too. Now you realize that the carrier ID should be placed above the connection ID, • Right click on the Carrier_ID inputfield and choose ‘Up’ or • Select Connection_ID, right click and choose ‘Down’.
To the right of the value property of both the Input fields you find a button, which when clicked shows the context. Select the relevant attribute by which binding of the context with the UI element would be completed.
Repeat the same process for the output_view too, but uncheck the enabled property of both the fields.
6. Embed both views in the window:
Double click on the Window ‘MAIN_WINDOW’, to the right side, ‘MAIN_WINDOW’ appears. Right click on the ‘MAIN_WINDOW’ and click on ‘Embed view’. Select the ‘View to Be Embedded’ and ‘Component of View’ from the F4 provided. After the views are embedded, the navigation link is created between both the views. Once this is done, you will be able to find the links created as in the following snapshot.
7. Creation of Web Dynpro Application:
Refer to the previous exercises for the creation of Web Dynpro Application.
Save and execute the Web Dynpro Application by selecting the ‘Test’ option or ‘Execute Icon’ from the toolbar. The output on the first view:
The output on the next view when clicked on ‘Show Fight Info’ button from the initial page :
Congratulations!!!!! You have successfully developed Web Dynpro Application showing the passing of data from one view to the other.
Related Documents
Exercise 3
July 2020 6
Exercise 3
June 2020 11
Exercise 3
August 2019 17
Exercise 3
November 2019 21
Exercise # 3
June 2020 6