How to build “edit” button in JSF and switch between h:outputText and h:inputText

南笙酒味 提交于 2019-12-29 06:33:14

问题


How can I create an "edit" button so that when the button is clicked it will change the h:outputText to h:inputText?


回答1:


Make use of the rendered attribute:

<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}" />

With this in a view scoped bean:

private boolean editmode;

public void edit() {
    editmode = true;
}

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

public boolean isEditmode() {
    return editmode;
}

// ...

Note that the bean being view scoped is important for the reason mentioned in point 5 of this answer: commandButton/commandLink/ajax action/listener method not invoked or input value not updated.


Alternatively, you can use the disabled attribute on input component in combination with a shot of CSS which basically makes it look like an output component (by removing the border).

<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}" />

with e.g.

input[disabled] {
    border: 0;
}

Also here, the bean must be view scoped. See also How to choose the right bean scope?



来源:https://stackoverflow.com/questions/7133151/how-to-build-edit-button-in-jsf-and-switch-between-houtputtext-and-hinputtex

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!