adf learning 3 - navigating to detail page

5
In this example we are using tow pages. First page EmpList.jspx will display the summarized employee data and EmpDeptDetails.jspx will display the detailed employee data corresponding to the selected employee in the EmpList.jspx page. 1) Create an View Object with Name EmpViewObj with following query(Same has been created in lesson 2) :- SELECT first_name,last_name,email,phone_number,salary FROM employees And add the above created View object to the Application module. 2) Create a jspx page with name EmpList.jspx(Refer to Lesson 2 for details). 3) For the View Employee Details button on the EmpList page set the action property to empDetails. 4) Create a jspx page with name EmpDetails.jspx. 5) Set the navigation link from the EmpList.jspx page to EmpDetails.jspx page in the faces-config.xml file.

Upload: vikram-kohli

Post on 12-Nov-2014

3.643 views

Category:

Documents


0 download

DESCRIPTION

In this example we are using tow pages. First page EmpList.jspx will display the summarized employee data and EmpDeptDetails.jspx will display the detailed employee data corresponding to the selected employee in the EmpList.jspx page.

TRANSCRIPT

Page 1: ADF Learning 3 - Navigating to detail page

In this example we are using tow pages. First page EmpList.jspx will display the summarized employee data and EmpDeptDetails.jspx will display the detailed employee data corresponding to the selected employee in the EmpList.jspx page.

1) Create an View Object with Name EmpViewObj with following query(Same has been created in lesson 2) :-

SELECT first_name,last_name,email,phone_number,salary FROM employees

And add the above created View object to the Application module.

2) Create a jspx page with name EmpList.jspx(Refer to Lesson 2 for details).3) For the View Employee Details button on the EmpList page set the action

property to empDetails.4) Create a jspx page with name EmpDetails.jspx.5) Set the navigation link from the EmpList.jspx page to EmpDetails.jspx page in the

faces-config.xml file.

Page 2: ADF Learning 3 - Navigating to detail page

6) In the EmpDetails.jspx add a panelPage layout.

7) Select the EmpViewObj from the data control and drop it on the panelPage. And from the popped up menu select FormADF Read only form.

Page 3: ADF Learning 3 - Navigating to detail page

Edit From field window will popup. Click ok on this window.

8) Now right click inside the EmpDetails.jspx page and select go to page definition option.

9) In the Structure pane, right-click the bindings node, and select Insert inside bindings >action.

10) An action Binding Editor is invoked. Expand the AppModuleDataControl and select EmpViewObj node.

11) In the Select an Action drop-down list, scroll down and select setCurrentRowWithKey. In the Parameters area, set the Value property to #{requestScope.requestRowKey}. This is the EL expression to reference an attribute named requestRowKey on the request scope that we will set in the calling page EmpList.jspx. And click Ok.Now that you have a binding for the current row, add an executable to invoke the action binding you just created. This executable will set the current row key automatically as part of the page rendering.

12) In the Structure pane, expand the executables node, then right-click the EmpViewObj Iterator node, and select Insert before EmpViewObj Iterator > invokeAction.

13) In the Insert invokeAction dialog, set the ID to setRequestToView and Binds to the setCurrentRowWithKey action binding you just created.

14) In the Advanced Properties tab, set the Refresh property to prepareModel and the RefreshCondition to #{adfFacesContext.postback == false}. The Refresh property controls when the invokeAction executes during the processing of the page. The prepareModel setting indicates that you want it to be invoked during the "prepare model" phase when ADF is preparing the data to display.

Page 4: ADF Learning 3 - Navigating to detail page

15) In the application navigator, double-click the EmpList page to view it in the visual editor. Right-click the view button, and from the context menu select Insert inside CommandButton > ADF Faces Core > SetActionListener.

16) In the SetActionListener properties window Set the From property to #{row.rowKeyStr} and the To property to #{requestScope.requestRowKey} The #{row.rowKeyStr} expression represents the key of the current row in the table.

17) Now run the EmpList page. And select the particular employee and click on the View Employee Details button to see details about employee in the EmpDetails page.

Page 5: ADF Learning 3 - Navigating to detail page