Bugzappy's Blog

Yesterday (august 31, 2009) the OpenAjax Alliance announced in a press release the immediate availability of javascript technology for securely integrating javascript code (widgets) from untrusted sources into your own web pages (and javascript code). It’s called OpenAjax Hub 2.0 and it is touted as the enabler of secure mashups.

There is a very similar initiative at Microsoft: websandbox at Microsoft livelabs. I have no idea if these are one and the same initiatives, or competitors, or somewhere in the middle.

My prediction is that beyond mashups and many other fantastic applications, this kind of technology will at last make the Semantic Web a reality. Why? because now data and its closely associated code (just like an object in OOP) can safely travel together from any source to any web application. The code is what gives the data some meaning even when the “mashup” does not know the semantics.  As long as we can apply this idea to as *small* a piece of data as we (architects and developers) want, we can build web 3.0.

As a result of this new technology, expect the start of a very dynamic phase of web 2.0 advances.

Read the OpenAjax Hub 2.0 Specification here.

It’s a barebones plugin that acts purely as a browser-side widget controller, it does not come with canned HTML/CSS. You must pass the id’s of the <div> or other elements you want to control to the plugin.

The widget is just a box which starts with a limited height, and then can be expanded by the user by a specified increment, or collpased entirely.

Try a DEMO:

The CODE for the above example:

<div style="border: 1px solid #ff0000; width: 200px;">
<div id="demo_box" style="padding: 10px; overflow: hidden; width: 200px; max-height: 80px;">
<p>AAAAAAA$lt;/p>
<p>BBBBBBBB$lt;/p>
<p>CCCCCCC$lt;/p>
<p>DDDDDDD$lt;/p>
<p>EEEEEEEE$lt;/p>
<p>FFFFFFFF$lt;/p>
</div>
<div id="demo_expand"
    style="color: #ff0000; cursor: pointer; width: 100px; height: 20px; float: left; text-align: left;">+</div>
<div id="demo_collapse"
    style="color: #ff0000; cursor: pointer; width: 100px; height: 20px; float: left; text-align: right;">-</div>
</div>

<script type="text/javascript"><!--
document.write(unescape("%3Cscript src='http://www.bugzappy.com/js/jquery.js' type='text/javascript'%3E%3C/script%3E"));
document.write(unescape("%3Cscript src='http://www.bugzappy.com/wp-content/uploads/2009/04/jqueryexpandbox.js' type='text/javascript'%3E%3C/script%3E"));
// --></script>

<script type="text/javascript"><!--
var $j = jQuery.noConflict();
$j("#demo_box").expandBox('#demo_expand', '#demo_collapse', {shrunkHeight: 80, expandHeightInc: 40, expandText: 'expand', expandDelay: 100, shrinkText: 'collapse'});
// --></script>

DOWNLOAD: jquery.expandbox.js

A bit of documentation coming later.