All menu items are not displayed inside the TieredMenu in PrimeFaces. The list also appears above the CommandButton.
Following is the code:
<p:commandButton id="adminButton" value="admin"/>
<p:tieredMenu overlay="true" trigger="adminButton" my="left top" at="left bottom">
<p:menuitem value="file" url=""/>
<p:submenu label="Next">
<p:menuitem value="edit" url=""/>
<p:menuitem value="revert" url=""/>
</p:submenu>
<p:menuitem value="home" url=""/>
<p:menuitem value="quit" url=""/>
<p:menuitem value="quit1" url=""/>
<p:menuitem value="quit2" url=""/>
<p:menuitem value="quit3" url=""/>
<p:menuitem value="quit4" url=""/>
<p:menuitem value="quit5" url=""/>
<p:menuitem value="quit6" url=""/>
<p:menuitem value="quit7" url=""/>
<p:menuitem value="quit8" url=""/>
<p:menuitem value="quit9" url=""/>
<p:menuitem value="quit10" url=""/>
</p:tieredMenu>
How to make all the menus visible and they have to visible below the CommandButton. Can anyone please help me on this?
Related
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" />
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>
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
I've got a JSF layout and every time I start my server I got this error:
/ UI Initialization Error
The center-pane element does not exist
The center-pane is a required element
Here is my code
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Meu Sistema</title>
<style type="text/css">
body {background-color: #eeeeee; font-size: 12px}
</style>
</h:head>
<h:body>
<div align="center">
<p:layout style="min-width:1200px;max-width:1020px;min-height:600px">
<p:layoutUnit position="north" size="250">
<h:graphicImage url="/images/funemac.png" />
</p:layoutUnit>
<p:layoutUnit position="west" size="220">
<h:form>
<p:menu style="width: 200px">
<p:submenu label="Menu">
<p:menuitem value="Início" action="index?faces-redirect=true"/>
</p:submenu>
<p:submenu label="Autor">
<p:menuitem value="Novo" action="NovoAutor?faces-redirect=true"/>
<p:menuitem value="Consulta" action="ConsultaAutor?faces-redirect=true"/>
</p:submenu>
<p:submenu label="Artigo">
<p:menuitem value="Novo" action="EnvioArtigo?faces-redirect=true"/>
<p:menuitem value="Consulta" action="ConsultaArtigo?faces-redirect=true"/>
<p:menuitem value="Avaliação" action="Avaliacoes?faces-redirect=true"/>
</p:submenu>
<p:submenu label="Revisor">
<p:menuitem value="Novo" action="NovoRevisor?faces-redirect=true"/>
<p:menuitem value="Consulta" action="ConsultaRevisor?faces-redirect=true"/>
</p:submenu>
<p:submenu label="Tema">
<p:menuitem value="Novo" action="NovoTema?faces-redirect=true"/>
<p:menuitem value="Consulta" action="ConsultaTema?faces-redirect=true"/>
</p:submenu>
<p:submenu label="Evento">
<p:menuitem value="Novo" action="NovoEvento?faces-redirect=true"/>
<p:menuitem value="Consulta" action="ConsultaEvento?faces-redirect=true"/>
</p:submenu>
<p:submenu label="Relatórios">
<p:menuitem value="Novo" action="Relatorios?faces-redirect=true"/>
</p:submenu>
<p:submenu label="Inscrições">
<p:menuitem value="Aluno" action="NovoParticipanteAluno?faces-redirect=true"/>
<p:menuitem value="Não Aluno" action="NovoParticipanteNaoAluno?faces-redirect=true"/>
<p:menuitem value="Palestrante" action="NovoParticipantePalestrante?faces-redirect=true"/>
<p:menuitem value="Inscrever-se em Evento" action="InscreverEmEvento?faces-redirect=true"/>
<p:menuitem value="Consulta" action="ConsultaInscricao?faces-redirect=true"/>
</p:submenu>
</p:menu>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center">
<ui:insert name="centro">
Bem-Vindo!
</ui:insert>
</p:layoutUnit>
</p:layout>
</div>
</h:body>
</html>
And this is a odd fact: when I got this message I just wipe out this part of code:
<p:submenu label="Inscrições">
<p:menuitem value="Aluno" action="NovoParticipanteAluno?faces-redirect=true"/>
<p:menuitem value="Não Aluno" action="NovoParticipanteNaoAluno?faces-redirect=true"/>
<p:menuitem value="Palestrante" action="NovoParticipantePalestrante?faces-redirect=true"/>
<p:menuitem value="Inscrever-se em Evento" action="InscreverEmEvento?faces-redirect=true"/>
<p:menuitem value="Consulta" action="ConsultaInscricao?faces-redirect=true"/>
</p:submenu>
save it. And refresh the page so everything goes normal. Then, a put all back and when I refresh the page again it works.
The problem is every time I rerun my server this happens.
Can anyone tell me what is wrong?
You are not doing anything wrong. I have found that the MenuBar in PrimeFaces is rather picky about the number of items in the menu. Try putting a separator between menuItems.
<p:submenu label="Separated">
<p:menuitem value="Item1" url="#"/>
<p:menuitem value="Item2" url="#"/>
<p:separator />
<p:menuitem value="Item3" url="#"/>
<p:menuitem value="Item4" url="#"/>
</p:submenu>