2

現在、DOMが完全に読み込まれる前にJavaScriptが実行されているように見えるという問題があります。なぜ私はこれを言うのですか？次のコードを取ります。

var $r = $wnd.Raphael("container", 640, 480);

// Creates pie chart at with center at 320, 200,
// radius 100 and data: [55, 20, 13, 32, 5, 1, 2]
$r.piechart(320, 240, 100, [ 55, 20, 13, 32, 5, 1, 2 ]);

Javascript例外を返します：'fisnull'。これは、コンテナ名が認識されていないことを示しているようです。

絶対座標を指定すると、円グラフは正常にレンダリングされます。Chromeコンソールで前のコードを使用すると（すべてがロードされた後）、円グラフがコンテナータグにロードされます。

コードのブロックをJQuery呼び出しでラップしてみました：

$wnd.jQuery(function($) {
            // Creates canvas 640 × 480 at 10, 50
            var $r = $wnd.Raphael("container", 640, 480);
            // Creates pie chart at with center at 320, 200,
            // radius 100 and data: [55, 20, 13, 32, 5, 1, 2]
            $r.piechart(320, 240, 100, [ 55, 20, 13, 32, 5, 1, 2 ]);
    });

...そしてサイコロはありません。

私が試すことができるもののアイデアはありますか？

編集：

これが、JSNIメソッドを呼び出す方法/場所です。以下は、関連するビューコードです。

public class WidgetSamplerView extends AbstractPanelView implements
                WidgetSamplerPresenter.Display { 

private FlexTable mainPanel;

public WidgetSamplerView() {
        super();

            mainPanel = new FlexTable();

            HTML container = new HTML();
        container.getElement().setAttribute("style",
                "width:700px;height:700px");
        container.getElement().setId("container");

        mainPanel.setWidget(0, 1, container);

        MyRaphaelWrapper.pieChart(); // JSNI Call

        setWidget(mainPanel);
    }
}
4

2 に答える 2

2

onLoad()ウィジェットがロードされたことを確認するために、がアクティブになっている場合にのみJSNIメソッドを呼び出すようにする必要があります。

クイックリファレンスについては、ウィジェットの作成と初期化のベストプラクティスに関する私の別の回答を参照してください。

基本的な考え方は、ウィジェットをオーバーライドonLoad()して、そこでロード機能を呼び出すことです。

public class MainPanel extends FlexTable {

    private Element container;

    public MainPanel() {

        container = DOM.createDiv();
        container.setId("container");

        // this is required by the Widget API to define the underlying element
        setElement(container);
    }

    @Override
    protected void onLoad() {
        super.onLoad();

            MyRaphaelWrapper.pieChart(); // JSNI Call
        }
    }
}
于 2012-05-28T13:32:09.863 に答える
1

Raphaelは内部で次のことを行っていると思います。

document.getElementById("container");

GWTアプリを標準設定でコンパイルすると、コードはiframeに読み込まれます。これが、windowの代わりに$ wndを使用し、documentの代わりに$docを使用する必要がある理由です。メインウィンドウを指しています。

他のjavascriptライブラリをどのように含めましたか？Raphaelが間違ったDOM（iframeのDOM）の内部を見ている可能性があるためです。このようなもので要素を直接rapahelに渡すことができますか？

var c = $doc.getElementById("container");
$wnd.Raphael(c, ..);
于 2012-05-25T21:52:28.440 に答える