Author: A. Sundararajan, http://sundararajan.tripod.com
Reviewers: Bimal Shah; Dhana Suresh

A proposal for Dynamic XML without DOM & Scripts

In dynamic web pages, the content and/or appearance of the web page varies with time. Currently, dynamic web pages (DHTML) are created using HTML DOM & Scripting. For example, if we want to change a image '3' seconds after the initial rendering, we may write


	<!-- for Microsoft Internet Explorer 4.x & above -->
	<html>
	<head>
	<script>	
	
	function change_image()
	{
		<!-- change the logo -->
		document.all('logo').src = 'car.gif';
	}
	
	</script>
	</head>

	<body onLoad='setTimeout("change_image()", 3000)'>
		<img src='apple.gif' id='logo'></img>
	</body>

	</html>

The disadvantages with this approach are

Knowledege of scripting & DOM is essential for writing dynamic web pages.
HTML editors/tools generate script/DOM for dynamic web pages. But script generated by one tool can't be processed by other tools. Specialized HTML comments are embedded by tools to even re-edit the HTML/JavaScript generated by the same tool.

In this proposal, we consider the possibility of tag based, declarative, dynamic XML documents. Though this proposal considers HTML examples, the proposal is not specific to HTML documents. It is applicable to all XML documents.

What is a Dynamic XML Document?

A dynamic XML document is a document whose content and/or appearance varies with time. At a XML document level, dynamism involves changing an attribute or an element or text content of an element, at some time 't'.

For example, in a HTML document, we may want to change src attribute of a img tag, '2' seconds after initial rendering. Or we may remove a paragraph (p) element at '8' seconds.

In this proposal, we introduce a set of new tags (elements) & attributes for dynamism. These new elements will be called "Dynamic XML commands". These commands are assumed to be in a namespace, whose label is dxml. The URI of this namespace is not specified here.

Dynamic XML commands

Dynamic XML ("DXML") commands are applied on a document to change it. All DXML commands have a time attribute. The value of the time attribute specifies the time at which that command has to be applied on the document. The time is specified in seconds.

Changing attributes

Changing an attribute of an element involves

inserting a new attribute
deleting an existing attribute
replacing current value of an existing attribute with a new value

These operations can be specified by the following elements.

insertAttribute

purpose

This command is used to insert a new attribute to an existing element.

syntax

	<dxml:insertAttribute 
		time="time_at_which_this_command_has_to_be_applied"
		element="id_of_an_element"
		attribute="name_of_attribute"
		value="value_for_the_attribute"
	/>

element attribute identifies the element in which the attribute is inserted. Value of this attribute should be id of some element defined already.
attribute attribute specifies the name of the attribute to be inserted.
value attribute specifies the value of the attribute.

example

In the following HTML fragment

	<p id="para">
	This is a paragraph
	</p>

we can "center" align the paragraph by

	<dxml:insertAttribute
		time="8"
		element="para"
		attribute="align"
		value="center"
	/>

deleteAttribute

purpose

This command is used to delete an attribute of an element.

syntax

	<dxml:deleteAttribute
		time="time_at_which_this_command_has_to_be_applied"
		element="id_of_an_element"
		attribute="name_of_attribute_to_delete"
	/>

element attribute identifies the element from which the attribute is deleted. Value of this attribute should be id of some element defined already.
attribute attribute specifies the name of the attribute to be deleted.

example

In the following HTML fragment

	<img src="apple.gif" id="logo"></img>

we can delete the src attribute by

	<dxml:deleteAttribute
		time="14"
		element="logo"
		attribute="src"
	/>

replaceAttribute

purpose

This command is used to change the value of an attribute of an element.

syntax

	<dxml:replaceAttribute 
		time="time_at_which_this_command_has_to_be_applied" 
		element="id_of_an_element" 
		attribute="name_of_attribute"
		value="value_for_the_attribute"
	/>

element attribute identifies the element whose attribute is modified. Value of this attribute should be id of some element defined earlier.
attribute attribute specifies the name of the attribute to be modified.
value attribute specifies the new value of the attribute.

example

In the following HTML fragment

	<img src="apple.gif" id="logo">
	</img>

we can replace the image at time "3" seconds by

	<dxml:replaceAttribute
		time="3"
		element="logo"
		attribute="src"
		value="car.gif"
	/>

Changing elements

Changing an element involves

inserting a new element
deleting an existing element
replacing an element by a new element

insertElement

purpose

This command is used to insert a new element to the document.

syntax

	<dxml:insertElement
		time="time_at_which_this_command_has_to_be_applied"
		parent="id_of_the_parent_element_to_which_this_element_is_inserted" 	
		position="position_at_which_this_insertion_occurs"
	>
		<!-- definition of new element goes here -->
	</insertElement>

position attribute specifies index at which the new child element has to inserted. Position has to be specified as one-based index.
parent attribute specifies the element to which the new element is inserted as a child.

Alternative syntax for dxml:insertElement command is


	<dxml:insertElement
		time="time_at_which_this_command_has_to_be_applied"
		before="id_of_element_before_which_new_element_is_inserted"
		after="id_of_element_after_which_new_element_is_inserted"
	>
		<!-- definition of new element goes here -->
	</dxml:insertElement>

here we specify place of insertion by either before or after attribute.

before attribute identifies the peer element before which the new element is inserted.
after attribute identifies the peer element after which the new element is inserted.

One of { before, after, position } should be present in insertElement to locate the place of insertion.

example

In the HTML fragment

	<ul id="subjects">
	<li id="physics">Physics</li>
	<li>Chemistry</li>
	</ul>

we can insert a new list item before Physics at time 18 by

	<dxml:insertElement
		time="18"
		parent="subjects"
		position="1"
	>
		<li>Biology</li>
	</dxml:insertElement>

Or equivalently

	<dxml:insertElement
		time="18"
		before="physics"
	>
		<li>Biology</li>
	</dxml:insertElement>

new element definition from a URL

In the above syntax of insertElement command, the newly inserted element is specified inside the insertElement command (inline). Sometimes it would be better to specify the newly inserted element as a fragment (subtree) of some other XML document. For example, all images may be located in a "images.htm" and more than one dynamic document can refer to the img elements in it.

syntax

	<dxml:insertElement
		time="time_at_which_this_command_has_to_be_applied"
		parent="id_of_the_parent_element_to_which_this_element_is_inserted" 	
		position="position_at_which_this_insertion_occurs"
		href="URL_of_the_new_element_block"
	/>

Or equivalently

	<dxml:insertElement
		time="time_at_which_this_command_has_to_be_applied"		
		href="URL_of_the_new_element_block"
	/>

where the href attribute specifies the URL of the new element definition. If the URL does not have a fragment identifier part, then document root element pointed by URL is inserted. The fragment identifier part of URL, if present, should refer to id attribute of some element in the referred document. This is different from HTML URL fragment identifers where the it specifies name attribute of anchor - a element in the referred document.

example

HTML fragment from car.htm

	<img src="car.gif" id="car"></img>

HTML fragment from main.htm

	<p id="images">
	<img id="apple" src="apple.gif"></img>
	</p>

Now, the following DXML command

	<dxml:insertElement 
		time="34"
		before="apple"
		element="car.htm#car"
	/>

will insert car element from car.htm into current document before the element apple. The fragment identifier car refers to id of car img element.

deleteElement

purpose

This command is used to delete an existing element.

syntax

	<dxml:deleteElement
		time="time_at_which_this_command_has_to_be_applied"
		element="id_of_an_element"
	/>

where value of the element attribute is the id of the element that is deleted.

example

In the following HTML fragment

	<!-- HTML code here -->
	<p id="joke">
	This is a joke.
	</p>
	<!-- more HTML code here -->

we can delete the "joke" paragraph at time "6" by

	<dxml:deleteElement
		time="6"
		element="joke"
	/>

replaceElement

purpose

This command is used to replace an existing element with a new element. This is in effect deleting the old element and inserting the new element at the same location.

syntax

	<dxml:replaceElement
		time="time_at_which_this_command_has_to_be_applied"
		element="id_of_the_element_to_be_replaced"
	>
		<!-- new element definition here -->
	</dxml:replaceElement>

	<dxml:replaceElement
		time="time_at_which_this_command_has_to_be_applied"
		element="id_of_the_element_to_be_replaced"
		href="URL_of_the_new_element_block"
	/>

example

In the HTML fragment

	<ul>
	<li>red</li>
	<li>green</li>
	<li id="blue">blue</li>
	</ul>

we can replace blue by orange using

	<dxml:replaceElement
		time="34"
		element="blue"
	>
		<li id="orange">orange</li>
	</dxml:replaceElement>

Replacing the entire document

Replacing the entire document by new document is nothing but replacing the document element. But this is specified by a special syntax using dxml:replaceDocument. This is equivalent to "refresh" feature of HTML.

syntax

	<dxml:replaceDocument
		time="time_at_which_this_command_has_to_be_applied"
	>
		<!-- new document definition here -->
	</dxml:replaceDocument>

Or specify the new document as URL as in

	<dxml:replaceDocument
		time="time_at_which_this_command_has_to_be_applied"
		href="url_of_the_new_document"
	/>

example

In the following command current document is replaced by a new document specified inline.

	<dxml:replaceDocument
		time="1"
	>
		<html>
		<head>
		<title>
		This is the new document
		</title>
		</head>
		</html>
	</dxml:replaceDocument>

Following command replaces current document by "new.htm" at time "10"

	<dxml:replaceDocument
		time="10"
		href="new.htm"
	/>

Document modifications as XSL transforms

Any change in a XML document can be viewed as XSL transform (stylesheet) applied on the current document.

The "replaceAttribute" example,

	<dxml:replaceAttribute 
		time="50"
		element="logo"
		attribute="src"
		value="car.gif"
	/>

can be viewed as applying the following transform on current document at time "5".


	<?xml version="1.0"?>
	<xsl:stylesheet version="1.0"
		xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

	<!-- copy all nodes, attributes, commented, text etc -->

	<xsl:template match="*|@*|processing-instruction()|text()">
	<xsl:copy>
		<xsl:apply-templates select="*|@*|processing-instruction()|text()"/>
	</xsl:copy>
	</xsl:template>

	<!-- find out the 'logo -->

	<xsl:template match='img[@id="logo"]'>
	<img>
		<!-- copy other attributes -->
		<xsl:apply-templates select='@*[. != "src"]'/>
		<!-- change the src -->
		<xsl:attribute name="src">car.gif</xsl:attribute>
	</img>
	</xsl:template>
	</xsl:stylesheet>

The above stylesheet copies whole of input document to output except for the src attribute. It modifies src attribute by new value. Similarly we can write XSL stylesheet for other DXML commands specified so far. Viewing dynamism as self-transformation helps in generalizing DXML commands.

Generalizing insert, delete & replace commands

Because XSL treats element, attribute, text, comment etc. uniformly as nodes insertElement, deleteAttribute etc. can be generalized using XSL syntax in DXML.

We can change elements, attributes, text, comment, CDATA section etc. using the following commands.

insert command
delete command
replace command

insert command

purpose

This command is used to insert a new node into a XML document.

syntax

	<dxml:insert
		time="time_at_which_this_command_has_to_be_applied"
		node="XSL_select_node_expression_to_which_the_node_is_inserted"
		position="place_of_insertion"		
	>
		<-- new node definition -->
	</dxml:insert>

Or place of insertion can be specified by before or after attribute.


	<dxml:insert
		time="time_at_which_this_command_has_to_be_applied"
		node="XSL_select_node_expression_to_which_the_node_is_inserted"
		before="XSL_select_node_expression_of_node_before_which_new_element_is_inserted"
		after="XSL_select_node_expression_of_node_after_which_new_element_is_inserted"		
	>
		<-- new node definition -->
	</dxml:insert>

One of { position, before, after } must be presented if the inserted node is not of attribute type. If attribute type node is inserted, then place of insertion is not applicable.

The newly inserted node can come from a URL

	<dxml:insert
		time="time_at_which_this_command_has_to_be_applied"
		node="XSL_select_node_expression_to_which_the_node_is_inserted"
		position="place_of_insertion"
		href="URL_of_the_new_node_to_be_inserted"
	/>

In the later syntax href refers to the URL of the new node inserted. This URL's fragment identifier part follows specified in XPointer syntax.

example

In the following HTML fragment

	<ul id="planets">
		<li>earth</li>
		<li>mars</li>
		<li>venus</li>
	</ul>

we can append one more planet to the list by

	<dxml:insert
		time="45"
		node="//ul[@id='planets']"
		position="3"
	>
		<li>uranus</li>
	</dxml:insert>

In the following HTML fragment

	<img id="logo"></img>

we can insert a new attribute src by

	<dxml:insert
		time="70"
		node="//img[id='logo']/@src"		
	>
		car.gif
	</dxml:insert>

To the following HTML fragment

	<p id="country">
	The country list will appear in a short while ...
	</p>

we can insert a list element <ol id="country_list"> from "country.htm" by

	<dxml:insert
		time="8"
		node="//p[id='country']"
		position="1"
		href="country.htm#xpointer(//ol[id='country_list'])"
	/>

To the following HTML fragment

	<p id='para'>
		First text content
		<b>bold text</b>
		Second text content after bold text
	</p>

we can insert a more text before "First text content" by

	<dxml:insert
		time="23"
		before="p[@id='para']/text()[position() = 1]"
	>
	More content before the "First text content"
	</dxml:insert"

delete command

purpose

This command is used to delete a node from a XML document. The node can be an attribute node, element node or text node.

syntax

	<dxml:delete
		time="time_at_which_this_command_has_to_be_applied"
		node="XSL_select_node_expression_for_the_nodes_deleted"
	/>

example

	<dxml:delete
		time="56"
		node="//img[id='logo']"
	/>

will delete the img element whose id is "logo"

	<dxml:delete
		time="56"
		node="//img[src='apple.gif']"
	/>

will delete the img element(s) whose src is "apple.gif" Note that more than one img element could be deleted by above command.

	<dxml:delete
		time="49"
		node="img"
	/>

will delete all img elements in the current document at time "49".

	<dxml:delete
		time="76"
		node="//p[id='news']/img"
	/>

will delete all img elements in the p element whose id is "news".

In the following HTML fragment

	<p id="para">
	First text child
	<b>bold text<b>
	Second text child	
	</p>

we can delete "First text child" by applying

	<dxml:delete
		time="76"
		node="//p[@id='para']/text()[position() = 1]"
	/>

replace command

purpose

This command is used to replace an attribute or a element or any other node by a new node.

syntax

	<dxml:replace
		time="time_at_which_this_command_has_to_be_applied"
		node="XSL_select_node_expression_of_node_that_is_replaced"		
	>
		<-- new node definition -->
	</dxml:replace>

	<dxml:replace
		time="time_at_which_this_command_has_to_be_applied"
		node="XSL_select_node_expression_of_node_that_is_replaced"		
		href="URL_of_the_new_replacing_node"
	/>

In the later syntax href refers to the URL of the new node inserted. This URL's fragment identifier part follows specified in XPointer syntax.

example

In the HTML fragment

	<img src='apple.gif'></img>

we can replace src attribute by

	<dxml:replace
		time="89"
		node="//img[src='apple.gif']"		
	>
		car.gif
	</dxml:replace>

Actually the above command will replace all img elements whose src attribute is 'apple.gif'.

Following DXML command will replace img element whose id is 'logo' by a new p element.

	<dxml:replace
		time="34"
		node="//img[id='logo']"
	>
		<p>
		This is the new paragraph that replaces the image.
		</p>
	</dxml:replace>

Following DXML command will replace img element whose id is 'logo' by a new p element whose id is 'company' from the URL "company.htm"

	<dxml:replace
		time="34"
		node="//img[id='logo']"
		href="company.htm#xpointer(//p[id='company'])"
	/>

In the following HTML fragment

	<p id='some_para'>
	First text child
	<i>italic text</i>
	Second text child	
	</p>

We can replace "First text child" by "New replacing text" using

	<dxml:replace
		time="43"
		node="//p[id='some_para']/text()[position() = 1]"
	>
	New replacing text
	</dxml:replace>

transform command

purpose

We have generalized insert, delete & replace commands to be able to change all XSL nodes instead of just elements & attributes. Sometimes we may want specify more complex transformation of the document. For example, we may want to sort a list differently (from ascending to descending) at a specified time. We can't invent tags for each of these transformations. Instead, we define a transform command. The transform applies a given XSL stylesheet to current document at specific time 't'.

syntax

	<dxml:transform
		time="time_at_which_this_command_has_to_be_applied"
	>
		<!-- here goes the definition of XSL stylesheet to apply -->
	</dxml:transform>

Or stylesheet can be specified by a URL as in

	<dxml:transform
		time="time_at_which_this_command_has_to_be_applied"
		href="url_of_XSL_stylesheet_to_apply"
	/>

example

To the HTML fragment

	<ul id='subject_list'>
	<li>Physics</li>
	<li>Chemistry</li>
	<li>Biology</li>
	</ul>

we can sort the "subject_list" by applying

	
	<dxml:transform
		time="13"
	>

		<?xml version="1.0"?>
		<xsl:stylesheet version="1.0"
			xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

		<!-- copy all nodes, attributes, commented, text etc -->

		<xsl:template match="*|@*|processing-instruction()|text()">
		<xsl:copy>
			<xsl:apply-templates select="*|@*|processing-instruction()|text()"/>
		</xsl:copy>
		</xsl:template>
		
		<xsl:template match="ul[@id='subject_list']">
			<ul id='subject_list'>
				<xsl:apply-templates select="li">
					<xsl:sort order="asending" data-type="text"/>
				</xsl:apply-templates>
			</ul>
		</xsl:template>	
	
		</xsl:stylesheet>

	</dxml:transform>

In the second variation of transform syntax, above XSL stylesheet can be stored in some "sort_subject.xsl" and referred using href attribute as in

	<dxml:transform
		time="80"
		href="sort_subject.xsl"
	/>

DXML Command Group

DXML commands can be grouped using dxml:group command

	<dxml:group
		id="unique_identifier_for_this_group"
	>
		<!-- one or more DXML commands here -->
	</dxml:group>

A command group is identified using id attribute. Individual DXML commands can also have unique id attribute.

DXML commands as a library function

A set of DXML commands can be 'call'ed at a specific time by using dxml:apply command.

syntax

	<dxml:apply
		time="time_at_which_this_command_has_to_be_applied"
		href="URL_of_the_DXML_command_set"
	/>

href attributes specifies the URL of the command set. If this URL has no fragment identifier part, then all the commands in the DXML document referred by URL are applied. If the URL has a fragment identifier, then that should refer to id attribute of some command or command group in the referred document.
The time specified in apply command is used as a base to time specified in the actual commands. i.e if apply has time as "23", then 23 will be added to time value of all commands applied from the URL.

example

The following command

	<dxml:apply
		time="6"
		href="external_commands.dxml"
	/>

applies commands from "external_command.dxml" at time 6. 6 will be added to time attribute of all commands from "external_command.dxml".

The following command

	<dxml:apply
		time="6"
		href="external_commands.dxml#cmd_group_id"
	/>

applies commands from command group whose id is "cmd_group_id" from "external_command.dxml" at time 6.

The following command

	<dxml:apply
		time="6"
		href="external_commands.dxml#single_cmd_id"
	/>

applies a single command whose id is "single_cmd_id" from "external_command.dxml"'s at time 6.

paramerters in dxml:apply

Just like a function call has input parameters, apply command can pass parameters using the following syntax.

	<dxml:apply
		time="time_at_which_this_command_has_to_be_applied"
		href="URL_of_the_DXML_command_set"
	>
		<param name="name_of_the_parameter" value="value_of_parameter"/>
		<!-- more parameters, if any -->
	</dxml:apply>

These parameters can be used in the DXML commands using XSL variable access syntax.

	<dxml:replace
		time="$time"
		....

	</dxml:replace>

In the above fragment value of time attribute is value of the parameter called "time".

Document snapshots - temporal hyperlinks

Just like spatial "anchor"s & hyperlinks in HTML, we introduce anchor points in time for a dynamic document. i.e Document snapshots can be marked as anchor points. Viewer can jump to these anchors or markers by using suitable user interface.

DXML temporal anchor element

	<dxml:ta
		time="time_at_which_snapshot_of_document_is_taken"
		id="identifier_for_this_snapshot"
	/>

On executing this command, the player/browser has to store the snapshot of the document at the time specified in the command.

DXML temporal hyperlinks

This proposal does not specify how to jump to a temporal anchor point. A possible syntax could be

	<dxml:ta 
		href="id_of_snapshot"		
	>
		<!-- link text here -->
	</dxml:ta>

On clicking on the link text, the document goes to the specified snapshot and presentation starts from there.

SMIL Boston - Animation Module

This proposal complements SMIL Boston's Animation Module for XML documents . SMIL Animation module is useful in specifying animations using a set of elements and attributes. DXML combined with SMIL animation module, can specify most of the document dynamism, without resorting to scripts/DOM.

A proposal for Dynamic XML without DOM & Scripts

What is a Dynamic XML Document?

Dynamic XML commands

Changing attributes

insertAttribute

deleteAttribute

replaceAttribute

Changing elements

insertElement

new element definition from a URL

deleteElement

replaceElement

Replacing the entire document

Document modifications as XSL transforms

Generalizing insert, delete & replace commands

insert command

delete command

replace command

transform command

DXML Command Group

DXML commands as a library function

paramerters in dxml:apply

Document snapshots - temporal hyperlinks

SMIL Boston - Animation Module

References