Why are some Rio menus list of anchors and others pr:menu?

[RElliott]

I am customizing the Rio templates for my applications and needed to add an item to the layout-menu that executes an action. I successfully add the menu item using a p:commandLink as shown below:

Code: Select all

<li>
    <h:form id="log-out-form">
        <p:commandLink
            id="log-out"
            action="#{sessionBean.logout}"
            ajax="false"
            style="color: rgb(69,90,100);"
            styleClass="menulink ripplelink">
            <i class="icon-close47 Fs16"></i> Logout
        </p:commandLink>
    </h:form>
</li>

The above menu item works well but after the first click the color turns permanently blue. I tried to force the color back to the default darker color but I think an !important css entry on commandlink is overriding my efforts. Regardless, I began to wonder why did PrimeFaces use a list of anchors for the layout-menu instead of the pr:menu. The pr:menu seems to be more flexible and supports actions out of the box.

[mert.sincan]

Please try;

Code: Select all

//Css
.layout-menu .ui-commandlink { /* or .menulink.ui-commandlink */
   color: #455a64 !important; 
}

//xhtml
<ul class="layout-menu">
            <li>
                <a class="menulink ripplelink">
                    <i class="icon-round58 Fs40"></i>
                    <span class="Fs18">John Wilkins<i class="icon-downwards Fright Fs20"></i><br /><span class="Fs12 FontRobotoLight">Sr. System    Administrator</span></span>
                </a>
                <ul>
                    <li><h:form ..>
                             <p:commandLink styleClass="menulink ripplelink" ...><i class="icon-close47 Fs16"></i> Logout </p:commandLink>
                        </h:form>
                    </li>
                </ul>
            </li>
        </ul>

or you can try with pr:menu;

Code: Select all

<div class="Animated05" id="layout-menu-cover">
   <ul class="layout-menu">
      <li>
         <a class="menulink ripplelink">
            <i class="icon-round58 Fs40"></i>
               <span class="Fs18">John Wilkins<i class="icon-downwards Fright Fs20"></i><br /><span class="Fs12 FontRobotoLight">Sr. System Administrator</span></span>
          </a>
          <pr:menu>
             <p:menuitem id="rm_dashboard2" value="User Profile" icon="icon-user158 Fs16" outcome="/dashboard"/>
             <p:menuitem id="rm_forms2" value="Change User" icon="icon-two385 Fs16" outcome="/forms" />
             <p:menuitem id="rm_data2" value="System Settings" icon="icon-settings49 Fs16" outcome="/data" />
             <p:menuitem id="rm_datatable2" value="Logout" icon="icon-grid-alt Fs16" outcome="/datatable" />
          </pr:menu>
      </li>
   </ul>
   <div class="Separator"></div>
   <h:form> 
      <pr:menu id="rm_test">
         <p:menuitem id="rm_logout" value="Logout" icon="icon-locked57 Fs16" action="#{elisSession.logout}" ajax="false"/>
      </pr:menu>
   </h:form>
</div>

Screenshot;

[RElliott]

Is there a reason to use one technique over the other?

[mert.sincan]

<pr:menu> creates similar structure with <ul>(in layout-menu) in DOM.
The structure of <pr:menu>;

Code: Select all

<ul class="layout-menu rio-menu active-menu">
    <li role="menuitem"><a class="menulink ripplelink" ...><i class="icon-user158 Fs16"></i>User Profile </a></li>
</ul>