Question

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

enter image description here

这是我编写的代码：

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.");
    }
}

最重要的是：

如何“连接”Hyperlink以便用户点击它们时，我可以调用相应的getXXXMenuContent()方法，然后将其添加到menuContent？

但是：

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

提前致谢！

Answer 1

像

这样的东西

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

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

至于其他问题：使用UIBinder构建UI更优雅，更容易，所以一定要考虑到这一点，但要尽量做到＆＃34;它＆＃34;首先要避免增加.ui.xml设置的复杂性： - ）

干杯，

Answer 2

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

要对这些导航事件做出反应，请使用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 />但你只是cheating yourself这里）

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

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

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上进行了广泛讨论，从而产生了选择和编程熟悉度/偏好。

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

3 个答案: