Fórum Primefaces, menuitem, fazer submenu aparecer e desaparecer com clique no tema do menu! #569866

24/04/2013

Olá Caros Amigos, Have a nice day! O meu problema é o seguinte: estou usando a biblioteca Primefaces para construir a interface gráfica de um sistema, e o meu objetivo é usar um dos recursos disponíveis para fazer aparecer e desaparecer um submenu, quando um dos temas do menu é clicado. O problema é que não está funcionando usando commandButton. O meu objetivo é clicar no menu item com id="produtos" e ao fazer isso ele aciona a ação no coomandButton que alterará o atributo de visibilidade no menu com id="menuItensDeCadastro". Se alguém souber alguma outra forma melhor de resolver este problema, eu agradeço. O meu problema central é, fazer um submenu aparecer com um clique num dos temas do menu, e desaparecer se outro é dado no mesmo tema. Segue abaixo o meu código fonte:

<h:body>  
    <h:form class="menuLogon">  
        <h:panelGrid columns="2">  
            <p:menu>  
                <p:submenu styleClass="submenu" label="Nome_do_Usuário">  
                    <p:menuitem styleClass="menuitem" value="Carrinho de Compras" />  
                    <p:menuitem styleClass="menuitem" value="Meus Pedidos" />  
                    <p:menuitem styleClass="menuitem" value="Meus dados" />  
                    <p:menuitem styleClass="menuitem" value="Sair" />  
                </p:submenu>  
                <p:submenu styleClass="submenu" label="Livraria">  
                    <p:menuitem styleClass="menuitem" value="Configurar Livraria" />  
                    <p:menuitem styleClass="menuitem" value="Mídias Pendentes" />  
                       
                    <p:menuitem type="button" id="produtos" styleClass="menuitem" value="Produtos" onclick="mostrarOuEsconderMenuItensDeCadastro()"/>  
                       
                    <p:menuitem styleClass="menuitem" value="Temas" />  
                    <p:menuitem styleClass="menuitem" value="Relatórios" />  
                    <p:menuitem styleClass="menuitem" value="Anúncios" />  
                </p:submenu>  
                <p:submenu styleClass="submenu" label="Clientes">  
                    <p:menuitem styleClass="menuitem" value="Clientes" />  
                    <p:menuitem styleClass="menuitem" value="Simular Cliente" />  
                    <p:menuitem styleClass="menuitem" value="Pedidos" />  
                </p:submenu>  
            </p:menu>  
               
                        <!-- ESTE É O MENU QUE DEVE APARECER E DESAPARECER NA TELA COM UM CLIQUE NO menuitem com id="produtos" -->  
            <p:menu id="menuItensDeCadastro" styleClass="menuItensDeCadastro" rendered="#{gamb.mostrarMenuItensDeCadastro}">  
                <p:menuitem styleClass="menuitem" value="" rendered="false" /><!-- Não alterar!!! --> 
                <p:menuitem styteClass="menuitem" value="Cadastrar Produto" />  
                <p:menuitem styteClass="menuitem" value="Consultar Produto" />  
            </p:menu>  
               
            <p:remoteCommand process="@this" name="mostrarOuEsconderMenuItensDeCadastro" update="menuItensDeCadastro">  
                <f:setPropertyActionListener target="#{gamb.mostrarMenuItensDeCadastro}" value="#"/>  
            </p:remoteCommand>  
               
        </h:panelGrid>  
    </h:form>  
</h:body>  

Este é um bean criado pra testar mesmo a funcionalidade antes de fazer o código final, por isso coloquei um nome bem ilário.

import java.io.Serializable;  
   
import javax.faces.bean.ManagedBean;  
import javax.faces.bean.RequestScoped;  
   
@ManagedBean(name="gamb")  
@RequestScoped  
public class Gambiarra implements Serializable{  
    private boolean mostrarMenuItensDeCadastro = false;  
   
    public boolean getMostrarMenuItensDeCadastro() {  
        mostrarOuEsconderMenu2();  
        return mostrarMenuItensDeCadastro;  
    }  
   
    public void setMostrarMenuItensDeCadastro(boolean mostrarMenuItensDeCadastro) {  
        this.mostrarMenuItensDeCadastro = mostrarMenuItensDeCadastro;  
    }  
       
    /*private void mostrarOuEsconderMenu() { 
        // TODO Auto-generated method stub 
        if(mostrarMenuItensDeCadastro == "hidden"){ 
            setMostrarMenuItensDeCadastro("visible"); 
        }else{ 
            setMostrarMenuItensDeCadastro("hidden"); 
        } 
    }*/  
   
    private void mostrarOuEsconderMenu2() {  
        // TODO Auto-generated method stub  
        if(mostrarMenuItensDeCadastro == false){  
            setMostrarMenuItensDeCadastro(true);  
        }else{  
            setMostrarMenuItensDeCadastro(false);  
        }  
    }  
}  

Foi adicionado ao tópico as imagens do menu sem o clique no tema Produto e depois de clicado como deve ficar! Imagem do menu sem o clique no tema Produto: [img]http://javafree.uol.com.br/files_user/files/2/24/84/menu.JPG[/img] Imagem do menu e seu submenu, é assim que deve ficar depois de clicar em Produto: [img]http://javafree.uol.com.br/files_user/files/1/69/EA/telaComsubmenu.png[/img] Obrigado por sua atenção se leu este post e não se interessou em me ajudar! MUITO Obrigado a você se leu este post e dedicou uma parte do seu tempo a me ajudar postando uma sugestão de solução! Atenciosamente![img][/img]

Alexandre Cunha

Curtir tópico

+ 0

Responder

Posts

24/04/2013

Okabe Rintarou

Tem como colocar um print da tela, para melhor analise. E ver: http://www.primefaces.org/showcase/ui/megaMenu.jsf http://www.primefaces.org/showcase/ui/tieredMenu.jsf http://www.primefaces.org/showcase/ui/menubutton.jsf

Responder

Gostei + 0

25/04/2013

Alexandre Cunha

[quote="ElPsyCongroo"]Tem como colocar um print da tela, para melhor analise. E ver: http://www.primefaces.org/showcase/ui/megaMenu.jsf http://www.primefaces.org/showcase/ui/tieredMenu.jsf http://www.primefaces.org/showcase/ui/menubutton.jsf

Oi ElPsy, Eu adicionei as imagens do menu sem o clique como deve ficar, e depois que eu clico como deve ficar! Obrigado por tentar me ajudar, sua atenção é bem vinda! Atenciosamente, Alexandre.

Responder

Gostei + 0

25/04/2013

Alexandre Cunha

[quote="AlexSCJava"][quote="ElPsyCongroo"]Tem como colocar um print da tela, para melhor analise. E ver: http://www.primefaces.org/showcase/ui/megaMenu.jsf http://www.primefaces.org/showcase/ui/tieredMenu.jsf http://www.primefaces.org/showcase/ui/menubutton.jsf

Oi ElPsy, Eu adicionei as imagens do menu sem o clique como deve ficar, e depois que eu clico como deve ficar! Obrigado por tentar me ajudar, sua atenção é bem vinda! Atenciosamente, Alexandre.

Então, conseguiu resolver o problema?

Responder

Gostei + 0

26/04/2013

Davi Costa

Já pensou em fazer essa solução em js? Ou Jquery? Apesar de que, vc pode trar a ação do seu menu para renderizar seus outros itens. olha essa discussão: http://stackoverflow.com/questions/9153328/primefaces-2-menuitem-action-actionexpression-or-actionlistener abcs

Responder

Gostei + 0

29/04/2013

Alexandre Cunha

Olá Caros amigos, Boa tarde! Consegui resolver meu problema! Eu tive que mascarar o funcionamente de um overlayPanel para que ele fizesse o que eu quero. Ficou assim:

<p:overlayPanel id="menuOverlayPanel" styleClass="menuOverlayPanel" showEvent="mouseover click" showEffect="drop" hideEvent="mousedown" hideEffect="drop" for="produtos" >   
                <p:menu id="menuItensDeCadastro" styleClass="menuItensDeCadastro">
                    <p:menuitem styleClass="menuitem" value="" rendered="false" /><!-- Não alterar!!! -->
                    <p:menuitem styteClass="menuitem" value="Cadastrar Produto" />
                    <p:menuitem styteClass="menuitem" value="Consultar Produto" />
                </p:menu>
</p:overlayPanel>

Então eu só tive que ir lá no css e retirar o panel que aparece no fundo, deixar apenas o conteúdo, que é o menu, colocando no lugar onde eu quero. A vantagem de fazer assim, é que eu consegui resolver o problema facilmente, de aparecer e desaparecer um submenu, e além disso consegui aplicar alguns efeitos. A desvantagem de fazer assim, é que nem todo efeito aplicado ao panel funcionará com o menu. E isso prende o código. Ainda pretendo descobrir um melhor jeito de trabalhar com isso! Obrigado a todos que me ajudaram! Abraço!

Responder

Gostei + 0

02/05/2013

Alexandre Cunha

Show de bola, muito elgal que conseguiu resolver o problema e postou a solução pra galera :)

Responder

Gostei + 0