Good looking, user friendly and easy to implement. These are the three most attractive characteristics of the hierarchy viewer component.
In the following demo you can see step by step instructions and screen shots demonstrating how to create and link the model objects, as well as how to create the jsf components and bindings.
In this use case I used the Departments and Employees tables from HR schema to create a 3-level hierarchy. In the first level nodes we have “departments”. Expanding the “departments” we see the second level nodes “managers” that correspond to the managers of each department. On the third level, expanding a “Manager” node we get the “Employees” nodes of each manager.
We need to create three view objects. One for “Departments”, one for “Managers” and one for “Employees”. “Managers” and “Employees” are based on the same Entity object (or query if you prefare). Additionally two view links need to be created. “FromDepartmentsToManagersLink” and “FromManagersToEmployeesLink”. The links created as shown bellow:
In the applicationModule we create the following structure:
Now we are ready to create the JSF and add the component:
After creating the page we drag and drop the “departments” data control from the data controls panel.
On the menu that appears select hierarchyViewer. The wizard window opens and at first we choose some initial style settings (they can be changed later) and click ok.
After clicking OK, the second page of the wizard opens were we select the bindings to be used and the attributes to be displayed in each node. We select the three view objects we created and select the attributes we want to be visible in the node attributes table.
After finishing the wizard, all necessary code and bindings are created automatically. The <dvt:hierarchyViewer /> tag is added in the jsf and a tree binding for departments with three node definitions is added in the page definition (you can check the generated code with the sample application you can download at the end of the post).
In this sample application I also added a popup functionality were the user can select a “departments” node and view/edit more details of the specific department. This code can also be found in the sample application code in the jsf page.
Here you can see a short demo video i created:
You can also download the sample application here.
I found this component to be very useful especially now that the trend in software development is to provide high quality look and feel in all applications.
There are still a few tweaks that need to be made on this component to give it more flexibility in development. For example at this point there are several components that you cannot add inside the hierarchyviewer tag, like toolbarButtons and some types of listeners. I hope that this component will evolve and improve in future releases and that more ajax components will be added in jdeveloper.
More documentation from oracle can be found here
More details about the hierarchy viewer component can be found in these very good blogs: