An ideal AJAX toolkit (part 2)

In my previous posts ( The ideal AJAX toolkit and JSON data islands) I presented some suggestions for creating an AJAX toolkit. Here is a proof-of-concept demo that illustrates some of the ideas discussed in the articles.

First, see the tooltip demo (only tested with Firefox so far)

Here is the corresponding markup:


The implementation follows the MVC pattern, respecting the separation between View, Model and Controller.

View

• <cpsskins:tooltip> represents the "widget" (the view with presentation options)
• The "showdelay" option means that the tooltip will appear after 1 second ('mouseover'), and it will disappear after 500ms ('mouseout').
• The duration of the fade-in / fade-out effect is not currently configurable.
• Widgets are local -- they are active only in the page area in which they are located -- which means that two different tooltips may be used on the same page as shown on the demo.

Model

• <![CDATA[...] ]> is the data used by the widget (the actual model)
• "hint" is the text to display.
•  the data could easily be cached, the CDATA artefact is only used to extract data from the HTML page.

Controller

in this example the controller is entirely private, the only events being "mouseover" and "mouseout", they are not available publically. Which means that the tooltip's behaviour is "hardcoded". 

Next step: contextual menus

The next step is to port the contextual menu currently implemented using a modified version of PDLib. You may have noticed that not many AJAX toolkits offer contextual menus. In fact they are quite difficult to implement because:

• the content of the menu will change depending on where the user clicks (since it is contextual)
• some of the menu items may need to be dynamically generated ("on-the-fly")
  
• from a UI perspective sub-menus and sub-submenus ought to be supported
• menu items ought to be generated on the client without calling the server.

However they are very useful.