Primefaces移動導航/提交後提交命令按鈕

我是移動開發的新手，並且在調用託管bean上的方法後呈現pm：page時遇到問題。Primefaces移動導航/提交後提交命令按鈕

我的頁面有一個primefaces overlaypanel，帶有一個搜索按鈕和一個可顯示結果的數據表。該方法調用正確，但不會顯示帶結果的頁面（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>

來源

2014-11-06 gfinotti

由於commandButton中屬性「update」中的錯誤而出現問題。正確的做法是

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

來源

2014-11-10 11:10:57 gfinotti

Primefaces移動導航/提交後提交命令按鈕

回答

相關問題