If

This example shows how to conditionally output HTML elements at run-time.

The goal of Dynamator is to separate program logic from HTML. The separation is two-way: no program logic in the HTML, and no HTML in the program logic. By completely decoupling program logic from HTML, both can change independently.

When the presence of an HTML element depends on a dynamic value, or the actual element changes depending on a dynamic value, it is very tempting to put the HTML element in a dynamic component such as a Java class or a Dynamator file. Resist that temptation; it would make the dynamic component less reusable and increase the maintenance burden on the Java developer if the HTML needs to change.

Conditional processing allows the presence or absence of an element to be determined at run-time. To enable conditional processing, add an 'if' element subordinate to the corresponding 'id' or 'class' element in the Dynamator file. The content of the 'if' element is a boolean program expression. At run-time, if the property or expression evaluates to 'true', the HTML element and its children are output. If the property or expression evaluates to 'false', the HTML element and its children are not output.

For example:

<id name="conditional">
<if>booleanExpression<if>
</id>

Outputs the element with the id 'conditional', and its children, only if the java expression evaluates to true.

The example below is similar to the TextEcho example. Instead of entering text, the user selects an option from a choice list. When the page is redisplayed, the choice list is set to the choice the user made, and an appropriate sentence is displayed. This example is trivial, and in real life it would be implemented differently, but it allows us to consider conditional logic independently of everything else.

Unlike the TextEcho example, this example does not use Javascript. This allows us to demonstrate another useful technique for static demo site construction, CSS element hiding.

HTML

TrueFalse.html (updated for Dynamator)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <title>Dynamator Conditional Processing Example</title>
</head>
<body>
<hr>
<form method="GET" id="form">
<p>Select the value desired:
<select name="value">
  <option value=""></option>
  <option value="true"  id="valueIsTrue">true</option>
  <option value="false" id="valueIsFalse">false</option>
</select>
<input type="SUBMIT">
</form>
<hr>
<div id="response">
<p id="trueText">You are so optimistic!
<p id="falseText">Don't be so negative!
</div>
</body>
</html>

A few notes:

Each select option is given its own id as a hook so that the 'selected' option can be programmatically determined.
A <div> element has been added around the response text to provide a hook for program logic. Conditional logic will be added to the <div> element in the Dynamator file so that the response text will only be output in response to a submit.
Each response value is in the HTML. The response value that is displayed is chosen at run-time.

Placing each response value in the HTML has a benefit and a disadvantage. The benefit is that the HTML author can control the HTML for each response value. The disadvantage is that when the HTML page is displayed as-is (i.e. for a demo or by the HTML author), each response value is displayed, unless some extra HTML coding is done.

Unwanted elements can be rendered invisible for a demo using CSS. The following example shows how:

TrueFalse.html (updated for demo)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <title>Dynamator Conditional Processing Example</title>
 <style type="text/css">
    .HideForDemo {display: none;}
 </style>
</head>
<body>
<hr>
<form method="GET" id="form">
<p>Select the value desired:
<select name="value">
  <option value=""></option>
  <option value="true"  id="valueIsTrue">true</option>
  <option value="false" id="valueIsFalse">false</option>
</select>
<input type="SUBMIT" name="Submit">
</form>
<hr>
<div id="response">
<p id="trueText">You are so optimistic!
<p id="falseText" class="HideForDemo">Don't be so negative!
</div>
</body>
</html>

Two things have been added. The first is a CSS style preventing the display of any element with the class "HideForDemo". The second is the association of one of the alternative output elements with that class.

Typically, a style such as "HideForDemo" is placed in the application's main stylesheet, but not used in the production application.

Dynamator File

The following Dynamator file corresponds to the demo example above.

TrueFalse.dyn

<dynamator language="jsp">
  <prolog>
    <%@ page session="false" %>
    <%
        String valueArgument = request.getParameter("value");
        Boolean value = 
            ( valueArgument == null )
            ? null
            : Boolean.valueOf(valueArgument);
    %>
  </prolog>
  <id name="form">
    <attr name="action">
      <content>request.getServletPath()</content>
    </attr>
  </id>

  <!--
    Only output the response section if the user has 
    submitted the form.
  -->
  <id name="response">
    <if>request.getQueryString()!=null</if>
  </id>
  
  <!--
    Add the 'selected' attribute to the option the user selected.
  -->
  <id name="valueIsTrue">
    <attr name="selected">
      <if>Boolean.TRUE.equals(value)</if>
    </attr>
  </id>
  <id name="valueIsFalse">
    <attr name="selected">
      <if>Boolean.FALSE.equals(value)</if>
    </attr>
  </id>

  <!--
    Display text appropriate to the selection.
  -->
  <id name="trueText">
    <if>Boolean.TRUE.equals(value)</if>
  </id>
  <id name="falseText">
    <if>Boolean.FALSE.equals(value)</if>

    <!-- Unhide the element. -->
    <attr name="class">
      <discard/>
    </attr>
  </id>
</dynamator>

The Dynamator <if> element can be used with any locator or attribute. It causes the located element or attribute to be output only if the program expression specified in the content of the element evaluates to true at run-time.

The Dynamator file above causes the 'response' element to be output only if the query string contains a value. Note that this applies to the entire element, not just the start and end tags. The Dynamator file also adds the 'selected' attribute to whichever options element matches the current selection, and causes only the text matching the current selection to be output.

JSP File

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

TrueFalse.jsp (generated by Dynamator)

Note the spacing in the two options tags. The reason there is no space between the value attribute and the '<%' is that in HTML it is not valid to have a space before the '>' of the end of the tag.

In Action

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

Observations

Obviously, using an 'if' for each option in an option list is not a maintainable approach. In most cases, an option list merits a 'foreach', discussed later.

If

Page

HTML

Dynamator File

JSP File

In Action

Observations