Как создать кнопку редактирования в JSF и переключаться между h: outputText и h: inputText

Используйте атрибут 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-компоненте с областью видимости:

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 не вызван или входное значение не обновлено.

В качестве альтернативы вы можете использовать атрибут 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-компонент должен иметь область просмотра. См. также Как правильно выбрать область действия bean-компонента?