This utility makes it easy to use the Yahoo! Query Language (YQL) from web pages.
YQL Execute gives the ability to execute JavaScript on Yahoo!'s platform, with a very powerful API to query the web.
We combine this new backend with client-side templating using Trimpath templates.
To use this utility, you will need to be familiar with the trimpath templates syntax and the yql api.
Furthermore, we provide an editor, based on YUI Grids CSS builder, to create pages from YQL code + trimpath templates.
Here is a custom example: example using a flickr query, YQL logging and diagnostics, and custom javascript handler.
Add YQL Execute code in script tags with a type set to "text/yql".
Add them at the end of your body tag ; This code will run on the Yahoo! YQL platform.
| 1 | <script type="text/yql"> |
| 2 | y.log("Hello World"); |
| 3 | var q = "select * from flickr.photos.search where text=\"juggler\""; |
| 4 | var query = y.query(q); |
| 5 | var json = y.xmlToJson(query.results); |
| 6 | y.log("Everything's fine"); |
| 7 | response.object = json; |
| 8 | </script> |
| view plain | print | ? |
Add templates in your code in script tags with a type set to "text/trimpath".
The result of this template will be inserted where the script tag is in the dom.
The src attribute must be set to the index of the YQL query ("#0" for the first query).
In your templates, the results are accessible through the "query" object.
| 1 | <script type="text/trimpath" src="#0"> |
| 2 | {for p in query.results.results.photo} |
| 3 | <a href="http://farm${p.farm}.static.flickr.com/${p.server}/${p.id}_${p.secret}_b.jpg"> |
| 4 | <img src="http://farm${p.farm}.static.flickr.com/${p.server}/${p.id}_${p.secret}_s.jpg"> |
| 5 | </a> |
| 6 | {/for} |
| 7 | </script> |
| view plain | print | ? |
You can add multiple template script tags at various places in your dom for the same YQL query.
You will also need to install the javascript dependencies : YUI utilities and json, the trimpath-template library, 3 files from inputEx + a line to run the trimpath page utility.
| 1 | <script type="text/javascript" src="../lib/yui/utilities/utilities.js"></script> |
| 2 | <script type="text/javascript" src="../lib/yui/json/json-min.js"></script> |
| 3 | <script type="text/javascript" src="../lib/trimpath-template-1.0.38.js"></script> |
| 4 | <script type="text/javascript" src="../js/inputex.js"></script> |
| 5 | <script type="text/javascript" src="../js/rpc/yql.js"></script> |
| 6 | <script type="text/javascript">YAHOO.util.Event.onDOMReady(inputEx.YQL.initTrimpathPage, inputEx.YQL, true);</script> |
| 7 | |
| view plain | print | ? |
You can also add custom javascript handlers for each query (You may want to use widgets for advanced visualization)
| 1 | YAHOO.util.Event.onDOMReady(function () { |
| 2 | // This is an example of an additionnal callback, to display a JsonTreeInspector widget from the yql response |
| 3 | var callback0 = function(results) { |
| 4 | new inputEx.widget.JsonTreeInspector('treeContainer', {query: results.query}); |
| 5 | }; |
| 6 | |
| 7 | // Call the yql-trimpath-page utility (with a list of callbacks for each "text/yql" script tag) |
| 8 | inputEx.YQL.initTrimpathPage([[callback0]]); |
| 9 | |
| 10 | }); |
| 11 | |
| view plain | print | ? |
We generate a YQL XML through: http://javascript.neyric.com/yql/. (like this one)
Then, we build a YQL query, to use this XML file : (actually the xml file is requested by YQL servers)
| 1 | use 'http://javascript.neyric.com/yql/js.php?code=y.log(%22test%22)' as t; |
| 2 | select * from t; |
| 3 | |
| view plain | print | ? |
We finally get the results of this query through JSON-P.
Enjoy !