[OpenAjaxIDE] Some hacky code to illustrate how an IDE can support mashable widgets

Tue Sep 9 05:05:41 PDT 2008

I did some cleanup on the wiki page. If you looked at the wiki page
previously, please refresh to see the updated version.

Jon

I noticed that the email isn't very readable upon delivery, so I put the
contents of the email onto the wiki at the following location:

* http://www.openajax.org/member/wiki/20080908_MashableWidgets

The code snippets are more readable there.

Jon

Inactive hide details for Jon Ferraiolo/Menlo Park/IBM at IBMUSJon
Ferraiolo/Menlo Park/IBM at IBMUS

                         Jon                                               
                         Ferraiol                                          
                         o/Menlo                                           
                         Park/IBM                                          
                         @IBMUS                                         To 
                         Sent by:                                          
                         ide-boun          ide at openajax.org                
                         ces at open                                          
                         ajax.org                                       cc 

                         09/08/20                                  Subject 
                         08 02:49                                          
                         PM                [OpenAjaxIDE] Some hacky code   
                                           to illustrate how an IDE can    
                                           support mashable widgets        

In the past couple of phone calls, there has been some verbal handwaving
about how it is possible for a design-time page authoring scenario, such as
Dreamweaver, to support "mashable widgets" where a widget designed to work
in a mashup scenario can also work in the IDE scenario.

Stew has attempted to express how this might work verbally during the phone
calls. Wayne pointed out to me today that there is a diagram that
reinforces some of the comments that Stew has been making. The diagram is
at:

* http://www.openajax.org/member/wiki/Gadget_Loading

(Look at the diagram titled "Trusted Widget, statically added to the
assembly canvas".)

To supplement that picture, I have pulled together some really ugly code
that I hope will illustrates the concepts more concretely. Let's suppose
you have two mashable widgets defined in OpenAjax Metadata that look
something like this:

WIDGET #1: Has a "Publish" button that broadcasts a 'foo' event on OpenAjax
Hub 1.1

<widget xmlns="..." ... >
 <content>
     <p><input type="button" value="Publish"
onclick="__WID__.wrapper.getHubConnectionHandle().publish('foo','some
string');"/></p>
 </content>
</widget>

WIDGET #2: Listens to the 'foo' event and shows the string it receives

<widget xmlns="..." ... >
 <content>
    <p>Value is: <span id="val2"></span></p>
 </content>
 <javascript location="atEnd">
   var connHandle = this.wrapper.getHubConnectionHandle();
   connHandle.subscribe('foo', function() {}, function(subhandle, topic,
data) {
       document.getElementById('val2').innerHTML = data;
   });
 </javascript>
</widget>

I hacked together an HTML page that simulates what an IDE can do such that
the publish() and subscribe() calls will work and the widgets can
communicate with each other using the APIs defined in the OpenAjax Hub 1.1
spec. The page actually works if you put the OpenAjax.js file in the same
directory as the HTML page.

<html>
<head>
<!-- THE IDE INSERTS THE FOLLOWING TWO SCRIPT TAGS AT THE TOP OF THE PAGE
WHENEVER
    THE PAGE USES ANY MASHABLE WIDGETS -->
<script type="text/javascript" src="OpenAjax.js"></script>
<script type="text/javascript">
function OpenAjaxWrapper() {}
OpenAjaxWrapper.prototype.connHandle = {
publish: function(topic, data) {
OpenAjax.hub.publish(topic, data);
},
subscribe: function(topic, callback, eventCallback) {
// Needs work. eg to deal with 'callback'
OpenAjax.hub.subscribe(topic, function(topic,pubdata,subdata) {
// Marshall from Hub 1.0 APIs to Hub 1.1 APIs
eventCallback({},topic,pubdata);
});
}
}
OpenAjaxWrapper.prototype.getHubConnectionHandle = function() {
return this.connHandle;
}
// SORRY, NO SAMPLE CODE FOR THESE APIS
OpenAjaxWrapper.prototype.registerCallback = function(type, listener) {}
OpenAjaxWrapper.prototype.unregisterCallback = function(type, listener) {}
OpenAjaxWrapper.prototype.getAvailableDimensions = function() {}
OpenAjaxWrapper.prototype.getDimensions = function() {}
OpenAjaxWrapper.prototype.adjustDimensions = function() {}
OpenAjaxWrapper.prototype.getPropertyValue = function() {}
OpenAjaxWrapper.prototype.setPropertyValue = function() {}
OpenAjaxWrapper.prototype.getSupportedViews = function() {}
OpenAjaxWrapper.prototype.requestNavigateTo = function() {}
function OpenAjaxWidget() {
this.wrapper = new OpenAjaxWrapper();
}
</script>
</head>
<body>
<!-- simulated widget 1 -->
<div>
<script type="text/javascript">
/* THIS SCRIPT TAG IS INSERTED BY IDE */
_wid001 = new OpenAjaxWidget();
</script>
<p><input type="button" value="Publish"
onclick="_wid001.wrapper.getHubConnectionHandle().publish('foo','some
string');"/></p>
</div>
<!-- simulated widget 2 -->
<div>
<script type="text/javascript">
/* INSERTED BY IDE */
_wid002 = new OpenAjaxWidget();
</script>
<p>Value is: <span id="val2"></span></p>
<script type="text/javascript">
_wid002.atEnd = function() { // THIS WRAPPER IS INSERTED BY IDE
var connHandle = this.wrapper.getHubConnectionHandle();
connHandle.subscribe('foo', function() {}, function(subhandle, topic, data)
{
document.getElementById('val2').innerHTML = data;
});
}
_wid002.atEnd();  // INSERTED BY IDE
</script>
</div>
</body>
</html>

In the above code, I have done about 1/20th of the work that needs to be
done. For example, it is missing logic for registerCallback() and
setPropertyValue() and even the pub/sub features are only partly
implemented. However, I hope that the code shows the approach that can be
taken.

Maybe we can walk through this email at tomorrow's phone call.

Jon

_______________________________________________
IDE mailing list
IDE at openajax.org
http://openajax.org/mailman/listinfo/ide
_______________________________________________
IDE mailing list
IDE at openajax.org
http://openajax.org/mailman/listinfo/ide
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://openajax.org/pipermail/ide/attachments/20080909/4b0c8ad3/attachment-0001.html 
-------------- next part --------------
A non-text attachment was scrubbed...
Name: graycol.gif
Type: image/gif
Size: 105 bytes
Desc: not available
Url : http://openajax.org/pipermail/ide/attachments/20080909/4b0c8ad3/attachment-0003.gif 
-------------- next part --------------
A non-text attachment was scrubbed...
Name: 1F189609.gif
Type: image/gif
Size: 45 bytes
Desc: not available
Url : http://openajax.org/pipermail/ide/attachments/20080909/4b0c8ad3/attachment-0004.gif 
-------------- next part --------------
A non-text attachment was scrubbed...
Name: 1F932100.gif
Type: image/gif
Size: 1255 bytes
Desc: not available
Url : http://openajax.org/pipermail/ide/attachments/20080909/4b0c8ad3/attachment-0005.gif 