jsf - 如何在JSF中构建 "edit"按钮并在h :outputText and h:inputText之间切换

Question

如何创建一个“编辑”按钮，以便在单击该按钮时将 h:outputText 更改为 h:inputText？

Answer 1

利用 rendered 属性:

<h:outputText value="#{bean.entity.property}" rendered="#{not bean.editmode}" />
<h:inputText value="#{bean.entity.property}" rendered="#{bean.editmode}" />
...
<h:commandButton value="Edit" action="#{bean.edit}" rendered="#{not bean.editmode}" />
<h:commandButton value="Save" action="#{bean.save}" rendered="#{bean.editmode}" />

在 View 作用域的 bean 中使用它:

private boolean editmode;

public void edit() {
    editmode = true;
}

public void save() {
    entityService.save(entity);
    editmode = false;
}

public boolean isEditmode() {
    return editmode;
}

// ...

请注意，由于本答案第 5 点中提到的原因，处于 View 范围内的 bean 很重要:commandButton/commandLink/ajax action/listener method not invoked or input value not updated .

---

或者，您可以在输入组件上使用 disabled 属性并结合一段 CSS，这基本上使它看起来像一个输出组件(通过删除边框)。

<h:inputText value="#{bean.entity.property}" disabled="#{not bean.editmode}" />
...
<h:commandButton value="Edit" action="#{bean.edit}" rendered="#{not bean.editmode}" />
<h:commandButton value="Save" action="#{bean.save}" rendered="#{bean.editmode}" />

例如

input[disabled] {
    border: 0;
}

同样在这里，bean 必须在 View 范围内。另见 How to choose the right bean scope?