ADF Faces RC: Expanding af:menubar on mouse over The af:menu bar component in ADF Faces RC needs to be clicked on initially to expand. This article explains how to use the client side JavaScript framework to achieve the same functionality on mouse over

Written by Frank Nimphius, Oracle Corporation
03-April-2008/21-July-2009

Introduction

To initially expand the menu bar you need to click on one of the menu options "Main Menu 1" or "Main Menu 2". After this moving the mouse from one menu option to the next will automatically expand the menu.

Now, how could the "mouse over effect" be made the default so that no initial click onto the menu is required to show the options ? The solution to this is a combination of JavaScript and the af:clientListener component in combination with the ADF Faces client side JavaScript framework.

Page Source

The full page source:

<af:document>
    <f:facet name="metaContainer">
          <af:group>
        <![CDATA[
            <script>        
                function showMenu(event){
                    var adfRichMenu = event.getSource();
                    adfRichMenu.getPeer().show();   
                }
            </script>
         ]]>
        </af:group>
    </f:facet>
  <af:form>
   <af:panelGroupLayout layout="horizontal">
   <af:menuBar>
     <af:menu text="Main Menu 1">
       <af:commandMenuItem text="Sub Menu 1_1"/>
              <af:clientListener method="showMenu" type="mouseOver"/>
     </af:menu>
     <af:menu text="Main Menu 2">
        <af:commandMenuItem text="Sub Menu 2_1"/>
        <af:commandMenuItem text="Sub Menu 2_2"/>
              <af:clientListener method="showMenu" type="mouseOver"/>
     </af:menu>
   </af:menuBar>
  </af:panelGroupLayout> 
</af:form>
</af:document>

The mouse over event is added to the menu - af:menu - with the af:clientListener element. The show() function is added to the component peer of the AdfRichMenu component. The available functionality of the component peer can easily be looked up using Firebug in Firefox. There is no need to read all the JavaScript sources or the JavaScript documentation.

JDeveloper 11g R1 update

The price yu pay when using internal APIs as I do in this example, is that APIs change without further notice. To get this example working in JDeveloper 11g R1, change the code to

function showMenu(event){
   var adfRichMenu = event.getSource();
   adfRichMenu.getPeer().show(null,true); 
 }