21
BirdShow A Lift App for Showing Flickr Photos

BirdShow: A Lift App for Showing Flickr Photos

Embed Size (px)

DESCRIPTION

A look at features and code of BirdShow, an open source Scala/Lift Web application for showing pictures stored on Flickr. The first user is Eleanor Briccetti Photography, http://BriccettiPhoto.com.

Citation preview

Page 1: BirdShow: A Lift App for Showing Flickr Photos

BirdShowA Lift App for Showing Flickr Photos

Page 2: BirdShow: A 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

Page 3: BirdShow: A Lift App for Showing Flickr Photos

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!

Page 4: BirdShow: A Lift App for Showing Flickr Photos

Flickr Photo Organization

● Users● Users have collections and sets

● Collections● Contain other collections, and sets

● Sets● Contain photos

Page 5: BirdShow: A Lift App for Showing Flickr Photos

A Quick Tour of the Result

● Home page● Galleries● Shows

Page 6: BirdShow: A Lift App for Showing Flickr Photos

Home Page

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

Page 7: BirdShow: A Lift App for Showing Flickr Photos

Galleries Page

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

“Selected”

Page 8: BirdShow: A Lift App for Showing Flickr Photos

A Gallery

● Selecting a gallery shows all the photos in the gallery

Page 9: BirdShow: A Lift App for Showing Flickr Photos

Larger Photo

● Clicking a photo shows a larger version of the photo

Page 10: BirdShow: A Lift App for Showing Flickr Photos

Shows Page

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

Page 11: BirdShow: A Lift App for Showing Flickr Photos

Flickr Web Services

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

Page 12: BirdShow: A Lift App for Showing Flickr Photos

Sample Flickr Results

Page 13: BirdShow: A Lift App for Showing Flickr Photos

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

Page 14: BirdShow: A Lift App for Showing Flickr Photos

Configuration

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

Page 15: BirdShow: A Lift App for Showing Flickr Photos

Flickr.scala

Page 16: BirdShow: A Lift App for Showing Flickr Photos

XmlFetcher.scala

Page 17: BirdShow: A Lift App for Showing Flickr Photos

Photo and PhotoSet Classes

Page 18: BirdShow: A Lift App for Showing Flickr Photos

Binding With a Snippet, Home Page

Page 19: BirdShow: A Lift App for Showing Flickr Photos

JavaScript to Show Big Pictures Using jQuery

Page 20: BirdShow: A Lift App for Showing Flickr Photos

Acknowledgements

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

● Financial support● Eleanor Briccetti

Photography

Page 21: BirdShow: A Lift App for Showing Flickr Photos

Summary

● Sample implementation● http://BriccettiPhoto.com

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

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