|  | 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, . . .