Mashup Guide » Google AJAX Libraries API http://blog.mashupguide.net A blog about Raymond Yee's Book Pro Web 2.0 Mashups: Remixing Data and Web Services Wed, 23 Feb 2011 13:35:50 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 http://blog.mashupguide.net http://blog.mashupguide.net/favicon.ico Mashup Guide Learning about JavaScript libraries using the Google Ajax Libraries API http://blog.mashupguide.net/2008/11/25/113/ http://blog.mashupguide.net/2008/11/25/113/#comments Tue, 25 Nov 2008 17:22:50 +0000 raymond.yee http://blog.mashupguide.net/?p=113 In Chapter 8 of my mashup book, I wrote Ideally there would be one obvious choice for an excellent JavaScript library, and everyone would use it. The current situation is that there are many JavaScript libraries, and it is not at all obvious how they compare. I was hoping that in the course of writing [...]]]>

In Chapter 8 of my mashup book, I wrote

    Ideally there would be one obvious choice for an excellent JavaScript library, and everyone would use it. The current situation is that there are many JavaScript libraries, and it is not at all obvious how they compare.

I was hoping that in the course of writing my book, I would have had an opportunity to do my in-depth study of various JavaScript libraries (of which there are many, judging from the table in the Wikipedia entry Comparison of JavaScript frameworks). I raised the question of how to choose a JavaScript library during a panel on OpenAjax as a way of studying the implications of such initiatives as OpenAjax -- that is, does OpenAjax make it easier to figure out what JavaScript library to choose -- or does it allow one to pick and choose the best parts from a whole range of libraries? These are questions I plan to raise in my spring 2009 Mixing and Remixing Information course.

At any rate, I recently had a chance to take a closer look at AJAX Libraries API - Google Code, which is "a content distribution network and loading architecture for the most popular, open source JavaScript libraries", which at present, include:

  • jQuery
  • jQuery UI
  • Prototype
  • script.aculo.us
  • MooTools
  • Dojo
  • SWFObject
  • Yahoo! User Interface Library (YUI)

From a pedagogical point of view, the Google AJAX Libraries API, by providing a single common library call (google.load) simplifies getting set up with each of the libraries, which otherwise, would require a different setup. Of course, there are reasons that you might not want to depend on Google to host JavaScript libraries you use -- but not having to take care of hosting these files yourself helps beginners jump right in.

I'm pleased to see that The Yahoo! User Interface Library (YUI) recently became part of the Google API. I use that library in my course and in my book. The post on Google AJAX Search API Blog announcing this inclusion gave a short code example on how to use YUI with the Google AJAX Libraries API -- it did not actually show any visible in the user interface. Here I show to elaborate the example slightly to actually show something visible in the UI.

To do so, you should take look at the YUI docs for the calendar widget and understand a bit about what the YUILoader (Yahoo! UI Library: YUI Loader Utility does. One thing to note is that google.load('yui', '2.6.0'); creates an instance of a global YAHOO object. Secondly, YUILoader takes care of loading the pieces of YUI required to use the widget that you want to use -- see Getting Started for more details. You will also want to load in the default CSS to get started (through the line <body class="yui-skin-sam">). The modified code I came up with is:

<head>
  <script src="http://www.google.com/jsapi" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">
  google.load('yui', '2.6.0');
  function init() {
    var loader = new YAHOO.util.YUILoader({
      require: ["button", "calendar"],
      base: "http://ajax.googleapis.com/ajax/libs/yui/2.6.0/build/",
      onSuccess: function() {
        // start playing with buttons and calendars!
        var cal = new YAHOO.widget.Calendar("calContainer");
        cal.render();
      }
    });
    loader.insert();
  }
  google.setOnLoadCallback(init);
  </script>
</head>
<body class="yui-skin-sam">
  <div id="calContainer"></div>
</body>

which you can run at http://labs.mashupguide.net/doc/2008/11/google.ajaxlib.yui.eg.html

]]> http://blog.mashupguide.net/2008/11/25/113/feed/ 1