The blog for hints & tips about Oracle Application Development Framework and Mobile Application Framework

  • ADFv
    October 19, 2011

How to render different node icons for different tree levels

Frank Nimphius
Master Principal Product Manager

 Nodes of the af:tree component are stamped, which means that upon rendering,
the UI component defined in the nodeStamp
facet is printed repeatedly with different data values. If the requirement is
to icons differently on each node level, then EL and the af:switcher component
help as explained in the following.

<af:tree value="#{bindings.LocationsView1.treeModel}" var="node"                
rowSelection="single" id="t1">
<f:facet name="nodeStamp">
<af:switcher id="s1"
<f:facet name="adf.bc.samples.model.vo.LocationsView">
<af:commandImageLink text="#{node}"
icon="/images/l1.png" id="cil4"
inlineStyle="height:16px; width:17px;" disabled="true"/>
<f:facet name="adf.bc.samples.model.vo.DepartmentsView">
<af:commandImageLink text="#{node}" icon="/images/l2.png"
inlineStyle="height:16px; width:17px;" disabled="true"/>
<f:facet name="adf.bc.samples.model.vo.EmployeesView">
<af:commandImageLink text="#{node}" icon="/images/l3.png"
inlineStyle="height:16px; width:17px;" disabled="true"/>

The sample uses the Oracle HR sample schema Locations,
Departments and Employees hierarchy. The tree nodes are printed as af:commandImageLinks
because this gives me the option to print an icon and text within the same
component, avoiding the need for a surrounding container (the nodeStamp facet can only have a single
child component) that messes with the tree layout. Because I have no use of the
command link action, I set its disabled
property to false.

Note: The command
image link labels are rendered in gray, which can be corrected to black color using
skinning. Alternatively you can look for finding a different UI component to
render the node (as said command image link is what worked for me the best).

The an af:switcher
component is used to switch between different command link definitions. To distinguish
the tree node level, the view definition name of the View Object rendering
the node is used. You can read the node view definitions from the tree binding in the
PageDef file.

 <tree IterBinding="LocationsView1Iterator" id="LocationsView1">
      <nodeDefinition DefName="adf.bc.samples.model.vo.LocationsView"
          <Item Value="LocationId"/>
          <Item Value="City"/>
          <Item Value="DepartmentsView"/>
      <nodeDefinition DefName="adf.bc.samples.model.vo.DepartmentsView"
          <Item Value="DepartmentId"/>
          <Item Value="DepartmentName"/>
          <Item Value="EmployeesView"/>
      <nodeDefinition DefName="adf.bc.samples.model.vo.EmployeesView"
          <Item Value="EmployeeId"/>
          <Item Value="FirstName"/>
          <Item Value="LastName"/>

For this, select the PageDef
file in the Application navigator and open the Structure Window. Expand the
tree node binding and select a nodeDefinition.
The DefName of this node is shown in
the Property Inspector. You use the DefName
as a facet name in the af:switcher
component, as shown in the page code snippet shown in the beginning.

The af:switcher
component uses the facetName
property to determine which of the contained facet to display upon rendering,
using the following EL: #{node.hierTypeBinding.viewDefName}

The facets defined in the switcher component are named after
the View Object definition names they represent. In the sample that is based on the Oracle HR schema, these view object names are

  • adf.bc.samples.model.vo.LocationsView
  • adf.bc.samples.model.vo.DepartmentsView
  • adf.bc.samples.model.vo.EmployeesView

The EL expression used in the switcher facetName property returns one of these strings in which case the
facet renders, thus showing different icons. Note that this technique can be used for any use case requiring a difference in the tree node handling or behavior

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.