Hello World

This example shows how to use Dynamator to create the simplest possible dynamic page.

The Page

Step 1: Create an HTML file

In the development process Dynamator was designed to support, HTML authors create and maintain a static demo site. A static demo site is a browser-based UI prototype of the application to be built, complete with sample data. Most web application development processes recommend the creation of such a prototype. Projects that do create such a prototype usually throw it away. With Dynamator, the prototype becomes a maintainable portion of the application.

In Dynamator terminology, the HTML file is called a "template" file.

HelloWorld.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Hello World</title>
</head>
<body>
<p>Hello world
</body>
</html>

Step 2: Update the HTML file to identify elements requiring server-side behavior

For each element within the HTML file that requires server-side behavior, add an 'id' attribute. (Subsequent lessons will present other ways to identify elements.) The 'id' attribute is a standard attribute in HTML 4.0 that can be added to any element for which dynamic behavior makes sense. The format of the 'id' attribute is:

<tag ... id="single-exclusive-name" ...>

The ID attribute value must contain exactly one name. That name must be used as an ID only once in the entire HTML document. (Later, we will discuss use of the 'class' attribute, which may contain multiple names that can be used in multiple places in the HTML document.)

In the example below, the change made for this step is in bold.

HelloWorld.html (updated)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Hello World</title>
</head>
<body>
<p id="DynamicText">Hello world
</body>
</html>

This change could be performed by an HTML developer or a Java developer. Even if performed by a Java developer, the resulting file could be returned to the HTML development organization for maintenance, because the file contains only standard HTML.

Step 3: Create a Dynamator File

The Dynamator file provides the dynamic behavior for the HTML page. It contains two kinds of information. First, it contains the page prolog. This is the jsp code that is placed before any text from the HTML file. Second, it contains the dynamic behavior for elements marked with an 'id' attribute.

Dynamator assumes that the name of the mapping file matches the name of the html file, with a suffix of '.dyn'.

You may find this file a bit overwhelming at first glance. It's really simpler than it looks. The XML syntax makes it look more complicated than it really is, just because XML is so verbose.

One of the nice things about this file is that the data it carries is ideally suited for tool support. It wouldn't be too hard to simplify the syntax using a preprocessor. With more effort, imagine a drag-and-drop tool that links class attributes to html fields and stores the linkage in this file.

After you get a look at the whole thing we'll take one part at a time.

HelloWorld.dyn

<dynamator language="jsp">
  <prolog>
    <%@ page session="false" %>
    <%!
        private String getGreeting()
        {
            return "Hello World, says Dynamator!";
        }
    %>
  </prolog>
  <id name="DynamicText">
    <content>getGreeting()</content>
  </id>
</dynamator>

The Root Node

The root node of the Dynamator file is the dynamator element. The file must start and end as follows:

<dynamator language="jsp">
  ...
</dynamator>

The Prolog

If the Dynamator file contains a prolog section (most will), the prolog is placed at the beginning of the generated JSP file. The prolog usually contains a bunch of JSP elements.

  <prolog>
    <%@ page session="false" %>
    <%!
        private String getGreeting()
        {
            return "Hello World, says Dynamator!";
        }
    %>
  </prolog>

Everything within the prolog is normal JSP. The first directive tells the JSP engine not to access a session for this page. The declaration block defines a method for use from within the page. In another version of this example we'll show use of the <jsp:useBean> element.

ID mappings

The remainder of the Dynamator file maps id attribute value names in the html file to dynamic behavior.

HTML

<p id="DynamicText">
Hello world

Dynamator file

  <id name="DynamicText">
    <content>getGreeting()</content>
  </id>

For each 'id' attribute in the HTML for which server-side behavior is desired, there must be an 'id' element in the Dynamator file. The element must have a name attribute with a value matching the value of the id attribute in the HTML file (in this case, "DynamicText"). (The HTML file may contain elements with 'id' attributes for which no mapping exists, and the Dynamator file may contain 'id' elements for which there is no counterpart in the HTML file.)

The Dynamator file specifies how to transform the HTML template into a server page. Transformations are associated with HTML elements through "locators". The Dynamator file's 'id' element is a locator; it matches any template element with an 'id' attribute having the same value.

For any locator, there can be multiple "modifiers". A modifier specifies the changes to be made to located elements. In this case there is just one: the content of the element is replaced with a Java expression. The "content" modifier directs Dynamator to replace the content of the located element with a program expression. In this case, the content will be replaced with the Java expression "getGreeting()".

The content of an element <x> is everything between the <x> and the matching </x>. In HTML, not all tags require a matching close-tag. In our example, the <p> tag does not have a matching close-tag. In such a case, the content ends in the place where the matching close-tag is implied. To determine where that would be, you can examine the Tidy output.

Tidy output

<p id="DynamicText">
Hello world
</p>

Step 4: Run dynamate

Now that we have an HTML template and a Dynamator file, the dynamate command can be executed to create the JSP file.

The dynamate command is run on the template file. Dynamator locates the Dynamator file for a given template by finding a file with the same base name, with the suffix ".dyn".

.../doc/tutorial/example01a_HelloWorld> java dynamate HelloWorld.html

Tidy (vers 4th August 2000) Parsing "HelloWorld.html"

HelloWorld.html: Doctype given is "-//W3C//DTD HTML 4.01 Transitional//EN"
HelloWorld.html: Document content looks like HTML 4.01 Transitional
no warnings or errors were found

Because the input file is HTML, Dynamator uses JTidy to normalize the HTML file to valid XML, producing a file called "HelloWorld.asxml". Dynamator then applies the Dynamator file to the XML file to produce "HelloWorld.jsp".

Dynamator is essentially a specialized XML file editor. It's sort of a cross between sed and xslt, with a minimal set of target-language-specific bindings. Dynamator does not have any understanding of the target language, so it can't catch programming errors.

Dynamator's role in the development lifecycle is to automate the transformation of templates into server pages or programs. In conventional web application development, software developers manually transform HTML pages into some server-side technology. With Dynamator, software developers specify the transformation, then let Dynamator do the work as the HTML evolves.

Generated JSP file

The above command produces the following file. Changes to the original HTML are highlighted.

HelloWorld.jsp (generated by Dynamator)

This file contains the prolog, followed by the HTML page. The content of the 'p' element that contains the 'id' attribute has been replaced by a JSP expression to access the 'greeting' property of the Java object referred to by variable 'subject'.

The HTML file has been changed somewhat by the translation; these changes do not affect the appearance of the page. In addition to the highlighted changes, the output has been reformatted so that indentation matches the level of element nesting. Most importantly for this example, Tidy added a close-paragraph tag at the appropriate location.

In Action

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

Observations

This example has shown the two essential kinds of files used to create a server page or program using Dynamator (the HTML file and the Dynamator file), what simple files would look like, and how to use Dynamator to create a JSP page.

Whether the Model I or Model II JSP programming model is used, Dynamator adds one file, the Dynamator file. Although this adds a level of indirection for maintainers, the value it provides is that it separates all programming logic from the HTML.

This complete separation simplifies development and provides additional value, such as the ability to maintain a static demo site that can be automatically transformed into a production app.

Tutorial Hello World Beans Content Attributes Forms Class If Tags Scripts Iteration Lists Options Tables Definitions XML	Hello World This example shows how to use Dynamator to create the simplest possible dynamic page. The Page Step 1: Create an HTML file In the development process Dynamator was designed to support, HTML authors create and maintain a static demo site. A static demo site is a browser-based UI prototype of the application to be built, complete with sample data. Most web application development processes recommend the creation of such a prototype. Projects that do create such a prototype usually throw it away. With Dynamator, the prototype becomes a maintainable portion of the application. In Dynamator terminology, the HTML file is called a "template" file. HelloWorld.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Hello World</title> </head> <body> <p>Hello world </body> </html> Step 2: Update the HTML file to identify elements requiring server-side behavior For each element within the HTML file that requires server-side behavior, add an 'id' attribute. (Subsequent lessons will present other ways to identify elements.) The 'id' attribute is a standard attribute in HTML 4.0 that can be added to any element for which dynamic behavior makes sense. The format of the 'id' attribute is: <tag ... id="single-exclusive-name" ...> The ID attribute value must contain exactly one name. That name must be used as an ID only once in the entire HTML document. (Later, we will discuss use of the 'class' attribute, which may contain multiple names that can be used in multiple places in the HTML document.) In the example below, the change made for this step is in bold. HelloWorld.html (updated) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Hello World</title> </head> <body> <p id="DynamicText">Hello world </body> </html> This change could be performed by an HTML developer or a Java developer. Even if performed by a Java developer, the resulting file could be returned to the HTML development organization for maintenance, because the file contains only standard HTML. Step 3: Create a Dynamator File The Dynamator file provides the dynamic behavior for the HTML page. It contains two kinds of information. First, it contains the page prolog. This is the jsp code that is placed before any text from the HTML file. Second, it contains the dynamic behavior for elements marked with an 'id' attribute. Dynamator assumes that the name of the mapping file matches the name of the html file, with a suffix of '.dyn'. You may find this file a bit overwhelming at first glance. It's really simpler than it looks. The XML syntax makes it look more complicated than it really is, just because XML is so verbose. One of the nice things about this file is that the data it carries is ideally suited for tool support. It wouldn't be too hard to simplify the syntax using a preprocessor. With more effort, imagine a drag-and-drop tool that links class attributes to html fields and stores the linkage in this file. After you get a look at the whole thing we'll take one part at a time. HelloWorld.dyn <dynamator language="jsp"> <prolog> <%@ page session="false" %> <%! private String getGreeting() { return "Hello World, says Dynamator!"; } %> </prolog> <id name="DynamicText"> <content>getGreeting()</content> </id> </dynamator> The Root Node The root node of the Dynamator file is the dynamator element. The file must start and end as follows: <dynamator language="jsp"> ... </dynamator> The Prolog If the Dynamator file contains a prolog section (most will), the prolog is placed at the beginning of the generated JSP file. The prolog usually contains a bunch of JSP elements. <prolog> <%@ page session="false" %> <%! private String getGreeting() { return "Hello World, says Dynamator!"; } %> </prolog> Everything within the prolog is normal JSP. The first directive tells the JSP engine not to access a session for this page. The declaration block defines a method for use from within the page. In another version of this example we'll show use of the <jsp:useBean> element. ID mappings The remainder of the Dynamator file maps id attribute value names in the html file to dynamic behavior. HTML <p id="DynamicText"> Hello world Dynamator file <id name="DynamicText"> <content>getGreeting()</content> </id> For each 'id' attribute in the HTML for which server-side behavior is desired, there must be an 'id' element in the Dynamator file. The element must have a name attribute with a value matching the value of the id attribute in the HTML file (in this case, "DynamicText"). (The HTML file may contain elements with 'id' attributes for which no mapping exists, and the Dynamator file may contain 'id' elements for which there is no counterpart in the HTML file.) The Dynamator file specifies how to transform the HTML template into a server page. Transformations are associated with HTML elements through "locators". The Dynamator file's 'id' element is a locator; it matches any template element with an 'id' attribute having the same value. For any locator, there can be multiple "modifiers". A modifier specifies the changes to be made to located elements. In this case there is just one: the content of the element is replaced with a Java expression. The "content" modifier directs Dynamator to replace the content of the located element with a program expression. In this case, the content will be replaced with the Java expression "getGreeting()". The content of an element <x> is everything between the <x> and the matching </x>. In HTML, not all tags require a matching close-tag. In our example, the <p> tag does not have a matching close-tag. In such a case, the content ends in the place where the matching close-tag is implied. To determine where that would be, you can examine the Tidy output. Tidy output <p id="DynamicText"> Hello world </p> Step 4: Run dynamate Now that we have an HTML template and a Dynamator file, the dynamate command can be executed to create the JSP file. The dynamate command is run on the template file. Dynamator locates the Dynamator file for a given template by finding a file with the same base name, with the suffix ".dyn". .../doc/tutorial/example01a_HelloWorld> java dynamate HelloWorld.html Tidy (vers 4th August 2000) Parsing "HelloWorld.html" HelloWorld.html: Doctype given is "-//W3C//DTD HTML 4.01 Transitional//EN" HelloWorld.html: Document content looks like HTML 4.01 Transitional no warnings or errors were found Because the input file is HTML, Dynamator uses JTidy to normalize the HTML file to valid XML, producing a file called "HelloWorld.asxml". Dynamator then applies the Dynamator file to the XML file to produce "HelloWorld.jsp". Dynamator is essentially a specialized XML file editor. It's sort of a cross between sed and xslt, with a minimal set of target-language-specific bindings. Dynamator does not have any understanding of the target language, so it can't catch programming errors. Dynamator's role in the development lifecycle is to automate the transformation of templates into server pages or programs. In conventional web application development, software developers manually transform HTML pages into some server-side technology. With Dynamator, software developers specify the transformation, then let Dynamator do the work as the HTML evolves. Generated JSP file The above command produces the following file. Changes to the original HTML are highlighted. HelloWorld.jsp (generated by Dynamator) This file contains the prolog, followed by the HTML page. The content of the 'p' element that contains the 'id' attribute has been replaced by a JSP expression to access the 'greeting' property of the Java object referred to by variable 'subject'. The HTML file has been changed somewhat by the translation; these changes do not affect the appearance of the page. In addition to the highlighted changes, the output has been reformatted so that indentation matches the level of element nesting. Most importantly for this example, Tidy added a close-paragraph tag at the appropriate location. In Action If you are viewing this page in a servlet engine, you can see the generated page in action. Observations This example has shown the two essential kinds of files used to create a server page or program using Dynamator (the HTML file and the Dynamator file), what simple files would look like, and how to use Dynamator to create a JSP page. Whether the Model I or Model II JSP programming model is used, Dynamator adds one file, the Dynamator file. Although this adds a level of indirection for maintainers, the value it provides is that it separates all programming logic from the HTML. This complete separation simplifies development and provides additional value, such as the ability to maintain a static demo site that can be automatically transformed into a production app.



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