如何在 JSF 中构建“编辑”按钮并在 h:outputText 和 h:inputText 之间切换

Posted 2023-02-19

【中文标题】如何在 JSF 中构建“编辑”按钮并在 h:outputText 和 h:inputText 之间切换

【英文标题】：How to build "edit" button in JSF and switch between h:outputText and h:inputText

【发布时间】：2011-10-31 06:44:38

【问题描述】：

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

【参考方案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" />

在视图范围的 bean 中使用 this：

private boolean editmode;

public void edit() 
    editmode = true;


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


public boolean isEditmode() 
    return editmode;


// ...

请注意，由于本答案第 5 点中提到的原因，被视域限定的 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 必须是视图范围的。另见How to choose the right bean scope?