<style type="text/css">
    .ui-toggleswitch {
        vertical-align: bottom;
    }
</style>


<h:form>
    <p:growl id="msg" />

    <h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
        <h:outputText value="Basic: " />
        <p:toggleSwitch value="#{selectBooleanView.value1}" />
        
        <h:outputText value="Ajax: " />
        <p:toggleSwitch value="#{selectBooleanView.value2}">
            <p:ajax listener="#{selectBooleanView.addMessage}" update="msg" />
        </p:toggleSwitch>
    </h:panelGrid>

    <p:commandButton value="Submit" icon="pi pi-check" update="display" oncomplete="PF('dlg').show()" />

    <p:dialog header="Values" modal="true" resizable="false" showEffect="fade" widgetVar="dlg">
        <h:panelGrid columns="1" id="display">
            <h:outputText value="Value 1: #{selectBooleanView.value1}" />
            <h:outputText value="Value 2: #{selectBooleanView.value2}" />
        </h:panelGrid>
    </p:dialog>
</h:form>