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请求在客户端中使用该资源。

向Vaadin应用程序添加JS可以通过覆盖AbstractApplicationServlet中的方法或使用包含JS的CustomLayout来完成。当然还有Window.executeJavaScript方法以及JS代码的较小片段。

不是Vaadin的做事方式，而是完全可行的。

访问客户端的vaadin数据

2 个答案: