BirdShowA Lift App for Showing Flickr Photos

Topics

● Organizing photos with Flickr● Using Flickr’s Web services● Fetching and parsing XML from Scala● Binding an XHTML page to a code “Snippet”

with Lift

Note: BirdShow is open source, but the photos shown here are copyright Eleanor Briccetti

How BirdShow Came to Be

● Mom wanted a better way to show photos on BriccettiPhoto.com

● She had many on Flickr already● Easy to upload and organize photos on Flickr● Flickr has Web services● So, let’s make an open source Web app with

Scala and Lift!

Flickr Photo Organization

● Users● Users have collections and sets

● Collections● Contain other collections, and sets

● Sets● Contain photos

A Quick Tour of the Result

● Home page● Galleries● Shows

Home Page

● Randomly shows one of several photos from the “Home” Flickr set

Galleries Page

● Each gallery is a Flickr set● The sets are pulled from a collection called

“Selected”

A Gallery

● Selecting a gallery shows all the photos in the gallery

Larger Photo

● Clicking a photo shows a larger version of the photo

Shows Page

● Photos are pulled from a Flickr set, “Shows”

Flickr Web Services

● http://www.flickr.com/services/api/

Sample Flickr Results

BirdShow Main Parts

● Flickr.scala: Singleton interface to Flickr Web services

● XmlFetcher.scala: makes HTTP get requests to Flickr and loads the resulting XML

● Photo, PhotoSet.scala: hold photo info● Snippets (Scala code to support the xhtml

pages)● Home, Galleries, Shows

● JavaScript● birdshow.js allows showing bigger version of photos

Configuration

● web.xml context-params provide the Web site information

Flickr.scala

XmlFetcher.scala

Photo and PhotoSet Classes

Binding With a Snippet, Home Page

JavaScript to Show Big Pictures Using jQuery

Acknowledgements

● Code reviewers● Timothy Perrett● Indrajit Raychaudhuri● Alex Boisvert

● Financial support● Eleanor Briccetti

Photography

Summary

● Sample implementation● http://BriccettiPhoto.com

● Source code● http://github.com/dcbriccetti/bird-show

● Dave Briccetti● Twitter @dcbriccetti● http://davebsoft.com