Back to Tutorials

 

Contents 1 Flickr 1.1 Related Resources 1.2 How to use this Tutorial 1.3 Procedure

[edit] Flickr

In this tutorial you learn how to use Flickr to retrieve and save pictures. When you run the application and enter a search tag, Flickr returns a set of pictures that match your tag. You can click on each picture and see a larger version and you can drag pictures to build a favorites list.

Before performing this tutorial, you must obtain an API key from Flickr.

[edit] Related Resources

• For a detailed introduction to Bungee Builder, see the Introduction to Bungee Builder tutorial, which combines a guided tour of Bungee Builder with the Hello World tutorial.
• For documentation on Bungee Builder, see the Bungee documentation wiki.

[edit] How to use this Tutorial

This tutorial is written for developers that are somewhat familiar with the basics of Bungee Builder. If you would like more detailed steps on working inside Bungee Builder, check out the Introduction to Bungee Builder and Hello World Tutorial before proceeding with this tutorial.

Throughout this tutorial, there are links to reference documentation on Bungee concepts:

• Most numbered steps link to the relevant document on how to accomplish the given task. Use these links for more information on how to perform a given task (for example, how to add a class to a project).
• Beneath the steps are links to the relevant concept documents. Use these links for conceptual information on the object being used (for example, what is a class?).

[edit] Procedure

1. Create a new solution and TypeLib 

   (Concept: Understanding Solutions and Projects)

   1. Solution name: Flickr
   2. Project type: TypeLib
   3. Project name: Flickr
2. Add a class clsFlickrPics to the Flickr project

   (Concept: Understanding Classes)

   • Because you call a REST service, you must manually model the data that the service returns. Unlike SOAP-based services, REST services do not have definition files (WSDL files) that define the object type. Consequently, you manually create the class and fields for storing the data returned by the Flickr REST service. The Flicker API that you use is the flickr.photos.search API, which is documented on the Flickr Services page., which includes all the fields that you create for this class in the next few steps.
3. Add a form adapter to the TypeLib

   (Concept: Understanding Adapters and Connections)

   1. Name: PicturesElementForm
   2. Adapter Type: Form Adapter
4. Add 10 fields to the clsFlickrPics class (these fields correspond to the XML in the Flickr response)
   

     Note The type for the 10 fields in this step is string, the default field type.

   1. string id
   2. string medURL
   3. string owner
   4. string ownername
   5. string photo
   6. string secret
   7. string server
   8. string tags
   9. string thumbURL
   10. string title
5. Add a form to the clsFlickrPics class

   (Concept: Understanding Forms)

   1. Name: frmPicElement 
      1. Layout: 1 row x 1 column (settings: Layout > Flow = VerticalBox, Max Height = 100, Max Width = 75)
         1. Add MultilineLabel
            1. Binding: string thumbURL
            2. Under Style, select HTML
      2. Set Adapter List for frmPicElement to FormAdapter: PicturesElementForm.
6. Add a class named clsMain to the Flickr project
7. Add four fields to the clsMain class

   (Concept: Understanding Fields)

   1. Collection(clsFlickrPics): colFavoritePics (collection of your favorite pictures returned by Flickr)
      1. Type = clsFlickrPics (select Class: clsFlickrPics under TypeLib: Flickr)
      2. Select Is Collection
   2. Collection(clsFlickrPics): colPicList (collection of pictures returned by Flickr)
      1. Type = clsFlickrPics (select Class: clsFlickrPics under TypeLib: Flickr)
      2. Select Is Collection
   3. string searchTag (tag used for picture search)
      1. Type = string (the default type)
   4. clsFlickrPics selectedPic (currently selected picture from the collection)
      1. Type = clsFlickrPics (select Class: clsFlickrPics under TypeLib: Flickr)
8. Add a function to the clsMain class

   (Concept: Understanding Functions)

   1. Name: cmdGetFlickrPic
   2. Purpose: Makes the call to Flickr
9. Add a form and controls to the clsMain class

   (Concept: Understanding Forms)

   1. Name: frmMain
      1. Layout: 2 rows x 3 columns
         1. Top row, combine cells to make one long row.
            1. Add Horizontal Box
               1. Add Text Edit
                  1. Binding: searchTag
               2. Add Button
                  1. Binding: cmdGetFlickrPics
                  2. Button Label: Search Flickr
                  3. Select Default property
            2. Resize row (23 pixels high)
         2. Bottom row
            1. Left Column (width = 100 px)
               1. Add DynamicFormList 
                  1. Bound to colPicList
                  2. Element Form: PicturesElementForm (under Adapter)
                  3. Bind Selection (set Object selectedElement to clsFlickrPics selectedPic)
                     1. This is done by selecting the DynamicFormList and then clicking the green arrow on its upper-right corner and choosing Bind Selection.
                        
                     2. In the next screen, click Object selectedElement, and then in the Properties Editor, set Path to clsFlickrPics selectedPic
                     3. Select Linked
                        
            2. Center Column (width = 238 px)
               1. MultilineLabel
                  1. Bound to string medURL (found under clsFlickrPics selectedPic)
                  2. Under Style, select HTML
            3. Right Column (width = 100 px)
               1. DynamicFormList
                  1. Binding: colFavoritePics
10. Edit the clsMain Class

    (Concept: Understanding Bungee Logic)

    1. Expand public cmdGetFlickrPic
    2. Add five Var statements
       1. var XMLElement tmpPhoto 
          1. Name: tmpPhoto
          2. Type: Class: XMLElement (under TypeLib: Flickr > Dependencies > Runtime > TypeLib: Utility)
       2. var HTTP objHTTP=newHTTP
          1. Name: objHTTP
          2. Type: Class: HTTP (under TypeLib: Flickr > Dependencies > Runtime > TypeLib: Utility)
          3. Default Value: Set to Object
       3. var XMLDocObject objXMLDoc=new XMLDocObject
          1. Name: objXMLDoc
          2. Type: Class: XMLDocObject (under TypeLib: Flickr > Dependencies > Runtime > TypeLib: Utility)
          3. Default Value: Set to Object
       4. var string response
          1. Name: response
          2. Type: string 
       5. var XMLUtil xmlUtil=newXMLUtil
          1. Name: xmlUtil
          2. Type: Class: XMLUtil (under TypeLib: Flickr > Dependencies > Runtime > TypeLib: Utility)
          3. Default Value: Set to Object
    3. Add four call function () statements
       1. colPicList.removeAll(void)
          1. Type: Path
          2. Select  Function: removeAll (under Collection(clsFlickrPics): colPicList)

       2. objHTTP.returnGet('http://api.flickr.com/services/rest/?method=flickr.photos.search&per_page=25&api_key=apikey&text=' + searchTag (where apikey is the api key you received from Flickr))

          1. Type: Var
          2. Select Function: returnGet (under HTTP objHTTP)
          3. Parameters
             1. First parameter:
                1. Type: Expression
                2. Value: 'http://api.flickr.com/services/rest/?method=flickr.photos.search&per_page=25&api_key=apikey&text=' + searchTag (where apikey is the api key you received from Flickr)
             2. Second parameter:
                1. Type: Var
                2. Select string response

       3. objXMLDoc.readString(response)

          1. Type: Var
          2. Select Function: readString (under XMLDocObject objXMLDoc)
          3. First parameter:
             1. Type: Var
             2. Select string response

       4. objXMLDoc.root.getChild('photos',tmpPhoto)

          1. Type: Var
          2. Select Function: getChild (under XMLDocObject objXMLDoc > XMLElement root)
          3. Parameters
             1. First parameter:
                1. Type: Data
                2. Value: photos
             2. Second parameter:
                1. Type:Var
                2. Select XMLElement tmpPhoto
       5. Add collection iteration
          1. Type: Var (Collection property)
          2. Select Collection(XMLElement): children (under XMLElement tmpPhoto)
          3. Expand the collection iteration and add the following:
          4. Add a Var statement
             1. Name: tmpPhotoResponse
             2. Type: Class: FlickrPics (under TypeLib: Flickr)
          5. Add call function ()
             1. Type: Var
             2. Select Function: convertXMLToObject (under XMLUtil xmlUtil)
             3. Parameters
                1. First parameter:
                   1. Type: Var
                   2. Select XMLElement CurrentElement
                2. Second parameter:
                   1. Type: Type
                   2. SelectClass: clsFlickrPics (under TypeLib: Flickr)
                3. Third parameter:
                   1. Type: Var
                   2. Select clsFlickrPics tmpPhotoResponse
          6. Add assignment
             1. Left side:
                1. Type: Var
                2. Select string thumbURL (under clsFlickrPics tmpPhotoResponse )
             2. Right side:
                1. Type: Expression
                2. Value: "<center><img src='http://static.flickr.com/"; + tmpPhotoResponse.server + "/" + tmpPhotoResponse.id + "_" + tmpPhotoResponse.secret + "_m.jpg'><br>"
          7. Add assignment
             1. Left side:
                1. Type: Var
                2. Select string medURL (under clsFlickrPics tmpPhotoResponse)
             2. Right side:
                1. Type: Expression
                2. Value: "<center><img src='http://static.flickr.com/" + tmpPhotoResponse.server + "/" + tmpPhotoResponse.id + "_" + tmpPhotoResponse.secret + ".jpg'><br>"
          8. Add call function ()
             1. Type: Path
             2. Select Function: add (under Collection(clsFlickrPics): colPicList)
             3. Parameter
                1. First parameter:
                   1. Type: Var
                   2. Select tmpPhotoResponse
       6. Your class should look like this:
          
11. Enable Drag-and-Drop between the two DynamicFormList controls on frmMain

    (Concept: Understanding Controls)

    1. DynamicFormList (in left column) 
       1. Set Drag Zone (under Behavior) to pics/Copy
    2. DynamicFormList on right
       1. Set Drag Zone (under Behavior) to favReorder/move (this enables drag and drop reorder of pictures in the favorites list)
       2. Set Drop Zones (under Behavior) to:
          1. pics/copy
          2. favReorder/move
12. Run the form

    (Concept: Understanding Simulate)

13. Going Further

    Check the Flickr documentation for information on additional data available through the method you used in this tutorial. If you would like to capture additional data (geo, tabs, owner_name, etc.) just add the correct field to the clsFlickrPics class and name it to match the response from Flickr. To display the additional data, bind it to a control and add it to your form (frmPicElement).

    Flickr has many other methods you can try. See http://www.flickr.com/services/api/ for more information.