I am new to mobile development and have trouble rendering a pm:page after invoking a method on managed bean.
My page has a primefaces overlaypanel with a button to search and a datatable for display the result.
The method is invoked correctly but the page with the outcome is never displayed (pm:page id="resultados").
The method is very simple and only assembles a list of Strings.
According to the primefaces user guide and searching the internet, I tried the following
I've tested it with PrimeFaces 5.0 and 5.1
<!-- action + actionListener -->
<p:commandButton id="search1"
value="search 1"
actionListener="#{myMB.search}"
action="pm:resultados"
update="#all" /> <!-- ????? -->
<!-- client API onComplete -->
<p:commandButton id="search2"
value="search 2"
action="#{myMB.search}"
onComplete="PrimeFaces.Mobile.navigate('#pm:resultados', {reverse: false, transition: 'fade'});"
update="#all" /> <!-- ????? -->
<!-- action + return -->
<p:commandButton id="search3"
value="search 3"
action="#{myMB.searchMobile}"
update="#all"/> <!-- ????? -->
Below is the full source code
#ManagedBean(name="myMB")
#ViewScoped
public class MyMB implements Serializable {
private List<String> lista = new ArrayList<String>();
public void search() {
for(int i = 1; i <= 10; i++) {
lista.add("" + i);
}
}
public String searchMobile() {
for(int i = 10; i <= 20; i++) {
lista.add("" + i);
}
return "pm:resultados";
}
public List<String> getLista() {
return lista;
}
public void setLista(List<String> lista) {
this.lista = lista;
}
}
xhtml page
<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:pm="http://primefaces.org/mobile">
<f:view renderKitId="PRIMEFACES_MOBILE" />
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</h:head>
<h:body>
<h:form id="formMobile" prependId="false">
<pm:page id="pmTopo">
<pm:content>
<div id="divTop">
<h:panelGrid columns="1">
<h:panelGroup layout="block">
<p:commandLink id="linkFiltros">
<p:graphicImage library="imagens" name="filter-mobile.png" id="filterIMG" />
</p:commandLink>
<p:commandLink id="linkMenu">
<p:graphicImage library="imagens" name="menu-mobile.png" id="menuIMG"/>
</p:commandLink>
<p:graphicImage library="imagens" name="image1.png" id="logoIMG"/>
</h:panelGroup>
</h:panelGrid>
</div>
<div id="divFilter">
<p:overlayPanel for="linkFiltros" widgetVar="painelFiltros" at="left" showEffect="overlay">
<h:panelGrid columns="1">
<p:commandButton id="search1"
value="search 1"
actionListener="#{myMB.search}"
action="pm:resultados"
update="#all" /> <!-- ????? -->
<p:commandButton id="search2"
value="search 2"
action="#{myMB.search}"
onComplete="PrimeFaces.Mobile.navigate('#pm:resultados', {reverse: false, transition: 'fade'});"
update="#all" /> <!-- ????? -->
<p:commandButton id="search3"
value="search 3"
action="#{myMB.searchMobile}"
update="#all"/> <!-- ????? -->
</h:panelGrid>
</p:overlayPanel>
</div>
</pm:content>
</pm:page>
<pm:page id="resultados">
<pm:content>
<div id="divConteudo">
<p:growl id="mensagemMobile"
showDetail="true"
showSummary="false"
autoUpdate="true" />
<p:dataTable id="tableResult"
var="item"
value="#{myMB.lista}"
widgetVar="tabela">
<p:column headerText="Column 1" priority="1">
<h:outputText value="#{item}" />
</p:column>
</p:dataTable>
</div>
</pm:content>
</pm:page>
</h:form>
</h:body>
</html>
The problem occurred due to errors in the attribute "update" in commandButton.
The correct approach is
<p:commandButton id="botao1" value="search" actionListener="#{myMB.search}" action="pm:resultados"
update=":resultados:formMobile:tabelaTeste" />
The entire page was so
<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:pm="http://primefaces.org/mobile">
<f:view renderKitId="PRIMEFACES_MOBILE" />
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</h:head>
<h:body>
<pm:page id="principal">
<pm:content>
<h:form id="formMobile" prependId="false">
<h:panelGrid columns="1">
<p:commandButton id="search1"
value="Search"
actionListener="#{myMB.search}"
action="pm:resultados"
update=":resultados:formMobile:tabelaTeste" />
</h:panelGrid>
</h:form>
</pm:content>
</pm:page>
<pm:page id="resultados">
<pm:header> Resultados </pm:header>
<pm:content>
<h:form id="formMobile" prependId="false">
<p:button outcome="pm:principal" value="Back" />
<div id="divConteudo">
<p:growl id="mensagemMobile"
showDetail="true"
showSummary="false"
autoUpdate="true" />
<p:dataTable id="tabelaTeste"
var="item"
value="#{myMB.lista}"
widgetVar="tabela"
tableStyleClass="ui-responsive ui-table table-stripe ui-table-columntoggle">
<p:column headerText="valor" priority="1">
<h:outputText value="#{item}" />
</p:column>
</p:dataTable>
</div>
</h:form>
</pm:content>
</pm:page>
</h:body>
</html>
Related
When I click on log out button, primefaces' components are strewed before the login.xhtml page appears !
the action property calls the logout() function.
the source code of the logout() function is :
public String logout() throws IOException
{
HttpServletRequest request = ((HttpServletRequest) FacesContext.getCurrentInstance().getExternalContext().getRequest());
request.getSession().removeAttribute("userManager");
request.getSession().invalidate();
return "../login.xhtml";
}
I used <p:dock> with items component in the page which calls the logout function, and images (items) are layed vertically when I click logout button.
here is my Login.xhtml page :
<!DOCTYPE html>
<h:head>
<title>Login Page</title>
</h:head>
<h:body>
<h:form>
Votre code alliance : #{loginBean.codeAliance} <br/>
<h:panelGrid columns="2" cellpadding="5" >
<h:outputLabel for="codeAliance" value="Code Aliance:" />
<p:inputText value="#{userManager.codeAliance}" id="codeAliance" required="true" label="codeAliance" />
<h:outputLabel for="password" value="Password:" />
<p:password value="#{userManager.password}" id="password" required="true" label="password" />
<f:facet name="footer">
<p:commandButton id="loginButton" value="Login" action="#{userManager.connexion}" ajax="false"/>
</f:facet>
</h:panelGrid>
</h:form>
</h:body>
And here is bienvenue.xhtml page which contains <p:dock> :
<!DOCTYPE html>
<h:head>
<title>Premier exemple JSF 2.0</title>
</h:head>
<h:body>
<h:form>
<p:dock position="top">
<p:menuitem value="Users" icon="/Images/Users.png" url="#"/>
<p:menuitem value="Quitter" icon="/Images/Logout.png" url="#"/>
<p:menuitem value="Users" icon="/Images/Users.png" url="#"/>
<p:menuitem value="Users" icon="/Images/Users.png" url="#"/>
</p:dock>
</h:form>
<p:commandButton value="lyes" icon="/Images/Logout.png" action="#{userManager.logout}"/>
</h:body>
Can someone help me !?
I create facelet tag component, glue:input and glue:group
input.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:c="http://java.sun.com/jsp/jstl/core"
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:ocp="http://java.sun.com/jsf/composite/ocpcommon"
>
<c:set var="id" value="#{not empty id ? id : (not empty name ? name : action)}" />
<c:set var="required" value="#{not empty required and required}" />
<c:set var="render" value="#{not empty render ? 'panel-group-'.concat(render) : (not empty id ? 'panel-group-'.concat(id) : 'panel-group-'.concat(mame))}" />
<c:set var="validator" value="#{not empty validator ? validator : 'safeTextValidator'}" />
<h:panelGroup id="panel-group-#{id}" layout="block" class="clearfix">
<label for="#{name}" class="#{(not empty required and required) ? 'required' : ''}">#{label}#{(not empty required and required) ? '* ' : ''}</label>
<div class="input">
<c:choose>
<c:when test="#{type == 'java.lang.String' or type == 'text'}">
<h:inputText value="#{value}" id="#{name}" styleClass="xLarge span4" required="#{required}" label="#{label}">
<f:validator validatorId="#{validator}"/>
<f:ajax execute="#{execute}" render="#{render}" />
</h:inputText>
</c:when>
<c:when test="#{type == 'java.util.Date' or type == 'calendar'}">
<p:calendar value="#{a.value}" id="#{name}" navigator="true" label="#{label}">
<p:ajax event="dateSelect" listener="#{listener}" update="panel-group-#{id}" />
</p:calendar>
</c:when>
<c:when test="#{type == 'checkbox'}">
<h:selectBooleanCheckbox value="#{value}" id="#{name}" styleClass="xLarge" required="#{required}" label="#{label}">
<f:ajax execute="#{execute}" render="#{render}" />
</h:selectBooleanCheckbox>
<span>#{inlinehelp}</span>
</c:when>
<c:when test="#{type == 'textarea'}">
<h:inputTextarea value="#{value}" id="#{name}" styleClass="xLarge span4" required="#{required}" label="#{label}" style="width: 400px; height: 100px;" >
<f:ajax execute="#{execute}" render="#{render}" />
</h:inputTextarea>
</c:when>
<c:when test="#{type == 'org.eqaula.glue.model.Catalogue' or type == 'select'}">
</c:when>
<c:otherwise>
<h:inputText value="#{value}" id="#{name}" styleClass="xLarge span4" required="#{required}" label="#{label}">
<f:ajax execute="#{execute}" render="#{render}" />
</h:inputText>
</c:otherwise>
</c:choose>
<h:graphicImage value="#{resource['success.gif']}" rendered="#{value != null}"
styleClass="validation-status" />
<span class="help-inline"><br/>#{inlinehelp} <ocp:message forId="#{name}" /></span>
</div>
</h:panelGroup>
</ui:composition>
group.xhtml
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:c="http://java.sun.com/jsp/jstl/core"
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:ocp="http://java.sun.com/jsf/composite/ocpcommon"
>
<c:set var="id" value="#{not empty id ? id : (not empty name ? name : action)}" />
<c:set var="required" value="#{not empty required and required}" />
<c:set var="group" value="#{not empty group ? group : null}" />
<h:panelGroup id="panel-group-#{id}" layout="block" class="clearfix">
<label for="#{name}" class="#{(not empty required and required) ? 'required' : ''}">#{label}#{(not empty required and required) ? '* ' : ''}</label>
<div class="input">
<p:commandButton id="button-#{id}" action="#{controller[addAction]}" process="#this"
value="#{messages['common.add']} #{label}" ajax="true"
icon="ui-icon-plus" update="group-data-table-#{id}"/>
<p:dataTable var="m" value="#{group.members}" id="group-data-table-#{id}"
editable="true" rendered="#{not empty group.members}"
selection="#{controller[bussinesEntity]}" >
<f:facet name="header">
#{group.attribute.label}
</f:facet>
<!-- //TODO activar ajax
<p:ajax event="rowEdit" listener="#{controller[editListener]}" update=":form:messages" />
<p:ajax event="rowEditCancel" listener="#{tableBean.onCancel}" update=":form:messages" />
-->
<p:column headerText="#{messages['common.name']}" style="width:125px">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{m.name}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{m.name}" style="width:100%"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="#{messages['common.options']}" style="width:50px">
<p:rowEditor />
</p:column>
</p:dataTable>
</div>
</h:panelGroup>
</ui:composition>
The input and group tags rendered well in this page, inclusive input tag works fine in Save button:
<html xml:lang="en" lang="en" 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:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:p="http://primefaces.org/ui"
xmlns:s="http://jboss.org/seam/faces"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:glue="http://eqaula.org/jsf/facelets"
xmlns:ocp="http://java.sun.com/jsf/composite/ocpcommon">
<ui:composition template="/WEB-INF/view/templates/glue.xhtml">
<ui:define name="content">
<f:metadata>
<f:viewParam name="id" value="#{profileHome.profileId}" />
<s:viewAction action="#{profileHome.load}" if="#{conversation.transient}"/>
</f:metadata>
<h2>#{messages['common.edit']} #{messages['Profile']}: #{profileHome.instance.fullName}</h2>
<h:form id="profile">
<div class="actions">
<h:commandButton id="save" action="#{profileHome.saveAjax()}" value="#{messages['common.save']}" styleClass="btn primary"/>
<h:commandButton action="/pages/home.xhtml?faces-redirect=true"
value="#{messages['common.cancel']}" styleClass="btn" immediate="true"/>
</div>
<!-- Attributos para usuario -->
<glue:input id="fstn" name="firstname" type="text" label="#{messages['common.firstname']}" value="#{profileHome.instance.firstname}" required="true" inlinehelp="#{messages['common.firstname.inlinehelp']}" execute="#this save" render="fstn"/>
<glue:input id="srn" name="surname" type="text" label="#{messages['common.surname']}" value="#{profileHome.instance.surname}" required="true" inlinehelp="#{messages['common.surname.inlinehelp']}" execute="#this save"/>
<glue:input id="cod" name="code" type="text" label="#{messages['profile.dni']}" value="#{profileHome.instance.code}" required="false" inlinehelp="#{messages['profile.dni.inlinehelp']}" execute="#this save"/>
<glue:input id="eml" name="text" type="email" label="#{messages['common.email']}" value="#{profileHome.instance.email}" required="true" validator="emailValidator" inlinehelp="#{messages['common.email.inlinehelp']}" execute="#this save"/>
<glue:input id="emlSecret" name="emailSecret" type="checkbox" value="#{profileHome.instance.emailSecret}" required="true" inlinehelp="#{messages['common.keepemailsecret']}" execute="#this save"/>
<glue:input id="bio" name="bio" type="textarea" label="#{messages['common.bio']}" value="#{profileHome.instance.bio}" required="false" inlinehelp="#{messages['common.bio.inlinehelp']}" execute="#this save"/>
<!-- Atributos par administrador -->
<!-- Attributos personalizados -->
<c:forEach items="#{profileHome.instance.attributes}" var="a" >
<glue:input id="#{a.structureAttribute.id}" name="#{a.name}" type="#{a.type}" label="#{a.structureAttribute.label}" value="#{a.value}" required="#{a.structureAttribute.required}" inlinehelp="#{a.structureAttribute.helpInline}" execute="#this save" listener="#{account.saveAjax()}" render="#{a.structureAttribute.id} #{a.structureAttribute.render != null ? a.structureAttribute.render : ''}"/>
</c:forEach>
<!-- Atributos relación -->
<glue:group id="#{profileHome.findGroup('spouse').id}" label="#{profileHome.findGroup('spouse').attribute.label}" group="#{profileHome.findGroup('spouse')}" inlinehelp="#{profileHome.findGroup('spouse').attribute.helpInline}"
controller="#{profileHome}"
addAction="addAction"
editListener="editListener">
</glue:group>
</h:form>
</ui:define>
</ui:composition>
</html>
In group.xhtml, the p:commandButton should fire addAction into profileHome bean
#Named
#ViewScoped
public class ProfileHome
....
public void addAction() {
System.out.println("TODO rowAddAction");
}
The button not works!. I try to isolate the button in the page, this works without tags glue:input o glue:group.
Please an advice.
PD. I use primefaces 4.3.1, jsf2, jboss AS7, seam3
I have this problem, in one page when I click commandButton "editer" it works : it runs the method in managedBean and it returns me to the target page but in this target page I must double click the link button to send me to the other target page, but if I click only the "annuler" button (it only redirect me to the target page without any changes in the database) I don't have this problem
Here is the page that contains "editer" and "annuler" button :
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<body>
<ui:composition template="./template_admin.xhtml">
<ui:define name="content">
<p:panel header="Edition d'un utilisateur" id="panel" >
<h:panelGrid columns="2" columnClasses="column" cellpadding="5">
<h:outputText value="Nom : " />
<p:inplace id="basic" emptyLabel="Veuillez saisir un Nom" editor="true" >
<p:inputText value="#{editUserController.u1.nom}" />
</p:inplace>
<h:outputText value="Prénom : " />
<p:inplace id="basic1">
<p:inputText value="#{editUserController.u1.prenom}" />
</p:inplace>
<h:outputText value="Type (Dlbclick): "/>
<p:inplace id="selectableInplace" label="#{editUserController.u1.type}" effectSpeed="fast" event="dblclick">
<p:selectOneMenu label="Type d'impression" id="rfhfbs" value="#{editUserController.u1.type}" required="true" requiredMessage="veuillez choisir un type d'impression" >
<f:selectItems value="#{editUserController.types}" />
</p:selectOneMenu>
</p:inplace>
<h:outputText value="Division : " />
<p:inplace id="basic2">
<p:inputText value="#{editUserController.u1.division}" />
</p:inplace>
<h:outputText value="Grade : " />
<p:inplace id="basic3">
<p:inputText value="#{editUserController.u1.grade}" />
</p:inplace>
<h:outputText value="Téléphone du poste : " />
<p:inplace id="basic4">
<p:inputText value="#{editUserController.u1.telPoste}" />
</p:inplace>
<h:outputText value="Email : " />
<p:inplace id="basic5">
<p:inputText value="#{editUserController.u1.email}" />
</p:inplace>
<h:outputText value="Autres : " />
<p:inplace id="basic6">
<p:inputText value="#{editUserController.u1.autres}" />
</p:inplace>
<h:outputText value="Identifiant : " />
<p:inplace id="basic7">
<p:inputText value="#{editUserController.u1.identifiant}" />
</p:inplace>
<h:outputText value="Mot de passe : " />
<p:inplace id="basic8">
<p:inputText value="#{editUserController.u1.motdepasse}" />
</p:inplace>
<h:outputText value="Retapez le Mot de passe : " />
<p:inplace id="basic9">
<p:inputText value="#{editUserController.u1.motdepasse}" />
</p:inplace>
</h:panelGrid>
<p:commandButton value="Editer" action="#{editUserController.updateUser()}" update="panel" ></p:commandButton>
<p:commandButton value="Annuler" action="utilisateurs" ajax="false" ></p:commandButton>
</p:panel>
</ui:define>
</ui:composition>
</body>
</html>
This above works well
Here is the target page in both cases:
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<body>
<ui:composition template="./template_admin.xhtml">
<ui:define name="content">
<p:commandButton value="ajouter" style="margin-bottom: 20px;" />
<p:dataTable id="carsTable" var="car" value="#{utilisateursController.lu}">
<f:facet name="header">
Expand rows to see detailed information
</f:facet>
<p:column style="width:4%">
<p:rowToggler />
</p:column>
<p:column style="width:48%">
<f:facet name="header">
Id
</f:facet>
<h:outputText value="#{car.id}" />
</p:column>
<p:column style="width:48%">
<f:facet name="header">
Nom et prénom
</f:facet>
<h:outputText value="#{car.nom} #{car.prenom}" />
</p:column>
<p:column>
<p:commandLink ajax="false" value="Editer" action="updateUser_v1" >
<f:setPropertyActionListener value="#{car}" target="#{editUserController.u1}" />
</p:commandLink>
</p:column>
<p:column>
<p:commandLink value="supprimer" />
</p:column>
<p:rowExpansion>
<h:panelGrid id="display" columns="2" cellpadding="4" style="width:300px;"
styleClass=" ui-widget-content grid">
<h:outputText value="Division : " />
<h:outputText id="model" value="#{car.division}" />
<h:outputText value="Grade : " />
<h:outputText id="year" value="#{car.grade}" />
<h:outputText value="Type : " />
<h:outputText value="#{car.type}"/>
<h:outputText value="Télephone du poste : " />
<h:outputText value="#{car.telPoste}"/>
<h:outputText value="Email : " />
<h:outputText value="#{car.email}"/>
<h:outputText value="Autres : " />
<h:outputText value="#{car.autres}"/>
<h:outputText value="Identifiant : " />
<h:outputText value="#{car.identifiant}"/>
<h:outputText value="Mot de passe : " />
<h:outputText value="#{car.motdepasse}"/>
</h:panelGrid>
<h:commandLink value="liste des commandes" ></h:commandLink><br></br>
<h:commandLink value="liste des messages" ></h:commandLink>
</p:rowExpansion>
</p:dataTable>
</ui:define>
</ui:composition>
</body>
</html>
In this page just above I have the problem
And here is all managedBean :
#ManagedBean
#ViewScoped
public class utilisateursController implements Serializable{
utilisateursHelper uh;
List<Utilisateur> lu;
public List<Utilisateur> getLu() {
return lu;
}
/**
* Creates a new instance of utilisateurs
*/
public utilisateursController() {
uh = new utilisateursHelper();
lu = uh.getUtilisateurs();
}
}
And here is the other managedBean :
#ManagedBean
#SessionScoped
public class editUserController implements Serializable{
utilisateursHelper uh;
Utilisateur u1;
String[] Types = {"utilisateur", "operateur", "admin"};
public String[] getTypes() {
return Types;
}
public Utilisateur getU1() {
return u1;
}
public void setU1(Utilisateur u1) {
this.u1 = u1;
}
/**
* Creates a new instance of editUserController
*/
public editUserController() {
u1 = new Utilisateur();
uh = new utilisateursHelper();
}
public String updateUser() {
uh.updateUtilisateur(u1);
return "utilisateurs";
}
}
And here is the facelet template :
<!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:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet name="style.css" library="css" />
<h:outputStylesheet name="styleTableExpansion.css" library="css" />
</h:head>
<h:body>
<div id="page">
<div id="bloc-principal">
<h:form prependId="false">
<div id="templatemo_header_wrapper">
<div id="templatemo_header">
<div id="site_title">
<h1>
<span>vous etes connect en tant qu' #{userController.u1.nom} mais le newNum #{commmandeController.nouvelId}</span>
</h1>
</div>
<ul class="social_network">
<li><a id="ident">1dd</a></li>
<li>on voie celle ci</li>
<li><a class="identifiant">#{userController.identifiant}2ddd</a></li>
<li><h:commandLink action="#{userController.deconnecter}"><h:graphicImage library="images" name="facebook.png" /></h:commandLink></li>
</ul>
</div> <!-- end of templatemo_header -->
</div> <!-- end of templatemo_header_wrapper -->
<div id="templatemo_banner_wrapper">
<div id="templatemo_banner">
</div> <!-- end of templatemo_banner -->
</div> <!-- end of templatemo_banner_wrapper -->
<div id="templatemo_content_wrapper">
<div id="templatemo_content">
<ui:insert name="content">content</ui:insert>
</div> <!-- end of templatemo_content -->
</div> <!-- end of templatemo_content_wrapper -->
</h:form>
</div>
<div id="templatemo_footer_wrapper">
<div id="templatemo_footer">
<center>
</center>
</div> <!-- end of footer -->
</div>
</div>
</h:body>
</html>
I hope I have explained well my problem.
Thank you in advance.
try setting ajax="false" in case of <p:commandButton/>
This is the first time I am using prime 3.3.1 with JSF 2.1. I have all the necessary jars for prime faces and I am using the Wizard from their website https://www.primefaces.org/showcase/ui/panel/wizard.xhtml.
Here is my code:
wizard.xthml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div 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"
lang="en" xml:lang="en" style="padding-bottom: 8px;">
<h:form>
<p:growl id="growl" sticky="true" showDetail="true" />
<p:wizard widgetVar="wiz" flowListener="#{userWizard.onFlowProcess}">
<p:tab id="personal" title="Personal">
<p:panel header="Personal Details">
<h:messages errorClass="error" />
<h:panelGrid columns="2" columnClasses="label, value" styleClass="grid">
<h:outputText value="Firstname: *" />
<p:inputText required="true" label="Firstname" value="#{userWizard.user.firstname}" />
<h:outputText value="Lastname: *" />
<p:inputText required="true" label="Lastname" value="#{userWizard.user.lastname}" />
<h:outputText value="Age: " />
<p:inputText value="#{userWizard.user.age}" />
<h:outputText value="Skip to last: " />
<h:selectBooleanCheckbox value="#{userWizard.skip}" />
</h:panelGrid>
</p:panel>
</p:tab>
<p:tab id="address" title="Address">
<p:panel header="Adress Details">
<h:messages errorClass="error" />
<h:panelGrid columns="2" columnClasses="label, value">
<h:outputText value="Street: " />
<p:inputText value="#{userWizard.user.street}" />
<h:outputText value="Postal Code: " />
<p:inputText value="#{userWizard.user.postalCode}" />
<h:outputText value="City: " />
<p:inputText value="#{userWizard.user.city}" />
<h:outputText value="Skip to last: " />
<h:selectBooleanCheckbox value="#{userWizard.skip}" />
</h:panelGrid>
</p:panel>
</p:tab>
<p:tab id="contact" title="Contact">
<p:panel header="Contact Information">
<h:messages errorClass="error" />
<h:panelGrid columns="2" columnClasses="label, value">
<h:outputText value="Email: *" />
<p:inputText required="true" label="Email" value="#{userWizard.user.email}" />
<h:outputText value="Phone: " />
<p:inputText value="#{userWizard.user.phone}" />
<h:outputText value="Additional Info: " />
<p:inputText value="#{userWizard.user.info}" />
</h:panelGrid>
</p:panel>
</p:tab>
<p:tab id="confirm" title="Confirmation">
<p:panel header="Confirmation">
<h:panelGrid id="confirmation" columns="6">
<h:outputText value="Firstname: " />
<h:outputText styleClass="outputLabel" value="#{userWizard.user.firstname}" />
<h:outputText value="Lastname: " />
<h:outputText styleClass="outputLabel" value="#{userWizard.user.lastname}" />
<h:outputText value="Age: " />
<h:outputText styleClass="outputLabel" value="#{userWizard.user.age}" />>
<h:outputText value="Street: " />
<h:outputText styleClass="outputLabel" value="#{userWizard.user.street}" />
<h:outputText value="Postal Code: " />
<h:outputText styleClass="outputLabel" value="#{userWizard.user.postalCode}" />
<h:outputText value="City: " />
<h:outputText styleClass="outputLabel" value="#{userWizard.user.city}" />
<h:outputText value="Email: " />
<h:outputText styleClass="outputLabel" value="#{userWizard.user.email}" />
<h:outputText value="Phone " />
<h:outputText styleClass="outputLabel" value="#{userWizard.user.phone}" />
<h:outputText value="Info: " />
<h:outputText styleClass="outputLabel" value="#{userWizard.user.info}" />
<h:outputText />
<h:outputText />
</h:panelGrid>
<p:commandButton value="Submit" update="growl" actionListener="#{userWizard.save}" />
</p:panel>
</p:tab>
</p:wizard>
</h:form>
</div>
UserWizard.java:
package com.verisign.vcc.program.marketing.mbean;
import javax.faces.event.ActionEvent;
import org.primefaces.event.FlowEvent;
public class UserWizard
{
private boolean skip;
public void save(ActionEvent actionEvent)
{
// Persist user
}
public boolean isSkip()
{
return skip;
}
public void setSkip(boolean skip)
{
this.skip = skip;
}
public String onFlowProcess(FlowEvent event)
{
if (skip)
{
skip = false; // reset in case user goes back
return "confirm";
}
else
{
return event.getNewStep();
}
}
}
When I access the wizard.xhtml I am getting the wizard with no styles.
But here is how it is in the prime faces website:
Could you please tell me what am I missing?
The problem is that you're using invalid Facelets markup. You shouldn't use a normal html div tag and stick namespace declarations in it.
For this purpose you should either use a page starting with html having h:head and h:body tags in it or use ui:composition for templating.
In the example below, JSF resources and PrimeFaces themes will be added properly.
XHTML page
<?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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
</h:head>
<h:body>
<!-- your code here -->
</h:body>
</html>
I hope it helps.
I can not figure out why my rich:dataTable is not rendering. I am using JSF 2 and Richfaces 4. URL is http://localhost:8080/contacts-as7/me2.jsf?sitecode=0Z56, but it behaves the same without the sitecode parameter.
Here is the view
<!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:f="http://java.sun.com/jsf/core"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j">
<h:head>
<title>contacts</title>
</h:head>
<f:metadata>
<f:viewParam name="sitecode" value="#{contactView.siteCode}" />
<f:event listener="#{contactView.retrieve056}" type="preRenderView"></f:event>
</f:metadata>
<h:form>
<h:messages />
<rich:panel rendered="#{not empty contactView.doors}">
<f:facet name="header">
<h:outputText value="Site Code #{contactView.doors.siteCode}" />
</f:facet>
<h:panelGrid columns="1">
<h:outputText
value="Report corrections to your DOORS administrator" />
<h:outputText id="nm1" value="#{contactView.doors.name}" />
<h:outputText id="pgr1" value="#{contactView.doors.pager}" />
<h:outputText id="adr1" value="#{contactView.doors.addr1}" />
<h:outputText id="adr2" value="#{contactView.doors.addr2}"
rendered="#{not empty contactView.doors.addr2}" />
<h:outputText id="csz"
value="#{contactView.doors.city}, #{contactView.doors.state} #{contactView.doors.zip}" />
</h:panelGrid>
</rich:panel>
<rich:dataTable value="#{contactView.doors.alternateList}" var="_xyz">
<h:panelGrid columns="1">
<h:outputText id="nm11" value="#{_xyz.name}" />
<h:outputText id="pgr11" value="#{_xyz.phone}" />
<h:outputText id="adr11" value="#{_xyz.pager}" />
<h:outputText id="adr21" value="#{_xyz.comment}" />
</h:panelGrid>
</rich:dataTable>
</h:form>
</html>
Here is my view bean
#Named
#ViewScoped
public class ContactView implements Serializable {
public ContactView() {
}
#EJB
ContactService contactService;
private String siteCode;
private Doors doors;
private AlternateContact alternateContact;
public String retrieve056() {
System.out.println("RETRIEVE");
this.doors = this.contactService.findDoors("0Z56");
System.out.println("doors_id is "+ doors.getDoorsId());
for ( AlternateContact alt : doors.getAlternateList() ){
System.out.println("alt name "+ alt.getName());
}
return "me2.jsf?sitecode=0Z56&faces-redirect=true";
}
}
And here is the output on the console -- the doors.getAlternateList() is definitely populated.
15:30:58,382 INFO [stdout] (http-localhost-127.0.0.1-8080-3) alt name Thomas Cahill
15:30:58,392 INFO [stdout] (http-localhost-127.0.0.1-8080-3) alt name Micahel Henry
And yet it doesn't show up on my view! I have been looking at this all day and am desparate. Any ideas? It was working at some point in the last few days, but I have no idea how I broke it as I was working on other things.
TDR
When using dataTable you should use rich:column or rich:columnGroup
Try using <rich:dataGrid> instead of <rich:dataTable>
Just look at rich:dataGrid...
Regards
Did you include the all the commons*.jar that goes with richfaces? Without that it won't render.