Applying behavior where HTML elements don't belong

In every example so far we've used HTML elements as hooks to add dynamic behavior. But there are several cases where HTML elements are not usually available. Two examples are Scripts and preformatted text blocks.

This example shows how to add dynamic behavior where there is no HTML element. There's no magic; you'll need to add an HTML element to do it. The trick is in retaining the ability of the HTML source file to be displayed correctly in a browser.

This example revisits the Text Echo Example, enhancing it by adding a JavaScript edit and displaying the previously entered value within a "pre" element.

There are three kinds of modifications you're likely to want to be able to make to scripts:

Set a variable value within a script. There is a trick to this that this example demonstrates.
Remove the script completely. To remove script code with Dynamator, the script code to be removed must be in its own script element. Then you can use normal Dynamator behavior to locate the element and remove it. Often you can just give the script element a class attribute with value "Discard". (Note that this is not valid HTML, but neither Tidy nor browsers will complain.)
Replace script code with different script code. To replace script code with Dynamator, the script code to be replaced must be in its own script element. Then you can use normal Dynamator behavior to locate the element and replace it. Replacing script code programmatically might be bad form; it might be better to use a design that relies on either variable setting or script removal.

The Page

HTML

TextEcho2.html (updated)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>Dynamator Enhanced Text Echo Example</title>
 </head>
<body>
<hr>
<form method="GET">
<script language="JavaScript">
    previousValue = "<span id='TextInputDisplay' class='DiscardTag'/>";
</script>
<script language="JavaScript" class="Discard">
    previousValue = 
        ( document.location.search == "" ) 
        ? ""
        : document.location.search.substring(
            document.location.search.indexOf('=')+1);
</script>
<script language="JavaScript">
    function validate(form)
    {
        if ( form.elements["TextInput"].value == previousValue )
        {
            alert("You just entered that value. "
                + "Please try to be more creative.");
            return false;
        }
        return true;
    }
</script>
<center>
<p>Please enter some new text:<br>
<input type="TEXT" id="TextInputField" name="TextInput" maxlength="500" size="50">
</p>
<input type="SUBMIT" value="Display Text" onClick="validate(this.form)">
<hr>
<table><tr><td>
<pre><script language="JavaScript" id="TextInputDisplay" 
class="DiscardTag">document.write(previousValue);</script></pre>
</td></tr></table>
</center>
</form>
</body>
</html>

The code for this example actually simulates the behavior of the JSP form using JavaScript. Both the simulation and the "real" form require a JavaScript variable to hold the value the user just entered.

The source for the variable value is different depending on whether the page is being used as a static demo or as the final JSP. To do this, place each variable definition within its own script element. The script for the demo variable initialization is placed after the script to be used in production so that the demo initialization is used when the page is used as a demo, and given class="Discard" so that it is omitted when Dynamator generates the JSP.

Within the variable initialization script to be included in the JSP, place a span element where the variable's initial value will be supplied. Add a class attribute with the value 'DiscardTag' to cause Dynamator to omit the span tag from the generated JSP, but include the content of the element. The Dynamator file will specify an override for the content of this element.

The syntax of the span tag is different than we have seen before. A close tag is not used; instead the tag ends with "/>". Within a <script> element with language="javascript", if the close tag is used, JTidy emits it as "<\/span>", which breaks the xml parser.

This example also includes a script to output the value of the variable. Since we want this value hard-coded in the JSP output page, the script is given the class "DiscardTag" so that only the contents of the script element will be included in the generated JSP. Because the script element has the same 'id' attribute value as the variable initialization, its contents will be replaced with the same value as the variable.

We used the same 'id' attribute value twice in this example. Browsers aren't complaining yet, but it might be better to use the class attribute instead.

Dynamator File

The Dynamator file is the same as in the previous TextEcho example.

TextEcho2.dyn

<dynamator language="jsp">
  <prolog>
    <%@ page session="false" %>
    <%
        String textInput = request.getParameter("TextInput");
        if ( textInput == null )
        {
            textInput = "";
        }
    %>
  </prolog>
  <id name="TextInputField">
    <attr name="value">
      <content>textInput</content>
    </attr>
  </id>
  <id name="TextInputDisplay">
    <content>textInput</content>
  </id>
</dynamator>

For line-oriented languages like JavaScript, if the raw-content element is used to supply the value, the entire element should be all on the same line so that the resulting code doesn't add line breaks.

It's important to replace or remove all span elements that occur within scripts. A span element that is not removed will be output as "<span ...></span>"; which is invalid (because of the '</' sequence) and probably not what you want anyway.

Although this example doesn't demonstrate this, it's good practice to remove any 'id' or 'class' attributes added to script tags, since they are not valid HTML.

JSP

After processing with Dynamator, the resulting JSP file looks like this:

TextEcho2.jsp (generated by Dynamator)

Note that the 'span' element and the last script element do not appear in the generated JSP file, because they were given the class 'DiscardTag'.

Although the indentation appears broken within the 'pre' element; it's necessary to omit indentation in order to ensure that the content of the 'pre' element is formatted correctly.

In Action

If you are viewing this page in a servlet engine, you can see the generated page in action.

Tutorial Hello World Beans Content Attributes Forms Class If Tags Scripts Iteration Lists Options Tables Definitions XML	Applying behavior where HTML elements don't belong In every example so far we've used HTML elements as hooks to add dynamic behavior. But there are several cases where HTML elements are not usually available. Two examples are Scripts and preformatted text blocks. This example shows how to add dynamic behavior where there is no HTML element. There's no magic; you'll need to add an HTML element to do it. The trick is in retaining the ability of the HTML source file to be displayed correctly in a browser. This example revisits the Text Echo Example, enhancing it by adding a JavaScript edit and displaying the previously entered value within a "pre" element. There are three kinds of modifications you're likely to want to be able to make to scripts: Set a variable value within a script. There is a trick to this that this example demonstrates. Remove the script completely. To remove script code with Dynamator, the script code to be removed must be in its own script element. Then you can use normal Dynamator behavior to locate the element and remove it. Often you can just give the script element a class attribute with value "Discard". (Note that this is not valid HTML, but neither Tidy nor browsers will complain.) Replace script code with different script code. To replace script code with Dynamator, the script code to be replaced must be in its own script element. Then you can use normal Dynamator behavior to locate the element and replace it. Replacing script code programmatically might be bad form; it might be better to use a design that relies on either variable setting or script removal. The Page HTML TextEcho2.html (updated) <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Dynamator Enhanced Text Echo Example</title> </head> <body> <hr> <form method="GET"> <script language="JavaScript"> previousValue = "<span id='TextInputDisplay' class='DiscardTag'/>"; </script> <script language="JavaScript" class="Discard"> previousValue = ( document.location.search == "" ) ? "" : document.location.search.substring( document.location.search.indexOf('=')+1); </script> <script language="JavaScript"> function validate(form) { if ( form.elements["TextInput"].value == previousValue ) { alert("You just entered that value. " + "Please try to be more creative."); return false; } return true; } </script> <center> <p>Please enter some new text:<br> <input type="TEXT" id="TextInputField" name="TextInput" maxlength="500" size="50"> </p> <input type="SUBMIT" value="Display Text" onClick="validate(this.form)"> <hr> <table><tr><td> <pre><script language="JavaScript" id="TextInputDisplay" class="DiscardTag">document.write(previousValue);</script></pre> </td></tr></table> </center> </form> </body> </html> The code for this example actually simulates the behavior of the JSP form using JavaScript. Both the simulation and the "real" form require a JavaScript variable to hold the value the user just entered. The source for the variable value is different depending on whether the page is being used as a static demo or as the final JSP. To do this, place each variable definition within its own script element. The script for the demo variable initialization is placed after the script to be used in production so that the demo initialization is used when the page is used as a demo, and given class="Discard" so that it is omitted when Dynamator generates the JSP. Within the variable initialization script to be included in the JSP, place a span element where the variable's initial value will be supplied. Add a class attribute with the value 'DiscardTag' to cause Dynamator to omit the span tag from the generated JSP, but include the content of the element. The Dynamator file will specify an override for the content of this element. The syntax of the span tag is different than we have seen before. A close tag is not used; instead the tag ends with "/>". Within a <script> element with language="javascript", if the close tag is used, JTidy emits it as "<\/span>", which breaks the xml parser. This example also includes a script to output the value of the variable. Since we want this value hard-coded in the JSP output page, the script is given the class "DiscardTag" so that only the contents of the script element will be included in the generated JSP. Because the script element has the same 'id' attribute value as the variable initialization, its contents will be replaced with the same value as the variable. We used the same 'id' attribute value twice in this example. Browsers aren't complaining yet, but it might be better to use the class attribute instead. Dynamator File The Dynamator file is the same as in the previous TextEcho example. TextEcho2.dyn <dynamator language="jsp"> <prolog> <%@ page session="false" %> <% String textInput = request.getParameter("TextInput"); if ( textInput == null ) { textInput = ""; } %> </prolog> <id name="TextInputField"> <attr name="value"> <content>textInput</content> </attr> </id> <id name="TextInputDisplay"> <content>textInput</content> </id> </dynamator> For line-oriented languages like JavaScript, if the raw-content element is used to supply the value, the entire element should be all on the same line so that the resulting code doesn't add line breaks. It's important to replace or remove all span elements that occur within scripts. A span element that is not removed will be output as "<span ...></span>"; which is invalid (because of the '</' sequence) and probably not what you want anyway. Although this example doesn't demonstrate this, it's good practice to remove any 'id' or 'class' attributes added to script tags, since they are not valid HTML. JSP After processing with Dynamator, the resulting JSP file looks like this: TextEcho2.jsp (generated by Dynamator) Note that the 'span' element and the last script element do not appear in the generated JSP file, because they were given the class 'DiscardTag'. Although the indentation appears broken within the 'pre' element; it's necessary to omit indentation in order to ensure that the content of the 'pre' element is formatted correctly. In Action If you are viewing this page in a servlet engine, you can see the generated page in action.



Page last updated 01 April 2004	Copyright 2001-2004 by Jay Dunning. All rights reserved.	hosted by