| /* |
| * 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.mobile; |
| |
| import com.google.gwt.core.client.GWT; |
| import com.google.gwt.dom.client.Element; |
| import com.google.gwt.dom.client.Style.Display; |
| 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.sample.mobilewebapp.client.MobileWebAppShell; |
| import com.google.gwt.sample.mobilewebapp.client.event.ActionEvent; |
| import com.google.gwt.sample.mobilewebapp.client.event.ActionNames; |
| import com.google.gwt.sample.mobilewebapp.presenter.task.TaskEditView; |
| import com.google.gwt.sample.mobilewebapp.presenter.task.TaskReadView; |
| import com.google.gwt.sample.mobilewebapp.presenter.tasklist.TaskListView; |
| import com.google.gwt.sample.ui.client.OrientationHelper; |
| import com.google.gwt.uibinder.client.UiBinder; |
| import com.google.gwt.uibinder.client.UiField; |
| import com.google.gwt.user.client.Command; |
| import com.google.gwt.user.client.ui.Button; |
| import com.google.gwt.user.client.ui.DeckLayoutPanel; |
| import com.google.gwt.user.client.ui.IsWidget; |
| import com.google.gwt.user.client.ui.LayoutPanel; |
| import com.google.gwt.user.client.ui.ResizeComposite; |
| import com.google.gwt.user.client.ui.Widget; |
| import com.google.web.bindery.event.shared.EventBus; |
| |
| /** |
| * Mobile version of the UI shell. |
| */ |
| public class MobileWebAppShellMobile extends ResizeComposite implements MobileWebAppShell { |
| |
| interface MobileWebAppShellMobileUiBinder extends UiBinder<Widget, MobileWebAppShellMobile> { |
| } |
| |
| private static MobileWebAppShellMobileUiBinder uiBinder = GWT |
| .create(MobileWebAppShellMobileUiBinder.class); |
| |
| /** |
| * The width of the menu bar in landscape mode in EX. |
| */ |
| private static final double LANDSCAPE_MENU_WIDTH_EX = 8.0; |
| |
| /** |
| * The height of the menu bar in portrait mode in PT. |
| */ |
| private static final double PORTRAIT_MENU_HEIGHT_PT = 28.0; |
| |
| /** |
| * The button used to add items. |
| */ |
| @UiField |
| Button addButton; |
| |
| /** |
| * The widget that wraps the add button. |
| */ |
| @UiField |
| Widget addButtonContainer; |
| |
| /** |
| * The widget that wraps the back button. |
| */ |
| @UiField |
| Widget backButtonContainer; |
| |
| /** |
| * The panel that holds the current content. |
| */ |
| @UiField |
| DeckLayoutPanel contentContainer; |
| |
| /** |
| * The panel used for layout. |
| */ |
| @UiField |
| LayoutPanel layoutPanel; |
| |
| @UiField |
| Widget titleBar; |
| |
| @UiField |
| Element titleElem; |
| |
| /** |
| * A boolean indicating that we have not yet seen the first content widget. |
| */ |
| private boolean firstContentWidget = true; |
| |
| /** |
| * Construct a new {@link MobileWebAppShellMobile}. |
| */ |
| public MobileWebAppShellMobile(final EventBus eventBus, OrientationHelper orientationHelper, |
| TaskListView taskListView, TaskEditView taskEditView, TaskReadView taskReadView) { |
| |
| initWidget(uiBinder.createAndBindUi(this)); |
| |
| // Initialize the add button. |
| // Initialize the add button. |
| addButton.addClickHandler(new ClickHandler() { |
| @Override |
| public void onClick(ClickEvent event) { |
| ActionEvent.fire(eventBus, ActionNames.ADD_TASK); |
| } |
| }); |
| setAddButtonVisible(false); |
| |
| /* |
| * 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(500); |
| |
| orientationHelper.setCommands(this, new Command() { |
| @Override |
| public void execute() { |
| onShiftToPortrait(); |
| } |
| }, new Command() { |
| @Override |
| public void execute() { |
| onShiftToLandscape(); |
| } |
| }); |
| |
| // Return to the task list when the title is clicked. |
| titleBar.addDomHandler(new ClickHandler() { |
| @Override |
| public void onClick(ClickEvent event) { |
| ActionEvent.fire(eventBus, ActionNames.GO_HOME); |
| } |
| }, ClickEvent.getType()); |
| } |
| |
| @Override |
| public void setAddButtonVisible(boolean visible) { |
| addButton.setVisible(visible); |
| } |
| |
| /** |
| * 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); |
| } |
| } |
| |
| private void onShiftToLandscape() { |
| |
| // Landscape. |
| layoutPanel.setWidgetTopBottom(titleBar, 0, Unit.PX, 0, Unit.PX); |
| layoutPanel.setWidgetLeftWidth(titleBar, 0, Unit.PX, LANDSCAPE_MENU_WIDTH_EX, Unit.EX); |
| titleElem.getStyle().setDisplay(Display.NONE); |
| |
| layoutPanel.setWidgetTopBottom(contentContainer, 0, Unit.PX, 0, Unit.PX); |
| layoutPanel.setWidgetLeftRight(contentContainer, LANDSCAPE_MENU_WIDTH_EX, Unit.EX, 0, Unit.PX); |
| |
| layoutPanel.setWidgetTopHeight(addButtonContainer, 5, Unit.PX, 4, Unit.EX); |
| layoutPanel |
| .setWidgetLeftWidth(addButtonContainer, 0, Unit.PX, LANDSCAPE_MENU_WIDTH_EX, Unit.EX); |
| |
| layoutPanel.setWidgetBottomHeight(backButtonContainer, 5, Unit.PX, 4, Unit.EX); |
| layoutPanel.setWidgetLeftWidth(backButtonContainer, 0, Unit.PX, LANDSCAPE_MENU_WIDTH_EX, |
| Unit.EX); |
| } |
| |
| private void onShiftToPortrait() { |
| // Portrait. |
| layoutPanel.setWidgetTopHeight(titleBar, 0, Unit.PX, PORTRAIT_MENU_HEIGHT_PT, Unit.PT); |
| layoutPanel.setWidgetLeftRight(titleBar, 0, Unit.PX, 0, Unit.PX); |
| titleElem.getStyle().clearDisplay(); |
| |
| layoutPanel.setWidgetTopBottom(contentContainer, PORTRAIT_MENU_HEIGHT_PT, Unit.PT, 0, Unit.PX); |
| layoutPanel.setWidgetLeftRight(contentContainer, 0, Unit.EX, 0, Unit.PX); |
| |
| layoutPanel |
| .setWidgetTopHeight(addButtonContainer, 0, Unit.PX, PORTRAIT_MENU_HEIGHT_PT, Unit.PT); |
| layoutPanel.setWidgetRightWidth(addButtonContainer, 8, Unit.PX, 3, Unit.EX); |
| |
| layoutPanel.setWidgetTopHeight(backButtonContainer, 0, Unit.PX, PORTRAIT_MENU_HEIGHT_PT, |
| Unit.PT); |
| layoutPanel.setWidgetLeftWidth(backButtonContainer, 8, Unit.PX, 6, Unit.EX); |
| } |
| } |