gwt - 为什么 GWT PopupPanels 和 DialogBox 不像 CSS3Pie？

Question

我试图让我的花哨的 CSS3 重新设计适用于 GWT 应用程序，但是当将 CSS3Pie vml 对象应用于 GWT DialogBox Caption 时，它们似乎都没有正确显示。此外，DialogBox 或 PopupPanel 中的任何内容，例如 GwtButton，都没有正确应用其 CSS3Pie（即使这些相同的 GwtButtons 在任何地方都可以正常工作，但弹出窗口除外）。

我的假设是GWT 操作 DOM 和弹出窗口的 CSS 样式的方式导致所有样式都变得 fubared。CSS3Pie 肯定会正确地附加到这些元素上，因为背景颜色和边框样式正在被删除，并且css3-container正在添加元素。

这是应用于 DialogBox 的 CSS

.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;
}

这是从 IE Developer Toolbar 获取的对话框生成的 HTML。

<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 属性的自定义弹出窗口有效
Applyingposition:relative已经修复了其他地方的一些 css3pie 属性，但是这里没有效果

有没有人成功让 GWT PopupPanel 和 DialogBox 与 CSS3Pie 一起工作？这个项目似乎表明有人有。我错过了什么？

score 1 · Accepted Answer

我已经将问题追踪到PopupPanel显示/隐藏自身的方式，这会影响其他子类（如 DialogBox）。它使用 CSS 属性“可见性”来切换隐藏和显示自身。所以它使自己visibility:hidden;隐藏和visibility:visible;显示。

不幸的是，这与 Internet Explorer 事件模型不匹配。当父级的visibilitycss 属性发生更改时，Internet Explorer 不会通知其子级有关属性更改事件的信息。CSS3Pie 将onPropertyChange处理程序添加到它使用的元素中，并期望当样式更改时，它会收到通知。由于 Internet Explorer 不会将事件传播给孩子，因此 CSS3Pie 无法知道更改，也无法更新其渲染。

您可以通过以下方式手动覆盖它：

为它创建一个DialogBox带有圆角边框的 div
称呼DialogBox#show#
应显示对话框，但 CSS3 圆形边框将丢失
打开 Internet Explorer 开发人员工具（按 F12）
刷新 IE 开发人员工具（我花了一段时间才弄清楚）
检查圆角框，并取消选中“行为”属性
CSS3Pie 分离，应该出现非圆角边框
重新启用“行为”属性
固定的！CSS3Pie 重新渲染显示值

您可以在 a 上调用此静态方法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 可以很好地处理事件传播，并且不需要这种 hack。

score 0 · Accepted Answer

我覆盖了对话框面板自己的样式以使其透明，并将我的样式（常规和 PIE）添加到 dialogMiddleCenterInner div 内的面板中。

gwt - 为什么 GWT PopupPanels 和 DialogBox 不像 CSS3Pie？

2 回答 2

Related

Reference