Online Help for the ADF JavaBean Sample Application

What does this sample show?

The goal of this sample application is to demonstrate how to use ADF databindings with Java classes and Java Beans.

Why is this important?

The sample shows that ADF databindings can work with plain JavaBeans and Java Classes.

Key Points

ADF Databinding with plain Java Classes
Master-Detail coordination for bean collections
Create,update,delete operations on master and detail collections
Usage of Navigation List
Usage of chained events
Refreshing the collection

How was the Data Control for hrFacade built ?

Select hrFacade.java in Model project
Right mouse and select Create Data Control
View | Data Control Palette
Select hrFacade.xml in Model project
Select deptsCollection in structure pane
In the property inspector set the bean class value as model.beanDept
Select beanDept.xml in Model project
Select empsCollection in structure pane
In the property inspector set the bean class value as model.beanEmp

Note:- hrFacade.java, beanDept.java and beanEmp.java are custom created Java classes

How was showBeanData page built ?

This page shows you a master-detail coordination with the data coming from collections in Java Classes. After creating a datacontrol for hrFacade class in the model project. View project was created with Struts as one of the technology scopes.

Double-click on struts-config.xml in View project
View | Component Palette
Drag-n-Drop a Data Page on to the page flow diagram and rename it as showBeanData
Double-click on showBeanData in page flow diagram to create showBeanData.jsp page
Select deptsCollection in Data Control Palette, choose Read-Only Form from Drag and Drop As list.
Drag-n-Drop deptsCollection on to showBeanData JSP page
Select deptsCollection in Data Control Palette, choose Navigation Buttons from Drag and Drop As list.
Drag-n-Drop deptsCollection on to showBeanData JSP page. (In the same HTML form which was created in early step)
Select empsCollection in Data Control Palette, choose Read Only Table from Drag and Drop As list.
Drag-n-Drop empsCollection on to showBeanData JSP page. (Below the HTML form which has deptsCollection)

How was this UpdateDept page built?

Flow : In the showBeanData JSP page, user will click on Update link in the Departments table, which will bring updateDept JSP page. UpdateDept JSP page has an input form for the Departments information, with the current selected department information in it. User can update the Department name and click the submit button. Clicking on the submit button will refresh the deptsCollection and bring back the user to showBeanData JSP page where he can see the updated values.

Open showBeanData JSP page in JSP Visual Editor
Add 3 additional columns into Departments table, so that you can have links to Create,Update and Delete operations.
Select setCurrentRowWithKey(String) node [deptsCollection ->Operations] in Data Control Palette, choose Find Row Link option from Drag and Drop As list
Drag-n-Drop setCurrentRowWithKey(String) into one of the newly created columns in Departments table
Select the newly created link in JSP editor, right mouse and select Edit Tag.
Change the Text to Update
Change the Arg0 value as follows in the URL
Arg0= c:out value='${bindings.deptNo.rowKeyStr}' />
At the end of the URL append &event=updatedepartment

What did we do ?

When the user clicks on the update link, setCurrentRowWithKey operation helps to get the current/selected row by doing a post back to the same showBeanData Data Page. By adding a new event into URL, showBeanData action will forward to next Data Action which has forward name updatedepartment from showBeanData.

Open page flow diagram
View | Component Palette
Drag-n-Drop a Data Page on to the page flow diagram and rename it as updateDept
Double-click on updateDept in page flow diagram to create updateDept.jsp page
Select deptsCollection in Data Control Palette, choose Input Form from Drag and Drop As list.
Drag-n-Drop deptsCollection on to updateDept JSP page
Delete the submit button created in the Input Form
Select editDept(String,String) operation [hrFacadeDataControl -> Operations] in Data Control Palette, choose Button from Drag and Drop As Listn
Drag-n-Drop editDept operation on to updateDept JSP page (Into the input form)
Set DeptId text field as readonly.
In the component palette, select Forward, click on showBeanData Data page and drag the mouse to updateDept, and click on updateDept Data Page. This will create a forward between showBeanData and updateDept Data pages. Rename the forward as updatedepartment

What did we do so far ?

We created a new Data Page with Departments Input Form.

Open page flow diagram
View | Component Palette
Select editDept(String,String) operation [hrFacadeDataControl -> Operations] in Data Control Palette, choose Method from Drag and Drop As Listd
Drag-n-Drop editDept operation on to updateDept Data page
Select updateDept Data Page in page flow diagram
In Structure Pane select paramNames[0] under /updateDept. Change the value of parameter in Property Inspector as ${param.deptNo}
Similarly change the value of paramNames[1] as ${param.deptName}

What did we do so far ?

We dropped the editDept business method on the Data Page, so that it will get invoked when the user hits the submit button. By modifying the values of the parameters, we are going to the values submitted in the page via the HttpServletRequest.

Open page flow diagram
View | Component Palette
Drag-n-Drop a Data Action on to the page flow diagram and rename it as refreshDept
Select Execute node [deptsCollection ->Operations] in Data Control Palette, choose Method option from Drag and Drop As listd
Drag-n-Drop Execute operation onto the refreshDept Data Actiont
In the component palette, select Forward, click on updateDept Data page and drag the mouse to refreshDept, and click on refershDept Data Action. This will create a forward between updateDept and refreshDept. Rename the forward as editDept
In the component palette, select Forward, click on refreshDept Data Action and drag the mouse to showBeanData and click on showBeanData Data page This will create a forward between refreshDept and showBeanData.

What did we do so far ?

We created a new Data Action and dropped execute operation, so that the departments collection can be refreshed with the new values. After the refresh, user is taken back to the Master- Detail page, where he can see the updated values by navigating to that bean record.

Open page flow diagram
Select updateDept Data page, right mouse and select Go To Code
Change the package name to view.actions.
Override invokeCustomMethod() [Tools | Override Methods]
protected void invokeCustomMethod(DataActionContext actionContext) {
// invoke the custom method only if the user hits the editDept
// submit button in updateDept.jsp page
if (actionContext.getHttpServletRequest().getParameter("event_editDept")!=null)
{
super.invokeCustomMethod(actionContext);
}

What did we do?

By adding the above code, we are making sure that the business method gets triggered when the user hits the submit button in updateDept JSP page.

How was DeleteDept page built ?

Open page flow diagram
View | Component Palette
Drag-n-Drop a Data Action on to the page flow diagram and rename it as deleteDept
Select deleteDept(String) operation [hrFacadeDataControl -> Operations] in Data Control Palette, choose Method from Drag and Drop As List
Drag-n-Drop deleteDept operation onto the delete e Dept Data Action
Select deleteDept Data Page in page flow diagram, In Structure Pane select paramNames[0[ under /deleteDept. Change the value of parameter in Property Inspector as ${data.showBeanDataUIModel.deptNo}
Note: You can click ... button in Property Inspector and select the value from the dialog box.
In the component palette, select Forward, click on deleteDept Data Action and drag the mouse to refreshDept, and click on refreshDept, Data Action This will create a forward between deleteDept and refreshDept.

What did we do?

We created a DataAction, that will call the deleteDept business method, after the business method is invoked, deptsCollection is refreshed and the user is taken back to showBeanData JSP page.

Open showBeanData JSP page in visual JSP editor
In the column next to Update link, create a link which will invoke the deleteDept data action.
Source for the Link : <a href="deleteDept.do">Delete</a>

How was CreateDept page built ?

Open page flow diagram
View | Component Palette
Drag-n-Drop a Data Page on to the page flow diagram and rename it as createDept
Double-click on createDept in page flow diagram to create jsp createDept.jsp page
Customize the JSP in visual editor, so that user can input dept number and name and hit a submit button.
For the submit button,
add a name property whose value is event_createDept
<input type="submit" name="event_createDept" value="Create"/>
Select addDept(String,String) operation [hrFacadeDataControl -> Operations] in Data Control Palette, choose Method from Drag and Drop As List
Drag-n-Drop addDept operation onto the createDept Data page
In Structure Pane select paramNames[0] under /createDept. Change the value of parameter in Property Inspector as ${param.deptNo}
Similarly change the value of paramNames[1] as ${param.deptName}
Note : deptNo and deptName are [property names of text fields in the JSP page
In the component palette, select Forward, click on createDept Data Page and drag the mouse to refreshDept, and click on refreshDept, Data Action This will create a forward between createDept and refreshDept. Rename the forward as createDept.

What did we do?

We created a Data Page which will invoke the business method to create a new department in the collection. Once the business method is invoked, collection is refreshed and user is taken back the showBeanData screen.

How was this UpdateEmp page built?

Flow : In the showBeanData JSP page, user will click on Update link in the Employees table, which will bring updateEmp JSP page. UpdateEmp JSP page has an input form for the Departments information, with the current selected employee information in it. User can update the employee name and click the submit button. Clicking on the submit button will refresh the Collection and bring back the user to showBeanData JSP page where he can see the updated values.

Open showBeanData JSP page in JSP Visual Editor
Add 3 additional columns into Employees table, so that you can have links to Create,Update and Delete operations on each row of employee.
Select setCurrentRowWithKey(String) node [deptsCollection ->empsCollection -> Operations] in Data Control Palette, choose Find Row Link option from Drag and Drop As list
Drag-n-Drop setCurrentRowWithKey(String) into one of the newly created columns in Employees table
Select the newly created link in JSP editor, right mouse and select Edit Tag.
Change the Text to Update
At the end of the URL append &event=updateemployee
Select showBeanDataUIModel.xml in the view project
In the structure pane, select setCurrentRowWithKey1, update the Id value in Property Inspector to setCurrentRowWithKeyForEmp

What did we do ?

View | Component Palette
Drag-n-Drop a Data Page on to the page flow diagram and rename it as updateEmp
Double-click on updateEmp in page flow diagram to create updateEmp.jsp page
Select editEmp(String,String) operation [hrFacadeDataControl -> Operations] in Data Control Palette, choose Button with Form from Drag and Drop As List
Drag-n-Drop editEmp operation on to updateEmp JSP page
Customize the JSP page in visual editor. In the HTML form created add a table which can have input or selection fields for Employee Number , Name and Department Number.
Select deptsCollectionNavigation List from Drag and Drop As list.
Drag-n-Drop dept sCollection on to updateEmp JSP page. [Within the HTML Form created above]
Create two text boxes which can be used by user to input the values of employee number and name.
Set DeptId and EmpId text field as readonly.
In the component palette, select Forward, click on showBeanData Data page and drag the mouse to updateEmp, and click on updateEmp Data Page. This will create a forward between showBeanData and updateEmp Data pages. Rename the forward as updateemployee

What did we do so far ?

We created a new Data Page with mployeesInput Form.

Open page flow diagram
View | Component Palette
Select editEmp(String,String) operation [hrFacadeDataControl -> Operations] in Data Control Palette, choose Method from Drag and Drop As List
Drag-n-Drop editDept operation on to updateEmp Data page
Select updateEmp Data Page in page flow diagram
In Structure Pane select paramNames[0] under /updateDept. Change the value of parameter in Property Inspector as ${param.empId}
Similarly change the value of paramNames[1] as ${param.empName}

What did we do so far ?

We dropped the editEmp business method on the Data Page, so that it will get invoked when the user hits the submit button. By modifying the values of the parameters, we are going to get the values submitted in the page via the HttpServletRequest.

Open page flow diagram
View | Component Palette
Drag-n-Drop a Data Action on to the page flow diagram and rename it as refreshEmp
Select Execute node [deptsCollection ->empsCollection->Operations] in Data Control Palette, choose Method option from Drag and Drop As list
Drag-n-Drop Execute operation onto the refreshEmp Data Action
In the component palette, select Forward, click on updateEmp Data page and drag the mouse to refreshEmp, and click on refershEmp Data Action. This will create a forward between updateEmp and refreshEmp. Rename the forward as editEmp
In the component palette, select Forward, click on refreshEmp Data Action and drag the mouse to showBeanData and click on showBeanData Data page This will create a forward between refreshEmp and showBeanData.

What did we do so far ?

How was deleteEmp page built ?

Open showBeanData JSP page in JSP Visual Editor
Select setCurrentRowWithKey(String) node [deptsCollection ->empsCollection -> Operations] in Data Control Palette, choose Find Row Link option from Drag and Drop As list
Drag-n-Drop setCurrentRowWithKey(String) into one of the empty columns in Employees table
Select the newly created link in JSP editor, right mouse and select Edit Tag.
Change the Text to Delete
At the end of the URL append &event=deleteemployee&deptId=<c:out value="${Row['deptNo']}"/>&empId=<c:out value="${Row['empId']}"/>

What did we do ?

When the user clicks on the delete link, setCurrentRowWithKey operation helps to get the current/selected row by doing a post back to the same showBeanData Data Page. By adding a new event into URL, showBeanData action will forward to next Data Action which has forward name deleteemployee from showBeanData.

Open page flow diagram
View | Component Palette
Drag-n-Drop a Data Action on to the page flow diagram and rename it as deleteEmp
Select deleteEmp(String,String) operation [hrFacadeDataControl -> Operations] in Data Control Palette, choose Method from Drag and Drop As List
Drag-n-Drop deleteEmp operation onto the delete Emp Data Action
Select deleteEmp Data Page in page flow diagram, In Structure Pane select paramNames[0[ under /deleteEmp.
Change the value of parameter in Property Inspector as ${param.deptId}.
Similarly set the value of paramNames[1] as ${param.empId}
In the component palette, select Forward, click on showBeanData Data Page and drag the mouse to seleteEmphowBeanData, and click on deleteEmp showBeanData Data Action. This will create a forward between showBeanData and deleteEmp. Rename the forward as deleteemployee
In the component palette, select Forward, click on deleteEmp Data Action and drag the mouse to refreshEmp, and click on refreshEmp, Data Action This will create a forward between deleteEmp and refreshEmp.

What did we do?

We created a DataAction, that will call the deleteEmp business method, after the business method is invoked, deptsCollection is refreshed and the user is taken back to showBeanData JSP page.

How was createemp page built ?

Select setCurrentRowWithKey(String) node [deptsCollection ->empsCollection -> Operations] in Data Control Palette, choose Find Row Link option from Drag and Drop As list
Drag-n-Drop setCurrentRowWithKey(String) into one of the empty columns in Employees table
Select the newly created link in JSP editor, right mouse and select Edit Tag.
Change the Text to Delete
At the end of the URL append &event=createemployee

What did we do ?

View | Component Palette
Drag-n-Drop a Data Page on to the page flow diagram and rename it as createEmp
Double-click on createEmp in page flow diagram to create createEmp.jsp page
Select addEmp(String,String,String) operation [hrFacadeDataControl -> Operations] in Data Control Palette, choose Button with Form from Drag and Drop As List
Drag-n-Drop addEmp operation on to createEmp JSP page
Customize the JSP page in visual editor. In the HTML form created add a table which can have input or selection fields for Employee Number , Name and Department Number.
Select deptsCollection in Data Control Palette, choose Navigation List from Drag and Drop As list.
Drag-n-Drop dept sCollection on to createEmp JSP page. [Within the HTML Form created above]
Create two text boxes which can be used by user to input the values of employee number and name.

What did we do ?

We created a JSP page, where in the user can select the department number from a drop down list box, enter employee number and name and hit the submit button.

Open page flow diagram
Select addEmpept(String,Str,Stringing) operation [hrFacadeDataControl -> Operations] in Data Control Palette, choose Method from Drag and Drop As List
Drag-n-Drop addEmp operation onto createEmp Data Page
In the Component Palette, click on showBeanData Data page and drag the mouse to createEmp, and click on createEmp Data Page. This will create a forward between showBeanData and createEmp Data pages. Rename the forward as createemployee
In the component palette, select Forward, click on createEmp Data Page and drag the mouse to refreshEmp, and click on refreshEmp, Data Action This will create a forward between createEmp and refreshEmp.Rename the forward as addEmp.

What did we do ?

We created the forwards between showBeanData and createEmp Data pages and dropped the business method on createEmp data page, so that it gets invoked when the user hits submit button in createEmp JSP page.

Open page flow diagram
Select createEmp Data page, right mouse and select Go To Code
Change the package name to view.actions.
add a method onAddEmp

/* * Get the index value for the selected deptno in the list
* find the control binding and get the actual deptno based on the index
* Get the values of empid and empname from httpservletrequest
* Create an arraylist and add all the parameters to the arraylist
* call the custom method
*/
public void onAddEmp(DataActionContext ctx)
{
int selIndex = new Long(ctx.getHttpServletRequest().getParameter("deptsCollection")).intValue(); JUCtrlListBinding dc = (JUCtrlListBinding)ctx.getBindingContainer().findCtrlBinding("deptsCollection"); Object newDeptno = dc.getValueFromList(selIndex).toString();
String deptno = newDeptno.toString();
String empid = ctx.getHttpServletRequest().getParameter("empId");
String ename = ctx.getHttpServletRequest().getParameter("empName");
ArrayList al = new ArrayList();
al.add(deptno);
al.add(empid);
al.add(ename);
ctx.getEventActionBinding().setParams(al);
ctx.getEventActionBinding().doIt();
}

What did we do?

With the above code, we are getting the index value for the department number selected by the user in createEmp JSP page, finding the actual department number along with employee number and name. Once the information is captured the parameters are added to an arraylist and custom business method is invoked.