Discussoes de Programacao e Tecnologia

Duvida Ativar e Desativar Botões

7 respostas
D
denirroberto

Olá pessoal, minha dúvida, na verdade nem sei como começar já que sou novo no ramo java web, é como criar uma classe que controle a função dos meus botões ativando e desativando quando necessário a minha tela tem os seguintes códigos:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:fragment xmlns="http://www.w3.org/1999/xhtml"
             xmlns:h="http://java.sun.com/jsf/html"
             xmlns:p="http://primefaces.prime.com.tr/ui"
             xmlns:ui="http://java.sun.com/jsf/facelets"
             xmlns:f="http://java.sun.com/jsf/core">

    <p:dialog widgetVar="dlgManuInseto" header="Manutenção de Insetos" modal="false" closable="true" visible="false" position="center" width="510" height="330" resizable="false" draggable="true" closeOnEscape="true" showEffect="puff" hideEffect="puff">
        <p:tabView activeIndex="0" style="height: 165pt">
            <p:tab title="Lista de Insetos">
                <h:form>
                    <p:dataTable var="inseto" value="" selectionMode="single" paginatorPosition="bottom" paginator="true" rows="5" paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}" emptyMessage="Nada foi encontrado!">
                        <p:column sortBy="">
                            <f:facet name="header">
                                <h:outputLabel value="Cód. Inseto" />
                            </f:facet>
                            <h:outputText value="" />
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputLabel value="Identificação" />
                            </f:facet>
                            <h:outputText value="" />
                        </p:column>
                        <p:column sortBy="">
                            <f:facet name="header">
                                <h:outputLabel value="Família" />
                            </f:facet>
                            <h:outputText value="" />
                        </p:column>
                    </p:dataTable>
                </h:form>
            </p:tab>
            <p:tab title="Cadastrar Inseto">
                <h:form>
                    <fieldset>
                        <legend style="font-weight: bold">Identificação do Inseto</legend>
                        <h:panelGrid columns="4" style="margin-left: 10pt">
                            <h:outputLabel value="Científico: " />
                            <h:inputText value="" disabled="true" />
                            <h:outputLabel value="Vulgar: " />
                            <h:inputText value="" disabled="true" />
                        </h:panelGrid>
                    </fieldset>
                    <fieldset>
                        <legend style="font-weight: bold">Outros</legend>
                        <h:panelGrid columns="2" style="margin-left: 10pt">
                            <h:outputLabel value="Habitat: " />
                            <h:inputTextarea value="" cols="55" rows="3" disabled="true" />
                            <h:outputLabel value="Família: " />
                            <h:selectOneMenu value="" />
                        </h:panelGrid>
                    </fieldset>
                </h:form>
            </p:tab>
        </p:tabView>
        <h:form style="text-align: center; margin-top: 6pt">
            <p:commandButton style="width: 40pt; height: 40pt" image="" value="Novo" title="Novo Registro" id="btnNovo" />
            <p:commandButton style="width: 40pt; height: 40pt" image="" value="Editar" title="Editar Registro" id="btnEditar" />
            <p:commandButton style="width: 40pt; height: 40pt" image="" value="Excluir" title="Excluir Registro" id="btnExcluir" />
            <p:commandButton style="width: 40pt; height: 40pt" image="" value="Cancelar" title="Cancelar Ação" id="btnCancelar" />
            <p:commandButton style="width: 40pt; height: 40pt" image="" value="Imagem" title="Inserir Imagem" id="btnImagem" />
            <p:commandButton style="width: 40pt; height: 40pt" image="" value="Fechar" title="Fechar Tela" id="btnFechar" onclick="dlgManuInseto.hide()" />
        </h:form>
    </p:dialog>
</ui:fragment>

Eu quero que:
Quando eu estiver na aba Listagem, somente meu botão Novo esteja ativo os outros botões inclusive a aba Cadastrar Inseto fiquem inativa.
Qaundo eu clicar em novo, ativa e abre a aba Cadastrar Inseto e ativa o botão Cancelar.
Quando eu selecionar uma linha na minha dataTable ativa a aba Cadastrar Inseto.
…e assim por diante…

Alura Desenvolvimento Front-End React Do primeiro componente à liderança técnica! HTML/CSS/JavaScript fundamental, React com hooks e...

7 Respostas

R
ronnytds

olha só, vc poderia fazer assim:
cada botão teria o atributo rendered referenciando uma propriedade do tipo boolean do seu managedBean. algo mais ou menos assim:

p:commandButton style="width: 40pt; height: 40pt" image="" value="Novo" title="Novo Registro" id="btnNovo" rendered="#{seuBean.mostrarBotaoNovo}"/>

onde mostrarBotaoNovo é a propriedade boolean do seu bean. então cada botão teria uma propriedade correspondente no bean. No bean vc tbm teria que criar um objeto do tipo TabView para ser o binding da tabView da sua página. Então na sua p:tabView vc configuraria o binding para referenciar o obejto TabView do seu bean e o evento tabChangeListener para chamar um método do Bean, e nesse método vc veria qual tab foi selecionada e então setaria as propriedades booleanas para true ou false de acordo com sua necessidade. exemplo:
sua tabView ficaria assim:

<p:tabView activeIndex="0" style="height: 165pt" update="idBotaoNovo,idBotaoCadastrar...">

O método do bean ficaria assim:

public void mudaTab(ChangeEvent e){ Integer indice = tabView.getActiveIndex(); if(indice == 0){ mostraBotaoNovo = true; } }

lembrando que vc teria que fazer um if else pra cada tab dentro da sua tabView, e tbm setar as propriedades para todos os botões, sem esquecer de colocar o atributo update na tabView, mandando atualizar os botões.

R
ronnytds

cara, foi mal, errei a linha da tabView na resposta acima.
a tabView ficaria assim:

<p:tabView activeIndex="0" style="height: 165pt" binding="#{seuBean.tabView}" tabChangeListener="#{seuBean.mudaTab}" update="idBotaoNovo,idBotaoCadastrar...">
R
ronnytds

e lembrando que vc pode usar essa mesma solução para desabilitar as abas da tabView.

T
Takeshi91

O commandButton da Primefaces tem o atributo disabled, que voce pode controlar pela managedBean e atualizando o botão à cada requisição Ajax.

D
denirroberto

Ai ronnytds como faço pra chamar a função dentro do binding não ta aparecendo no meu.

R
ronnytds
no binding vc não chama uma Função, vc referencia um objeto da managedBean. por exemplo: no seu caso, vc tem uma p:tabView, então la no bean vc tem que criar um objeto da classe Tabview com seus métodos get e set, mais ou menos assim: 
private TabView tabView;
public TabView getTabView(){
    return this.tabView;
}

public void setTabView(TabView tabView){
    this.tabView = tabView;
}
ai na página vc referencia esse obejto através da propriedade binding: 
<p:tabView activeIndex="0" style="height: 165pt" binding="#{seuBean.tabView}" tabChangeListener="#{seuBean.mudaTab}" update="idBotaoNovo,idBotaoCadastrar...">
D
denirroberto
ronnytds:
no binding vc não chama uma Função, vc referencia um objeto da managedBean. por exemplo: no seu caso, vc tem uma p:tabView, então la no bean vc tem que criar um objeto da classe Tabview com seus métodos get e set, mais ou menos assim: 
private TabView tabView;
public TabView getTabView(){
    return this.tabView;
}

public void setTabView(TabView tabView){
    this.tabView = tabView;
}
ai na página vc referencia esse obejto através da propriedade binding: 
<p:tabView activeIndex="0" style="height: 165pt" binding="#{seuBean.tabView}" tabChangeListener="#{seuBean.mudaTab}" update="idBotaoNovo,idBotaoCadastrar...">

Ai Rony, so não estou conseguindo resolver o probelam de quando muda de tab para atualizar a prop disable dos botões quero que quando estiver numa tab mostre alguns botões ativos caso contrário outros. Está assim meu beam:

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

package control;

import java.io.Serializable;
import javax.enterprise.context.SessionScoped;
import javax.inject.Named;
import org.primefaces.component.tabview.TabView;

/**
 *
 * @author Denir R. Tavares
 */
@Named
@SessionScoped
public class ControlesBem implements Serializable {

    private boolean btnNovo = false;
    private boolean btnSalvar = true;
    private boolean btnEditar = true;
    private boolean btnExcluir = false;
    private boolean btnCancelar = true;
    private boolean btnProcurar = false;
    private boolean btnFechar = false;
    private int indice = 0;
    private TabView tbvManutencao;

    //Sessão de controles
    public void tbvManutencaoC(){
        if(indice==0){
            btnNovo = false;
            btnSalvar = true;
            btnEditar = true;
            btnExcluir = false;
            btnCancelar = true;
            btnProcurar = false;
            btnFechar = false;
        } else {
            btnNovo = false;
            btnSalvar = true;
            btnEditar = false;
            btnExcluir = true;
            btnCancelar = true;
            btnProcurar = true;
            btnFechar = false;
        }
    }

    public void btnNovoC(){
        btnNovo = true;
        btnSalvar = false;
        btnEditar = true;
        btnExcluir = true;
        btnCancelar = false;
        btnProcurar = true;
        btnFechar = true;
        indice = 1;
    }

    public void btnSalvarC(){
        btnNovo = false;
        btnSalvar = true;
        btnEditar = false;
        btnExcluir = true;
        btnCancelar = true;
        btnProcurar = true;
        btnFechar = false;
    }

    public void btnEditarC(){
        btnNovo = true;
        btnSalvar = false;
        btnEditar = true;
        btnExcluir = true;
        btnCancelar = false;
        btnProcurar = true;
        btnFechar = true;
    }

    public void btnExcluirC(){
        
    }

    public void btnCancelarC(){
        btnNovo = false;
        btnSalvar = true;
        btnEditar = false;
        btnExcluir = true;
        btnCancelar = true;
        btnProcurar = true;
        btnFechar = false;
    }

    public void btnProcurarC(){
        
    }

    public void btnFecharC(){
        indice = 0;
    }

    //Getters and Setters
    public boolean isBtnCancelar() {
        return btnCancelar;
    }

    public void setBtnCancelar(boolean btnCancelar) {
        this.btnCancelar = btnCancelar;
    }

    public boolean isBtnEditar() {
        return btnEditar;
    }

    public void setBtnEditar(boolean btnEditar) {
        this.btnEditar = btnEditar;
    }

    public boolean isBtnExcluir() {
        return btnExcluir;
    }

    public void setBtnExcluir(boolean btnExcluir) {
        this.btnExcluir = btnExcluir;
    }

    public boolean isBtnFechar() {
        return btnFechar;
    }

    public void setBtnFechar(boolean btnFechar) {
        this.btnFechar = btnFechar;
    }

    public boolean isBtnNovo() {
        return btnNovo;
    }

    public void setBtnNovo(boolean btnNovo) {
        this.btnNovo = btnNovo;
    }

    public boolean isBtnProcurar() {
        return btnProcurar;
    }

    public void setBtnProcurar(boolean btnProcurar) {
        this.btnProcurar = btnProcurar;
    }

    public boolean isBtnSalvar() {
        return btnSalvar;
    }

    public void setBtnSalvar(boolean btnSalvar) {
        this.btnSalvar = btnSalvar;
    }

    public TabView getTbvManutencao() {
        return tbvManutencao;
    }

    public void setTbvManutencao(TabView tbvManutencao) {
        this.tbvManutencao = tbvManutencao;
    }

    public int getIndice() {
        return indice;
    }

    public void setIndice(int indice) {
        this.indice = indice;
    }
}

Assim minha página

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:fragment xmlns="http://www.w3.org/1999/xhtml"
             xmlns:h="http://java.sun.com/jsf/html"
             xmlns:p="http://primefaces.prime.com.tr/ui"
             xmlns:ui="http://java.sun.com/jsf/facelets"
             xmlns:f="http://java.sun.com/jsf/core">

    <p:dialog widgetVar="dlgManuColetor" header="Manutenção de Coletores" modal="false" closable="true" visible="false" position="center" width="520" height="365" resizable="false" draggable="true" closeOnEscape="true" showEffect="fold" hideEffect="fold">
        <p:tabView activeIndex="#{controlesBem.indice}" style="height: 180pt" id="tbvManutencao" binding="#{controlesBem.tbvManutencao}" tabChangeListener="#{controlesBem.tbvManutencaoC}" onTabChangeUpdate="btnNovo,btnSalvar,btnEditar,btnBloquear,btnCancelar,btnProcurar,btnFechar">
            <p:tab title="Lista de Coletores" id="tbvmLista">
                <h:form>
                    <p:dataTable var="coletor" value="" selectionMode="single" paginatorPosition="bottom" paginator="true" rows="5" paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}" emptyMessage="Nada foi encontrado!">
                        <p:column sortBy="">
                            <f:facet name="header">
                                <h:outputLabel value="RA. Coletor" />
                            </f:facet>
                            <h:outputText value="" />
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputLabel value="Identificação" />
                            </f:facet>
                            <h:outputText value="" />
                        </p:column>
                        <p:column sortBy="">
                            <f:facet name="header">
                                <h:outputLabel value="Curso - Setor - Entidade" />
                            </f:facet>
                            <h:outputText value="" />
                        </p:column>
                    </p:dataTable>
                </h:form>
            </p:tab>
            <p:tab title="Cadastrar Coletor" id="tbvmCadastrar">
                <h:form>
                    <fieldset>
                        <legend style="font-weight: bold">Identificação do Coletor</legend>
                        <h:panelGrid columns="2" style="margin-left: 10pt">
                            <h:outputLabel value="Coletor: " />
                            <p:inputText style="width: 256pt; background: white;" disabled="true" required="true" requiredMessage="Informe coletor!" value="" id="txtColetor2" />
                            <h:outputLabel value="Telefone: " />
                            <p:inputMask style="width: 256pt; background: white;" mask="([telefone removido]" disabled="true" required="true" requiredMessage="Informe telefone!" value="" id="txtFone" />
                        </h:panelGrid>
                    </fieldset>
                    <fieldset>
                        <legend style="font-weight: bold">Curso</legend>
                        <h:panelGrid columns="2" style="margin-left: 10pt">
                            <h:outputLabel value="Entidade: " />
                            <p:inputText style="width: 256pt; background: white;" disabled="true" required="true" requiredMessage="Informe entidade!" value="" id="txtEntidade" />
                            <h:outputLabel value="Curso: " />
                            <p:inputText style="width: 256pt; background: white;" disabled="true" required="true" requiredMessage="Informe curso!" value="" id="txtCurso" />
                            <h:outputLabel value="Setor: " />
                            <!--<p:selectOneMenu style="background: white;" disabled="true" required="true" requiredMessage="Informe setor!" value="" id="somSetor">
                                <f:selectItem itemLabel="" itemValue="" />
                                <f:selectItems value="" />
                            </p:selectOneMenu>-->
                        </h:panelGrid>
                    </fieldset>
                </h:form>
            </p:tab>
        </p:tabView>
        <h:form style="text-align: center; margin-top: 6pt">
            <p:toolbar>
                <p:toolbarGroup align="left">
                    <p:commandButton style="width: 36pt; height: 36pt" image="bNovo" disabled="#{controlesBem.btnNovo}" actionListener="#{controlesBem.btnNovoC}" title="Novo Coletor" id="btnNovo" update="tbvManutencao,btnNovo,btnSalvar,btnEditar,btnBloquear,btnCancelar,btnProcurar,btnFechar" />
                    <p:commandButton style="width: 36pt; height: 36pt" image="bSalvar" disabled="#{controlesBem.btnSalvar}" actionListener="#{controlesBem.btnSalvarC}" title="Salvar Coletor" id="btnSalvar" update="tbvManutencao,btnNovo,btnSalvar,btnEditar,btnBloquear,btnCancelar,btnProcurar,btnFechar" />
                    <p:commandButton style="width: 36pt; height: 36pt" image="bEditar" disabled="#{controlesBem.btnEditar}" actionListener="#{controlesBem.btnEditarC}" title="Editar Coletor" id="btnEditar" update="tbvManutencao,btnNovo,btnSalvar,btnEditar,btnBloquear,btnCancelar,btnProcurar,btnFechar" />
                    <p:divider />
                    <p:commandButton style="width: 36pt; height: 36pt" image="bBloqColetor" disabled="#{controlesBem.btnExcluir}" actionListener="#{controlesBem.btnExcluirC}" title="Bloquear Coletor" id="btnBloquear" update="tbvManutencao,btnNovo,btnSalvar,btnEditar,btnBloquear,btnCancelar,btnProcurar,btnFechar" />
                    <p:commandButton style="width: 36pt; height: 36pt" image="bCancelar" disabled="#{controlesBem.btnCancelar}" actionListener="#{controlesBem.btnCancelarC}" title="Cancelar Ação" id="btnCancelar" update="tbvManutencao,btnNovo,btnSalvar,btnEditar,btnBloquear,btnCancelar,btnProcurar,btnFechar" />
                    <p:divider />
                    <p:commandButton style="width: 36pt; height: 36pt" image="bProcurar" disabled="#{controlesBem.btnProcurar}" actionListener="#{controlesBem.btnProcurarC}" title="Procurar Coletor" id="btnProcurar" onclick="dlgProRegistro.show()" update="tbvManutencao,btnNovo,btnSalvar,btnEditar,btnBloquear,btnCancelar,btnProcurar,btnFechar" />
                    <p:divider />
                </p:toolbarGroup>
                <p:toolbarGroup align="right">
                    <p:commandButton style="width: 36pt; height: 36pt" image="bFechar" disabled="#{controlesBem.btnFechar}" actionListener="#{controlesBem.btnFecharC}" title="Fechar Tela" id="btnFechar" onclick="dlgManuColetor.hide()" update="tbvManutencao,btnNovo,btnSalvar,btnEditar,btnBloquear,btnCancelar,btnProcurar,btnFechar" />
                </p:toolbarGroup>
            </p:toolbar>
        </h:form>
    </p:dialog>
</ui:fragment>
Criado 5 de abril de 2011
Ultima resposta 29 de abr. de 2011
Respostas 7
Participantes 3

Topicos relacionados

[Webservice x Servlets] Qual o melhor uso e qual a exata diferença? 3 respostas [RESOLVIDO] Problemas com Firebird e java, utilizando JayBird 5 respostas Alguém que entenda de Parser HTML e queira discutir sobre o assunto? 19 respostas iReport + XML 16 respostas O que fazer para nao acontecer isso. duplicate Id for a component 12 respostas
Alura Git Flow: entenda o que é, como e quando utilizar Entenda o que é Git Flow, como funciona seu fluxo com branches como Master, Develop, Feature, Release e Hotfix, além de vantagens e desvantagens.
Casa do Codigo Desmistificando WebAssembly: Alta performance,... Por Raphael Amorim — Casa do Codigo