javascript - クライアント側で vaadin データにアクセスする

Question

クライアント側で Vaadin によって管理されているデータにアクセスまたは公開する方法があるかどうかを知りたいです。つまり、Vaadin アプリケーション内のサーバーでデータを使用しています。UI には、このデータを使用し、raphael.js を活用する視覚化ウィジェットを含めたいと考えています。これは gwt グラフィックス ライブラリを使用して可能であると思われますが、headf*ck のようなカスタム Vaadin ウィジェットを作成する必要があります。クライアント側でプレーンな JavaScript を使用するのと同じくらい簡単な方法はありませんか?

Answer 1

次のサーバー側 API を使用してウィジェットを作成しました。

private Map<String,Object> attributes = new HashMap<String,Object>();

@Override
public void paintContent(PaintTarget target) throws PaintException {
    super.paintContent(target);

    for (String key : attributes.keySet()) {
        Object value = attributes.get(key);
        if (value instanceof Boolean)
            target.addAttribute(key, ((Boolean) value).booleanValue());
        else if (value instanceof Float)
            target.addAttribute(key, ((Float) value).floatValue());
        else if (value instanceof Double)
            target.addAttribute(key, ((Double) value).doubleValue());
        else if (value instanceof Integer)
            target.addAttribute(key, ((Integer) value).intValue());
        else if (value instanceof Long)
            target.addAttribute(key, ((Long) value).longValue());
        else if (value instanceof String)
            target.addAttribute(key, (String) value);
        else if (value instanceof Map<?,?>)
            target.addAttribute(key, (Map<?,?>) value);
        else if (value instanceof Object[])
            target.addAttribute(key, (Object[]) value);
    }

    // We could also set variables in which values can be returned
    // but declaring variables here is not required
}

public void resetAttributes() {
    attributes.clear();
}

public void setAttribute(String key, Object value) {
    attributes.put(key, value);
}

クライアント側では、結果の UIDL をドキュメントに添付するだけです。

public void updateFromUIDL(UIDL uidl, ApplicationConnection client) {
    this.client = client;
    paintableId = uidl.getId();
    shareVars(uidl, getElement());
}

public native void shareVars(UIDL uidl, Element element) /*-{
    var el = element;
    var ownDoc = element.ownerDocument;
    ownDoc.uidl = uidl;
    ownDoc.doGraphics();
}-*/;

doGraphics() では、uidl[1]["attname"] を使用して uidl データにアクセスできます。

これを IcePush ウィジェットと組み合わせると、必要なすべての動作が得られ、すべてが美しく機能します。

私には非常に自然に見えるので、なぜこの解決策が以前に登場しなかったのか不思議です。この手法をあなたが言及したものと比較していただければ幸いです。

Answer 2

単純な JavaScript を使用して、サーバーからのデータを単純な JSON リソースとして公開し、そのリソースに対する単純な GET/POST 要求を使用してクライアントで消費することができます。

JS を Vaadin アプリに追加するには、AbstractApplicationServlet のメソッドをオーバーライドするか、JS を含む CustomLayout を使用します。もちろん、JS コードの小さなスニペット用の Window.executeJavaScript メソッドもあります。

Vaadin のやり方ではありませんが、完全に実行可能です。