PrimeFaces 异常处理程序和对话框覆盖答案

【问题标题】：PrimeFaces exception handler and dialogs overlayingPrimeFaces 异常处理程序和对话框覆盖
【发布时间】：2020-06-28 02:22:13
【问题描述】：

我在展示中扩展了 PF ViewExpiredException 处理示例......请参阅

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

我有一个简单的按钮，它执行 AJAX 请求，然后通过oncomplete 显示一个 PF 对话框。动作被执行，抛出异常，显示“会话过期对话框”，但刚刚单击的按钮也想显示一个对话框。

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

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

问题：

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

【问题讨论】：

首先分析resutling client-side html（那里是显示的地方）和相应的html实验CSS，我想你可以学到很多东西（你会有相同的没有异常处理程序和两个模式对话框的问题...!!!

标签： primefaces jsf-2

【解决方案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>

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

【讨论】：

难道你不能也将appendTo="@(body)" 添加到对话框中以使其高于其他所有内容吗？
@Melloware：不，我也试过了......（PF 8.0）似乎是一些（未调查的）魔法正在发生。另一个对话框 div 也是 body 的直接子元素，它的 z-index 一直是 'wrong' 。没有在答案中提到它，会改变它。
我想知道它的异常对话框处理代码中是否缺少 PrimeFaces.zindex++ 调用，它应该自动使其成为页面上的最高 zIndex。
@Melloware：很可能。我没有时间进行调查，但看起来这可以解释我看到的所有行为。但也可能是它们的创建顺序。
@Kawu：如果您在询问之前尝试明确设置 z-index，请下次请，请，请提及类似的事情，请参阅How to Ask