problem whit pm:header and f:facet

UI Components for JSF
Post Reply
ronaldosv
Posts: 2
Joined: 03 Sep 2014, 15:34

03 Sep 2014, 16:04

Helo! How are you guys doing?
I'm trying to build a simple application using primefaces mobile 5.0 but I'm having some problems with f:facet and pm:header. Let me try to explain that.
When I list my data in the xhtm page, I need that my buttons are disposed like I'm using a dataGrid. I've try to use a dataGrid but when the page loads, that ajax stuff (forgive me I don't know how can I call it) don't stop spinning and nothing works.
So, to get the same dispose of a datagrid I found a post from BalusC in stackOverflow when he shows how to do that using a panelGrid and a c:forEach loop instead a dataGrid. Well, when I use this approach the page works fine but, the facet does not appear and the title on pm:header lost all css formatting when I submit any data. For example when page loads the pm:header is in correct formatting, but when I click on the first button and perform an actionListener when the page is rendered the header lost the css formatting and also the facets never appears except the facet on the content id="comandaContent" where I use a dataList instead a c:forEach loop.
Am I doing something wrong ?

thanks in advance!

Here is my xhtml page :

Code: Select all

<f:view 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:pm="http://primefaces.org/mobile"        
        contentType="text/html"
        xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">

    <f:view renderKitId="PRIMEFACES_MOBILE">
        <h:head></h:head>
        <h:body>
            <pm:page title="Modulo garçon">        
                <h:form> 
                    <p:growl id="messages" showDetail="true" />
                    <p:toolbar id="tb">
                        <f:facet name="left">
                            <p:commandButton  value="Mesas"                                   
                                              icon="ui-icon-bullets"
                                              disabled="false"
                                              actionListener="#{mc.showMesasAL}"
                                              binding="#{mc.btnMesas}"
                                              update="@form"/>
                            <p:commandButton  value="Grupos" 
                                              icon="ui-icon-minus"
                                              disabled="false"
                                              binding="#{mc.btnGrupos}"
                                              update="@form"
                                              actionListener="#{mc.showGruposActionListener}"
                                              />
                            <p:commandButton  value="Produtos" 
                                              icon="ui-icon-minus"
                                              disabled="false"
                                              binding="#{mc.btnProds}"
                                              actionListener="#{mc.showProdutosActionListener}"
                                              update="@form"
                                              />
                            <p:commandButton  value="Comanda" 
                                              icon="ui-icon ui-icon-note"
                                              disabled="false"
                                              update="@form"
                                              actionListener="#{mc.showComandaActionListener}"
                                              id="btn-comanda"
                                              />                            
                            <p:commandButton  value="Enviar" 
                                              icon="ui-icon-minus"
                                              disabled="false"
                                              update="@form"
                                              actionListener="#{mc.showConfirmaEnvioActionListener}"
                                              />                            
                        </f:facet>

                        <f:facet name="right">
                            <p:commandButton value="Conta" 
                                             icon="ui-icon-pencil" 
                                             onclick="PF('dlg1').show();"
                                             />
                        </f:facet>                        
                    </p:toolbar> 
                    <pm:header title="teste"/>
                    <pm:content id="mesasContent" rendered="#{not empty mc.mesas}" binding="#{mc.mesaContent}">   

                        <p:panelGrid columns="3" >
                            <f:facet name="header">Selecione uma mesa</f:facet>
                            <c:forEach items="#{mc.mesas}" var="mesa">
                                <h:panelGroup>
                                    <p:commandButton value="#{mesa.descricao}" 
                                                     action="#{mc.loadGruposAction}"
                                                     style="background-color:tomato"
                                                     update="@form">
                                        <f:setPropertyActionListener value="#{mesa}" target="#{mc.mesaSel}"/>
                                    </p:commandButton>
                                </h:panelGroup>
                            </c:forEach>
                        </p:panelGrid>                                                                

                    </pm:content>

                    <pm:content id="gruposContent" rendered="#{not empty mc.grupos}" binding="#{mc.grupoContent}">                       
                        <p:panelGrid columns="3">
                            <f:facet name="header">Selecione um grupo</f:facet>
                            <c:forEach items="#{mc.grupos}" var="grupo">
                                <h:panelGroup>
                                    <p:commandButton value="#{grupo.descricao}"
                                                     action="#{mc.loadProdutosAction}"
                                                     immediate="true"
                                                     update="@form">
                                        <f:setPropertyActionListener value="#{grupo}" target="#{mc.grupoSel}"/>
                                    </p:commandButton>                                    
                                </h:panelGroup>
                            </c:forEach>
                        </p:panelGrid>
                    </pm:content>

                    <pm:content id="prdContent" rendered="#{not empty mc.produtos}" binding="#{mc.prdContent}">
                        <p:panelGrid columns="3">
                            <f:facet name="header">Selecione um produto</f:facet>
                            <c:forEach items="#{mc.produtos}" var="produto">
                                <h:panelGroup>
                                    <p:commandButton value="#{produto.descricao}"
                                                     immediate="true"
                                                     action="#{mc.addProdAction}"
                                                     update="@form">
                                        <f:setPropertyActionListener value="#{produto}" target="#{mc.prdSel}"/>
                                    </p:commandButton>                                                            
                                </h:panelGroup>
                            </c:forEach>
                        </p:panelGrid>
                    </pm:content>

                    <pm:content id="comandaContent" rendered="#{not empty mc.itens}" binding="#{mc.comandaContent}">
                        <p:dataList id="comandaList" value="#{mc.itens}" var="iten">
                            <f:facet name="header">Produtos pedidos</f:facet>
                            <p:panelGrid columns="2">
                                <p:outputLabel value="#{iten.produto.descricao}"/>
                                <p:outputLabel value="#{iten.quantidade}"/>
                            </p:panelGrid>
                        </p:dataList>                    
                    </pm:content>

                    <pm:content id="confirmaPedidoContent" rendered="false" binding="#{mc.confirmaPedidoContent}">
                        <p:panel header="teste" style="height:300px;">
                            <h:panelGrid columns="2" cellpadding="5">
                                <p:commandButton value="Sim" />
                                <p:commandButton value="Não" />
                            </h:panelGrid>
                        </p:panel>    
                    </pm:content>                                                        
                </h:form>     
            </pm:page>
        </h:body>
    </f:view>
</f:view> 
the backing bean :

Code: Select all

package com.garcon.controller;

import com.garcon.dao.GrupoPrdDAO;
import com.garcon.dao.MesaDAO;
import com.garcon.entity.GrupoPrd;
import com.garcon.entity.ItemVenda;
import com.garcon.entity.Mesa;
import com.garcon.entity.Produto;
import com.garcon.entity.Venda;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.Date;
import java.util.Iterator;
import java.util.List;
import java.util.Map.Entry;
import javax.annotation.PostConstruct;
import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;
import javax.faces.view.ViewScoped;
import javax.inject.Named;
import org.primefaces.component.commandbutton.CommandButton;
import org.primefaces.mobile.component.content.Content;

/**
 *
 * @author Ronaldo
 */
@Named(value = "mc")
@ViewScoped
public class MesaController implements Serializable {
    
    private  MesaDAO mesaDao;
    private  GrupoPrdDAO grpDao;
    
    private List<Mesa> mesas;
    private Mesa mesaSel;
    
    private List<GrupoPrd> grupos;
    private GrupoPrd grupoSel;
    
    private List<Produto> produtos;
    private Produto prdSel;
    
    private Venda venda;
    private ItemVenda itemVenda;
    private List<ItemVenda> itens;
    
    
    //----------------------------------------------//
    private Content currentContent;
    private Content mesaContent;
    private Content grupoContent;
    private Content prdContent;
    private Content comandaContent;
    private Content confirmaPedidoContent;
    
    private CommandButton btnStart;
    private CommandButton btnMesas;
    private CommandButton btnGrupos;
    private CommandButton btnProds;
    private CommandButton btnPedido;
    
    //----------------------------------------------//
    private String startLabel;
    
    public MesaController(){
        this.mesas = new ArrayList<>();
        this.mesaDao = new MesaDAO();
        this.grpDao = new GrupoPrdDAO();          
    }

    @PostConstruct
    public void init(){
        //this.setSelecionado(new Mesa());     
        this.mesaSel = new Mesa();
        this.grupoSel = new GrupoPrd();
        this.setPrdSel(new Produto()); 
        this.itemVenda = new ItemVenda(); 
    }    

    public void showMesasAL(ActionEvent evt){
        if (this.mesas.isEmpty())
            this.mesas = this.mesaDao.getAll();
        this.mesaContent.setRendered(true);
        this.grupoContent.setRendered(false);
        this.prdContent.setRendered(false);
        this.confirmaPedidoContent.setRendered(false);
        System.out.println(FacesContext.getCurrentInstance().getViewRoot().getAttributes().toString());
        Iterator entries = FacesContext.getCurrentInstance().getAttributes().entrySet().iterator();
        
        while(entries.hasNext()){
            Entry e = (Entry)entries.next();
            Object key = e.getKey();
            Object value = e.getValue();
            System.out.println("key: " + key + " value: " + value);
        }                       
        //this.mesaContent.setRendered(this.mesas.size() > 0);
    }
    
    public void showGruposActionListener(ActionEvent evt){
        this.grupoContent.setRendered(true);
        this.mesaContent.setRendered(false);
        this.prdContent.setRendered(false);
        this.comandaContent.setRendered(false);
        this.confirmaPedidoContent.setRendered(false);
    }
    
    public void loadGruposAction(){
        this.grupos = this.grpDao.getAll();
        // por hora, inicio os objetos de venda aqui ...
        if (null == this.venda) {
            this.venda = new Venda();
            this.itens = new ArrayList<>();
        }
        this.mesaContent.setRendered(false);
        this.grupoContent.setRendered(true);
        this.confirmaPedidoContent.setRendered(false);
        addMessage("Sucesso", this.mesaSel.getDescricao() + " em atendimento");
        System.out.println(this.mesaSel.getDescricao());
    }
    
    public void showProdutosActionListener(ActionEvent evt){
        this.prdContent.setRendered(true);
        this.mesaContent.setRendered(false);
        this.grupoContent.setRendered(false);        
        this.comandaContent.setRendered(false);
        this.confirmaPedidoContent.setRendered(false);
    }
    
    public void loadProdutosAction(){
        this.produtos = this.grupoSel.getProdutos();
        this.prdContent.setRendered(true); 
        this.grupoContent.setRendered(false);                 
        this.comandaContent.setRendered(false);
        this.confirmaPedidoContent.setRendered(false);
        this.mesaContent.setRendered(false);
        //addMessage("Sucesso", "Grupo: " + this.grupoSel.getDescricao() + " selecionado");         
    }
    
    public void showComandaActionListener(ActionEvent evt){
        this.comandaContent.setRendered(true);       
        this.prdContent.setRendered(false);
        this.mesaContent.setRendered(false);
        this.grupoContent.setRendered(false);                
        this.confirmaPedidoContent.setRendered(false);
    }
    
    public void showConfirmaEnvioActionListener(ActionEvent evt){
        this.confirmaPedidoContent.setRendered(true);
        this.comandaContent.setRendered(false);       
        this.prdContent.setRendered(false);
        this.mesaContent.setRendered(false);
        this.grupoContent.setRendered(false);                        
    }
    
    public void addProdAction(){
        if (this.itens.isEmpty()) {
            this.itemVenda.setData(new Date());
            //this.itemVenda.setHora();
            this.itemVenda.setItemSeq(this.itens.size()+1);
            this.itemVenda.setProduto(prdSel);
            this.itemVenda.setQuantidade(1);
            //this.itemVenda.setVendedorItem(null);
            this.itens.add(this.itemVenda);
        } else {
            /// procurar por itens repetidos e adicionar +1 na qtd...
            boolean found = false;
            Iterator<ItemVenda> it = this.itens.iterator();
            ItemVenda tmp;
            while(it.hasNext()){
                tmp = it.next();
                if (tmp.getProduto().getIdProduto().equals(this.prdSel.getIdProduto())){
                    tmp.setQuantidade(tmp.getQuantidade()+1);
                    found = true;
                    break;
                }
            }
            if (!found){
                this.itemVenda = new ItemVenda();
                this.itemVenda.setData(new Date());
                //this.itemVenda.setHora();
                this.itemVenda.setItemSeq(this.itens.size()+1);
                this.itemVenda.setProduto(prdSel);
                this.itemVenda.setQuantidade(1);
                //this.itemVenda.setVendedorItem(null);
                this.itens.add(this.itemVenda);               
            }
        }      
        ///addMessage("Sucesso!", "Produto: " + this.prdSel.getDescricao());      
    }        
    
    public void addMessage(String summary, String detail) {
        FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, summary, detail);
        FacesContext.getCurrentInstance().addMessage(null, message);
    }    
    
    /**
     * @return the mesas
     */
    public List<Mesa> getMesas() {
        return mesas;
    }

    /**
     * @param mesas the mesas to set
     */
    public void setMesas(List<Mesa> mesas) {
        this.mesas = mesas;
    }

    /**
     * @return the mesaSel
     */
    public Mesa getMesaSel() {
        return mesaSel;
    }

    /**
     * @param mesaSel the mesaSel to set
     */
    public void setMesaSel(Mesa mesaSel) {
        this.mesaSel = mesaSel;
    }

    /**
     * @return the grupos
     */
    public List<GrupoPrd> getGrupos() {
        return grupos;
    }

    /**
     * @param grupos the grupos to set
     */
    public void setGrupos(List<GrupoPrd> grupos) {
        this.grupos = grupos;
    }

    /**
     * @return the grupoSel
     */
    public GrupoPrd getGrupoSel() {
        return grupoSel;
    }

    /**
     * @param grupoSel the grupoSel to set
     */
    public void setGrupoSel(GrupoPrd grupoSel) {
        this.grupoSel = grupoSel;
    }

    /**
     * @return the produtos
     */
    public List<Produto> getProdutos() {
        return produtos;
    }

    /**
     * @param produtos the produtos to set
     */
    public void setProdutos(List<Produto> produtos) {
        this.produtos = produtos;
    }

    /**
     * @return the prdSel
     */
    public Produto getPrdSel() {
        return prdSel;
    }

    /**
     * @param prdSel the prdSel to set
     */
    public void setPrdSel(Produto prdSel) {
        this.prdSel = prdSel;
    }

    /**
     * @return the venda
     */
    public Venda getVenda() {
        return venda;
    }

    /**
     * @param venda the venda to set
     */
    public void setVenda(Venda venda) {
        this.venda = venda;
    }

    /**
     * @return the itemVenda
     */
    public ItemVenda getItemVenda() {
        return itemVenda;
    }

    /**
     * @param itemVenda the itemVenda to set
     */
    public void setItemVenda(ItemVenda itemVenda) {
        this.itemVenda = itemVenda;
    }

    /**
     * @return the itens
     */
    public List<ItemVenda> getItens() {
        return itens;
    }

    /**
     * @param itens the itens to set
     */
    public void setItens(List<ItemVenda> itens) {
        this.itens = itens;
    }

    /**
     * @return the mesaContent
     */
    public Content getMesaContent() {
        return mesaContent;
    }

    /**
     * @param mesaContent the mesaContent to set
     */
    public void setMesaContent(Content mesaContent) {
        this.mesaContent = mesaContent;
    }

    /**
     * @return the grupoContent
     */
    public Content getGrupoContent() {
        return grupoContent;
    }

    /**
     * @param grupoContent the grupoContent to set
     */
    public void setGrupoContent(Content grupoContent) {
        this.grupoContent = grupoContent;
    }

    /**
     * @return the prdContent
     */
    public Content getPrdContent() {
        return prdContent;
    }

    /**
     * @param prdContent the prdContent to set
     */
    public void setPrdContent(Content prdContent) {
        this.prdContent = prdContent;
    }

    /**
     * @return the btnStart
     */
    public CommandButton getBtnStart() {
        return btnStart;
    }

    /**
     * @param btnStart the btnStart to set
     */
    public void setBtnStart(CommandButton btnStart) {
        this.btnStart = btnStart;
    }

    /**
     * @return the btnMesas
     */
    public CommandButton getBtnMesas() {
        return btnMesas;
    }

    /**
     * @param btnMesas the btnMesas to set
     */
    public void setBtnMesas(CommandButton btnMesas) {
        this.btnMesas = btnMesas;
    }

    /**
     * @return the btnGrupos
     */
    public CommandButton getBtnGrupos() {
        return btnGrupos;
    }

    /**
     * @param btnGrupos the btnGrupos to set
     */
    public void setBtnGrupos(CommandButton btnGrupos) {
        this.btnGrupos = btnGrupos;
    }

    /**
     * @return the btnProds
     */
    public CommandButton getBtnProds() {
        return btnProds;
    }

    /**
     * @param btnProds the btnProds to set
     */
    public void setBtnProds(CommandButton btnProds) {
        this.btnProds = btnProds;
    }

    /**
     * @return the btnPedido
     */
    public CommandButton getBtnPedido() {
        return btnPedido;
    }

    /**
     * @param btnPedido the btnPedido to set
     */
    public void setBtnPedido(CommandButton btnPedido) {
        this.btnPedido = btnPedido;
    }

    /**
     * @return the startLabel
     */
    public String getStartLabel() {
        return startLabel;
    }

    /**
     * @param startLabel the startLabel to set
     */
    public void setStartLabel(String startLabel) {
        this.startLabel = startLabel;
    }

    /**
     * @return the comandaContent
     */
    public Content getComandaContent() {
        return comandaContent;
    }

    /**
     * @param comandaContent the comandaContent to set
     */
    public void setComandaContent(Content comandaContent) {
        this.comandaContent = comandaContent;
    }

    /**
     * @return the confirmaPedidoContent
     */
    public Content getConfirmaPedidoContent() {
        return confirmaPedidoContent;
    }

    /**
     * @param confirmaPedidoContent the confirmaPedidoContent to set
     */
    public void setConfirmaPedidoContent(Content confirmaPedidoContent) {
        this.confirmaPedidoContent = confirmaPedidoContent;
    }
}

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

04 Sep 2014, 12:08

Why do you put tags outside a header/content/footer tag which are inside a page tag?

So put the toolbar and related elements IN the pm:header tag....

ronaldosv
Posts: 2
Joined: 03 Sep 2014, 15:34

04 Sep 2014, 14:49

Hi Ronald! Thank you so much for the answer.
I forgot to mention, I'm new in JSF/Primefaces stuff. But, I put the tags in this way because I was trying to follow the single page example on the primefaces mobile show case .... But, I'm kind of lost whit so much information I found in google. So, I would like to ask you a favor, where can I find a good example of a JSF/Primefaces page's structure ?

Code: Select all

<!DOCTYPE html>
<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:pm="http://primefaces.org/mobile">
     
    <f:view renderKitId="PRIMEFACES_MOBILE" />
     
    <h:head>
 
    </h:head>
     
    <h:body>
         
        <pm:page>
            <pm:header title="Title"></pm:header>
             
            <pm:content>
                //...
            </pm:content>
 
            <pm:footer title="Footer"></pm:footer>
        </pm:page>
    </h:body>
     
</html>
thanks in advance.

Ronaldo.

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

04 Sep 2014, 14:55

Your 'example' above is good. And some of the things have to be obvious by the naming of them and the examples on the PF site (there is no example with tags outside the header/content/footer but inside the page tag (like you originally did)

zohaa
Posts: 1
Joined: 12 Sep 2014, 23:37

13 Sep 2014, 06:54

Try with the latest mobile that works with PF 4(.0.x) or try 5(.0.x) or trunk and see if it still happens
Our fantastic offers for free mybraindumps.net dumps and Tabor College study guides prepare you well for the final ECCOUNCIL exam and University of California, San Francisco papers with great success of Youtube.

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 26 guests