Google Web Toolkit（GWT）中的多页教程 [英] Multiple pages tutorial in Google Web Toolkit (GWT)
问题描述
我刚开始学习 Google Web Toolkit （GWT）。如何在我的GWT应用程序中制作不同的HTML页面？
例如，我想为书店创建应用程序。在这个应用程序中，我将有三个页面：
- 欢迎用户提供用户帐户的主页
- 页面按类别浏览图书并查看详细信息（使用GWT窗口小部件）
- 在线查看图书。
当然，可能会有其他页面，例如用户的详细信息，添加新书等。
那么，在GWT中制作不同页面的最佳方式是什么？如何制作导航从页面到页面？是否有任何示例或教程？或者我甚至需要在一个页面上创建一个完整的应用程序时创建不同的页面？
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>
<！ - 加载GWT的JavaScript代码 - >
< script language =javascriptsrc =ui / org.project.package.ui.Core.nocache.js>< / script>
<！ - 由于Internet Explorer中的某些未知原因，如果它位于body标签中，则必须在元素上放置cellpadding / spacing，而不要放在STYLE上 - >
>
<！ - 标题行 - >
< tr style =height：25％;>
< td colspan =2id =header>< / td>
< / tr>
<！ - 正文行和左侧导航行 - >
< tr style =height：65％;>
< td id =leftnav>< / td>
< td id =content>< / td>
< / tr>
<！ - 页脚行 - >
< tr style =height：10％;>
< td colspan =2id =footer>< / td>
< / tr>
< / table>
<！ - 此iframe处理历史记录 - >
< iframe id =__ gwt_historyFramestyle =width：0; height：0; border：0>< / iframe>
< / body>
< / html>
（如果您喜欢基于< div>的布局，请随意使用它们。）
然后像通常那样建立你的入口点（在我的例子中为 Core.java ），设置每个元素根据需要。
RootPanel.get（header）.add（new Header（））;
RootPanel.get（leftnav）.add（new NavigationMenu（））;
RootPanel.get（footer）。add（new Footer（））;
当然，可以有一个静态页脚和页眉，但这不是在那里也不是在那里。
我也有一个名为Content的抽象类。内容对象扩展复合，并将有多种方法来简化新页面的创建和布局。我为这个应用程序构建的每一页，无论是帮助屏幕，搜索屏幕，购物车还是其他任何内容，都是 Content 。
现在，我所做的是创建一个名为ContentContainer的类。这是一个负责管理内容元素的单身人士。它有一个方法setContent接受类型为Content的对象。然后，它基本上删除内容< td>中的任何内容。并用您通过setContent方法分配的任何小部件（Composite）来替换它。 setContent方法也处理历史和标题栏管理。基本上，ContentContainer用于聚合所有各种绑定点，如果每个页面内容必须知道它必须执行的所有功能，您可能必须进行绑定。
最后，你需要一种方法去到那个页面，对吧？这很简单：
ContentContainer.getInstance（）。setContent（new Search（））;
将上述内容放在某个地方的点击事件中，您就是金牌。
您的其他小部件唯一需要绑定的是ContentContainer和它们添加的内容类型。
我可以看到ChrisBo的方法的缺点是你有一个列表，必须维护记号 - >页面。我能看到的另一个缺点是，我没有看到如何用这种方法建立一个实际的历史系统。
它提供的一个方法是我的方法所有的页面选择都非常集中。我会使用某种Enum或者至少一个带有String值的静态类来防止自己弄乱链接。
无论如何，我认为这一点可以是总结为：交换基于的一些中心页面元素的内容，以便用户点击您的用户执行的操作。
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:
- Home pages where I will welcome the user and offer the user books
- Page to browse books by categories and view details (use GWT widgets)
- Check out books online.
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?
解决方案 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.
Example:
<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>
(If you like <div> based layouts, feel free to use those instead.)
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.
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.
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.
The only things that your other widgets need to be bound to is the ContentContainer and the type of Content that they are adding.
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.
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屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆