RIFE logo
This page last changed on Nov 25, 2005 by gbevin.

Templates

We've learned a bit about templates in the previous chapter, but since they are a big part of any web application, we'll dig a bit deeper into them now. Let's revisit the guess template from the game:

guess.html
<html>
  <head><title>Perform a guess</title></head>
  <body>
    <p>Guess a number from 0 to 100</p>
    <!--V 'warning'--><!--/V-->
    <!--B 'invalid'-->
    <p><font color="#990000">The guess is invalid.</font></p>
    <!--/B-->
    <p><i><!--V 'indication'--><!--/V--></i></p>
    <!--B 'lower'-->The answer is lower.<!--/B-->
    <!--B 'higher'-->The answer is higher.<!--/B-->
    <form action="[!V 'SUBMISSION:FORM:performGuess'/]" method="post">
      <!--V 'SUBMISSION:PARAMS:performGuess'/-->
      <input type="text" name="guess"
             value="[!V 'PARAM:guess'][!/V]" /><br />
      <input type="submit" value="Guess" /><br />
    </form>
    <script language="javascript">document.forms[0].guess.focus();</script>
  </body>
</html>

In this HTML template there are two different template tags, the V and B tags. These were briefly explained in the number guessing chapter and were described as a value tag and a block tag.

The block tag

The tag B, defines a block and we'll just call it the block tag from now on. A block won't be shown in the generated HTML, it is completely stripped away. Its contents can however be assigned to a value tag. This is done from Java code with a call to setBlock. In other words, a block can be thought of as a building block which can later be used to construct the page. In the guess template there are several blocks defined, but only one of them is used at a time.

Snippet from Guess.java that uses setBlock()
if (game.getAnswer() < guess)
{
  mTemplate.setBlock("indication", "lower");
}
else if (game.getAnswer() > guess)
{
  mTemplate.setBlock("indication", "higher");
}

This piece of code from the Java implementation of the guess element shows how the lower and higher blocks are used together with the value placeholder indication. Remember, the contents of a block only appears if it has been assigned to a value.

The value tag

The value tag, V, is used to indicate a location where content can be inserted. It's thus simply a placeholder that will disappear once it has something to show. In the guess template we define the placeholders warning and indication. These are later used to set values depending on the results of the form submission. A value tag looks like the following:

<!--V 'name'-->Default Value<!--/V-->

The guess example only has empty default values. This means that if the value is not set to something else, the tag will just be replaced with nothing and leave an empty space. If we set a default value, it will be used unless the value is changed later on. You can see an example of this in the next section. A value can also be set from Java code by a calling setValue.

It is also possible to use a short version of the value tag which has no default value at all. It would look like this:

<!--V 'name'/-->

If such a short value is not set to something, it will just show up as exactly the same tag in the resulting output. This clearly indicates where values are present and not handled. You can then take appropriate action in your code to either remove the value tag if it's useless or to set it to a value if you forgot to do that.

Overriding the default value

The default value of a value tag can be set from within the template itself. This can be done with the BV tag. It behaves as a regular block tag, except that the content is automatically used as the default value of a value tag with the same name. You're still able to use all block tag functionalities with it too of course.

<!--V 'warning'/-->
<!--BV 'warning'-->No warnings!<!--/BV-->

This changes the default value of the warning value to be "No warnings!". The new default value will be used if the value isn't set from the Java code.

The above template code can also be written like this and it will have exactly the same result:

<!--V 'warning'-->No warnings!<!--/V-->
<!--B 'warning'-->No warnings!<!--/B-->

The difference is however that you have to write and update exactly the same content in two different places. However, you'll notice the real benefits of the BV tag when you combine it with the include tag. This is explained in detail in the next section.

The include tag

There is one tag that we haven't discussed yet and that is the I tag. It is used to include another template into the current one, we call it the include tag. This tag can be very useful when, for example, there is a standard page that all the pages of a site should use. Then it's just a matter of designing the standard page and telling the other templates to include it and to override certain value tags. Here is an example of a site that uses a "page" template to define a common header, footer and main menu.

Template that can be used as a standard page, page.html
<html>
  <head>
    <title><!--V 'window_title'-->the window title<!--/V--></title>
    <link rel="stylesheet" type="text/css" href="/style/site.css"/>
  </head>

  <body>

    <div id="menu">

      <a class="[!V 'menu_home']inactive[!/V]"
         href="[!V 'EXIT:QUERY:home'/]">HOME</a>

      <a class="[!V 'menu_other']inactive[!/V]"
         href="[!V 'EXIT:QUERY:other'/]"OTHER</a>

    </div>

    <!--V 'page_content'-->content goes here<!--/V-->

  </body>
</html>

In our different pages "Home" and "Other" we want to have a menu that highlights the name of the current page. This makes it easy for the user to find his way around the site. Different CSS classes are used in the menu to define the visual aspect of the menu items. They can either be active or inactive.

In the template above we are using value tags with the names menu_home and menu_other to control the CSS classes of the menu links. The default value is set to be "inactive", meaning that the page is not shown.

We want to use this boiler-plate for both of our pages and therefore we need to include it from both pages. As mentioned, this is done by using the I tag.

Including another page with the I-tag, home.html
<!--I 'page'/-->

<!--BV 'menu_home'-->active<!--/BV-->

<!--BV 'page_content'-->
My content on the Home page
<!--/BV-->

We include the template "page" by using the I tag. Then we set the default of menu_home to be "active" and page_content to be "My content on the Home page". By using this approach you can easily build a site with lots of pages but still only have to edit one file if you want to change the menu or the page content.

Now that you know everything about templates, we're ready to start writing a friends database application.

Document generated by Confluence on Oct 19, 2010 14:56