Because I am constantly busy working on something, I have never had time to actually put everything in words and pictures. But, since you got here, then you must have already seen some part of my work - and this is the way I’m talking.I'm 23, born in Romania, student at UPG Romania in software development field. I started from 0, mostly with basic stuff, and I’m evolving every day to an expert. I'm focused on freelancing projects, from small websites, to really heavy stuff. I know that I look and act differently from most developers, but this is why you will love to work with me! Constantin has posted 42 posts at DZone. You can read more from them at their website. View Full User Profile

How to Customize the Growl PrimeFaces Component

07.25.2011
| 16577 views |
  • submit to reddit

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 {   
    position:fixed;
    top: 40%;
    left: 37%;
    width: 360px;
    height: 110px;
    z-index:9999; 
}

That’s it ! Hope you like it!

 

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

Published at DZone with permission of its author, Constantin Alin.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Tags: