cocoon-cvs mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From cziege...@apache.org
Subject cvs commit: cocoon-2.1/src/blocks/linkrewriter/samples/bookdemo/docs book.xml
Date Wed, 25 Jun 2003 13:00:01 GMT
cziegeler    2003/06/25 06:00:01

  Modified:    src/documentation/xdocs index.xml
               src/documentation/xdocs/developing book.xml
               src/blocks/linkrewriter/samples/bookdemo/docs book.xml
  Added:       src/documentation/xdocs/developing/portal book.xml index.xml
  Log:
  Adding some docs to the new portal framework
  
  Revision  Changes    Path
  1.4       +1 -1      cocoon-2.1/src/documentation/xdocs/index.xml
  
  Index: index.xml
  ===================================================================
  RCS file: /home/cvs/cocoon-2.1/src/documentation/xdocs/index.xml,v
  retrieving revision 1.3
  retrieving revision 1.4
  diff -u -r1.3 -r1.4
  --- index.xml	29 Apr 2003 22:58:21 -0000	1.3
  +++ index.xml	25 Jun 2003 13:00:00 -0000	1.4
  @@ -42,7 +42,7 @@
       </s1>
       <s1 title="More News about Cocoon">
         <p>
  -Check out our <link href="news.html">news page</link> for more up-to-date news
about Cocoon.
  +Check out our <link href="http://cocoon.apache.org/news/">news page</link>
for more up-to-date news about Cocoon.
             </p>
       </s1>
       <figure src="images/cocoon-built.gif" alt="Built with Apache Cocoon"/>
  
  
  
  1.1                  cocoon-2.1/src/documentation/xdocs/developing/portal/book.xml
  
  Index: book.xml
  ===================================================================
  <?xml version="1.0"?>
  <!DOCTYPE book PUBLIC "-//APACHE//DTD Cocoon Documentation Book V1.0//EN" "../../dtd/book-cocoon-v10.dtd">
  
  <book software="Apache Cocoon" 
        title="Apache Cocoon Webapps Developer Documentation" 
        copyright="@year@ The Apache Software Foundation">
  
    <menu label="Navigation">
      <menu-item label="Main" href="../../index.html"/>
      <menu-item label="Dev Guide" href="../index.html"/>
    </menu>
  
    <menu label="Portal">
      <menu-item label="Introduction" href="index.html"/>
      <menu-item label="Authentication" href="../webapps/authentication.html"/>
    </menu>
  
  </book>
  
  
  
  
  
  
  1.1                  cocoon-2.1/src/documentation/xdocs/developing/portal/index.xml
  
  Index: index.xml
  ===================================================================
  <?xml version="1.0"?>
  <document> 
    <header> 
      <title>Configuring the Cocoon Portal</title> 
      <authors><person email="jgreenyer@s-und-n.de" name="Joel Greenyer"></person>

      </authors> 
      <notice>This document is under development.</notice> 
      <abstract>
      	This document describes the use and configuration 
      	of the cocoon portal
      </abstract> 
    </header> 
    <body> 
  
  	<section>
  		<title>Introducing the Cocoon Portal</title>
  		<section>
  			<title>Important parts of the Cocoon Portal</title>
  		</section>
  		<section>
  			<title>How is a portal page created by Cocoon?</title>
  		</section>
  		<section>
  			<title>I want to build my own portal! An approach</title>
  		</section>
  	</section>
  
  	<section>
  		<title>Configuring the Portal contents</title>
  		<section>
  			<title>Configuring Coplets</title>
  		</section>
  		<section>
  			<title>Configuring the arrangement of the defined Coplets</title>
  		</section>
  		<section>
  			<title>...</title>
  		</section>
  	</section>
  
  	<section>
  	  	<title>Create a new skin for your portal</title>
  
  		<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 
  	  	<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>
  		<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>
    		<section>
    			<title>The skin&apos;s stylesheets</title>
    			<p>If we take a look at the <code>skins/basic/styles</code> directory,
we 
    			find a number of stylesheets:
    			<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>
    			<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&apos;t be found 
    			anywhere in the sitemap. The <code>cocoon.xconf</code>
    			defines which stylesheets will be used by the portal.</note>
    			</section>
    			<section>
    				<title>The portal-page.xsl</title>
    				<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>
   <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>
  ...]]>
  		    </source>
    		</section>
    		<section>
    			<title>The tab.xsl</title>
    			<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">
  <!-- ~~~~~ 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="{@parameter}">
          <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="{@parameter}">
          <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>
  ...]]></source>
  		<p>The first row that is created here contains the definition of the tabs. 
  		The <code>&lt;xsl:choose&gt;</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&apos;s <code>@parameter</code>
  		(usually the tab&apos;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>
    	</section>
    	<section>
    		<title>The column.xsl and row.xsl</title>
    		<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">
   
     ...
   
   <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>
  ...]]></source>
    		<p>The main template match node of the <code>row.xsl</code> stylesheet:</p>
    		<source><![CDATA[...
  <!-- 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>
  ...]]></source>
    	</section>
    	<section>
    		<title>The window.xsl</title>
    		<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">
  
     ...
   
  <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>
   <xsl:if test="status!=0">
    <tr>
     <td colSpan="2">
      <xsl:apply-templates select="content"/>
     </td>
    </tr>
   </xsl:if>
  </table>
  </xsl:template>
  ...]]></source>
    	</section>
    </section>
  
  	<section>
  		<title>Furter topics</title>
  	</section>
  
    </body> 
  </document>
  
  
  1.2       +4 -0      cocoon-2.1/src/documentation/xdocs/developing/book.xml
  
  Index: book.xml
  ===================================================================
  RCS file: /home/cvs/cocoon-2.1/src/documentation/xdocs/developing/book.xml,v
  retrieving revision 1.1
  retrieving revision 1.2
  diff -u -r1.1 -r1.2
  --- book.xml	9 Mar 2003 00:07:43 -0000	1.1
  +++ book.xml	25 Jun 2003 13:00:01 -0000	1.2
  @@ -23,6 +23,10 @@
       <menu-item label="Developing Webapps" href="webapps/index.html"/>
     </menu>
   
  +  <menu label="Portal">
  +    <menu-item label="Building a portal" href="portal/index.html"/>
  +  </menu>
  +  
     <menu label="Blocks">
       <menu-item label="Connect to SAP R/3" href="web3.html"/>
     </menu>
  
  
  
  1.3       +1 -1      cocoon-2.1/src/blocks/linkrewriter/samples/bookdemo/docs/book.xml
  
  Index: book.xml
  ===================================================================
  RCS file: /home/cvs/cocoon-2.1/src/blocks/linkrewriter/samples/bookdemo/docs/book.xml,v
  retrieving revision 1.2
  retrieving revision 1.3
  diff -u -r1.2 -r1.3
  --- book.xml	13 Mar 2003 09:00:31 -0000	1.2
  +++ book.xml	25 Jun 2003 13:00:01 -0000	1.3
  @@ -7,7 +7,7 @@
   
     <menu label="About">
       <menu-item label="Index" href="index.html"/>
  -    <menu-item label="News" href="news.html"/>
  +    <menu-item label="News" href="http://cocoon.apache.org/news/"/>
       <menu-item label="License" href="license.html"/>
       <external label="Download" href="http://cocoon.apache.org/dist/"/>
     </menu>
  
  
  

Mime
View raw message