css - 如何更改应用于带有消息类型的 jsf div 的 css 样式？

Question

对于一个 crud 应用程序，我想创建一个 div，我想在其中显示消息并根据消息类型更改 div 的颜色。

目前我的 jsf 文件中有这段代码:

<ui:define name="msg">
    <h:messages globalOnly="true" errorClass="err" warnClass="warn" infoClass="info"></h:messages>
    <h:messages globalOnly="false" errorClass="err" warnClass="warn" infoClass="info"></h:messages>

我的 div 是在模板 xhtml 中定义的:

<div class="alert alert-dismissible alert-danger" id="msg2">
            <ui:insert name="msg"></ui:insert>

为了生成消息，我在 jsfUtil.java 中使用了一些函数:

public class JsfUtil {

public static SelectItem[] getSelectItems(List<?> entities, boolean selectOne){
    int size = selectOne ? entities.size() + 1 : entities.size();
    SelectItem[] items = new SelectItem[size];
    int i = 0;
    if (selectOne){
        items[0] = new SelectItem("", "---");
        i++;
    }
    for (Object x : entities){
        items[i++] = new SelectItem(x, x.toString());
    }
    return items;
}

public static void addErrorMessage(Exception ex, String defaultMsg) {
    String msg = ex.getLocalizedMessage();
    if (msg != null && msg.length() > 0) {
        addErrorMessage(msg);
    } else {
        addErrorMessage(defaultMsg);
    }
}

    public static void addErrorMessages(List<String> messages) {
    for (String message : messages) {
        addErrorMessage(message);
    }
}

public static void addErrorMessage(String msg) {
    FacesMessage facesMsg = new FacesMessage(FacesMessage.SEVERITY_ERROR, msg, msg);
    FacesContext.getCurrentInstance().addMessage(null, facesMsg);
}

    public static void addSuccessMessage(String msg) {
    FacesMessage facesMsg = new FacesMessage(FacesMessage.SEVERITY_INFO, msg, msg);
    FacesContext.getCurrentInstance().addMessage("successInfo", facesMsg);
}

public static String getRequestParameter(String key) {
    return FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get(key);
}

public static Object getObjectFromRequestParameter(String requestParameterName, Converter converter, UIComponent component) {
    String theId = JsfUtil.getRequestParameter(requestParameterName);
    return converter.getAsObject(FacesContext.getCurrentInstance(), component, theId);
}
}

生成消息的函数示例:

public String doUpdate() {
    try {
        modelFacade.edit(current);
        items = new ListDataModel(modelFacade.find(new ModelSearch()));
        current = (Model) getItems().getRowData();        

        JsfUtil.addSuccessMessage("Mise à jour Executée");
        return "Model.xhtml";
    } catch (Exception e) {
        return null;
    }
}

此时所有消息都显示在 div 中，但我想更改 div 如何根据消息类型(例如:绿色正常；黄色警告；红色错误)显示消息。

如何根据此函数生成的消息将 css 样式链接到我的 div？

Answer 1

创建一个 css 文件并包含这些类:

.info{
  background-color: green;
}

.warn{
  background-color: yellow;
}

.err{
  background-color: red;
}

然后在该部分的主 xhtml 中包含这样的 css 文件:

 <link href="#/[pathToMyCssFile]" rel="stylesheet" type="text/css" />

编辑

您需要将id 添加到您的h:messages(只需要一个，css 类将根据严重性自动应用)

<h:messages id="messages" globalOnly="true" errorClass="err" warnClass="warn" infoClass="info"></h:messages> 

您必须将此 ID 添加到添加消息的方法中例如:

public static void addErrorMessage(String msg) {
    FacesMessage facesMsg = new FacesMessage(FacesMessage.SEVERITY_ERROR, msg, msg);
    FacesContext.getCurrentInstance().addMessage("messages", facesMsg);
}



public static void addSuccessMessage(String msg) {
    FacesMessage facesMsg = new FacesMessage(FacesMessage.SEVERITY_INFO, msg, msg);
    FacesContext.getCurrentInstance().addMessage("messages", facesMsg);
}