GWT 应用程序中的导航

Question

我打算构建一个 Web 应用程序，用户可以每周输入自己的时间，并且一直在努力理解 GWT 中单个页面的概念，该页面根据用户操作用数据重新绘制。在这个网站和 google 上进行了大量研究之后，我发现了一个我想要模拟的链接，但不知道如何在 GWT 中进行操作。虽然他们的源代码是可用的，但我认为它并不完整。我从此链接中得到了一些想法 - Google Web Toolkit (GWT) 中的多页教程 但同样不知道如何将其实现为工作版本。一个小的工作示例将非常有助于我理解和入门。

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

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

非常感谢您的帮助。

问候， 索努。

Answer 1

单页应用程序布局实际上很容易实现。

您要做的第一件事是使用 GWT 布局面板。对于您的布局，我建议使用

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());

这个示例应该会让您有所了解。其他选项是使用 DI 框架，如 Guice 或命令模式。

Answer 2

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

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