Return-Path:
- Users who want to change the colors of the corner images in the
- output html documents.
+ Users who want to change the colors of the corner images in the output
+ html documents.
- This explanation is also useful for skin developers to understand
- the corner image generation process.
+ This explanation is also useful for skin developers to understand the
+ corner image generation process.
Forrest renders the corner images through
- Scalable Vector Graphics (SVG).
- It may be necessary to change the color of
- the corner images to be suitable for your own skin colors.
+ Scalable Vector Graphics (SVG). It
+ may be necessary to change the color of the corner images to be suitable
+ for your own skin colors.
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
+ images are named (the contract) and then shows how to define new colors
+ for these images by modifying the
- The corner images are referenced in some .css files of the
- above-named skins; for example, in screen.css of the pelt skin:
+ The corner images are referenced in some .css files of the above-named
+ skins; for example, in screen.css of the pelt skin:
- The naming follows a contract which is described below. In general,
- the naming looks like:
+ The naming follows a contract which is described below. In general, the
+ naming looks like:
src/documentation/skinconf.xml
of a project.
Let us get into details: @@ -108,80 +103,58 @@
images
images/ = {$FORREST_HOME}/main/webapp/skins/common/images/
- images/ = {$FORREST_HOME}/main/webapp/skins/common/images/
{$name}
rc.svg.xslt
: handles rounded corners
+ rc.svg.xslt
: handles rounded corners
dc.svg.xslt
: handles diagonal 45-degree corners
+ dc.svg.xslt
: handles diagonal 45-degree corners
name = [rc|dc]
- rc
- name = [rc|dc]
+ rc
{$v-orientation}
v-orientation = [t|b]
- t
- v-orientation = [t|b]
+ t
{$h-orientation}
h-orientation = [l|r]
- r
- h-orientation = [l|r]
+ r
{$size}
size=x
- 5
- size=x
+ 5
{$backgroundColor}
<color name=""/>
element in the skinconf.xml
(the value="{$color}"
attribute will be applied).
- header
- header
{$strokeColor}
<color name=""/>
element in the skinconf.xml
(the value="{$color}"
attribute will be applied).
- searchbox
- searchbox
{$foregroundColor}
<color name=""/>
element in the skinconf.xml
(the value="{$color}"
attribute will be applied).
- searchbox
- searchbox
- modifying the skinconf.xml
of your project (by
- default you find it at [project-dir]/src/documentation/
).
+ modifying the skinconf.xml
of your project (by default you
+ find it at [project-dir]/src/documentation/
).
- Starting about line 155 you find a <colors>
- ... </colors>
element with content commented-out:
+ Starting about line 155 you find a <colors>
...
+ </colors>
element with content commented-out:
- To modify the colors of the corner images, you can either define
- your own <color name=.../>
elements or uncomment
- one of the existing <color name=.../>
elements
- and adjust the color value to your needs.
+ To modify the colors of the corner images, you can either define your
+ own <color name=.../>
elements or uncomment one of
+ the existing <color name=.../>
elements and adjust
+ the color value to your needs.
e.g. @@ -215,8 +188,9 @@ <color name="tab-selected" value="#FF0000"/>
- This affects all corner images whose {$backgroundColor}
, {$strokeColor}
or
- {$foregroundColor}
is set to tab-selected
.
+ This affects all corner images whose {$backgroundColor}
,
+ {$strokeColor}
or {$foregroundColor}
is set to
+ tab-selected
.
For example, in screen.css
(of the "pelt" skin) you find:
Now the stroke color (-2tab-selected
) and the foreground
- color (-3tab-selected
) are set to red (remember: we
- defined #FF0000
as the "color" value of
- tab-selected
).
+ color (-3tab-selected
) are set to red (remember: we defined
+ #FF0000
as the "color" value of tab-selected
).
- In addition to the modification of skinconf.xml
- you can also modify the respective .css file of your skin.
+ In addition to the modification of skinconf.xml
you can
+ also modify the respective .css file of your skin.
Here's another example: @@ -263,14 +236,13 @@ </colors>
- Here we have created our own color tags (in the .css file) and
- defined the respective values for them (in skinconf.xml
).
- Now you have color images with a red background and a green
- foreground. Horrible, isn't it?
+ Here we have created our own color tags (in the .css file) and defined
+ the respective values for them (in skinconf.xml
). Now you
+ have color images with a red background and a green foreground.
+ Horrible, isn't it?
Please provide feedback about this document via the
Modified: forrest/trunk/site-author/content/xdocs/docs_0_70/howto/howto-custom-html-source.xml
URL: http://svn.apache.org/viewvc/forrest/trunk/site-author/content/xdocs/docs_0_70/howto/howto-custom-html-source.xml?view=diff&rev=527010&r1=527009&r2=527010
==============================================================================
--- forrest/trunk/site-author/content/xdocs/docs_0_70/howto/howto-custom-html-source.xml (original)
+++ forrest/trunk/site-author/content/xdocs/docs_0_70/howto/howto-custom-html-source.xml Mon Apr 9 20:48:52 2007
@@ -24,26 +24,24 @@
- Users who want to integrate HTML-pages that require custom
- adjustments and everybody who wants to learn more about Forrest's
- pipelines in general.
+ Users who want to integrate HTML-pages that require custom adjustments and
+ everybody who wants to learn more about Forrest's pipelines in general.
- 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.
+ 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.
To follow these instructions you will need:
+ To follow these instructions you will need:
+
- 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
- Customizing the html pipeline.
+ 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 Customizing the html pipeline.
- The best way to learn about Forrest pipelines is follow
- the processing of an imaginary request through the forrest
- machinery.
+ The best way to learn about Forrest pipelines is follow the processing
+ of an imaginary request through the forrest machinery.
- So let's see what happens, when a client asks Forrest to
- serve the document
+ So let's see what happens, when a client asks Forrest to serve the
+ document
- 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
+ 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.
- Open the file 'main/webapp/sitemap.xmap' in Forrest's
- program directory with a text editor of your choice.
+ Open the file 'main/webapp/sitemap.xmap' in Forrest's program directory
+ with a text editor of your choice.
- 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.
+ 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.
- Follow this link to the
-
- start of the Sitemap.
-
+ Follow this link to the
+ start of the Sitemap.
- 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.
+ 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.
- 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.
+ 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.
- So let's skip right to the start of the
- Pipelines-Section. Search for <map:pipelines> or
- follow this link to the
-
- beginning of the pipelines-element
-
+ So let's skip right to the start of the Pipelines-Section. Search for
+ <map:pipelines> or follow this link to the
+ beginning of the
+ pipelines-element
- Within the pipelines-element you will find a long list
- of pipeline-Elements (no trailing 's'), each one of them defining a
+ 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.
- 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.
+ 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.
- 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.
+ 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.
- To better know what we are talking about, let's follow
- Forrest down the list to the
-
- Test for the First Pipeline
- .
+ To better know what we are talking about, let's follow Forrest down the
+ list to the Test
+ for the First Pipeline .
- 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.
+ 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.
Skip forward until we find the
-
- First Match for "**/*.html"
-
- (<map:match pattern="**/*.html">).
+ First
+ Match for "**/*.html" (<map:match pattern="**/*.html">).
- Let's take a quick look at this pipeline to understand
- what's happening here:
+
+ Let's take a quick look at this pipeline to understand what's happening
+ here:
- 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?
-
- Well, the complex part begins, when we take a closer look at
- the sources of the aggregation.
-
- This mysterious element is most easily explained as a
- secondary request to the Forrest system.
-
- 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.)
+ 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?
- 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
+ Well, the complex part begins, when we take a closer look at the sources
of the aggregation.
+ This mysterious element is most easily explained as a secondary request
+ to the Forrest system.
+
+ 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.)
+
+ 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.
+
- To find out what goes into our aggregation, we'll need to look
- at the pipeline that is called by
+ To find out what goes into our aggregation, we'll need to look at the
+ pipeline that is called by
- 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.
- In our example the matcher pattern
-
+ 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.
+
+ In our example the matcher pattern If we insert that into we get
- As you can easily tell, we are suddenly calling for a whole
- new document. Let's see where that takes us:
+ If we insert that into
+
+ we get
+
+ As you can easily tell, we are suddenly calling for a whole new
+ document. Let's see where that takes us:
- Processing of cocoon-calls is not much different from
- normal requests by a client. When you launch a call like
+ Processing of cocoon-calls is not much different from normal requests by
+ a client. When you launch a call like
- Forrest will once again start searching its main sitemap
- from the beginning and look for a pipeline to match that call.
+ Forrest will once again start searching its main sitemap from the
+ beginning and look for a pipeline to match that call.
- Search for '**body-*.html' from the beginning of the
- sitemap or jump to the
- First Match for '**body-*.html'
- to see where we find our next match.
+ Search for '**body-*.html' from the beginning of the sitemap or jump to
+ the
+ First
+ Match for '**body-*.html' to see where we find our next match.
- Our first match is different to the previous ones because
- there is a second condition placed inside the matcher.
- Doing the replacements
-
'http://some.domain.org/mytest/mybad.html'.
**/*.html
is applied to the request-name
- mytest/mybad.html
, so we have three variables
- altogether:
+
+ **/*.html
is applied to
+ the request-name mytest/mybad.html
, so we have three
+ variables altogether:
-
@@ -299,82 +263,93 @@
the second match
- we quickly discover that there can't be a file of
- that name in the project-directory.
-
- (The variable '{properties:content.xdocs}' is always replaced with
- the name of your project directory that you can change
- in the 'forrest.properties'-file.)
-
- 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. -
+
+ we quickly discover that there can't be a file of that name in the
+ project-directory.
+
+ (The variable '{properties:content.xdocs}' is always replaced with the
+ name of your project directory that you can change in the
+ 'forrest.properties'-file.)
+
+ 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. +
- Continue searching downwards for '**body-*.html' in the - sitemap-file or jump directly to the - Second Match for '**body-*.html'. + Continue searching downwards for '**body-*.html' in the sitemap-file or + jump directly to the + Second + Match for '**body-*.html'.
- Looking at the pipeline that handles the request, we see that - the cocoon-protocol is once again invoked -
- + Looking at the pipeline that handles the request, we see that the + cocoon-protocol is once again invoked + +this time as a direct generator of input for our pipeline.
- 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: + 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:
- In our example the matcher pattern
- **body-*.html
is applied to the request-name
- mytest/body-mybad.html
.
- Which means that we have three variables altogether:
+ In our example the matcher pattern **body-*.html
is applied
+ to the request-name mytest/body-mybad.html
. Which means
+ that we have three variables altogether: