Over a million developers have joined DZone.

How to Customize the Growl PrimeFaces Component

· Java Zone

Discover how AppDynamics steps in to upgrade your performance game and prevent your enterprise from these top 10 Java performance problems, brought to you in partnership with AppDynamics.

I believe that every JSF fan has heard about PrimeFaces, the open source component suite for Java Server Faces (PrimeFaces). From my point of view, it is a real pleasure to explore PrimeFaces components and to get play with their capabilities. Recently, I had to use a customized growl component, meaning that I needed to make it appear in different locations and changing it’s aspect. Let me share this experience with you!
The final result (after customization) is shown in the below image:

- Replacing the default info icon with a custom image can be accomplished by using the infoIcon attribute of <p:growl> component:

<p:growl id="growl" infoIcon="./imgs/user.png" />
- In addition, you can customize the image’s CSS properties, like width and height, by modifying the CSS class ui-growl-image:
.ui-growl-image { 
    width: 100px;
    height: 95px;
    float: left;

- By default, the growl’s message will be displayed for 6000 ms and after that will be hidden. You can change this period by setting the sticky attribute to true (the message will never get hide) or changing the duration in the life attribute.
<p:growl id="growl" infoIcon="./imgs/user.png" showDetail="true"
                                          sticky="false" life="10000" />
- The growl background it is also customizable through CSS. This time operate over ui-growl-item-container class:
.ui-growl-item-container {
    background-image: url('./imgs/background.jpg');

- The growl closing icon is set by default in the top left corner. If you want it to appear in a different place, like top right corner, you need to modify the CSS ui-growl-icon-close class:
.ui-growl-icon-close {
    cursor: pointer;
    position: absolute;
    left: 335px;
    top: 15px;

- You can also change the font and style of the summary and the detail message, like below:
.ui-growl-title {
    font: 28px "Lucida Console", Monaco, monospace;
    text-align: center;
.ui-growl-message p {
    font: 20px "Lucida Console", Monaco, monospace;
    letter-spacing: -1px;
- Finally, you can place the growl anywhere you want, top left, bottom left, bottom right, center and so on by ui-growl class:
.ui-growl {   
    top: 40%;
    left: 37%;
    width: 360px;
    height: 110px;

That’s it ! Hope you like it!


From http://e-blog-java.blogspot.com/2011/07/how-to-customize-growl-primefaces.html

The Java Zone is brought to you in partnership with AppDynamics. AppDynamics helps you gain the fundamentals behind application performance, and implement best practices so you can proactively analyze and act on performance problems as they arise, and more specifically with your Java applications. Start a Free Trial.


{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}