Question

我试图创建一个表单，您可以通过primefaces滑块组件给出一个范围，具有完全精确或不精确的上限（即范围的上限可以是1000或> 1000）。范围的可选性通过复选框指示。

在表格中，我有以下部分：

<p:outputLabel value="From 1:"  />
<p:inputText style="display: block;margin-bottom: 3px;" id="lower" value="#{dilution.lower}" />
<p:outputLabel value="To 1:" />
<p:inputText style="display: block;margin-bottom: 3px;" widgetVar="upp" id="upper" value="#{dilution.upper}" />
<p:outputLabel value="Greater than 1000" for="above1000" />
<p:selectBooleanCheckbox id="above1000" value="#{dilution.bigger}" valueChangeListener="#{dilution.above}"  >
    <p:ajax update="upper" />
</p:selectBooleanCheckbox>
<h:outputText style="display: block;" id="displayRange" value="Choose from intervall 1:1 till 1:1000"/>                        
<p:slider id="dfact" displayTemplate="For intervall 1:{min} till 1:{max}" for="lower,upper" range="true" step="1" minValue="1" maxValue="1000" />

选中该复选框后，我希望上限文本字段中的值更改为1000，如果未选中，我不希望它改变文本字段的值。

我几乎使用附加到复选框的valueChangeListner来使用它。

在支持bean dilution中，我有以下valueChangeListner：

public void above(ValueChangeEvent event){
    if((Boolean)event.getNewValue()){
        upper = 1000;
    }        
}

将文本字段upper的值设置为1000.我的问题是，如果我将文本字段的值更改为其他数字，则会执行此操作，然后取消选中文本框。

我猜这是因为upper支持bean值仍然是从上一次设置为1000。我尝试将ajax调用过程设为upper组件，如下所示：

<p:ajax update="upper" process="upper" />

因为我认为这会使它在更新之前处理upper组件（因此根据文本字段中的内容更改支持bean值）。但是当我这样做时，文本字段根本就没有设置。

然后我觉得使用javascript来做这件事更有意义，避免对服务器进行任何不必要的调用，但无法弄清楚如何去做。我考虑过以某种方式使用widgetVar但我无法找到任何文档向我展示如何使用它。

如果在设置滑块的位置更改文本字段中的值会更好，但这不太重要。

任何提示最好的方法是什么？

Answer 1

你尝试做的方式不对。

我为你重写了这个例子

XHTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:fn="http://java.sun.com/jsp/jstl/functions">

<h:head>
    <title>Demo</title>
    <script type="text/javascript">

</script>
    <link rel=" stylesheet" type="text/css" href="css/style.css"></link>

    <h:body>
        <h:form id="form">
            <p:panel header="Form">

                <h:panelGrid columns="2">

                    <h:outputText value="From:" />
                    <p:inputText value="#{testBean.lower}" id="lower"></p:inputText>

                    <h:outputText value="To:" />
                    <p:inputText value="#{testBean.upper}" id="upper"></p:inputText>

                    <h:outputText value="Change Upper to Max" />
                    <p:selectBooleanCheckbox value="#{testBean.maxUpper}">
                        <p:ajax event="change" listener="#{testBean.chageMax}"
                            update=":form:upper"></p:ajax>
                    </p:selectBooleanCheckbox>

                    <h:outputText style="display: block;" id="displayRange"
                        value="Choose from intervall 1:1 till 1:1000" />
                    <p:slider id="dfact"
                        displayTemplate="For intervall 1:{min} till 1:{max}"
                        for=":form:lower,:form:upper" range="true" step="1" minValue="1"
                        maxValue="1000" />
                </h:panelGrid>

            </p:panel>
        </h:form>

    </h:body>

</h:head>

</html>

托管Bean（回bean）

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name = "testBean")
@SessionScoped
public class TestBean {

    private int lower;
    private int upper;
    private boolean maxUpper;

    public void chageMax() {
        if (maxUpper) {
            upper = 1000;
        } else {
            upper = 0;
        }
    }

    public boolean isMaxUpper() {
        return maxUpper;
    }

    public void setMaxUpper(boolean maxUpper) {
        this.maxUpper = maxUpper;
    }

    public int getLower() {
        return lower;
    }

    public void setLower(int lower) {
        this.lower = lower;
    }

    public int getUpper() {
        return upper;
    }

    public void setUpper(int upper) {
        this.upper = upper;
    }
}

生成的输出

Initial page load

When tick box selected

Using Slider

我希望它有所帮助。

布尔复选框，设置textfield的值

1 个答案: