gwt - Google Web Toolkit (GWT) 中的多页教程

我刚刚开始学习Google Web Toolkit (GWT)。如何在我的 GWT 应用程序中制作不同的 HTML 页面？

例如，我想为书店创建一个应用程序。在此应用程序中，我将包含三个页面:

我将在其中欢迎用户并提供用户书籍的主页
按类别浏览图书并查看详细信息的页面(使用 GWT 小部件)
在线查看书籍。

当然可能还有其他页面，例如用户详细信息、添加新书等。那么，在 GWT 中制作不同页面的最佳方法是什么？如何进行页面之间的导航？有没有例子或教程？或者，当我可以在一个页面中创建整个应用程序时，我是否还需要创建不同的页面？

最佳答案

遇到这种情况我通常会先设计网页框架。我将为页眉、侧面菜单和页脚设置一个 div。我还将在 HTML 中添加一个 div 作为主要内容。

示例:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta name='gwt:module' content='org.project.package.Core=org.project.package.Core'>
    </head>
    <body>
        <!-- Load the JavaScript code for GWT -->
        <script language="javascript" src="ui/org.project.package.ui.Core.nocache.js"></script>

        <!-- For some unknown reason in Internet Explorer you have to have cellpadding/spacing ON THE ELEMENT and not on the STYLE if it is in the body tag like this -->
        <table id="wrapper" cellpadding="0" cellspacing="0" style="width: 100%;height: 100%;">

             <!-- Header row -->
             <tr style="height: 25%;">
                 <td colspan="2" id="header"></td>
             </tr>

             <!-- Body row and left nav row -->
             <tr style="height: 65%;">
                 <td id="leftnav"></td>
                 <td id="content"></td>
             </tr>

             <!-- Footer row -->
             <tr style="height: 10%;">
                <td colspan="2" id="footer"></td>
             </tr>

        </table>

        <!-- This iframe handles history -->
        <iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>
    </body>
</html>

(如果您喜欢基于

的布局，请随意使用它们。)

然后，您像平常一样构建入口点(在我的例子中为 Core.java)，根据需要设置每个元素。

RootPanel.get("header").add(new Header());
RootPanel.get("leftnav").add(new NavigationMenu());
RootPanel.get("footer").add(new Footer());

当然，可以有静态页脚和页眉，但这既不存在也不存在。

我还有一个名为“Content”的抽象类。内容对象扩展了“Composite”，并且将具有各种方法来简化新页面的创建和布局。我为此应用程序构建的每个页面，无论是帮助屏幕、搜索屏幕、购物车还是其他任何页面，都是 Content 类型。

现在，我要做的是创建一个名为“ContentContainer”的类。这是一个负责管理“内容”元素的单例。它有一种方法“setContent”，该方法接受“Content”类型的对象。然后，它基本上删除“内容” 中的所有内容，并将其替换为您通过“setContent”方法分配的任何小部件(复合)。 setContent 方法还处理历史记录和标题栏管理。基本上，如果每个页面内容必须“了解”它必须执行的所有功能，则 ContentContainer 会聚合您可能必须进行的所有各种绑定(bind)点。

最后，您需要一种方法来访问该页面，对吧？很简单:

ContentContainer.getInstance().setContent(new Search());

将上述内容放在某个地方的点击事件中，你就成功了。

其他小部件需要绑定(bind)的唯一内容是 ContentContainer 以及它们添加的内容类型。

我认为 ChrisBo 方法的缺点是您需要维护一个 token -> 页面的列表。我看到的另一个缺点是我不明白如何使用这种方法拥有一个实际的历史系统。

它确实比我的方法提供的一件事是所有页面选择都非常集中。我会使用某种枚举或至少一个带有字符串值的静态类来防止自己混淆链接。

无论哪种情况，我认为要点可以总结为:基于~~用户点击的内容~~用户执行的操作来交换某些中央页面元素的内容。

关于gwt - Google Web Toolkit (GWT) 中的多页教程，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1061705/

gwt - Google Web Toolkit (GWT) 中的多页教程

上一篇：state - 我在哪里可以获得国家、州和城市的列表？

下一篇：.net - 如何右对齐 DataGridView 列中的文本？