Как создать кнопку "редактировать" в JSF и переключаться между h:outputText и 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}" />

С этим в представлении определена фасоль:

private boolean editmode;

public void edit() {
    editmode = true;
}

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

public boolean isEditmode() {
    return editmode;
}

// ...

Обратите внимание, что область видимости bean-компонента важна по причине, указанной в пункте 5 этого ответа: метод commandButton / commandLink / ajax action / listener не вызывается или входное значение не обновляется.

---

Кроме того, вы можете использовать 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;
}

Также здесь, боб должен быть виден в области видимости. Смотрите также Как правильно выбрать сферу применения бобов?