JSF 在 selectOneMenu 选择后更新 inputText

Question

当我从我的 selectOneMenu 中选择另一个皮肤时，我想更改 inputTexts 的值。 一切都很好，我的转换器从菜单中返回了正确的对象，但是 inputTexts 没有更新。

<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 的样子。我对其进行了调试，并且正确设置了 Object currentSkin。现在我需要知道如何更新文本字段的内容。

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

Answer 1

这里的问题是转换器正在完成填充helloBean.currentSkin 对象的工作，但<h:inputText> 中绑定到helloBean.currentSkin 的值：title、textColor 和backgroundColorStart 将被发送到服务器并替换由converter 加载的实际值。换句话说：

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

这个问题有两种可能的解决方案：

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

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

2. 由于您在更改下拉列表中的选定值时加载了helloBean.currentSkin，因此您可以使用<h:selectOneMenu> 内的<f:ajax> 标记组件添加ajax 行为，并以更简洁的方式更新字段。我会选择这个解决方案。

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

您可以在this one 等在线教程中了解有关<f:ajax> 的更多信息。

由于您将在页面中使用 ajax 调用，因此您应该将托管 bean 范围从 @SessionScoped 更改为 @ViewScoped。更多信息请点击此处：Communication in JSF 2