提示信息展现效果

组件自身展现提示信息

当校验失败时,出错组件可以改变自身的展现效果,提醒用户注意。OperaMasks默认提供了五种校验失败时组件的展现方案,可以通过设置组件标签或<w:form>表单标签的msgTarget属性来指定,例如以下代码指定文本框校验失败时使用qtip方式展现提示信息。

<layout:panelGrid columns="2">
    <h:outputLabel for="first"/>
    <w:textField id="first" msgTarget="qtip"/>
</layout:panelGrid>

OperaMasks支持的提示信息展现效果有:

  • qtip. 默认的展现效果,使用较为美观的光标跟随tooltip显示出错信息。效果如下:

  • title. 使用浏览器自身的tooltip显示出错信息。效果如下:

  • side. 在组件右侧显示警告图标。当光标移到图标上时,出现qtip风格的tooltip显示详细出错信息。效果如下:

  • under. 在组件下方显示提示信息。效果如下:

  • none. 组件仅显示红色波浪线,不负责显示详细信息。

若设置了<w:form/>标签的msgTarget属性,则该风格将作为表单中所有子组件的默认风格。

使用<h:message>组件展现提示信息

使用<h:message>组件来展现出错提示信息是JSF的标准方案,在此作一点简单的进阶说明。我们知道,使用<h:message for="输入组件id"/>标签可以为输入组件在页面中添加提示信息。标准的出错信息展现效果为:

事实上JSF定义了四种级别的提示信息,校验器出错通常使用FacesMessage.SEVERITY_ERROR级别。在自定义的校验器中(下文详述)可以灵活添加不同级别的提示信息,达到不同的展现效果。例如以下代码片段向代码中添加了级别为FacesMessage.SEVERITY_INFO的信息:

FacesContext ctxt = FacesContext.getCurrentInstance();
String id = comp.getClientId(ctxt); //comp为当前正在进行校验的组件
ctxt.addMessage(id,
        new FacesMessage(FacesMessage.SEVERITY_INFO, "用户名正确", "用户名正确"));

JSF1.2定义的提示信息级别与OperaMasks中预定义的展现效果分别为:

  • FacesMessage.SEVERITY_INFO

  • FacesMessage.SEVERITY_WARN

  • FacesMessage.SEVERITY_ERROR

  • FacesMessage.SEVERITY_FATAL

若希望进一步控制提示信息的展现效果,可以覆盖预定义的CSS样式类,上述消息级别对应的CSS样式类分别为:x-info-message,x-warn-message,x-error-message,x-fatal-message。

[上一页] [下一页]