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>
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'm trying open a dialog using Primefaces 3.5. I create a MenuBar and an view.xhtml with <p:dialog> .I want to open this view.xhtml as dialog modal.
I am using: JSF2 and Primefaces 3.5
I'm trying this
<h:form>
<p:menubar>
<!-- cadastros -->
<p:submenu label="Cadastro">
<p:submenu label="Participantes">
<p:menuitem value="Aluno" />
<p:menuitem value="Professor"/>
</p:submenu>
<p:separator/>
<p:menuitem value="Turma" onclick="#{menuMB.openDialog('/turma/view.xhtml')}"></p:menuitem>
</p:submenu>
<!-- termina cadastros -->
<!-- relatorios -->
<p:submenu label="Relatorios">
</p:submenu>
</p:menubar>
</h:form>
view.xhtml
<p:dialog header="Turmas" appendToBody="false" modal="true" widgetVar="turmaView">
<h:form>
<h:outputLabel value="I am a modal" />
</h:form>
</p:dialog>
managed bean
#ManagedBean
public class MenuMB {
public void openDialog(String view){
RequestContext.getCurrentInstance().execute("view.show()");
}
}
Any idea ?
Solved
view.xhtml
<p:dialog header="Turmas" widgetVar="turmaView" appendToBody="true" modal="true" resizable="false" draggable="false">
<h:form>
<h:outputLabel value="I am a modal" />
</h:form>
</p:dialog>
menubar
<h:form>
<p:menubar>
<p:submenu label="Cadastro">
<p:submenu label="Participante">
<p:menuitem value="Aluno"></p:menuitem>
<p:menuitem value="Professor"></p:menuitem>
</p:submenu>
<p:separator/>
<p:menuitem value="Turma" onclick="PF('turmaView').show()"/>
</p:submenu>
</p:menubar>
</h:form>
<ui:include src="/turma/view.xhtml"/>
now works.
It's not possible to execute server side methods wrapping them in onclick listeners or similars like that. You're confused about client side javascript functions and server side listeners. According to PF docs:
MenuItem has two use cases, directly navigating to a url using GET or doing a POST to execute an action.
So there's no way to use it for client-side specific purpose, as it's going to perform one request. What you could do is to show the dialog after it happens:
<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:p="http://primefaces.org/ui">
<h:head />
<h:body>
<h:form>
<p:menubar>
<p:menuitem value="Turma" oncomplete="dlg.show();" />
</p:menubar>
<p:dialog header="Modal Dialog" widgetVar="dlg" modal="true"
height="100">
<h:outputText value="This is a Modal Dialog." />
</p:dialog>
</h:form>
</h:body>
</html>
This properly displays the dialog when the p:menuItem is clicked. An ajax request with no listener is performed and when it's completed, the javascript code to show it runs.
I'm trying to make primefaces elements appear on my pages by taking code from the showcase, the menu worked well after some modifications but the selectonemenu refuses to appear.
it's not showing anything in the layout unit.
This is my xhtml code :
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html 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:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui" xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Consultation Travaux Soumis (Etudiant)</title>
<style type="text/css">
.ui-widget,.ui-widget .ui-widget {
font-size: 90% !important;
}
</style>
</h:head>
<body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="158" header="Intranet" resizable="false" closable="false" collapsible="false">
<h:graphicImage value="/img/Logo.jpg" width="110" height="110"/>
<h:outputText value=" Consultation de la liste de travaux" />
</p:layoutUnit>
<p:layoutUnit position="west" size="200" header="Menu" resizable="true" closable="true" collapsible="true">
<h:form id="pmenu">
<p:menu style="width:90%">
<p:submenu label="Navigation">
<p:menuitem value="Acceuil" action="#" immediate="true" icon="ui-icon ui-icon-home"/>
<p:menuitem value="Deconnexion" action="#{PagesController.logout}" immediate="true" icon="ui-icon ui-icon-locked"/>
</p:submenu>
<p:submenu label="Services">
<p:menuitem value="Emploi du Temps" actionListener="#" immediate="true" ajax="false" icon="ui-icon ui-icon-suitcase" disabled="true"/>
<p:menuitem value="Relevé de Notes" actionListener="#" immediate="true" ajax="false" icon="ui-icon ui-icon-folder-collapsed" disabled="true"/>
<p:menuitem value="Remise de Doc." url="/secure/remisetrEt.xhtml" immediate="true" ajax="false" icon="ui-icon ui-icon-folder-open" />
</p:submenu>
<p:submenu label="Infos">
<p:menuitem value="Réclamation" actionListener="#" immediate="true" ajax="false" icon="ui-icon ui-icon-alert" />
<p:menuitem value="A Propos" actionListener="#" immediate="true" ajax="false" icon="ui-icon ui-icon-info" />
</p:submenu>
</p:menu>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center">
<h:form>
<h:panelGrid columns="1" style="margin-bottom:10px" cellpadding="5">
<p:selectOneMenu>
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItem itemLabel="Option 1" itemValue="1" />
<f:selectItem itemLabel="Option 2" itemValue="2" />
<f:selectItem itemLabel="Option 3" itemValue="3" />
</p:selectOneMenu>
</h:panelGrid>
</h:form>
</p:layoutUnit>
</p:layout>
</body>
</html>
Your code works. Which version of primefaces are you using? Which app server are you deploying to? Which browser have you tested in? Is there anything else on the page besides the selectonemenu?
Try the following. Work with Primefaces 4 on Glassfish 3.
<?xml version='1.0' encoding='UTF-8' ?>
<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:c="http://java.sun.com/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui"
xmlns:fn="http://java.sun.com/jsp/jstl/functions">
<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type" />
<title>Test</title>
<link type="text/css" rel="stylesheet"
href="#{request.contextPath}/css/default.css" />
<link type="text/css" rel="stylesheet"
href="#{request.contextPath}/css/custom.css" />
</f:facet>
</h:head>
<h:body>
<h:form>
<h:panelGrid columns="1" style="margin-bottom:10px" cellpadding="5">
<p:selectOneMenu>
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItem itemLabel="Option 1" itemValue="1" />
<f:selectItem itemLabel="Option 2" itemValue="2" />
<f:selectItem itemLabel="Option 3" itemValue="3" />
</p:selectOneMenu>
</h:panelGrid>
</h:form>
</h:body>
</f:view>
</html>
The problem was that I have to bind my selectonemenu to a property of a managed bean I have.
Hi guys I want to link from my Menubar to certain Tab, but always the first tab is activated I tried lot of solutions from StackOverflow but nothing works. I think the problems is that i use a preRenderView. I hope someone can help me :)
I use jsf 2.1 and primefaces 3.5
The code for the menubar
<p:menubar >
<p:submenu label="Taskbox" >
<p:menuitem value="Inbox" url="taskbox.xhtml" />
<p:menuitem value="Sent" url="taskbox.xhtml#sentTab"/>
<p:menuitem value="Trash" url="taskbox.xhtml" onclick="tabPanel.select(3)"/>
<p:menuitem value="New Message" url="#"/>
</p:submenu>
</p:menubar>
Der code for the tabs
<ui:composition template="/META-INF/templates/templateContentSplit.xhtml">
<ui:define name="metadata">
<f:metadata>
<f:event type="preRenderView" listener="#{taskboxBean.initPage}" />
</f:metadata>
</ui:define>
<ui:define name="metadata">
<f:metadata>
<f:event type="preRenderView" listener="#{taskboxBean.initPage}" />
</f:metadata>
</ui:define>
<ui:define name="title">
<h:outputText value="Taskbox" />
</ui:define>
<ui:define name="contentLeft">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<h:form id="postForm">
<p:tabView id="tabViewPosts" widgetVar="tabPanel">
<p:tab title="Inbox" id="inboxTab">
<ui:include src="/user/inboxTaskbox.xhtml" />
</p:tab>
<p:tab title="Sent" id="sentTab">
<ui:include src="/user/sentTaskbox.xhtml" />
</p:tab>
<p:tab title="Trash" id="trashTab">
<ui:include src="/user/trashTaskbox.xhtml" />
</p:tab>
</p:tabView>
</h:form>
</ui:define>
<ui:define name="contentRight">
<h:form id="contentForm">
<ui:include src="/user/detailTaskbox.xhtml" />
</h:form>
</ui:define>
</ui:composition>
For your <p:menuitem /> use an outcome attribute, which specifies the navigation case, instead of url, that's intended to be used with an absolute and not JSF related url. Here you've got a basic explanation case, based in #Daniel Camargo's suggested code:
tabs.xhtml:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head />
<h:body>
<f:metadata>
<f:viewParam name="index" value="#{index}" />
<f:event type="preRenderView" listener="#{bean.initPage}" />
</f:metadata>
<h:form>
<p:menubar>
<p:submenu label="Taskbox">
<!-- Different ways of passing the view param -->
<p:menuitem value="Inbox" outcome="tabs?index=0" />
<p:menuitem value="Sent" outcome="tabs.xhtml?index=1" />
<p:menuitem value="Trash" outcome="tabs">
<f:param name="index" value="2" />
</p:menuitem>
<!-- External url -->
<p:menuitem value="Google" url="http://www.google.com"
target="_blank" />
</p:submenu>
</p:menubar>
</h:form>
<h:form id="postForm">
<p:tabView id="tabViewPosts" widgetVar="tabPanel"
activeIndex="#{index}">
<p:tab title="Inbox" id="inboxTab">
A
</p:tab>
<p:tab title="Sent" id="sentTab">
B
</p:tab>
<p:tab title="Trash" id="trashTab">
C
</p:tab>
</p:tabView>
</h:form>
</h:body>
</html>
Note the outcome attribute here let's the JSF servlet evaluate the destination url. Basically, an outcome with value of tabs will get rendered as basePath/tabs.xhtml at client side. So basically you are making the page be directed to itself, but changing the viewParam value.
See also:
When should I use h:outputLink instead of h:commandLink?
Remember that this is a zero based index. You tabPanel.select(3) will try to activate the 4th tab which doesn't exist. Try doing this:
The menu:
<h:form>
<p:menubar >
<p:submenu label="Taskbox" >
<p:menuitem value="Trash" url="taskbox.xhtml?index=2"/>
</p:submenu>
</p:menubar>
</h:form>
The Taskbox page:
<f:metadata>
<f:viewParam name="index" value="#{viewMBean.index}" />
</f:metadata>
<h:form id="postForm">
<p:tabView id="tabViewPosts" widgetVar="tabPanel" activeIndex="#{viewMBean.index}">
<p:tab title="Inbox" id="inboxTab">
A
</p:tab>
<p:tab title="Sent" id="sentTab">
B
</p:tab>
<p:tab title="Trash" id="trashTab">
C
</p:tab>
</p:tabView>
</h:form>
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