forrest-svn mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From thors...@apache.org
Subject svn commit: r344096 - /forrest/trunk/site-author/content/xdocs/docs_0_80/howto/howto-structurer-dsl.xml
Date Mon, 14 Nov 2005 10:25:38 GMT
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>



Mime
View raw message