CODEWITHSUNDEEP
javauser-interfacejsfprimefaces
w3Charlie
w3Charlie

Reputation: 133

how to connect knobs in primefaces jsf

could someone tell me how to connect two or more knobs in primefaces?

I mean this thing https://www.primefaces.org/showcase/ui/input/knob.xhtml

I would like to have something like maxvalue = 100; knob2.value = maxvalue - knob1.value

so if I set knob1 higher the other goes down

<h3>Colors</h3> 
    <div class="knob-container ui-corner-all">
        <p:knob foregroundColor="red" backgroundColor="#00000" value="#{knobView.value}">
            <p:ajax listener="#{knobView.onChange}"/>
        </p:knob>  
        <p:knob foregroundColor="blue" backgroundColor="#0000FF" value="#{knobView.value2}">
            <p:ajax listener="#{knobView.onChange}"/>
        </p:knob>  
    </div>

.

public void onChange(){  
    FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, 
            "val1: " + value + " " +
            "val2: " + value2           , null
            )); 
    this.value2 = maxval - this.value;

}

edit: additional info I would like to have something like: at start knob1= 50; knob2= 50 I set knob1 to 60 and knob2 goes automatically down to 40 I set knob1 to 10 and knob2 goes up to 90

Upvotes: 0

Views: 783

Answers (1)

jklee
jklee

Reputation: 2268

Use 2 onChange methods and update after change the other knob.

XHTML

<div class="knob-container ui-corner-all">
    <p:knob id="knob_1" foregroundColor="red" backgroundColor="#00000"
        value="#{knobView.value1}">
        <p:ajax listener="#{knobView.onChange1()}" update="knob_2" />
    </p:knob>
    <p:knob id="knob_2" foregroundColor="blue" backgroundColor="#0000FF"
        value="#{knobView.value2}">
        <p:ajax listener="#{knobView.onChange2()}" update="knob_1" />
    </p:knob>
</div>

Bean

@Named
@SessionScoped
public class KnobView implements Serializable {

    int value1;
    int value2;
    int maxval = 100;
    // getter & setter

    public void onChange1() {
        FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO,
                "val1: " + value1 + " " +
                        "val2: " + value2,
                null));
        this.value2 = maxval - value1;
    }

    public void onChange2() {
        FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO,
                "val1: " + value1 + " " +
                        "val2: " + value2,
                null));
        this.value1 = maxval - value2;
    }

}

Upvotes: 1

Related Questions