Dr. Dobb's Journal - January 2008 - (Page 30) d01burn_p4ma 11/9/07 10:41 AM Page 30 Core Technology HANDS-ON GOOGLE WEB TOOLKIT Listing Three private void calcImagePosition(int imageIdx, int[][] whlt, int offsetWidth, int offsetHeight, boolean addToPanel, boolean animateAdd) { if (imageIdx = images.length) { return; // Stopping recursion once we reach the first or last image } // Calculating image's width/height based on its distance from center. int distFromCenter = Math.abs(selIdx - imageIdx); int maxWidth = (int)((offsetWidth*.6)/(distFromCenter+1)); int maxHeight = (int)((offsetHeight*.6)/(distFromCenter+1)); int[] wh = scaleImage(dtos[imageIdx].width, dtos [imageIdx].height, maxWidth, maxHeight); int width = wh[0]; int height = wh[1]; Figure 4: You can see a few images before and after the current one. Click on any image to move to it or press the browser’s Back button to go back to the last picture selected. continued from page 28 // Calculating image's top position so it's always centered on viewport int top = (offsetHeight / 2) - (height / 2); // Calculating image's left position so 45% of its width pokes out int left; if (imageIdx selIdx) { int xDiff = (int)(width*.55); left = whlt[imageIdx-1][LEFT] + whlt[imageIdx-1][WIDTH] - xDiff; } else { // centering middle image left = (getOffsetWidth() / 2) - (width / 2); } whlt[imageIdx] = new int[] { width, height, left, top }; // Recursive calls to calc positions for images on the left and/or right if (imageIdx = selIdx) { calcImagePosition(imageIdx+1, whlt, offsetWidth, offsetHeight, addToPanel, animateAdd); } // // // if Adding images to the panel. This happens on the initial load and on window resize events. If the user is just clicking between images, they are already on the panel so we don't need to add them. (addToPanel) { images[imageIdx].setWidth(width + "px"); images[imageIdx].setHeight(height + "px"); // The first time we load, we'll use the Scriptaculous grow effect // for any images that are in the viewport. if (animateAdd && inViewport(left, images[imageIdx].getWidth())) { images[imageIdx].setVisible(false); images[imageIdx].addLoadListener(new LoadListener() { public void onLoad(Widget sender) { Effect.grow(sender, new EffectOption[] { new EffectOption("duration", LOAD_DURATION)}); } public void onError(Widget sender) { showErrorMessage(); } }); } // Last added are on top, so we add from the outside in. this.add(images[imageIdx], left, top); Because the URL is changing in the browser bar, a nice side effect is that bookmark support comes for free. Users returning to the site will see the exact same state of the application where they bookmarked it. Figure 4 is the completed application. Conclusion JavaScript is the new Assembly language. Google Web Toolkit lets you create Ajax programs in Java and compile them into browserspecific JavaScript, hiding most of the browser quirks that unnecessarily complicate Ajax development. Using GWT, you can create highly interactive applications that run on all major browsers with no plug-ins. Most importantly, you can do it with a portable, object-oriented language and mature tools that you already know. References A live demo of GWTFlow and source code is available at www.adamhoughton.com/ GWTFlow. Here are a few resources to help you learn more about GWT: • The GWT homepage is at code.google .com/webtoolkit. • The GWT team blog is available at googlewebtoolkit.blogspot.com. • The GWT Forum is at groups.google .com/group/Google-Web-Toolkit. • The GWT Widget Library is at gwt-widget .sourceforge.net. • Ed’s book Google Web Toolkit: Taking the Pain Out of Ajax is available at pragmaticprogrammer.com/titles/ebgwt. • Robert Hanson and Adam Tacy’s book GWT in Action book is available at www.manning.com/hanson. • GWT Designer is at www.instantiations .com/gwtdesigner. DDJ 30 Dr. Dobb’s Journal l www.ddj.com l January 2008 } } Listing Four private void animateMove(Widget widget, int left, int top, double dur) { Effect.move(widget, new EffectOption[] { new EffectOption("mode", "absolute"), new EffectOption("x", left), new EffectOption("y", top), new EffectOption("duration", dur)} ); } Listing Five public AlbumDTO[] getFlickrAlbums(String username) throws IOException, SAXException, FlickrException { Flickr flickr = FlickrUtil.getInstance(); // Access Flickr using API key PeopleInterface people = flickr.getPeopleInterface(); User user = people.findByUsername(username); PhotosetsInterface photoSets = flickr.getPhotosetsInterface(); Collection sets = photoSets.getList(user.getId()).getPhotosets(); AlbumDTO[] albums = new AlbumDTO[sets.size()]; Iterator iter = sets.iterator(); for (int i = 0; i < albums.length; i++) { Photoset set = (Photoset) iter.next(); albums[i] = new AlbumDTO(); // Custom POJO w/Album metadata albums[i].id = set.getId(); albums[i].name = set.getTitle(); albums[i].description = set.getDescription(); albums[i].imageCount = set.getPhotoCount(); albums[i].smallSquareUrl = set.getPrimaryPhoto().getSmallSquareUrl(); } return albums; } http://www.adamhoughton.com/GWTFlow http://www.adamhoughton.com/GWTFlow http://code.google.com/webtoolkit http://code.google.com/webtoolkit http://googlewebtoolkit.blogspot.com http://groups.google.com/group/Google-Web-Toolkit http://groups.google.com/group/Google-Web-Toolkit http://gwt-widget.sourceforge.net http://gwt-widget.sourceforge.net http://pragmaticprogrammer.com/titles/ebgwt http://www.manning.com/hanson http://www.instantiations.com/gwtdesigner http://www.instantiations.com/gwtdesigner http://www.ddj.com
For optimal viewing of this digital publication, please enable JavaScript and then refresh the page. If you would like to try to load the digital publication without using Flash Player detection, please click here.