⁠15.7. <rich:notifyStack>

Notifications emited by <rich:notify>, <rich:notifyMessage> and <rich:notifyMessages> are displayed in top-right corner of the screen by default.
It is <rich:notifyStack> which defines where messages will appear and handles their stacking.
Stack also provides way how to remove messages from screen - when stack is re-rendered, current notifications are destroyed, freeing place for new notifications.

⁠15.7.1. Basic usage

They are three alternative ways to bind notifications with a stack:
  • wrapping: nesting <rich:notify>, <rich:notifyMessage> or <rich:notifyMessages> binds notifications with the stack in which they are wrapped
  • binding by id: notification can be bound directly to a stack using it's componentId in the stack attribute
  • using default stack: a default stack is used when no other binding is defined for a given notification 
​<rich:notifyStack position="bottomRight">
​    <rich:notifyMessages />
​</rich:notifyStack>
The sample above defines the stack explicitly, where notifications use the stack in which they are wrapped.
The sample bellow uses a notification rendered into the top-left corner of the screen. The notification is bound to a stack using it's id. 
​<rich:notifyStack id="leftStack" position="topLeft" />
​
​<rich:notify stack="leftStack" />

⁠15.7.2. Positioning notifications

To redefine the position of a notification, one needs to define a stack and bind it with the given notification.
<rich:notifyStack> uses the position attribute to place the stack and it's notifications into one of four corners: topRight (default), bottomRight, bottomLeft, topLeft.

⁠15.7.3. Stacking notifications

There are two attributes which influences how notifications are placed into a stack:
  • method: defines where new notifications are placed and how they are removed. Options: first (default), last.
    direction: defines in which direction will be messages stacked. Options: vertical (default), horizontal
The following sample shows a stack which will place new notifications up front - the incoming message will appear first, causing all notifications currently in stack to shift. Subsequently, messages at the end of stack will be then removed. 
​<rich:notifyStack method="first" />
On the other hand, stacking method last provides a method to place messages on the end of the stack, and when removing a notification, it is removed from the start, causing all other notifications to shift.

⁠15.7.4. Reference data

  • component-type: org.richfaces.NotifyStack
  • component-class: org.richfaces.component.UINotifyStack
  • component-family: org.richfaces.NotifyStack
  • renderer-type: org.richfaces.NotifyStackRenderer

⁠15.7.5. Style classes and skin parameters

⁠

Table 15.5. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties
.rf-ntf-pos-tl
This class defines where top-left stack of notification will be positioned
No skin parameters.
.rf-ntf-pos-tr
This class defines where top-right stack of notification will be positioned
No skin parameters.
.rf-ntf-pos-bl
This class defines where bottom-left stack of notification will be positioned
No skin parameters.
.rf-ntf-pos-br
This class defines where bottom-right stack of notification will be positioned
No skin parameters.