1 /* 2 * Copyright 2008 Google Inc. 3 * 4 * Licensed under the Apache License, Version 2.0 (the "License"); you may not 5 * use this file except in compliance with the License. You may obtain a copy of 6 * the License at 7 * 8 * http://www.apache.org/licenses/LICENSE-2.0 9 * 10 * Unless required by applicable law or agreed to in writing, software 11 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT 12 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the 13 * License for the specific language governing permissions and limitations under 14 * the License. 15 */ 16 package com.google.gwt.sample.showcase.client.content.panels; 17 18 import com.google.gwt.core.client.GWT; 19 import com.google.gwt.core.client.RunAsyncCallback; 20 import com.google.gwt.core.client.Scheduler; 21 import com.google.gwt.core.client.Scheduler.ScheduledCommand; 22 import com.google.gwt.event.dom.client.ChangeEvent; 23 import com.google.gwt.event.dom.client.ChangeHandler; 24 import com.google.gwt.event.dom.client.KeyUpEvent; 25 import com.google.gwt.event.dom.client.KeyUpHandler; 26 import com.google.gwt.i18n.client.Constants; 27 import com.google.gwt.sample.showcase.client.ContentWidget; 28 import com.google.gwt.sample.showcase.client.Showcase; 29 import com.google.gwt.sample.showcase.client.ShowcaseAnnotations.ShowcaseData; 30 import com.google.gwt.sample.showcase.client.ShowcaseAnnotations.ShowcaseSource; 31 import com.google.gwt.user.client.rpc.AsyncCallback; 32 import com.google.gwt.user.client.ui.AbsolutePanel; 33 import com.google.gwt.user.client.ui.Button; 34 import com.google.gwt.user.client.ui.DecoratorPanel; 35 import com.google.gwt.user.client.ui.FlexTable; 36 import com.google.gwt.user.client.ui.Grid; 37 import com.google.gwt.user.client.ui.HTML; 38 import com.google.gwt.user.client.ui.HorizontalPanel; 39 import com.google.gwt.user.client.ui.Image; 40 import com.google.gwt.user.client.ui.ListBox; 41 import com.google.gwt.user.client.ui.TextBox; 42 import com.google.gwt.user.client.ui.Widget; 43 44 import java.util.LinkedHashMap; 45 import java.util.Map; 46 47 /** 48 * Example file. 49 */ 50 public class CwAbsolutePanel extends ContentWidget { 51 /** 52 * The constants used in this Content Widget. 53 */ 54 @ShowcaseSource 55 public static interface CwConstants extends Constants { cwAbsolutePanelClickMe()56 String cwAbsolutePanelClickMe(); 57 cwAbsolutePanelDescription()58 String cwAbsolutePanelDescription(); 59 cwAbsolutePanelHelloWorld()60 String cwAbsolutePanelHelloWorld(); 61 cwAbsolutePanelItemsToMove()62 String cwAbsolutePanelItemsToMove(); 63 cwAbsolutePanelLeft()64 String cwAbsolutePanelLeft(); 65 cwAbsolutePanelName()66 String cwAbsolutePanelName(); 67 cwAbsolutePanelTop()68 String cwAbsolutePanelTop(); 69 cwAbsolutePanelWidgetNames()70 String[] cwAbsolutePanelWidgetNames(); 71 } 72 73 /** 74 * The absolute panel used in the example. 75 */ 76 private AbsolutePanel absolutePanel = null; 77 78 /** 79 * An instance of the constants. 80 */ 81 @ShowcaseData 82 private final CwConstants constants; 83 84 /** 85 * The input field used to set the left position of a {@link Widget}. 86 */ 87 @ShowcaseData 88 private TextBox leftPosBox = null; 89 90 /** 91 * The list box of items that can be repositioned. 92 */ 93 @ShowcaseData 94 private ListBox listBox = new ListBox(); 95 96 /** 97 * The input field used to set the top position of a {@link Widget}. 98 */ 99 @ShowcaseData 100 private TextBox topPosBox = null; 101 102 /** 103 * A mapping between the name of a {@link Widget} and the widget in the 104 * {@link AbsolutePanel}. 105 */ 106 @ShowcaseData 107 private Map<String, Widget> widgetMap = null; 108 109 /** 110 * Constructor. 111 * 112 * @param constants the constants 113 */ CwAbsolutePanel(CwConstants constants)114 public CwAbsolutePanel(CwConstants constants) { 115 super(constants.cwAbsolutePanelName(), 116 constants.cwAbsolutePanelDescription(), false); 117 this.constants = constants; 118 } 119 120 /** 121 * Initialize this example. 122 */ 123 @ShowcaseSource 124 @Override onInitialize()125 public Widget onInitialize() { 126 // Create a new panel 127 widgetMap = new LinkedHashMap<String, Widget>(); 128 absolutePanel = new AbsolutePanel(); 129 absolutePanel.setSize("250px", "250px"); 130 absolutePanel.ensureDebugId("cwAbsolutePanel"); 131 132 // Add an HTML widget to the panel 133 String[] widgetNames = constants.cwAbsolutePanelWidgetNames(); 134 HTML text = new HTML(constants.cwAbsolutePanelHelloWorld()); 135 absolutePanel.add(text, 10, 20); 136 widgetMap.put(widgetNames[0], text); 137 138 // Add a Button to the panel 139 Button button = new Button(constants.cwAbsolutePanelClickMe()); 140 absolutePanel.add(button, 80, 45); 141 widgetMap.put(widgetNames[1], button); 142 143 // Add a Button to the panel 144 Grid grid = new Grid(2, 3); 145 grid.setBorderWidth(1); 146 for (int i = 0; i < 3; i++) { 147 grid.setHTML(0, i, i + ""); 148 grid.setWidget(1, i, new Image(Showcase.images.gwtLogoThumb())); 149 } 150 absolutePanel.add(grid, 60, 100); 151 widgetMap.put(widgetNames[2], grid); 152 153 // Wrap the absolute panel in a DecoratorPanel 154 DecoratorPanel absolutePanelWrapper = new DecoratorPanel(); 155 absolutePanelWrapper.setWidget(absolutePanel); 156 157 // Create the options bar 158 DecoratorPanel optionsWrapper = new DecoratorPanel(); 159 optionsWrapper.setWidget(createOptionsBar()); 160 161 // Add the components to a panel and return it 162 HorizontalPanel mainLayout = new HorizontalPanel(); 163 mainLayout.setSpacing(10); 164 mainLayout.add(optionsWrapper); 165 mainLayout.add(absolutePanelWrapper); 166 167 return mainLayout; 168 } 169 170 /** 171 * Initialize the options panel after the {@link AbsolutePanel} has been 172 * attached to the page. 173 */ 174 @ShowcaseSource 175 @Override onInitializeComplete()176 public void onInitializeComplete() { 177 Scheduler.get().scheduleDeferred(new ScheduledCommand() { 178 public void execute() { 179 updateSelectedItem(); 180 } 181 }); 182 } 183 184 @Override asyncOnInitialize(final AsyncCallback<Widget> callback)185 protected void asyncOnInitialize(final AsyncCallback<Widget> callback) { 186 GWT.runAsync(CwAbsolutePanel.class, new RunAsyncCallback() { 187 188 public void onFailure(Throwable caught) { 189 callback.onFailure(caught); 190 } 191 192 public void onSuccess() { 193 callback.onSuccess(onInitialize()); 194 } 195 }); 196 } 197 198 /** 199 * Create an options panel that allows users to select a widget and reposition 200 * it. 201 * 202 * @return the new options panel 203 */ 204 @ShowcaseSource createOptionsBar()205 private Widget createOptionsBar() { 206 // Create a panel to move components around 207 FlexTable optionsBar = new FlexTable(); 208 topPosBox = new TextBox(); 209 topPosBox.setWidth("3em"); 210 topPosBox.setText("100"); 211 leftPosBox = new TextBox(); 212 leftPosBox.setWidth("3em"); 213 leftPosBox.setText("60"); 214 listBox = new ListBox(); 215 optionsBar.setHTML(0, 0, constants.cwAbsolutePanelItemsToMove()); 216 optionsBar.setWidget(0, 1, listBox); 217 optionsBar.setHTML(1, 0, constants.cwAbsolutePanelTop()); 218 optionsBar.setWidget(1, 1, topPosBox); 219 optionsBar.setHTML(2, 0, constants.cwAbsolutePanelLeft()); 220 optionsBar.setWidget(2, 1, leftPosBox); 221 222 // Add the widgets to the list box 223 for (String name : widgetMap.keySet()) { 224 listBox.addItem(name); 225 } 226 227 // Set the current item position when the user selects an item 228 listBox.addChangeHandler(new ChangeHandler() { 229 public void onChange(ChangeEvent event) { 230 updateSelectedItem(); 231 } 232 }); 233 234 // Move the item as the user changes the value in the left and top boxes 235 KeyUpHandler repositionHandler = new KeyUpHandler() { 236 public void onKeyUp(KeyUpEvent event) { 237 repositionItem(); 238 } 239 }; 240 topPosBox.addKeyUpHandler(repositionHandler); 241 leftPosBox.addKeyUpHandler(repositionHandler); 242 243 // Return the options bar 244 return optionsBar; 245 } 246 247 /** 248 * Reposition an item when the user changes the value in the top or left 249 * position text boxes. 250 */ 251 @ShowcaseSource repositionItem()252 private void repositionItem() { 253 // Get the selected item to move 254 String name = listBox.getValue(listBox.getSelectedIndex()); 255 Widget item = widgetMap.get(name); 256 257 // Reposition the item 258 try { 259 int top = Integer.parseInt(topPosBox.getText()); 260 int left = Integer.parseInt(leftPosBox.getText()); 261 absolutePanel.setWidgetPosition(item, left, top); 262 } catch (NumberFormatException e) { 263 // Ignore invalid user input 264 return; 265 } 266 } 267 268 /** 269 * Update the top and left position text fields when the user selects a new 270 * item to move. 271 */ 272 @ShowcaseSource updateSelectedItem()273 private void updateSelectedItem() { 274 String name = listBox.getValue(listBox.getSelectedIndex()); 275 Widget item = widgetMap.get(name); 276 topPosBox.setText(absolutePanel.getWidgetTop(item) + ""); 277 leftPosBox.setText(absolutePanel.getWidgetLeft(item) + ""); 278 } 279 } 280