For a recent training course we build the following proofOfConcept. We created a single view with two tables, a master (departements) and a detail (employees) table. The view was backed by two controller beans which communicate using cdi events. The proofOfConcept was deployed to a jee6-container (glassfish 3.1.1).
The idea is whenever you click on a departements row, the ajax-Listener fires an cdi-Event that updates the detail-Controller and in return updates the detail table. This pattern can be extended to multiple detail tables or multiple master-detail-detail levels.
For editing your entites I suggest to open an editor-dialog, eg by adding an editor-button in each row of your tables. To add new details use add-Actions in the footer of the tables and open the editor-dialog with a new entity. On "ok" in your editor-Dialog you again fire an cdi-event with the new entity to update depending detail tables. To save your work use a single "commit"-Button, which saves the master-Entity. In the training we used jpa with proper defined entities, esp using the orphanRemoval=true attribute in the @OneToMany relations.
The view (scott.xhtml):
<p:panel id="deptPanel" header="Departements">
<p:dataTable id="deptTable" var="dept" value="#{deptUiController.departements}"
selectionMode="single" rowKey="#{dept.id}">
<p:ajax event="rowSelect" listener="#{deptUiController.onRowSelect}" update="@form"/>
<p:column headerText="Name">
<h:outputText id="name" value="#{dept.dname}"/>
</p:column>
<p:column headerText="Location">
<h:outputText id="loc" value="#{dept.loc}"/>
</p:column>
<p:column headerText="# of Emps">
<h:outputText id="size" value="#{dept.emps.size()}"/>
</p:column>
</p:dataTable>
</p:panel>
<p:panel id="empPanel" header="Employees in departement #{deptUiController.currentDept.dname}">
<p:dataTable id="empTable" var="emp" value="#{empUiController.employees}">
<p:column headerText="Name">
<h:outputText id="name" value="#{emp.ename}"/>
</p:column>
<p:column headerText="Job">
<h:outputText id="job" value="#{emp.job}"/>
</p:column>
<p:column headerText="Hiredate">
<h:outputFormat id="hiredate" value="{0,date,dd.MM.yyyy}">
<f:param value="#{emp.hiredate}"/>
</h:outputFormat>
</p:column>
</p:dataTable>
</p:panel>
Master-Controller:
@Named
@SessionScoped
public class DeptUiController implements Serializable {
private boolean initialized = false;
@EJB
private ScottCRUD crudEJB;
private List<Departement> departements;
private Departement currentDept;
public void populateData() {
if ( !initialized ) {
departements = crudEJB.findAllDepartements();
currentDept = departements.isEmpty() ? null : departements.get(0);
initialized = true;
fireDeptChange();
}
}
@Inject
private Event<Departement> deptChangeEvt;
private void fireDeptChange() {
deptChangeEvt.fire( currentDept );
}
public void onRowSelect(SelectEvent event) {
currentDept = (Departement) event.getObject();
fireDeptChange();
}
... getter, setter, more actions...
}
Detail-Controller
@Named
@SessionScoped
public class EmpUiController implements Serializable {
private List<Employee> employees;
private Employee currentEmp;
private void populateData(Departement master) {
if ( master==null ) {
employees = Collections.emptyList();
} else {
employees = master.getEmps();
}
currentEmp = employees.isEmpty() ? null : employees.get(0);
}
public void observeDeptChanged( @Observes Departement master ) {
populateData( master );
}
... getter, setter, more actions...
}
