cocoon-docs mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From da...@cocoon.zones.apache.org
Subject [DAISY] Created: Layout and Skins
Date Mon, 15 Aug 2005 13:11:14 GMT
A new document has been created.

http://cocoon.zones.apache.org/daisy/documentation/661.html

Document ID: 661
Branch: main
Language: default
Name: Layout and Skins
Document Type: Document
Created: 8/15/05 1:11:09 PM
Creator (owner): Helma
State: publish

Parts
=====

Content
-------
Mime type: text/xml
Size: 12290 bytes
Content:
<html>
<body>

<h1>Create a new skin for your portal</h1>

<p>This section will explain the concepts of the portal layout, considering the
<tt>skins/basic/</tt> skin provided with cocoon, and will describe how to create
a new skin by extending the existing stylesheets.</p>

<p class="note">The skin path can be changed in the portal's sitemap. There is a
<tt>global-variable</tt> specifying the path to the skin folder.</p>

<p>The basic cocoon portal skin is a nice and simple example how to visualize a
portal. There are several elements that allow to customize the look and feel of
the portal. A portal with the basic skin consists of</p>

<ul>
<li>a <em>header</em></li>
<li>a <em>tab row</em></li>
<li>a <em>content section</em> containing the coplet windows</li>
<li>and a <em>footer </em></li>
</ul>

<p align="center"><img src="daisy:391"/></p>

<p>The tab row is actually a part of the content section. As well, a tab row can
be provided to any coplet window.</p>

<h2>The skin's stylesheets</h2>

<p>If we take a look at the <tt>skins/basic/styles</tt> directory, we find
a
number of stylesheets:</p>

<ul>
<li><tt>portal-page.xsl</tt>: Creates final HTML page</li>
<li><tt>tab.xsl</tt>: layout of the tab row.</li>
<li><tt>window.xsl</tt>: coplet window layout</li>
<li><tt>column.xsl</tt>: layout of a column</li>
<li><tt>row.xsl</tt>: layout of a row</li>
<li><tt>login-page.xsl</tt>: layout of the login page</li>
</ul>

<p>The <tt>window.xsl</tt> stylesheet determines the layout of a coplet
window.
Normally, a coplet window will contain a header row with a title and buttons
like minimize, close, etc.</p>

<p>These coplet windows are arranged in rows and columns to create the
arrangement typical for portals. There can be several rows per column and
several columns in the content section. So the thinking is a little different
than in usual HTML tables.</p>

<p>The content section or content row usually has a tab row located at the top
and the coplet windows are arranged below. The layout of the tabs is specified
in the <tt>tab.xsl</tt> stylesheet.</p>

<p>The <tt>portal-page.xsl</tt> stylesheet encapsulates the content section
with
the tab row and allows to define a page header and a footer. This is probably
the first stylesheet we want to take a closer look at.</p>

<p class="note">The <tt>tab.xsl</tt>, <tt>column.xsl</tt>, <tt>row.xsl</tt>
and
<tt>window.xsl</tt> stylesheets are used by the portal components directly and
won't be found anywhere in the sitemap. The <tt>cocoon.xconf</tt> defines which
stylesheets will be used by the portal.</p>

<h2>The portal-page.xsl</h2>

<p>Here is the place to change the design of the header and footer row. This
stylesheet is used to construct the final HTML page, which displays the portal.
The code sample here displays the main template match node of the stylesheet.
</p>

<pre>...
&lt;xsl:template match="/"&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;link type="text/css" rel="stylesheet" href="page.css"/&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;table bgColor="#ffffff" border="0" 
  cellPadding="0" cellSpacing="0" width="100%"&gt;
  &lt;tbody&gt; 

  &lt;!-- header row --&gt;
  &lt;tr&gt;
  &lt;td colspan="2"&gt; 
   &lt;table border="2" cellPadding="0" cellSpacing="0" width="100%"&gt;
    &lt;tbody&gt; 
     &lt;tr&gt; 
      &lt;td colspan="2" noWrap="" height="10" bgcolor="#DDDDDD"&gt;
      &lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt; 
      &lt;td bgcolor="#CCCCCC" height="100" align="center" 
      valign="middle" width="100%"&gt;
      &lt;font size="80pt"&gt;Cocoon Portal&lt;/font&gt;
      &lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt; 
      &lt;td colspan="2" noWrap="" height="10" bgcolor="#DDDDDD"&gt;
      &lt;/td&gt;
     &lt;/tr&gt;
    &lt;/tbody&gt;
   &lt;/table&gt;
  &lt;/td&gt;
  &lt;/tr&gt;

  &lt;!-- content/tab row --&gt;
  &lt;tr&gt;
  &lt;td&gt;
   &lt;xsl:apply-templates/&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;!-- footer row --&gt;
  &lt;tr&gt;
  &lt;td colspan="2"&gt; 
   &lt;table border="2" cellPadding="0" cellSpacing="0" width="100%"&gt;
    &lt;tbody&gt; 
     &lt;tr&gt; 
      &lt;td colspan="2" noWrap="" height="10" bgcolor="#DDDDDD"&gt;
       &lt;img height="1" src="sunspotdemoimg-space.gif" width="1"/&gt;
      &lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt; 
      &lt;td colspan="2" noWrap="" height="30" bgcolor="#CCCCCC"&gt;
       &lt;img height="1" src="sunspotdemoimg-space.gif" width="1"/&gt;
      &lt;/td&gt;
     &lt;/tr&gt;
    &lt;/tbody&gt;
   &lt;/table&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
 &lt;/tbody&gt;
 &lt;/table&gt;
 &lt;/body&gt;
&lt;/html&gt;
&lt;/xsl:template&gt;
...
            </pre>

<h2>The tab.xsl</h2>

<p>From the <tt>portal-page.xsl</tt> stylesheet, we will now move upwards
in the
XSL transformation steps and take a look at the stylesheet that was processed
before, the <tt>tab.xsl</tt>.</p>

<p>Again, this source snippet shows the main template match node of the
stylesheet:</p>

<pre>...
&lt;!-- Process a tab  --&gt;
&lt;xsl:template match="tab-layout"&gt;
&lt;!-- ~~~~~ Begin body table ~~~~~ --&gt;
&lt;table border="2" cellpadding="0" cellspacing="0" width="100%"&gt;
 &lt;!-- ~~~~~ Begin tab row ~~~~~ --&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;table summary="tab bar" border="2" cellpadding="0" 
    cellspacing="0" width="100%"&gt;
  &lt;tr vAlign="top"&gt;
   &lt;xsl:for-each select="named-item"&gt;
    &lt;xsl:choose&gt;
     &lt;xsl:when test="@selected"&gt;
     &lt;!-- ~~~~~ begin selected tab ~~~~~ --&gt;
     &lt;td valign="middle" bgcolor="#DDDDDD"&gt;
      &lt;b&gt;
       &lt;a href="{@parameter}"&gt;
        &lt;font color="#000000"&gt;
         &lt;xsl:value-of select="@name"/&gt;
        &lt;/font&gt;
       &lt;/a&gt;
      &lt;/b&gt;
     &lt;/td&gt;
     &lt;!-- ~~~~~ end selected tab ~~~~~ --&gt;
    &lt;/xsl:when&gt;
    &lt;xsl:otherwise&gt;
     &lt;!-- ~~~~~ begin non selected tab ~~~~~ --&gt;
     &lt;td valign="middle" bgcolor="#CCCCCC" &gt;
      &lt;div class="tab"&gt;
       &lt;a href="{@parameter}"&gt;
        &lt;xsl:value-of select="@name"/&gt;
       &lt;/a&gt;
      &lt;/div&gt;
     &lt;/td&gt;
     &lt;!-- ~~~~~ end non selected tab ~~~~~ --&gt;
    &lt;/xsl:otherwise&gt;
   &lt;/xsl:choose&gt;
   &lt;/xsl:for-each&gt;
   &lt;!-- ~~~~~ last "blank" tab ~~~~~ --&gt;
    &lt;td width="99%" bgcolor="#CCCCCC" align="right"&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;!-- ~~~~~ End tab row ~~~~~ --&gt;

  &lt;!-- ~~~~~ Begin content row ~~~~~ --&gt;
  &lt;tr&gt;
   &lt;td bgcolor="#FFFFFF"&gt;
    &lt;xsl:apply-templates/&gt;
   &lt;/td&gt;
  &lt;/tr&gt;
  &lt;!-- ~~~~~ End content row ~~~~~ --&gt;
&lt;/table&gt;
&lt;/xsl:template&gt;
...</pre>

<p>The first row that is created here contains the definition of the tabs. The
<tt>&lt;xsl:choose&gt;</tt> element differentiates between the currently
selected tab and all other tabs. The <tt>@selected</tt> attribute is generated
by the portal and can be accessed as shown above. As well, the portal provides
the tab's <tt>@parameter</tt> (usually the tab's link) and <tt>@name</tt>
attributes.</p>

<p class="note">Depending on the configuration of the portal, it is possible
that tabbed areas are nested inside each other. So be careful how a tab row
might look in the middle of another content section.</p>

<p>Nice looking tabs can become pretty complex, take a look at the
<tt>tab.xml</tt> stylesheet in the <tt>skins/common/</tt> skin to
see another
example.</p>

<p>Below the tabs, another table cell is defined that will be filled with the
contents of the tabbed area. This content will have been processed by the
<tt>columns.xsl</tt> stylesheet before - and before that by the <tt>row.xsl</tt>
stylesheet.</p>

<h2>The column.xsl and row.xsl</h2>

<p>The <tt>column.xsl</tt> and <tt>row.xsl</tt> stylesheets
define the look of
the tables in which the coplet windows will be placed. Usually, nothing exciting
happens in these stylesheets. Here is a listing of the important parts, just to
give a complete overview.</p>

<p>The main template match node of the <tt>column.xsl</tt> stylesheet:</p>

<pre>...
&lt;!-- Process a Column  --&gt;
&lt;xsl:template match="column-layout"&gt;
 
   ...
 
 &lt;table border="{$border}" cellSpacing="0" cellpadding="0" 
    width="100%"&gt;
  &lt;xsl:if test="@bgcolor"&gt;
   &lt;xsl:attribute name="bgcolor"&gt;
    &lt;xsl:value-of select="@bgcolor" /&gt; 
   &lt;/xsl:attribute&gt;
  &lt;/xsl:if&gt;
  &lt;tr vAlign="top"&gt;
   &lt;xsl:for-each select="item"&gt;
    &lt;td&gt;
     &lt;xsl:if test="@bgcolor"&gt;
      &lt;xsl:attribute name="bgcolor"&gt;
       &lt;xsl:value-of select="@bgcolor" /&gt; 
      &lt;/xsl:attribute&gt;
     &lt;/xsl:if&gt;
     &lt;xsl:if test="@width"&gt;
      &lt;xsl:attribute name="width"&gt;
       &lt;xsl:value-of select="@width" /&gt; 
      &lt;/xsl:attribute&gt;
     &lt;/xsl:if&gt;
     &lt;xsl:apply-templates /&gt;
    &lt;/td&gt;
   &lt;/xsl:for-each&gt;
  &lt;/tr&gt;
 &lt;/table&gt;
&lt;/xsl:template&gt;
...</pre>

<p>The main template match node of the <tt>row.xsl</tt> stylesheet:</p>

<pre>...
&lt;!-- Process a row  --&gt;
&lt;xsl:template match="row-layout"&gt;

   ...
   
 &lt;table border="{$border}" cellSpacing="10" width="100%"&gt;
  &lt;xsl:if test="@bgcolor"&gt;
   &lt;xsl:attribute name="bgcolor"&gt;
    &lt;xsl:value-of select="@bgcolor" /&gt; 
   &lt;/xsl:attribute&gt;
  &lt;/xsl:if&gt;
  &lt;xsl:for-each select="item"&gt;
   &lt;tr vAlign="top"&gt;
    &lt;xsl:if test="@bgcolor"&gt;
     &lt;xsl:attribute name="bgcolor"&gt;
      &lt;xsl:value-of select="@bgcolor" /&gt; 
     &lt;/xsl:attribute&gt;
    &lt;/xsl:if&gt;
    &lt;td&gt;
     &lt;xsl:apply-templates /&gt;
    &lt;/td&gt;
   &lt;/tr&gt;
  &lt;/xsl:for-each&gt;
 &lt;/table&gt;
&lt;/xsl:template&gt;
...</pre>

<h2>The window.xsl</h2>

<p>The <tt>window.xsl</tt> stylesheet determines the design of the coplet
windows and probably takes the most design effort compared to the other
stylesheets. A coplet window consists of a table header with the window title
and a number of buttons like close, minimize, maximize etc. The basic skin
provides some images in the <tt>images/</tt> subfolder. The rest of the window
will be filled with the coplet content, depending on the configuration of the
coplet.</p>

<p>A slightly more complex example can be found in the <tt>skins/common/</tt>
skin.</p>

<p>The listing below shows the main template match node:</p>

<pre>...
&lt;xsl:template match="window"&gt;

   ...
 
&lt;table border="2" cellSpacing="0" cellpadding="0" width="100%"&gt;
 &lt;tr vAlign="top"&gt;
  &lt;td bgColor="{$bgColor}" valign="middle"&gt;
   &lt;font&gt;
    &lt;xsl:attribute name="color"&gt;#ffffff&lt;/xsl:attribute&gt;
    &lt;xsl:attribute name="face"&gt;Arial&lt;/xsl:attribute&gt;
    &lt;xsl:attribute name="size"&gt;2&lt;/xsl:attribute&gt;    
    &lt;xsl:choose&gt;
     &lt;xsl:when test="@title"&gt;
      &lt;b&gt;&lt;xsl:value-of select="@title"/&gt;&lt;/b&gt;
     &lt;/xsl:when&gt;
     &lt;xsl:otherwise&gt;
      &lt;b&gt;&lt;xsl:value-of select="title"/&gt;&lt;/b&gt;
     &lt;/xsl:otherwise&gt;
    &lt;/xsl:choose&gt;    
   &lt;/font&gt;
  &lt;/td&gt;
  &lt;td align="right" bgColor="{$bgColor}"&gt;
   &lt;xsl:if test="fullscreen-uri"&gt;
    &lt;a href="{fullscreen-uri}"&gt;
     &lt;img src="customize.gif" border="0" alt="Full Screen"/&gt;
    &lt;/a&gt;
   &lt;/xsl:if&gt;
   &lt;xsl:if test="maxpage-uri"&gt;
    &lt;a href="{maxpage-uri}"&gt;
     &lt;img src="show.gif" border="0" alt="Max Page"/&gt;
    &lt;/a&gt;
   &lt;/xsl:if&gt;
   &lt;xsl:if test="maximize-uri"&gt;
    &lt;a href="{maximize-uri}"&gt;
     &lt;img src="maximize.gif" border="0" alt="Maximize"/&gt;
    &lt;/a&gt;
   &lt;/xsl:if&gt;
   &lt;xsl:if test="minimize-uri"&gt;
    &lt;a href="{minimize-uri}"&gt;
     &lt;img src="minimize.gif" border="0" alt="Minimize"/&gt;
    &lt;/a&gt;
   &lt;/xsl:if&gt;
   &lt;xsl:if test="remove-uri"&gt;
    &lt;a href="{remove-uri}"&gt;
     &lt;img src="delete.gif" border="0" alt="Delete"/&gt;
    &lt;/a&gt;
   &lt;/xsl:if&gt;
  &lt;/td&gt;
 &lt;/tr&gt;
  &lt;tr&gt;
   &lt;td colSpan="2"&gt;
    &lt;xsl:apply-templates select="content"/&gt;
   &lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
&lt;/xsl:template&gt;
...</pre>

</body>
</html>

Collections
===========
The document belongs to the following collections: documentation

Mime
View raw message