First, thank you for having built modules for our previous API. The new API may have a steep learning curve, but we believe the advantages are truly worth it.

The major change to notice is that widgets are now based upon static files (nothing dynamic, like PHP or ASP.NET), and that all your data should be fetched and sent through Ajax calls. Therefore, your default BODY markup should be little more than <p>Loading…</p> or a basic XHTML skeleton, and all your data should be built into your markup using JavaScript and DOM mehtods.

This shouldn't be a problem if your module already makes use of such methods for your module, but this will require a major reworking of your module - and some module, like those which do not work directly with a Web service, may not be able to make the transition.

The first change to make is on your server side files. Your main widget file should not be dynamic, and should not make any direct link to other server side files. Basically, where your module used common web site files, the new API requires you to serve your content as a Web service, using XML or JSON. This is a good thing.

While your data where display directly inside the module, through an SQL request most assuredly, those same data should be made available using XML or JSON, rather than in plain XHTML.

For the JavaScript part, we advise to jump into ”Using JavaScript and Ajax in a UWA widget”. ”How to make sure my widget works / is a valid UWA widget?” also features the basics. But JavaScript-wise, you should keep in mind that the new API deprecates all NV_* functions, replacing them with UWA equivalents, through the widget object:

• NV_ONLOAD = function() { … } becomes widget.onLoad = function() { … }
• NV_ONREFRESH = function() { … } becomes widget.onRefresh = function() { … }
• NV_TITLE is deprecated
• NV_CONTENT becomes widget.body
• NV_TITLE.innerHTML = 'foo'; becomes widget.setTitle('foo');
• NV_CONTENT.innerHTML = 'bar'; becomes widget.setBody(bar);
• setValue(name, value) becomes widget.setValue(name, value);
• getValue(name) becomes widget.getValue(name);

Also, remember to ALWAYS declare your variables using the var keyword. For instance:

• var displayContent = function() { … } rather than displayContent = function() { … }
• var action = “view” rather than action = “view”

This is really important to insure widgets don't overstep each other's variables.

You are now ready to discover what makes a UWA widget, and delve into our HOWTOs.