how can primefaces menubar align right to left?

Question

I use primefaces version 4.I want to know is there anyone to handle menubar align right to left. how can do it? is there other menu to handle right to left that dont have confilict with primefaces? excuse me for my english.

Answer 1

I have written a JS method to switch the popout of menu items, plus arrows for submenus.

function rtlMenu() { 
    //Setup id's 
    //Variables, menu arrow arrow, parent array name etc.
    var menuEl = document.getElementsByClassName('ui-widget-content ui-menu-list ui-corner-all ui-helper-clearfix ui-menu-child ui-shadow');
    var menuHrefs = document.getElementsByClassName('ui-menuitem-link ui-corner-all');
    var allMenuItems = document.getElementsByClassName("ui-menuitem-text");                 
    var menuArrows = document.getElementsByClassName('ui-icon ui-icon-triangle-1-e');

    var clonedArrow = null;
    var cnt = 0;

    var arrowName = "theMenuArrowParentSpanElement";
    var idName = "temp_id_menu_item_rtl_rebuild_";
    var aIdName = "temp_href_menu_rtl_popup_";

    var firstALink = aIdName + "0";
    var firstName = idName + "0";

    //align all menu items right 
    for ( var ami = 0 ; ami < allMenuItems.length; ami++) { 
        var menuItemel = allMenuItems[ami];                                         
        menuItemel.style.float = "right";
    }                       

    //Give menus id's                   
    for ( x=0; x < menuEl.length; x++) {                    
        menuEl[x].id = idName + x;                      
    }   

    //Give a-link's id's
    for ( y=0; y < menuHrefs.length; y++) {                     
        menuHrefs[y].id = "temp_href_menu_rtl_popup_" + y;
    }   

    //Click main menu - Init primefaces menu scripts                    
    $( "#" + firstALink ).click();

    //Show first menu                   
    $( "#" + firstName ).show();

    //Popup submenus - This init the menu position CSS
    for ( y=0; y < menuHrefs.length; y++) {                     
        $( "#" + menuHrefs[y].id  ).mouseenter();
    }

    //Set menu's right from left using left values set to right
    //Only Top level
    for ( x=0; x < menuEl.length; x++) {                        
        var origLeft = document.defaultView.getComputedStyle( menuEl[x] , null).left ;
        numericLeft = origLeft;

        var menuTopParentTag = menuEl[x].parentNode.parentNode.parentNode.tagName;

        if ( parseInt(numericLeft) < 0 
             &&
             menuTopParentTag != "UL" && 
             menuTopParentTag != "LI" 
        ) {     
            //Main menus with negative - Do nothing 
            continue;
        } else { 
            if ( menuTopParentTag == "UL" || 
                 menuTopParentTag == "LI" ) {
                 //Sub menus - Do nothing 
                 continue;
            }  
            //Main menus - Shift left
            menuEl[x].style.right = origLeft;
            menuEl[x].style.left = "";
        }
    }   

    //Popup submenus - This init the menu position CSS
    for ( y=0; y < menuHrefs.length; y++) {                     
        $( "#" + menuHrefs[y].id  ).mouseenter();
    }

    //Set menu's right from left using left values set to right
    //Only sub levels
    for ( x=0; x < menuEl.length; x++) {                        
        var origLeft = document.defaultView.getComputedStyle( menuEl[x] , null).left ;
        numericLeft = origLeft;

        var menuTopParentTag = menuEl[x].parentNode.parentNode.parentNode.tagName;

        if ( parseInt(numericLeft) < 0 
             &&
             menuTopParentTag != "UL" && 
             menuTopParentTag != "LI" 
        ) {     
            //Main menus with negative - Do nothing 
            continue;
        } else { 
            if ( menuTopParentTag != "UL" && 
                 menuTopParentTag != "LI" ) {
                 //Main menus - Do nothing 
                 continue;
            }  
            //Sub menus - Shift left
            menuEl[x].style.right = origLeft;
            menuEl[x].style.left = "";
        }
    }   

    //Hide the menu's again, if this is done earlier, the menu positions are wrong
    for ( y=0; y < menuHrefs.length; y++) {                     
        $( "#" + menuHrefs[y].id  ).mouseenter();
        $( "#" + menuHrefs[y].id  ).mouseleave();
    }

    //Move menu popout arrow icons 
    //Make sure this is not an infinate loop
    //Because we are removing the children the array needs to be re- initialized, it removes from the array as well. 

    //Name the parents to get parent array
    //Clone a arrow element
    for ( var ar = 0 ; ar < menuArrows.length; ar++) { 
        var arrowElement = menuArrows[ar];
        clonedArrow = arrowElement.cloneNode(true);

        arrowElement.parentElement.name = arrowName;
    }   

    //Remove the arrows, make sure it is not an endless loop
    while ( (cnt < 2000) && (menuArrows.length > 0) ) { 
        cnt++;      
        var arrowElement = menuArrows[0];
        var arrowElementParent = menuArrows[0].parentElement;

        arrowElementParent.removeChild(arrowElement);   
        menuArrows = document.getElementsByClassName('ui-icon ui-icon-triangle-1-e');                  
     }

    //Get parent array
    var allArrowParents = document.getElementsByName(arrowName);

    //Rotate cloned object 
    clonedArrow.className += " rotate180Arrow ";
    clonedArrow.style.float = "left";

    //Add arrow back as first child of parents 
    for ( var arp = 0 ; arp < allArrowParents.length; arp++) { 
        var arrowParent = allArrowParents[arp];
        //Insert new object as the cloned object                        
        arrowParent.insertBefore(clonedArrow.cloneNode(true), arrowParent.firstChild);
    }   

}

We use this in a production environment. The moving of the menu from ltr to rtl takes place by not making the menu 100% width, then using a spacer and placing the menu in a panelgrid with 2 columns, the space taking up 100% space. Remove the border from the menubar and add it in as the border of the panelgrid.

<!-- Menubar -->
                        <h:panelGrid columns="2" styleClass="ui-menu ui-menubar ui-widget ui-widget-content ui-corner-all ui-helper-clearfix"
                                     style=" width:100%; padding: 0px; border-collapse: collapse; border:none; " dir="#{textBundle['html.direction']}"  >

                            <h:panelGroup style="white-space: nowrap; width:100%; " >                                   

                                <h:panelGrid columns="1"  style="white-space: nowrap; padding: 0px; border:none; border-collapse: collapse;  " 
                                             dir="#{textBundle['html.direction']}"  >

                                    <p:menubar id="menuBar" model="#{menuController.model}" rendered="true"
                                               autoDisplay="false" style="padding: 0px; white-space: nowrap; border:none; background:none; " />                                             

                                </h:panelGrid>                                  
                            </h:panelGroup>
                            <h:panelGroup style="overflow:hidden; width:100%; " ></h:panelGroup>
                        </h:panelGrid>  

We are using this for a client in Egypt using Arabic and RTL locale setting.

Answer 2

If you are talking about aligment of p:menuitem right inside a p:menubar, take a look at the example provided. They are doing it by wrapping concerned p:menuitem's inside this :

<f:facet name="options">

</f:facet>

Answer 3

You have two options: If you want to have an rtl orientation menu for arabic languages pages you could use this

<f:view locale="#{sample.locale}">
  <p:inputText />
  <p:SomeOtherComponents...>
</f:view>

more information: http://code.google.com/p/primefaces/issues/detail?id=3890

if you just want to have a menubar with item on left side, you could use a <p:toolbar>

more information: http://www.primefaces.org/showcase/ui/toolbar.jsf

excuse google translator for my english.