Display Picasa photos

See:

• how to get data from an URL
• parse XML documents
• build a GUI to display photos with Polymorph
• how to prototype quickly with debugger and inspector

Download screencast (800x600): .mpeg 16.7 MB, .mov 40.4 MB

Voice recorded by Christoph Budzinski.

View mobile version.




Picasa API documentation


Load XMLSupport:

Gofer new
    squeaksource: 'MetacelloRepository';
    package: 'ConfigurationOfXMLSupport';
    load.

ConfigurationOfXMLSupport load.

Final code:
Update 16/01/2012: the snippet is a little obsolete (see tongadall comment below). Now should be:

...
xmlDoc allElementsNamed: #entry do: 
              [:entry| |title photoUrl|
              title := (entry findElementNamed: #title) contentString.
              photoUrl := (entry findElementNamed: #content) attributeAt: #src.
...

|xmlStream xmlDoc photos builder|
xmlStream := 'http://picasaweb.google.com/data/feed/api/all?q=miles+davis&max-results=10' asUrl retrieveContents contentStream.
xmlDoc := XMLDOMParser parseDocumentFrom: xmlStream.

photos := OrderedCollection new.
xmlDoc tagsNamed: #entry do: 
              [:entry| |title photoUrl|
               title := (entry firstTagNamed: #title) characterData.
               photoUrl := (entry firstTagNamed: #content) attributeAt: #src.
               photos add: (PicasaPhoto new
                                   title: title;
                                   photoUrl: photoUrl)].

builder := UITheme builder.
(builder 
    newRow: (photos collect: 
                     [:aPhoto|  
                      builder newColumn: {
                         builder newImage: aPhoto asForm  size: 128@128.
                         builder newLabel: aPhoto title.}]))
extent: 500@400;
wrapDirection: #topToBottom;
openInWindow.

The Flickr version (Thanks Gary !)

| xmlStream xmlDoc photos builder clickBlock |
xmlStream := 'http://api.flickr.com/services/feeds/photos_public.gne?id=12018791@N06&lang=en-us&format=rss_200' asUrl retrieveContents contentStream.
xmlDoc := XMLDOMParser parseDocumentFrom: xmlStream.

photos := OrderedCollection new.
xmlDoc tagsNamed: #item do:
   [:item| | title thumbUrl photoUrl |
    title := (item firstTagNamed: #title) characterData.
    thumbUrl := ((item firstTagNamed: #media:thumbnail) attributeAt: #url) asUrl.
    photoUrl := ((item firstTagNamed: #media:content) attributeAt: #url) asUrl.
    photos add: title -> (Form fromBinaryStream: thumbUrl retrieveContents contentStream) -> photoUrl].

clickBlock := [:url :title | | scrollPane |
scrollPane := GeneralScrollPane new
 scrollTarget: (builder
 newImage: (Form fromBinaryStream: url retrieveContents contentStream)).
scrollPane openInWindow
 setLabel: title;
 extent: 600@400.
scrollPane color: Color transparent].

builder := UITheme builder.
((builder
  newRow: (photos collect:
                   [:aPhoto|
                    (builder
   newButtonFor: clickBlock
   getState: nil
   action: #value:value:
   arguments: {aPhoto value. aPhoto key key}
   getEnabled: nil
   label: ((builder newColumn: {
     builder newImage: aPhoto key value.
     builder newLabel: aPhoto key key})
     cellPositioning: #center;
     layoutInset: 10)
   help: nil)]))
wrapDirection: #topToBottom;
openInWindow)
 setLabel: (xmlDoc firstTagNamed: #title) characterData;
 extent: 700@680.