如何在全局范围内为 JSF 消息指定 errorStyle 和 warnStyle？答案

【问题标题】：How can I specify errorStyle and warnStyle for JSF messages globally?如何在全局范围内为 JSF 消息指定 errorStyle 和 warnStyle？
【发布时间】：2014-01-19 07:59:00
【问题描述】：

我正在使用 JSF2.2 和 Twitter Bootstrap 为客户端编写小型 Web 应用程序。

我自定义了<h:messages> 标签转储的列表元素的外观，但现在我必须在每次使用<h:messages> 时指定它的errorStyle 和warnStyle，如下所示：

<h:messages class="messages" errorClass="has-error" warnClass="has-warning"/>

有没有办法摆脱这种样板标记？我可以以某种方式全局设置这些属性吗？

【问题讨论】：

标签： java jsf twitter-bootstrap jsf-2 java-ee-7

【解决方案1】：

您可以为您的项目特定方式全局覆盖 primefaces css 样式一次。

例如，我在我的 CSS 中覆盖了如下一次。您可以使用 FireBug 等插件查看 primefaces css。

            .ui-messages-info,.ui-messages-warn,.ui-messages-error,.ui-messages-fatal
                {
                width: 795px;
                min-height: 20px;
                border-style: solid;
                border-top: none;
                border-right: none;
                border-bottom: none;
                border-left-width: 5px;
            }

            .ui-messages-warn,.ui-message-warn {
                border-left-color: rgb(224, 203, 82);
                color: brown;
            }

            .ui-messages-error,.ui-message-error {
                border-left-color: rgb(224, 82, 82);
            }

            .ui-messages-info,.ui-message-info {
                border-left-color: rgb(82, 224, 82);
                background: rgb(233, 251, 233);
                color: green;
            }

            .ui-messages-warn-icon {
                background: url('../images/warning_24x24.png');
            }

            .ui-messages-error-icon {
                background: url('../images/error_24x24.png');
            }

            .ui-messages-info-icon {
                background: url('../images/success_24x24.png');
            }

            .ui-messages-warn-summary {
                font-weight: normal;
            }

在您的页面中，您可以如下所示，它会根据错误、警告、信息等动态运行，

            <p:messages autoUpdate="true" />

【讨论】：

OP 没有提到在任何地方使用 primefaces