Primefacons SelectBooleanCheckbox mit Bestätigung

Question

Ich möchte Bestätigungsdialog zum Aktivieren/Deaktivieren des Kontrollkästchens in Hauptflächen anzeigen. Ich habe versucht,

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

aber es funktioniert nicht, da selectBooleanCheckBox nicht bestätigt werden kann. Gibt es eine Problemumgehung, um dieses Problem zu beheben?

Answer 1

Eine Möglichkeit ist, Ihre eigene confirmDialog wie

<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> 

und dann Onchange Ereignis zum Erstellen der confirmDialog öffnen:

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

EDIT: machte ich einen Tippfehler und ein Fehler bei meiner Antwort. Der Tippfehler war tatsächlich <p:confirm> innerhalb <p:selectBooleanCheckbox> (Sie haben Recht, selectBooleanCheckbox ist nicht bestätigbar.) Der Fehler war, dass <p:selectBooleanCheckbox> nicht onclick feuert, sondern nur onblur, onchange und onfocus. Die Verwendung von onchange funktioniert.

Answer 2

Ich löste es auf andere Weise - wollte nicht warten, bis PrimeFaces das Interface implementiert. Ich zeige zwei "commandButton" s - nur einer von ihnen wird abhängig vom Status gerendert. Sie werden von einem Formular eingeschlossen - oder Sie können ein benanntes Panel verwenden ("selectProductUsageForm" in meinem Beispiel), das über AJAX aktualisiert wird. Der erste repräsentiert den aktiven (getoggten) Zustand - der zweite den nicht korrigierten Zustand.

Die Lösung bestand darin, das Darstellungsverhalten nachzuahmen - welches Primefaces in der CSS-Klasse "ui-state-active" (theme.css) kapselt. Ich habe den Inhalt der CSS-Klasse in meine eigene CSS-Klasse "man-ui-state-active" kopiert und der ersten Schaltfläche zugewiesen.

<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); 
}