You are viewing a plain text version of this content. The canonical link for it is here.
Posted to svn@forrest.apache.org by cr...@apache.org on 2005/06/23 07:36:34 UTC
svn commit: r193078 [39/65] - in /forrest/site: ./ docs_0_60/
docs_0_60/howto/ docs_0_60/howto/bugzilla-patch/
docs_0_60/howto/bugzilla-patch/my-images/ docs_0_60/howto/multi/
docs_0_60/images/ docs_0_70/ docs_0_70/howto/ docs_0_70/howto/cvs-ssh/
docs_...
Added: forrest/site/docs_0_80/howto/howto-corner-images.html
URL: http://svn.apache.org/viewcvs/forrest/site/docs_0_80/howto/howto-corner-images.html?rev=193078&view=auto
==============================================================================
--- forrest/site/docs_0_80/howto/howto-corner-images.html (added)
+++ forrest/site/docs_0_80/howto/howto-corner-images.html Wed Jun 22 22:36:19 2005
@@ -0,0 +1,631 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta content="Apache Forrest" name="Generator">
+<meta name="Forrest-version" content="0.8-dev">
+<meta name="Forrest-skin-name" content="pelt">
+<title>How to modify the color of generated corner images (v0.8-dev)</title>
+<link type="text/css" href="../../skin/basic.css" rel="stylesheet">
+<link media="screen" type="text/css" href="../../skin/screen.css" rel="stylesheet">
+<link media="print" type="text/css" href="../../skin/print.css" rel="stylesheet">
+<link type="text/css" href="../../skin/profile.css" rel="stylesheet">
+<script src="../../skin/getBlank.js" language="javascript" type="text/javascript"></script><script src="../../skin/getMenu.js" language="javascript" type="text/javascript"></script><script src="../../skin/fontsize.js" language="javascript" type="text/javascript"></script>
+<link rel="shortcut icon" href="../../favicon.ico">
+</head>
+<body onload="init()">
+<script type="text/javascript">ndeSetTextSize();</script>
+<div id="top">
+<div class="breadtrail">
+<a href="http://www.apache.org/">apache</a> > <a href="http://forrest.apache.org/">forrest</a><script src="../../skin/breadcrumbs.js" language="JavaScript" type="text/javascript"></script>
+</div>
+<div class="header">
+<div class="grouplogo">
+<a href="http://www.apache.org/"><img class="logoImage" alt="Apache" src="../../images/apache-forrest.png" title="The Apache Software Foundation"></a>
+</div>
+<div class="projectlogo">
+<a href="http://forrest.apache.org/"><img class="logoImage" alt="Forrest" src="../../images/project-logo.gif" title="Apache Forrest"></a>
+</div>
+<div class="searchbox">
+<form action="http://www.google.com/search" method="get" class="roundtopsmall">
+<input value="forrest.apache.org" name="sitesearch" type="hidden"><input onFocus="getBlank (this, 'Search the site with google');" size="25" name="q" id="query" type="text" value="Search the site with google">
+ <input attr="value" name="Search" value="Search" type="submit">
+</form>
+</div>
+<ul id="tabs">
+<li>
+<a class="base-not-selected" href="../../index.html">Welcome</a>
+</li>
+<li>
+<a class="base-not-selected" href="../../contrib.html">Project</a>
+</li>
+<li>
+<a class="base-not-selected" href="../../versions/index.html">Versioned Docs</a>
+</li>
+<li>
+<a class="base-not-selected" href="../../pluginDocs/index.html">Plugins</a>
+</li>
+<li>
+<a class="base-not-selected" href="../../tools/index.html">Tools</a>
+</li>
+</ul>
+</div>
+</div>
+<div id="main">
+<div id="publishedStrip">
+<div id="level2tabs"></div>
+<script type="text/javascript"><!--
+document.write("<text>Last Published:</text> " + document.lastModified);
+// --></script>
+</div>
+<div class="breadtrail">
+
+
+ </div>
+<div id="menu">
+<div onclick="SwitchMenu('menu_selected_1.1', '../../skin/')" id="menu_selected_1.1Title" class="menutitle" style="background-image: url('../../skin/images/chapter_open.gif');">0.80-dev</div>
+<div id="menu_selected_1.1" class="selectedmenuitemgroup" style="display: block;">
+<div class="menuitem">
+<a href="../../docs_0_80/index.html">Overview</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/faq.html">FAQs</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/changes.html">Changes</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/todo.html">Todo</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/your-project.html">Using Forrest</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/validation.html">XML Validation</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/linking.html">Menus and Linking</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/searching.html">Searching</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/skins.html">Default Skins</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/skin-package.html">Skin Packages</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/views.html">Views-dev</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/forrest-contract.html">Our Contract</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/compliance.html">Standards Compliance</a>
+</div>
+<div onclick="SwitchMenu('menu_selected_1.1.14', '../../skin/')" id="menu_selected_1.1.14Title" class="menutitle" style="background-image: url('../../skin/images/chapter_open.gif');">How-To</div>
+<div id="menu_selected_1.1.14" class="selectedmenuitemgroup" style="display: block;">
+<div class="menuitem">
+<a href="../../docs_0_80/howto/index.html">Overview</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/howto-howto.html">Write a How-to</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/howto-asf-mirror.html">Download mirror</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/howto-pdf-tab.html">Create tab PDF</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/howto-editcss.html">Edit CSS (WYSIWYG)</a>
+</div>
+<div class="menupage">
+<div class="menupagetitle">CSS corner SVG</div>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/howto-forrest-from-maven.html">Maven Integration</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/howto-buildPlugin.html">Build a Plugin</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/howto-custom-html-source.html">Custom html source</a>
+</div>
+<div onclick="SwitchMenu('menu_1.1.14.10', '../../skin/')" id="menu_1.1.14.10Title" class="menutitle">Multipage HowTo</div>
+<div id="menu_1.1.14.10" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../docs_0_80/howto/multi/howto-multi.html">Introduction</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/multi/step1.html">Step 1</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/multi/step2.html">Step 2</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/multi/step3.html">Step 3</a>
+</div>
+</div>
+<div onclick="SwitchMenu('menu_1.1.14.11', '../../skin/')" id="menu_1.1.14.11Title" class="menutitle">Views</div>
+<div id="menu_1.1.14.11" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../docs_0_80/howto/howto-view-install.html">Install views</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/howto-view-dsl.html">forrest:view DSL</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/howto-view-contracts.html">contract implementations</a>
+</div>
+</div>
+</div>
+<div onclick="SwitchMenu('menu_1.1.15', '../../skin/')" id="menu_1.1.15Title" class="menutitle">Advanced Topics</div>
+<div id="menu_1.1.15" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../docs_0_80/build.html">Building Forrest</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/catalog.html">Using DTD Catalogs</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/sitemap-ref.html">Sitemap Reference</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/project-sitemap.html">Project sitemap</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/cap.html">Sourcetype Action</a>
+</div>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/upgrading_08.html">Upgrading to 0.8</a>
+</div>
+<div onclick="SwitchMenu('menu_1.1.17', '../../skin/')" id="menu_1.1.17Title" class="menutitle">Reference docs</div>
+<div id="menu_1.1.17" class="menuitemgroup">
+<div onclick="SwitchMenu('menu_1.1.17.1', '../../skin/')" id="menu_1.1.17.1Title" class="menutitle">DTD documentation</div>
+<div id="menu_1.1.17.1" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../dtdx/dtd-docs.html">Overview</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/document-v20.dtdx.html">document-v20</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/howto-v20.dtdx.html">howto-v20</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/faq-v20.dtdx.html">faq-v20</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/document-v13.dtdx.html">document-v13</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/howto-v13.dtdx.html">howto-v13</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/faq-v13.dtdx.html">faq-v13</a>
+</div>
+</div>
+<div onclick="SwitchMenu('menu_1.1.17.2', '../../skin/')" id="menu_1.1.17.2Title" class="menutitle">Doc samples</div>
+<div id="menu_1.1.17.2" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../dtdx/document-v13.html">document-v13</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/document-v20.html">document-v20</a>
+</div>
+</div>
+</div>
+<div onclick="SwitchMenu('menu_1.1.18', '../../skin/')" id="menu_1.1.18Title" class="menutitle">Older Docs</div>
+<div id="menu_1.1.18" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../docs_0_80/primer.html">Forrest Primer</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/libre-intro.html">Libre</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/dreams.html">Dream list</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/cvs-ssh/howto-cvs-ssh.html">CVS over SSH</a>
+</div>
+</div>
+</div>
+<div id="credit">
+<hr>
+ This is documentation for development version v0.8
+ (<a href="/versions/index.html">More</a>)</div>
+<div id="roundbottom">
+<img style="display: none" class="corner" height="15" width="15" alt="" src="../../skin/images/rc-b-l-15-1body-2menu-3menu.png"></div>
+<div id="credit2">
+<a href="http://apachecon.com/"><img border="0" title="ApacheCon Europe 2005" alt="ApacheCon Europe 2005 - logo" src="http://apache.org/images/ac2005eu_135x50.gif" style="width: 135px;height: 50px;"></a>
+</div>
+</div>
+<div id="content">
+<div title="Portable Document Format" class="pdflink">
+<a class="dida" href="howto-corner-images.pdf"><img alt="PDF -icon" src="../../skin/images/pdfdoc.gif" class="skin"><br>
+ PDF</a>
+</div>
+<div class="trail">
+<text>Font size:</text>
+ <input value="Reset" class="resetfont" title="Reset text" onclick="ndeSetTextSize('reset'); return false;" type="button">
+ <input value="-a" class="smallerfont" title="Shrink text" onclick="ndeSetTextSize('decr'); return false;" type="button">
+ <input value="+a" class="biggerfont" title="Enlarge text" onclick="ndeSetTextSize('incr'); return false;" type="button">
+</div>
+<h1>How to modify the color of generated corner images</h1>
+<div class="abstract">
+ This How-To describes how to modify the corner images that appear in
+ the menu and tabs of the skins.
+ </div>
+<div id="motd-area">
+ This is documentation for development version v0.8
+ (<a href="/versions/index.html">More</a>)</div>
+<div id="minitoc-area">
+<ul class="minitoc">
+<li>
+<a href="#Intended Audience">Intended Audience</a>
+</li>
+<li>
+<a href="#Purpose">Purpose</a>
+</li>
+<li>
+<a href="#Prerequisites">Prerequisites</a>
+</li>
+<li>
+<a href="#Steps">Steps</a>
+<ul class="minitoc">
+<li>
+<a href="#css-files">Understand how corner images are named (the contract)</a>
+</li>
+<li>
+<a href="#skinconfig">Modifying the skinconf.xml of your project</a>
+</li>
+<li>
+<a href="#css_modify">Modifying .css files</a>
+</li>
+</ul>
+</li>
+<li>
+<a href="#Feedback">Feedback</a>
+</li>
+</ul>
+</div>
+<a name="N10010"></a><a name="Intended Audience"></a>
+<h2 class="underlined_10">Intended Audience</h2>
+<div class="section">
+<p>
+ Users who want to change the colors of the corner images in the
+ output html documents.
+ </p>
+<p>
+ This explanation is also useful for skin developers to understand
+ the corner image generation process.
+ </p>
+</div>
+<a name="N1001B"></a><a name="Purpose"></a>
+<h2 class="underlined_10">Purpose</h2>
+<div class="section">
+<p>
+ Forrest renders the corner images through
+ <a href="http://www.w3.org/TR/SVG/">Scalable Vector Graphics (SVG)</a>.
+ It may be necessary to change the color of
+ the corner images to be suitable for your own skin colors.
+ </p>
+</div>
+<a name="N10027"></a><a name="Prerequisites"></a>
+<h2 class="underlined_10">Prerequisites</h2>
+<div class="section">
+<ul>
+
+<li>Understand how to use the skinconf.xml file to change the appearance
+ of the output documents.</li>
+
+<li>Understand how to create or modify skins by following the
+ <a href="../../docs_0_80/your-project.html">Using Forrest</a> document
+ (topic "<a href="../../docs_0_80/your-project.html#skins">Forrest skins</a>").</li>
+
+</ul>
+</div>
+<a name="N1003D"></a><a name="Steps"></a>
+<h2 class="underlined_10">Steps</h2>
+<div class="section">
+<p>
+ The procedure outlined below provides an understanding of how corner
+ images are named (the contract) and then shows how to define new
+ colors for these images by modifying the
+ <span class="codefrag">src/documentation/skinconf.xml</span> of a project.
+ </p>
+<a name="N10048"></a><a name="css-files"></a>
+<h3 class="underlined_5">Understand how corner images are named (the contract)</h3>
+<p>
+ The corner images are referenced in some .css files of the
+ above-named skins; for example, in screen.css of the pelt skin:
+ </p>
+<pre class="code">
+/*Example from screen.css of pelt*/
+...
+/**
+* Round corner
+*/
+#roundtop {
+ background-image: url(images/rc-t-r-15-1body-2menu-3menu.png);
+ background-repeat: no-repeat;
+ background-position: top right;
+}
+...
+ </pre>
+<p>
+ The naming follows a contract which is described below. In general,
+ the naming looks like:
+ </p>
+<pre class="code">
+images/{$name}-{$v-orientation}-{$h-orientation}-{$size}-1{$backgroundColor}-2{$strokeColor}-3{$foregroundColor}
+ </pre>
+<p>
+ The first part
+ (<span class="codefrag">images/{$name}-{$v-orientation}-{$h-orientation}-{$size}</span>)
+ identifies which images is used and how big (width x height) it should
+ be. The second part\
+ (<span class="codefrag">-1{$backgroundColor}-2{$strokeColor}-3{$foregroundColor}</span>)
+ identifies the coloring of each portion of the image. The input
+ parameter for the second part comes from the color profile of
+ <span class="codefrag">src/documentation/skinconf.xml</span>. The second part is
+ easily identifiable through the numbering 1-2-3.
+ </p>
+<p>
+ Let us get into details:
+ </p>
+<dl>
+
+<dt>
+<span class="codefrag">images</span>
+</dt>
+
+<dd>
+ Path to the xslt that creates the corner.
+ <br>
+
+<span class="codefrag">images/ = {$FORREST_HOME}/main/webapp/skins/common/images/</span>
+
+</dd>
+
+<dt>
+<span class="codefrag">{$name}</span>
+</dt>
+
+<dd>
+ In the common skin there are two XSLT files ready for use:
+ <ul>
+
+<li>
+
+<span class="codefrag">rc.svg.xslt</span>: handles rounded corners
+ </li>
+
+<li>
+
+<span class="codefrag">dc.svg.xslt</span>: handles diagonal 45-degree corners
+ </li>
+
+</ul>
+
+<span class="codefrag">name = [rc|dc]</span>
+
+<br>
+
+<em>e.g.</em> <span class="codefrag">rc</span>
+
+</dd>
+
+<dt>
+<span class="codefrag">{$v-orientation}</span>
+</dt>
+
+<dd>
+ Vertical orientation of the corner images (top or bottom).
+ <br>
+
+<span class="codefrag">v-orientation = [t|b]</span>
+
+<br>
+
+<em>e.g.</em> <span class="codefrag">t</span>
+
+</dd>
+
+<dt>
+<span class="codefrag">{$h-orientation}</span>
+</dt>
+
+<dd>
+ Horizontal orientation of the corner images (left or right).
+ <br>
+
+<span class="codefrag">h-orientation = [l|r]</span>
+
+<br>
+
+<em>e.g.</em> <span class="codefrag">r</span>
+
+</dd>
+
+<dt>
+<span class="codefrag">{$size}</span>
+</dt>
+
+<dd>
+ Pixels size of the width <strong>and</strong> height of the corner image.
+ <br>
+
+<span class="codefrag">size=x</span>
+
+<br>
+
+<em>e.g.</em> <span class="codefrag">5</span>
+
+</dd>
+
+<dt>
+<span class="codefrag">{$backgroundColor}</span>
+</dt>
+
+<dd>
+ Any <span class="codefrag"><color name=""/></span> element in the <span class="codefrag">skinconf.xml</span> (the <span class="codefrag">value="{$color}"</span>
+ attribute will be applied).
+ <br>
+
+<em>e.g.</em> <span class="codefrag">header</span>
+
+</dd>
+
+<dt>
+<span class="codefrag">{$strokeColor}</span>
+</dt>
+
+<dd>
+ Any <span class="codefrag"><color name=""/></span> element in the <span class="codefrag">skinconf.xml</span> (the <span class="codefrag">value="{$color}"</span>
+ attribute will be applied).
+ <br>
+
+<em>e.g.</em> <span class="codefrag">searchbox</span>
+
+</dd>
+
+<dt>
+<span class="codefrag">{$foregroundColor}</span>
+</dt>
+
+<dd>
+ Any <span class="codefrag"><color name=""/></span> element in the <span class="codefrag">skinconf.xml</span> (the <span class="codefrag">value="{$color}"</span>
+ attribute will be applied).
+ <br>
+
+<em>e.g.</em> <span class="codefrag">searchbox</span>
+
+</dd>
+
+</dl>
+<a name="N10123"></a><a name="skinconfig"></a>
+<h3 class="underlined_5">Modifying the skinconf.xml of your project</h3>
+<p>
+ modifying the <span class="codefrag">skinconf.xml</span> of your project (by
+ default you find it at <span class="codefrag">[project-dir]/src/documentation/</span>).
+ </p>
+<p>
+ Starting about line 155 you find a <span class="codefrag"><colors></span>
+ ... <span class="codefrag"></colors></span> element with content commented-out:
+ </p>
+<pre class="code">
+<colors>
+<!-- These values are used for the generated CSS files. -->
+
+<!-- Krysalis -->
+<!--
+ <color name="header" value="#FFFFFF"/>
+
+ <color name="tab-selected" value="#a5b6c6" link="#000000" vlink="#000000" hlink="#000000"/>
+ <color name="tab-unselected" value="#F7F7F7" link="#000000" vlink="#000000" hlink="#000000"/>
+ <color name="subtab-selected" value="#a5b6c6" link="#000000" vlink="#000000" hlink="#000000"/>
+ <color name="subtab-unselected" value="#a5b6c6" link="#000000" vlink="#000000" hlink="#000000"/>
+
+...
+
+-->
+
+</colors>
+ </pre>
+<p>
+ To modify the colors of the corner images, you can either define
+ your own <span class="codefrag"><color name=.../></span> elements or uncomment
+ one of the existing <span class="codefrag"><color name=.../></span> elements
+ and adjust the color value to your needs.
+ </p>
+<p>
+
+<em>e.g.</em>
+
+</p>
+<pre class="code">
+<color name="tab-selected" value="#FF0000"/>
+ </pre>
+<p>
+ This affects all corner images whose <span class="codefrag">{$backgroundColor}</span>, <span class="codefrag">{$strokeColor}</span> or
+ <span class="codefrag">{$foregroundColor}</span> is set to <span class="codefrag">tab-selected</span>.
+ <br>
+ For example, in <span class="codefrag">screen.css</span> (of the "pelt" skin) you find:
+ </p>
+<pre class="code">
+#roundbottomsmall {
+ background-image: url(images/rc-b-r-5-1header-2tab-selected-3tab-selected.png);
+ background-repeat: no-repeat;
+ background-position: top right;
+}
+ </pre>
+<p>
+ Now the stroke color (<span class="codefrag">-2tab-selected</span>) and the foreground
+ color (<span class="codefrag">-3tab-selected</span>) are set to red (remember: we
+ defined <span class="codefrag">#FF0000</span> as the "color" value of
+ <span class="codefrag">tab-selected</span>).
+ </p>
+<a name="N1017A"></a><a name="css_modify"></a>
+<h3 class="underlined_5">Modifying .css files</h3>
+<p>
+ In addition to the modification of <span class="codefrag">skinconf.xml</span>
+ you can also modify the respective .css file of your skin.
+ </p>
+<p>
+ Here's another example:
+ </p>
+<pre class="code">
+/*your .css file*/
+...
+#roundbottomsmall {
+ background-image: url(images/rc-b-r-5-1<em>foo</em>-2<em>secondfoo</em>-3<em>thirdfoo</em>.png);
+ background-repeat: no-repeat;
+ background-position: top right;
+}
+...
+ </pre>
+<pre class="code">
+<!-- your skinconf.xml -->
+...
+<colors>
+ <color name="<em>foo</em>" value="#FF0000"/>
+ <color name="<em>secondfoo</em>" value="#00FF00"/>
+ <color name="<em>thirdfoo</em>" value="##00FF00"/>
+</colors>
+ </pre>
+<p>
+ Here we have created our own color tags (in the .css file) and
+ defined the respective values for them (in <span class="codefrag">skinconf.xml</span>).
+ Now you have color images with a red background and a green
+ foreground. Horrible, isn't it?
+ </p>
+</div>
+<a name="N101AA"></a><a name="Feedback"></a>
+<h2 class="underlined_10">Feedback</h2>
+<div class="section">
+<p>
+ Please provide feedback about this document via the
+ <a href="../../mail-lists.html">mailing lists</a>.
+ </p>
+</div>
+</div>
+<div class="clearboth"> </div>
+</div>
+<div id="footer">
+<div class="lastmodified">
+<script type="text/javascript"><!--
+document.write("<text>Last Published:</text> " + document.lastModified);
+// --></script>
+</div>
+<div class="copyright">
+ Copyright ©
+ 2002-2005 <a href="http://www.apache.org/licenses/">The Apache Software Foundation.</a>
+</div>
+</div>
+</body>
+</html>
Propchange: forrest/site/docs_0_80/howto/howto-corner-images.html
------------------------------------------------------------------------------
svn:eol-style = native
Added: forrest/site/docs_0_80/howto/howto-corner-images.pdf
URL: http://svn.apache.org/viewcvs/forrest/site/docs_0_80/howto/howto-corner-images.pdf?rev=193078&view=auto
==============================================================================
Binary file - no diff available.
Propchange: forrest/site/docs_0_80/howto/howto-corner-images.pdf
------------------------------------------------------------------------------
svn:mime-type = application/pdf
Added: forrest/site/docs_0_80/howto/howto-custom-html-source.html
URL: http://svn.apache.org/viewcvs/forrest/site/docs_0_80/howto/howto-custom-html-source.html?rev=193078&view=auto
==============================================================================
--- forrest/site/docs_0_80/howto/howto-custom-html-source.html (added)
+++ forrest/site/docs_0_80/howto/howto-custom-html-source.html Wed Jun 22 22:36:19 2005
@@ -0,0 +1,1065 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta content="Apache Forrest" name="Generator">
+<meta name="Forrest-version" content="0.8-dev">
+<meta name="Forrest-skin-name" content="pelt">
+<title>How to customize processing of html source (v0.8-dev)</title>
+<link type="text/css" href="../../skin/basic.css" rel="stylesheet">
+<link media="screen" type="text/css" href="../../skin/screen.css" rel="stylesheet">
+<link media="print" type="text/css" href="../../skin/print.css" rel="stylesheet">
+<link type="text/css" href="../../skin/profile.css" rel="stylesheet">
+<script src="../../skin/getBlank.js" language="javascript" type="text/javascript"></script><script src="../../skin/getMenu.js" language="javascript" type="text/javascript"></script><script src="../../skin/fontsize.js" language="javascript" type="text/javascript"></script>
+<link rel="shortcut icon" href="../../favicon.ico">
+</head>
+<body onload="init()">
+<script type="text/javascript">ndeSetTextSize();</script>
+<div id="top">
+<div class="breadtrail">
+<a href="http://www.apache.org/">apache</a> > <a href="http://forrest.apache.org/">forrest</a><script src="../../skin/breadcrumbs.js" language="JavaScript" type="text/javascript"></script>
+</div>
+<div class="header">
+<div class="grouplogo">
+<a href="http://www.apache.org/"><img class="logoImage" alt="Apache" src="../../images/apache-forrest.png" title="The Apache Software Foundation"></a>
+</div>
+<div class="projectlogo">
+<a href="http://forrest.apache.org/"><img class="logoImage" alt="Forrest" src="../../images/project-logo.gif" title="Apache Forrest"></a>
+</div>
+<div class="searchbox">
+<form action="http://www.google.com/search" method="get" class="roundtopsmall">
+<input value="forrest.apache.org" name="sitesearch" type="hidden"><input onFocus="getBlank (this, 'Search the site with google');" size="25" name="q" id="query" type="text" value="Search the site with google">
+ <input attr="value" name="Search" value="Search" type="submit">
+</form>
+</div>
+<ul id="tabs">
+<li>
+<a class="base-not-selected" href="../../index.html">Welcome</a>
+</li>
+<li>
+<a class="base-not-selected" href="../../contrib.html">Project</a>
+</li>
+<li>
+<a class="base-not-selected" href="../../versions/index.html">Versioned Docs</a>
+</li>
+<li>
+<a class="base-not-selected" href="../../pluginDocs/index.html">Plugins</a>
+</li>
+<li>
+<a class="base-not-selected" href="../../tools/index.html">Tools</a>
+</li>
+</ul>
+</div>
+</div>
+<div id="main">
+<div id="publishedStrip">
+<div id="level2tabs"></div>
+<script type="text/javascript"><!--
+document.write("<text>Last Published:</text> " + document.lastModified);
+// --></script>
+</div>
+<div class="breadtrail">
+
+
+ </div>
+<div id="menu">
+<div onclick="SwitchMenu('menu_selected_1.1', '../../skin/')" id="menu_selected_1.1Title" class="menutitle" style="background-image: url('../../skin/images/chapter_open.gif');">0.80-dev</div>
+<div id="menu_selected_1.1" class="selectedmenuitemgroup" style="display: block;">
+<div class="menuitem">
+<a href="../../docs_0_80/index.html">Overview</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/faq.html">FAQs</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/changes.html">Changes</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/todo.html">Todo</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/your-project.html">Using Forrest</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/validation.html">XML Validation</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/linking.html">Menus and Linking</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/searching.html">Searching</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/skins.html">Default Skins</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/skin-package.html">Skin Packages</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/views.html">Views-dev</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/forrest-contract.html">Our Contract</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/compliance.html">Standards Compliance</a>
+</div>
+<div onclick="SwitchMenu('menu_selected_1.1.14', '../../skin/')" id="menu_selected_1.1.14Title" class="menutitle" style="background-image: url('../../skin/images/chapter_open.gif');">How-To</div>
+<div id="menu_selected_1.1.14" class="selectedmenuitemgroup" style="display: block;">
+<div class="menuitem">
+<a href="../../docs_0_80/howto/index.html">Overview</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/howto-howto.html">Write a How-to</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/howto-asf-mirror.html">Download mirror</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/howto-pdf-tab.html">Create tab PDF</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/howto-editcss.html">Edit CSS (WYSIWYG)</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/howto-corner-images.html">CSS corner SVG</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/howto-forrest-from-maven.html">Maven Integration</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/howto-buildPlugin.html">Build a Plugin</a>
+</div>
+<div class="menupage">
+<div class="menupagetitle">Custom html source</div>
+</div>
+<div onclick="SwitchMenu('menu_1.1.14.10', '../../skin/')" id="menu_1.1.14.10Title" class="menutitle">Multipage HowTo</div>
+<div id="menu_1.1.14.10" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../docs_0_80/howto/multi/howto-multi.html">Introduction</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/multi/step1.html">Step 1</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/multi/step2.html">Step 2</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/multi/step3.html">Step 3</a>
+</div>
+</div>
+<div onclick="SwitchMenu('menu_1.1.14.11', '../../skin/')" id="menu_1.1.14.11Title" class="menutitle">Views</div>
+<div id="menu_1.1.14.11" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../docs_0_80/howto/howto-view-install.html">Install views</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/howto-view-dsl.html">forrest:view DSL</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/howto-view-contracts.html">contract implementations</a>
+</div>
+</div>
+</div>
+<div onclick="SwitchMenu('menu_1.1.15', '../../skin/')" id="menu_1.1.15Title" class="menutitle">Advanced Topics</div>
+<div id="menu_1.1.15" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../docs_0_80/build.html">Building Forrest</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/catalog.html">Using DTD Catalogs</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/sitemap-ref.html">Sitemap Reference</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/project-sitemap.html">Project sitemap</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/cap.html">Sourcetype Action</a>
+</div>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/upgrading_08.html">Upgrading to 0.8</a>
+</div>
+<div onclick="SwitchMenu('menu_1.1.17', '../../skin/')" id="menu_1.1.17Title" class="menutitle">Reference docs</div>
+<div id="menu_1.1.17" class="menuitemgroup">
+<div onclick="SwitchMenu('menu_1.1.17.1', '../../skin/')" id="menu_1.1.17.1Title" class="menutitle">DTD documentation</div>
+<div id="menu_1.1.17.1" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../dtdx/dtd-docs.html">Overview</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/document-v20.dtdx.html">document-v20</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/howto-v20.dtdx.html">howto-v20</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/faq-v20.dtdx.html">faq-v20</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/document-v13.dtdx.html">document-v13</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/howto-v13.dtdx.html">howto-v13</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/faq-v13.dtdx.html">faq-v13</a>
+</div>
+</div>
+<div onclick="SwitchMenu('menu_1.1.17.2', '../../skin/')" id="menu_1.1.17.2Title" class="menutitle">Doc samples</div>
+<div id="menu_1.1.17.2" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../dtdx/document-v13.html">document-v13</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/document-v20.html">document-v20</a>
+</div>
+</div>
+</div>
+<div onclick="SwitchMenu('menu_1.1.18', '../../skin/')" id="menu_1.1.18Title" class="menutitle">Older Docs</div>
+<div id="menu_1.1.18" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../docs_0_80/primer.html">Forrest Primer</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/libre-intro.html">Libre</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/dreams.html">Dream list</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/cvs-ssh/howto-cvs-ssh.html">CVS over SSH</a>
+</div>
+</div>
+</div>
+<div id="credit">
+<hr>
+ This is documentation for development version v0.8
+ (<a href="/versions/index.html">More</a>)</div>
+<div id="roundbottom">
+<img style="display: none" class="corner" height="15" width="15" alt="" src="../../skin/images/rc-b-l-15-1body-2menu-3menu.png"></div>
+<div id="credit2">
+<a href="http://apachecon.com/"><img border="0" title="ApacheCon Europe 2005" alt="ApacheCon Europe 2005 - logo" src="http://apache.org/images/ac2005eu_135x50.gif" style="width: 135px;height: 50px;"></a>
+</div>
+</div>
+<div id="content">
+<div title="Portable Document Format" class="pdflink">
+<a class="dida" href="howto-custom-html-source.pdf"><img alt="PDF -icon" src="../../skin/images/pdfdoc.gif" class="skin"><br>
+ PDF</a>
+</div>
+<div class="trail">
+<text>Font size:</text>
+ <input value="Reset" class="resetfont" title="Reset text" onclick="ndeSetTextSize('reset'); return false;" type="button">
+ <input value="-a" class="smallerfont" title="Shrink text" onclick="ndeSetTextSize('decr'); return false;" type="button">
+ <input value="+a" class="biggerfont" title="Enlarge text" onclick="ndeSetTextSize('incr'); return false;" type="button">
+</div>
+<h1>How to customize processing of html source</h1>
+<div class="abstract">
+ Explains how to do additional processing of html source documents.
+ </div>
+<div id="motd-area">
+ This is documentation for development version v0.8
+ (<a href="/versions/index.html">More</a>)</div>
+<div id="minitoc-area">
+<ul class="minitoc">
+<li>
+<a href="#Intended Audience">Intended Audience</a>
+</li>
+<li>
+<a href="#Purpose">Purpose</a>
+</li>
+<li>
+<a href="#Prerequisites">Prerequisites</a>
+</li>
+<li>
+<a href="#Understanding the HTML-Pipeline">Understanding the HTML-Pipeline</a>
+<ul class="minitoc">
+<li>
+<a href="#example">Driven by Example</a>
+</li>
+<li>
+<a href="#sitemap">Finding the Sitemap</a>
+</li>
+<li>
+<a href="#pipelines">Find the Beginning of the Pipelines Section</a>
+</li>
+<li>
+<a href="#matches">Looking for a Match</a>
+</li>
+<li>
+<a href="#html-pipeline">Processing in the '**/*.html' Pipeline</a>
+</li>
+<li>
+<a href="#protocols">Following the Pseudo-Protocols</a>
+</li>
+<li>
+<a href="#call">Second Call for Content</a>
+</li>
+<li>
+<a href="#match-1">First Match for '**body-*.html'</a>
+</li>
+<li>
+<a href="#match-2">Second Match for '**body-*.html'</a>
+</li>
+<li>
+<a href="#match-3">Third Call for Content</a>
+</li>
+<li>
+<a href="#file">Introducing the File-Resolver</a>
+</li>
+<li>
+<a href="#process-html">html-Default Processing</a>
+</li>
+<li>
+<a href="#body">Returning to the '**body-*.html'-Pipeline</a>
+</li>
+<li>
+<a href="#aggregate">Returning to the '**/*.html'-Pipeline</a>
+</li>
+<li>
+<a href="#custom">Customizing the html pipeline</a>
+<ul class="minitoc">
+<li>
+<a href="#when">When to customize?</a>
+</li>
+<li>
+<a href="#how">How to customize?</a>
+</li>
+<li>
+<a href="#what">What to intercept?</a>
+</li>
+<li>
+<a href="#intercept">Intercept pattern</a>
+</li>
+</ul>
+</li>
+</ul>
+</li>
+</ul>
+</div>
+<a name="N10010"></a><a name="Intended Audience"></a>
+<h2 class="underlined_10">Intended Audience</h2>
+<div class="section">
+<p>
+ Users who want to integrate HTML-pages that require custom
+ adjustments and everybody who wants to learn more about Forrest's
+ pipelines in general.
+ </p>
+</div>
+<a name="N10018"></a><a name="Purpose"></a>
+<h2 class="underlined_10">Purpose</h2>
+<div class="section">
+<p>
+ Integrating legacy HTML pages is a common task when migrating
+ existing websites to Forrest. This document explains how to implement
+ custom processing which is required when Forrest's standard pipeline
+ for html does not suffice.
+ </p>
+</div>
+<a name="N10020"></a><a name="Prerequisites"></a>
+<h2 class="underlined_10">Prerequisites</h2>
+<div class="section">
+<p>To follow these instructions you will need:</p>
+<ol>
+
+<li>
+ Know how to use a
+ <a href="../../docs_0_80/project-sitemap.html">project sitemap</a>.
+ </li>
+
+<li>
+ A basic understanding of coocons pipelines and their
+ components. You should know about matchers, generators,
+ transformers and serializers and have a rough idea how they work
+ together in a pipeline ( A good place to start learning about Cocoon is <a href="http://cocoon.apache.org/2.1/userdocs/concepts/">
+ Understanding Apache Cocoon</a>).
+ </li>
+
+<li>
+ If you want to follow the examples right through your
+ Forrest, a current version of Forrest installed on your
+ system and read-access to Forrest's program directory is
+ necessary.
+ </li>
+
+<li>
+ If you plan on creating your own custom processing for
+ html-pages, you'll also need write access to your
+ project directory.
+ </li>
+
+</ol>
+</div>
+<a name="N1003F"></a><a name="Understanding the HTML-Pipeline"></a>
+<h2 class="underlined_10">Understanding the HTML-Pipeline</h2>
+<div class="section">
+<p>
+ The first part of this howto explains the html pipeline, so as to
+ provide the background to enable you to add additional processing
+ for legacy html documents. If you already know how pipelines work,
+ then skip to the section about
+ <a href="#custom">Customizing the html pipeline</a>.
+ </p>
+<a name="N1004B"></a><a name="example"></a>
+<h3 class="underlined_5">Driven by Example</h3>
+<p>
+ The best way to learn about Forrest pipelines is follow
+ the processing of an imaginary request through the forrest
+ machinery.
+ </p>
+<p>
+ So let's see what happens, when a client asks Forrest to
+ serve the document
+ <br>
+ 'http://some.domain.org/mytest/mybad.html'.
+ </p>
+<a name="N1005A"></a><a name="sitemap"></a>
+<h3 class="underlined_5">Finding the Sitemap</h3>
+<p>
+ Like all applications based on Apache Cocoon, each request for
+ a given document is processed by searching a sitemap for a
+ matching processing pipeline. With Forrest, this core sitemap
+ is found in the file
+ 'main/webapp/sitemap.xmap' in Forrest's program directory.
+ </p>
+<p class="instruction">
+ Open the file 'main/webapp/sitemap.xmap' in Forrest's
+ program directory with a text editor of your choice.
+ </p>
+<div class="frame note">
+<div class="label">Note</div>
+<div class="content">
+ Any simple text editor will suffice, since the XML in
+ this file is quite simple in structure and easy to read.
+ </div>
+</div>
+<p>
+ To help you to easily follow the next steps, we have added
+ comments and anchors to 'sitemap.xmap',
+ so that you can quickly jump to all relevant sections
+ and read them more easily.
+ </p>
+<p class="instruction">
+ Follow this link to the
+ <a href="sitemap.xmap.html#Start+of+Sitemap">
+ start of the Sitemap.
+ </a>
+
+</p>
+<p>
+ As the comment explains, this sitemap is the starting point
+ for all requests. So even if there are other sitemaps
+ (which we will see later on), we always start looking for a
+ matching pattern right here.
+ </p>
+<a name="N10079"></a><a name="pipelines"></a>
+<h3 class="underlined_5">Find the Beginning of the Pipelines Section</h3>
+<p>
+ Modular as everything else in Cocoon, Forrest's sitemap
+ starts with a long list of declarations for all the
+ components used later on. We can safely ignore these at
+ the moment.
+ </p>
+<p class="instruction">
+ So let's skip right to the start of the
+ Pipelines-Section. Search for <map:pipelines> or
+ follow this link to the
+ <a href="sitemap.xmap.html#Start+of+Pipelines">
+ beginning of the pipelines-element
+ </a>
+
+</p>
+<p>
+ Within the pipelines-element you will find a long list
+ of pipeline-Elements (no trailing 's'), each one of them defining a
+ processing pipeline within Forrest.
+ </p>
+<p>
+ When handling a request, Forrest will check the
+ Pipelines from top to bottom until it encounters a
+ Pipeline that will take care of our request.
+ </p>
+<a name="N10091"></a><a name="matches"></a>
+<h3 class="underlined_5">Looking for a Match</h3>
+<p>
+ Like all Cocoon applications, Forrest knows which
+ pipeline to use for processing a certain request by
+ looking at the entry criteria for each pipeline it comes
+ across. These can be a match against a given pattern,
+ the test if a certain files exists or one of many other
+ possible tests that Cocoon supports.
+ </p>
+<p class="instruction">
+ To better know what we are talking about, let's follow
+ Forrest down the list to the
+ <a href="sitemap.xmap.html#Test+for+First+Pipeline">
+ Test for the First Pipeline
+ </a>.
+ </p>
+<p>
+ Here you can see that very specialized matches need to occur
+ early in the sitemap. The
+ requested file (and pathname) is compared to a pattern
+ '*.xlex' that would match if our request ended with
+ '.xlex' and had no pathname. Since it doesn't, we don't
+ have a match and need to keep looking.
+ </p>
+<p class="instruction">
+ Skip forward until we find the
+ <a href="sitemap.xmap.html#First+Match+for+%22**%2F*.html%22">
+ First Match for "**/*.html"
+ </a>
+ (<map:match pattern="**/*.html">).
+ </p>
+<a name="N100AE"></a><a name="html-pipeline"></a>
+<h3 class="underlined_5">Processing in the '**/*.html' Pipeline</h3>
+<p>
+ Let's take a quick look at this pipeline to understand
+ what's happening here:
+ </p>
+<pre class="code">
+<map:match pattern="**/*.html">
+ <map:aggregate element="site">
+ <map:part src="cocoon:/skinconf.xml"/>
+ <map:part src="cocoon:/build-info"/>
+ <map:part src="cocoon:/{1}/tab-{2}.html"/>
+ <map:part src="cocoon:/{1}/menu-{2}.html"/>
+ <map:part src="cocoon:/{1}/body-{2}.html"/>
+ </map:aggregate>
+ <map:call resource="skinit">
+ <map:parameter name="type" value="site2xhtml"/>
+ <map:parameter name="path" value="{0}"/>
+ </map:call>
+</map:match></pre>
+<p>
+ In the first part of this pipeline, the
+ aggregate-element assembles information required to build
+ a Forrest page with menu and tabs from different sources.
+ Then the call to the skinit-resource picks up the
+ aggregated info and generates a page in the
+ style of the current skin. That's easy, isn't it?
+ </p>
+<p>
+ Well, the complex part begins, when we take a closer look at
+ the sources of the aggregation.
+ </p>
+<pre class="code"><map:part src="cocoon:/{1}/body-{2}.html"/></pre>
+<p>
+ This mysterious element is most easily explained as a
+ secondary request to the Forrest system.
+ </p>
+<p>
+ The 'cocoon:'-part is called a pseudo-protocol and tells the
+ processor to ask Forrest for the resource named behind
+ the colon, process that request and feed the output as input
+ back into our pipeline.
+ (The 'pseudo' goes back to the fact that unlike
+ 'http' or 'ftp', which are real protocols, you can use cocoon:
+ only within the cocoon environments as only they will know what to
+ do with it.)
+ </p>
+<p>
+ So even though we have already seen the end of our pipeline
+ (the skinning), we still don't know, what goes into the skinning and
+ where it comes from. To find out, we have to look at the sources
+ of the aggregation.
+ </p>
+<a name="N100CF"></a><a name="protocols"></a>
+<h3 class="underlined_5">Following the Pseudo-Protocols</h3>
+<p>
+ To find out what goes into our aggregation, we'll need to look
+ at the pipeline that is called by
+ </p>
+<pre class="code"><map:part src="cocoon:/{1}/body-{2}.html"/></pre>
+<p>
+ To do that, it's always a good idea to write down what this
+ call actually looks like when all the variables are replaced by real
+ values.
+ A safe way to do that is to look at the matcher to start with,
+ build a list of the numbered variables and their meaning in the
+ current context and then assemble the actual expression(s) from it.
+ </p>
+<p>In our example the matcher pattern
+ <span class="codefrag">**/*.html</span> is applied to the request-name
+ <span class="codefrag">mytest/mybad.html</span>, so we have three variables
+ altogether:
+ </p>
+<table class="ForrestTable" cellspacing="1" cellpadding="4">
+
+<tr>
+
+<td colspan="1" rowspan="1">%0</td>
+ <td colspan="1" rowspan="1">mytest/mybad.html</td>
+ <td colspan="1" rowspan="1">the whole pathname</td>
+
+</tr>
+
+<tr>
+
+<td colspan="1" rowspan="1">%1</td>
+ <td colspan="1" rowspan="1">mytest/</td>
+ <td colspan="1" rowspan="1">the first match</td>
+
+</tr>
+
+<tr>
+
+<td colspan="1" rowspan="1">%2</td>
+ <td colspan="1" rowspan="1">mybad</td>
+ <td colspan="1" rowspan="1">the second match</td>
+
+</tr>
+
+</table>
+<p>If we insert that into </p>
+<pre class="code"><map:part src="cocoon:/{1}/body-{2}.html"/></pre>
+<p>we get</p>
+<pre class="code"><map:part src="cocoon:/mytest/body-mybad.html"/></pre>
+<p>
+ As you can easily tell, we are suddenly calling for a whole
+ new document. Let's see where that takes us:
+ </p>
+<a name="N10133"></a><a name="call"></a>
+<h3 class="underlined_5">Second Call for Content</h3>
+<p>
+ Processing of cocoon-calls is not much different from
+ normal requests by a client. When you launch a call like
+ </p>
+<pre class="code"><map:part src="cocoon:/mytest/body-mybad.html"/></pre>
+<p>
+ Forrest will once again start searching its main sitemap
+ from the beginning and look for a pipeline to match that call.
+ </p>
+<p class="instruction">
+ Search for '**body-*.html' from the beginning of the
+ sitemap or jump to the
+ <a href="sitemap.xmap.html#First+Match+for+%27**body-*.html%27">First Match for '**body-*.html'</a>
+ to see where we find our next match.
+ </p>
+<a name="N1014C"></a><a name="match-1"></a>
+<h3 class="underlined_5">First Match for '**body-*.html'</h3>
+<p>
+ Our first match is different to the previous ones because
+ there is a second condition placed inside the matcher.
+ Doing the replacements
+ </p>
+<pre class="code">
+<map:select type="exists">
+ <map:when test="{project:content.xdocs}mytests/mybad.ehtml"></pre>
+<p>
+ we quickly discover that there can't be a file of
+ that name in the project-directory.
+ <br>
+ (The variable '{project:content.xdocs}' is always replaced with
+ the name of your project directory that you can change
+ in the 'forrest.properties'-file.)
+ </p>
+<p>
+ So we have a pipeline, but it doesn't do anything.
+ In this case Forrest will simply keep looking for
+ the next match further down.
+ </p>
+<a name="N10162"></a><a name="match-2"></a>
+<h3 class="underlined_5">Second Match for '**body-*.html'</h3>
+<p class="instruction">
+ Continue searching downwards for '**body-*.html' in the
+ sitemap-file or jump directly to the
+ <a href="sitemap.xmap.html#Second+Match+for+%27**body-*.html%27">Second Match for '**body-*.html'</a>.
+ </p>
+<p>
+ Looking at the pipeline that handles the request, we see that
+ the cocoon-protocol is once again invoked
+ </p>
+<pre class="code"><map:generate src="cocoon:/{1}{2}.xml"/></pre>
+<p>
+ this time as a direct generator of input for our pipeline.
+ </p>
+<p>
+ So once again we ask Forrest to process a request for content.
+ To know what matcher to look for, let's first expand the variables:
+ </p>
+<p>
+ In our example the matcher pattern
+ <span class="codefrag">**body-*.html</span> is applied to the request-name
+ <span class="codefrag">mytest/body-mybad.html</span>.
+ Which means that we have three variables altogether:
+ </p>
+<table class="ForrestTable" cellspacing="1" cellpadding="4">
+
+<tr>
+
+<td colspan="1" rowspan="1">%0</td>
+ <td colspan="1" rowspan="1">mytest/body-mybad.html</td>
+ <td colspan="1" rowspan="1">the whole pathname</td>
+
+</tr>
+
+<tr>
+
+<td colspan="1" rowspan="1">%1</td>
+ <td colspan="1" rowspan="1">mytests/</td>
+ <td colspan="1" rowspan="1">the first match</td>
+
+</tr>
+
+<tr>
+
+<td colspan="1" rowspan="1">%2</td>
+ <td colspan="1" rowspan="1">mybad</td>
+ <td colspan="1" rowspan="1">the second match</td>
+
+</tr>
+
+</table>
+<p>
+ If we insert that into
+ </p>
+<pre class="code"><map:generate src="cocoon:/{1}{2}.xml"/></pre>
+<p>
+ we get
+ </p>
+<pre class="code"><map:generate src="cocoon:/mytests/mybad.xml"/></pre>
+<a name="N101CE"></a><a name="match-3"></a>
+<h3 class="underlined_5">Third Call for Content</h3>
+<p class="instruction">
+ So let's scan the main sitemap looking for a match for
+ '/mytests/mybad.xml'.
+ </p>
+<p>
+ We find it in the pattern
+ <a href="sitemap.xmap.html#First+Match+for+%27**.xml%27">'**.xml'></a>,
+ which is the standard handling for all xml-requests.
+ </p>
+<p>
+ Since our request fulfils none of the secondary criteria in
+ this pipeline, it falls right through to the map:mount-element
+ at the end:
+ </p>
+<pre class="code"><map:mount uri-prefix="" src="forrest.xmap" check-reload="yes" /></pre>
+<p>
+ which makes Forrest load and process a secondary sitemap,
+ the file 'forrest.xmap' in the same directory.
+ </p>
+<p class="instruction">
+ Open the file 'forrest.xmap' and continue the search for a
+ matching pattern.
+ </p>
+<p>
+ Our search leads us to the
+ <a href="forrest.xmap.html#Second+Match+for+%27**.xml%27">
+ Second Match for '**.xml'
+ </a>,
+ a pipeline designed to handle internationalisation if that
+ feature is configured. Since it is not, all it does is
+ call the file-resolver-resource with the full pathname of
+ our file but no extension.
+ </p>
+<pre class="code">
+<map:call resource="file-resolver">
+ <map:parameter name="uri" value="mytests/mybad"/>
+</map:call></pre>
+<a name="N101F9"></a><a name="file"></a>
+<h3 class="underlined_5">Introducing the File-Resolver</h3>
+<p class="instruction">
+ To find out more about the working of the file-resolver,
+ search for the definition of the
+ <a href="forrest.xmap.html#Definition+of+File-Resolver-Resource">
+ <map:resource name="file-resolver">
+ </a>
+ higher up in the file.
+ </p>
+<p>
+ Here you will find a pipeline that tests for the existence of
+ the file with different extensions. '.html' is second in this
+ list and leads to the processing steps shown below:
+ </p>
+<a name="N1020B"></a><a name="process-html"></a>
+<h3 class="underlined_5">html-Default Processing</h3>
+<p>
+ The default processing of html-files consists of four
+ processing steps:
+ </p>
+<ol>
+
+<li>
+
+<span class="codefrag"><map:generate src="{project:content.xdocs}{uri}.html" type="html"/></span>
+<br>
+ Using the html-generator, Forrest reads the html-document
+ from file and uses JTidy to clean up and convert it to xml
+ (which is required for all processing in cocoon pipelines).
+ At the output of this transformer we will have a valid
+ XHTML-document althought it might still contain some unwanted
+ elements. We'll deal with those later (see
+ <a href="../../docs_0_80/howto/howto-custom-html-source.html">When to customize</a>).
+ </li>
+
+<li>
+
+<span class="codefrag"><map:transform src="{forrest:stylesheets}/html2document.xsl"/></span>
+<br>
+ Using the standard stylesheet 'html2document.xsl', this XHTML is
+ transformed into Forrest standard document format.
+ </li>
+
+<li>
+
+<span class="codefrag"><map:transform type="idgen"/></span>
+<br>
+ This step generates IDs required for navigation within the page.
+ </li>
+
+<li>
+
+<span class="codefrag"><map:serialize type="xml-document"/></span>
+<br>
+ Finally the document is serialized as XML and returned to the
+ calling pipeline.
+ </li>
+
+</ol>
+<p>
+ As a result, we now hand back the content of the html-document
+ in Forrest standard document format to the calling pipeline
+ </p>
+<div class="frame note">
+<div class="label">Note</div>
+<div class="content">
+ To look at the output of this pipeline you can simply
+ point you browser to 'http://localhost:8888/mytest/mybad.xml'
+ (assuming that you are currently running Forrest on your
+ machine and there is an html-page of that name).
+ </div>
+</div>
+<a name="N1023E"></a><a name="body"></a>
+<h3 class="underlined_5">Returning to the '**body-*.html'-Pipeline</h3>
+<p>
+ On returning into the
+ <a href="sitemap.xmap.html#Returning+to+the+%27**body-*.html%27+Pipeline">'**body-*.html' pipeline</a>,
+ procesing continues with the next components in this pipeline:
+ </p>
+<ul>
+
+<li>
+
+<strong>idgen</strong> will generate unique IDs for all elements
+ that need to be referenced within a page (mainly headlines).
+ </li>
+
+<li>
+
+<strong>xinclude</strong> would process any xinclude statements
+ in the source.
+ Since HTML does not support this mechanism, nothing happens
+ in our example.
+ </li>
+
+<li>
+
+<strong>linkrewriter</strong> adjusts links between pages
+ so that they will still work in the final Forrest output
+ directory structure. It also resolves any special Forrest links.
+ </li>
+
+<li>
+ The final transformation, as the name suggests, will take
+ care of reporting broken site-links.
+ </li>
+
+<li>
+ The call to 'skinit' prepares the page body for presentation
+ within the selected skin.
+ </li>
+
+</ul>
+<div class="frame note">
+<div class="label">Note</div>
+<div class="content">
+ To look at the output of this pipeline you can simply
+ point you browser to 'http://localhost:8888/mytest/body-mybad.html'
+ (assuming that you are currently running Forrest on your machine
+ and there is an html-page of that name).
+ </div>
+</div>
+<a name="N1026A"></a><a name="aggregate"></a>
+<h3 class="underlined_5">Returning to the '**/*.html'-Pipeline</h3>
+<p>
+ At the end of this pipeline, processing returns the results into
+ the aggregation section of the
+ <a href="#html-pipeline">'**/*.html' Pipeline</a>,
+ merges it with other data, skins and serializes for presentation
+ in the requesting client.
+ </p>
+<a name="N10278"></a><a name="custom"></a>
+<h3 class="underlined_5">Customizing the html pipeline</h3>
+<p>
+ In this last part of this document, we will show how to customize the
+ HTML-pipeline to add your additional steps to the default processing.
+ </p>
+<a name="N10281"></a><a name="when"></a>
+<h4>When to customize?</h4>
+<p>
+ The html-Pipeline in Forrest is designed to be able to also
+ integrate legacy html-Pages in a Forrest project. In doing so,
+ it will fix common markup errors and convert html to Forrest's
+ intermediate document format.
+ </p>
+<p>
+ Due to the nature of html as presentational markup, there is no way
+ this automated process can identify elements in your pages that
+ are not required or even unwanted in the Forrest environment.
+ </p>
+<p>
+ A good example are pages from sites where the navigational elements
+ (menus, tabs etc.) are embedded in the html of each page.
+ Since Forrest can't know what is an unwanted menu and what belongs
+ to the page body that you want to keep, you will need to customize
+ the process to remove elements that are not needed. If you don't,
+ then you will see the original page from your legacy website,
+ menu and all, embedded in your new Forrest site.
+ </p>
+<a name="N10291"></a><a name="how"></a>
+<h4>How to customize?</h4>
+<p>
+ To add your own custom processing for a group of pages, you will
+ create a project sitemap with pipelines that process documents
+ according to your specifications.
+ </p>
+<p>
+ This project sitemap is located in the file
+ 'src/documentation/sitemap.xmap' in your Forrest project directory
+ and will be created automatically when you seed a new project.
+ At this point it contains only one
+ <a href="project_sitemap.xmap.html#Example+pipeline+for+%27**custom.xml%27">
+ pipeline for handling the '**custom.xml'-pattern</a> as an example.
+ </p>
+<p>
+ To add your own custom processing, edit the file and add a new
+ pipeline to the project sitemap. Since the project sitemap is
+ loaded into the main sitemap
+ <a href="sitemap.xmap.html#Insertion+Point+for+Project+Sitemap">
+ right at the top</a>, your pipeline intercepts practically all
+ of Forrest's standard pipelines.
+ </p>
+<a name="N102A9"></a><a name="what"></a>
+<h4>What to intercept?</h4>
+<p>
+ Where to intercept standard processing is really a matter of your
+ choice. A good rule is to replace as little standard handling
+ as possible so that future changes in the Forrest architecture are
+ less likely to break your application.
+ </p>
+<p>
+ In our case all we need to do is add a transformation that
+ removes all the unwanted elements. The best place to do this
+ would be right after the generator has converted our document to
+ xhtml.
+ </p>
+<p>
+ However, since we can only replace a complete pipeline,
+ we'll create a new pipeline that intercepts **.xml for our pages,
+ copy the steps the original processor is doing and add a
+ transformation of our own to it.
+ </p>
+<a name="N102B9"></a><a name="intercept"></a>
+<h4>Intercept pattern</h4>
+<p>
+ Take great care when intercepting very basic pipelines.
+ Instead of designing our custom pipeline to match the
+ original **.xml pattern, try to narrow your matcher down to
+ something that will only match your pages.
+ </p>
+<p>
+ If all your pages are located in a directory called mytest,
+ then use a matcher like '/mytest/*.xml' to avoid highjacking
+ the processing for all the other requests.
+ </p>
+<p class="instruction">
+ Add a new pipeline in your project sitemap and set the matcher
+ to '/mytest/*.xml'.
+ </p>
+<p>
+ The new pipeline should look like this and does nothing so far.
+ </p>
+<pre class="code">
+<!--Custom Pipeline for my bad html-pages-->
+<map:pipeline>
+ <map:match pattern="mytest/*.xml">
+
+ </map:match>
+</map:pipeline></pre>
+<p class="instruction">
+ Open the 'forrest.xmap', navigate to the file-resolver-section,
+ copy the four lines for handling *.html files and paste them into
+ your new pipeline.
+ </p>
+<pre class="code">
+<!--Custom Pipeline for my bad html-pages-->
+<map:pipeline>
+ <map:match pattern="mytest/*.xml">
+ <map:generate src="{project:content.xdocs}{uri}.html" type="html"/>
+ <map:transform src="{forrest:stylesheets}/html2document.xsl"/>
+ <map:transform type="idgen"/>
+ <map:serialize type="xml-document"/>
+ </map:match>
+</map:pipeline></pre>
+<p>
+ Your custom pipeline will now behave exactly like the standard
+ html-handler. Now all that is left to be done is creating the
+ custom transformation and adding it the pipeline.
+ </p>
+<p class="instruction">
+ Design and test a new XSL-Transformation that removes the
+ unwanted elements and save it in your project's stylesheet
+ directory, usually src/documentation/resources/stylesheets
+ (defined in project.stylesheets-dir of forrest.properties),
+ which is central storage for all stylesheets in a project.
+ </p>
+<p class="instruction">
+ Add the new transformation as a new line, straight after the
+ generator, and save the changes.
+ </p>
+<pre class="code">
+<!--Custom Pipeline for my bad html-pages-->
+<map:pipeline>
+ <map:match pattern="mytest/*.xml">
+ <map:generate src="{project:content.xdocs}{uri}.html" type="html" />
+ <strong><map:transform src="{forrest:stylesheets}/fixMyBadHTML.xsl"/></strong>
+ <map:transform src="{forrest:stylesheets}/html2document.xsl" />
+ <map:transform type="idgen" />
+ <map:serialize type="xml-document"/>
+ </map:match>
+</map:pipeline></pre>
+<p>
+ Done! You have just added your own custom-processing.
+ Don't forget to view the pages to verify that it is working
+ properly.
+ </p>
+<div class="frame note">
+<div class="label">Note</div>
+<div class="content">
+ Our pipeline does not exactly do what the original pipeline does.
+ To make things easier, we omitted the internationalization part
+ in our pipeline. So if you need to create multi-language sites,
+ make sure that you adjust your pipeline accordingly.
+ </div>
+</div>
+</div>
+</div>
+<div class="clearboth"> </div>
+</div>
+<div id="footer">
+<div class="lastmodified">
+<script type="text/javascript"><!--
+document.write("<text>Last Published:</text> " + document.lastModified);
+// --></script>
+</div>
+<div class="copyright">
+ Copyright ©
+ 2002-2005 <a href="http://www.apache.org/licenses/">The Apache Software Foundation.</a>
+</div>
+</div>
+</body>
+</html>
Propchange: forrest/site/docs_0_80/howto/howto-custom-html-source.html
------------------------------------------------------------------------------
svn:eol-style = native
Added: forrest/site/docs_0_80/howto/howto-custom-html-source.pdf
URL: http://svn.apache.org/viewcvs/forrest/site/docs_0_80/howto/howto-custom-html-source.pdf?rev=193078&view=auto
==============================================================================
Binary file - no diff available.
Propchange: forrest/site/docs_0_80/howto/howto-custom-html-source.pdf
------------------------------------------------------------------------------
svn:mime-type = application/pdf
Added: forrest/site/docs_0_80/howto/howto-editcss.html
URL: http://svn.apache.org/viewcvs/forrest/site/docs_0_80/howto/howto-editcss.html?rev=193078&view=auto
==============================================================================
--- forrest/site/docs_0_80/howto/howto-editcss.html (added)
+++ forrest/site/docs_0_80/howto/howto-editcss.html Wed Jun 22 22:36:19 2005
@@ -0,0 +1,439 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta content="Apache Forrest" name="Generator">
+<meta name="Forrest-version" content="0.8-dev">
+<meta name="Forrest-skin-name" content="pelt">
+<title>How to customize Forrest CSS
+ WYSIWYG-style (v0.8-dev)</title>
+<link type="text/css" href="../../skin/basic.css" rel="stylesheet">
+<link media="screen" type="text/css" href="../../skin/screen.css" rel="stylesheet">
+<link media="print" type="text/css" href="../../skin/print.css" rel="stylesheet">
+<link type="text/css" href="../../skin/profile.css" rel="stylesheet">
+<script src="../../skin/getBlank.js" language="javascript" type="text/javascript"></script><script src="../../skin/getMenu.js" language="javascript" type="text/javascript"></script><script src="../../skin/fontsize.js" language="javascript" type="text/javascript"></script>
+<link rel="shortcut icon" href="../../favicon.ico">
+</head>
+<body onload="init()">
+<script type="text/javascript">ndeSetTextSize();</script>
+<div id="top">
+<div class="breadtrail">
+<a href="http://www.apache.org/">apache</a> > <a href="http://forrest.apache.org/">forrest</a><script src="../../skin/breadcrumbs.js" language="JavaScript" type="text/javascript"></script>
+</div>
+<div class="header">
+<div class="grouplogo">
+<a href="http://www.apache.org/"><img class="logoImage" alt="Apache" src="../../images/apache-forrest.png" title="The Apache Software Foundation"></a>
+</div>
+<div class="projectlogo">
+<a href="http://forrest.apache.org/"><img class="logoImage" alt="Forrest" src="../../images/project-logo.gif" title="Apache Forrest"></a>
+</div>
+<div class="searchbox">
+<form action="http://www.google.com/search" method="get" class="roundtopsmall">
+<input value="forrest.apache.org" name="sitesearch" type="hidden"><input onFocus="getBlank (this, 'Search the site with google');" size="25" name="q" id="query" type="text" value="Search the site with google">
+ <input attr="value" name="Search" value="Search" type="submit">
+</form>
+</div>
+<ul id="tabs">
+<li>
+<a class="base-not-selected" href="../../index.html">Welcome</a>
+</li>
+<li>
+<a class="base-not-selected" href="../../contrib.html">Project</a>
+</li>
+<li>
+<a class="base-not-selected" href="../../versions/index.html">Versioned Docs</a>
+</li>
+<li>
+<a class="base-not-selected" href="../../pluginDocs/index.html">Plugins</a>
+</li>
+<li>
+<a class="base-not-selected" href="../../tools/index.html">Tools</a>
+</li>
+</ul>
+</div>
+</div>
+<div id="main">
+<div id="publishedStrip">
+<div id="level2tabs"></div>
+<script type="text/javascript"><!--
+document.write("<text>Last Published:</text> " + document.lastModified);
+// --></script>
+</div>
+<div class="breadtrail">
+
+
+ </div>
+<div id="menu">
+<div onclick="SwitchMenu('menu_selected_1.1', '../../skin/')" id="menu_selected_1.1Title" class="menutitle" style="background-image: url('../../skin/images/chapter_open.gif');">0.80-dev</div>
+<div id="menu_selected_1.1" class="selectedmenuitemgroup" style="display: block;">
+<div class="menuitem">
+<a href="../../docs_0_80/index.html">Overview</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/faq.html">FAQs</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/changes.html">Changes</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/todo.html">Todo</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/your-project.html">Using Forrest</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/validation.html">XML Validation</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/linking.html">Menus and Linking</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/searching.html">Searching</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/skins.html">Default Skins</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/skin-package.html">Skin Packages</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/views.html">Views-dev</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/forrest-contract.html">Our Contract</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/compliance.html">Standards Compliance</a>
+</div>
+<div onclick="SwitchMenu('menu_selected_1.1.14', '../../skin/')" id="menu_selected_1.1.14Title" class="menutitle" style="background-image: url('../../skin/images/chapter_open.gif');">How-To</div>
+<div id="menu_selected_1.1.14" class="selectedmenuitemgroup" style="display: block;">
+<div class="menuitem">
+<a href="../../docs_0_80/howto/index.html">Overview</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/howto-howto.html">Write a How-to</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/howto-asf-mirror.html">Download mirror</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/howto-pdf-tab.html">Create tab PDF</a>
+</div>
+<div class="menupage">
+<div class="menupagetitle">Edit CSS (WYSIWYG)</div>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/howto-corner-images.html">CSS corner SVG</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/howto-forrest-from-maven.html">Maven Integration</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/howto-buildPlugin.html">Build a Plugin</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/howto-custom-html-source.html">Custom html source</a>
+</div>
+<div onclick="SwitchMenu('menu_1.1.14.10', '../../skin/')" id="menu_1.1.14.10Title" class="menutitle">Multipage HowTo</div>
+<div id="menu_1.1.14.10" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../docs_0_80/howto/multi/howto-multi.html">Introduction</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/multi/step1.html">Step 1</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/multi/step2.html">Step 2</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/multi/step3.html">Step 3</a>
+</div>
+</div>
+<div onclick="SwitchMenu('menu_1.1.14.11', '../../skin/')" id="menu_1.1.14.11Title" class="menutitle">Views</div>
+<div id="menu_1.1.14.11" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../docs_0_80/howto/howto-view-install.html">Install views</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/howto-view-dsl.html">forrest:view DSL</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/howto-view-contracts.html">contract implementations</a>
+</div>
+</div>
+</div>
+<div onclick="SwitchMenu('menu_1.1.15', '../../skin/')" id="menu_1.1.15Title" class="menutitle">Advanced Topics</div>
+<div id="menu_1.1.15" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../docs_0_80/build.html">Building Forrest</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/catalog.html">Using DTD Catalogs</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/sitemap-ref.html">Sitemap Reference</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/project-sitemap.html">Project sitemap</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/cap.html">Sourcetype Action</a>
+</div>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/upgrading_08.html">Upgrading to 0.8</a>
+</div>
+<div onclick="SwitchMenu('menu_1.1.17', '../../skin/')" id="menu_1.1.17Title" class="menutitle">Reference docs</div>
+<div id="menu_1.1.17" class="menuitemgroup">
+<div onclick="SwitchMenu('menu_1.1.17.1', '../../skin/')" id="menu_1.1.17.1Title" class="menutitle">DTD documentation</div>
+<div id="menu_1.1.17.1" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../dtdx/dtd-docs.html">Overview</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/document-v20.dtdx.html">document-v20</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/howto-v20.dtdx.html">howto-v20</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/faq-v20.dtdx.html">faq-v20</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/document-v13.dtdx.html">document-v13</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/howto-v13.dtdx.html">howto-v13</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/faq-v13.dtdx.html">faq-v13</a>
+</div>
+</div>
+<div onclick="SwitchMenu('menu_1.1.17.2', '../../skin/')" id="menu_1.1.17.2Title" class="menutitle">Doc samples</div>
+<div id="menu_1.1.17.2" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../dtdx/document-v13.html">document-v13</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/document-v20.html">document-v20</a>
+</div>
+</div>
+</div>
+<div onclick="SwitchMenu('menu_1.1.18', '../../skin/')" id="menu_1.1.18Title" class="menutitle">Older Docs</div>
+<div id="menu_1.1.18" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../docs_0_80/primer.html">Forrest Primer</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/libre-intro.html">Libre</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/dreams.html">Dream list</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_80/howto/cvs-ssh/howto-cvs-ssh.html">CVS over SSH</a>
+</div>
+</div>
+</div>
+<div id="credit">
+<hr>
+ This is documentation for development version v0.8
+ (<a href="/versions/index.html">More</a>)</div>
+<div id="roundbottom">
+<img style="display: none" class="corner" height="15" width="15" alt="" src="../../skin/images/rc-b-l-15-1body-2menu-3menu.png"></div>
+<div id="credit2">
+<a href="http://apachecon.com/"><img border="0" title="ApacheCon Europe 2005" alt="ApacheCon Europe 2005 - logo" src="http://apache.org/images/ac2005eu_135x50.gif" style="width: 135px;height: 50px;"></a>
+</div>
+</div>
+<div id="content">
+<div title="Portable Document Format" class="pdflink">
+<a class="dida" href="howto-editcss.pdf"><img alt="PDF -icon" src="../../skin/images/pdfdoc.gif" class="skin"><br>
+ PDF</a>
+</div>
+<div class="trail">
+<text>Font size:</text>
+ <input value="Reset" class="resetfont" title="Reset text" onclick="ndeSetTextSize('reset'); return false;" type="button">
+ <input value="-a" class="smallerfont" title="Shrink text" onclick="ndeSetTextSize('decr'); return false;" type="button">
+ <input value="+a" class="biggerfont" title="Enlarge text" onclick="ndeSetTextSize('incr'); return false;" type="button">
+</div>
+<h1>How to customize Forrest CSS
+ WYSIWYG-style</h1>
+<div class="abstract"> This How-To shows how to use Mozilla
+ Firebird and the free EditCSS-Plugin to
+ customize your Forrest design in a
+ WYSIWYG-way.</div>
+<div id="motd-area">
+ This is documentation for development version v0.8
+ (<a href="/versions/index.html">More</a>)</div>
+<div id="minitoc-area">
+<ul class="minitoc">
+<li>
+<a href="#Intended Audience">Intended Audience</a>
+</li>
+<li>
+<a href="#Purpose">Purpose</a>
+</li>
+<li>
+<a href="#Prerequisites">Prerequisites</a>
+</li>
+<li>
+<a href="#Steps">Steps</a>
+<ul class="minitoc">
+<li>
+<a href="#openForrest">Open your Forrest</a>
+</li>
+<li>
+<a href="#OpenEditCSS">Open the EditCSS-Sidebar</a>
+</li>
+<li>
+<a href="#changeCSS">Change any CSS</a>
+</li>
+<li>
+<a href="#saveChanges">How to save changes?</a>
+</li>
+</ul>
+</li>
+<li>
+<a href="#Feedback and further development of this How-To">Feedback and further development of this How-To</a>
+</li>
+</ul>
+</div>
+<a name="N10010"></a><a name="Intended Audience"></a>
+<h2 class="underlined_10">Intended Audience</h2>
+<div class="section">
+<p> Users who want to customize the Forrest look
+ and feel or simply experiment with changing
+ certain CSS-styles settings to see what
+ happens.</p>
+</div>
+<a name="N10018"></a><a name="Purpose"></a>
+<h2 class="underlined_10">Purpose</h2>
+<div class="section">
+<p> A major part of Forrest's look and feel is
+ controlled by a few CSS style sheets. Since
+ Forrest allows you to override these settings,
+ changing the CSS is a quick and easy
+ alternative to creating (and maintaining) a
+ whole new skin.</p>
+<p> You'll learn how to use free tools to change
+ and experiment with styles in a WYSIWYG way, so
+ that you can immediately see what effect
+ changing a CSS property will have on the
+ look and feel of your Forrest.</p>
+</div>
+<a name="N10023"></a><a name="Prerequisites"></a>
+<h2 class="underlined_10">Prerequisites</h2>
+<div class="section">
+<p>To follow these instructions you will need:</p>
+<ol>
+
+<li>Browser-access to the Forrest-site you want
+ to experiment with. Starting with a new 'forrest seed' site is
+ good for your first attempt.
+ <div class="frame note">
+<div class="label">Note</div>
+<div class="content">You can even
+ experiment with Forrest's core skins CSS. Please send patches if
+ you enhance something.
+ </div>
+</div>
+</li>
+
+<li>The current version of the free Mozilla
+ Firefox-Browser installed on your system.
+ If you don't already use it, you can
+ download it from <a href="http://www.mozilla.org/products/firefox/">http://www.mozilla.org/products/firefox/</a>
+
+</li>
+
+
+<li>The Firefox-PlugIn EditCSS. It downloads
+ and installs in just a few seconds from the
+ Install-Link at <a href="http://editcss.mozdev.org/">http://editcss.mozdev.org/</a>
+
+<div class="frame note">
+<div class="label">Note</div>
+<div class="content">With standard security settings in
+ place, Firefox will pop up a line at the top
+ of the window because this site has by
+ default no permission to install plugins on
+ your computer. Click "Edit Options" and
+ then "Allow" to change that, then click on
+ the Install-link again. Don't forget to
+ close and restart Firebird when the
+ installation is finished.</div>
+</div>
+</li>
+
+<li>A basic understanding of CSS and access to
+ a good CSS-reference. Tutorials and
+ Reference can be found at <a href="http://www.htmlhelp.com/reference/css/">http://www.htmlhelp.com/reference/css/</a>.</li>
+
+</ol>
+</div>
+<a name="N1004C"></a><a name="Steps"></a>
+<h2 class="underlined_10">Steps</h2>
+<div class="section">
+<a name="N10051"></a><a name="openForrest"></a>
+<h3 class="underlined_5">Open your Forrest</h3>
+<p class="instruction">Start your Firefox
+ Browser and open the Forrest you'd like to
+ work on/play with.</p>
+<p>The page you have pointed to will show up in
+ Firefox's main window.</p>
+<a name="N1005F"></a><a name="OpenEditCSS"></a>
+<h3 class="underlined_5">Open the EditCSS-Sidebar</h3>
+<p class="instruction">Select
+ View-Sidebar-EditCSS from Firefox's main
+ menu to open the EditCSS sidebar.</p>
+<p>The EditCSS sidebar will show next to the
+ main window and load all the styles from
+ the main page.</p>
+<a name="N1006D"></a><a name="changeCSS"></a>
+<h3 class="underlined_5">Change any CSS</h3>
+<p class="instruction">Change any style you'd
+ like to experiment with or add new settings
+ and styles of your choice by simply
+ editing the text of the sidebar.</p>
+<p>EditCSS pushes any change you make in the
+ sidebar right back into the style-settings
+ of the main window, so that effects will
+ show right away.</p>
+<div class="frame note">
+<div class="label">Note</div>
+<div class="content">On slow systems or when inserting big
+ changes it might be a good idea to paste
+ these from the clipboard to avoid a zillion
+ updates to the main windows for every
+ character you type.</div>
+</div>
+<a name="N1007E"></a><a name="saveChanges"></a>
+<h3 class="underlined_5">How to save changes?</h3>
+<p>Since it takes a few explanations to apply
+ the changes to your Forrest, I've made
+ this the topic of yet another HowTo called
+ "Howto change and extend Forrest-CSS"</p>
+</div>
+<a name="N10088"></a><a name="Feedback and further development of this How-To"></a>
+<h2 class="underlined_10">Feedback and further development of this How-To</h2>
+<div class="section">
+<p> Please provide feedback about this document via
+ the <a href="../../mail-lists.html">mailing
+ lists</a>. </p>
+</div>
+</div>
+<div class="clearboth"> </div>
+</div>
+<div id="footer">
+<div class="lastmodified">
+<script type="text/javascript"><!--
+document.write("<text>Last Published:</text> " + document.lastModified);
+// --></script>
+</div>
+<div class="copyright">
+ Copyright ©
+ 2002-2005 <a href="http://www.apache.org/licenses/">The Apache Software Foundation.</a>
+</div>
+</div>
+</body>
+</html>
Propchange: forrest/site/docs_0_80/howto/howto-editcss.html
------------------------------------------------------------------------------
svn:eol-style = native
Added: forrest/site/docs_0_80/howto/howto-editcss.pdf
URL: http://svn.apache.org/viewcvs/forrest/site/docs_0_80/howto/howto-editcss.pdf?rev=193078&view=auto
==============================================================================
Binary file - no diff available.
Propchange: forrest/site/docs_0_80/howto/howto-editcss.pdf
------------------------------------------------------------------------------
svn:mime-type = application/pdf