Voices That Matter C O N F E R E N C E Google Web Toolkit
Total Page：16
File Type：pdf, Size：1020Kb
PALACE HOTEL SAN FRANCISCO DECEMBER 3-6, 2007 VOICES THAT MATTER CON F ERENCE GOOGLE WEB TOOLKIT The Premiere Google Web Toolkit FREE eBook Conference World Class Speakers including GWT co-creators Bruce Johnson and Joel Webber Network with the community using GWT to build dynamic, feature-rich Ajax Gold Sponsor applications Don’t miss this chance to learn from the best. Media Sponsors Register by October 27 and save $200! www.VoicesThatMatter.com/GWT2007 VOICES THAT MATTER C ONFEREN C E GOOGLE WEB TOOLKIT 2007 eBOOK CONTAINING EXCERPTS FROM THE FOLLOWING BOOKS: GOOGLE WEB TOOLKIT SOLUTIONS by David Geary and Rob Gordon GOOGLE WEB TOOLKIT APPLICATIONS by Ryan Dewsbury ScRIPTING IN JAVA by Dejan Bosanac AjAX SECURITY by Billy Hoffman and Bryan Sullivan ENTERPRISE AJAX by David Johnson, Alexei White, and Andre Charland THE DESIGN OF SITES by Douglas K. van Duyne, James A. Landay and Jason I. Hong EcLIPSE WEB TOOLS PLATFORM by Naci Dai, Lawrence Mandel and Arthur Ryman VOICES THAT MAttER: Google Web Toolkit Conference eBook Copyright 2008 Pearson Education, Inc. Published by: Pearson Education 800 East 96th Street Indianapolis, IN 46240 USA Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and Addison- Wesley and Prentice Hall were aware of a trademark claim, the designations have been printed with initial capital letters or in all capitals. NOT FOR RESALE ISBN: 0-13-2344815 BUY THE BOOK TODAY DRAFT MANUSCRIPT Books Available December 2007 This manuscript has been provided by Pearson Education at this early stage to create awareness for this upcoming book. IT HAS NOT BEEN COPYEdiTED OR PROOFREAD YET; we trust that you will judge this book on technical merit, not on grammatical and punctuation errors that will be fixed at a later stage. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form, or by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior consent of the publisher. All Pearson Education books are available at a discount for corporate bulk purchases. For information on bulk discounts, please call (800) 428-5531. 00_0132344815_FM.qxd 6/19/07 8:59 AM Page iii Google Web Toolkit Solutions More Cool & Useful Stuff David Geary with Rob Gordon Upper Saddle River, NJ • Boston • Indianapolis • San Francisco New York • Toronto • Montreal • London • Munich • Paris • Madrid Cape Town • Sydney • Tokyo • Singapore • Mexico City 00_0132344815_FM.qxd 6/19/07 8:59 AM Page xviii xviii Google Web Toolkit Solutions About the Authors David Geary is the author of eight books on Java technology, including the best- selling Graphic Java 2 Series, Advanced JavaServer Pages, and Core JavaServer Faces (all from Prentice-Hall). David was a member of Sun’s Expert Groups for the JavaServer Pages Standard Template Library (JSTL), and JavaServer Faces (JSF) 1.0. He also was the second Apache Struts committer and the inventor of the Struts Template Library, the precursor to the popular Tiles open-source framework for composing web pages from JSP fragments. David wrote questions for Sun’s Web Developer Certification Exam and is the president of Clarity Training Inc., a training and consulting company focusing on server-side Java technology. Rob Gordon is an independent consultant specializing in the design and implementa- tion of enterprise systems. He is a former Sun developer and author of Essential JNI and coauthor of Essential JMF. 04_0132344815_ch04.qxd 6/18/07 3:13 PM Page 103 SolutionSolution 1: Drag and Drop 103 4 Viewports and Maps When you start working with GWT, it doesn’t take long before you realize that the possibilities are endless. Pretty much anything you can implement in a desktop appli- cation with frameworks like Swing or the SWT is also possible with GWT. Swing provides a handy component known as a viewport, which serves as a port onto a larger view; thus the name. Viewports are handy for all sorts of things. For example, if you wanted to create a game with a scrolling background, you might use a viewport to show a portion of your background. As the game’s characters approach the edges of the viewport, you could scroll the underlying background to let those characters explore other portions of your game’s landscape. Another use for viewports is an increasingly popular component of many websites: mapping. Google led the way with Google Maps, and nowadays many websites incor- porate mapping; in fact, you can even create your own maps and share them with other web denizens at http://www.discovermachine.com. Games and maps are only two examples of the usefulness of viewports. Unfortunately, GWT does not provide a viewport out of the box, but fortunately GWT provides all of the necessary ingredients so that you can easily write your own basic viewport class in a 100 or so lines of pure Java code. That’s exactly what we’re going to do in this chapter. But that’s not all. Starting on page xxx, we show you how to incorporate user gestures in a viewport to animate the underlying view, similar to the scrolling lists found in Apple’s iPhone. Features such as that are typically reserved for desktop developer wizards (or cell phones from Apple), but when you’re done with this chapter, you’ll see that anyone can do the same with just a little math and GWT. Stuff You’re Gonna Learn This solution explores the following aspects of GWT: • Using the AbsolutePanel class to place widgets by pixel location (page xxx) • Dragging one widget inside another (page xxx) • Using an event preview to inhibit browser reactions to events (page xxx) 04_0132344815_ch04.qxd 6/18/07 3:13 PM Page 104 104 Google Web Toolkit Solutions • Capturing and releasing events for a specific widget (page xxx) • Changing cursors with CSS styles (page xxx) • Incorporating gestures in a viewport (page xxx) • Using GWT timers (page xxx) The final version of our Viewport class, listed in Listing 4.5 on page xxx, weighs in at close to 350 lines of heavily commented code. In that class, we pack a lot of GWT stuff; in fact, everything listed previously is contained in our Viewport class. Viewports Figure 4.1 illustrates a viewport. The top picture shows a viewport and a portion of the viewport’s underlying view. The bottom picture demonstrates viewport clipping, whereby the underlying view is clipped to the confines of the viewport, meaning that only the portion of the view contained in the viewport is visible. Figure 4.1 Viewports show a portion of a component that is larger than the viewport Figure 4.2 shows our example application, which implements an actual viewport with the map shown in Figure 4.1 as the underlying view. Figure 4.2 also shows a user dragging the map toward the top-left corner inside the viewport. 04_0132344815_ch04.qxd 6/18/07 3:13 PM Page 105 Solution 4: Viewports and Maps 105 Figure 4.2 Dragging a map contained in a viewport Mouse Cursors and Operating Systems Different operating systems use different representations of the pointer and move cursors, so when you run the sample application, the cursors may look a little different than what you see in Figure 4.2. Now that we’ve seen the example application for this solution, let’s see how it’s put Solution 4: Viewports and Maps together. A General-Purpose Viewport Widget The application shown in Figure 4.2, which is listed in Listing 4.1, is ridiculously sim- ple because we’ve encapsulated all the complexity in our viewport widget. Listing 4.1 com.gwtsolutions.client.Maps 1.package com.gwtsolutions.client; 2. 3.import com.google.gwt.core.client.EntryPoint; continues 04_0132344815_ch04.qxd 6/18/07 3:13 PM Page 106 106 Google Web Toolkit Solutions Listing 4.1 com.gwtsolutions.client.Maps continued 4.import com.google.gwt.user.client.ui.*; 5.import com.gwtsolutions.components.client.ui.Viewport; 6. 7.public class Maps implements EntryPoint { 8. 9. public void onModuleLoad() { 10. final Viewport mapViewport = new Viewport(); 11. 12. mapViewport.setView( 13. new Image(“images/land_ocean_ice.jpg”)); 14. 15. RootPanel.get().add(mapViewport); 16. } 17.} In the preceding listing, we create a viewport and set the view to an image showing land, water, and ice on planet Earth. Then we add the viewport to the application’s root panel, and we’re done. Before we look at the Viewport class, let’s briefly look at the files and directories con- tained in our application. The Map Application’s Files and Directories Our application’s associated files and directories are shown in Figure 4.3. Figure 4.3 The map application’s files and directories 04_0132344815_ch04.qxd 6/18/07 3:13 PM Page 107 Solution 4: Viewports and Maps 107 Notice that this application does not contain many files. We have the Maps class, which is our application, listed in Listing 4.1 on page xxx, a CSS stylesheet, and the map image. The Viewport class is not shown in Figure 4.3, because it resides in our Components module, which contains the custom components we developed for this book. The Viewport Implementation Now that we’ve seen the implementation of the example application and its accompa- nying files, let’s look at a first cut of the Viewport class, listed in Listing 4.2. Later on, in “A Viewport’s View with Animated Gestures” on page xxx, we discuss the final ver- sion of the Viewport class, which incorporates user gestures and view animation.