I have a problem consisting of not being able to put an icon to the left of the menubar and the menu items to the right, can anyone help me?
<h:body>
<h:form>
<p:menubar>
<f:facet name="options" >
<h:link outcome="index.xhmtl">
<p:graphicImage styleClass="a" name="img/logoGovernoTO.png"/>
</h:link>
</f:facet>
<p:menuitem value="NOTÍCIA" url="#"/>
<p:menuitem value="FÓRUM" url="#"/>
<p:menuitem value="EXPLORE" url="#"/>
<p:menuitem value="SOBRE" url="#"/>
<p:menuitem value="CONTATO" url="#"/>
</p:menubar>
</h:form>
</h:body>
I would have to stay like this
Have you tried with:
<p:graphicImage styleClass="a" name="img/logoGovernoTO.png" style="float: left" />
<p:menuitem value="NOTÍCIA" url="#" style="float: right" />
Related
I want to use dataExporter as onclick action in my right-click contextMenu.
Sadly, I have no idea how to manage this :(
dataExporter(simple export table date to XLS) and contextMenu are binded to the same dataTable.
here's the code:
<p:contextMenu for = "tableForm">
<p:menuitem value="View" icon="ui-icon-search"/>
<p:menuitem value="Delete" icon="ui-icon-close" />
</p:contextMenu>
<p:commandLink ajax="false" width="24">
<p:graphicImage value="/resources/images/Excel-icon.png" />
<p:dataExporter type="xls" target="dataTable"
fileName="daneCentrumDataTable" />
</p:commandLink>
Anyone knows how to do this?
Following #Kukeltje idea something like this:
<p:contextMenu for="dataTable">
<p:menuitem value="View" icon="ui-icon-search"/>
<p:menuitem value="Delete" icon="ui-icon-close" />
<p:menuitem value="Export" onclick="$('#export').click()" />
</p:contextMenu>
<div style="display: none;">
<p:commandLink id="export" ajax="false" width="24">
<p:dataExporter type="xls" target="dataTable" fileName="daneCentrumDataTable" />
</p:commandLink>
</div>
P.S.: My h:form has prependId="false"
I want to use other primefaces components in p:menuitem. Components display in page but actionlistener doesn't work and inputtext's value doesn't push to bean's value1 attribute. Is there any way to handle this problem?
<p:commandButton id="dynaButton" value="Search" type="button" icon="ui-icon-extlink"/>
<p:slideMenu overlay="true" trigger="dynaButton" my="left top" at="left bottom" style="width:180px">
<p:submenu label="Search">
<p:menuitem>
<p:outputLabel value="Search by Id" />
<p:inputText value="#{bean.value1}" />
<p:commandButton value="save" actionListener="#{bean.method1}" />
</p:menuitem>
</p:submenu>
<p:submenu label="Search By Product">
<p:menuitem value="Delete" ajax="false" icon="ui-icon-close"/>
</p:submenu>
<p:submenu label="Location" icon="ui-icon-extlink">
<p:submenu label="Prime Links">
<p:menuitem value="Prime" url="http://www.prime.com.tr" />
<p:menuitem value="PrimeFaces" url="http://www.primefaces.org" />
</p:submenu>
<p:menuitem value="Mobile" />
</p:submenu>
</p:slideMenu>
Try change your code to the following:
<p:menuitem>
<p:outputLabel value="Search by Id" />
<p:inputText id="inputField" value="#{bean.value1}" />
<p:commandButton process="inputField #this" value="save" actionListener="#{bean.method1}" />
</p:menuitem>
Check these answers too:
Why to add process=“#this” explicitly to p:commandButton to get action invoked?
Understanding process and update attributes of PrimeFaces
You miss the update attribute.
Note that menuitems can be directly processed, but cannot be directly updated, you need to update the entire menu
<p:slideMenu id="menu" ...>
<p:submenu label="Search">
<p:menuitem id="item">
<p:outputLabel value="Search by Id" />
<p:inputText value="#{bean.value1}" />
<p:commandButton value="save" actionListener="#{bean.method1}" process="item" update="menu" />
<h:outputText value="#{bean.value1}" />
</p:menuitem>
</p:submenu>
</p:slideMenu>
I'm trying to implement a menu with JSF 2.2 and Primefaces 5
I added PanelMenu of primefaces. Let's say I have a code snippet like this:
<p:panelMenu>
<p:menuitem value="Home" url="homee.xhtml" icon="ui-icon-home"/>
<p:submenu label="User Operations">
<p:menuitem value="ETC" actionListener="#{menuView.save}" icon="ui-icon-folder-open" />
<p:menuitem value="New ETC" actionListener="#{menuView.update}" icon="ui-icon-plusthick" />
</p:submenu>
</p:panelMenu>
The problem is, when I do this, that single menuItem which doesn't have a surrounding subMenu doesn't show up in the menu.
How can I overcome this?
Thanks.
you need to put the single menuitem inside a menu tag and outside the panelMenu :
<p:menu>
<p:menuitem value="Home" url="homee.xhtml" icon="ui-icon-home"/>
</p:menu>
<p:panelMenu>
<p:submenu label="User Operations">
<p:menuitem value="ETC" actionListener="#{menuView.save}" icon="ui-icon-folder-open" />
<p:menuitem value="New ETC" actionListener="#{menuView.update}" icon="ui-icon-plusthick" />
</p:submenu>
</p:panelMenu>
I am using a Layout structure that has centerLayout, westLayout,northLayout
When i run the file, i take this following error:
"/UI Layout Initialization Error.
The center-pane element does not exist.
The-center pane is a required element."
my template is :
<p:layoutUnit position="north" size="100" collapsible="true">
<header>
<div class="logo1">
<img src="#{facesContext.externalContext.requestContextPath}/resources/images/logo1.png" alt="Gestion d'accès et de habilitations" />
</div>
<ul>
<li><h:link outcome="/profile" value="Profile"/></li>
<li>Se déconnecté</li>
</ul>
<div class="logo2">
<img src="#{facesContext.externalContext.requestContextPath}/resources/images/logo2.png" alt="Altijari Bank" />
</div>
</header>
</p:layoutUnit>
<p:layoutUnit position="west" size="210" header="Menus" collapsible="true">
<h:form id="frmMenu1">
<p:accordionPanel multiple="true" id="acc" activeIndex="0">
<p:tab title="Gestion des agences">
<p:menu style="width:100%" id="m1">
<p:menuitem value="Consulter" action="#{agenceController.prepareList()}"/>
<p:menuitem value="Ajouter" action="#{agenceController.prepareCreate()}" />
</p:menu>
</p:tab>
<p:tab title="Gestion des utilisateurs">
<p:menu style="width:100%" id="m2">
<p:menuitem value="Consulter" action="#{utilisateurController.prepareList()}"/>
<p:menuitem value="Ajouter" action="#{utilisateurController.prepareCreate()}" />
</p:menu>
</p:tab>
<p:tab title="Gestion des fonctions">
<p:menu style="width:100%" id="m3">
<p:menuitem value="Consulter" action="#{fonctionController.prepareList()}"/>
<p:menuitem value="Ajouter" action="#{fonctionController.prepareCreate()}" />
</p:menu>
</p:tab>
<p:tab title="Gestion des applications">
<p:menu style="width: 100%" id="m4">
<p:menuitem value="Consulter" action="#{applicationController.prepareList()}" />
<p:menuitem value="Ajouter" action="#{applicationController.prepareCreate()}"/>
</p:menu>
</p:tab>
<p:tab title="Gestion des fiches " >
<p:menu style="width: 100%" id="m5">
<p:menuitem value="Consulter" action="#{ficheController.prepareList()}"/>
<p:menuitem value="Ajouter" action="#{ficheController.prepareCreate()}" />
</p:menu>
</p:tab>
<p:tab title="Administration" >
<p:menu style="width: 100%" id="m6">
<p:menuitem value="Consulter" action="#{groupeController.prepareList()}" />
<p:menuitem value="Ajouter" action="#{groupeController.prepareCreate()}" />
</p:menu>
</p:tab>
<p:tab title="Traçabilité" >
<p:menu style="width: 100%" id="m7">
<p:menuitem value="Consulter" action="#{traceController.prepareList()}" />
<p:menuitem value="Ajouter" action="#{traceController.prepareCreate()}" />
</p:menu>
</p:tab>
</p:accordionPanel>
</h:form>
</p:layoutUnit>
I use primefaces 3.2, jsf 2.1, glassfish 3.1.2.1
Please help me.
As the error message suggests you are missing the center part of the layout.
It is a required element.
Define one similar to this:
<p:layoutUnit position="center">
YOUR CONTENT
</p:layoutUnit>
This happens when there is an error in the part of the page that is inside the center pane part. This can be an invalid xhtml tag, something wrong in a bean being called or whatever. Look in your server logging an see if there is anything there.
This seems to be a bug in Primefaces 6.2 and has been answered here: UI Layout Initialization Error PrimeFaces 6.2
On primefaces 5.1 I had the case when options ware set by controler bean
<pe:layout id="fullPage" options="#{layoutController.layoutOptions}" stateCookie="true">
and in that controler I was setting child layoutPanes that ware not defined
// options for nested center layout
LayoutOptions childCenterOptions = new LayoutOptions();
center.setChildOptions(childCenterOptions);
// options for center-north pane
LayoutOptions centerNorth = new LayoutOptions();
centerNorth.addOption("size", "50%");
childCenterOptions.setNorthOptions(centerNorth);
So if you are extending primefaces showcase, be sure to disable configuration on the unexsisting panes.
Since this error is not shown on other missing panes (east, west,..) this could be a big headache to solve.
My Below code display menu based on if not database is empty, my problem is, it displays the second submenu but does not display the first one. i have got same validation on both
<h:panelGrid rendered="#{not empty dataBase}" width="100%">
<h:form>
<p:menubar style="height: 25px;background-color: #9999ff" >
<h:panelGrid rendered="#{not empty rights}" >
<p:submenu label="Master" >
<p:menuitem value="Client" url="test.xhtml" />
<p:menuitem value="TaxMaster" url="test.xhtml" />
<p:menuitem value="Quotation" url="test.xhtml" />
<p:separator />
<p:menuitem value="Area" url="test.xhtml" />
</p:submenu>
</h:panelGrid>
<p:submenu label="Back Office" icon="ui-icon-pencil">
<p:submenu label="Book Issue" icon="ui-icon-contact">
<p:menuitem value="Add" url="BookIssue_Add.xhtml" />
<p:menuitem value="Edit" url="BookIssue_Edit.xhtml" />
<p:menuitem value="View" url="test.xhtml" />
</p:submenu>
</p:submenu>
</p:menubar>
</h:form>
</h:panelGrid>
<p:submenu/> must be child of <p:menubar/> otherwise it wont be rendered