The Naked Technologist

In July of 2009 I gave a talk at a JavaScript meetup called Bayjax. This talk covered the topic of Browser MVC using YQL and YUI as the technology backbone and went into an overview of YQL.

URL’s for the tabs can be found at http://speakerrate.com/talks/1281-coupling-yql-and-yui-to-build-dynamic-visualization-widgets

A slide breakdown of the content discussed in this talk may be found at http://www.slideshare.net/jcleblanc/bayjax-july-2009-browser-mvc-with-yql-yui

No Comments | In: Events, PHP, Videos, YQL, YUI | tags: Conferences, JavaScript, YQL, YUI. | #

One of the tasks that I have been working on lately has been to create front-end JavaScript visualizations of YQL query results. What I ended up doing was creating a generic JavaScript include that uses YUI for some of the data parsing. Using this method, I set up a system where a developer could just include this JavaScript file, set up a few configuration variables and then a nice visualization widget would be displayed.

You can see a sample of the widget by going here: http://www.liquidmediatech.com/php_widget/yql_php_widget.html

Here’s what the full configuration for the widget looks like:

<!-- widget file include -->
<script type="text/javascript" src="yql_php_widget.js"></script>

<style>
div#badgeContainer{ padding:0 5px; font:bold 14px arial,helvetica,sans-serif; color:#f0f0f0; }
div#badgeContainer img{ float:left; margin-right:8px; margin-top:3px; border:0; }
div#badgeContainer span{ font-weight:normal; font-size:12px; }
div#badgeContainer a{ text-decoration:none; color:#f0f0f0; }
div#badgeContainer a:hover{ text-decoration:underline; }
div#widgetContainer{ background-color:#474747; width:300px; padding:5px 0; }
div#widgetContainer div.iconBox{ width:17px; height:16px; float:left; }
div#widgetContainer div.widgetRow{ padding:5px; background-color:#509cd1; border:1px solid #8fc5eb; margin:5px; overflow:hidden; }
div#widgetContainer div.widgetRow, div#widgetContainer div.widgetRow a{ color:#f0f0f0; font:11px arial,helvetica,sans-serif; }
div#widgetContainer div.widgetRow a{ font-weight:bold; }
</style>

<div id="widgetContainer"></div>

<script type="text/javascript">
var config = {'badge':true, 'num_results':10, 'debug':true};
var format = '<div class="widgetRow"><a href="{link}" target="_blank"><div style="background-color:#fff;border:2px solid #8fc5eb;width:20px;height:20px;float:left;margin-right:4px;"><img src="{loc_iconURL}" width="16" height="16" style="border:0;padding:2px;" /></div></a> <a href="{link}" target="_blank">{loc_longForm}</a><br />' + '{lastUpdated}</div>';
var yqlQuery = 'select lastUpdated, link, loc_iconURL, loc_longForm, profile_nickname, profile_profileUrl, publishedTime from social.updates where guid=me | sort(field="lastUpdated") | reverse()';
var insertEl = 'widgetContainer';
yqlWidget.push(yqlQuery, config, format, insertEl);
yqlWidget.render();
</script>

I have full documentation and the code base to set up this example on my github account at http://github.com/jonleblanc/yql-utilities/tree/master.

For a more in depth explanation of what was built out with this tool take a look at my post on the YUI blog at http://www.yuiblog.com/blog/2009/06/17/yui-and-yql/

- Jonathan LeBlanc

No Comments | In: Programming, YQL, YUI | tags: PHP, Programming, widgets, YQL, YUI. | #