鉴于您希望将“html 页面”添加到现有 GWT 应用程序,我建议操作 DOM 而不是创建第二个入口点。如果您需要为此应用程序创建联系页面、关于页面和隐私页面,该怎么办?
Chris关于 GWT 导航的 SO 回答为在 GWT 应用程序中维护多个状态提供了一个非常好的解决方案。
我已经根据克里斯的回答实现了自己的变体;在这里,我只进一步详细说明我的实现细节。我发现这对于管理具有
历史支持 的 GWT 应用程序中的
多个状态非常有效。
按照建议,我使用以下 HTML:
<table id="wrapper">
<!-- Header row -->
<tr style="height: 60px;">
<td colspan="2" id="header"></td>
</tr>
<!-- Body row and left nav row -->
<tr style="vertical-align: top;">
<td id="leftnav"></td>
<td id="content"></td>
</tr>
</table>
然后,我定义了一个顶级 Composite 类,每个单独的页面都在应用程序中继承该类:
public abstract class Content extends Composite{
public abstract String getToken();
public abstract String getWindowTitle();
}
每个页面的标记和窗口标题在一个名为 PageDefs 的类中定义:
public class PageDefs{
public static final String WelcomeToken = "WELCOME";
public static final String WelcomeTitle = "Welcome to My App";
public static final String AppToken = "APP";
public static final String AppTitle = "My App";
}
Content 类由单例 ContentContainer 抽象使用:
public class ContentContainer implements ValueChangeHandler<String> {
@Override
public void onValueChange(ValueChangeEvent<String> event) {
String token = (String) event.getValue();
this.setContentByToken(token);
}
public void setContentByToken(String token) {
if (token.equals(PageDefs.WelcomeToken)) {
this.setContent(new WelcomePage());
} else if (token.equals(PageDefs.AppToken)) {
this.setContent(new MyApp());
} else {
Window.alert("Error in parsing history token: '" + token + "'");
}
}
private void setContent(Content content) {
RootPanel contentRoot = RootPanel.get("content");
contentRoot.clear();
this.content = content;
History.newItem(content.getToken(), false);
// check for special initializations:
if (content.getToken().equals(PageDefs.AppToken)) {
((MyApp) content).MyInit();
}
contentRoot.add(content);
header.setHeader(content.getWindowTitle());
Window.setTitle(content.getWindowTitle());
Window.scrollTo(0, 0);
}
private static ContentContainer myInstance = new ContentContainer();
public static synchronized ContentContainer getInstance() {
return myInstance;
}
private ContentContainer() {
History.addValueChangeHandler(this);
}
private Header header;
private Content content;
public void setHeader(Header h) {
this.header = h;
}
}
ContentContainer 保持对标头类的本地引用。这是因为我需要一个取决于应用程序状态的动态标题和窗口标题。此外,从管理应用程序的内容、标题、窗口标题和历史记录等所有内容都包含在一个类中。
在我的实际实现中,ContentContainer 还跟踪用户的会话。因此,如果用户的会话不存在或过期,ContentContainer 的onValueChange
方法会强制加载登录页面。
标头是一个 UI 活页夹,其中包含一个 InlineHTML 变量,其 HTML 由该setHeader
方法设置。对于左侧导航菜单,我还使用带有 GWT 锚点的 UI 活页夹,其中#WELCOME
和#APP
作为 href 值。
最后,我们需要在入口点加载应用程序的每个部分:
public void onModuleLoad() {
Header h = new Header();
h.setHeader(PageDefs.WelcomeTitle);
RootPanel.get("header").add(h);
ContentContainer.getInstance().setHeader(h);
RootPanel.get("leftnav").add(new NavMenu());
String token = Window.Location.getHash().length() == 0?
PageDefs.WelcomeToken : Window.Location.getHash();
ContentContainer.getInstance().setContentByToken(PageDefs.SignupToken);
}
这就是我在 GWT 应用程序中管理多个页面的方式。这项额外的工作可能看起来很艰巨,但我发现这是值得的。如果您的应用程序处理一些输入并可视化输出,前进和后退按钮是表单和可视化之间的直观导航工具。