Почему GWT PopupPanels и DialogBox не похожи на CSS3Pie? - PullRequest
Новая
       13

Почему GWT PopupPanels и DialogBox не похожи на CSS3Pie?

0 голосов
/ 09 января 2012

Я пытаюсь заставить мой модный редизайн CSS3 работать для приложения GWT, но ни один из объектов CSS3Pie vml не отображается правильно, когда они применяются к заголовку DialogBox GWT. Более того, любой контент внутри DialogBox или PopupPanel, такой как GwtButton, не получает должным образом примененный CSS3Pie (, даже если те же самые GwtButtons работают везде, но всплывающие окна ).

Я предполагаю, что способ, которым GWT манипулирует DOM и стилями CSS для всплывающего окна, приводит к тому, что все стили становятся fubared . CSS3Pie определенно правильно привязывается к этим элементам, поскольку фоновый цвет и стили границ удаляются, а элементы css3-container добавляются.

Вот CSS, который применяется к DialogBox 

.gwt-PopupPanel,.gwt-DecoratedPopupPanel,.gwt-DialogBox,.gwt-SuggestBoxPopup
    {
    z-index: 999;
}

.gwt-PopupPanelGlass {
    background: #000;
    opacity: 0.3;
    filter: alpha(opacity = 30);
    z-index: 990;
}

.gwt-DialogBox .dialogTopCenterInner{
}

/** Copied from titled region **/
.gwt-DialogBox .Caption {
    padding: 8px 0 0 14px;
    background: #6c6d70;
    background: -moz-linear-gradient(#6c6d70, #595a5c);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6d70), color-stop(100%,#595a5c));
    background: -webkit-linear-gradient(#6c6d70, #595a5c);
    background: -o-linear-gradient(#6c6d70, #595a5c);
    background: -ms-linear-gradient(#6c6d70, #595a5c);
    background: linear-gradient(#6c6d70, #595a5c);
    height: 25px;
    border: 1px solid #4a4a4a;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    -webkit-box-shadow: inset 0 1px 1px #8e8f93;
    -moz-box-shadow: inset 0 1px 1px #8e8f93;
    box-shadow: inset 0 1px 1px #8e8f93;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    cursor: move;

    -pie-background: linear-gradient(#6c6d70, #595a5c);
    position: relative;
    behavior: url(/resources/css/PIE.htc);
}

.gwt-DialogBox .dialogContent {
    border: 1px solid #6a6a6a;
    border-top: none;
    background: #f9f9f9;
    padding: 10px;
}

А вот сгенерированный HTML-код для диалогового окна, взятый из панели инструментов разработчика IE. 

<DIV style="CLIP: rect(auto,auto,auto,auto); POSITION: absolute; VISIBILITY: visible; OVERFLOW: visible; TOP: 374px; LEFT: 743px" class=gwt-DialogBox __eventBits="124"><DIV>
<TABLE cellSpacing=0 cellPadding=0>
<TBODY>
<TR class=dialogTop>
<TD class=dialogTopLeft>
<DIV class=dialogTopLeftInner></DIV></TD>
<TD class=dialogTopCenter>
<DIV class=dialogTopCenterInner>
<css3-container style="Z-INDEX: auto; POSITION: absolute; DIRECTION: ltr; TOP: 0px; LEFT: 0px"><background style="POSITION: absolute; TOP: 0px; LEFT: 0px"><group2><?xml:namespace prefix = css3vml ns = "urn:schemas-microsoft-com:vml" /><css3vml:shape style="POSITION: absolute; WIDTH: 413px; HEIGHT: 35px; BEHAVIOR: url(#default#VML); TOP: 0px; LEFT: 0px" coordsize = "826,70" coordorigin = "1,1" fillcolor = "#6c6d70" stroked = "f" path = " m0,10 qy10,0 l816,0 qx826,10 l826,70 qy826,70 l0,70 qx0,70 x e"><css3vml:fill></css3vml:fill><css3vml:fill></css3vml:fill></css3vml:shape></group2></background><border style="POSITION: absolute; TOP: 0px; LEFT: 0px"><css3vml:shape style="POSITION: absolute; WIDTH: 413px; HEIGHT: 35px; BEHAVIOR: url(#default#VML); TOP: 0px; LEFT: 0px" coordsize = "826,70" coordorigin = "1,1" filled = "f" stroked = "t" strokecolor = "#4a4a4a" strokeweight = ".75pt" path = " m1,10 qy10,1 l816,1 qx825,10 l825,70 qy826,69 l0,69 qx1,70 x e"><css3vml:stroke></css3vml:stroke><css3vml:stroke></css3vml:stroke></css3vml:shape></border></css3-container>
<DIV class="Caption pie_first-child pie_first-child" _pieId="_208">Change Region</DIV></DIV></TD>
<TD class=dialogTopRight>
<DIV class=dialogTopRightInner></DIV></TD></TR>
<TR class=dialogMiddle>
<TD class=dialogMiddleLeft>
<DIV class=dialogMiddleLeftInner></DIV></TD>
<TD class=dialogMiddleCenter>
<DIV class="dialogMiddleCenterInner dialogContent">
    Fancy content here.
</DIV>
</TD>
<TD class=dialogMiddleRight>
<DIV class=dialogMiddleRightInner></DIV></TD></TR>
<TR class=dialogBottom>
<TD class=dialogBottomLeft>
<DIV class=dialogBottomLeftInner></DIV></TD>
<TD class=dialogBottomCenter>
<DIV class=dialogBottomCenterInner></DIV></TD>
<TD class=dialogBottomRight>
<DIV class=dialogBottomRightInner></DIV></TD></TR></TBODY></TABLE></DIV></DIV>

Вот некоторые вещи, которые я пробовал:

  • Копирование и вставка HTML на страницу вместо того, чтобы позволить GWT манипулировать свойствами DOM css3, работать
  • Пользовательские всплывающие окна, которые используют абсолютное позиционирование и пользовательский код скрытия / показа Свойства css3 работают
  • Применение position:relative исправило некоторые свойства css3pie в других местах, но здесь не действует

Кто-нибудь успешно получил GWT PopupPanel и DialogBox для работы с CSS3Pie? Этот проект , кажется, указывает, что кто-то имеет. Чего мне не хватает?

Ответы [ 2 ]

1 голос
/ 04 февраля 2012

Я отследил проблему до способа, которым PopupPanel показывает / скрывает себя, что влияет на другие подклассы (например, DialogBox). Он использует свойство CSS «видимость» для переключения скрытия и отображения себя. Так что он заставляет себя visibility:hidden; скрывать и visibility:visible; показывать.

К сожалению, это не очень хорошо сочетается с моделью событий Internet Explorer. При изменении свойства visibility css родителя Internet Explorer не уведомляет своих детей о событиях изменения свойства. CSS3Pie добавляет обработчики onPropertyChange к элементам, с которыми он работает, и ожидает, что при изменении стиля он будет уведомлен. Поскольку Internet Explorer не передает событие дочернему элементу, CSS3Pie не может узнать об этом изменении, он не может обновить его рендеринг.

Вы можете переопределить это вручную следующим образом:

  1. Создайте DialogBox с div округленной границы
  2. Звоните DialogBox#show#
  3. Должно быть показано диалоговое окно, но граница округления CSS3 будет отсутствовать
  4. Открыть инструменты разработчика Internet Explorer (нажмите F12)
  5. Обновите инструменты разработчика IE (мне понадобилось время, чтобы понять это)
  6. Осмотрите прямоугольник с закругленными границами и снимите флажок свойства "поведение"
  7. CSS3Pie отсоединяется, и должны появляться неокругленные границы
  8. Повторно включить свойство «поведение»
  9. Исправлено! CSS3Pie повторно отображает отображаемое значение

Вы можете вызвать этот статический метод для PopupPanel, чтобы заставить CSS3Pie перерисовать все его дочерние элементы и исправить проблему раз и навсегда. 

public static void resetChildrenCss3PieBehaviour(final Element e) {
    // Only run this for IE 8 and 9
    String userAgent = Navigator.getUserAgent().toLowerCase();
    if (userAgent.contains("msie")) {
        NodeList<Node> childNodes = e.getChildNodes();
        int length = childNodes.getLength();
        for (int i = 0; i < length; i++) {
            Node node = childNodes.getItem(i);
            if (node instanceof Element) {
                final Element child = (Element) node;
                // Recursive part happens here
                resetChildrenCss3PieBehaviour(child);
            }
        }

        // Refresh the CSS3Pie behavior
        e.getStyle().setProperty("behavior", "none !important");
        Scheduler.get().scheduleDeferred(new Command() {
            @Override
            public void execute() {
                e.getStyle().setProperty("behavior", Css3Pie.getPieCssProp());
            }
        });

    }
}

Для вашего кода, если вы можете использовать display:none; вместо visibility:hidden;, то IE прекрасно работает с распространением событий, и этот вид хака не нужен.

0 голосов
/ 12 января 2012

Я переопределяю собственный стиль диалоговой панели, чтобы сделать его прозрачным, и добавляю свой стиль (обычный и PIE) к панели внутри элемента dialogMiddleCenterInner.

...