boxes.xtp

resinweb服务器源文件

<s1 title="Using XSL for common formatting boxes">

<p>Many common formatting idioms, like boxes, are repeated throughout a
web site.  Each box has the same design throughout the site, but
its HTML implementation is a verbose combination of tables.  
Changing the site design involves changing each of the tables.  The
many identical changes make the site more brittle and less changeable.

<p>An XSL box formatting library lets a site create a consistent
look, keeping the design stored in one place.  Instead of cutting
and pasting table definitions, the page refers to the name of a box,
like <var/border-box/>, and lets XSL do the formatting.</p>

<s2 title="A Screen Box">

<p>The first element is a simple screen box.  Like the screen of the
following example, the <var/screen-box/> creates a rectangle with a
solid background.  In the following, the bgcolor and title are optional.</p>

<example title="Using screen-box">
&lt;screen-box bgcolor="#ff8080">
&lt;title>A Sample Box&lt;/title>
This is a little bit of data.
&lt;/screen-box>
</example>

<p>The example, with title looks as follows, basically the same as the
example above.</p>

<center>
<table cellspacing="3" cellpadding="3"
       border="0" width="60%" bgcolor="#ff8080">
<caption>A Sample Box</caption>
<tr><td>
This is a little bit of data.
</td></tr>
</table>
</center>

<p>The XSL template gives additional flexibility to the tag.  That
complicates the template slightly.  Any attribute in the screen-box
will be automatically added to the table.  In addition, the &lt;title>
tag is optional adding an extra $if.</p>

<example title="screen-box XSL">
screen-box &lt;&lt;
  &lt;table cellpadding="3" cellspacing="0"
         border="0" width="100%" bgcolor="silver">

    $for-each(@*) &lt;&lt; $copy(); >>

    $if (title) &lt;&lt;
      &lt;caption>$apply-templates(title/node());&lt;/caption>
    >>

    &lt;tr>&lt;td>
      $apply-templates(node()[name(.)!="title"]);
    &lt;/td>&lt;/tr>
  &lt;/table>
>>
</example>

</s2>

<s2 title="A Border Box">

<p>The second box is just a different style.  It has a colored border
and a colored in title bar.  The HTML is entirely different, but by
using the stylesheet, the XML source can be identical.  The XML
specifies the formatting and the stylesheet carries it out.</p>

<example title="Using border-box">
&lt;border-box bgcolor="#ff8080">
&lt;title>A Sample Box&lt;/title>
This is a little bit of data.
&lt;/border-box>
</example>

<p>With a similar XML source, the result is entirely different. </p>

<center>
<table cellspacing="3" cellpadding="3"
       border="0" width="60%" bgcolor="#ff8080">
<tr><td><font size="+1">A Sample Box</font></td></tr>
<tr><td>
    <table border=0 cellpadding=3 cellspacing=0 width="100%">
    <tr><td bgcolor="white">
      This is a little bit of data.
    </td></tr>
    </table>
</table>
</center>

<p>To provide the full flexibility of the screen-box, the attributes
must be split between the generated tables.  It's straightforward, if
a bit verbose.  The <var/border/> attribute, for example, needs to be
converted to a <var/cellpadding/> of an inner table.</p>

<example title="border-box stylesheet">
border-box &lt;&lt;
  &lt;table border=0 cellspacing=0 cellpadding=1
         width='100%' bgcolor="silver">
    $if (@border) &lt;&lt;
      $attribute(cellpadding) &lt;&lt; $(@border) >>
    >>

    $for-each(@*[name(.)!="border" and name(.)!="cellpadding"]) &lt;&lt;
      $copy();
    >>

  $if (title) &lt;&lt;
    &lt;tr>&lt;td>
      &lt;table border=0 cellpadding=0 cellspacing=0 width='100%'>
      &lt;tr>&lt;td>&lt;font size="+1">&nbsp;&lt;b>
            $apply-templates(title/node());
      &lt;/b>&lt;/font>&lt;/td>&lt;/tr>
      &lt;/table>
    &lt;/td>&lt;/tr>
  >>

  &lt;tr>&lt;td>
    &lt;table border=0 cellpadding=3 cellspacing=0 width='100%'>

      $for-each(@cellpadding) &lt;&lt; $copy(); >>

    &lt;tr>&lt;td bgcolor="white">
      $apply-templates(node()[name(.)!="title"]);
    &lt;/td>&lt;/tr>
    &lt;/table>
  &lt;/td>&lt;/tr>
  &lt;/table>
>>
</example>

</s2>

<s2 title="An Example Box">

<p>The example box shows nothing new technically, but does show an
important organizational difference.  screen-box and border-box
are formatting tags.  An <var/example/> tag is meaningful to the
source XML.  The advantage of an <var/example/> tag is that the
formatting can be changed meaningfully for an entire site.</p>

<p>It makes sense to change the formatting of an example from a
screen-box to a border-box.  It doesn't make sense to change the
formatting of the border-box to a screen-box.  By using more
meaningful tags like <var/example/>, the site can more easily change
to formatting to make it more readable.</p>

<example title="Using example">
&lt;example>
&lt;title>An Example Box&lt;/title>
This is a little bit of example data.
&lt;/example>
</example>

<center>
<table cellspacing="3" cellpadding="3"
       border="0" width="60%" bgcolor="#ff8080">
<tr><td><font size="+1">An Example Box</font></td></tr>
<tr><td>
    <table border=0 cellpadding=3 cellspacing=0 width="100%">
    <tr><td bgcolor="white">
      This is a little bit of example data.
    </td></tr>
    </table>
</table>
</center>

<p>Because the <var/example/> tag has a definite style, the XSL
implementation is simpler than the more general <var/border-box/> that
achieves a similar result.</p>

<example title="example stylesheet">
example &lt;&lt;
  &lt;table border=0 cellspacing=0 cellpadding=1
         width='100%' bgcolor="#ff8080">
  $if (title) &lt;&lt;
    &lt;tr>&lt;td>
      &lt;table border=0 cellpadding=0 cellspacing=0 width='100%'>
      &lt;tr>&lt;td>&lt;font size="+1">&nbsp;&lt;b>
            $apply-templates(title/node());
      &lt;/b>&lt;/font>&lt;/td>&lt;/tr>
      &lt;/table>
    &lt;/td>&lt;/tr>
  >>

  &lt;tr>&lt;td>
    &lt;table border=0 cellpadding=3 cellspacing=0 width='100%'>

    &lt;tr>&lt;td bgcolor="white">
      $apply-templates(node()[name(.)!="title"]);
    &lt;/td>&lt;/tr>
    &lt;/table>
  &lt;/td>&lt;/tr>
  &lt;/table>
>>
</example>

</s2>
</s1>