PrimeFaces 异常处理程序和对话框叠加

Question

我稍微扩展了展示柜中的 PF ViewExpiredException 处理示例...请参阅

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

我有一个简单的按钮，它执行 AJAX 请求，然后通过 oncomplete 显示一个 PF 对话框。操作被执行，抛出异常，显示 "Session Expired dialog"，但刚刚单击的按钮也想显示一个对话框。

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

面孔-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!" ) );
    }
}

问题：

如何使异常对话框出现在 after/on 真实对话框的顶部？

Answer 1

我首先分析生成的客户端 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>

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

PrimeFaces 异常处理程序和对话框叠加

PrimeFaces exception handler and dialogs overlaying

primefaces

jsf-2