      /**
       * The constants used in this Content Widget.
       */
      public static interface CwConstants extends Constants {
        String[] cwStackLayoutPanelContacts();

        String[] cwStackLayoutPanelContactsEmails();

        String cwStackLayoutPanelContactsHeader();

        String cwStackLayoutPanelDescription();

        String[] cwStackLayoutPanelFilters();

        String cwStackLayoutPanelFiltersHeader();

        String[] cwStackLayoutPanelMailFolders();

        String cwStackLayoutPanelMailHeader();

        String cwStackLayoutPanelName();
      }

      /**
       * Specifies the images that will be bundled for this example.
       *
       * We will override the leaf image used in the tree. Instead of using a blank
       * 16x16 image, we will use a blank 1x1 image so it does not take up any
       * space. Each TreeItem will use its own custom image.
       */
      public interface Images extends Tree.Resources {
        ImageResource contactsgroup();

        ImageResource defaultContact();

        ImageResource drafts();

        ImageResource filtersgroup();

        ImageResource inbox();

        ImageResource mailgroup();

        ImageResource sent();

        ImageResource templates();

        ImageResource trash();

        /**
         * Use noimage.png, which is a blank 1x1 image.
         */
        @Override
        @Source("noimage.png")
        ImageResource treeLeaf();
      }

      /**
       * An instance of the constants.
       */
      private final CwConstants constants;

      /**
       * Initialize this example.
       */
      @Override
      public Widget onInitialize() {
        // Get the images.
        Images images = (Images) GWT.create(Images.class);

        // Create a new stack layout panel.
        StackLayoutPanel stackPanel = new StackLayoutPanel(Unit.EM);
        stackPanel.setPixelSize(200, 400);

        // Add the Mail folders.
        Widget mailHeader = createHeaderWidget(
            constants.cwStackLayoutPanelMailHeader(), images.mailgroup());
        stackPanel.add(createMailItem(images), mailHeader, 4);

        // Add a list of filters.
        Widget filtersHeader = createHeaderWidget(
            constants.cwStackLayoutPanelFiltersHeader(), images.filtersgroup());
        stackPanel.add(createFiltersItem(), filtersHeader, 4);

        // Add a list of contacts.
        Widget contactsHeader = createHeaderWidget(
            constants.cwStackLayoutPanelContactsHeader(), images.contactsgroup());
        stackPanel.add(createContactsItem(images), contactsHeader, 4);

        // Return the stack panel.
        stackPanel.ensureDebugId("cwStackLayoutPanel");
        return stackPanel;
      }

      /**
       * Add a {@link TreeItem} to a root item.
       *
       * @param root the root {@link TreeItem}
       * @param image the icon for the new child item
       * @param label the label for the child icon
       */
      private void addItem(TreeItem root, ImageResource image, String label) {
        SafeHtmlBuilder sb = new SafeHtmlBuilder();
        sb.append(SafeHtmlUtils.fromTrustedString(AbstractImagePrototype.create(
            image).getHTML()));
        sb.appendEscaped(" ").appendEscaped(label);
        root.addItem(sb.toSafeHtml());
      }

      /**
       * Create the list of Contacts.
       *
       * @param images the {@link Images} used in the Contacts
       * @return the list of contacts
       */
      private Widget createContactsItem(Images images) {
        // Create a popup to show the contact info when a contact is clicked
        HorizontalPanel contactPopupContainer = new HorizontalPanel();
        contactPopupContainer.setSpacing(5);
        contactPopupContainer.add(new Image(images.defaultContact()));
        final HTML contactInfo = new HTML();
        contactPopupContainer.add(contactInfo);
        final PopupPanel contactPopup = new PopupPanel(true, false);
        contactPopup.setWidget(contactPopupContainer);

        // Create the list of contacts
        VerticalPanel contactsPanel = new VerticalPanel();
        contactsPanel.setSpacing(4);
        String[] contactNames = constants.cwStackLayoutPanelContacts();
        String[] contactEmails = constants.cwStackLayoutPanelContactsEmails();
        for (int i = 0; i < contactNames.length; i++) {
          final String contactName = contactNames[i];
          final String contactEmail = contactEmails[i];
          final Anchor contactLink = new Anchor(contactName);
          contactsPanel.add(contactLink);

          // Open the contact info popup when the user clicks a contact
          contactLink.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
              // Set the info about the contact
              SafeHtmlBuilder sb = new SafeHtmlBuilder();
              sb.appendEscaped(contactName);
              sb.appendHtmlConstant("<br><i>");
              sb.appendEscaped(contactEmail);
              sb.appendHtmlConstant("</i>");
              contactInfo.setHTML(sb.toSafeHtml());

              // Show the popup of contact info
              int left = contactLink.getAbsoluteLeft() + 14;
              int top = contactLink.getAbsoluteTop() + 14;
              contactPopup.setPopupPosition(left, top);
              contactPopup.show();
            }
          });
        }
        return new SimplePanel(contactsPanel);
      }

      /**
       * Create the list of filters for the Filters item.
       *
       * @return the list of filters
       */
      private Widget createFiltersItem() {
        VerticalPanel filtersPanel = new VerticalPanel();
        filtersPanel.setSpacing(4);
        for (String filter : constants.cwStackLayoutPanelFilters()) {
          filtersPanel.add(new CheckBox(filter));
        }
        return new SimplePanel(filtersPanel);
      }

      /**
       * Create a widget to display in the header that includes an image and some
       * text.
       *
       * @param text the header text
       * @param image the {@link ImageResource} to add next to the header
       * @return the header widget
       */
      private Widget createHeaderWidget(String text, ImageResource image) {
        // Add the image and text to a horizontal panel
        HorizontalPanel hPanel = new HorizontalPanel();
        hPanel.setHeight("100%");
        hPanel.setSpacing(0);
        hPanel.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
        hPanel.add(new Image(image));
        HTML headerText = new HTML(text);
        headerText.setStyleName("cw-StackPanelHeader");
        hPanel.add(headerText);
        return new SimplePanel(hPanel);
      }

      /**
       * Create the {@link Tree} of Mail options.
       *
       * @param images the {@link Images} used in the Mail options
       * @return the {@link Tree} of mail options
       */
      private Widget createMailItem(Images images) {
        Tree mailPanel = new Tree(images);
        TreeItem mailPanelRoot = mailPanel.addTextItem("foo@example.com");
        String[] mailFolders = constants.cwStackLayoutPanelMailFolders();
        addItem(mailPanelRoot, images.inbox(), mailFolders[0]);
        addItem(mailPanelRoot, images.drafts(), mailFolders[1]);
        addItem(mailPanelRoot, images.templates(), mailFolders[2]);
        addItem(mailPanelRoot, images.sent(), mailFolders[3]);
        addItem(mailPanelRoot, images.trash(), mailFolders[4]);
        mailPanelRoot.setState(true);
        return mailPanel;
      }