Javascript 在客户端访问vaadin数据

我想知道是否有办法访问或公开由Vaadin在客户端管理的数据。也就是说，我正在使用Vaadin应用程序中服务器上的一些数据。在UI中，我想包括一个可视化小部件，它使用这些数据并利用raphael.js。我怀疑这在使用gwt图形库时是可能的，但这意味着要创建一个定制的Vaadin小部件，它看起来像一个headf*ck。有没有一种更简单的方法，像在客户端使用纯javascript那样简单？

好吧，您可以使用纯javascript，将服务器上的数据作为简单的JSON资源公开，然后在客户端使用对该资源的纯GET/POST请求来使用该资源

将JS添加到Vaadin应用程序可以通过重写AbstractApplicationServlet中的方法或使用包含JS的CustomLayout来完成。当然还有Window.executeJavaScript方法，用于较小的JS代码片段

---

不是Vaadin的做法，但完全可行。

我创建了一个具有以下服务器端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);
}

现在，在doGraphics（）中，我可以使用uidl[1][“attname”]访问uidl数据

将它与IcePush小部件相结合，我获得了我所需要的所有行为，并且一切都运行得很好

---

我很好奇为什么这个解决方案以前没有出现过，因为我觉得它很自然。如果您能将这个技术与您提到的技术进行比较，我将不胜感激。

Hi Jouni。我已经实现了一些不同的东西，我希望你能接受它（见下面我自己的答案），我从你的最初帖子中了解到，创建自定义GWT组件对于你的口味来说似乎太复杂了，但我坚持纠正。我猜您只是指GWT图形附加组件（我没有使用）。你的解决方案看起来不错。

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();
}-*/;