title: How to wire up GWT hyperlink click handler?
body: <p>I am brand new to GWT and am trying to achieve the following:</p>
  
  <p><img src="https://i.stack.imgur.com/g8ygo.png" alt="enter image description here"></p>
  
  <p>Here's the code that I've cooked up:</p>
  
  <pre><code>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 &lt;hr/&gt;
      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("&lt;h1&gt;MyWebApp&lt;/h1&gt;&lt;hr/&gt;");
  
          // 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.");
      }
  }
  </code></pre>
  
  <p>Most importantly:</p>
  
  <ul>
  <li>How do I "wire up" the <code>Hyperlink</code>s so that when the user clicks them, I can call the appropriate <code>getXXXMenuContent()</code> method, and then add that to <code>menuContent</code>?</li>
  </ul>
  
  <p>But also:</p>
  
  <ul>
  <li>I <em>feel</em> like I'm doing something wrong here: <code>mainPanel.add(new HTML(headerBuilder.toSafeHtml().toString()));</code> - if so what is it?!? How should I be adding a simple <code>&lt;h1&gt;</code> and <code>&lt;hr/&gt;</code> in a way that's secure (hence the use of the Safe* objects), efficient, and conforming to recommended practices?</li>
  <li>Should I be implementing <code>UiBinder</code> here? If so, would I make <code>UiBinder</code>s for each menu's content or for the entire <code>mainPanel</code>, or both?</li>
  </ul>
  
  <p>Thanks in advance!</p>