Primefaces SelectBooleanCheckbox（確認あり）

Question

primefacesのselect/unselectチェックボックスに確認ダイアログを表示したいと思います。私はしようとしました

<p:selectBooleanCheckBox value="#{myBean.checkBoxValue}"> 
    <p:confirm message="Are you sure?"/> 
</p:selectBoooleanCheckBox> 

しかし、selectBooleanCheckBoxは確認不可能なので動作しません。この問題を解決するための回避策はありますか？私はタイプミスをした ：

<p:selectBooleanCheckbox value="#{myBean.checkBoxValue}" 
          onchange="PF('myOwnConfirmDialog').show()" 
          widgetVar="checkConfirmwdgt"> 
</p:selectBooleanCheckbox> 

EDIT：

Answer 1

一つの方法は、

<p:confirmDialog widgetVar="myOwnConfirmDialog" message="Confirm ?"> 
    <p:commandButton value   = "Yes" 
        action   = "#{myBean.checkConfirmedAction}" 
        oncomplete  = "PF('myOwnConfirmDialog').hide()"/> 

    <p:commandButton value   = "No" 
        action   = "#{myBean.checkCancelledAction}" 
        oncomplete  = "PF('checkConfirmwdgt').toggle(); PF('myOwnConfirmDialog').hide()"/> 
</p:confirmDialog> 

のような独自のconfirmDialogを作成し、confirmDialogを開くためにのonchangeイベントを使用することです私の答えは間違いです。誤字は、の中に実際に<p:confirm>を使用していました（あなたは正しい、selectBooleanCheckboxは確認できません）。 <p:selectBooleanCheckbox>はonclickを起動せず、onblur、onchangeおよびonfocusのみを起動します。 onchangeを使用すると動作します。

Answer 2

私はこれを別の方法で解決しました.PlimeFacesがインターフェイスを実装するまで待つことはしませんでした。 私は2つの "commandButton"を表示しています - それらのうちの1つだけが状態に依存してレンダリングされます。それらはフォームで囲まれています。またはAJAXを介して更新された名前付きパネル（私の例では "selectProductUsageForm"）を使用することができます。最初のものはアクティブな（トグルされた）状態を表しています。

解決策は、表示動作を模倣することでした。これは、PrimefacesがCSSクラスの「UI状態アクティブ」（theme.css）にカプセル化しています。 CSSクラスの内容を自分のCSSクラスの "man-ui-state-active"にコピーし、最初のボタンに割り当てました。

<h:form id="selectProductUsageForm" 
    rendered="#{productManager.mayEditSelected}"> 
    <span class="productGroupUsageBtnContainer"> 


    <p:commandButton 
     value="#{msg['product.inUseByGroup']} (#{login.currentUser.group.name})" styleClass="man-ui-state-active" 
     icon="ui-icon-check" 
     action="#{productManager.toggleCurrentProductGroupUsage}" 
     rendered="#{productManager.currentProductGroupUsage}" update="selectProductUsageForm"> 
      <p:confirm message="Are you sure?"/> 
    </p:commandButton> 
    <p:commandButton value="#{msg['product.notInUseByGroup']} (#{login.currentUser.group.name})" 
     icon="ui-icon-close" 
     action="#{productManager.toggleCurrentProductGroupUsage}" 
     rendered="#{not productManager.currentProductGroupUsage}" update="selectProductUsageForm"> 
      <p:confirm message="Are you sure?"/> 
    </p:commandButton> 
    </span> 
    </h:form> 

CSS

.ui-button.man-ui-state-active { 
    background-color: #e6e6e6; 
    background-color: #d9d9d9 \9; 
    background-image: none; 
    outline: 0; 
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); 
    -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); 
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); 
}