[Resolved] Navigation/Render error + commandButton

UI Components for JSF
Post Reply
gfcarvalho
Posts: 12
Joined: 25 May 2010, 14:14

06 Nov 2014, 13:50

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

Code: Select all

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

Code: Select 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 page

Code: Select all

<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>
Last edited by gfcarvalho on 10 Nov 2014, 13:12, edited 1 time in total.

kukeltje
Expert Member
Posts: 9605
Joined: 17 Jun 2010, 13:34
Location: Netherlands

07 Nov 2014, 22:58

Did you add the moblie multipage navigator to your faces-config?

gfcarvalho
Posts: 12
Joined: 25 May 2010, 14:14

10 Nov 2014, 13:11

kukeltje wrote:Did you add the moblie multipage navigator to your faces-config?
Yes. The problem occurred due to errors in the attribute "update" in commandButton.
The correct approach is

Code: Select all

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

Code: Select all

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

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 27 guests