提交命令按钮后的 Primefaces 移动导航/渲染答案

【问题标题】：Primefaces Mobile Navigation/Render after submit commandButton提交命令按钮后的 Primefaces 移动导航/渲染
【发布时间】：2015-01-02 18:59:50
【问题描述】：

我是移动开发的新手，在对托管 bean 调用方法后无法渲染 pm:page。

我的页面有一个 primefaces 覆盖面板，带有一个用于搜索的按钮和一个用于显示结果的数据表。该方法被正确调用，但带有结果的页面永远不会显示（pm:page id="resultados"）。方法很简单，只组装一个字符串列表。

根据primefaces用户指南并搜索互联网，我尝试了以下

我已经使用 PrimeFaces 5.0 和 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"/> <!-- ????? -->

以下是完整的源代码

@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 页面

<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>

【问题讨论】：

标签： jsf-2 primefaces primefaces-mobile

【解决方案1】：

问题是由于 commandButton 中的属性“更新”中的错误而发生的。正确的做法是

<p:commandButton id="botao1" value="search" actionListener="#{myMB.search}" action="pm:resultados"
                update=":resultados:formMobile:tabelaTeste" />

整个页面是如此

<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>

【讨论】：