# 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 ?

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 updateemployee from showBeanData.

- 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 ?

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.

### 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 ?

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.

- 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.