GWT 应用程序中的导航

Posted 2023-04-13

【中文标题】GWT 应用程序中的导航

【英文标题】：Nvigation within a GWT application

【发布时间】：2011-09-12 13:51:18

【问题描述】：

我打算构建一个 Web 应用程序，用户可以在其中输入每周的时间，并且一直在努力理解 GWT 中单个页面的概念，该页面会根据用户操作用数据重新绘制。在这个网站和谷歌上进行了大量研究之后，我找到了一个我想效仿但不知道如何在 GWT 中进行的链接。尽管他们的源代码可用，但我认为它并不完整。我从这个链接中得到了一些想法 - Multiple pages tutorial in Google Web Toolkit (GWT) 但又不知道如何将它实现到工作版本中。一个小的工作示例将非常有助于我理解和入门。

谁能指导我如何通过下面的链接实现屏幕的外观和感觉以及如何使用来自服务器的数据重新绘制内容？我是否需要将所有逻辑放在一个 EntryPoint 类中？我想在左侧导航面板中有超链接并在右侧面板中显示内容。经过几个小时的研究，我似乎完全迷失了方向。

http://gwt.google.com/samples/Showcase/Showcase.html#!CwHyperlink

非常感谢您的帮助。

问候， 索努。

【参考方案1】：

单页应用布局其实很容易实现。

您要做的第一件事是使用 GWT layout panels 定义总体布局。对于您的布局，我建议使用DockLayoutPanel。

Content content = new Content();
Button switchContent = new Button(content);
Navigation navigation = new Navigation();
navigation.add(switchContent);

DockLayoutPanel pageLayout = new DockLayoutPanel(Unit.EM);
p.addWest(new HTML(navigation), 7.5);
p.add(new HTML(content));

在这里，导航面板的宽度将被固定，而内容将占据剩余空间。您必须传递对内容区域进行切换、将按钮添加到导航区域等的按钮（或其他一些小部件）的引用。

把它放到一个类中，例如叫MasterPageFactory:

public class MasterPageFactory 
    private MasterPageFactory() 

    public static MasterPage newInstance() 

       Content content = new Content();
       Button switchContent = new Button(content);
       Navigation navigation = new Navigation();
       navigation.add(switchContent);

       DockLayoutPanel masterPage = new DockLayoutPanel(Unit.EM);
       masterPage.addWest(new HTML(navigation), 7.5);
       masterPage.add(new HTML(content));

       return masterPage;
    

现在，在您的 EntryPoint 类中，调用工厂：

RootLayoutPanel.get().add(MasterPageFactory.newInstance());

这个例子应该让你有个想法。其他选择是使用像 Guice 或命令模式这样的 DI 框架。

【讨论】：

谢谢帮手，这给了我一个想法。请原谅我的无知 - 哪个 jar 会有您在代码中提到的 Content 类？它是自定义类还是 jar 的一部分，因为 Eclipse 似乎在任何 gwt jar 中都找不到它。

对不起，我忘了提。您必须自己创建它们。

谢谢，它应该扩展任何 Composite 或 Widget 类吗？您认为它应该/应该有哪些帮助方法来显示内容？

是的，扩展Composite 用于创建你的Composites :-)。这个想法是每个更改另一个组件的组件都需要对 LayoutPanel 的引用，这里是 DockLayoutPanel。然后，您必须删除当前组件和新组件。这实际上有点棘手，所以我建议一个原型来尝试一下。

【参考方案2】：

您的问题混淆了几个概念。如果您希望用户单击看起来像链接的东西，并且作为响应，应用程序会向服务器发送请求并显示一个看起来与他们所在的页面不同的页面，并且该页面具有刚刚来自的新数据服务器，那么您需要一个完全正常的锚点或表单提交按钮。您不需要 GWT 提供任何特别或奇怪的东西。

您引用的展示示例让用户单击看起来像链接的东西，看起来它加载了一个新页面，甚至可以让后退按钮按预期工作，但实际上并没有点击服务器来获取新页面或新数据。

【讨论】：

感谢 Gatkin，让我澄清一下 - 我想知道如何实现展示示例在 GWT 中指定的布局。我不确定如何根据用户在左侧单击的内容将页面划分为框架并刷新内容区域（无论是静态的还是来自服务器的动态）。让我感到困惑的是布局以及是否将所有这些逻辑转储到一个入口点类中。