首页 > 解决方案 > PrimeFaces 异常处理程序和对话框覆盖

问题描述

ViewExpiredException我在陈列柜上扩展了 PF处理示例......见

https://www.primefaces.org/showcase/ui/misc/exceptionHandler.xhtml

我有一个简单的按钮,它执行 AJAX 请求,然后通过oncomplete. 该操作被执行,引发异常,显示“会话过期对话框”,但刚刚单击的按钮也想显示一个对话框。

您得到的是异常对话框位于执行实际工作的对话框下方。

在此处输入图像描述

面孔-config.xml:

<?xml version='1.0' encoding='UTF-8'?>
<faces-config version="2.2"
              xmlns="http://xmlns.jcp.org/xml/ns/javaee"
              xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
              xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd">
    <application>

        <action-listener>org.primefaces.application.DialogActionListener</action-listener>
        <navigation-handler>org.primefaces.application.DialogNavigationHandler</navigation-handler>
        <view-handler>org.primefaces.application.DialogViewHandler</view-handler>

        <el-resolver>org.primefaces.application.exceptionhandler.PrimeExceptionHandlerELResolver</el-resolver>

    </application>

    <factory>
        <exception-handler-factory>org.primefaces.application.exceptionhandler.PrimeExceptionHandlerFactory</exception-handler-factory>        
    </factory>

</faces-config>

XHTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html">

    <f:view encoding="UTF-8">

        <h:head>
            <title>PrimeFaces Exception Handler Reload Test</title>
        </h:head>

        <h:body>

            <p:ajaxExceptionHandler type="javax.faces.application.ViewExpiredException"
                                   pdate="exception-handler-dialog-form"
                                    onexception="PF('exceptionHandlerDialog').show();" />

            <h:form id="test-form">

                <p:commandButton value="Throw ViewExpiredException on dialog show!"
                                 action="#{exceptionHandlerView.throwViewExpiredException}"
                                 oncomplete="PF('someDialog').show();" />

            </h:form>

            <h:form id="some-dialog-form">

                <p:dialog id="some-dialog"
                          widgetVar="someDialog"
                          header="Something to Do"
                          modal="true"
                          resizable="false"
                          closable="true"
                          closeOnEscape="true"
                          styleClass="text-center"
                          style="width: 300px !important; height: 200px !important;">

                    SEARCH DIALOG...

                </p:dialog>

            </h:form>

            <h:form id="exception-handler-dialog-form">

                <p:dialog id="exception-handler-dialog"
                          widgetVar="exceptionHandlerDialog"
                          header="Session Expired"
                          modal="true"
                          resizable="false"
                          closable="true"
                          closeOnEscape="true"
                          style="width: 300px !important; height: 200px !important; text-align: center;">

                    <p:ajax event="close"
                            process="@this"
                            update="#{updateIds}"
                            onstart="PF('reloadPageButton').jq.click();"
                            immediate="true" />

                    <h:outputText value="Your session has expired." />

                    <p:button widgetVar="reloadPageButton"
                              value="Reload page"
                              outcome="#{view.viewId}?includeViewParams=true" />

                </p:dialog>

            </h:form>

        </h:body>

    </f:view>

</html>

豆:

@Named
@ViewScoped
public class ExceptionHandlerView implements Serializable
{
    private static final long serialVersionUID = 1L;

    public void throwViewExpiredException()
    {
        throw new ViewExpiredException( "A ViewExpiredException!", FacesContext.getCurrentInstance().getViewRoot().getViewId() );
    }

    public void throwNullPointerException()
    {
        throw new NullPointerException( "A NullPointerException!" );
    }

    public void throwWrappedIllegalStateException()
    {
        throw new FacesException( new IllegalStateException( "A wrapped IllegalStateException!" ) );
    }
}

问题:

你如何让异常对话框出现在真实对话框之后/之上?

标签: primefacesjsf-2

解决方案


我将从分析生成的客户端 html(显示发生的地方)和相应的 html 开始,然后开始尝试 CSS。而且由于我确实有一些时间,因此我将此评论更改为答案并开始尝试自己。

在客户端 htm 中,我注意到异常对话框的 z-index 低于正常对话框,因为两者都是模态的,并且“shim”的 z-index 比对话框低 1。所以我尝试了:

  • 设置异常对话框的 z-index 显式内联(在其样式属性中):不起作用,似乎应用了一些“魔法”,可能会被纠正但超出了我的范围
  • 更改 xhtml 文件中对话框的顺序(不起作用,也可能是由于某种魔法)
  • 添加appendTo="@(body)"到异常对话框:没用,另一个对话框也是body的直接子级,z-index仍然更低
  • 通过包含的 css(非内联)设置异常对话框的 z-index

    <style>
    #exception-handler-dialog-form\:exception-handler-dialog {
       z-index: 1005 !important;
    }
    </style>
    

这成功了(您可以将选择器更改为适合您的情况)


推荐阅读