PrimeFacesで共通ダイアログを作る

現在作っているプロトタイプは、複数人による開発で使われる基盤となるものです。
なので、なるべく共通化をして、各開発者の負担を減らしたり、作りがバラバラになるのを避けるような仕組みを入れます。

で、今日は共通ダイアログの作成。
何か押したら「〜しますか？」のメッセージダイアログが出て「はい」「いいえ」ボタンを押すものです。

画面コンポはPrimeFacesを利用していますので、単純にconfirmDialogを使えば動きます。

<p:confirmDialog id="confirmDlg" message="xxしますか？" header="確認ダイアログ" severity="info" widgetVar="confirmation">
    <p:commandButton id="yes" value="はい" update="messages" oncomplete="confirmation.hide()" actionListener="#{xxx}" />
    <p:commandButton id="no" value="いいえ" onclick="confirmation.hide()" type="button" /> 
</p:confirmDialog>

しかし、こうした確認ダイアログのボタンは「はい」「いいえ」のみで、ケースによって「キャンセル」が加わるくらいのものです。なので、以下のように複合コンポーネントで括り、共通ダイアログコンポを作ります。

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:composite="http://java.sun.com/jsf/composite"
      xmlns:p="http://primefaces.org/ui">
    
    <composite:interface>
        <composite:attribute name="actionListenerYes" targets="btnYes" default="#"  />
        <composite:attribute name="actionListenerNo" targets="btnNo" default="#" />
        <composite:attribute name="header"  />
        <composite:attribute name="message"  />
        <composite:attribute name="severity" default="alart" targets="dlg"  />
        <composite:attribute name="updateYes" targets="btnYes" />
        <composite:attribute name="updateNo" targets="btnNo" />
        <composite:attribute name="valueYes" />
        <composite:attribute name="valueNo" />
        <composite:attribute name="widgetVar" />
    </composite:interface>
    
    <composite:implementation>
        <p:confirmDialog id="dlg" message="#{cc.attrs.message}" header="#{cc.attrs.header}" severity="#{cc.attrs.severity}" widgetVar="#{cc.attrs.widgetVar}">
        <p:commandButton id="btnYes" value="#{cc.attrs.valueYes}" oncomplete="#{cc.attrs.widgetVar}.hide()" 
                             actionListener="#{cc.attrs.actionListenerYes}" update="#{cc.attrs.updateYes}" />
        <p:commandButton id="btnNo" value="#{cc.attrs.valueNo}"
                             oncomplete="#{cc.attrs.widgetVar}.hide()" update="#{cc.attrs.updateNo}"/>
        </p:confirmDialog>
    </composite:implementation>
</html>

なお、PrimeFacesのコンポーネントを複合コンポーネント化すると、ちょいちょい上手く動かないケースもあって検証をしっかりやらないと危ないのでご注意ください。

で、この複合コンポを使えば、最初の定義は以下の定義に置き換えられます。

<k:confirmDlg message="削除して宜しいでしょうか？" header="削除確認ダイアログ" severity="alert" widgetVar="delDlg"  valueYes="はい" actionListenerYes="#{削除処理と紐づける}" updateYes="アップデートするコンポ" valueNo="いいえ" />