Both prototype and scriptaculous are amazing tools and certainly make it easier to code JavaScript, but I miss a centralized approach for developing and making use of widgets. Therefor I have an idea: PSUI (Prototype & Scriptaculous User Interface). PSUI will make use of easy to use XML tags, which will be replaced by XHTML.

The idea is that you add a ‘render’ method to your Widget class, which receives one parameter: a node, which needs to be replaced by XHTML by your render method. As part of your Widget, you need to register your Widget with the PSUI class. The PSUI class initializes and starts when the browser is ready loading the page. As part of starting it will replace the XML tags.

Example: ContextMenu widget, which needs the following HTML:

<div id="contextmenu">
    <ul>
        <li><a href="#">Edit</a></li>
        <li><a href="#">Delete</a></li>
    </ul>
</div>

Possible XML could be:

<psui:contextmenu activator="rightclickme">
    <item url="#">Edit</item>
    <item url="#">Destroy</item>
</psui:contextmenu>

When the page loads, the PSUI class will replace the <psui:contextmenu> tag with XHTML and calls the ContextMenu class to initialize the context-menu.

The main advantages of PSUI are: No mixing of JavaScript in the XHTML and ease of use.

To allow the XHTML to validate we’ll need to add specific XML namespaces to the html declaration and maintain a schema file for all the XML tags. For this we need a centralized but modular approach and a site to put the schema on. Possibly this could host a Wiki with documentation and a developer / support forum as well.

To give this all a kickoff I quickly hacked together psui.org