cocoon-docs mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From da...@cocoon.zones.apache.org
Subject [DAISY] Updated: Configuring the Cocoon Portal
Date Mon, 15 Aug 2005 13:15:14 GMT
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>...
--- &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>
--- 
    <h1>Further topics</h1>
    
    </body>
(1 equal lines skipped)


Fields
======
no changes

Links
=====
no changes

Custom Fields
=============
no changes

Collections
===========
no changes

Mime
View raw message