Dynamator Pure HTML for every page generation technology.
           

Text Echo

This lesson demonstrates simple form handling. In just four lessons (three if you don't count the Bean excursion), you've learned everything you need to use Dynamator with a simple form. This lesson doesn't add any new Dynamator concepts, but it puts together what you've already seen in a different way. It also shows an optional aspect of static demo sites; the use of Javascript to simulate dynamic behavior.

The Page

HTML

TextEcho.html (updated)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>Dynamator Text Echo Example</title>
 </head>
<body>
<hr>
<form method="GET">
<center>
<p>Enter text here:<br>
<input type="TEXT" id="TextInputField" name="TextInput" maxlength="500" size="50">
</p>
<input type="SUBMIT" value="Display Text">
<hr>
<b id="TextInputDisplay">
<script language="javascript">
function inputText(name)
{
    return ( location.search == null 
        || 0 > location.search.indexOf(name) )
    ? "[enter text above to see it here]"
    : location.search.substring(
        location.search.indexOf(name) + 1 + name.length );
}
document.write(inputText("TextInput"));
</script>
</b>
</center>
</form>
</body>
</html>

This example uses Javascript to simulate server behavior. The inline function to extract the query string from the page URL would normally be placed in the head element within a comment div for removal by Dynamator, but we haven't covered that yet (jump ahead to see how that works).

Notice that even though the value that is displayed in the input field and the value that is displayed below are the same, the containing elements are given two different id names. This is for two reasons. First, id's must be unique. Second, there are two different kinds of changes that need to be made. In the first dynamic element, we only want to change the attribute value for the 'value' attribute. In the second dynamic element, we only want to change the content.

Dynamator File

TextEcho.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>

Two id entries are required for this Dynamator file, one for each ID, but they both map to the same program variable.

JSP

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

TextEcho.jsp

Because the Dynamator file specified the replacement of the content of the element with the "TextInputDisplay" id, Dynamator removed the Javascript.

In Action

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