selectOneMenu选择后，JSF更新inputText [英] JSF update inputText after selectOneMenu choice

问题描述

当我从selectOneMenu中选择另一个外观时，我想更改inputTexts的值. 一切正常，我的Converter从菜单中返回了正确的Object，但是inputTexts没有更新.

I want to change the inputTexts' values when I choose another Skin from my selectOneMenu. Everything is doing well, my Converter gives back the right Object from the menu, but the inputTexts are not updated.

<h:form>
    <h:selectOneMenu id="dropdownSkin"
        value="#{helloBean.currentSkin}" defaultLabel="Select a skin.."
        valueChangeListener="#{helloBean.skinValueChanged}" immediate="true"
        onchange="this.form.submit()" converter="SkinConverter" >
        <f:selectItems value="#{helloBean.mySkinsSI}" var="c"
            itemValue="#{c.value}" />
    </h:selectOneMenu>


    <br />
    <h:inputText id="name" value="#{helloBean.currentSkin.title}"></h:inputText>
    <br />
    <h:inputText id="tcolor" value="#{helloBean.currentSkin.titleBar.textColor}"></h:inputText>
    <br />
    <h:inputText id="bcolor" value="#{helloBean.currentSkin.titleBar.backgroundColorStart}"></h:inputText>
</h:form>

这是我的Bean的外观.我调试了它，并正确设置了对象currentSkin.现在，我需要知道如何更新文本字段的内容.

Here is what my Bean looks like. I debugged it and the Object currentSkin is set correctly. Now i need to know how to update the textfields content.

@ManagedBean
@SessionScoped
public class HelloBean implements Serializable {

private static final long serialVersionUID = 1L;

private List<ExtendedSkin> mySkins;
private List<SelectItem> mySkinsSI;
private ExtendedSkin currentSkin;

public void skinValueChanged(ValueChangeEvent e) {
    currentSkin = (ExtendedSkin) e.getNewValue();
    FacesContext.getCurrentInstance().renderResponse();
}

public List<ExtendedSkin> getMySkins() {
    mySkins = XMLParser.readExtendedSkins();
    return mySkins;
}

public List<SelectItem> getMySkinsSI() {
    mySkinsSI = new LinkedList<SelectItem>();
    for (ExtendedSkin s : getMySkins()) {
        mySkinsSI.add(new SelectItem(s, s.getTitle()));
    }
    return mySkinsSI;
}

public void setMySkinsSI(List<SelectItem> myItems) {
    this.mySkinsSI = myItems;
}

public ExtendedSkin getCurrentSkin() {
    if (currentSkin == null) {
        currentSkin = getMySkins().get(0);
    }
    return currentSkin;
}

public void setCurrentSkin(ExtendedSkin currentSkin) {
    this.currentSkin = currentSkin;
}
}

推荐答案

此处的问题是转换器正在填充helloBean.currentSkin对象，但是<h:inputText>中绑定到此:title，textColor和backgroundColorStart将发送到服务器，并替换converter加载的实际值.换句话说:

The problem here is that the converter is doing its work filling the helloBean.currentSkin object, but the values in the <h:inputText> that are bounded to this helloBean.currentSkin: title, textColor and backgroundColorStart will be send to the server and replace the actual values that were loaded by the converter. In other words:

• 将执行转换器，并根据所选值构建helloBean.currentSkin.
• <h:inputText id="name">空值将发送到服务器，并将注入到helloBean.currentSkin.title中.其他2个<h:inputText>行为相同.
• 将使用选定的helloBean.currentSkin加载视图，并将使用空值加载helloBean.currentSkin.title.其他2个<h:inputText>行为相同.

• The converter is executed and builds the helloBean.currentSkin based on the selected value.
• The <h:inputText id="name"> empty value is sent to server and will be injected in helloBean.currentSkin.title. Same behavior for the other 2 <h:inputText>s.
• The view will be loaded using the selected helloBean.currentSkin and it will load the helloBean.currentSkin.title with the empty value. Same behavior for the other 2 <h:inputText>s.

有两个可能的解决方案:

There are two possible solutions to this problem:

1. 将<h:inputText>移到表单外，因此不会将空值发送到服务器.加载视图时，它将保持在转换器中加载的值.

1. Move the <h:inputText>s outside the form, so the empty values won't be send to the server. When loading the view, it will maintain the values loaded in the converter.

<h:form>
    <h:selectOneMenu id="dropdownSkin"
        value="#{helloBean.currentSkin}" defaultLabel="Select a skin.."
        valueChangeListener="#{helloBean.skinValueChanged}" immediate="true"
        onchange="this.form.submit()" converter="SkinConverter" >
        <f:selectItems value="#{helloBean.mySkinsSI}" var="c"
            itemValue="#{c.value}" />
    </h:selectOneMenu>
</h:form>
<br />
<h:inputText id="name" value="#{helloBean.currentSkin.title}"></h:inputText>
<!-- rest of Facelets code... -->

由于在更改下拉列表中的选定值时正在加载helloBean.currentSkin，因此可以使用

Since you're loading the helloBean.currentSkin while changing the selected value on your dropdownlist, you can add ajax behavior using <f:ajax> tag component inside the <h:selectOneMenu> and update the fields in a cleaner way. I would opt for this solution.

<h:form>
    <!-- Note that there's no need of the onchange JavaScript function -->
    <h:selectOneMenu id="dropdownSkin"
        value="#{helloBean.currentSkin}" defaultLabel="Select a skin.."
        valueChangeListener="#{helloBean.skinValueChanged}" immediate="true"
        converter="SkinConverter" >
        <f:selectItems value="#{helloBean.mySkinsSI}" var="c"
            itemValue="#{c.value}" />
        <f:ajax process="@this" render="name tcolor bcolor" />
    </h:selectOneMenu>
    <br />
    <h:inputText id="name" value="#{helloBean.currentSkin.title}" />
    <h:inputText id="tcolor" value="#{helloBean.currentSkin.titleBar.textColor}" />
    <br />
    <h:inputText id="bcolor"
        value="#{helloBean.currentSkin.titleBar.backgroundColorStart}" />
</h:form>

您可以在诸如由于要在页面中使用ajax调用，因此应将托管bean范围从@SessionScoped更改为@ViewScoped.有关此信息，请参见: JSF 2中的通信

Since you're going to use an ajax call in your page, you should change your managed bean scope from @SessionScoped to @ViewScoped. More info about this here: Communication in JSF 2

这篇关于selectOneMenu选择后，JSF更新inputText的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！