Question

我有一个GWT Web应用程序，它在完整窗口大小下运行完美浏览器，但是当我重新调整窗口大小时，它看起来不会很好，所有组件都不在各自的位置。

因此，每当我更改窗口大小或如果我将在标签页或移动设备上运行应用程序时，我都想对所有组件的大小进行更改。

还有其他方法吗？

我怎样才能做到这一点？

Answer 1

您可以使用类似gwt-bootstrap的东西（它可以根据视口大小和用户代理更改视图）。但基本上你可以（而且我认为应该）在创建组件时使用CSS的@media选择器。

您可以通过GWT处理所有调整大小事件并手动调整每个组件的大小，但由于您的应用程序的性能，这不是一个好主意。

Answer 2

试

public static Window getWindow(Component c)
{
    while (c != null)
    {
        if (c instanceof Window) break;
        c = c.getParent();
    }
    return (Window)c;
}

public static int getResolution(Component c)
{
    return getWindow(c).getBounds();    
}

所以它应该是这样的

Rectangle bounds getScreenResolution(this);
Dimension resolution = new Dimension(bounds.width,bounds.height);

放在要调整大小的组件中。

然后将其与调整大小侦听器

结合使用

getWindow(this).addComponentListener(new ComponentAdapter()
{
    public void componentResized(ComponentEvent e)
    {
       Rectangle bounds = getScreenResolution(this);
       setPrefferedSize(new Dimension(bounds.width,bounds.height));
    }
 }

Answer 3

您可以使用Window.getClientHeight和Window.getClientWidth - 虽然这不会返回像素中的实际屏幕尺寸，但它会返回您的GWT应用程序可以使用的区域的大小，因此它也会考虑当前浏览器窗口的大小。

您可以使用Window.addWindowResizeListener收听浏览器窗口大小的更改。

也许这也解决了移动设备的问题。如果您确实需要知道运行的应用程序是否以及运行的是哪种移动设备，那么最好的机会是User-Agent字符串，您可以使用Window.Navigator.getUserAgent()获取该字符串。如果要使用延迟绑定，也可以创建一个新属性，如下所示：

<define-property name="mobile.user.agent" values="mobilesafari, none"/>
<property-provider name="mobile.user.agent"><![CDATA[
    var ua = navigator.userAgent.toLowerCase();
    if (ua.indexOf("webkit") != -1 && ua.indexOf("mobile") != -1) {
        return "mobilesafari";
    }
    // Additional checks go here
    return "none";
]]></property-provider>

您还可以查看LayoutPanel，它本身支持百分比的宽度和高度。

另一个选择是使用CSS而不是GWT代码，让浏览器处理调整大小。虽然这并不总是一个可行的选择，但如果可能的话，应该选择去做。

Answer 4

是纯粹的GWT还是使用SmartGWT组件？

如果您使用的是SmartGWT，您应该可以使用Layout类来更好地管理组件。

使用Canvas.setWidth(int)和Canvas.setHeight(int)方法硬编码组件大小并不明智。

了解布局如何帮助动态调整组件example。

如何根据客户端的分辨率重新调整应用程序组件的大小？

4 个答案: