A document has been updated:
http://cocoon.zones.apache.org/daisy/documentation/601.html
Document ID: 601
Branch: main
Language: default
Name: Configuring the Cocoon Portal (unchanged)
Document Type: Document (unchanged)
Updated on: 8/15/05 1:14:55 PM
Updated by: Helma
A new version has been created, state: publish
Parts
=====
Content
-------
This part has been updated.
Mime type: text/xml (unchanged)
File name: (unchanged)
Size: 6659 bytes (previous version: 18916 bytes)
Content diff:
(168 equal lines skipped)
to render the layout object.</p>
<p>A renderer itself can be configured in various ways. The portal engine
uses
--- so called aspects (don't mess them with AOP), that are used to enhance to
+++ so called aspects (don't confuse them with AOP), that are used to enhance to
features of renderer, allowing - simplifying - a multiple inheritance which
is
not possible in Java. Have a look at the cocoon.xconf for the different
renderer
configurations.</p>
--- <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>...
--- <xsl:template match="/">
--- <html>
--- <head>
--- <link type="text/css" rel="stylesheet" href="page.css"/>
--- </head>
--- <body>
--- <table bgColor="#ffffff" border="0"
--- cellPadding="0" cellSpacing="0" width="100%">
--- <tbody>
---
--- <!-- header row -->
--- <tr>
--- <td colspan="2">
--- <table border="2" cellPadding="0" cellSpacing="0" width="100%">
--- <tbody>
--- <tr>
--- <td colspan="2" noWrap="" height="10" bgcolor="#DDDDDD">
--- </td>
--- </tr>
--- <tr>
--- <td bgcolor="#CCCCCC" height="100" align="center"
--- valign="middle" width="100%">
--- <font size="80pt">Cocoon Portal</font>
--- </td>
--- </tr>
--- <tr>
--- <td colspan="2" noWrap="" height="10" bgcolor="#DDDDDD">
--- </td>
--- </tr>
--- </tbody>
--- </table>
--- </td>
--- </tr>
---
--- <!-- content/tab row -->
--- <tr>
--- <td>
--- <xsl:apply-templates/>
--- </td>
--- </tr>
---
--- <!-- footer row -->
--- <tr>
--- <td colspan="2">
--- <table border="2" cellPadding="0" cellSpacing="0" width="100%">
--- <tbody>
--- <tr>
--- <td colspan="2" noWrap="" height="10" bgcolor="#DDDDDD">
--- <img height="1" src="sunspotdemoimg-space.gif" width="1"/>
--- </td>
--- </tr>
--- <tr>
--- <td colspan="2" noWrap="" height="30" bgcolor="#CCCCCC">
--- <img height="1" src="sunspotdemoimg-space.gif" width="1"/>
--- </td>
--- </tr>
--- </tbody>
--- </table>
--- </td>
--- </tr>
--- </tbody>
--- </table>
--- </body>
--- </html>
--- </xsl:template>
--- ...
--- </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>...
--- <!-- Process a tab -->
--- <xsl:template match="tab-layout">
--- <!-- ~~~~~ Begin body table ~~~~~ -->
--- <table border="2" cellpadding="0" cellspacing="0" width="100%">
--- <!-- ~~~~~ Begin tab row ~~~~~ -->
--- <tr>
--- <td>
--- <table summary="tab bar" border="2" cellpadding="0"
--- cellspacing="0" width="100%">
--- <tr vAlign="top">
--- <xsl:for-each select="named-item">
--- <xsl:choose>
--- <xsl:when test="@selected">
--- <!-- ~~~~~ begin selected tab ~~~~~ -->
--- <td valign="middle" bgcolor="#DDDDDD">
--- <b>
--- <a href="[EMAIL PROTECTED]">
--- <font color="#000000">
--- <xsl:value-of select="@name"/>
--- </font>
--- </a>
--- </b>
--- </td>
--- <!-- ~~~~~ end selected tab ~~~~~ -->
--- </xsl:when>
--- <xsl:otherwise>
--- <!-- ~~~~~ begin non selected tab ~~~~~ -->
--- <td valign="middle" bgcolor="#CCCCCC" >
--- <div class="tab">
--- <a href="[EMAIL PROTECTED]">
--- <xsl:value-of select="@name"/>
--- </a>
--- </div>
--- </td>
--- <!-- ~~~~~ end non selected tab ~~~~~ -->
--- </xsl:otherwise>
--- </xsl:choose>
--- </xsl:for-each>
--- <!-- ~~~~~ last "blank" tab ~~~~~ -->
--- <td width="99%" bgcolor="#CCCCCC" align="right">
--- </td>
--- </tr>
--- </table>
--- </td>
--- </tr>
--- <!-- ~~~~~ End tab row ~~~~~ -->
---
--- <!-- ~~~~~ Begin content row ~~~~~ -->
--- <tr>
--- <td bgcolor="#FFFFFF">
--- <xsl:apply-templates/>
--- </td>
--- </tr>
--- <!-- ~~~~~ End content row ~~~~~ -->
--- </table>
--- </xsl:template>
--- ...</pre>
---
--- <p>The first row that is created here contains the definition of the tabs.
The
--- <tt><xsl:choose></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>...
--- <!-- Process a Column -->
--- <xsl:template match="column-layout">
---
--- ...
---
--- <table border="{$border}" cellSpacing="0" cellpadding="0"
--- width="100%">
--- <xsl:if test="@bgcolor">
--- <xsl:attribute name="bgcolor">
--- <xsl:value-of select="@bgcolor" />
--- </xsl:attribute>
--- </xsl:if>
--- <tr vAlign="top">
--- <xsl:for-each select="item">
--- <td>
--- <xsl:if test="@bgcolor">
--- <xsl:attribute name="bgcolor">
--- <xsl:value-of select="@bgcolor" />
--- </xsl:attribute>
--- </xsl:if>
--- <xsl:if test="@width">
--- <xsl:attribute name="width">
--- <xsl:value-of select="@width" />
--- </xsl:attribute>
--- </xsl:if>
--- <xsl:apply-templates />
--- </td>
--- </xsl:for-each>
--- </tr>
--- </table>
--- </xsl:template>
--- ...</pre>
---
--- <p>The main template match node of the <tt>row.xsl</tt> stylesheet:</p>
---
--- <pre>...
--- <!-- Process a row -->
--- <xsl:template match="row-layout">
---
--- ...
---
--- <table border="{$border}" cellSpacing="10" width="100%">
--- <xsl:if test="@bgcolor">
--- <xsl:attribute name="bgcolor">
--- <xsl:value-of select="@bgcolor" />
--- </xsl:attribute>
--- </xsl:if>
--- <xsl:for-each select="item">
--- <tr vAlign="top">
--- <xsl:if test="@bgcolor">
--- <xsl:attribute name="bgcolor">
--- <xsl:value-of select="@bgcolor" />
--- </xsl:attribute>
--- </xsl:if>
--- <td>
--- <xsl:apply-templates />
--- </td>
--- </tr>
--- </xsl:for-each>
--- </table>
--- </xsl:template>
--- ...</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>...
--- <xsl:template match="window">
---
--- ...
---
--- <table border="2" cellSpacing="0" cellpadding="0" width="100%">
--- <tr vAlign="top">
--- <td bgColor="{$bgColor}" valign="middle">
--- <font>
--- <xsl:attribute name="color">#ffffff</xsl:attribute>
--- <xsl:attribute name="face">Arial</xsl:attribute>
--- <xsl:attribute name="size">2</xsl:attribute>
--- <xsl:choose>
--- <xsl:when test="@title">
--- <b><xsl:value-of select="@title"/></b>
--- </xsl:when>
--- <xsl:otherwise>
--- <b><xsl:value-of select="title"/></b>
--- </xsl:otherwise>
--- </xsl:choose>
--- </font>
--- </td>
--- <td align="right" bgColor="{$bgColor}">
--- <xsl:if test="fullscreen-uri">
--- <a href="{fullscreen-uri}">
--- <img src="customize.gif" border="0" alt="Full Screen"/>
--- </a>
--- </xsl:if>
--- <xsl:if test="maxpage-uri">
--- <a href="{maxpage-uri}">
--- <img src="show.gif" border="0" alt="Max Page"/>
--- </a>
--- </xsl:if>
--- <xsl:if test="maximize-uri">
--- <a href="{maximize-uri}">
--- <img src="maximize.gif" border="0" alt="Maximize"/>
--- </a>
--- </xsl:if>
--- <xsl:if test="minimize-uri">
--- <a href="{minimize-uri}">
--- <img src="minimize.gif" border="0" alt="Minimize"/>
--- </a>
--- </xsl:if>
--- <xsl:if test="remove-uri">
--- <a href="{remove-uri}">
--- <img src="delete.gif" border="0" alt="Delete"/>
--- </a>
--- </xsl:if>
--- </td>
--- </tr>
--- <tr>
--- <td colSpan="2">
--- <xsl:apply-templates select="content"/>
--- </td>
--- </tr>
--- </table>
--- </xsl:template>
--- ...</pre>
---
<h1>Further topics</h1>
</body>
(1 equal lines skipped)
Fields
======
no changes
Links
=====
no changes
Custom Fields
=============
no changes
Collections
===========
no changes
