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>