NotificationPanel

Overview

Since 3.0

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.

See the ICEfaces Showcase Live Demo of this component, complete with source code.

Getting Started

<ace:notificationPanel widgetVar="notePanel" position="top">
    ...
</ace:notificationPanel>

Attributes

TagLib Documentation
This section covers attributes involved in the typical use-cases for this component. For reference, the complete taglib documentation for this component is available here.

position: either "top" or "bottom".

Event Listeners

None.

Client Behavior Events

close	Fired when the panel is closed (default event).
display	Fired when the panel is displayed.

JavaScript API

ICEfaces 3.x

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>

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: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">
...

The ice.ace.instance approach for showing notification panels requires the full client id of the notification panel to be specified, such as "j_idt77:myNotificationPanel" instead of just "myNotificationPanel". To reduce the complexity of working with complete IDs for showing/hiding notification panels it may be preferable in some cases to locate notification panels inside of forms with <h:form prependId="false"> specified.

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.

CSS Classes

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>

Known Issues