选择selectOneMenu之后JSF更新inputText

Question

我想从selectOneMenu中选择另一个Skin时更改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>秒的行为相同.
• 将使用所选视图加载视图,它将使用空值helloBean.currentSkin加载helloBean.currentSkin.title.其他2 <h:inputText>秒的行为相同.

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

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下拉列表中更改所选值时正在加载,因此可以使用<f:ajax>标记组件在其中添加ajax行为,<h:selectOneMenu>并以更干净的方式更新字段.我会选择这个解决方案.

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

您可以<f:ajax>在此类在线教程中了解更多信息.

由于您将在页面中使用ajax调用,因此应将托管bean范围从更改@SessionScoped为@ViewScoped.关于这里的更多信息:JSF 2中的沟通