Now, our site is going to be made up of a load of boxes of various titles and different colors, so let's have a couple of helper components to draw boxes for us. We're going to allow the box to have a user-defined color, title, and optional title link. Experience has shown that the best way to do this is to create components for the start of the box and the end of the box. The start of the box, shown in Example 3-9, creates a table inside a table.

Example 3-9. BoxTop

<table bgcolor="#777777" cellspacing=0 border=0 cellpadding=0>
<tr><td rowspan=2></td>
<td valign=middle align=left
bgcolor="<%$color%>">
&nbsp;
<font size=-1 color="#ffffff">
<b>
<% $title_href && "<a
href="$title_href">"|n %>
<%$title |n %>
<%  $title_href && "</a>" |n %> </b></font></td>
<td rowspan=2>&nbsp;</td></tr>
<tr><td colspan=2 bgcolor="#eeeeee" valign=top align=left width=100%>
<table cellpadding=2 width=100%><tr><td>

<%ARGS>
$title_href => undef
$title => undef

$color => "#000099"
</%ARGS>

One thing to notice from this is the |n directive that appears at the end of some of the interpolated Perl sections. The reason for these is to turn off Mason's default HTML entity escaping code. For instance, if we had passed in a value for $title_href, then this line:

  <% $title_href && "</a>" %>

would want to output </a>. However, as Mason tries to escape HTML entities for you, this would become &lt;/a&gt;--so we need to turn that off.

The box ending code, shown in Example 3-10, is much simpler and merely ends the two tables we opened.

Example 3-10. BoxEnd

</td></tr></table>

</td></tr>
<tr><td colspan=4>&nbsp;</td></tr>
</table>

As an example of these box drawing components, let's first dispatch the dummy login box for completeness, as in Example 3-11.

Example 3-11. LoginBox

<& BoxTop, title=>"Login" &>
<small>Log in to Your Portal:</small><br/>
<form>
<ul>
<li> Barcode: <input name="barcode">
<li> Password: <input name="password">

</ul>

</form>
<& BoxEnd &>

When Mason processes that component, it produces HTML that looks like this:

  <table bgcolor="#777777" cellspacing=0 border=0 cellpadding=0>
  <tr><td rowspan=2></td>
  <td valign=middle align=left bgcolor="#000099">
  &nbsp;
  <font size=-1 color="#ffffff">
  <b> Login </b></font></td>
  <td rowspan=2>&nbsp;</td></tr>
  <tr><td colspan=2 bgcolor="#eeeeee" valign=top align=left width=100%>
  <table cellpadding=2 width=100%><tr><td>
  <small>Log in to Your Portal:</small><br/>
  <form>
  <ul>
  <li> Barcode: <input name="barcode">
  <li> Password: <input name="password">

  </ul>

  </form>
  </td></tr></table>

  </td></tr>
  <tr><td colspan=4>&nbsp;</td></tr> 
  </table>