Developing WW Ajax Widgets

This page is intended for WW developer not for WW users. If your a user of WW hopefully you dont need to know these details, but certainly more knowledge is better, so if your hungry eat up!

The WW ajax/dhtml components use the DOJO Toolkit for both javascript event handling and AJAX calls.

To understand the widget framework this page is a must read:
http://dojotoolkit.org/docs/fast_widget_authoring.html

To understand the dojo event framework which is used extensively by the widget framework read this:
http://dojotoolkit.org/docs/dojo_event_system.html

OK Great so your smart on DOJO Widgets and DOJO Events lets see how WW uses these.

Lets start with looking at what a user of WW would include in their page, a JSP in this case:

<ww:a
        id="link1"
        theme="ajax"
        href="/AjaxRemoteLink.action"
        showErrorTransportText="true"
        errorText="An Error ocurred">Update</ww:a>

This is just a standard WW component. All the attributes defined here must map to a component class thats defined in the taglib.tld. Were not going to go into how the WW componets work in this discussion, just be assured that nothing different happens here.

Now lets look at what this snippet of code would generate for us in html:

<a dojoType="BindAnchor" evalResult="true" id="link1" href="/ajax/AjaxRemoteLink.action" errorHtml="An Error ocurred" showTransportError="true">Update</a>

Lets review this file. The dojoType type tells the dojo parser what to do with this tag. This is going to need to correspont to a call in our widge file like:
dojo.widget.tags.addParseTreeHandler("dojo:BindAnchor");
All the other attributes are basically passthrough from our component code to our widget code. No real magic happening w/ them.

Next up lets look at some snippets of the widget file:

webwork.widgets.HTMLBindAnchor = function() {
//lots removed for clarity
	this.widgetType = "BindAnchor";
	this.templatePath = dojo.uri.dojoUri("webwork/widgets/BindAnchor.html");
//lots removed
		self.anchor.href = "javascript:{}";

		dojo.event.kwConnect({
			srcObj: self.anchor,
			srcFunc: "onclick",
			adviceObj: self,
			adviceFunc: "bind",
			adviceType: 'before'
		});
		
//snippet removed		
    }

}


// make it a tag
dojo.widget.tags.addParseTreeHandler("dojo:BindAnchor");