2.4/samples/showcase/src/com/google/gwt/sample/showcase/client/content/lists/CwStackLayoutPanel.java

/*
 * Copyright 2011 Google Inc.
 * 
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 * 
 * http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */
package com.google.gwt.sample.showcase.client.content.lists;

import com.google.gwt.core.client.GWT;
import com.google.gwt.core.client.RunAsyncCallback;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.i18n.client.Constants;
import com.google.gwt.resources.client.ImageResource;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
import com.google.gwt.safehtml.shared.SafeHtmlUtils;
import com.google.gwt.sample.showcase.client.ContentWidget;
import com.google.gwt.sample.showcase.client.ShowcaseAnnotations.ShowcaseData;
import com.google.gwt.sample.showcase.client.ShowcaseAnnotations.ShowcaseSource;
import com.google.gwt.sample.showcase.client.ShowcaseAnnotations.ShowcaseStyle;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.AbstractImagePrototype;
import com.google.gwt.user.client.ui.Anchor;
import com.google.gwt.user.client.ui.CheckBox;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.HasVerticalAlignment;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.PopupPanel;
import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.StackLayoutPanel;
import com.google.gwt.user.client.ui.Tree;
import com.google.gwt.user.client.ui.TreeItem;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;

/**
 * Example file.
 */
@ShowcaseStyle({
    ".gwt-DecoratedStackPanel", "html>body .gwt-DecoratedStackPanel",
    "* html .gwt-DecoratedStackPanel", ".cw-StackPanelHeader"})
public class CwStackLayoutPanel extends ContentWidget {
  /**
   * The constants used in this Content Widget.
   */
  @ShowcaseSource
  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.
   */
  @ShowcaseSource
  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.
     */
    @Source("noimage.png")
    ImageResource treeLeaf();
  }

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

  /**
   * Constructor.
   * 
   * @param constants the constants
   */
  public CwStackLayoutPanel(CwConstants constants) {
    super(constants.cwStackLayoutPanelName(), constants
        .cwStackLayoutPanelDescription(), true);
    this.constants = constants;
  }

  /**
   * Initialize this example.
   */
  @ShowcaseSource
  @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;
  }

  @Override
  protected void asyncOnInitialize(final AsyncCallback<Widget> callback) {
    GWT.runAsync(CwStackLayoutPanel.class, new RunAsyncCallback() {

      public void onFailure(Throwable caught) {
        callback.onFailure(caught);
      }

      public void onSuccess() {
        callback.onSuccess(onInitialize());
      }
    });
  }

  /**
   * 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
   */
  @ShowcaseSource
  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
   */
  @ShowcaseSource
  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() {
        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
   */
  @ShowcaseSource
  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
   */
  @ShowcaseSource
  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
   */
  @ShowcaseSource
  private Widget createMailItem(Images images) {
    Tree mailPanel = new Tree(images);
    TreeItem mailPanelRoot = mailPanel.addItem("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;
  }
}