如何连接 GWT 超链接点击处理程序？

Question

我是 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())); - 如果是这样，那是什么？！？我应该如何以安全（因此使用 Safe* 对象）、高效且符合推荐做法的方式添加简单的 <h1> 和 <hr/>？
• 我应该在这里实现UiBinder 吗？如果是这样，我会为每个菜单的内容创建UiBinders，还是为整个mainPanel，或两者兼而有之？

提前致谢！

Answer 1

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

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

更多详情请见：https://developers.google.com/web-toolkit/doc/latest/DevGuideCodingBasicsHistory

---

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

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

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

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

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

Answer 2

有点像

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

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

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

干杯，

Answer 3

我有一个简单的建议要给你。使用框架提供的功能。

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

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

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

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

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

如果您想要更简单的东西，MenuBar 和 MenuItem 类应该可以解决问题。

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

另外，UIBinder 与 Designer/Classes 方法在 stackoverflow 上进行了广泛讨论，导致选择和编程熟悉度/偏好问题。