Rapid development of Rich JSF Web applications on top of EJB/JPA persistence (JSF on Rails – Demo 1)

Here you will find the first demo from my Devoxx 2008 presentation. It shows how you can rapidly create a rich web application based on Java Server Faces and EJB/JPA persistency using JDeveloper 11g and the ADF 11g framework. The presentation included below shows the steps one by one to create a rich web application. The JDeveloper 11g application can be downloaded as well. The end result looks something like:

it includes such features as: master detail tables with synchronization; column sort; run time column manipulation: resize, reposition and hide/show; popup with detailed context data; data driven, synchronized chart; accordion for better page real estate usage.

The steps to create this demo:

(starting with a vanilla JDeveloper 11g and a Database (e.g. Oracle 10g/11g) with tables Departments, Employees and Jobs)

- Create a new JDeveloper Application

- Create Model project
- Create Database Connection HR_CONNECTION to the HR database schema
- Create (EJB) Entities from Tables
- (Create Diagram for the Entities)
- Create Session Bean for the three Entities (HrmServiceBean)
 
- Create Data Control from Session Bean HrmServiceBean (based on Local interface)

-Create ADF ViewController project
- Create new JSF page (DepartmentEmployees.jspx)
- Drag PanelStretchLayout component to the page
- Drag EmployeeList under Department under queryDepartmentFindall under the HrmServiceLocal DataControl on the Data Control palette and drop as Master (Table) Detail Table
- Set the Width of the Employees Table to 800 or higher

- Run the page
- point out the synchronization between master and details; show the resizing and repositioning of columns
 
- Surround Employees Table with PanelCollection
- Select all columns in the table and set sortable to true
- edit the partialTriggers attribute (Behavior) for the EmployeesTable and have it reference the id of the DepartmentTable (masterDetail1)
- Refresh the page in the browser
- Point out the PanelCollection features: Detach Table; hide/show columns
- Point out the Sortability of the columns
 
- Drag a popup compont, drop it on the Form; set its id to MgrDetailsPopup; contentDelivery = lazyUncached
- Drop a PanelWindow inside the popup; set the title to Department Manager Details; have the partialTriggers attribute refer to  the id of the DepartmentTable (masterDetail1)
- Drag & Drop the EmployeeList (from the Data Control palette) as a read only Form in the PanelWindow.
- Add a showPopupBehavior to the DepartmentId outputText in the first column of the Department table
 
- Drag an Accordion component, drop it under the first PanelHeader (that contains Department Table)
- Drag the second PanelHeader (with the EmployeesTable) to the ShowDetailItem in the accordion
- Add a second showDetailItem (Insert inside menu option for the Accordion)
- Drag EmployeeList to the second showDetailItem; drop as Graph (horizontal bar; Salary is bar value, LastName is y-axis); set the partialTriggers attribute on the graph: have it refer to  the id of the DepartmentTable (masterDetail1)
- Run the page
     -point out the popup that is shown when right clicking on the departmentId
- point out the Accordion
- show the synchronization of the Salary Graph when selecting different Departments in the master table

The steps are visualized in this presentation:

Resources

Download JDeveloper 11g Application: richjsfejbjpademo1

Download the Powerpoint with step-by-step instructions: jsf_on_rails_ejb_jpa_jsf_adf11g_demo1