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