Обработчик исключений PrimeFaces и наложение диалогов - PullRequest
Новая
       51

Обработчик исключений PrimeFaces и наложение диалогов

1 голос
/ 17 марта 2020

Я немного увеличил пример обработки PF ViewExpiredException на витрине ... см.

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

У меня есть простая кнопка, которая делает AJAX запрос, а затем показывает диалог PF через oncomplete. Действие выполняется, выдает исключение, показывает «диалог истекшего сеанса», но только что нажатая кнопка также хочет отобразить диалоговое окно.

То, что вы получаете, это то, что диалоговое окно исключений находится под диалоговым окном, выполняющим реальная работа.

enter image description here

face-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>

X HTML: 

<!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>

Bean: 

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

ВОПРОС:

Как сделать так, чтобы диалог исключений появлялся после / поверх реального диалога?

1 Ответ

3 голосов
/ 17 марта 2020

Я бы начал с анализа полученной клиентской стороны html (там, где происходит отображение) и соответствующего html и начал бы экспериментировать с CSS. И так как у меня есть некоторое время, я изменил этот комментарий на ответ и начал пробовать себя.

В htm на стороне клиента я заметил, что диалог исключений имеет более низкий z-индекс, чем обычный диалог, и поскольку оба являются модальными, и «шим» имеет z-индекс 1 ниже, чем диалог. Поэтому я поэкспериментировал с:

  • Установка z-индекса диалогового окна исключений явно встроенным (в его атрибуте style): не сработало, кажется, применено некоторое 'magi c, которое можно исправить, но здесь я не смог это сделать
  • Изменение порядка диалогов в файле x html (не сработало, возможно, из-за некоторых маги c)
  • Добавление appendTo="@(body)" в диалоговое окно исключения: не работает, другое диалоговое окно также является прямым потомком тела, и z-индекс еще ниже

  • Установите z-индекс диалога исключения с помощью включенного css ( не встроенный) 

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

Это помогло (вы можете изменить селектор на то, что соответствует вашему случаю)

...