Swap button after JSF click

Question

Talk personal I have the following problem, I have these two buttons that make:

X : Removes the value of a chart + : Adds the value of a chart

I need it to look like this: When I click the X button

it switches to the +button as they have different functions as you can notice.

My view is like this currently:

<p:column width="30">
                <p:commandButton id="valorSelect" value="x"
                    actionListener="#{statusView.selecionarView}" update=":novoform:grafico" >
                    <f:attribute name="projetoSelecionadoNaView" value="#{projeto}" />
                </p:commandButton>
                <p:commandButton value="+"
                    actionListener="#{statusView.addView}" update=":novoform:grafico" >
                    <f:attribute name="projetoSelecionadoNaView" value="#{projeto}" />
                </p:commandButton>
</p:column>

Answer 1

If I understand correctly, you want when the user clicks on a button it disappears and the other one is in place. You can use the 'rendered JSF attribute joined with a boolean expression or variable that changes at the time you wish. I took more or less your code and made an example already inside a table:

 <h:form id="novoform">

        <p:dataTable id="grafico" value="#{trocaBotaoBean.listaTeste}" var="nome" >
            <p:column headerText="Action" >
                <p:commandButton rendered="#{!trocaBotaoBean.adicionandoValor}"
                                 id="valorSelect" value="x" actionListener="#{trocaBotaoBean.adicionar()}"
                                 update=":novoform:grafico" />
                <p:commandButton rendered="#{trocaBotaoBean.adicionandoValor}"
                                 actionListener="#{trocaBotaoBean.retirar()}"
                                 value="+"
                                 update=":novoform:grafico" />
            </p:column>
            <p:column headerText="VALORES">
                <h:outputText value="#{nome}" />
            </p:column>
        </p:dataTable>

    </h:form>

Managedbean:

public class TrocaBotaoBean {

private boolean adicionandoValor;

public TrocaBotaoBean() {

}

public void adicionar() {
    this.adicionandoValor = true;
}

public void retirar() {
    this.adicionandoValor = false;
}

public boolean isAdicionandoValor() {
    return adicionandoValor;
}

public List<String> getListaTeste() {
    List<String> nomes = new ArrayList<>();
    nomes.add("ZEUS");
    nomes.add("THOR");
    nomes.add("RÁ");
    return nomes;
}
}

I hope I’ve helped.