Tuesday, June 8, 2010

In this blog what I am trying to implement is communication between two ADF pages. Here I have a main page (Figure 10) where user can click on the search icon and control shifts from that page to a dialog page (Figure 11) . And when user clicks the done button from the dialog page then selected values (here I am using Empid as an example) will come from dialog page to main page for further use. Please refer below snaps

Source Page Destination Page

Now I will show as step by step way how we can achieve it. Creating a view is primary one as I had already shown in my previous blog.

Figure 1

Figure 2let’s design the destination page first i.e.the page where user can select an employee and the data is returned to the “Add Project page”. From Application Module we need to select the view which is got created as Figure 2 above and drag it to the page and then we will be prompted to select a container. Here I have selected trinidad table.

Figure 3

Figure 4

Figure 5

Figure 6

In destination page we need to add a commandlink and it’s code looks like below

Below figure shows the code snippet of source page (Add Project) from where user is navigated to the page shown in Figure 8. After selecting the container type as ADF form (after following the step like drag and drop view objects from data control palate), we get all viewable columns as wrapped in <af:panelLabelAndMessage>. As our objective is to add a command link beside Employee id which will direct us to the destination page we need to modify default ADF panel form. Before adding the command link the code will look like as left side and after adding it will look like as right side (code shown in red color is added only for command link).

Figure 9

Now here comes the tricky part , when user in destination page selects a particular row and click on the "done" button on left top corner then what will happen? Till now what I have shown the code will go nowhere as there is no ActionListener defined.

Step 2: (ActionListener functions) Earlier we had created an attribute named "Empid" and its data source is set as <ProjectAppModuleDataControl.EmployeeViewObj1 >. Now we need to set the value of this attribute to the value specified by user.

Step 2.1: Take value from user specified row

public String getSelectedRowValue() {

System.out. println ("In Set Action Listener for Search Employee"); //Getting Application Module Reference as specified in Step 1. dataControlName is set to ProjectAppModuleDataControl

ProjectAppModule prjappmdl = ( ProjectAppModule )getApplicationModuleForDataControl(dataControlName); Getting selected row of EmployeeViewObj1 view.Earlier we had created the read only table based on EmployeeViewObj1 and select the "Row selection" behavior getCurrentRow() gives reference of that row.

We have created an attribute as figure 6. Now I am using that attribute value in line 16.

Now we need to set a ReturnActionListener method in source page.Till now what we achieve is taking the value from user selected Row in destination page, but how come the data becomes available when control comes back to the main page from destination page. For that we need to define a method in returnListener attribute at source page.setEmployeeID is a custom method defined in Application module Implementation class.

We can write this piece of code in our managed Bean. Application Module has direct visibility to view and entity so we may need to access Application Module from our user interface.We can pass data control name as string to getApplicationModuleForDataControl function

//Argument expression is #{data.ProjectAppModuleDataControl.dataProvider} where ProjectAppModuleDataControl is data control name

public static Object resolveExpression( String expression){ //A FacesContext instance is associated with a particular request at the beginning of request processing, by a call to the getFacesContext() method of the FacesContextFactory instance associated with the current web application

In my previous Blogs I have shown how to insert data into tables but one drawback of that example is the database design I had made. For sake of simplicity I had made the Primary Key Editable which leads to an impractical database design. In this blog I am trying to implement while inserting data into table each time we press create button, primary key of corresponding table is automatically uploaded from database sequence.

in source code of start_emp_basic.jspx page.Figure 3.1: Create Employee Basic Info Page (step1)From Component palate select Panel Header and drag it on the page and it will create panel header.We can change the name of the default panel header. Figure 3.2: Create Employee Basic Info Page (step 2)From data control palate select EmployeeBasicInfoView1 under EmployeeAppModuleDataControl and drag it under the panel header and from list of available faces select ADF form and change the label messages. Add below to set navigation from one page to another in a bounded control flow and create another Employee

From Component palate select "Task Flow Return" and drag it to the task-flow-definition page and rename it to taskFlowReturnSuccess and taskFlowReturnCancel and draw two control flow cases, one for Success and one for cancel.

Figure 7: Completed task-flow-definition

Create ADF configuration page:

Figure 8: Create ADF configuration Page

Drag task-flow-definition to the adfc-config.xml and as a bounded task flow call.Create Employee.jspx which calls bounded task flow

In my earlier blog (basic database operations in ADF) I have shown basic CRUD operations on "EMP" table. Let's make that page more interesting. Currently let's set our objective like Display Graphical analysis on number of employees and expenses pertaining to a department

Graphical analysis on DEPT:

Create view in Model Project.

Figure 1

Here we are going to create a read only view using a SQL query which is as follows

select count(empno),Sum(SAL),DEPTNO from emp group by DEPTNO

. We can use the query in the query section of configuration wizard of that view.

Figure 2

Add View in Application Module

Figure 3

Created view needs to be added with existing application module so that it becomes visible from user interface through data control.

Figure 4

We can change the default view name to any suitable name

Modifying Appearance

Figure 5

Previously only single "panelFormLayout" exists under "first" facet and that panelFormLayout holds entire form where we can create and delete employee, now we create a panelAccordion under first facet, which allow us to switch between more than one panel at runtime which comes under that panelAccordin. Here page structure becomes

Figure 6

Figure 7

Add Graph in Page

Figure 8

Select "GraphDeptViewObject" under "SampleAppModuleDataControl" and drag it to the region under "Emp Count-Dept" detail item. We will be prompted to use rich face from available rich faces. We need to select graph.

Figure 9

From a list of all available graph items I have taken pie as an example,

Figure 10

We need to monitor on number on employees on a particular department so each and every slice of pie corresponds to a department and the data points on that pie will be selected from a list of dropdown box that comes beside "Pie" label.

Figure 11

Click on Expenses- Dept tab and select "GraphDeptViewObject" under "SampleAppModuleDataControl" and drag it to the region under "Emp Count-Dept" detail item. We will be prompted to use rich face from available rich faces. We need to select graph. Here I have taken "Bar" as a display model.

Figure 12

We need to monitor total salary for each and every department so each bar pertaining to a department shows total salary and X axis depicts department.

Figure 13

This is the complete view of our resultant page.

Test and Deployment

Operations refers here is Create-Retrieve-Update-Search on a database tables. In this blog I have shown how to do these 4 operations on a table using a single user interface. Jdeveloper is my favorite design tool and I have done this using Jdeveloper(11.1.1.2.0). While testing that pages I have used Embedded Weblogic server that comes with Jdeveloper.

Preparing Data Model

Figure: 1

Before proceeding with Entity Object creation we need to create a database connection in Jdeveloper IDE Connections and test using "Test Connection" button, and the Connection name appears under IDE Connections. Model object uses that connection.

Figure: 2

Create an entity object

Figure: 3

Database schema is automatically selected based on the already created database connection in IDE.

Figure: 4

Entity is created based upon a database table; we need to select proper table from a list of available tables which comes as an output of "Clicking on" the "Query" button.

Figure: 5

Figure: 6

"Emp" database table should have one Primary key defined on it. Otherwise it will ask for "ROWID" to be set as a primary key. I have used Empno as primary key.

Figure: 7

By selecting "Generate Entity Object class" we assure that a java class will be created with all getter and setter methods of "Emp" table.

Figure: 8

By default a View object is created with select statement subjected to all columns of underlying entity. Entity will be abstracted from user standpoint; only this view is exposed to them as data control. We will have a clear picture as we move forward with this blog.

Figure: 9

Views can't work alone until they are bounded with Application module. So we need to create an application module on top of the view.

Figure: 10

Figure: 11

We can attach more than one view here. In this work around I have single view so I have added that one with newly created Application Module.

Figure: 12

Figure:13

Preparing User Interface:

Figure: 14

Create a page with any of available template, any way we can modify our template any time we want while developing project.

Figure:15

Our page form is divided into two facets "first" and "second" horizontally. In second facet we can add one panel splitter which contains two facets dividing entire "second" facet into vertically. As a result of above code our entire page looks like below

Figure: 16

Figure: 17

From data control palate we need to select "EmployeeEntityObjectView" under "SampleAppModuleDataControl" and drag it to the region shown above. We will be prompted to use rich face from available rich faces. We need to select ADF Read Only Table.

Figure: 18

Search:

Figure: 19

Adding a where clause makes that view to be executed with parameters that comes from users who are trying to search the database tables based on Deptno and Empno.

Figure: 20

ThisDeptNo and ThisEmpNo is used as bind variables, so we need to define these two variables while creating View.

Figure 21

Figure: 22

To make sure that created view becomes accessible from User Interface project we need to add that view in data control and it can be done when that view is added in application module first.

Modifying User Interface:

Figure: 23

Figure: 24

Figure: 25

Figure: 26

Figure: 27

Update:

Figure: 28

According to Figure 23 we have used "panelTabbed" with one Detail Item named "search". Now while incorporating update operation in our page we need to add one detail item named "update" after "search".

Same as we have done for retrieving data from table we need to select "EmployeeEntityObjectView" under "SampleAppModuleDataControl" and drag it to the region under "update" detail item. We will be prompted to use rich face from available rich faces.

We need to select ADF Form. We can retain all default labels in the wizard that appears next in our screen or we can change the label, but we need to select the checkbox that comes beside "Navigation pane" lower in that wizard.

By default our navigation pane consist of 4 command buttons like "First", "next", "Previous", "last", we can delete any of them if we don't require the functionality. I have deleted "First" and "Last" button. To let changed data be persisted in database we need to go to Data control palate and select "Commit" operation under "Operation" node of "SampleAppModuleDataControl" and drag it below form which is created to support update functionality. By default the button text comes as same name of operation (Commit) but we can change it. I have changed it to "update". We need to set the "Disabled" attribute to "default" from Property palate of that button.

As a result your entire page will become

Figure: 29

Create:

As discussed in previous section for incorporating updates functionality in our page, we can do the same for create operation also. Please refer below figures to do the same.

Figure: 30

Figure: 31

Delete:

We need to go to Data control palate and select "Delete" operation under "Operations" node of "EmployeeEntityObjectView" under "SampleAppModuleDataControl" and drag it below form which is created to support update functionality. By default the button text comes as same name of operation (Commit) but we can change it. I have changed it to "update". We need to set the "Disabled" attribute to "default" from Property palate of that button.

After Incorporating all functionality our complete page looks like

Figure: 32

Deploy and Test:

In Jdeveloper select "SampleADFPage.jspx" from list of applications and right click on it and you will get an option to run it. Once it is deployed in embedded server the page comes as below

Create an Employee:

Click on "Create Another" button and then enter data in all corresponding fields and then click on "persist".

Delete an Employee:

Click on "Delete" button and then click on "Persist".

Update an Employee:

Go to Update tab

Modify those fields that you want to modify and then click on "update" button.