HTML

Splash!

PostScript

Template Toolkit Examples: HTML Library: Bars, Boxes and Edges

rgb

bars

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