5 Replies Latest reply on Jan 7, 2013 1:47 PM by ansh

    Changing navigation pane node icons on selection


      I am using Jdev In my application, I have created a menu model at root level which has around 5 nodes and we have two icons for each node - one when the node is in selected state and one for the unselected state. As of now, I am able to have one icon for each node by having the item nodes and navigation pane as below:
      <menu xmlns="http://myfaces.apache.org/trinidad/menu">
        <itemNode id="itemNode_node1" label="node1"
                    action="adfMenu_node1" focusViewId="/node1"
        <itemNode id="itemNode_node2" label="node2"
                    action="adfMenu_node2" focusViewId="/node2"
        <itemNode id="itemNode_node3" label="node3"
                    action="adfMenu_node3" focusViewId="/node3"
        <itemNode id="itemNode_node4" label="node4"
                    action="adfMenu_node4" focusViewId="/node4"
        <itemNode id="itemNode_node5" label="node5"
                    action="adfMenu_node5" focusViewId="/node5"
           <af:navigationPane id="pt_np1" hint="list"
                                             value="#{root_menu}" var="menuInfo">
                            <f:facet name="nodeStamp">
                              <af:commandNavigationItem id="pt_cni1"
                                                        icon="#{menuInfo.icon}" />
      Could you please suggest on how can the icon be changed from node1-unselected.png to node1-selected.png on its selection?

        • 1. Re: Changing navigation pane node icons on selection
          Use ADF Skinning and use the Selector for navigation item Like


          Follow the below link for other available Selectors for Skinning ADF Faces Components

          for skinning example
          • 2. Re: Changing navigation pane node icons on selection
            I am already using this style selector but this only helps in changing the background of the node icon. Even if I somehow manage to change the icon, it will render the same icon for all the nodes whereas I want an icon to be changed only for the selected node.

            Mainly, here, I need an EL expression that tells me if a particular node is in selected state based on which I can switch my icons.
            • 3. Re: Changing navigation pane node icons on selection
              Hi ansh,

              i am not much familiar with the Trinidad component ,however i have done similar thing with af:panelAccordian by css

              af|panelAccordion::undisclosed-icon {content: url('/images/unselected.png');
              af|panelAccordion::disclosed-icon {content: url('/images/selected.png');

              try to look for the similar psudeo class for your component.
              or you can see the html generated and can apply the css on it.
              • 4. Re: Changing navigation pane node icons on selection
                Right, panel accordion has these pseudo classes but not the navigation pane. I am referring Oracle Fusion Middleware Tag Reference for Oracle ADF Faces
                11g Release 1 ( at [http://docs.oracle.com/cd/E23943_01/apirefs.1111/e12419/skin-selectors.html]

                But even it had, it would not have served my purpose as it would have changed the icons for all the node and the problem is that I have different icons for all the 5 nodes.
                • 5. Re: Changing navigation pane node icons on selection

                  I have got this working by using the property 'focusRowKey' of the menu. This property returns the index of the node currently selected. So, the solution to change the icon for the selected node goes like this.
                  <af:commandNavigationItem icon="#{menuInfo.label=='node1' and root_menu.focusRowKey=='[0]' ? '../images/node1-selected.png' : (menuInfo.label=='node2' and root_menu.focusRowKey=='[1]' ? '../images/node2-selected.png' : (menuInfo.label=='node3' and root_menu.focusRowKey=='[2]' ? '../images/node3-selected.png' : (menuInfo.label=='node4' and root_menu.focusRowKey=='[3]' ? '../images/node4-selected.png' : (menuInfo.label=='node5' and root_menu.focusRowKey=='[4]' ? '../images/node5-selected.png' : (menuInfo.icon)))))}"