|  | HTML |  |
|  | Splash! |  |
|  | PostScript |  |
| Template Toolkit Examples: HTML Library: Bars, Boxes and Edges |

|  | index |  |
|  | rgb |  |
|  | headers |  |
|  | lists |  |
|  | links |  |
|  | tables |  |
|  | bars |  |
|  | menus |  |
# Bars, Boxes and Edges These elements can be used to create bars and boxes, both with and without borders. These components are constructed from the more fundamental table elements: 'table', 'row' and 'cell'.
Source #1:
    [% PROCESS html/rgb %]

    [% WRAPPER html/bar
    	col=rgb.rose
    	width="50%"
    %]

      [%- FOREACH word = ['Hello', 'World'] %]
      <td width="50%">[% word %]</td>
      [%- END %]

    [% END %]
HTML Output #1:
    <table border="0" bgcolor="#f08080" width="50%"><tr bgcolor="#f08080">
      <td width="50%">Hello</td>
      <td width="50%">World</td>
    </tr>
    </table>
Output #1:
Hello | World
Source #2:
    [% INCLUDE html/box
        col     = rgb.lilac
        pad     = 4
        content = 'Hello World'
     %]
HTML Output #2:
    <table border="0" bgcolor="#9797ff" cellpadding="4"><tr><td>Hello World</td>
    </tr>
    </table>
Output #2:
Hello World
Source #3:
    [% WRAPPER html/box
         col   = rgb.bud
         width = '100%'
         align = 'right'
         pad   = 4
    %]
    <font color="[% rgb.white %]"><b>Hello World</b></font>
    [% END %]
HTML Output #3:
    <table border="0" bgcolor="#66aa66" width="100%" cellpadding="4"><tr
    align="right"><td align="right">
    <font color="#ffffff"><b>Hello World</b></font>
    </td>
    </tr>
    </table>
Output #3:
Hello World
Source #4:
    [% INCLUDE html/edgebox
         content = "The Cat Sat on the Mat"
    %]
HTML Output #4:
    <table border="0" bgcolor="#000000" cellpadding="2"
    cellspacing="0"><tr><td><table border="0" bgcolor="#ffffff" cellspacing="0"><tr
    bgcolor="#ffffff">
    <td>
    The Cat Sat on the Mat
    </td>
    </tr>
    </table></td>
    </tr>
    </table>
Output #4:
The Cat Sat on the Mat
Source #5:
    [% INCLUDE html/edgebox
         border  = 1
         pad     = 4
         width   = '50%'
         content = "The Cat Sat on the Mat"
    %]
Output #5:
The Cat Sat on the Mat
Source #6:
    [% INCLUDE html/edgebox
         edge    = rgb.blue.dark
         fill    = rgb.grey.light
         pad     = 4
         width   = '50%'
         align   = 'right'
         content = "The Dog Sat on the Log"
    %]
Output #6:
The Dog Sat on the Log
Source #7:
    [% WRAPPER html/edgebox
         edge    = rgb.green.dark
         fill    = rgb.green.light
         border  = 1
         pad     = 4
         width   = '100%'
         align   = 'center'
    %]
    The Fish Lay on the Dish
    [% END %]
Output #7:
The Fish Lay on the Dish
Source #8:
    [% WRAPPER html/edgebar
         edge    = rgb.green.dark
         fill    = rgb.green.light
         border  = 1
         pad     = 4
         width   = '100%'
    %]
    <td>Foo</td> <td>Bar</td> <td>Baz</td>
    [% END %]
Output #8:
Foo | Bar | Baz
Source #9:
    [% WRAPPER html/edgebar
         edge    = rgb.lavender.dark
         fill    = rgb.lavender.light
         border  = 2
         pad     = 4
         width   = '100%'
    %]
    <td align="left">Left Side</td>
    <td align="right">Right Side</td>
    [% END %]
Output #9:
Left Side | Right Side
Source #10:
    <div align="center">
    [% WRAPPER html/edge
         edge    = rgb.lavender.dark
         fill    = rgb.lavender.light
         border  = 2
         pad     = 4
         width   = '80%'
    %]
    <tr>
      <td align="right">One</td>
      <td align="left">Two</td>
    </tr>
    <tr>
      <td align="right">Three</td>
      <td align="left">Four</td>
    </tr>
    [% END %]
    </div>
Output #10:
One | Two
Three | Four
Source #11:
    <div align="center">
    [% WRAPPER html/edgebox
         edge    = rgb.grey50
         fill    = rgb.grey75
         border  = 1
         pad     = 6
         width   = '50%'
    %]

    <h2>Abstract Factory</h2>

    <h3>Intent</h3>
    <ul>
      Provide an interface for creating families of
      related or dependant objects without specifying
      their concrete classes.
    </ul>

    <h3>Also Known As</h3>
    <ul>
      Kit
    </ul>

    <h3>Motivation</h3>
    <ul>
      Consider a user interface toolkit that supports
      multiple look-and-feel standards, . . .
    </ul>
    [% END %]
    </div>
Output #11:
## Abstract Factory ### Intent Provide an interface for creating families of related or dependant objects without specifying their concrete classes. ### Also Known As Kit ### Motivation Consider a user interface toolkit that supports multiple look-and-feel standards, . . .