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:


Download JDeveloper 11g Application: richjsfejbjpademo1

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

About Author

Lucas Jellema, active in IT (and with Oracle) since 1994. Oracle ACE Director and Oracle Developer Champion. Solution architect and developer on diverse areas including SQL, JavaScript, Kubernetes & Docker, Machine Learning, Java, SOA and microservices, events in various shapes and forms and many other things. Author of the Oracle Press book Oracle SOA Suite 12c Handbook. Frequent presenter on user groups and community events and conferences such as JavaOne, Oracle Code, CodeOne, NLJUG JFall and Oracle OpenWorld.

Comments are closed.