Summary¶

This example shows how to use YQL to get Flickr images from a Mojito application. YQL allows you to get data from many sources in the form of JSON, JSONP, and XML. For more information about YQL, see the YQL Guide. For this example, you will need to get a Flickr API key.

The following topics will be covered:

• forming a YQL statement to get Flickr photo information
• creating a model for your mojit to get data
• getting query string parameters with the Params addon
• calling the YQL Web service with the YQL Module of YUI

Implementation Notes¶

The following screenshot shows the grid of Flickr images retrieved by YQL.

<?xml version="1.0" encoding="UTF-8"?>
<query xmlns:yahoo="http://www.yahooapis.com/v1/base.rng"  yahoo:count="10" yahoo:created="2011-04-11T18:06:11Z" yahoo:lang="en-US">
  <results>
    <photo farm="6" id="5610093730" isfamily="0" isfriend="0" ispublic="1" owner="39177028@N02" secret="9d63f1859f" server="5022" title="Bert - Brighton Marathon 2011"/>
    <photo farm="6" id="5610093952" isfamily="0" isfriend="0" ispublic="1" owner="39177028@N02" secret="fded96fba7" server="5181" title="Bert - Brighton Marathon 2011"/>
    ...
  </results>
</query>

YUI.add('flickr', function(Y, NAME) {
  Y.namespace('mojito.controllers')[NAME] = {
    init: function(config) {
      this.config = config;
    },
    index: function(ac) {
      var q = ac.params.getFromUrl('q') || 'muppet',
      page = (ac.params.getFromUrl('page') || 0) / 1,
      count = (ac.params.getFromUrl('size') || 20) / 1,
      start = page * count;
      var model = ac.models.flickr;
      model.search (q, start, count, function(photos) {
      ac.done (
        {
          photos: photos,
          page: page,
          count: count,
          start: start
        });
      });
    }
  };
}, '0.0.1', {requires: []});

Setting Up this Example¶

To set up and run model_yql:

1. Create your application.

   $ mojito create app model_yql

2. Change to the application directory.

3. Create your mojit.

   $ mojito create mojit flickr

4. To specify that your application uses HTMLFrameMojit and the child flickr mojit, replace the code in application.json with the following:

   [
     {
       "settings": [ "master" ],
       "specs": {
         "frame": {
           "type": "HTMLFrameMojit",
           "config": {
             "deploy": true,
             "child": {
               "type": "flickr"
             },
             "assets": {
               "top": {
                 "css": [
                   "/static/flickr/assets/index.css"
                 ]
                }
              }
           }
         }
       }
     }
   ]
   

5. To configure the routing to call the index method an instance of HTMLFrameMojit, replace the code in routes.json with the following:

   [
     {
       "settings": [ "master" ],
       "_index": {
         "verbs": ["get"],
         "path": "/",
         "call": "frame.index"
       }
     }
   ]
   

6. Change to mojits/flickr.

7. Modify the mojit model to call YQL to get Flickr photos by creating the model models/model.server.js with the code below.

   YUI.add('flickrModel', function(Y, NAME) {
     // Replace '{your_flickr_api_key}' with your own Flickr
     // API key.
     var API_KEY = '{your_flickr_api_key}';
      Y.namespace('mojito.models')[NAME] = {
       init: function(config) {
         this.config = config;
       },
       getData: function(callback) {
         callback({some:'data'});
       },
       // Search for Flickr Images
       search: function (search, start, count, callback) {
         // Handle empty.
         if (null == search || 0 == search.length) {
           callback([]);
         }
         // Build YQL select.
         start /= 1; count /= 1;
         var select = 'select * from '+ 'flickr.photos.search ' + '(' + (start || 0) + ',' + (count || 20) + ') ' + 'where '+ 'text="%' + (search || 'muppet') + '%" and api_key="' + API_KEY + '"';
         // Execute against YQL
         Y.YQL (select, function(rawYql) {
           // Handle empty response.
           if (null == rawYql || 0 == rawYql.query.count) {
             callback ([]);
           }
           // Process data.
           var photos = [], item = null;
           // Force array.
           if ( !rawYql.query.results.photo.length ) {
             rawYql.query.results.photo = [
               rawYql.query.results.photo
             ];
           }
           // Assume array
           for (var i=0; i < rawYql.query.count; i++) {
             // Fix up the item.
             item = rawYql.query.results.photo[i];
             item.url = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '.jpg';
             item.title = (!item.title) ? search + ':' + i : item.title;
             // Attach the result.
             photos.push (
               {
                 id: item.id,
                 title: item.title,
                 url: item.url
               }
             );
           }
           callback (photos);
         });
       }
     };
   }, '0.0.1', {requires: ['mojito','yql']});
   

8. Get a Flickr API key and then replace the string '{your_flickr_api_key}' in your model with your API key.

   YUI.add('flickrModel', function(Y, NAME) {
     // Replace '{your_flickr_api_key}' with your own Flickr
     // API key.
     var API_KEY = '{your_flickr_api_key}';
     ...
   }
   

9. Modify the mojit controller to get data from the model by replacing the code in controller.server.js with the following:

   YUI.add('flickr', function(Y, NAME) {
   
     Y.namespace('mojito.controllers')[NAME] = {
       init: function(config) {
         this.config = config;
       },
       index: function(ac) {
         // Use aliases to params addon
         // if they exist.
         if(ac.params.hasOwnProperty('url')){
           var q =ac.params.url('q') || 'muppet',
               page = (ac.params.url('page') || 0) /1,
               count = (ac.params.url('size') || 20) /1;
         }else{
           var q =ac.params.getFromUrl('q') || 'muppet',
           page = (ac.params.getFromUrl('page') || 0) / 1,
           count = (ac.params.getFromUrl('count') || 20) / 1;
         }
         var start = page * count;
         var model = ac.models.flickrModel;
         model.search (q, start, count, function(photos) {
           ac.done (
             {
               photos: photos,
               page: page,
               count: count,
               start: start
             }
           );
         });
       }
     };
   }, '0.0.1', {requires: []});
   

10. Replace the contents of assets/index.css for the application’s CSS with the following:

    body {
      margin:0;
      padding:0;
    }
    .tile li {
      display:inline;
      border-style: none;
      margin:0;
      padding:0;
    }
    .tile img {
      height:80px;
      width:80px;
    }
    .tile a img {
      border:4px solid;
      -webkit-border-radius:6px;
      -moz-border-radius:6px;
      border-radius:6px;
      border-color:#000;
    }
    

11. Modify your index template by replacing the code in views/index.hb.html with the following:

    <div id="{{mojit_view_id}}" class="mojit">
      <ul class="tile">
      {{#photos}}
        <li><a href="{{url}}"><img src="{{url}}" alt="{{title}}"></a></li>
      {{/photos}}
      </ul>
    </div>
    

12. From the application directory, run the server.

    $ mojito start

13. To view your application, go to the URL below:

    http://localhost:8666

14. Get 50 Flickr photos using the search query “mojito” with the following URL:

    http://localhost:8666?q=mojito&size=50

Source Code¶

• Mojit Model
• Mojit Controller
• Flickr Application