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
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.
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 ("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.
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" />
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" />
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" />
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" />
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" />
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" />
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>
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.
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>
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.
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" />
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>Or
<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 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" />
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.
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.
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"
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]" />
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>Or
<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>
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: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.
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" />
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.
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".
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 hyperlinksThis 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.
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.