<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:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui" >
<p:layout fullPage="true">
<p:layoutUnit position="north" size="50">
<h:outputText value="Top content." />
</p:layoutUnit>
<p:layoutUnit position="south" size="100">
<h:outputText value="Bottom content." />
</p:layoutUnit>
<p:layoutUnit position="west" size="300">
<h:outputText value="Left content" />
</p:layoutUnit>
<p:layoutUnit position="east" size="200">
<h:outputText value="Right Content" />
</p:layoutUnit>
<p:layoutUnit position="center">
<h:outputText value="Center Content" />
</p:layoutUnit>
</p:layout>
</html>
The objective of the above code is to create a web page with 5 layouts as west, east, north, south, center using primefaces 5.0. I got only the outputtext one below the another not the panel units. I'm using ecplise, javaee iee luna, primefaces 5.0.jar, other primefaces components like textbox are working fine.
You must use JSF Standard tags(h:head, h:body), which I give an example below.
<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<!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="Content-Type"
content="text/html; charset=UTF-8" />
<meta name="viewport"
content="user-scalable=no,
width=device-width,
initial-scale=1.0,
maximum-scale=1.0"/>
</f:facet>
<title>layout</title>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="50">
<h:outputText value="Top content." />
</p:layoutUnit>
<p:layoutUnit position="south" size="100">
<h:outputText value="Bottom content." />
</p:layoutUnit>
<p:layoutUnit position="west" size="300">
<h:outputText value="Left content" />
</p:layoutUnit>
<p:layoutUnit position="east" size="200">
<h:outputText value="Right Content" />
</p:layoutUnit>
<p:layoutUnit position="center">
<h:outputText value="Center Content" />
</p:layoutUnit>
</p:layout>
</h:body>
</html>
Related
I'm working on a JSF project, all is working fine for the moment except for one thing: when I select a page from the left side bar, it is loaded correctly, when I click on a button, the button stays pressed but the action is not called.
button pressed but no action called
When I refresh the page and press it again, it works fine.
This happens to the other pages too.
Do you have any idea why is this happening ?!
I'm here to provide more details if needed!
The managed bean name and scope:
#ManagedBean(name="ModerateurBean")
#SessionScoped
The code of one of my pages:
<ui:composition template="template/default/main.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:b="http://bootsfaces.net/ui"
>
<ui:define name="content">
<div class="container-fluid">
<div class="row">
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h:form id="form">
<p:growl id="msgs" showDetail="true" />
<p:commandButton process="singleDT" update=":form:ajouter" icon="ui-icon-plus" value="Ajouter" oncomplete="PF('ajouterDialog').show()" />
<p:dataTable id="singleDT" var="o" value="#{ModerateurBean.listMod}" selectionMode="single" selection="#{ModerateurBean.selectedModerateur}" rowKey="#{o.id_personne}" valueChangeListener="#{ModerateurBean.valChanged}" onchange="submit()">
<p:column headerText="Nom ">
<h:outputText value="#{o.nom}" />
</p:column>
<p:column headerText="Prénom ">
<h:outputText value="#{o.prenom}" />
</p:column>
<p:column headerText="Cin ">
<h:outputText value="#{o.cin}" />
</p:column>
<p:column headerText="Adresse ">
<h:outputText value="#{o.adresse}" />
</p:column>
<p:column headerText="Numéro Téléphone ">
<h:outputText value="#{o.numtel}" />
</p:column>
</p:dataTable>
<p:commandButton process="singleDT" update=":form:voir" icon="ui-icon-search" value="Voir" oncomplete="PF('voirDialog').show()" />
<p:commandButton process="singleDT" update=":form:modifier" icon="ui-icon-pencil" value="Modifier" oncomplete="PF('modifierDialog').show()" />
<p:commandButton process="singleDT" update=":form:supprimer" icon="ui-icon-trash" value="Supprimer" oncomplete="PF('supprimerDialog').show()" />
<!-- dialog voir admin -->
<p:dialog header="Details administrateur" widgetVar="voirDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="voir" style="text-align:center;">
<p:panelGrid columns="2" rendered="#{not empty ModerateurBean.selectedModerateur}" columnClasses="label,value">
<h:outputText value="Nom" style="color:black"/>
<h:outputText value="#{ModerateurBean.selectedModerateur.nom}" />
<h:outputText value="Prénom " style="color:black" />
<h:outputText value="#{ModerateurBean.selectedModerateur.prenom}" />
<h:outputText value="Cin " style="color:black" />
<h:outputText value="#{ModerateurBean.selectedModerateur.cin}" />
<h:outputText value="Adresse " style="color:black" />
<h:outputText value="#{ModerateurBean.selectedModerateur.adresse}" />
<h:outputText value="Numéro Téléphone " style="color:black"/>
<h:outputText value="#{ModerateurBean.selectedModerateur.numtel}" />
</p:panelGrid>
</p:outputPanel>
</p:dialog>
<!-- dialog modifier moderateur -->
<p:dialog header="Modifier moderateur" widgetVar="modifierDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="modifier" style="text-align:center;">
<p:panelGrid columns="2" rendered="#{not empty ModerateurBean.selectedModerateur}" columnClasses="label,value">
<h:outputText value="Nom" style="color:black" />
<p:inputText value="#{ModerateurBean.selectedModerateur.nom}" />
<h:outputText value="Prénom " style="color:black" />
<p:inputText value="#{ModerateurBean.selectedModerateur.prenom}" />
<h:outputText value="Cin " style="color:black"/>
<p:inputText value="#{ModerateurBean.selectedModerateur.cin}" />
<h:outputText value="Adresse " style="color:black" />
<p:inputTextarea rows="6" cols="33" value="#{ModerateurBean.selectedModerateur.adresse}"/>
<h:outputText value="Numéro Téléphone " style="color:black" />
<p:inputMask id="phoneWithExt18" value="#{ModerateurBean.selectedModerateur.numtel}" mask="(999) 999-9999? x99999"/>
</p:panelGrid>
</p:outputPanel>
<p:commandButton action="#{ModerateurBean.ModifierModerateur}" icon="ui-icon-pencil" value="Modifier" update="#form" />
<p:commandButton process="singleDT" update="#form" icon="ui-icon-cancel" value="Annuler" oncomplete="PF('modifierDialog').hide()" />
</p:dialog>
<!-- dialog ajouter moderateur -->
<p:dialog header="Ajouter moderateur" widgetVar="ajouterDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="ajouter" style="text-align:center;">
<p:panelGrid columns="2" columnClasses="label,value">
<h:outputText value="Nom" style="color:black" />
<p:inputText value="#{ModerateurBean.nom}" />
<h:outputText value="Prénom " style="color:black" />
<p:inputText value="#{ModerateurBean.prenom}" />
<h:outputText value="Sexe " for="sexe" style="color:black" />
<p:selectOneMenu id="sexe" value="#{ModerateurBean.sexe}">
<f:selectItem itemValue="" itemLabel=" --selectionnez-- "></f:selectItem>
<f:selectItem itemValue="1" itemLabel="Homme"></f:selectItem>
<f:selectItem itemValue="2" itemLabel="Femme"></f:selectItem>
</p:selectOneMenu>
<h:outputText value="Cin " style="color:black" />
<p:inputText value="#{ModerateurBean.cin}" />
<h:outputText value="Adresse " style="color:black"/>
<p:inputTextarea rows="6" cols="33" vvalue="#{ModerateurBean.adresse}"/>
<h:outputText value="Numéro Téléphone " style="color:black" />
<p:inputMask id="phoneWithExt1" value="#{ModerateurBean.numtel}" mask="(999) 999-9999? x99999"/>
</p:panelGrid>
</p:outputPanel>
<p:commandButton update="#form" icon="ui-icon-check" value="Sauvegarder" action="#{ModerateurBean.AjouterModerateur}" oncomplete="PF('ajouterDialog').hide()" >
<f:ajax render="singleDT" update="#form"/></p:commandButton>
<p:commandButton process="singleDT" update="#form" icon="ui-icon-cancel" value="Annuler" oncomplete="PF('ajouterDialog').hide()" />
</p:dialog>
<!-- dialog supprimer moderateur -->
<p:dialog header="Supprimer moderateur" widgetVar="supprimerDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="supprimer" style="text-align:center;">
<p:panelGrid columns="2" rendered="#{not empty ModerateurBean.selectedModerateur}" columnClasses="label,value">
<h:outputText value="Id " style="color:black"/>
<h:outputText value="#{ModerateurBean.selectedModerateur.id_personne}" />
<h:outputText value="Nom" style="color:black"/>
<h:outputText value="#{ModerateurBean.selectedModerateur.nom}" />
<h:outputText value="Prénom " style="color:black"/>
<h:outputText value="#{ModerateurBean.selectedModerateur.prenom}" />
</p:panelGrid>
</p:outputPanel>
<p:commandButton value="Supprimer" action="#{ModerateurBean.SupprimerModerateur}" icon="ui-icon-trash" oncomplete="PF('supprimerDialog').hide()" update="#form" >
<p:commandButton process="singleDT" update="#form" icon="ui-icon-cancel" value="Annuler" oncomplete="PF('supprimerDialog').hide()" />
<p:confirm header="Confirmation" message="Etes vous sur?" icon="ui-icon-alert" />
</p:commandButton>
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
<p:commandButton value="Oui" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="Non" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
</p:confirmDialog>
</p:dialog>
</h:form>
</div>
</div>
</div>
</ui:define>
</ui:composition>
The images : image 1
image 2
image 3
image 4 : When i click on a button
Resume of the problem :
My problem was that when i click on a button it stays pressed but when i refresh the page it starts working normaly.
The solution :
i am working with facelets, so i have a template as you can see it here template structure
In main.xhtml i gather them and define styesheets and scripts in the head section, i work also with primefaces 6.x.
After i investagated in the console of Chrome Console of Chrome , the googlable errors stated that the probleme was in the conflict between primefaces and jquery that i manualy added.
what i did is remove all the jquery scripts and it started working again.
see the diffrence in the two codes :
main.xhtml (before)
<?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:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:b="http://bootsfaces.net/ui">
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>App Gestion d'Absence</title>
</f:facet>
<f:facet name="middle">
<h:outputStylesheet name="bootstrap/css/bootstrap.css" />
<h:outputStylesheet name="bootstrap/css/bootstrap.min.css" />
<h:outputStylesheet name="css/dashboard.css" />
<h:outputStylesheet name="metisMenu/metisMenu.min.css" />
<h:outputStylesheet name="bootstrap/css/sb-admin-2.css" />
<h:outputStylesheet name="morrisjs/morris.css" />
<h:outputStylesheet name="morrisjs/morris.min.js" />
<h:outputStylesheet name="morrisjs/morris.js" />
<h:outputStylesheet name="font-awesome/css/font-awesome.css" />
<h:outputStylesheet name="font-awesome/css/font-awesome.min.css" />
<h:outputStylesheet name="vendor/morrisjs/morris.css"/>
<!-- <h:outputStylesheet name="webjars/font-awesome/4.4.0/css/font-awesome.css"> -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></link>
<!-- jQuery -->
<h:outputScript library="bootstrap" name="bootstrap.js" />
<h:outputScript library="bootstrap" name="bootstrap.min.js" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<h:outputScript library="js" name="sb-admin-2.js" />
<h:outputScript library="js" name="sb-admin-2.min.js" />
</f:facet>
<f:facet name="last">
</f:facet>
</h:head>
<h:body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="header">
<ui:insert name="header">
<ui:include src="header.xhtml"/>
</ui:insert>
</div>
<div id="leftMenu">
<ui:insert name="leftMenu">
<ui:include src="leftMenu.xhtml"/>
</ui:insert>
</div>
<div id="content">
<ui:insert name="content">
<!-- <div>
<ui:include src="content.xhtml"/>
</div> -->
</ui:insert>
</div>
<div id="footer">
<ui:insert name="footer">
<ui:include src="footer.xhtml"/>
</ui:insert>
</div>
</h:body>
</html>
main.xhtml (after)
<?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:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:b="http://bootsfaces.net/ui">
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Gestion Absence ISMO</title>
</f:facet>
<link rel="shortcut icon" href="#{resources['images/favicon.ico']}" type="image/x-icon" />
<f:facet name="middle">
<h:outputStylesheet name="bootstrap/css/bootstrap.css" />
<h:outputStylesheet name="css/dashboard.css" />
<h:outputStylesheet name="bootstrap/css/sb-admin-2.css" />
<h:outputStylesheet name="font-awesome/css/font-awesome.css" />
<h:outputStylesheet name="font-awesome/css/font-awesome.min.css" />
<!-- <h:outputStylesheet name="webjars/font-awesome/4.4.0/css/font-awesome.css"> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" />
<h:outputScript name="bootstrap/js/bootstrap.js" />
</f:facet>
<f:facet name="last">
</f:facet>
</h:head>
<h:body>
<div id="header">
<ui:insert name="header">
<ui:include src="header.xhtml"/>
</ui:insert>
</div>
<div id="leftMenu">
<ui:insert name="leftMenu">
<ui:include src="leftMenu.xhtml"/>
</ui:insert>
</div>
<div id="content">
<ui:insert name="content">
<!-- <div>
<ui:include src="content.xhtml"/>
</div> -->
</ui:insert>
</div>
<div id="footer">
<ui:insert name="footer">
<ui:include src="footer.xhtml"/>
</ui:insert>
</div>
</h:body>
</html>
i hope this will help someone :)
I'm in the same situation of continuation of pressing button twice
This is the template
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>SXGA</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
</h:head>
<h:body style="zoom: 1;">
<h:panelGroup layout="block" styleClass="wrapper" id="wrapper">
<ui:insert name="header">
<ui:include src="/secured/template/commonHeader.xhtml" />
</ui:insert>
<ui:insert name="content">
<ui:include src="/secured/template/commonContent.xhtml" />
</ui:insert>
<ui:insert name="footer">
<ui:include src="/secured/template/commonFooter.xhtml" />
</ui:insert>
</h:panelGroup>
</h:body>
</html>
This is the header
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui">
<h:head>
<title>commonHeader</title>
<meta http-equiv="Content-Type"
content="application/xhtml+xml; charset=UTF-8" />
</h:head>
<h:body>
<ui:insert name="header">
<ui:include src="/secured/template/commonMenu.xhtml" />
</ui:insert>
</h:body>
</html>
This is the Menu
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>commonMenu</title>
<meta http-equiv="Content-Type"
content="application/xhtml+xml; charset=UTF-8" />
</h:head>
<h:body>
<ui:composition>
<p:megaMenu orientation="horizontal" style="margin-top:20px">
<p:submenu label="Gestione Rapporti" icon="ui-icon-check">
<p:column>
<p:submenu label="TV.1">
<p:menuitem value="TV.1.1" url="#" />
<p:menuitem value="TV.1.2" url="#" />
</p:submenu>
<p:submenu label="TV.2">
<p:menuitem value="TV.2.1" url="#" />
<p:menuitem value="TV.2.2" url="#" />
<p:menuitem value="TV.2.3" url="#" />
</p:submenu>
</p:column>
</p:submenu>
<p:submenu label="Autorizzazione Flussi" icon="ui-icon-document">
<p:column >
<p:submenu label="Sports.1">
<p:menuitem value="Sports.1.1" url="#" />
<p:menuitem value="Sports.1.2" url="#" />
</p:submenu>
<p:submenu label="Sports.2">
<p:menuitem value="Sports.2.1" url="#" />
<p:menuitem value="Sports.2.2" url="#" />
<p:menuitem value="Sports.2.3" url="#" />
</p:submenu>
</p:column>
</p:submenu>
<!-- <p:menuitem value="Quit" url="http://www.primefaces.org" icon="ui-icon-close" /> -->
<f:facet name="options">
<!--
<h:form>
<h:commandLink action="#{loginBean.doLogout}" value="Logout" />
</h:form>
<h:form>
<h:commandButton value="Avanti" action="#{loginBean.doLogout}" styleClass="btn btn-primary"/>
</h:form>
-->
<h:form>
<p:button value="Logout" outcome="#{loginBean.doLogout()}" id="iconOnly" icon="ui-icon-power" title="Icon Only" />
</h:form>
</f:facet>
</p:megaMenu>
</ui:composition>
</h:body>
</html>
This is the tipical page
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>SXGAWEB</title>
<meta http-equiv="Content-Type"
content="application/xhtml+xml; charset=UTF-8" />
</h:head>
<h:body>
<ui:composition template="/secured/template/commonTemplate.xhtml">
</ui:composition>
</h:body>
</html>
Before I was using
<h:form>
<h:commandLink action="#{loginBean.doLogout}" value="Logout" />
</h:form>
or
<h:form>
<h:commandButton value="Avanti" action="#{loginBean.doLogout}" styleClass="btn btn-primary"/>
</h:form>
All the problem started using PrimeFaces.
With BalusC suggestion continuation of pressing button twice i have solved more or less.
<p:button ... outcome="otherViewId" />
I can't understand the real problem. Is related with templating or in general is related with the normal usage of JSF.
In https://java.net/jira/browse/JAVASERVERFACES_SPEC_PUBLIC-790 a possible solution is the use of OmniFaces or the same script from Prime Faces http://showcase.omnifaces.org/scripts/FixViewState
A possible solution is mentioned here
how to fixe twice needed click inside JSF page?
And
h:commandButton/h:commandLink does not work on first click, works only on second click
Where the solution is the script.
I have also read
commandButton/commandLink/ajax action/listener method not invoked or input value not updated
and
Which XHTML files do I need to put in /WEB-INF and which not?.
I am new to stackoverflow and also this my very first question to this forum so if i am doing something wrong when i am posting here please let me know.
my question related to primefaces i tried with lot of solution but nothing work for me.
i am using...
jsf 2.2.4
primefaces 5.2
tomcat 8
below code is the my template.xhtml
it's located on /templates/template.xhtml
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<f:view contentType="text/html" id="fview">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page template with PrimeFaces</title>
<ui:debug />
<f:metadata>
<ui:insert name="metadata" />
</f:metadata>
<h:head>
<p:layout fullPage="true" resizeTitle="resize"
style="background-color:#FFFFFF;">
<p:layoutUnit position="north" size="68" id="north">
<ui:include src="header.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="west" id="west" resizable="false" size="225">
<ui:include src="menu.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="center" id="centerLayout">
<h:form id="mainForm">
<p:messages autoUpdate="true" id="msgs" showDetail="true"
showSummary="true" />
<ui:insert name="content" />
</h:form>
</p:layoutUnit>
<p:layoutUnit position="east" size="0"
style="width:0px; display:none;" id="east">
</p:layoutUnit>
<p:layoutUnit position="south" resizable="true" id="south">
<ui:include src="footer.xhtml" />
</p:layoutUnit>
</p:layout>
</h:head>
And below code is my home.xhtml
it's located on pages/home.xhtml
<ui:composition 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"
xmlns:f="http://java.sun.com/jsf/core"
template="../templates/template.xhtml">
<ui:define name="metadata">
</ui:define>
<ui:define name="content">
Hello world! Welcome to a page derived from a template
</ui:define>
when i run my application request successfully go to the controller and return. But browser come up with alert
> / UI Layout Initialization Error
The center-pane element does not exist.
The center-pane is a required element.
If any one know the proper answer for my question please help me.
Thanks in advance.
Your components and tags structure is all wrong. Here is how it should look.
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui" xmlns:f="http://java.sun.com/jsf/core">
<f:view encoding="UTF-8" contentType="text/html">
<ui:insert name="metadata" />
<h:head>
<title>Page template with PrimeFaces</title>
</h:head>
<h:body>
<ui:debug />
<p:layout fullPage="true" resizeTitle="resize" style="background-color:#FFFFFF;">
<p:layoutUnit position="north" size="68" id="north">
<ui:include src="header.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="west" id="west" resizable="false" size="225">
<ui:include src="menu.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="center" id="centerLayout">
<h:form id="mainForm">
<p:messages autoUpdate="true" id="msgs" showDetail="true" showSummary="true" />
<ui:insert name="content" />
</h:form>
</p:layoutUnit>
<p:layoutUnit position="east" size="0" style="width:0px; display:none;" id="east">
</p:layoutUnit>
<p:layoutUnit position="south" resizable="true" id="south">
<ui:include src="footer.xhtml" />
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
</html>
The main mistake: layout and content belong in body, not head.
Title and meta tags must be in head.
Template can't use f:metadata. The client view can. See f:metadata doc.
Define content type and encoding in f:view.
There is no id attribute in f:view.
By the way I don't recommend using ui:debug. It evaluates all the properties it can see, and sometimes provokes undesirable side-effects.
I saw on richfaces showcase that the best way to use rich:tabPanel with dynamic tabs is with a4j:repeat, but this doesn't work in my application.
This is my code:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>Java EE 6 Starter Application</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</h:head>
<h:body>
<h:form>
<div id="topArea">
<ui:insert name="topArea"/>
</div>
<div id="mainArea">
<ui:insert name="mainArea"/>
</div>
<div id="footerArea">
<ui:insert name="footerArea"/>
</div>
</h:form>
</h:body>
</html>
In topArea, I have this menu:
<rich:panelMenu>
<rich:panelMenuItem label="Clienti" name="Clienti" action="#{tabsBean.addTab()}" render="tabsPanel" />
</rich:panelMenu>
in mainArea, I have this tabPanel:
<rich:tabPanel id="tabsPanel" switchType="client" activeItem="#{tabsBean.activeTab}" >
<a4j:repeat value="#{tabsBean.tabs}" var="tab">
<rich:tab name="#{tab.name}">
<f:facet name="header">#{tab.name}</f:facet>
<h:form>
<h:outputText value="Enter Name:" />
<h:inputText id="input" />
<h:outputText value="Enter you interests:" />
<h:inputTextarea cols="17" rows="3" />
<h:outputText value="Choose your favourite color" />
<h:selectOneMenu>
<f:selectItem itemLabel="Red" itemValue="0" />
<f:selectItem itemLabel="Black" itemValue="1" />
<f:selectItem itemLabel="Green" itemValue="2" />
<f:selectItem itemLabel="White" itemValue="3" />
</h:selectOneMenu>
</h:form>
</rich:tab>
</a4j:repeat>
</rich:tabPanel>
My troubles are:
The tabs are not created
Why does the showcase use a nested form? Won't nested forms cause trouble?
Thanks
Dynamic tabs with a4j:repeat are supported since 4.3.0.Final only, refer here for more details:
http://www.bleathem.ca/blog/2013/01/dynamic-panels-with-a4jrepeat.html
For earlier versions c:forEach items="#{tabsBean.tabs}" var="tab" can be used.
I have to write P:contextMenu inside P:layout tag
The ContextMenu in first P:layout is not rendering.
My page is as follows:
<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"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:body>
<h:form id="statementsOfAccountForm">
<p:layout id="playout" style="min-width:400px;min-height:200px;">
<p:layoutUnit position="west" resizable="true" size="100"
minSize="40" maxSize="200" collapsible="true">
<h:form id="statementsOfAccountLeftForm">
<p:contextMenu>
<p:menuitem value="Account Summary"
/>
<p:menuitem value="Mini Statement"
/>
</p:contextMenu>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center" id="centerPage" collapsible="true">
<h:form id="statementsOfAccountCenterForm">
<div align="center">hi</div>
</h:form>
</p:layout>
</h:form>
Here Is my code,
!I see output as follows : Context Menu is not displayed in proper format. Page only displays plain links. What is wrong ?Please help.see the screen shot here
The update attribute likely cannot find a component with the id of centerPage and thus is not rendering.
Temporarily remove the update attribute from the menuItem's and then evaluate the client source for the generated client id of the components within the centerPage layoutUnit that you would like to update. You can then refer to these specifically by clientId.
One problem however is that the layoutUnit component likely does not generate a client side component for you to reference, so you will probably have to reference a component within this layoutUnit directly.
...
<p:menuitem value="Account Summary" update=":statementsOfAccountForm:centerPageGroup"
...
<p:layoutUnit position="center" id="centerPage" collapsible="true">
<h:panelGroup layout="block" id="centerPageGroup"><ui:include
src="#{helloBean.pageName}.xhtml" /></h:panelGroup>
</p:layoutUnit>
This is an example of how you can reference an id specifically using the update attribute.
I've tried your example (removed the references to the backing beans though) and it works as expected:
<h:form id="statementsOfAccountForm">
<p:layout id="playout" style="min-width:400px;min-height:200px;">
<p:layoutUnit position="west" resizable="true" size="100"
minSize="40" maxSize="200" collapsible="true">
<p:contextMenu>
<p:menuitem value="Account Summary" update="centerPage" />
<p:menuitem value="Mini Statement" update="centerPage" />
</p:contextMenu>
</p:layoutUnit>
<p:layoutUnit position="center" id="centerPage" collapsible="true">
<div align="center">
</div>
</p:layoutUnit>
</p:layout>
</h:form>
Result:
I suggest you try exactly the same thing as I did. After verifying that this works, add more code.
Your layout is residing within a single h:form. You should actually have a h:form within each layout unit. So try the following:
<p:layout id="playout" style="min-width:400px;min-height:200px;">
<p:layoutUnit position="west" resizable="true" size="100"
minSize="40" maxSize="200" collapsible="true">
<h:form id="statementsOfAccountLeftForm">
<p:contextMenu>
<p:menuitem value="Account Summary" update="centerPage"
actionListener="#{helloBean.changeCenterPage('accountSummary')}" />
<p:menuitem value="Mini Statement" update="centerPage"
actionListener="#{helloBean.changeCenterPage('miniStatement')}" />
</p:contextMenu>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center" id="centerPage" collapsible="true">
<h:form id="statementsOfAccountCenterForm">
<div align="center"><ui:include
src="#{helloBean.pageName}.xhtml" /></div>
</h:form>
</p:layoutUnit>
</p:layout>
</h:form>
Primefaces 3.3 User's Guide, page 245, says:
When working with forms and full page layout, avoid using a form that
contains layoutunits as generated dom may not be the same. So
following is invalid.
<p:layout fullPage="true">
<h:form>
<p:layoutUnit position="west" size="100">
<h:outputText value="Left Pane" />
</p:layoutUnit>
<p:layoutUnit position="center">
<h:outputText value="Right Pane" />
</p:layoutUnit>
</h:form>
</p:layout>
A layout unit must have it’s own form instead, also avoid trying to
update layout units because of same reason, update it’s content
instead.
Primefaces menus have a little problem when used inside layoutUnits. To overcome this issue you can use this CSS snippet:
<style type="text/css">
.ui-layout-unit-center {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: -1;
}
.ui-layout .ui-layout-noscroll div.ui-layout-bd {
overflow: visible;
}
</style>
or you can try another approach if the above doesn't work:
<style type="text/css">
.ui-layout-west {
z-index:20 !important;
overflow:visible;
}
.ui-layout-west .ui-layout-unit-content {
overflow:visible;
}
</style>