Yahoo! UI on App Engine

The Yahoo! User Interface Library or YUI is a handy collection of JavaScript for DOM scripting, DHTML and AJAX applications. And since JavaScript along with Python is one of the languages for Google’s App Engine, it’s useful to look at how hard it is to use the Yahoo! UI library on App Engine.

At least to throw together a simple donut slider.

To get started look at the starter page on the YUI slider page. Download the minimum slider components which is some JavaScript, some images files and some CSS. In your /static/js directory you’ll want to add dragdrop-min.js, slider-min.js and yahoo-dom-event.js. Then you’ll have to code up a simple the-slider.js file which looks like the example but contains arrays for the link titles and the link urls. This JavaScript should also include a function to update the div with the dynamic content, in this case referred to as endvalue, when the slideEnd is triggered.

slider.subscribe("slideEnd", function() {
  YAHOO.log("slideEnd fired", "warn");
  var endvalue = Dom.get(contentarea);
  var i = slider.getRealValue();
  if (i < minPosts) i = minPosts;
  if (i > maxPosts) i = maxPosts;
  endvalue.innerHTML = '';
  for (j = 0; j < 10; j++)
    {
      if ((i+j) < maxPosts) {
        endvalue.innerHTML += '<a class="rt" href="' + theURLs[i+j] + '" target="_blank">' + theTitles[i+j] + '</a><br>';
     }
  }
});

Next up you can optionally update the graphics for your slider. The default .gif files are in an /assets folder. In this I added a donut image for the knob. You can use anything you want just remember to update your app.yaml file or it won’t work.

- url: /assets/
  static_dir: static/assets

Next use the .css file (path also added to the app.yaml) and finally add another class to the python code to create the page. In this case add a class sliderPage that maps to /slider and import the javascript, css and some default urls and titles. That’s it. Pretty straightforward.

class sliderPage(webapp.RequestHandler):
  def get(self):
    self.response.headers['Content-Type'] = 'text/html'
    self.response.out.write('<script src="/js/yahoo-dom-event.js"></script>')
    self.response.out.write('<script src="/js/dragdrop-min.js"></script>')
    self.response.out.write('<script src="/js/slider-min.js"></script>')
    self.response.out.write('<link rel="stylesheet" type="text/css" href="/css/s.css" />')
    self.response.out.write('<script src="/js/the-slider.js"></script>')
    self.response.out.write('')
    self.response.out.write('<p><table> <tr> <td>Older</td> <td>')
    self.response.out.write('<div id="slider-bg" tabindex="-1" title="Slider">')
    self.response.out.write('<div id="slider-thumb"><img src="/assets/thumb-n.gif"></div>')
    self.response.out.write('</div> </td> <td>Newer</td> </tr> </table>')
    self.response.out.write('')
    self.response.out.write('<p><div id="the-content">')
    self.response.out.write('<a class="rt" href="http://boldlentil.wordpress.com/2007/05/05/hello-world/" target="_blank">Remembering Gerald</a><br>')
   (... other starting titles and urls here... )
    self.response.out.write('</div>')
    self.response.out.write('<p>-<p>')
    self.response.out.write('<a class="rt" href="http://boldlentil.wordpress.com/" target="_blank">Bold Lentil</a><br>')
    self.response.out.write('')
    self.response.out.write('</html>')

Now what would be handy would be a /sstatic or shared static directory for assets, like the donut slider, to be shared across all my future applications…

Tags: ajax, App Engine, donut slider, yui