Notification panel displays a panel at the top or bottom of the panel for notification. It can be used as a container for other contents/components.
<ace:notificationPanel widgetVar="notePanel" position="top"> ... </ace:notificationPanel>
position: either "top" or "bottom".
Client Behavior Events
The client side notification panel 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 notification panel on the client side:
<h:commandButton onclick="sampleNotification.show();" ... /> ... <ace:notificationPanel widgetVar="sampleNotification" ... > ... <h:commandButton onclick="sampleNotification.hide();" ... /> ... </ace:notificationPanel>
widget = ice.ace.instance('frm:myNotificationPanel');
To illustrate this change, see the before and after code example below.
Before (ICEfaces 3 API)
<h:commandButton id="show" value="Show Notification" onclick="sampleNotification.show();" type="button"/> <ace:notificationPanel id="myNotificationPanel" header="A sample notification panel overview example" widgetVar="sampleNotification" width="400"> ...
After (ICEfaces 4 API)
<h:commandButton id="show" value="Show Notification" onclick="ice.ace.instance('myNotificationPanel').show();" type="button"/> <ace:notificationPanel id="myNotificationPanel" header="A sample notification panel overview example" width="400"> ...
Client-side vs. Server-side
Avoid using both the visible attribute and client side API to open and close the notification panel. If you do, you have to make sure that the open/closed state is in sync by using the appropriate server side listeners. In the above example you would have to use the actionListener to do that. The close event of the upper right close button can be listened to by a child <ace:ajax> tag.
If there is a chance that the notification panel would be re-rendered from the server while open, you must use the visible attribute and use a variable for its value, because the default is false and the next time it's rendered it would be like visible = "false" always.
Keyboard and ARIA Support
The following ARIA roles are supported: alertdialog.
The following markup represents the basic HTML structure of the component and the CSS classes it uses.
<!-- Root container --> <div class="ui-notificationbar [user defined classes] ui-widget ui-widget-content ui-corner-all" style="[user defined styles]"> <span class="ui-notificationbar-close"> <!-- Close button body goes here... --> </span> <!-- Panel body goes here... --> </div>
© Copyright 2021 ICEsoft Technologies Canada Corp.