Google Web Toolkit (GWT) 中的多页教程 [英] Multiple pages tutorial in Google Web Toolkit (GWT)
问题描述
我刚刚开始学习 Google Web Toolkit (GWT).如何在我的 GWT 应用程序中制作不同的 HTML 页面?
I just started learning Google Web Toolkit (GWT). How do I make different HTML pages in my GWT application?
例如，我想为一家书店创建一个应用程序.在这个应用程序中，我将有三个页面:
For example, I want to create an application for a book store. In this application I'll have three pages:
- 我将欢迎用户并提供用户书籍的主页
- 按类别浏览书籍和查看详细信息的页面(使用 GWT 小部件)
- 在线查看图书.
当然可以有其他页面，例如用户的详细信息、添加新书等.那么，在 GWT 中制作不同页面的最佳方法是什么，如何进行页面到页面的导航?有没有例子或教程?或者，当我可以在一个页面中创建整个应用程序时，我什至需要创建不同的页面?
Of course there could be other pages like the user's details, add new book, etc. So, what is the best way of making different pages in GWT and how can I make navigation from page to page? Are there any examples or tutorials? Or do I even need to create different pages when I can create a whole application in one page?
推荐答案
在这种情况下，我通常会先设计网页框架.我将为页眉、侧边菜单和页脚设置一个 div.我还将在 HTML 中为主要内容添加一个 div.
What I usually do in situations like this is design the webpage framework first. I'll have a div for the header, side menu and footer. I'll also have a div in my HTML for the main content.
示例:
<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>
(如果您喜欢基于 <div> 的布局，请随意使用它们.)
(If you like <div> based layouts, feel free to use those instead.)
然后像往常一样构建入口点(在我的例子中是 Core.java)，根据需要设置每个元素.
Then you build your entry point (in my case Core.java) as you normally would, setting each of the elements as need be.
RootPanel.get("header").add(new Header());
RootPanel.get("leftnav").add(new NavigationMenu());
RootPanel.get("footer").add(new Footer());
当然，可以有静态页脚和页眉，但这既不存在也不存在.
It is, of course, possible to have a static footer and header, but that's neither here nor there.
我还有一个名为Content"的抽象类.内容对象扩展了Composite"，并将具有各种方法来简化新页面的创建和布局.我为此应用程序构建的每个页面，无论是帮助屏幕、搜索屏幕、购物车还是其他任何内容，都属于 Content 类型.
I also have an abstract class called "Content". Content objects extend "Composite" and will have various methods for simplifying the creation and layout of a new page. Every page that I build for this application, be it a help screen, search screen, shopping cart, or anything else, is of type Content.
现在，我要做的是创建一个名为ContentContainer"的类.这是一个负责管理内容"元素的单例.它有一个方法setContent"，它接受Content"类型的对象.然后它基本上删除了内容"<td> 中的任何内容.并用您通过setContent"方法分配的任何小部件(复合)替换它.setContent 方法还处理历史记录和标题栏管理.基本上，如果每个页面内容必须知道"它必须执行的所有功能，则 ContentContainer 用于聚合您可能必须进行的所有各种绑定点.
Now, what I do is create a class called "ContentContainer". This is a singleton that is responsible for managing the "content" element. It has one method "setContent" that accepts objects of type "Content". It then basically removes anything within the "content" <td> and replaces it with whatever widget (Composite) you assign via the "setContent" method. The setContent method also handles history and title bar management. Basically the ContentContainer serves to aggregate all the various points of binding that you might have to make if each page content had to "know" about all the functions it must perform.
最后，您需要一种方法来访问该页面，对吗?很简单:
Finally, you need a way to get to that page, right? That's simple:
ContentContainer.getInstance().setContent(new Search());
将上述内容放在某个地方的点击事件中，您就大功告成了.
Put the above in an on-click event somewhere and you're golden.
您的其他小部件唯一需要绑定的是 ContentContainer 和它们添加的内容类型.
The only things that your other widgets need to be bound to is the ContentContainer and the type of Content that they are adding.
我可以看到 ChrisBo 方法的缺点是您有一个必须维护令牌的列表 -> 页面.我能看到的另一个缺点是，我不知道如何使用这种方法建立一个实际的历史系统.
The downsides that I can see to ChrisBo's approach are that you've got a list that has to be maintained of tokens -> pages. The other downside I can see is that I don't see how you can have an actual history system with this method.
它在我的方法中提供的一件事是所有页面选择都非常集中.我会使用某种 Enum 或至少一个带有 String 值的静态类来防止自己混淆链接.
One thing it does offer over my approach is that all page choices are pretty centralized. I'd use some sort of Enum or at least a static class with String values to prevent myself from mongling up links.
在任何一种情况下，我认为这一点都可以概括为:根据您的用户执行的用户点击操作交换某些中央页面元素的内容.
In either case, I think the point can be summed up as this: swap the content of some central page element based on what your user clicks actions your user(s) perform.
这篇关于Google Web Toolkit (GWT) 中的多页教程的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
