gwt - GWT の PopupPanels と DialogBox が CSS3Pie に似ていないのはなぜですか?

Question

CSS3 の再設計を GWT アプリで機能させようとしていますが、CSS3Pie vml オブジェクトが GWT DialogBox Caption に適用されたときに正しく表示されないようです。さらに、GwtButton などの DialogBox または PopupPanel 内のコンテンツは、CSS3Pie が適切に適用されていません (たとえ同じ GwtButtons がpopups 以外のすべての場所で正常に機能したとしても)。

私の推測では、GWT がポップアップの DOM と CSS スタイルを操作する方法が原因で、すべてのスタイルが fubared になっているということです。css3-container背景色と境界線のスタイルが削除され、要素が追加されているため、CSS3Pie は間違いなくこれらの要素に正しく関連付けられています。

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>

ここに私が試したいくつかのことがあります：

• GWT に DOM のcss3 プロパティを操作させる代わりに、HTML をコピーしてページに貼り付ける
• 絶対配置とカスタムの非表示/表示コードcss3 プロパティを使用するカスタム ポップアップが機能する
• 適用するとposition:relative、他の場所でいくつかの css3pie プロパティが修正されましたが、ここでは効果がありません

GWT PopupPanel と DialogBox を CSS3Pie で正常に動作させた人はいますか? このプロジェクトは、誰かが持っていることを示しているようです。私は何が欠けていますか？

Answer 1

PopupPanel私は、他のサブクラス (DialogBox など) に影響を与える、それ自体を表示/非表示にする方法まで問題を追跡しました。CSS プロパティの「visibility」を使用して、非表示と表示を切り替えます。したがって、それ自体visibility:hidden;が非表示になりvisibility:visible;、表示されます。

残念ながら、これは Internet Explorer のイベント モデルではうまくいきません。親のvisibilitycss プロパティが変更された場合、Internet Explorer はプロパティの変更イベントについて子に通知しません。CSS3Pie は、onPropertyChange処理する要素にハンドラーを追加し、スタイルが変更されたときに通知されることを期待しています。Internet Explorer はイベントを子に伝達しないため、CSS3Pie が変更を認識する方法はなく、レンダリングを更新する方法もありません。

これは、次の方法で手動でオーバーライドできます。

1. DialogBox丸みを帯びた境界線の div を作成します
2. 電話DialogBox#show#
3. ダイアログ ボックスは表示されるはずですが、CSS3 rounder-border が表示されません。
4. Internet Explorer 開発者ツールを開きます (F12 キーを押します)。
5. IE 開発者ツールを更新します (これを理解するのにしばらく時間がかかりました)
6. 角丸ボックスを検査し、「動作」プロパティのチェックを外します
7. CSS3Pie が切り離され、丸みを帯びていない境界線が表示されるはずです
8. 「動作」プロパティを再度有効にします
9. 修理済み！CSS3Pie は表示値を再レンダリングします

この静的メソッドを a で呼び出して、PopupPanelCSS3Pie にそのすべての子を再レンダリングさせ、問題を完全に修正することができます。

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 はイベントの伝播をうまく処理し、この種のハックは必要ありません。

Answer 2

ダイアログ パネル自体のスタイルをオーバーライドして透明にし、スタイル (通常および PIE) を dialogMiddleCenterInner div 内のパネルに追加します。