4

我是 GWT 的新手，正在努力实现以下目标：

在此处输入图像描述

这是我编写的代码：

public class MyWebApp implements EntryPoint {
    // The main container for everything the user sees (the "view")
    private LayoutPanel mainPanel;

    // Simple HTML for the header ("MyWebApp") and subsequent <hr/>
    private SafeHtml header;

    // The three links "Dashboard", "Monitors" and "Help Desk"
    private HorizontalPanel navMenu;

    // The empty content that gets populated when user clicks one of
    // the 3 links.
    private Panel menuContent;

    @Override
    public void onModuleLoad() {
        // The initial fragment contains the header, nav menu and empty "content" div.
        // Each menu/screen then fills out content div.
        initMainPanel();

        RootPanel.get().add(mainPanel);
    }

    private void initMainPanel() {
        SafeHtmlBuilder headerBuilder = new SafeHtmlBuilder();
        navMenu = new HorizontalPanel();

        // Leaving null until user clicks on one of the 3 menus.
        // Then the menu will decide what panel gets injected for
        // this panel.
        menuContent = null;

        // Create the simple HTML for the header.
        headerBuilder.append("<h1>MyWebApp</h1><hr/>");

        // Create the navMenu items.
        Hyperlink dashboardLink, monitorsLink, helpDeskLink;

        // Homepage is http://www.mywebapp.com
        // I want the dashboardLink to inject menuContent and "redirect" user to
        // http://www.mywebapp.com/dashboard
        dashboardLink = new Hyperlink("???", "???");

        // http://www.mywebapp.com/monitors
        monitorsLink = new Hyperlink("???", "???");

        // http://www.mywebapp.com/help-desk
        helpDeskLink = new Hyperlink("???", "???");
        navMenu.add(dashboardLink);
        navMenu.add(monitorsLink);
        navMenu.add(helpDeskLink);

        // Add all widgets to the mainPanel.
        mainPanel.add(new HTML(headerBuilder.toSafeHtml().toString()));
        mainPanel.add(navMenu);
        mainPanel.add(menuContent);

        // Position and size the widgets (omitted for brevity).
        // mainPanel.setWidgetHorizontalPosition(...);
    }

    private HTML getDashboardMenuContent() {
        return new HTML("This is the dashboard.");
    }

    private HTML getMonitorsMenuContent() {
        return new HTML("These are the monitors.");
    }

    private HTML getHelpDeskMenuContent() {
        return new HTML("This is the help desk.");
    }
}

最重要的是：

  • 我如何“连接” Hyperlinks 以便当用户单击它们时，我可以调用适当的getXXXMenuContent()方法，然后将其添加到menuContent？

但是也：

  • 我觉得我在这里做错了什么：mainPanel.add(new HTML(headerBuilder.toSafeHtml().toString()));-如果是这样，那是什么？！？我应该如何添加一个简单<h1>且<hr/>安全（因此使用 Safe* 对象）、高效且符合推荐做法的方式？
  • 我应该在这里实施UiBinder吗？如果是这样，我会UiBinder为每个菜单的内容或整个菜单制作 s mainPanel，还是两者兼而有之？

提前致谢！

4

3 回答 3

2

Hyperlink小部件触发导航。您不想处理对它们的点击，您想要处理导航（可以通过单击 aHyperlink或使用浏览器的后退/前进按钮、书签或其他地方的链接来触发 - 包括 Ctrl+单击 aHyperlink以在 a 中打开它新窗口/标签——等）

要对这些导航事件做出反应，请使用History.addValueChangeHandler; 并在应用程序启动时处理初始导航History.fireCurrentHistoryState()，调用（当然是在添加处理程序之后）。

更多细节在：https ://developers.google.com/web-toolkit/doc/latest/DevGuideCodingBasicsHistory

将其他问题拆分为......其他问题会更好，但无论如何这里是答案：

我觉得我在这里做错了什么：mainPanel.add(new HTML(headerBuilder.toSafeHtml().toString()));-如果是这样，那是什么？！？我应该如何添加一个简单<h1>且<hr/>安全（因此使用 Safe* 对象）、高效且符合推荐做法的方式？

该HTML小部件有一个构造函数，SafeHtml因此您无需调用toString().
如果您只使用常量，则不需要SafeHtmlBuilder; 改为使用SafeHtmlUtils。但是无论有没有 ，常量都没有或多或少的安全性SafeHtml，SafeHtml只是让您更容易在代码中找到所有出现的 HTML，以帮助对您的应用程序进行安全审查（顺便说一句，我们正在做 HTML，所以<hr>，不是<hr/>；如果你真的希望它看起来像 XML/XHTML，然后使用，<hr />但你只是在这里欺骗自己）

我应该在这里实施UiBinder吗？如果是这样，我会UiBinder为每个菜单的内容或整个菜单制作 s mainPanel，还是两者兼而有之？

如果您觉得不需要 UiBinder，则不必使用它。但在这种情况下，它不会改变任何东西：您处理的不是小部件事件，而是历史事件。

于 2012-11-07T13:57:11.177 回答
1

就像是

dashboardLink.addClickHandler( 
   new ClickHandler() 
   {
       public void onClick( ClickEvent event ) 
       {
           mainPanel.setWidget( getDashboardMenuContent() );
       }
   } );

您应该注意，Hyperlink.addClickHandler(...)它已被弃用，建议改用它Anchor.addClickHandler(...)。

至于其他问题：使用 UIBinder 构建 UI 更优雅、更容易，所以一定要研究一下，但请先尝试让“它”工作以避免增加.ui.xml设置的复杂性 :-)

干杯，

于 2012-11-07T12:46:29.987 回答
0

我有一个简单的建议要给你。使用框架必须提供的东西。

HTML 小部件应该是您最后的转义。有这么多小部件，您几乎不需要在代码中的任何地方编写 html。

因此，您可以使用以下代码代替 headerBuilder

Label header = new Label("MyWebApp");
header.setStyleName("headerStyle",true);

您可以在外部 Css 文件中设置样式属性，并在基本 html 文件或 gwt.xml 文件中添加引用。所以这回答了你的问题 mainPanel.add(new HTML(headerBuilder.toSafeHtml().toString()));

关于超链接。如果您选择使用超链接，请记住最有效的用法是使用更广为人知的位置和活动（网络上的大量信息）的 MVP 模式

如果您想要更简单的东西，那么MenuBarandMenuItem类应该可以解决问题。

在此处查看有关如何使用 MenuBar 来控制您的应用程序的示例。还有很多其他方法，但为什么不使用提供的工具呢？

此外，在 stackoverflow 上广泛讨论了 UIBinder Vs Designer/Classes 方法，从而导致选择和编程熟悉度/偏好问题。

于 2012-11-07T12:54:57.190 回答