2.4/samples/mobilewebapp/src/main/java/com/google/gwt/sample/mobilewebapp/client/desktop/MobileWebAppShellDesktop.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.mobilewebapp.client.desktop;

import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.dom.client.VideoElement;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.media.client.Video;
import com.google.gwt.place.shared.Place;
import com.google.gwt.place.shared.PlaceChangeEvent;
import com.google.gwt.place.shared.PlaceController;
import com.google.gwt.sample.mobilewebapp.client.MobileWebAppShell;
import com.google.gwt.sample.mobilewebapp.presenter.task.TaskEditView;
import com.google.gwt.sample.mobilewebapp.presenter.task.TaskPlace;
import com.google.gwt.sample.mobilewebapp.presenter.task.TaskReadView;
import com.google.gwt.sample.mobilewebapp.presenter.taskchart.TaskChartPresenter;
import com.google.gwt.sample.mobilewebapp.presenter.tasklist.TaskListPlace;
import com.google.gwt.sample.mobilewebapp.presenter.tasklist.TaskListView;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.cellview.client.CellList;
import com.google.gwt.user.cellview.client.HasKeyboardSelectionPolicy.KeyboardSelectionPolicy;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Anchor;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DeckLayoutPanel;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.DockLayoutPanel;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.HasOneWidget;
import com.google.gwt.user.client.ui.IsWidget;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.PopupPanel;
import com.google.gwt.user.client.ui.ResizeComposite;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;
import com.google.gwt.view.client.SelectionChangeEvent;
import com.google.gwt.view.client.SingleSelectionModel;
import com.google.web.bindery.event.shared.EventBus;

import java.util.ArrayList;
import java.util.List;

/**
 * Desktop version of the UI shell.
 */
public class MobileWebAppShellDesktop extends ResizeComposite implements MobileWebAppShell {

  /**
   * CSS override used for the main menu.
   */
  interface MainMenuStyle extends CellList.Style {
  }

  interface MobileWebAppShellDesktopUiBinder extends UiBinder<Widget, MobileWebAppShellDesktop> {
  }

  /**
   * A ClientBundle that provides images for this widget.
   */
  interface Resources extends CellList.Resources {
    /**
     * The styles used in the main menu. We extend
     * {@link CellList.Style#DEFAULT_CSS} with the styles defined in
     * MainMenuCellList.css.
     */
    @Source({"MainMenuCellList.css", CellList.Style.DEFAULT_CSS})
    MainMenuStyle cellListStyle();
  }

  /**
   * The URL attribute that determines whether or not to include the pie chart.
   */
  private static final String CHART_URL_ATTRIBUTE = "chart";

  /**
   * The external URL of the video tutorial for browsers that do not support
   * video.
   */
  private static final String EXTERNAL_TUTORIAL_URL = "http://www.youtube.com/watch?v=oHg5SJYRHA0";

  private static MobileWebAppShellDesktopUiBinder uiBinder = GWT
      .create(MobileWebAppShellDesktopUiBinder.class);

  @UiField
  Anchor helpLink;

  /**
   * The main menu list.
   */
  @UiField(provided = true)
  CellList<MainMenuItem> mainMenu;

  /**
   * The container that holds content.
   */
  @UiField
  DeckLayoutPanel contentContainer;

  @UiField
  DockLayoutPanel leftNav;

  /**
   * The container that holds the pie chart.
   */
  @UiField
  HasOneWidget pieChartContainer;

  /**
   * A boolean indicating that we have not yet seen the first content widget.
   */
  private boolean firstContentWidget = true;

  /**
   * The {@link DialogBox} used to display the tutorial.
   */
  private PopupPanel tutoralPopup;

  /**
   * The video tutorial.
   */
  private Video tutorialVideo;

  /**
   * Construct a new {@link MobileWebAppShellDesktop}.
   */
  public MobileWebAppShellDesktop(EventBus bus, TaskChartPresenter pieChart,
      final PlaceController placeController, TaskListView taskListView, TaskEditView taskEditView,
      TaskReadView taskReadView) {

    // Initialize the main menu.
    Resources resources = GWT.create(Resources.class);
    mainMenu = new CellList<MainMenuItem>(new MainMenuItem.Cell(), resources);
    mainMenu.setKeyboardSelectionPolicy(KeyboardSelectionPolicy.DISABLED);

    // We don't expect to have more than 30 menu items.
    mainMenu.setVisibleRange(0, 30);

    // Add items to the main menu.
    final List<MainMenuItem> menuItems = new ArrayList<MainMenuItem>();
    menuItems.add(new MainMenuItem("Task List", new TaskListPlace(false)) {
      @Override
      public boolean mapsToPlace(Place p) {
        // Map to all TaskListPlace instances.
        return p instanceof TaskListPlace;
      }
    });
    menuItems.add(new MainMenuItem("Add Task", TaskPlace.getTaskCreatePlace()));
    mainMenu.setRowData(menuItems);

    // Choose a place when a menu item is selected.
    final SingleSelectionModel<MainMenuItem> selectionModel =
        new SingleSelectionModel<MainMenuItem>();
    selectionModel.addSelectionChangeHandler(new SelectionChangeEvent.Handler() {
      public void onSelectionChange(SelectionChangeEvent event) {
        MainMenuItem selected = selectionModel.getSelectedObject();
        if (selected != null && !selected.mapsToPlace(placeController.getWhere())) {
          placeController.goTo(selected.getPlace());
        }
      }
    });
    mainMenu.setSelectionModel(selectionModel);

    // Update selection based on the current place.
    bus.addHandler(PlaceChangeEvent.TYPE, new PlaceChangeEvent.Handler() {
      public void onPlaceChange(PlaceChangeEvent event) {
        Place place = event.getNewPlace();
        for (MainMenuItem menuItem : menuItems) {
          if (menuItem.mapsToPlace(place)) {
            // We found a match in the main menu.
            selectionModel.setSelected(menuItem, true);
            return;
          }
        }

        // We didn't find a match in the main menu.
        selectionModel.setSelected(null, true);
      }
    });

    // Initialize this widget.
    initWidget(uiBinder.createAndBindUi(this));

    // Initialize the pie chart.
    String chartUrlValue = Window.Location.getParameter(CHART_URL_ATTRIBUTE);
    if (chartUrlValue != null && chartUrlValue.startsWith("f")) {
      // Chart manually disabled.
      leftNav.remove(1); // Pie Chart.
      leftNav.remove(0); // Pie chart legend.
    } else if (pieChart == null) {
      // Chart not supported.
      pieChartContainer.setWidget(new Label("Try upgrading to a modern browser to enable charts."));
    } else {
      // Chart supported.
      Widget pieWidget = pieChart.asWidget();
      pieWidget.setWidth("90%");
      pieWidget.setHeight("90%");
      pieWidget.getElement().getStyle().setMarginLeft(5.0, Unit.PCT);
      pieWidget.getElement().getStyle().setMarginTop(5.0, Unit.PCT);
      
      pieChartContainer.setWidget(pieChart);
    }

    /*
     * Add all views to the DeckLayoutPanel so we can animate between them.
     * Using a DeckLayoutPanel here works because we only have a few views, and
     * we always know that the task views should animate in from the right side
     * of the screen. A more complex app will require more complex logic to
     * figure out which direction to animate.
     */
    contentContainer.add(taskListView);
    contentContainer.add(taskReadView);
    contentContainer.add(taskEditView);
    contentContainer.setAnimationDuration(800);

    // Show a tutorial when the help link is clicked.
    helpLink.addClickHandler(new ClickHandler() {
      public void onClick(ClickEvent event) {
        showTutorial();
      }
    });
  }

  @Override
  public void setAddButtonVisible(boolean isVisible) {
    // No-op: Adding a task is handled in the main menu.
  }

  /**
   * Set the widget to display in content area.
   * 
   * @param content the {@link Widget} to display
   */
  public void setWidget(IsWidget content) {
    contentContainer.setWidget(content);

    // Do not animate the first time we show a widget.
    if (firstContentWidget) {
      firstContentWidget = false;
      contentContainer.animate(0);
    }
  }

  /**
   * Show a tutorial video.
   */
  private void showTutorial() {
    // Reuse the tutorial dialog if it is already created.
    if (tutoralPopup != null) {
      // Reset the video.
      // TODO(jlabanca): Is cache-control=private making the video non-seekable?
      if (tutorialVideo != null) {
        tutorialVideo.setSrc(tutorialVideo.getCurrentSrc());
      }

      tutoralPopup.center();
      return;
    }

    /*
     * Forward the use to YouTube if video is not supported or if none of the
     * source formats are supported.
     */
    tutorialVideo = Video.createIfSupported();
    if (tutorialVideo == null) {
      Label label = new Label("Click the link below to view the tutoral:");
      Anchor anchor = new Anchor(EXTERNAL_TUTORIAL_URL, EXTERNAL_TUTORIAL_URL);
      anchor.setTarget("_blank");
      FlowPanel panel = new FlowPanel();
      panel.add(label);
      panel.add(anchor);

      tutoralPopup = new PopupPanel(true, false);
      tutoralPopup.setWidget(panel);
      tutoralPopup.setGlassEnabled(true);

      // Hide the popup when the user clicks the link.
      anchor.addClickHandler(new ClickHandler() {
        public void onClick(ClickEvent event) {
          tutoralPopup.hide();
        }
      });

      tutoralPopup.center();
      return;
    }

    // Add the video sources.
    tutorialVideo.addSource("video/tutorial.ogv", VideoElement.TYPE_OGG);
    tutorialVideo.addSource("video/tutorial.mp4", VideoElement.TYPE_MP4);

    // Setup the video player.
    tutorialVideo.setControls(true);
    tutorialVideo.setAutoplay(true);

    // Put the video in a dialog.
    final DialogBox popup = new DialogBox(false, false);
    popup.setText("Tutorial");
    VerticalPanel vPanel = new VerticalPanel();
    vPanel.add(tutorialVideo);
    vPanel.add(new Button("Close", new ClickHandler() {
      public void onClick(ClickEvent event) {
        tutorialVideo.pause();
        popup.hide();
      }
    }));
    popup.setWidget(vPanel);
    tutoralPopup = popup;
    popup.center();
  }
}