在两个 p:growl 中显示基于 Severity 的消息

Question

我正在使用 PrimeFaces p:growl。

<p:growl id="msgsInfo"
         rendered="true"
         showDetail="true" />
<p:growl id="msgsError"
         globalOnly="true"
         showDetail="true"
         sticky="true" />

我只需要在第一个咆哮中显示Info 消息，而在第二个中我需要显示Error 消息。 当我添加错误消息时使用globalOnly，这是显示2次。

有什么想法吗？

Answer 1

如果它支持infoClass、errorClass 等属性，如h:messages，理论上是可能的。然后，您可以只指定一个 CSS 类来执行 display: none。

但是p:growl 不支持这些属性。在严重性级别上，您所能做的就是将图标更改为infoIcon、errorIcon 等。所以你在这里迷路了。

这可能值得feature request。

请注意，globalOnly="true" 仅显示具有 null 客户端 ID 的消息，无论其严重程度如何。

Answer 2

请看我的回答

PrimeFaces growl change color dynamically (Multiple messages)

您还可以找到生成以下页面的项目的源代码：

Answer 3

我一直在寻找相同的功能（将咆哮设置为从特定的消息严重性发出粘性）。 PrimeFaces (6.1) 不提供此功能，但很容易破解growl JavaScript。更具体地说，在 bindEvents 函数中，他们检查是否配置了 sticky 并基于此：

//hide the message after given time if not sticky
if(!sticky) {
    this.setRemovalTimeout(message);
}

因此，您可以原型化（覆盖）bindEvents 函数并根据消息严重性设置 sticky。

PrimeFaces.widget.Growl.prototype.bindEvents = function(message) {
    var _self = this,
    sticky = this.cfg.sticky;

    // Start hack
    if (!sticky) {
      // Your rule
    }
    ...

您还可以对renderMessage 进行原型设计，并将严重性作为参数添加到bindEvents。我选择使用快速破解并从className 阅读它。

我添加了这些实用功能：

var SEVERITIES = [ "info", "warn", "error", "fatal" ];

function getSeverity(domNode) {
  // HACK Severity can be found in the className after the last - character.
  var severity = domNode.className;
  return severity.substring(severity.lastIndexOf("-") + 1);
}

function getSeverityIndex(severityString) {
  return SEVERITIES.indexOf(severityString);
}

现在您可以使用以下检查：

if (!sticky) {
  sticky = getSeverityIndex(getSeverity(message[0])) >= getSeverityIndex("error");
}

我可能会在 GitHub 上创建一个拉取请求，您可以在其中使用 p:growl 组件上的 stickSeverity 属性设置最小严重性以粘贴按摩。

这是完整的 JavaScript hack (PrimeFaces 6.1)：

var SEVERITIES = [ "info", "warn", "error", "fatal" ];

function getSeverity(domNode) {
  // HACK Severity can be found in the className after the last - character.
  var severity = domNode.className;
  return severity.substring(severity.lastIndexOf("-") + 1);
}

function getSeverityIndex(severityString) {
  return SEVERITIES.indexOf(severityString);
}

PrimeFaces.widget.Growl.prototype.bindEvents = function(message) {
    var _self = this,
    sticky = this.cfg.sticky;

    // Start customization
    if (!sticky) {
      sticky = getSeverityIndex(getSeverity(message[0])) >= getSeverityIndex("error");
    }
    // End customization

    message.mouseover(function() {
        var msg = $(this);

        //visuals
        if(!msg.is(':animated')) {
            msg.find('div.ui-growl-icon-close:first').show();
        }
    })
    .mouseout(function() {
        //visuals
        $(this).find('div.ui-growl-icon-close:first').hide();
    });

    //remove message on click of close icon
    message.find('div.ui-growl-icon-close').click(function() {
        _self.removeMessage(message);

        //clear timeout if removed manually
        if(!sticky) {
            clearTimeout(message.data('timeout'));
        }
    });

    //hide the message after given time if not sticky
    if(!sticky) {
        this.setRemovalTimeout(message);
    }
}