CODEWITHSUNDEEP
javajsfprimefacesxhtml
Gustavo Mendonça
Gustavo Mendonça

Reputation: 2091

How to change the value of an outputText?

I am developing a system that the user choose some checkboxes and each checkbox have a currency value, and I want to change a outputText according to selected checkboxes.

Example: I have three checkboxes, each one have $10.00. If the user choose just two checkboxes, the outputText must show $20.00. If the user choose the last one, the outputText must show $30.00. And all this without reloading the page.

My code so far:

<h:form id="form">
    <p:fieldset legend="Tipo base do site:" style="margin-bottom:20px">
        <h:panelGrid columns="2" cellpadding="5">
            <p:dataList value="#{tiposIndexView.tipos}" var="tipo"
            type="ordered" >
                R$ 
                <h:outputText value="#{tipo.preco}" >
                    <f:convertNumber pattern="#0.00" />
                </h:outputText>
            </p:dataList>
            <p:selectOneRadio id="tipo" value="#{tiposIndexView.tipos}"
                    layout="grid" columns="1">
                    <f:selectItems value="#{tiposIndexView.tipos}" var="tipo"
                        itemLabel="#{tipo.nome}" itemValue="#{tipo.nome}" />
            </p:selectOneRadio>
        </h:panelGrid>
    </p:fieldset>

    <p:fieldset legend="Sistemas adicionais:" style="margin-bottom:20px">
        <h:panelGrid columns="2" cellpadding="5">
            <p:dataList value="#{sistemasIndexView.sistemas}" var="sistema"
            type="ordered" >
                R$ 
                <h:outputText value="#{sistema.preco}" >
                    <f:convertNumber pattern="#0.00" />
                </h:outputText>
            </p:dataList>
            <p:selectManyCheckbox style="margin-top:0px;!important" id="grid" value="#{sistemasIndexView.sistemas}" layout="grid" columns="1">
                <f:selectItems value="#{sistemasIndexView.sistemas}" var="sistema" itemLabel="#{sistema.nome}" itemValue="#{sistema}" />
            </p:selectManyCheckbox>
        </h:panelGrid>
    </p:fieldset>

    <p:fieldset legend="Valor total:">
        <h:outputText>
            R$ 
            <f:convertNumber pattern="#0.00" />
        </h:outputText>
    </p:fieldset>
</h:form>

The last outputText is where I want to show the total value.

And one more question, every time that I open my site, all checkboxes starts checked and I want to all start unchecked. The code of checkboxes:

@ManagedBean
@ViewScoped
public class SistemasIndexView implements Serializable{
    private static final long serialVersionUID = -2697991732915561009L;
    private List<Sistema> sistemas;

    @PostConstruct
    public void init(){
        sistemas = new ArrayList<>();
        sistemas.add(new Sistema("Teste", 200));
        sistemas.add(new Sistema("Exemplo", 300));
        sistemas.add(new Sistema("gsdfaf", 50));
    }

    public List<Sistema> getSistemas() {
        return sistemas;
    }

    public void setSistemas(List<Sistema> sistemas) {
        this.sistemas = sistemas;
    }
}

Upvotes: 0

Views: 2283

Answers (1)

Geinmachi
Geinmachi

Reputation: 1251

You need 2 lists, one for storing all checkboxes and second for selected ones. That's why you have all checkboxes selected because your selected values are the same as all possible.

Css mistake: style="margin-top:0px;!important" should be style="margin-top:0px !important;"

Things you need in your backing bean (with getters/setters):

  • List for selected items private List<Sistema> selectedSistemas;
  • Field for calculated sum private int sum
  • Method for calculating output public void calculateSum()

Code

<p:selectManyCheckbox style="margin-top:0px !important;" id="grid" value="#{sistemasIndexView.selectedSistemas}" layout="grid" columns="1">
       <f:selectItems value="#{sistemasIndexView.sistemas}" var="sistema" itemLabel="#{sistema.nome}" itemValue="#{sistema}" />
       <p:ajax process="@this" listener="#{test.calculateSum}" update="sum"/>
</p:selectManyCheckbox>

<h:outputText id="sum" value="#{test.sum}">
      <f:convertNumber pattern="#0.00" />
</h:outputText>

And calculating method, you can change it but from what you have written it does the job

public void calculateSum() {
    sum = selectedSistemas.size() * 10;
}

Upvotes: 1

Related Questions