Tutorial: Declaratively render UTF menu model using various ADF Faces components.

Screen shots

Trailer video of end product

Deployed example

http://www.adfhomebrew.com/home/faces/menu

The idea for this tutorial started with a UI requirement for our system to provide navigation flexibility at runtime to various modules. Also our clinical business analysts wanted a “Site map” option to offer a global view for all our UTF pages. The solution is to simply use the XML menu model generated by JDeveloper to provide runtime rendering of the menu and the site map without repeating the underlying model code.

Below is the tutorial video:

Also check out this nice tutorial on building dynamic menus using Navigation Panes

Beyond this demo, you should be able to incorporate this component into a UI template or even a declarative component to fully leverage reuse within your application. Note that after generating and modifying the xml menu model, JDev does not know how to sync additional changes to your UTFs and you will need to update the menu model separately. Happy coding!

Update 4/10/2014
There were some questions regarding the PanelAccordion implementation and how to keep the tabs disclosed after a link is clicked. A simple way to do this using EL is to define an setActionListener component to the commandlink and set the ID of the parent node. Then perform a comparison within the parent node’s “disclosed” property. See the below code for reference.

<af:panelAccordion id="pa1">
<af:forEach items="#{root_menu.wrappedData.wrappedData}" var="root">
<af:showDetailItem text="#{root.label}" id="sdi1"
disclosed="#{root.id == processScope.currentTabId}">
<af:forEach items="#{root.children}" var="children">
<af:commandLink text="#{children.focusViewId}" id="cl1" action="#{children.doAction}"
partialSubmit="true" immediate="true">
<af:setActionListener from="#{root.id}" to="#{processScope.currentTabId}"/>
</af:commandLink>
</af:forEach>
</af:showDetailItem>
</af:forEach>
</af:panelAccordion>


Update 11/6/2014

Some of you mentioned to me that the 12.1.3 accordion and menu components were not working as they did in 11.1.2.x. After replicating this issue and posting it to OTN, a nice user responded with the solution:

https://community.oracle.com/thread/3593590

As stated in the post, the fix for the new versions of ADF is to bind the ID attribute to the menu model node IDs.