OverviewSince 3.0 Displays a dialog that asks users to confirm or cancel their actions.
Getting Started<ace:confirmationDialog widgetVar="confirmation" modal="true" message="This is a modal dialog" header="Modal Dialog" closable="true" closeOnEscape="false"> <h:panelGrid width="100%" style="text-align: center;" columns="2" cellspacing="30"> <h:commandButton value="Yes" onclick="confirmation.hide()"/> <h:commandButton value="No" onclick="confirmation.hide()"/> </h:panelGrid> </ace:confirmationDialog> Attributes
modal specifies whether the document should be shielded with a partially transparent mask. draggable allows the user to drag the dialog using its header. closable specifies whether the dialog should have a close button in the header. closeOnEscape specifies if dialog should be closed when escape key is pressed. header is text for the header. message is text to be displayed in body. Event ListenersNone. Client Behavior EventsNone. JavaScript APIICEfaces 3.xThe client side confirmation dialog object is exposed through the global variable name specified in the widgetVar attribute. You can use the hide() and show() methods to hide and show the confirmation dialog on the client side: <h:commandButton onclick="sampleDialog.show();" ... /> ... <ace:confirmationDialog widgetVar="sampleDialog" ... > ... <h:commandButton onclick="sampleDialog.hide();" ... /> ... </ace:confirmationDialog> ICEfaces 4+The "widgetVar" attribute on the ACE components has been removed in ICEfaces 4 and in its place a new "ice.ace.instance()" client JavaScript object lookup API has been introduced. The reason for this change is to enable lazy-initialization of the ACE component JavaScript objects to improve runtime performance and reduce browser memory use. widget = ice.ace.instance('frm:myDialog'); To illustrate this change, see the before and after code example below. Before (ICEfaces 3 API)<h:commandButton id="show" value="Show Dialog" onclick="sampleDialog.show();" type="button"/> <ace:confirmationDialog id="myDialog" header="A sample confirmation dialog overview example" widgetVar="sampleDialog" width="400"> ... After (ICEfaces 4 API)<h:commandButton id="show" value="Show Confirmation Dialog" onclick="ice.ace.instance('myDialog').show();" type="button"/> <ace:dialog id="myDialog" header="A sample dialog overview example" width="400"> ...
Keyboard and ARIA SupportThe following ARIA roles are supported: dialog, button. CSS ClassesThe following markup represents the basic HTML structure of the component and the CSS classes it uses. <!-- Root container --> <div> <div class="ui-dialog ui-widget ui-widget-content ui-corner-all [user defined classes]" style="[user defined styles]"> <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"> <span class="ui-dialog-title" >Title</span> <!-- Close button --> <a class="ui-dialog-titlebar-close ui-corner-all"><span class="ui-icon ui-icon-closethick"></span></a> </div> <div class="ui-dialog-content ui-widget-content"> <p> <span class="ui-icon ui-icon-alert"></span> Message </p> <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"> <!-- Body content --> </div> </div> </div> </div> Known IssuesThe following effects have been disabled due to errors or odd behaviours:
Dialog closes unexpectedly at the first request when having cleared the cache and pasted the URL Additional Resources |
ConfirmationDialog
© Copyright 2021 ICEsoft Technologies Canada Corp.