4

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.

AlanObject
  • 9,613
  • 19
  • 86
  • 142

2 Answers2

4

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>
Manuel M
  • 809
  • 1
  • 10
  • 25
damian
  • 4,024
  • 5
  • 35
  • 53
  • Thanks -- I had started the process of prying apart the CSS classes, but I haven't mastered the structure yet. I'll try this when I get home tonight. – AlanObject Jul 10 '12 at 17:41
1

For single message it's enought to have:

<div class="ui-message-error ui-corner-all">
      <span class="ui-message-error-icon"/>
      <span class="ui-message-error-detail">your message here</span>
</div>

It's a bit less tags then in Damian's answer.

Danubian Sailor
  • 1
  • 38
  • 145
  • 223
  • But you cannot dynamically update your message and you can with Damian's solution. That should at least be mentioned in the answer. And I therefor think Damians answer is better – Kukeltje Jul 01 '15 at 12:11