Page 4 of 4
Re: Usage of submenu / menuitem in main menu
Posted: 26 Oct 2016, 16:13
by angelo.celoni
I'm using "olympos-customMenu-1.0.jar" with the following code:
Code: Select all
<h:form id="menuform">
<po:tabmenu widgetVar="OlymposMenu">
<p:ajax event="tabChange" oncomplete="console.log('tabChange')" />
<po:menu id="menu-main" title="Menu Principale" icon="fa fa-cubes">
<p:submenu id="submenu-main" label="Menu Principale">
<p:menuitem id="home" value="Home" icon="fa fa-home" url="home.xhtml" />
<p:menuitem id="pagina1" value="Pagina 1" icon="fa fa-list" url="home.xhtml" />
<p:menuitem id="help" value="Aiuto" icon="fa fa-question" target="_blank" url="/resources/docs/manuale.pdf" />
<p:menuitem id="logout" value="Logout" icon="fa fa-power-off" url="/saml/logout/" />
</p:submenu>
</po:menu>
<po:menu id="menu-tables" title="Menu Tabelle" icon="fa fa-table">
<p:submenu id="submenu-tables" label="Tabelle">
<p:menuitem id="menu-atc" value="ATC" icon="fa fa-table" url="/secure/atc.xhtml" />
<p:menuitem id="menu-cittadinanza" value="Cittadinanza" icon="fa fa-table" url="/secure/cittadinanza.xhtml" />
<p:menuitem id="menu-esenzione" value="Esenzione" icon="fa fa-table" url="/secure/esenzcod.xhtml" />
<p:menuitem id="menu-tipo-assistito" value="Tipo Assistito" icon="fa fa-table" url="/secure/assistito.xhtml" />
</p:submenu>
</po:menu>
</po:tabmenu>
</h:form>
The first menu is working fine and whenever I click on a menuItem it is correctly highligthed; the second menu is working but the menuItem highlighted is always the first one clicked.
Re: Usage of submenu / menuitem in main menu
Posted: 02 Mar 2017, 11:52
by oschell
Any progress on that topic? I bought the olympos theme and would love to distribute my menus over multiple tab panels. This is really essential, otherwise the menus in other tabs have to be built "by hand" - not very efficient and they will look slightly different. I tried the customMenu component but I am getting the ClassCastExceptions too. Any means to avoid them?
Re: Usage of submenu / menuitem in main menu
Posted: 14 Apr 2017, 21:59
by deandeen
oschell wrote: ↑02 Mar 2017, 11:52
Any progress on that topic? I bought the olympos theme and would love to distribute my menus over multiple tab panels. This is really essential, otherwise the menus in other tabs have to be built "by hand" - not very efficient and they will look slightly different. I tried the customMenu component but I am getting the ClassCastExceptions too. Any means to avoid them?
Add following into faces-config.xml
Code: Select all
<component>
<component-type>org.primefaces.component.OlymposTabMenu</component-type>
<component-class>org.primefaces.olympos.component.menu2.OlymposTabMenu</component-class>
</component>
<component>
<component-type>org.primefaces.component.OlymposMenu</component-type>
<component-class>org.primefaces.olympos.component.menu2.OlymposMenu</component-class>
</component>
<render-kit>
<renderer>
<component-family>org.primefaces.component</component-family>
<renderer-type>org.primefaces.component.OlymposMenuRenderer</renderer-type>
<renderer-class>org.primefaces.olympos.component.menu2.OlymposMenuRenderer</renderer-class>
</renderer>
<renderer>
<component-family>org.primefaces.component</component-family>
<renderer-type>org.primefaces.component.OlymposTabMenuRenderer</renderer-type>
<renderer-class>org.primefaces.olympos.component.menu2.OlymposTabMenuRenderer</renderer-class>
</renderer>
</render-kit>
Re: Usage of submenu / menuitem in main menu
Posted: 14 Apr 2017, 22:07
by deandeen
@Aragorn
Check following code and you will see that second tab is not working ok. As already mentioned highlighting is on ok. Also if you have many nested nodes only first work. Once you click inside you cannot open another.
Code: Select all
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:po="http://primefaces.org/olympos">
<h:form id="menuform">
<po:tabmenu widgetVar="OlymposMenu">
<p:ajax event="tabChange" oncomplete="console.log('tabChange')" />
<po:menu id="menu1" title="Olympos Main Menu" icon="icon-speedometer33">
<p:submenu id="om_menuoptcolor" label="MENU AND COLOR OPTIONS">
<p:menuitem id="om_def" url="#" value="Default Menu Option" icon="icon-list3" onclick="PF('OlymposMenu').changeBodyClass('');return false;"/>
<p:menuitem id="om_popup" url="#" value="Popup Menu Option" icon="icon-window32" onclick="PF('OlymposMenu').changeBodyClass('PopupMenu');return false;"/>
<p:menuitem id="om_slim" url="#" value="Slim Menu Option" icon="icon-list3" onclick="PF('OlymposMenu').changeBodyClass('SlimMenu');return false;"/>
<p:submenu id="om_colors" label="Color Options" icon="icon-blood10">
<p:menuitem id="om_bg_blue" url="#" value="Blue Color" icon="icon-chemistry10" onclick="PF('OlymposMenu').changeBodyClass('BlueTopbar');return false;"/>
<p:menuitem id="om_bg_navy" url="#" value="Navy Color" icon="icon-chemistry10" onclick="PF('OlymposMenu').changeBodyClass('NavyTopbar');return false;"/>
</p:submenu>
</p:submenu>
</po:menu>
<po:menu id="menu3" title="Olympos Main Menu3" icon="icon-time32">
<p:submenu id="om_hierarchy" label="MENU HIERARCHY">
<p:submenu id="om_sm1" label="Submenu 1" icon="icon-add5">
<p:submenu id="om_sm11" label="Submenu 1.1" icon="icon-add5">
<p:submenu id="om_sm111" label="Submenu 1.1.1" icon="icon-add5">
<p:menuitem id="om_lnk1111" value="Link 1" icon="icon-link21" url="#" />
<p:menuitem id="om_lnk1112" value="Link 2" icon="icon-link21" url="#" />
<p:menuitem id="om_lnk1113" value="Link 3" icon="icon-link21" url="#" />
</p:submenu>
</p:submenu>
<p:submenu id="om_sm12" label="Submenu 1.2" icon="icon-add5">
<p:submenu id="om_sm121" label="Submenu 1.2.1" icon="icon-add5">
<p:menuitem id="om_lnk1211" value="Link 1" icon="icon-link21" url="#" />
<p:menuitem id="om_lnk1212" value="Link 2" icon="icon-link21" url="#" />
<p:menuitem id="om_lnk1213" value="Link 3" icon="icon-link21" url="#" />
</p:submenu>
</p:submenu>
</p:submenu>
</p:submenu>
</po:menu>
</po:tabmenu>
</h:form>
</ui:composition>