You are viewing a plain text version of this content. The canonical link for it is here.
Posted to svn@forrest.apache.org by th...@apache.org on 2005/11/14 11:25:38 UTC
svn commit: r344096 -
/forrest/trunk/site-author/content/xdocs/docs_0_80/howto/howto-structurer-dsl.xml
Author: thorsten
Date: Mon Nov 14 02:25:32 2005
New Revision: 344096
URL: http://svn.apache.org/viewcvs?rev=344096&view=rev
Log:
Finished v2 howtos. We can now officially recommend the usage of v2. Still it is unstable and should remain in the whiteboard till the perfomance issues are solved.
Modified:
forrest/trunk/site-author/content/xdocs/docs_0_80/howto/howto-structurer-dsl.xml
Modified: forrest/trunk/site-author/content/xdocs/docs_0_80/howto/howto-structurer-dsl.xml
URL: http://svn.apache.org/viewcvs/forrest/trunk/site-author/content/xdocs/docs_0_80/howto/howto-structurer-dsl.xml?rev=344096&r1=344095&r2=344096&view=diff
==============================================================================
--- forrest/trunk/site-author/content/xdocs/docs_0_80/howto/howto-structurer-dsl.xml (original)
+++ forrest/trunk/site-author/content/xdocs/docs_0_80/howto/howto-structurer-dsl.xml Mon Nov 14 02:25:32 2005
@@ -19,108 +19,100 @@
<howto>
<header>
- <title>How to use the forrest:view config-DSL</title>
- <abstract>
- This How-To describes the usage of the forrest:view config Domain Specific Language
- to create beautiful websites in no time.
- </abstract>
+ <title>How to use the structurer</title>
+ <abstract> This How-To describes the usage of the structurer config domain
+ specific language to create beautiful websites in no time. </abstract>
<last-modified-content-date date="2005-07-17"/>
</header>
<audience title="Intended Audience">
-<warning>
-NEED REFACTORING FOR DISPATCHER!!!
-</warning>
-<warning>
-The "Dispatcher" (aka "Views") is new functionality which is still in development phase. That is why it is in the
-"whiteboard" section of the Forrest distribution. This HowTo is a good start but still needs more work.
-</warning>
- <p>
- This part of the the dispatcher is called the structurer and is dedicated to webdesigner and user with some knowlegde of css.
- </p>
- <note>
- For the moment we will use a special seed template called seed-v2. We still
- need to fix issues of the dispatcher that it really can replace old
- fashion skins. Like performance, standalone contracts, other testing output/input formats - using POJO based
- processing will help solving this. All this will ATM happen in the v2 seed-target till the dispatcher will
- be realesed to the stable plugins. So make regular updates of your forrest-trunk to keep track.
- </note>
- <warning>
- The way we develope contracts will/may change with introduction of java based processing rather then xsl. Please keep this in mind
- and help updating the documentation by sending patches. TIA. ;-)
- </warning>
+ <warning> The "Dispatcher" (aka "Views") is new functionality which is
+ still in development phase. That is why it is in the "whiteboard" section
+ of the Forrest distribution. This HowTo is a good start but still needs
+ more work. </warning>
+ <p> This part of the the dispatcher is called the structurer and is
+ dedicated to webdesigner and user with some knowlegde of css. </p>
+ <note> For the moment we will use a special seed template called seed-v2.
+ We still need to fix issues of the dispatcher that it really can replace
+ old fashion skins. Like performance, standalone contracts, other testing
+ output/input formats - using POJO based processing will help solving
+ this. All this will ATM happen in the v2 seed-target till the dispatcher
+ will be realesed to the stable plugins. So make regular updates of your
+ forrest-trunk to keep track. </note>
+ <warning> The way we develope contracts will/may change with introduction
+ of java based processing rather then xsl. Please keep this in mind and
+ help updating the documentation by sending patches. TIA. ;-) </warning>
</audience>
<purpose title="Purpose">
- <p>
- This how-to will show you how to write a <strong>forrest:view</strong> from the ground up.
- We will focus on html as the output format. As well it will show how to add your own css implementation to the view.
- </p>
+ <p> This how-to will show you how to write a <strong>forrest:view</strong>
+ from the ground up. We will focus on html as the output format. As well
+ it will show how to add your own css implementation to the structurer.
+ </p>
</purpose>
<prerequisites title="Prerequisites">
<ul>
- <li>
- You have a ready-to-go new seed-v2 (v2) based on the dispatcher like described in <a href="site:howto/dispatcher/install">Install</a>.
- </li>
- <li>
- Reading that how-to is as well a good idea to understand the used directory structure in this how-to.
- </li>
- <li>Installing a mozilla browser and the forrestbar helps a lot in developing.</li>
+ <li> You have a ready-to-go new seed-v2 (v2) based on the dispatcher like
+ described in <a href="site:howto/dispatcher/install">Install</a>. </li>
+ <li> Reading that how-to is as well a good idea to understand the used
+ directory structure in this how-to. </li>
+ <li>Installing a mozilla browser and the forrestbar helps a lot in
+ developing.</li>
</ul>
</prerequisites>
<steps title="Steps">
- <note>
- When developing with the dispatcher we assume you are using 'forrest run' and the following workflow:<br/>
- change files -> refresh browser
- </note>
- <note>
- Installing a mozilla browser and the forrestbar helps a lot in developing. Many instructions assumes that you have the
- forrestbar installed.
- </note>
- <p>
- We developed<strong> the structurer</strong> to let the user decide where to place elements in e.g. html pages.
- We started this work with the <code>skinconf.xml</code> where you could configure certain elements and
- their positions. These elements were known under certain names. It was up to the skin designer to support
- this configuration and the elements.
- </p>
- <p>
- The work started with grouping elements (the ones from skinconf). We used css-contracts that
- we added as @attributes e.g. <code><![CDATA[<div id="content-main"/>]]> </code>. That made it
- possible to use the same elements in different skins. For the full list refer to the
- <a href="http://svn.apache.org/repos/asf/forrest/trunk/main/webapp/skins/leather-dev/contracts.initial.txt">
- initial contract list
- </a>
- </p>
- <p>
- Around this contracts we developed a configuration Domain Specific Language - called <strong>the structurer</strong>.
- The <strong>structurer</strong> allows us to define the order in which <strong>forrest:contract</strong>s appear, and also to group
- them using <strong>forrest:hook</strong>s.
- </p>
- <note>
- The structurer is as well a configuration file for the dispatcher. The new think on the dispatcher is that one can include any content
- from any given business service by dispatching a request against it. In "old fashion" skins and in v1 contracts we assumed a given data
- model. In the dispatcher there is <strong>no</strong> given data model any more. All data has to be defined in the structurer that
- they can be dispatched.
- </note>
- <warning>
- For now we are using jx to include the raw data into the presentation model and generating an alias-xsl stylesheet. That is heavy on
- performance and we will change this ASAP. Mind the warning at the start of the howto.
- </warning>
- <p>
- <strong>forrest:hook</strong>s are containers that are only used for layout reasons. They <strong>do not</strong> add
- any content or functionality to the output. They add <strong>only</strong> layout information to
- the output. Actually a <code><![CDATA[<forrest:hook name="layoutId"/>]]></code> will be transformed
- to <code><![CDATA[<div id="layoutId"/>]]> </code>
- </p>
- <p>
- <strong>forrest:contract</strong>s are functionality or extra content that a skin can use to display the requested
- document (content-main). Sometimes a contract delivers <strong>format-specific markup</strong>, other times it delivers
- a <strong>format-independent string</strong>.
- </p>
- <section id="emptyView">
- <title>Empty view file</title>
+ <note> When developing with the dispatcher we assume you are using 'forrest
+ run' and the following workflow "change files -> refresh browser"<br/>
+ Installing a mozilla browser and the forrestbar helps a lot in
+ developing. Many instructions assumes that you have the forrestbar
+ installed. </note>
+ <p> We developed<strong> the structurer</strong> to let the user decide
+ where to place elements in e.g. html pages. We started this work with the
+ <code>skinconf.xml</code> where you could configure certain elements and
+ their positions. These elements were known under certain names. It was up
+ to the skin designer to support this configuration and the elements. </p>
+ <p> The work started with grouping elements (the ones from skinconf). We
+ used css-contracts that we added as @attributes e.g. <code><![CDATA[<div id="content-main"/>]]>
+ </code>. That made it possible to use the same elements in different
+ skins. For the full list refer to the <a
+ href="http://svn.apache.org/repos/asf/forrest/trunk/main/webapp/skins/leather-dev/contracts.initial.txt">
+ initial contract list </a> </p>
+ <p> Around this contracts we developed a configuration Domain Specific
+ Language - called <strong>the structurer</strong>. The
+ <strong>structurer</strong> allows us to define the order in which
+ <strong>forrest:contract</strong>s appear, and also to group them using
+ <strong>forrest:hook</strong>s. </p>
+ <p> <strong>forrest:hook</strong>s are containers that are only used for
+ layout reasons. They <strong>do not</strong> add any content nor
+ functionality to the output. They add <strong>only</strong> layout
+ information to the output. Actually e.g. a <code><![CDATA[<forrest:hook name="layoutId"/>]]>
+ </code> will be transformed to <code><![CDATA[<div id="layoutId"/>]]>
+ </code> </p>
+ <p> <strong>forrest:contract</strong>s are functionality or extra content
+ that a theme can use to display the request. Sometimes a contract
+ delivers <strong>format-specific markup</strong>, other times it delivers
+ a <strong>format-independent string</strong>. We decide different kind of
+ contracts, static one (like described in the contract howto), semi static
+ (which offer configuration parameter in the structurer) and dynamic
+ contracts (which offer semi-static configuration and/or requesting the
+ content). </p>
+ <p>Till now the processing includes firstly all raw data into the
+ structurer, then generating a dynamic xsl and last but nor least
+ response. That is heavy based on xsl processing which is quite slow. A
+ better way is that we do not include *raw* but the *transformed* (by the
+ contract) data . This way we do not have to generate a dynamic stylesheet
+ which leads to the upcoming development of standalone contracts.</p>
+ <note> The structurer is as well a configuration file for the dispatcher.
+ The new think on the dispatcher is that one can include any content
+ from any given business service by dispatching a request against it. In
+ "old fashion" skins and in v1 contracts we assumed a given data model.
+ In the dispatcher there is <strong>no</strong> given data model any
+ more. All data has to be defined in the structurer that they can be
+ dispatched. </note>
+ <section id="emptystructurer">
+ <title>Empty structurer file</title>
<source><![CDATA[<forrest:views
xmlns:forrest="http://apache.org/forrest/templates/1.0"
xmlns:jx="http://apache.org/cocoon/templates/jx/1.0">
@@ -128,32 +120,34 @@
</forrest:view>
</forrest:views>]]>
</source>
- <p>
- <strong> The structurer</strong> is designed to be open for any format that can use<strong> forrest:view</strong> as configuration file.
- The only format we implemented is html for now. This is as well true for the delivered contracts.
- </p>
- <p>
- Now let us start to theme our site.
- </p>
+ <p> <strong> The structurer</strong> is designed to be open for any
+ format that can use<strong> forrest:view</strong> as configuration
+ file. The only format we implemented is html for now. This is as well
+ true for the delivered contracts. </p>
</section>
- <section id="firstView">
- <title>Creating your first view</title>
- <p>
- In this section we will create a new structurer. We will override the default structurer of the themer-plugin
- for the index page of the <a href="site:howto/dispatcher/install">v2</a>.
- For that we will create a file called <code>index.fv</code> and save it in our xdocs directory.
- This will make <strong>only</strong> the index.html page look different from the rest of the project.
- </p>
- <p>
- Remember: pointing your browser to <code>http://localhost:8888/ls.contracts.html</code> will
- show a page with all contracts that you can use in your project.
- </p>
- <p>
- Let us use the blank structurer from the earlier step and add the content-main contract. In
- ls.contracts.html we find the information for how to use the contract in our structurer. Our
- <code>index.fv</code> should look like:
- </p>
+ <section id="firststructurer">
+ <title>Creating your first structurer</title>
+ <warning> The structurer is based on jx templates to allow simple
+ presentation logic (all code starting with "jx:"). Please refer to the
+ cocoon documentation about jx. For now we are using jx to
+ include the raw data into the presentation model and generating an
+ alias-xsl stylesheet. That is heavy on performance and we will change
+ this ASAP. Mind the warning at the start of the howto. </warning>
+ <p> In this section we will create a new structurer. We will override the
+ default structurer of the themer-plugin for the index page of the <a
+ href="site:howto/dispatcher/install">v2</a>. For that we will create a
+ file called <code>index.fv</code> and save it in our xdocs directory.
+ This will make <strong>only</strong> the index.html page look different
+ from the rest of the project. </p>
+ <p> Remember: pointing your browser to
+ <code>http://localhost:8888/ls.contracts.html</code> will show a page
+ with all contracts and themes that you can use in your project provided
+ by forrest. </p>
+ <p> Let us use the blank structurer from the earlier step and add the
+ content-main contract. In ls.contracts.html we find the information for
+ how to use the contract in our structurer. Our <code>index.fv</code>
+ should look like: </p>
<source><![CDATA[<forrest:views
xmlns:forrest="http://apache.org/forrest/templates/1.0"
xmlns:jx="http://apache.org/cocoon/templates/jx/1.0">
@@ -163,41 +157,69 @@
<forrest:property name="content-main" nugget="get.body">
<jx:import uri="cocoon://#{$cocoon/parameters/getRequest}.body.xml"/>
</forrest:property>
+ <!-- Heading types can be clean|underlined|boxed -->
+ <forrest:property name="content-main-conf">
+ <headings type="underlined"/>
+ </forrest:property>
</forrest:properties>
</forrest:contract>
</forrest:view>
</forrest:views>]]>
</source>
- <note>
- The structurer is based on jx templates to allow simple presentation logic (all
- code starting with "jx:"). Please refer to the cocoon documentation about jx.
- </note>
- <p>
- Lets try our new view by pointing to <code>http://localhost:8888/index.html</code>.
- We will see only the main content. Now let us add the section navigation to our view.
- The contract usage in the view can be looked up in ls.contracts.html. Our view now looks like:
- </p>
- <source><![CDATA[<forrest:views xmlns:forrest="http://apache.org/forrest/templates/1.0">
+ <p>A contract has to request the data model it want to transform. This
+ happends by defining forrest:properties which have the same name like
+ the contract. In our case we want the HTML rendered from intermediate
+ format (**.body.xml). This we are going to include via: <code><![CDATA[<jx:import uri="cocoon://#{$cocoon/parameters/getRequest}.body.xml"/>]]>
+ </code></p>
+ <p>Contracts can offer some property configuration of the outcome of
+ the transformation. In our case <code><![CDATA[<forrest:property name="content-main-conf">
+ <headings type="underlined"/>
+ </forrest:property>]]>. </code></p>
+
+ <p> Lets try our new structurer by pointing to
+ <code>http://localhost:8888/index.html</code>. We will see only the
+ main content. Now let us add the section navigation to our structurer.
+ The contract usage in the structurer can be looked up in
+ ls.contracts.html. Our structurer now looks like: </p>
+ <source><![CDATA[<forrest:views
+ xmlns:forrest="http://apache.org/forrest/templates/1.0"
+ xmlns:jx="http://apache.org/cocoon/templates/jx/1.0">
<forrest:view type="html">
- <forrest:contract name="content-main"/>
- <forrest:contract name="nav-section"/>
+ <forrest:contract name="nav-main">
+ <forrest:properties contract="nav-main">
+ <forrest:property name="nav-main" nugget="get.navigation">
+ <jx:import
+ uri="cocoon://#{$cocoon/parameters/getRequest}.navigation.xml"/>
+ </forrest:property>
+ </forrest:properties>
+ </forrest:contract>
+ <forrest:contract name="content-main">
+ <forrest:properties contract="content-main">
+ <forrest:property name="content-main" nugget="get.body">
+ <jx:import uri="cocoon://#{$cocoon/parameters/getRequest}.body.xml"/>
+ </forrest:property>
+ <!-- Heading types can be clean|underlined|boxed -->
+ <forrest:property name="content-main-conf">
+ <headings type="underlined"/>
+ </forrest:property>
+ </forrest:properties>
+ </forrest:contract>
</forrest:view>
</forrest:views>]]>
</source>
- <p>
- We now find the main content and the section navigation after each other and in the order
- we placed them in the view, but we want it next to each other
- (left: nav-section; right: content-main).
- </p>
+ <p> We now find the main content and the section navigation after each
+ other and in the order we placed them in the structurer, but we want it
+ next to each other (left: nav-section; right: content-main). </p>
</section>
- <section id="hookView">
+ <section id="hookstructurer">
<title>Hooks in the structurer</title>
- <p>
- We will use now the first time a <code><![CDATA[<forrest:hook name="layoutId"/>]]></code>.
- Hooks are the styling side of the dispatcher. We can imitate arbitrary html skeleton
- with their help. Before we explain how to use your own css in the structurer, we will use the default css.
- In the common.css we can find
- </p>
+ <p> We will use now the first time a <code><![CDATA[<forrest:hook name="layoutId"/>]]>
+ </code>. Hooks are the styling side of the structurer. We can imitate
+ arbitrary html skeleton with their help. Before we explain how to use
+ your own css in the structurer, we will use the default css. You can
+ see in our example that we have css included. That is a default
+ fallback coming from the implementation. In this common.css we can find
+ </p>
<source>/* menu */
#leftbar {
width: 25%;
@@ -206,133 +228,197 @@
border: thin dashed #565248;
}
</source>
- <p>
- With this information we know to use <code><![CDATA[<forrest:hook name="leftbar"/>]]></code>
- and add contracts into that container.
- </p>
- <p>
- If we want to put the nav-section contract into the left-hand side position
- of the site we need to place the contract into that hook. Like:
- </p>
+ <p> With this information we know to use <code><![CDATA[<forrest:hook name="leftbar"/>]]>
+ </code> and add contracts into that container. </p>
+ <p> If we want to put the nav-section contract into the left-hand side
+ position of the site we need to place the contract into that hook.
+ Like: </p>
<source><![CDATA[<forrest:hook name="leftbar">
- <forrest:contract name="nav-section"/>
+ <!-- Include contract here -->
</forrest:hook>]]>
</source>
- <p>
- Our view will then look like:
- </p>
+ <p> Our structurer will then look like: </p>
<source><![CDATA[<forrest:views
xmlns:forrest="http://apache.org/forrest/templates/1.0"
xmlns:jx="http://apache.org/cocoon/templates/jx/1.0">
<forrest:view type="html">
<forrest:hook name="leftbar">
- <forrest:contract name="nav-section"/>
- </forrest:hook>
- <forrest:contract name="content-main"/>
- </forrest:view>
+ <forrest:contract name="nav-section">
+ <forrest:properties contract="nav-section">
+ <forrest:property name="nav-section" nugget="get.navigation">
+ <jx:import
+ uri="cocoon://#{$cocoon/parameters/getRequest}.navigation.xml"/>
+ </forrest:property>
+ </forrest:properties>
+ </forrest:contract>
+ </forrest:hook>
+ <forrest:contract name="content-main">
+ <forrest:properties contract="content-main">
+ <forrest:property name="content-main" nugget="get.body">
+ <jx:import uri="cocoon://#{$cocoon/parameters/getRequest}.body.xml"/>
+ </forrest:property>
+ <!-- Heading types can be clean|underlined|boxed -->
+ <forrest:property name="content-main-conf">
+ <headings type="underlined"/>
+ </forrest:property>
+ </forrest:properties>
+ </forrest:contract>
+ </forrest:view>
</forrest:views>]]>
</source>
</section>
- <section id="cssView">
+ <section id="cssstructurer">
<title>CSS in the structurer</title>
- <p>
- We now know how to place contracts and hooks in our view. Until this stage we only used the common.css.
- CSS-support of the structurer is as easy as placing contracts/hooks. To override the common.css
- stylesheet we use another tag within our view <code><![CDATA[<forrest:css url="common.css"/>]]></code>.
- </p>
- <p>
- We will now create a file in <code><![CDATA[<!--
+ <p>We now know how to place contracts and hooks in our structurer. Until
+ this stage we only used the common.css. CSS-support of the structurer
+ is as easy as placing contracts/hooks. To override the common.css
+ stylesheet we use another tag within our structurer <code><![CDATA[<forrest:css />]]>
+ </code>. </p>
+<!-- <p>We will now create a file in <code><![CDATA[<!-#-
{1} name
{2} extension (note we assume e.g. PATH/css/{1}.css)
- -->
+ -#->
<location src="{project:themer}/resources/themes/{project:theme}/{2}/{1}.{2}" />]]></code>. In our case
we will save a file called howTo.css in v2/src/documentation/resources/themes/common/css/howTo.css containing only
the following css:
- </p>
- <source>/* menu */
+ </p>-->
+ <p>You can add inline and linked css with the structurer. As soon as you
+ use forrest:css you will disable the fallback css support from
+ forrest. With this tag we tell the dispatcher that we want to override the common.css.
+ After adding the following to our index.fv the design will be different.</p>
+ <source><![CDATA[<forrest:css >
+/* Extra css */
+/* menu */
#leftbar {
- width: 25%;
- float: left;
- background: #CCCCFF;
- border: thin solid #000000;
+ width: 25%;
+ float: left;
+ background: #CCCCFF;
+ border: thin solid #000000;
}
- </source>
- <p>
- We just changed the border-style to 'solid', the background to '#CCCCFF' and the color to '#000000'.
- Now we have to add a new tag to tell that we want to override the common.css. We are doing this
- by adding the tag <code><![CDATA[<forrest:css url="howTo.css"/>]]></code> to our view.
- </p>
+</forrest:css>]]> </source>
+ <!--<fixme author="thorsten">from here</fixme>-->
+ <p> We just changed the border-style to 'solid', the background to
+ '#CCCCFF' and the color to '#000000'. So you see a white page where the menu is surrounded by a solid
+ border with the defined background.</p>
<note>
- <code><![CDATA[<forrest:css url="howTo.css"/>]]></code> needs to be the direct child of
+ <code><![CDATA[<forrest:css />]]></code> needs to be the direct child of
<code><![CDATA[<forrest:view type="html">]]></code>
</note>
<source><![CDATA[<forrest:views
xmlns:forrest="http://apache.org/forrest/templates/1.0"
xmlns:jx="http://apache.org/cocoon/templates/jx/1.0">
<forrest:view type="html">
- <forrest:css url="howTo.css"/>
+ <forrest:css >
+/* Extra css */
+/* menu */
+#leftbar {
+ width: 25%;
+ float: left;
+ background: #CCCCFF;
+ border: thin solid #000000;
+}
+ </forrest:css>
<forrest:hook name="leftbar">
- <forrest:contract name="nav-section"/>
- </forrest:hook>
- <forrest:contract name="content-main"/>
- </forrest:view>
+ <forrest:contract name="nav-section">
+ <forrest:properties contract="nav-section">
+ <forrest:property name="nav-section" nugget="get.navigation">
+ <jx:import
+ uri="cocoon://#{$cocoon/parameters/getRequest}.navigation.xml"/>
+ </forrest:property>
+ </forrest:properties>
+ </forrest:contract>
+ </forrest:hook>
+ <forrest:contract name="content-main">
+ <forrest:properties contract="content-main">
+ <forrest:property name="content-main" nugget="get.body">
+ <jx:import uri="cocoon://#{$cocoon/parameters/getRequest}.body.xml"/>
+ </forrest:property>
+ <!-- Heading types can be clean|underlined|boxed -->
+ <forrest:property name="content-main-conf">
+ <headings type="underlined"/>
+ </forrest:property>
+ </forrest:properties>
+ </forrest:contract>
+ </forrest:view>
</forrest:views>]]>
</source>
- <p>
- Now you see a white page where the menu is surrounded by a solid border with the defined background.
- As a second example, let us change as well the content-main by adding another hook
- <code><![CDATA[<forrest:hook name="content"/>]]></code> We need to add the new layout container
- to our howTo.css:
- </p>
+ <p>As a second example, let us change
+ as well the content-main by adding another hook <code><![CDATA[<forrest:hook name="content"/>]]>
+ </code> We need to add the new layout container to our inline css: </p>
<source>
/* The actual content */
#content {
- margin-left: 25%;
- padding: 0 20px 0 20px;
- background: #B9D3EE;
-}
- </source>
- <p>
- Then we have to add the 'content-main' contract to the 'content' hook.
- The resulting view looks like:
- </p>
+ margin-left: 25%;
+ padding: 0 20px 0 20px;
+ background: #B9D3EE;
+}</source>
+ <p> Then we have to add the 'content-main' contract to the 'content'
+ hook. The resulting structurer looks like: </p>
<source><![CDATA[<forrest:views
xmlns:forrest="http://apache.org/forrest/templates/1.0"
xmlns:jx="http://apache.org/cocoon/templates/jx/1.0">
<forrest:view type="html">
- <forrest:css url="howTo.css"/>
+ <forrest:css >
+/* Extra css */
+/* menu */
+#leftbar {
+ width: 25%;
+ float: left;
+ background: #CCCCFF;
+ border: thin solid #000000;
+}
+/* The actual content */
+#content {
+ margin-left: 25%;
+ padding: 0 20px 0 20px;
+ background: #B9D3EE;
+}
+ </forrest:css>
<forrest:hook name="leftbar">
- <forrest:contract name="nav-section"/>
+ <forrest:contract name="nav-section">
+ <forrest:properties contract="nav-section">
+ <forrest:property name="nav-section" nugget="get.navigation">
+ <jx:import
+ uri="cocoon://#{$cocoon/parameters/getRequest}.navigation.xml"/>
+ </forrest:property>
+ </forrest:properties>
+ </forrest:contract>
</forrest:hook>
<forrest:hook name="content">
- <forrest:contract name="content-main"/>
- </forrest:hook>
- </forrest:view>
+ <forrest:contract name="content-main">
+ <forrest:properties contract="content-main">
+ <forrest:property name="content-main" nugget="get.body">
+ <jx:import uri="cocoon://#{$cocoon/parameters/getRequest}.body.xml"/>
+ </forrest:property>
+ <!-- Heading types can be clean|underlined|boxed -->
+ <forrest:property name="content-main-conf">
+ <headings type="underlined"/>
+ </forrest:property>
+ </forrest:properties>
+ </forrest:contract>
+ </forrest:hook>
+ </forrest:view>
</forrest:views>]]>
</source>
- <p>
- We are now able to place contracts into the layout container and add custom css to the view.
- </p>
- <fixme author="thorsten">
- Let us now look into advanced features of the dispatcher.
- I will write a how-to for advanced contracts soon. :)
- </fixme>
+ <p> We are now able to place contracts into the layout container and add
+ custom css to the structurer. </p>
+ <fixme author="thorsten"> Add more information of recent threads around css in the structurer
+ </fixme>
<!--<fixme author="thorsten">This section is next to be writen/finished</fixme>-->
</section>
</steps>
<extension title="Further Reading">
- <p>
- Congratulations you are now able to work with the view DSL.
- From here we recommend to read the following How-Tos:
- </p>
+ <p> Congratulations you are now able to work with the structurer. From here
+ we recommend to read the following How-Tos: </p>
<ul>
- <li><a href="site:howto/view/contracts">Create your own contract implementation</a> </li>
+ <li>
+ <a href="site:howto/dispatcher/contracts">Create your own contract
+ implementation</a>
+ </li>
</ul>
</extension>
<feedback title="Feedback">
- <p>
- Please provide feedback about this document via the
- <a href="site:mail-lists">mailing lists</a>.
- </p>
+ <p> Please provide feedback about this document via the <a
+ href="site:mail-lists">mailing lists</a>. </p>
</feedback>
</howto>