How to build "edit" button in JSF and switch between h:outputText and h:inputText -

how can create "edit" button when button clicked change h:outputtext h:inputtext?

make use of 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 in 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 bean being view scoped important reason mentioned in point 5 of answer: commandbutton/commandlink/ajax action/listener method not invoked or input value not updated.

---

alternatively, can use disabled attribute on input component in combination shot of css makes output component (by removing 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, bean must view scoped. see how choose right bean scope?