nextwebgen.com

The Next Generation Web Now

GWTFlow

Filed under: Web 2.0 News — Dion Almaer at 6:45 am on Wednesday, October 31, 2007

Adam Houghton was viewing some comments on the Mac Web Gallery and inspiration came for him to implement the coverflow pattern in JavaScript.

His weapon of choice was GWT, and thus GWT Flow was born.

GWTFlow uses standard GWT widgets for positioning the images and callouts to Script.aculo.us for the effects. All of the photos are just Image objects placed on an AbsolutePanel, with a little math behind the scenes to determine positioning & simulate perspective. Albums & images are retrieved via RPC calls to a Java service, which then calls out to Flickr’s public API using flickrj. GWT made development & debugging a breeze, with history & cross-browser support basically coming for free. Not being a JavaScript expert, this would have been a nightmare for me to build by hand and expect it to work on Internet Explorer, Firefox, and Safari.

As a 0.1 release, there are obviously some bugs. Performance is dependent on the client machine; everything runs smoothly on my workstation, but the effects are a little jumpy on my laptop and downright ugly on my iPhone (poor 620mhz ARM processor). Larger photo albums also degrade performance. There’s a known bug where some Flickr accounts aren’t getting loaded properly, possibly due to spaces in the username. In future versions, I’d like to add Picasa support, more options for navigating through photos (keyboard, slider, etc), and integration with Adam Tacy’s gwt-fx effects library. I’d also like to angle the images & add reflections to make it more like Cover Flow, but I’m a little worried about hurting performance.

UPDATE: Whoops, we forgot to give this entry a title. Comments now work.

Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages.
  • blogmarks
  • del.icio.us
  • De.lirio.us
  • digg
  • NewsVine
  • YahooMyWeb

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>