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