Solution 1: Drag and Drop i Google™ Web Toolkit Solutions This page intentionally left blank 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 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 the publisher was aware of a trademark claim, the designations have been printed with initial capital letters or in all capitals. The authors and publisher have taken care in the preparation of this book, but make no expressed or implied warranty of any kind and assume no responsibility for errors or omissions. No liability is assumed for incidental or consequential damages in connection with or arising out of the use of the information or programs contained herein. The publisher offers excellent discounts on this book when ordered in quantity for bulk purchases or special sales, which may include electronic versions and/or custom covers and content particular to your business, training goals, marketing focus, and branding interests. For more information, please contact: U.S. Corporate and Government Sales (800) 382-3419 [email protected] For sales outside the United States, please contact: International Sales [email protected] Visit us on the Web: www.prenhallprofessional.com Library of Congress Cataloging-in-Publication Data: Geary, David M. Google Web toolkit solutions : more cool & useful stuff / David Geary with Rob Gordon. p. cm. ISBN 0-13-234481-5 (pbk. : alk. paper) 1. Ajax (Web site development technology) 2. Java (Computer program language) 3. Google. I. Gordon, Rob. II. Title. TK5105.8885.A52G43 2007 006.7’6—dc22 2007021607 Copyright © 2008 Pearson Education, Inc. All rights reserved. Printed in the United States of America. This publication is protected by copyright, and permission must be obtained from the publisher prior to any prohibited reproduction, storage in a retrieval system, or transmission in any form or by any means, electronic, mechanical, photocopying, recording, or likewise. For information regarding permissions, write to: Pearson Education, Inc Rights and Contracts Department 501 Boylston Street, Suite 900 Boston, MA02116 Fax (617) 671 3447 ISBN-13: 978-0-13-234481-4 ISBN-10: 0-13-234481-5 Text printed in the United States on recycled paper at RR Donnelley in Crawfordsville, Indiana First printing November 2007 Acquisitions Editor Proofreader Greg Doench Water Crest Publishing Development Editors Editorial Assistant Sheri Cain Michelle Housley Chris Zahn Interior Designer Managing Editor Louisa Adair Gina Kanouse Cover Designer Senior Project Editor Chuti Prasertsith Kristy Hart Senior Compositor Indexer Gloria Schurick Heather McNeill This page intentionally left blank vii Contents Foreword xiii Preface xvi Acknowledgments xviii About the Authors xix Solution 1 GWT Fundamentals and Beyond 1 In This Book 1 Stuff You’re Going to Learn 3 Introduction to GWT Widgets 4 Anatomy of a GWT Application 7 User Interfaces Composed with GWT Panels 8 The Root Panel 10 The user.client.ui API 11 Widget Styling with CSS Styles 12 Event-Driven Programming with GWT 14 Internationalization and Localization 18 Implementing the Four Steps for GWT Internationalization 19 Using GWT’s i18nCreator Command 22 A New “View” in Your GWT Web Application 23 GWT’s History Mechanism 26 Adding the History Class and History Listeners 27 Handling the Browser’s Back Button 30 GWT’s Peers: DOM Elements 32 Use of Deferred Commands to Give Widgets Keyboard Focus 32 Remote Procedure Call Implementation 34 Custom Widget Use 40 Custom Widget Packaging in GWT Modules 43 The Complete Login Application 47 Stuff We Covered in This Solution 52 viii Google Web Toolkit Solutions Solution 2 JavaScript Integration 53 Stuff You’re Going to Learn 53 The Script.aculo.us JavaScript Library Integration 54 Importing a JavaScript File in Your HTMLFile 61 Importing a JavaScript File in Your GWT Configuration File 63 A JavaScript Calendar Integration 64 Stuff We Covered in This Solution 69 Solution 3 Custom Widget Implementation 71 Stuff You’re Going to Learn 71 Composite Custom Widgets 72 Composite Widgets and Pass-Through Methods 88 Event Handlers 89 The Text Box’s Keyboard Listener 89 The List Box’s Keyboard Listener 90 The List Box’s Click Listener 90 Firing Change Events 90 Implementing the HasText and HasName Interfaces 90 Incorporating the Script.aculo.us Blind Down Effect 91 A Low-Level Custom Widget 95 Using the DOM Class in a Low-Level Custom Widget 99 Setting Default CSS Styles for a Custom Widget 99 Parameterizing Script.aculo.us Effects in a Custom Widget 99 Stuff We Covered in This Solution 100 Solution 4 Viewports and Maps 103 Stuff You’re Going to Learn 103 Viewports 104 A General-Purpose Viewport Widget 105 The Map Application’s Files and Directories 106 The Viewport Implementation 107 Using an Instance of AbsolutePanel to Place Widgets at Pixel Locations 110 Dragging the View Inside the Viewport 110 ix Using a Focus Panel to React to Mouse Events 110 Using an Event Preview to Inhibit the Browser’s Default Reaction to Mouse Events 111 Capturing Events 111 Clipping the Viewport’s View 111 Changing the Mouse Cursor with CSS Styles 112 Adding a Default CSS Style Name for a Custom Widget 112 The Viewport’s Use of a Focus Panel: Revisited 115 A Viewport’s View with Animated Gestures 117 The Final Version of the Viewport 120 Incorporating the Drag Gesture 129 Animating Scrolling in Response to the Drag Gesture 129 Animating Scrolling in the Same Direction as the Drag Gesture 129 Varying the Speed of the Scrolling Animation 130 Stuff We Covered in This Solution 131 Solution 5 Access to Online Web Services 133 Stuff You’re Going to Learn 133 Yahoo! Maps Web Service 134 Exploring the Example Application 134 Summarizing the Map Application’s Files and Directories 138 Implementing the YahooMaps Application 139 Access to Yahoo!’s Web Service 146 Zoom! 151 Stuff We Covered in This Solution 164 Solution 6 Drag and Drop 167 Stuff You’re Going to Learn 167 The Drag-and-Drop Example Application 168 The Drag-and-Drop Module 170 Inheriting the Drag-and-Drop Module in an Application’s Configuration File 172 Implementation of the Drag-and-Drop Application 173 Using the Music Player and Shopping Cart Panel Components 174 Using Drag Sources and Drop Targets 176