java - 如何在 primefaces jsf 中连接旋钮

Question

有人可以告诉我如何在 primefaces 中连接两个或多个旋钮吗？

我是说这个 https://www.primefaces.org/showcase/ui/input/knob.xhtml

我想要类似的东西最大值=100；旋钮2.值=最大值-旋钮1.值

所以如果我将旋钮1设置得更高，另一个就会下降

<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;

}  

编辑:附加信息我想要这样的东西:启动时旋钮1= 50；旋钮2= 50我将旋钮 1 设置为 60，旋钮 2 自动降至 40我将旋钮 1 设置为 10，旋钮 2 设置为 90

Answer 1

使用2个onChange方法并在更改另一个旋钮后更新。

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;
    }

}