vgritsenko 2003/07/30 20:20:07
Modified: src/documentation/xdocs/developing/portal index.xml
Log:
add <p/> placeholders under chapters. it looks better this way.
Revision Changes Path
1.6 +152 -140 cocoon-2.1/src/documentation/xdocs/developing/portal/index.xml
Index: index.xml
===================================================================
RCS file: /home/cvs/cocoon-2.1/src/documentation/xdocs/developing/portal/index.xml,v
retrieving revision 1.5
retrieving revision 1.6
diff -u -r1.5 -r1.6
--- index.xml 27 Jun 2003 07:10:52 -0000 1.5
+++ index.xml 31 Jul 2003 03:20:07 -0000 1.6
@@ -1,5 +1,6 @@
<?xml version="1.0"?>
<!DOCTYPE document PUBLIC "-//APACHE//DTD Documentation V1.0//EN"
"../../dtd/document-v10.dtd">
+
<document>
<header>
<title>Configuring the Cocoon Portal</title>
@@ -7,96 +8,106 @@
</authors>
<notice>This document is under development.</notice>
<abstract>
- This document describes the use and configuration
- of the (new) cocoon portal block.
+ This document describes the use and configuration
+ of the (new) cocoon portal block.
</abstract>
</header>
<body>
+ <s1 title="Introducing the Cocoon Portal">
+ <p>
+ This document describes the use and configuration
+ of the (new) cocoon portal that you can find in the "portal" block.
+ (Don't mix this with the older portal version that you can
+ find in the "portal-fw" block.)
+ </p>
+ <s2 title="Important parts of the Cocoon Portal">
+ <p>
+ </p>
+ </s2>
+ <s2 title="How is a portal page created by Cocoon?">
+ <p>
+ </p>
+ </s2>
+ <s2 title="I want to build my own portal! An approach">
+ <p>
+ </p>
+ </s2>
+ </s1>
- <s1 title="Introducing the Cocoon Portal">
+ <s1 title="Configuring the Portal contents">
+ <s2 title="Configuring Coplets">
<p>
- This document describes the use and configuration
- of the (new) cocoon portal that you can find in the "portal" block.
- (Don't mix this with the older portal version that you can
- find in the "portal-fw" block.)
</p>
- <s2 title="Important parts of the Cocoon Portal">
- </s2>
- <s2 title="How is a portal page created by Cocoon?">
- </s2>
- <s2 title="I want to build my own portal! An approach">
- </s2>
- </s1>
-
- <s1 title="Configuring the Portal contents">
- <s2 title="Configuring Coplets">
- </s2>
- <s2 title="Configuring the arrangement of the defined Coplets">
- </s2>
- <s2 title="...">
- </s2>
- </s1>
-
- <s1 title="Create a new skin for your portal">
-
- <p>This section will explain the concepts of the portal layout,
- considering the <code>skins/basic/</code> skin provided with cocoon,
- and will describe how to create a new skin by extending the
- existing stylesheets.</p>
- <note>The skin path can be changed in the portal's sitemap. There is
- a <code>global-variable</code> specifying the path to the skin
folder.</note>
- <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>
- <figure alt="Parts of the portal" height="300"
src="/images/portal-parts.gif" width="400"></figure>
- <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>
- <s2 title="The skin's stylesheets">
- <p>If we take a look at the <code>skins/basic/styles</code>
directory, we
- find a number of stylesheets:
- </p>
- <ul>
- <li><code>portal-page.xsl</code>: Creates final HTML
page</li>
- <li><code>tab.xsl</code>: layout of the tab row.</li>
- <li><code>window.xsl</code>: coplet window layout</li>
- <li><code>column.xsl</code>: layout of a column</li>
- <li><code>row.xsl</code>: layout of a row</li>
- <li><code>login-page.xsl</code>: layout of the login
page</li>
- </ul>
- <p>The <code>window.xsl</code> 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 <code>tab.xsl</code> stylesheet.</p>
- <p>The <code>portal-page.xsl</code> 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>
- <note>The <code>tab.xsl</code>, <code>column.xsl</code>,
- <code>row.xsl</code> and <code>window.xsl</code> stylesheets
- are used by the portal components directly and won't be
found
- anywhere in the sitemap. The <code>cocoon.xconf</code>
- defines which stylesheets will be used by the portal.</note>
- </s2>
- <s2 title="The portal-page.xsl">
- <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>
- <source>
+ </s2>
+ <s2 title="Configuring the arrangement of the defined Coplets">
+ <p>
+ </p>
+ </s2>
+ <s2 title="...">
+ <p>
+ </p>
+ </s2>
+ </s1>
+
+ <s1 title="Create a new skin for your portal">
+ <p>This section will explain the concepts of the portal layout,
+ considering the <code>skins/basic/</code> skin provided with cocoon,
+ and will describe how to create a new skin by extending the
+ existing stylesheets.</p>
+ <note>The skin path can be changed in the portal's sitemap. There is
+ a <code>global-variable</code> specifying the path to the skin
folder.</note>
+ <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>
+ <figure alt="Parts of the portal" height="300"
src="/images/portal-parts.gif" width="400"></figure>
+ <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>
+ <s2 title="The skin's stylesheets">
+ <p>If we take a look at the <code>skins/basic/styles</code>
directory, we
+ find a number of stylesheets:
+ </p>
+ <ul>
+ <li><code>portal-page.xsl</code>: Creates final HTML page</li>
+ <li><code>tab.xsl</code>: layout of the tab row.</li>
+ <li><code>window.xsl</code>: coplet window layout</li>
+ <li><code>column.xsl</code>: layout of a column</li>
+ <li><code>row.xsl</code>: layout of a row</li>
+ <li><code>login-page.xsl</code>: layout of the login page</li>
+ </ul>
+ <p>The <code>window.xsl</code> 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 <code>tab.xsl</code> stylesheet.</p>
+ <p>The <code>portal-page.xsl</code> 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>
+ <note>The <code>tab.xsl</code>, <code>column.xsl</code>,
+ <code>row.xsl</code> and <code>window.xsl</code> stylesheets
+ are used by the portal components directly and won't be found
+ anywhere in the sitemap. The <code>cocoon.xconf</code>
+ defines which stylesheets will be used by the portal.</note>
+ </s2>
+ <s2 title="The portal-page.xsl">
+ <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>
+ <source>
<![CDATA[...
<xsl:template match="/">
<html>
@@ -164,13 +175,13 @@
</html>
</xsl:template>
...]]>
- </source>
- </s2>
- <s2 title="The tab.xsl">
- <p>From the <code>portal-page.xsl</code> stylesheet, we will
now
- move upwards in the XSL transformation steps and take a look
at the
- stylesheet that was processed before, the
<code>tab.xsl</code>.</p>
- <p>Again, this source snippet shows the main template match
node of the stylesheet:</p>
+ </source>
+ </s2>
+ <s2 title="The tab.xsl">
+ <p>From the <code>portal-page.xsl</code> stylesheet, we will now
+ move upwards in the XSL transformation steps and take a look at the
+ stylesheet that was processed before, the <code>tab.xsl</code>.</p>
+ <p>Again, this source snippet shows the main template match node of
the stylesheet:</p>
<source><![CDATA[...
<!-- Process a tab -->
<xsl:template match="tab-layout">
@@ -229,33 +240,33 @@
</table>
</xsl:template>
...]]></source>
- <p>The first row that is created here contains the definition of the
tabs.
- The <code><xsl:choose></code> element differentiates between the
- currently selected tab and all other tabs. The <code>@selected</code>
- attribute is generated by the portal and can be accessed as shown
- above. As well, the portal provides the tab's
<code>@parameter</code>
- (usually the tab's link) and <code>@name</code> attributes. </p>
-
- <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.</note>
-
- <p>Nice looking tabs can become pretty complex, take a look at the
- <code>tab.xml</code> stylesheet in the <code>skins/common/</code>
- 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 <code>columns.xsl</code> stylesheet before - and before that by
the
- <code>row.xsl</code> stylesheet.</p>
- </s2>
- <s2 title="The column.xsl and row.xsl">
- <p>The <code>column.xsl</code> and <code>row.xsl</code> 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 <code>column.xsl</code>
stylesheet:</p>
- <source><![CDATA[...
+ <p>The first row that is created here contains the definition of the tabs.
+ The <code><xsl:choose></code> element differentiates between the
+ currently selected tab and all other tabs. The <code>@selected</code>
+ attribute is generated by the portal and can be accessed as shown
+ above. As well, the portal provides the tab's <code>@parameter</code>
+ (usually the tab's link) and <code>@name</code> attributes. </p>
+
+ <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.</note>
+
+ <p>Nice looking tabs can become pretty complex, take a look at the
+ <code>tab.xml</code> stylesheet in the <code>skins/common/</code>
+ 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 <code>columns.xsl</code> stylesheet before - and before that by the
+ <code>row.xsl</code> stylesheet.</p>
+ </s2>
+ <s2 title="The column.xsl and row.xsl">
+ <p>The <code>column.xsl</code> and <code>row.xsl</code> 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 <code>column.xsl</code>
stylesheet:</p>
+ <source><![CDATA[...
<!-- Process a Column -->
<xsl:template match="column-layout">
@@ -288,8 +299,8 @@
</table>
</xsl:template>
...]]></source>
- <p>The main template match node of the <code>row.xsl</code>
stylesheet:</p>
- <source><![CDATA[...
+ <p>The main template match node of the <code>row.xsl</code>
stylesheet:</p>
+ <source><![CDATA[...
<!-- Process a row -->
<xsl:template match="row-layout">
@@ -316,20 +327,20 @@
</table>
</xsl:template>
...]]></source>
- </s2>
- <s2 title="The window.xsl">
- <p>The <code>window.xsl</code> 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 <code>images/</code> 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
- <code>skins/common/</code> skin.</p>
-
- <p>The listing below shows the main template match node:</p>
- <source><![CDATA[...
+ </s2>
+ <s2 title="The window.xsl">
+ <p>The <code>window.xsl</code> 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 <code>images/</code> 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
+ <code>skins/common/</code> skin.</p>
+
+ <p>The listing below shows the main template match node:</p>
+ <source><![CDATA[...
<xsl:template match="window">
...
@@ -340,7 +351,7 @@
<font>
<xsl:attribute name="color">#ffffff</xsl:attribute>
<xsl:attribute name="face">Arial</xsl:attribute>
- <xsl:attribute name="size">2</xsl:attribute>
+ <xsl:attribute name="size">2</xsl:attribute>
<xsl:choose>
<xsl:when test="@title">
<b><xsl:value-of select="@title"/></b>
@@ -348,7 +359,7 @@
<xsl:otherwise>
<b><xsl:value-of select="title"/></b>
</xsl:otherwise>
- </xsl:choose>
+ </xsl:choose>
</font>
</td>
<td align="right" bgColor="{$bgColor}">
@@ -387,11 +398,12 @@
</table>
</xsl:template>
...]]></source>
- </s2>
+ </s2>
</s1>
- <s1 title="Further topics">
- </s1>
-
+ <s1 title="Further topics">
+ <p>
+ </p>
+ </s1>
</body>
</document>
