Yahoo! UI on App Engine

May 22, 2008

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="https://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="https://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…

About these ads

12 Responses to “Yahoo! UI on App Engine”

  1. pfmagic Says:

    Donut sliders are child’s play. Creating a feral pumpkin slider would be impressive, but a donut…

  2. boldlentil Says:

    OK you challenge me to move beyond donut sliders to feral pumpkin sliders? Fine, here it is:

    http://1boldlentil.appspot.com/feral-pumpkin-slider

    (I even did it as a PNG instead of a GIF )

  3. pfmagic Says:

    Nice.

    Why is a PNG a ping? Why can’t is be a pong or a pang or a puh-nug?

  4. boldlentil Says:

    Yeah well I did prep for this comment by checking the PNG page at:

    http://www.libpng.org/pub/png/

    where they helpfully note that:

    “Portable Network Graphics – An Open, Extensible Image Format with Lossless Compression

    (Not Related to Papua New Guinea, the Pawnee National Grassland,
    the Professional Numismatists Guild or the “Pack ‘N’ Go” format)”


  5. [...] Bold Lentil shows you how to get YUI working on the Google App Engine: The Google App Engine, Google’s new cloud-computing platform, is framework-agnostic on the JavaScript side, so if YUI is your framework of choice you’ll be happy to see this quick tutorial from Bold Lentil that shows you how to get a YUI-driven donut slider (and, alas, a feral pumpkin slider) going in the Google environment. [...]

  6. TJB Says:

    Thank you so much for all your work here.
    Not to be ungrateful but are you posting the code without the cut of so we can see it?

  7. boldlentil Says:

    tjb

    yeah there is some weird formatting going on with the paste into the blog post. still trying to figure out how to get around it – in the mean time I think if you copy and paste to a new text doc everything should be there.

    bl

  8. Nora Says:

    Hi, I wonder if you have any code regarding using the YUI TreeView with Google appengine (using AJAX techniques)…
    Thank you very much.

  9. boldlentil Says:

    I’ve experimented with the TreeView code locally but didn’t upload it to app-engine. Wouldn’t expect it to be that much different than the slider – put the JavaScript in your /static directory and then when constructing the page with python include the code in the right place.

    bl

  10. Nora Says:

    Yes, u r right. But, I need to use the connection manager to send asynchronous requests when a certain node of the tree is clicked and get the data to be displayed from the google server. So, for example, how can I send the label of the node clicked to Google Appengine server? what would my http request look like and how to send back some text information?

    Thank you,
    Nora

  11. Nora Says:

    But, I need to use the connection manager to send asynchronous requests when a certain node of the tree is clicked and get the data to be displayed from the google server. So, for example, how can I send the label of the node clicked to Google Appengine server? what would my http request look like and how to send back some text information?

    Thank you,
    Nora

  12. Raffi Says:

    Hi,
    Your post is useful. I am trying to integrate YUI into my GAE site. The background images of the styles in CSS are not getting loaded. Can you please share the slidebar appspot code somewhere and provide the link?

    Thanks,
    Raffi


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: