OmegaMenu - site specific

Forum rules
Please note that response time for technical support is within 3-5 business days.
cunda81
Posts: 10
Joined: 06 Feb 2013, 10:22

23 Dec 2016, 12:42

Hello,

can i make my omega menu (in sidebar) site specific?

I want to show in page 1 two different menuitems than in page 2.

Example
sidebar.xhtml:

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:jsf="http://xmlns.jcp.org/jsf"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:po="http://primefaces.org/omega">

    <div class="sidebar">
        <div class="nano">
            <div class="nano-content sidebar-scroll-content">
                <div class="logo">
                    <p:graphicImage name="logo.png" library="images" width="113"/>
                </div>

                <div class="profile">
                    <p:graphicImage name="images/profile.png" library="omega-layout" />
                    <a id="profile-button" href="#">
                        <span class="username">#{sessionBean.vorname} #{sessionBean.name}</span>
                        <i class="fa fa-fw fa-bars"></i>
                    </a>
                    <ul>
                        <li><a href="#{request.contextPath}/pages/home.xhtml"><i class="fa fa-fw fa-sliders"></i><span>Home</span></a></li>
                        <li><a href="#{request.contextPath}/pages/page1.xhtml"><i class="fa fa-fw fa-bell"></i><span>Page 1</span></a></li>
                        <li><a href="#{request.contextPath}/pages/page2.xhtml"><i class="fa fa-fw fa-home"></i><span>Page 2</span></a></li>
                        </h:form>
                    </ul>
                </div>

                <div class="menu">
                    <ui:insert name="metaMenu"/>
                </div>
            </div>
        </div>
    </div>
</ui:composition>
template.xhtml:

Code: Select all

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <f:facet name="first">
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
            <meta name="apple-mobile-web-app-capable" content="yes" />
        </f:facet>
        <title>Title</title>
        <h:outputScript name="js/nanoscroller.js" library="omega-layout" />
        <h:outputScript name="js/layout.js" library="omega-layout" />
        <h:outputScript name="calendar/de.js" library="js" />

        <ui:insert name="head"/>
    </h:head>

    <h:body styleClass="main-body">
        
        <div class="wrapper">
            <ui:include src="topbar.xhtml" />
            
            <ui:include src="sidebar.xhtml" />
            
            <div class="main">
                <ui:insert name="content"/>
            </div>
            
            <!--<ui:include src="footer.xhtml" />-->
        </div>
        
        <p:ajaxStatus style="width:32px;height:32px;position:fixed;right:7px;bottom:7px">
            <f:facet name="start">
                <p:graphicImage name="images/preloader.gif" library="omega-layout" style="width: 32px;"/>
            </f:facet>

            <f:facet name="complete">
                <h:outputText value="" />
            </f:facet>
        </p:ajaxStatus>
        
        <h:outputStylesheet name="css/animate.css" library="omega-layout" />
        <h:outputStylesheet name="css/nanoscroller.css" library="omega-layout" />
        <h:outputStylesheet name="css/layout.css" library="omega-layout" />
        <h:outputStylesheet name="Omega_Overwrite.css" library="css" />
        <h:outputStylesheet name="Omega_Zusatz_SE.css" library="css" />
        <h:outputStylesheet name="Omega_Zusatz_AM.css" library="css" />
    </h:body>

</html>
page1.xhtml:

Code: Select all

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:po="http://primefaces.org/omega"
                template="../templateomega/template.xhtml">
    <ui:define name="metaMenu">
        <po:menu>
            <p:menuitem id="om_dashboard_1_1" value="Page 1-1" icon="fa fa-home" outcome="/pages/page1_1"/>
            <p:menuitem id="om_dashboard_1_2" value="Page 1-2" icon="fa fa-home" outcome="/pages/page1_2"/>
        </po:menu>
    </ui:define>

    <ui:define name="content">
        <div class="ui-g">
            <div class="ui-g-12">
                <div class="card">
                    <h1><h:outputText value="Hallo #{sessionBean.vorname} #{sessionBean.name},"/></h1>
                </div>
            </div>
        </div>

    </ui:define>

</ui:composition>
page2.xhtml:

Code: Select all

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:po="http://primefaces.org/omega"
                template="../templateomega/template.xhtml">
    <ui:define name="metaMenu">
        <po:menu>
            <p:menuitem id="om_dashboard_2_1" value="Page 2-1" icon="fa fa-home" outcome="/pages/page2_1"/>
            <p:menuitem id="om_dashboard_2_2" value="Page 2-2" icon="fa fa-home" outcome="/pages/page2_2"/>
        </po:menu>
    </ui:define>

    <ui:define name="content">
        <div class="ui-g">
            <div class="ui-g-12">
                <div class="card">
                    <h1><h:outputText value="Hallo #{sessionBean.vorname} #{sessionBean.name},"/></h1>
                </div>
            </div>
        </div>

    </ui:define>

</ui:composition>

actually, it doesnt work.
the profile menu doesnt work too.
Last edited by cunda81 on 29 Dec 2016, 09:53, edited 4 times in total.
Primefaces 6.0, Primefaces-Extensions 6.0.0, MyFacesImpl 2.2.9,

cunda81
Posts: 10
Joined: 06 Feb 2013, 10:22

28 Dec 2016, 11:06

has anyone ideas?
Primefaces 6.0, Primefaces-Extensions 6.0.0, MyFacesImpl 2.2.9,

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

30 Dec 2016, 13:16

This is an expected behavior. Because, topbar and profile bar operations is made by OmegaMenu widget in layout.js. I think you don't have po:menu in dashboard.xhtml or home.xhtml. Therefore, it's causing your problem.

I think you can try the following solution for this issue;

sidebar.xhtml

Code: Select all

...
   <div class="menu">
         <h:form>
               <po:menu>
                     <ui:insert name="metaMenu" />
                </po:menu>
         </h:form>
   </div>
...
page1.xhtml

Code: Select all

...
<ui:define name="metaMenu">
     <p:menuitem id="om_dashboard_1_1" value="Page 1-1" icon="fa fa-home" outcome="/pages/page1_1"/>
     <p:menuitem id="om_dashboard_1_2" value="Page 1-2" icon="fa fa-home" outcome="/pages/page1_2"/>
</ui:define>
...
page2.xhtml

Code: Select all

...
<ui:define name="metaMenu">
       <p:menuitem id="om_dashboard_2_1" value="Page 2-1" icon="fa fa-home" outcome="/pages/page2_1"/>
       <p:menuitem id="om_dashboard_2_2" value="Page 2-2" icon="fa fa-home" outcome="/pages/page2_2"/>
</ui:define>
...

cunda81
Posts: 10
Joined: 06 Feb 2013, 10:22

30 Dec 2016, 13:40

thanks a lot.

situation now:

- the profile menu works fine.
- the (po) menu dont show items (in every page).

result-html-code:

Code: Select all

<div class="menu">
<form id="j_id_o" name="j_id_o" method="post" action="/pages/page1.xhtml" enctype="application/x-www-form-urlencoded">
 <ul id="j_id_o:j_id_p" class="menu-container"></ul>
 <input name="j_id_o_SUBMIT" value="1" type="hidden">
 <input id="j_id__v_0:javax.faces.ViewState:2" name="javax.faces.ViewState" value="O5YVOOJvue3bZmsNuGb0PlnJvMFD2Mhcb/cSTLvVgy9B8pVp" autocomplete="off" type="hidden">
</form>
</div>
can i add an another menu like p:megaMenu ?
Primefaces 6.0, Primefaces-Extensions 6.0.0, MyFacesImpl 2.2.9,

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

30 Dec 2016, 18:08

the (po) menu dont show items (in every page).
- I couldn't replicate this issue. it works fine for me. Please attach sample codes.
can i add an another menu like p:megaMenu ?
- it is not possible.

cunda81
Posts: 10
Joined: 06 Feb 2013, 10:22

02 Jan 2017, 09:50

hello,

i modified the omega-tag sources.

sidebar.xhtml

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/omega">

    <div class="sidebar">
        <div class="nano">
            <div class="nano-content sidebar-scroll-content">
                <div class="logo">
                    <p:graphicImage name="images/logo.png" library="omega-layout" width="113"/>
                </div>

                <div class="profile">
                    <p:graphicImage name="images/profile.png" library="omega-layout" />
                    <a id="profile-button" href="#">
                        <span class="username">Peggy Olson</span>
                        <i class="fa fa-fw fa-cog"></i>
                    </a>
                    <ul>
                        <li><a href="#"><i class="fa fa-fw fa-sliders"></i><span>Account</span></a></li>
                        <li><a href="#"><i class="fa fa-fw fa-bell"></i><span>Notifications</span><span class="menu-badge">2</span></a></li>
                        <li><a href="#"><i class="fa fa-fw fa-sign-out"></i><span>Logout</span></a></li>
                    </ul>
                </div>

                <div class="menu">
                    <h:form>
                        <po:menu>
                            <ui:insert name="metaMenu" />
                        </po:menu>
                    </h:form>
                </div>

                <!--<div class="menu">-->
                    <!--<po:menu>-->
                        <!--<p:menuitem id="om_dashboard" value="Dashboard" icon="fa fa-home" outcome="/dashboard"/>-->
                        <!--<p:submenu id="om_components" label="Components" icon="fa fa-sitemap">-->
                            <!--<p:menuitem id="om_sample" value="Sample Page" icon="fa fa-columns" outcome="/sample" />-->
                            <!--<p:menuitem id="om_forms" value="Forms" icon="fa fa-code" outcome="/forms" />-->
                            <!--<p:menuitem id="om_data" value="Data" icon="fa fa-table" outcome="/data" />-->
                            <!--<p:menuitem id="om_panels" value="Panels" icon="fa fa-list-alt" outcome="/panel" />-->
                            <!--<p:menuitem id="om_overlays" value="Overlays" icon="fa fa-square" outcome="/overlay" />-->
                            <!--<p:menuitem id="om_menus" value="Menus" icon="fa fa-minus-square-o" outcome="/menu" />-->
                            <!--<p:menuitem id="om_messages" value="Messages" icon="fa fa-circle-o-notch" outcome="/messages" />-->
                            <!--<p:menuitem id="om_charts" value="Charts" icon="fa fa-area-chart" outcome="/charts" />-->
                            <!--<p:menuitem id="om_file" value="File" icon="fa fa-arrow-circle-o-up" outcome="/file" />-->
                            <!--<p:menuitem id="om_misc" value="Misc" icon="fa fa-user-secret" outcome="/misc" />-->
                        <!--</p:submenu>-->
                        <!--<p:menuitem id="om_db_landing" value="Landing" icon="fa fa-certificate" outcome="/landing"/>-->
                        <!--<p:submenu id="om_default" label="Template Pages" icon="fa fa-life-saver">-->
                            <!--<p:menuitem id="om_empty" value="Empty Page" icon="fa fa-square-o" outcome="/empty" />-->
                            <!--<p:menuitem id="om_login" value="Login Page" icon="fa fa-sign-in" outcome="/login" />-->
                            <!--<p:menuitem id="om_error" value="Error Page" icon="fa fa-exclamation-circle" outcome="/error" />-->
                            <!--<p:menuitem id="om_404" value="404 Page" icon="fa fa-times" outcome="/404" />-->
                            <!--<p:menuitem id="om_access" value="Access Denied Page" icon="fa fa-exclamation-triangle" outcome="/access" />-->
                        <!--</p:submenu>-->
                        <!--<p:submenu id="om_hierarchy" label="Menu Hierarchy" icon="fa fa-gg">-->
                            <!--<p:submenu id="om_sm1" label="Submenu 1" icon="fa fa-sign-in">-->
                                <!--<p:submenu id="om_sm11" label="Submenu 1.1" icon="fa fa-sign-in">-->
                                    <!--<p:menuitem id="om_lnk111" value="Link 1.1.1" icon="fa fa-sign-in" url="#" />-->
                                    <!--<p:menuitem id="om_lnk112" value="Link 1.1.2" icon="fa fa-sign-in" url="#" />-->
                                    <!--<p:menuitem id="om_lnk113" value="Link 1.1.3" icon="fa fa-sign-in" url="#" />-->
                                <!--</p:submenu>-->
                                <!--<p:submenu id="om_sm12" label="Submenu 1.2" icon="fa fa-sign-in">-->
                                    <!--<p:menuitem id="om_lnk121" value="Link 1.2.1" icon="fa fa-sign-in" url="#" />-->
                                <!--</p:submenu>-->
                            <!--</p:submenu>-->
                            <!--<p:submenu id="om_sm2" label="Submenu 2" icon="fa fa-sign-in">-->
                                <!--<p:submenu id="om_sm21" label="Submenu 2.1" icon="fa fa-sign-in">-->
                                    <!--<p:menuitem id="om_lnk211" value="Link 2.1.1" icon="fa fa-sign-in" url="#" />-->
                                    <!--<p:menuitem id="om_lnk212" value="Link 2.1.2" icon="fa fa-sign-in" url="#" />-->
                                <!--</p:submenu>-->
                                <!--<p:submenu id="om_sm22" label="Submenu 2.2" icon="fa fa-sign-in">-->
                                    <!--<p:menuitem id="om_lnk221" value="Link 2.2.1" icon="fa fa-sign-in" url="#" />-->
                                <!--</p:submenu>-->
                            <!--</p:submenu>-->
                        <!--</p:submenu>-->

                        <!--<p:menuitem id="om_doc" value="Documentation" icon="fa fa-book" outcome="/docs"/>-->
                    <!--</po:menu>-->
                <!--</div>-->
            </div>
        </div>
    </div>
</ui:composition>
page1.xhtml

Code: Select all

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
                
    <ui:define name="title">Page 1</ui:define>

    <ui:define name="metaMenu">
        <p:menuitem id="om_dashboard_1_1" value="Page 1-1" icon="fa fa-home" outcome="/page1_1"/>
    </ui:define>

    <ui:define name="content">

        <div class="ui-g ui-fluid">
            <div class="ui-g-12 ui-lg-6">
                <div class="card">
                    <h1>Page 1</h1>
                </div>
            </div>
        </div>

    </ui:define>
</ui:composition>
page2.xhtml

Code: Select all

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
                
    <ui:define name="title">Page 2</ui:define>

    <ui:define name="metaMenu">
        <p:menuitem id="om_dashboard_2_2" value="Page 2-2" icon="fa fa-home" outcome="/pages/page2_2"/>
    </ui:define>
    
    <ui:define name="content">
    
        <div class="ui-g ui-fluid">
            <div class="ui-g-12 ui-lg-6">
                <div class="card">
                    <h1>Page 2</h1>
                </div>
            </div>
        </div>
        
    </ui:define>

</ui:composition>
page1_1.xhtml

Code: Select all

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
                
    <ui:define name="title">Page 1_1</ui:define>

    <ui:define name="metaMenu"/>

    <ui:define name="content">
    
        <div class="ui-g ui-fluid">
            <div class="ui-g-12 ui-lg-6">
                <div class="card">
                    <h1>Page 1-1</h1>
                </div>
            </div>
        </div>
        
    </ui:define>

</ui:composition>
page2_2.xhtml

Code: Select all

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
                
    <ui:define name="title">Page 2_2</ui:define>

    <ui:define name="metaMenu"/>

    <ui:define name="content">
    
        <div class="ui-g ui-fluid">
            <div class="ui-g-12 ui-lg-6">
                <div class="card">
                    <h1>Page 2-2</h1>
                </div>
            </div>
        </div>
        
    </ui:define>

</ui:composition>
if i open
or
, the menuitems arent there.
The profile-menu works fine. the three menuitems are displaying.
Primefaces 6.0, Primefaces-Extensions 6.0.0, MyFacesImpl 2.2.9,

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

02 Jan 2017, 10:11

I tested with your sample codes, but I didn't see a problem. My screenshots;

Image

Image

cunda81
Posts: 10
Joined: 06 Feb 2013, 10:22

02 Jan 2017, 10:39

hmmmm... i have edited the pom before:

from

Code: Select all


      <dependencies>
        <dependency>
            <groupId>org.primefaces</groupId>
            <artifactId>primefaces</artifactId>
            <version>6.0</version>
        </dependency>
        <dependency>
            <groupId>org.apache.myfaces.core</groupId>
            <artifactId>myfaces-api</artifactId>
            <version>2.2.9</version>
        </dependency>
        <dependency>
            <groupId>org.apache.myfaces.core</groupId>
            <artifactId>myfaces-impl</artifactId>
            <version>2.2.9</version>
        </dependency>

        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.5</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>jsp-api</artifactId>
            <version>2.1</version>
            <scope>provided</scope>
        </dependency>
    </dependencies>
to

Code: Select all

    <dependencies>
        <dependency>
            <groupId>org.primefaces</groupId>
            <artifactId>primefaces</artifactId>
            <version>6.0</version>
        </dependency>
        <dependency>
            <groupId>org.glassfish</groupId>
            <artifactId>javax.faces</artifactId>
            <version>2.2.8</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.5</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>jsp-api</artifactId>
            <version>2.1</version>
            <scope>provided</scope>
        </dependency>
    </dependencies>
and in web.xml:

from

Code: Select all

    <listener>
        <listener-class>com.sun.faces.config.ConfigureListener</listener-class>
    </listener>
to

Code: Select all

    <listener>
        <listener-class>org.apache.myfaces.webapp.StartupServletContextListener</listener-class>
    </listener>
and now, i try with the orginal pom.xml and web.xml, the items are now there and works fine.
Primefaces 6.0, Primefaces-Extensions 6.0.0, MyFacesImpl 2.2.9,

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

02 Jan 2017, 12:36

Glad to hear, thanks for the update!

cunda81
Posts: 10
Joined: 06 Feb 2013, 10:22

02 Jan 2017, 12:48

Thanks you a lot.

Why is there a difference between MyFaces and Mojarra?
Primefaces 6.0, Primefaces-Extensions 6.0.0, MyFacesImpl 2.2.9,

Post Reply

Return to “Omega - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests