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

Jon Ferraiolo jferrai at us.ibm.com
Mon Sep 8 14:49:07 PDT 2008



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

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://openajax.org/pipermail/ide/attachments/20080908/ef1d2d66/attachment-0001.html 


More information about the IDE mailing list