How to render different node icons for different tree levels

 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"                
  selectionListener="#{bindings.LocationsView1.treeModel.makeCurrent}"
  rowSelection="single" id="t1">
  <f:facet name="nodeStamp">
    <af:switcher id="s1" 
                 facetName="#{node.hierTypeBinding.viewDefName}">
      <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>
      <f:facet name="adf.bc.samples.model.vo.DepartmentsView">
         <af:commandImageLink text="#{node}" icon="/images/l2.png" 
               id="cil6" 
               inlineStyle="height:16px; width:17px;" disabled="true"/>
      </f:facet>
      <f:facet name="adf.bc.samples.model.vo.EmployeesView">
        <af:commandImageLink text="#{node}" icon="/images/l3.png" 
             id="cil8"
             inlineStyle="height:16px; width:17px;" disabled="true"/>
      </f:facet>
   </af:switcher>
  </f:facet>
</af:tree>

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" 
                      Name="LocationsView10">
        <AttrNames>
          <Item Value="LocationId"/>
          <Item Value="City"/>
        </AttrNames>
        <Accessors>
          <Item Value="DepartmentsView"/>
        </Accessors>
      </nodeDefinition>
      <nodeDefinition DefName="adf.bc.samples.model.vo.DepartmentsView" 
                      Name="LocationsView11">
        <AttrNames>
          <Item Value="DepartmentId"/>
          <Item Value="DepartmentName"/>
        </AttrNames>
        <Accessors>
          <Item Value="EmployeesView"/>
        </Accessors>
      </nodeDefinition>
      <nodeDefinition DefName="adf.bc.samples.model.vo.EmployeesView" 
                      Name="LocationsView12">
        <AttrNames>
          <Item Value="EmployeeId"/>
          <Item Value="FirstName"/>
          <Item Value="LastName"/>
        </AttrNames>
      </nodeDefinition>
    </tree> 

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

Comments:

Post a Comment:
Comments are closed for this entry.
About

The Oracle JDeveloper forum ranks in the Top 5 of the most active forums on the Oracle Technology Network (OTN).



The OTN Harvest blog is a summary of selected topics posted on the OTN Oracle JDeveloper forum.



It is an effort to turn knowledge exchange into an interesting read for developers who enjoy little nuggets of wisdom





Frank Nimphius

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today