header

Change tag content

Top div

• Change top div content getDivContent RESPONSE
• Clear top div content clearDivContent RESPONSE
• Copy top div content to bottom copyFromDivContent RESPONSE
• Copy bottom div content to top copyToDivContent RESPONSE
• Move bottom div content to top moveToDivContent RESPONSE

Bottom div

Javascript Styling

This page defines a link in the header which rel attribute points to a .kss resource file on the server : see the kss file here.

This .kss file declares CSS selectors associated with events and server URLs called when the event occur.

A javascript engine processes the XML content : it inserts javascript events in the DOM.

For instance, the click event of button with the id change will call asynchronously the getDivContent URL.

Server Asynchronous Call

The events associated with Javascript just call the server asynchronously.

The response is a XML file. The XML contains CSS selectors associated with commands.

The Javascript engine selects the DOM nodes to which it applies each command.

For instance, let's look at the moveToDivContent response.

   
<kukit xmlns="http://www.kukit.org/commands/1.1">
<commands>
<command selector="div#copy" name="copyChildNodesTo"
         selectorType="">
    <param name="html_id">demo</param>
</command>
<command selector="div#copy" name="clearChildNodes"
         selectorType="">
</command>
</commands>
</kukit>
   

The XML specifies two commands to apply to the div#copy node :

copyChildNodesTo copies the children of the DOM node to the node with id demo.

clearChildNodes removes the children of the DOM node.