在 Vaadin 中获取组件的确切宽度和高度

Question

在 vaadin 中，如果我将宽度和高度设置为未定义，则在使用 getHeight()/getWidth() 函数时会得到 -1。 如果我使用 sizeful()，我会得到 100%。但是我怎样才能得到一个组件的确切宽度和高度呢？

Answer 1

您可以通过调用 javascript 函数来获取回调结果。 阅读更多http://demo.vaadin.com/sampler/#foundation/javascript-callback

类似这样的：

如果你有 Horizo​​ntalLayout h

HorizontalLayout h = new HorizontalLayout()
//...
h.setId("myId");
JavaScript.getCurrent().addFunction("myGetWidth",
   new JavaScriptFunction() {
       @Override
       public void call(final JSONArray arguments)
               throws JSONException {
         int width = arguments.getInt(0);
         //now you can do something with this width
       }
   });
JavaScript.getCurrent().execute("myGetWidth(document.getElementById('" +h.getId() + "').clientWidth);");

Answer 2

在 Vaadin 中，布局是由浏览器中的客户端引擎实现的，布局组件的具体大小通常取决于浏览器窗口的大小。 Vaadin 标准组件不会将组件大小发送回服务器。

由于您的所有代码都在服务器上执行，因此也无法获取这些值。您需要编写一个特殊的包装器组件，以便在每次更改时将其大小发送回服务器。

---

2013-03-21 更新：我开发了SizeReporter add-on for Vaadin 7，它将组件的大小发送回服务器，并在大小发生变化时通知您。

Answer 3

也许为时已晚，但我在这里发布这个只是为了知道：

现在，您可以使用 vaadin 目录中的此插件来完成此操作 (https://vaadin.com/directory#addon/css-tools)。

这个附加组件仅允许您在给定某个组件的情况下收集有关它的 CSS 信息。 我将代码示例放在这里（与您在附加组件页面中找到的相同）

    RenderInfo.get(component, new Callback() {
            public void infoReceived(RenderInfo info) {
                   // Use the info
                   // All the properties are returned as Strings, e.g. "123px"
                   String width = info.getProperty(CssProperty.width);
            }
    },CssProperty.height, CssProperty.width);

这样你就可以得到所选组件的高度和宽度！