1

jQuery Masonryライブラリを GWT プロジェクトに統合しようとしています。ただし、GWT によって生成されたコンテナーと要素を使用してライブラリを動作させることはできません。しかし、生成された GWT HTML を自分の HTML ページに直接書き直せばうまくいきます。

これは私のGWT EntryPointがどのように見えるかです

public class Sample implements EntryPoint {

    //In here the text has random lengths to achieve different div blocks to work with Masonry
    private HTML label1 = new HTML("Text..");
    private HTML label2 = new HTML("Text..");
    private HTML label3 = new HTML("Text..");
    private HTML label4 = new HTML("Text..");
    private Image image1 = new Image("images/samsung.jpg");
    private AbsolutePanel hPanel = new AbsolutePanel();

    public void onModuleLoad() {

        DOM.setElementAttribute(hPanel.getElement(), "id", "content");
        image1.setSize("230px", "400px");
        HTML html = new HTML(image1.toString());
        html.setStyleName("item");
        hPanel.add(html);

        label1.setStyleName("item");
        hPanel.add(label1);

        label2.setStyleName("item");
        hPanel.add(label2);

        label3.setStyleName("item");
        hPanel.add(label3);

        label4.setStyleName("item");
        hPanel.add(label4);

        RootPanel.get("wrapper").add(hPanel);

    }
}

次のように宣言された css ファイルもあります。

#wrapper{
    margin: 0 auto;
    width: 1000px;
}

.item{
    padding: 10px 10px;
    width:230px;
    float: left;
}

これにより、次の HTML コードが生成されます。

<div id="wrapper">
            <div id="header">
                <h1>JQuery, Masonry, GWT, GQuery Test</h1>
            </div>

        <div style="position: relative; overflow: hidden;" id="content">
            <div class="item">
                <img src="images/samsung.jpg" class="gwt-Image"
                    style="width: 230px; height: 400px;">
            </div>
            <div class="item" style="">
                Text
            </div>
            <div class="item">text</div>
            <div class="item" style="">text</div>
            <div class="item"><img src="images/samsung.jpg" class="gwt-Image"
                    style="width: 230px; height: 400px;">
            </div>
            <div class="item">text</div>
        </div>
    </div>

最後に、私の HTML ページには、次のような jQuery 呼び出しがあります。

    <script type="text/javascript" charset="UTF-8" language="javascript"
src="scripts/jquery-1.7.2.min.js"></script>

        <script type="text/javascript" charset="UTF-8" language="javascript"
src="scripts/jquery.masonry.js"></script>

    <script type="text/javascript" charset="UTF-8">

    $(document).ready(function(){       

        $('#content').masonry();
    });
</script>

この GWT アプリケーションを実行すると、Masonry ライブラリが機能せず、期待される出力がレンダリングされません。ただし、GWT によって生成された HTML をコピーして HTML ページに直接貼り付けると、ライブラリは正しく機能し、期待される出力をレンダリングします。

Masonry の Web サイトhttp://masonry.desandro.com/docs/intro.htmlのこのチュートリアルに従いました。これが GWT で生成された HTML で機能しない理由を教えてください。

4

3 に答える 3

2

ドキュメントの準備が整った時点では、エントリポイントはまだ実行されていません。したがって、DOM はまだありません。

この問題を回避するには、代わりに GWTQuery を使用するか、gwt から JavaScript を呼び出して DOM の更新を通知します。これは次のようになります。

JavaScript:

function domUpdated(){
    //do you jquery stuff here...
}

GWT:

private native void tellJavascriptWeAreDone()/*-{
    $wnd.domUpdated();
}-*/;
于 2012-07-08T18:29:45.333 に答える
1

＃content-tagはdocument.readyにまだ存在していないようです。そこでプログラムを停止して（デバッガー？）、HTMLとして生成されるものを確認してください。

準備完了イベントは、生成されたjavascript GWTの開始点でもあり、IDは後で設定できます:)

于 2012-07-08T15:26:45.627 に答える