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

ビュー スコープ 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 スコープを選択する方法も参照してください。