我有一个 GWT Web 应用程序,它在全窗口大小的浏览器中完美运行,但是当我重新调整窗口大小时,它看起来不太好,所有组件都不在各自的位置。
因此,每当我更改窗口大小或如果我将在选项卡或移动设备上运行应用程序时,我都想更改所有组件的大小。
有没有其他可用的方法?
我怎样才能做到这一点?
您可以使用 gwt-bootstrap 之类的东西(它可以根据视口大小和用户代理更改视图)。但基本上你可以(我认为应该)在创建组件时使用 CSS 的 @media 选择器。
您可以通过 GWT 处理所有调整大小事件并手动调整每个组件的大小,但这不是一个好主意,因为您的应用程序的性能。
尝试
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));
}
}
您可以使用Window.getClientHeight
and 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 代码,让浏览器处理大小调整。虽然这并不总是一个可行的选择,但如果可能的话,应该选择去做。
它是纯 GWT 还是您使用 SmartGWT 组件?
如果您使用 SmartGWT,您应该能够使用Layout类来更好地管理组件。
使用Canvas.setWidth(int)和Canvas.setHeight(int)方法对组件大小进行硬编码是不明智的。
在此示例中了解布局如何帮助动态调整组件大小。