GWT - 动态页面大小

时间:2013-01-15 18:21:52

标签: gwt

我正在探索一些常见问题的可能解决方案(欢迎您的意见)。为了清楚起见,我简化了问题。

假设我有一个显示多个矩形框的小部件。每个盒子具有相同的静态宽度和宽度。 HIGHT。有超过1000的盒子,这个数字会随着时间的推移而增长。

我正在考虑使用分页来显示框。我想避免使用滚动条。所以我想根据页面大小动态更改每页显示的框数。

解决此问题的最佳方法是什么,首先我想如果容器小部件实现RequiresResize I should be able to capture the dimensions of the widget。但我认为我需要让每个父窗口小部件也实现RequiresResizeProvidesResize

有更好的方法吗?

由于

3 个答案:

答案 0 :(得分:2)

在一个vanilla GWT项目中,最简单的方法是使用布局面板类 - 这些类使用您提到的RequiresResizeProvidesResize接口。启动此功能的最佳方式不是RootPanel,而是RootLayoutPanel。此替代起点包装单个RootPanel实例,并通过调用RequiresResize.onResize(如果存在)将其子项调整为可用的浏览器空间。

然后,您的小部件树的其余部分(添加到父级的子级等)也应该使用这些接口来声明它们需要调整大小信息。很可能你最终不会构建任何没有的小部件,但主要是将现有的小部件(使用UiBinder或Composite)包装到一个新的小部件中 - 这就是你正在创建一个新的小部件,并通过默认的一个未实现ProvidesResizeRequiresResize。在构建应用程序时,有两个基本解决方案:

  • 实现这两个接口。然后,在您的onResize()方法中,调用需要知道其大小已更改的顶级窗口小部件的onResize()。这允许更多控制,但需要更明确的代码来进行大小调整工作。最简单的方法是扩展ResizeComposite而不是Composite。或者,

  • 不要扩展Widget(即不要扩展Composite / ResizeComposite / etc),而是实现IsWidget。这将允许您避免向树中添加新的Widget类型,并将您正在使用的所有小部件分组到恰好构建并将其全部设置的类型中。这是我的首选选项 - 它看起来不像一个小部件,通常更容易模拟,等等。现在你需要一个asWidget()方法返回你的小部件结构的基础 - 任何这个被添加到将会谈论直接到那个(并直接调用它onResize()),让你忽略他们需要如何交互的细节。这是我的首选。

答案 1 :(得分:1)

这简单得多:

Window.addResizeHandler(new ResizeHandler() {

    @Override
    public void onResize(ResizeEvent event) {
        resize();
    }

});

private void resize() {
        // Measure your widget
        // Decide how many squares to display
}

首次加载视图时需要调用resize(),然后任何窗口调整大小都会触发此方法。

答案 2 :(得分:0)

如果您想要调整大小事件,您只需要实现RequiresResize并维护Provide / RequiresResize链。但在你的情况下,你只想知道窗口或容器的大小,而不是resize事件(至少,这是我从你的问题推断出来的那样)。

在这种情况下,您可以在决定分页之前使用容器小部件的getOffsetWidth()和getOffsetHeight()方法(请参阅http://google-web-toolkit.googlecode.com/svn/javadoc/1.5/com/google/gwt/user/client/ui/UIObject.html#getOffsetHeight())。

另一方面,如果您需要在窗口大小更改时重新布局,则必须按照说明使用Provide / RequireResize。如果您不想维护完整的层次结构,只需在根布局面板中放置一个隐藏的LayoutPanel,并将resize事件路由到您想要的任何内容。不是一个非常干净的解决方案,而是一个解决方案...