Question

I am using PrimeFaces, which in turn uses JQuery UI for not only the functionality but its CSS styling framework. This question arises from my ignorance about the CSS framework, and I have been unable to find any examples or documentation to guide me.

What I want to do is use the Theme’s style for error messages for my own panel. Something like this:

<p:panel rendered="#{bean.someError}"  styleClass="?? what goes here ??">
    <h:outputText styleClass="?? what goes here ??"
         value="Error!  A parameter to this page is wrong so it can't be rendered.  This
                is probably because you used a stale bookmark." />
</p:panel>

I want it to looks similar to the error message you would get when using . Any pointers much appreciated.

Answer 1

the easiest way to do this is to look at primefaces showcase, and use firebug to look at css classes.

I think you should use p:outputPanel with layout=”block” instead of p:panel, because the panel has its own styles. Instead, the outputPanel with block layouts renders a div with no styles.

Anyway, this is how your code should look like

<p:outputPanel rendered="#{bean.someError}" layout="block" styleClass="ui-messages ui-widget">
     <div class="ui-messages-error ui-corner-all">
         <span class="ui-messages-error-icon"></span>
         <ul>
            <li>
                <span class="ui-messages-error-summary">
                    <h:outputText value="Error!  A parameter to this page is wrong so it can't
                                         be rendered.  This is probably because you used a
                                         stale bookmark." />

                </span>
           </li>
        </ul>
    </div>
</p:outputPanel>