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