Applying the same transformation to multiple elements

This example shows how to use the 'class' attribute instead of the 'id' attribute in order to apply the same transformation to multiple elements.

In HTML 4.0, the 'class' attribute can be used like the 'id' attribute, with the following differences:

A 'class' attribute may contain more than one name. For example, 'class="one two"' is a class attribute that associates its element with two classes, 'one' and 'two'.
A 'class' name may be associated with more than one element. (In contrast, an 'id' name may legally be associated with a maximum of one element.)

So the following is valid:

<p class="one">X
<p class="two">Y
<p class="one two">Z

The example in this lesson extends the original Hello World file by adding a heading with the same text as the dynamic paragraph. Like most of the examples in this tutorial, this is an unlikely scenario; but useful for illustrating the technique.

The Page

HTML

Because we want to apply the same transformation to more than one element, we use the 'class' attribute instead of the 'id' attribute on each element that requires the same transformation.

ClassAttribute.html (updated)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Dynamator class example</title>
</head>
<body>
<h1 class="DynamicText">This is the heading</h1>
<p class="DynamicText">This is the text
</body>
</html>

Dynamator File

The only change to the original HelloWorld Dynamator file is that the 'id' element is now a 'class' element. The 'class' element applies to all HTML elements specifying the associated classname. Otherwise, the 'class' element is identical in structure and behavior to the 'id' element.

ClassAttribute.dyn

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

JSP file

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

ClassAttribute.jsp (generated by Dynamator)

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 the same transformation to multiple elements This example shows how to use the 'class' attribute instead of the 'id' attribute in order to apply the same transformation to multiple elements. In HTML 4.0, the 'class' attribute can be used like the 'id' attribute, with the following differences: A 'class' attribute may contain more than one name. For example, 'class="one two"' is a class attribute that associates its element with two classes, 'one' and 'two'. A 'class' name may be associated with more than one element. (In contrast, an 'id' name may legally be associated with a maximum of one element.) So the following is valid: <p class="one">X <p class="two">Y <p class="one two">Z The example in this lesson extends the original Hello World file by adding a heading with the same text as the dynamic paragraph. Like most of the examples in this tutorial, this is an unlikely scenario; but useful for illustrating the technique. The Page HTML Because we want to apply the same transformation to more than one element, we use the 'class' attribute instead of the 'id' attribute on each element that requires the same transformation. ClassAttribute.html (updated) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Dynamator class example</title> </head> <body> <h1 class="DynamicText">This is the heading</h1> <p class="DynamicText">This is the text </body> </html> Dynamator File The only change to the original HelloWorld Dynamator file is that the 'id' element is now a 'class' element. The 'class' element applies to all HTML elements specifying the associated classname. Otherwise, the 'class' element is identical in structure and behavior to the 'id' element. ClassAttribute.dyn <dynamator language="jsp"> <prolog> <%@ page session="false" %> <%! private String getGreeting() { return "Hello World, says Dynamator!"; } %> </prolog> <class name="DynamicText"> <content>getGreeting()</content> </class> </dynamator> JSP file After processing with Dynamator, the resulting JSP file looks like this: ClassAttribute.jsp (generated by Dynamator) 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