forrest-svn mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From thors...@apache.org
Subject svn commit: r190163 - /forrest/trunk/site-author/content/xdocs/docs/howto/howto-view-contracts.xml /forrest/trunk/site-author/content/xdocs/docs/howto/howto-view-dsl.xml
Date Sat, 11 Jun 2005 19:01:00 GMT
Author: thorsten
Date: Sat Jun 11 12:01:00 2005
New Revision: 190163

URL: http://svn.apache.org/viewcvs?rev=190163&view=rev
Log:
Further written the dsl howto till section css which will be next.

Modified:
    forrest/trunk/site-author/content/xdocs/docs/howto/howto-view-contracts.xml
    forrest/trunk/site-author/content/xdocs/docs/howto/howto-view-dsl.xml

Modified: forrest/trunk/site-author/content/xdocs/docs/howto/howto-view-contracts.xml
URL: http://svn.apache.org/viewcvs/forrest/trunk/site-author/content/xdocs/docs/howto/howto-view-contracts.xml?rev=190163&r1=190162&r2=190163&view=diff
==============================================================================
--- forrest/trunk/site-author/content/xdocs/docs/howto/howto-view-contracts.xml (original)
+++ forrest/trunk/site-author/content/xdocs/docs/howto/howto-view-contracts.xml Sat Jun 11
12:01:00 2005
@@ -87,16 +87,16 @@
     <section id="enhanceMaintainment">
       <title>Enhance the maintainment</title>
       <p>Now we can enhance the maintainment for the future and we started to
-give this code snippets contracts names. This naming enables us to keep
+give this code snippets contracts names (based on their functionality). This naming enables
us to keep
 the contract separate from the position code itself. In xsl you would
 simply do:
       </p>
       <ol>
-        <li>replace the script by <![CDATA[<xsl:call-template name="last-published"/>]]></li>
+        <li>replace the script by <![CDATA[<xsl:call-template name="siteinfo-last-published"/>]]></li>
         <li>and add:</li>
       </ol>
       
-      <source><![CDATA[<xsl:template name="last-published">
+      <source><![CDATA[<xsl:template name="siteinfo-last-published">
  <script type="text/javascript">
   document.write("<i18n:text >Last Published:</i18n:text>&#160;" + document.lastModified);
  </script>
@@ -104,7 +104,7 @@
       </source>
       <p>
         This allows us in a next maintainment just change the code of
-        <![CDATA[<xsl:template name="last-published"/>]]> and apply it in any
position where
+        <![CDATA[<xsl:template name="siteinfo-last-published"/>]]> and apply
it in any position where
         it is placed.  
       </p>
       <note>
@@ -116,7 +116,8 @@
       <p>
         To start a new forrest:contract you can copy the "blank.ft" from
         <code>org.apache.forrest.plugin.output.viewHelper.xhtml/resources/templates</code>.

-        It is a simple xml file with the following code which you can use to base new contracts
on:
+        It is a simple xml file with the following code which you can use to base new contracts

+        on (note to close the CDATA element before the <code><![CDATA[</usage>]]></code>!):
       </p>
       <source>
 <![CDATA[<forrest:contract 
@@ -128,9 +129,9 @@
     When using the blank template as c'n p master just search and replace 'blank' by the
{contract-name}!-->
   
   <description>
-    {contract-name} contract. This functions will output {contract-funtion}.
+    {contract-name} will output {contract-funtion}. This is just a blank contract, it will
output *nothing*.
   </description>
-  
+  <usage><![CDATA[<forrest:contract name="doNotUseJustDummy"/>]] ></usage>
   <forrest:template xmlns:forrest="http://apache.org/forrest/templates/1.0"
     format="xhtml" name="blank" inputFormat="xsl" body="false" head="false">
     <xsl:stylesheet version="1.1" 
@@ -153,6 +154,10 @@
         Here we have to explain what this contract is doing.
       </p>
       <p>
+        The <code><![CDATA[<usage/>]]></code> tag is self explaining.

+        Here we have to explain how the designer can use the contract in his view.
+      </p>
+      <p>
         <code><![CDATA[<forrest:template name="blank" body="false" head="false">]]>
</code> 
         That leads to the template attribute @body="true" and
 				@head="false". In xhtml a contract can add content to the <![CDATA[<body/>]]>
or/and
@@ -189,13 +194,13 @@
         Now the maintainment optimized code (xpath="/html/body/*") was:
       </p>
       <source>
-<![CDATA[<xsl:template name="last-published">
+<![CDATA[<xsl:template name="siteinfo-last-published">
  <script type="text/javascript">
   document.write("<i18n:text >Last Published:</i18n:text>&#160;" + document.lastModified);
  </script>
 </xsl:template>]]></source>
       <ul>
-        <li>Search and replace "blank" with "last-publish-howTo"</li>
+        <li>Search and replace "blank" with "siteinfo-last-publish-howTo"</li>
         <li>Add description of the contract</li>
         <li>Set @body="true"</li>
       </ul>
@@ -235,12 +240,11 @@
   </steps>
   <extension title="Further Reading">
     <p>
-      Congratulations you are now able to work with views. 
+      Congratulations you are now able to work with view contracts. 
       From here we recommend to read the following How-To's:
     </p>
     <ul>
       <li><a href="site:howto/view/DSL">Getting started with forrest:view DSL</a>
</li>
-      <li><a href="site:howto/view/contracts">Create your own contract implementation</a>
</li>
     </ul>
   </extension>
   <feedback title="Feedback">

Modified: forrest/trunk/site-author/content/xdocs/docs/howto/howto-view-dsl.xml
URL: http://svn.apache.org/viewcvs/forrest/trunk/site-author/content/xdocs/docs/howto/howto-view-dsl.xml?rev=190163&r1=190162&r2=190163&view=diff
==============================================================================
--- forrest/trunk/site-author/content/xdocs/docs/howto/howto-view-dsl.xml (original)
+++ forrest/trunk/site-author/content/xdocs/docs/howto/howto-view-dsl.xml Sat Jun 11 12:01:00
2005
@@ -77,7 +77,8 @@
     <p>
      forrest:hook's are container 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.
+     the output. Actually a <code><![CDATA[<forrest:hook name="layoutId"/>]]></code>
will be transformed
+     to <code><![CDATA[<div id="layoutId"/>]]> </code>
     </p>
     <p>
      forrest:contract's are functionality or extra content that a skin can use to display
the requested
@@ -99,62 +100,141 @@
         Now lets start to skin our site. :)
       </p>
     </section>
-<!--
-    <section id="usingContracts">
-    <title>Using contracts</title>
+
+    <section id="availableContracts">
+    <title>Available contracts</title>
     <p> 
      To start your skin you need to know which contracts you can use. 
+     For this we will install another plugin <code>org.apache.forrest.plugin.input.viewHelper.xhtml.ls</code>.
+     The setup is:
     </p>
     <source>
-cd ~/src/newSeed
-forrest seed
-mkdir src/documentation/conf
+cd {forrest-trunk}
+svn up
+cd whiteboard/plugins/org.apache.forrest.plugin.input.viewHelper.xhtml.ls/
+ant local-deploy
 </source>
-</section>
--->
-<!--
-<section id="forrestProperties">
-<title>Modifying forrest.properties</title>
-<p>
-Now we have to tell forrest that we are planing to use the view plugins. We will do that
-by editing to the forrest.properties to add the plugins:
-</p>
-<source>
-project.required.plugins=org.apache.forrest.plugin.output.viewHelper.xhtml,org.apache.forrest.plugin.internal.view
-</source>
-<p>
-     Now we have to change the project skin to leather-dev. The reason is that the plugins
are still
-not independend form the "old fashion skins".  
-</p>
-<note>We exchanging only
-     site2xhtml.xsl of leather-dev skin by the plugins and some contracts are based
-     on e.g. document2html.xsl output of leather-dev.</note>
-<source>
-project.skin=leather-dev
-</source>
-</section>
-<section id="testing">
-<title>Test your new view based project</title>
-<p> 
-Now you have finished the preparation and the setup to finally try
-</p>
-<source>
-forrest run
-</source>
-<p>then point to <a href="http://localhost:8888/">http://localhost:8888/</a>
and you should see the default
-view based skin.</p>
-<note>When developing styles with views 'forrest run' is the quickest
-way. You will see you do not have to build your project to see the
-changes on your pages when working with *.fv. </note>
-</section>-->
-  </steps><!--
+			<p>
+        The newly installed plugin will show the available contracts as html page.
+        First we have to tell forrest that we are planing to use the new plugin. We will
do that
+        by editing the forrest.properties of the <a href="site:howto/view/install">newSeed</a>

+        to <strong>add</strong> the plugin:
+      </p>
+      <source>
+project.required.plugins=org.apache.forrest.plugin.input.viewHelper.xhtml.ls
+      </source>
+      <p>
+        Now point your browser to <code>http://localhost:8888/ls.contracts.html</code>.

+        On this page you will find all contracts that you can use in your project.
+      </p>
+    </section>
+    <section id="firstView">
+			<title>Creating your first view</title>
+			<p>
+				In this section we will create a new view. We will override the default view of the view-plugin
+        for the index page of the <a href="site:howto/view/install">newSeed</a>.
+        For that we will create a file called <code>index.ft</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>
+        Let use the blank view from the earlier step and add the content-main contract. In

+        ls.contracts.html we find the information how to use the contract in our view. Our

+        <code>index.fv</code> should look like:
+      </p>
+      <source><![CDATA[<forrest:views xmlns:forrest="http://apache.org/forrest/templates/1.0"
>
+  <forrest:view type="xhtml">    
+    <forrest:contract name="content-main"/>
+  </forrest:view>  
+</forrest:views>]]>
+      </source>
+      <p>
+        Let's try our new view by pointing to <code>http://localhost:8888/index.html</code>.

+        We will see only the main content. :) Now let's 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"
>
+  <forrest:view type="xhtml">    
+    <forrest:contract name="content-main"/>
+    <forrest:contract name="nav-section"/>
+  </forrest:view>  
+</forrest:views>]]>
+      </source>
+      <p>
+        We find now 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>
+    </section>
+    <section id="hookView">
+      <title>Hooks in views</title>
+      <p>
+        We will use now the first time a <code><![CDATA[<forrest:hook name="layoutId"/>]]></code>.
+        Hooks are the styling side of views. We can imitate arbitrary html skeleton 
+        with their help. Before we explain how to use your own css in views we will use the
default css.
+        In the default.css we can find 
+      </p>
+      <source>/* menu */
+#leftbar {
+    width: 25%;
+    float: left;
+    background: #eae8e3;
+    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. If we want to put a contract into the left
side position
+        of the site we need to place the contract into that hook. Like:
+      </p>  
+      <source><![CDATA[<forrest:views xmlns:forrest="http://apache.org/forrest/templates/1.0"
>
+  <forrest:view type="xhtml">
+    <forrest:hook name="leftbar">
+      <forrest:contract name="nav-section"/>
+    </forrest:hook>
+    <forrest:contract name="content-main"/>   
+  </forrest:view>  
+</forrest:views>]]>
+      </source>
+    </section>
+    <section id="cssView">
+      <title>CSS in views</title>
+      <fixme author="thorsten">This section is next to write</fixme>
+      <!--<p>
+        We will use now the first time a <code><![CDATA[<forrest:hook name="layoutId"/>]]></code>.
+        Hooks in views are the styling side of views. We can imitate arbitrary html skeleton

+        with their help. Before we explain how to use your own css in views we will use the
default css.
+        In the default.css we can find 
+      </p>
+      <source>/* menu */
+#leftbar {
+    width: 25%;
+    float: left;
+    background: #eae8e3;
+    border: thin dashed #565248;
+}
+      </source>
+      <p>
+        With this information we know to use <code><![CDATA[<forrest:hook name="leftbar"/>]]></code>

+        to add contracts into that container. If we want to put a contract into the side
position
+        of the site we need to place the contract into that hook. Like:
+      </p>  
+      <source><![CDATA[<forrest:views xmlns:forrest="http://apache.org/forrest/templates/1.0"
>
+  <forrest:view type="xhtml">
+    <forrest:hook name="leftbar">
+      <forrest:contract name="nav-section"/>
+    </forrest:hook>
+    <forrest:contract name="content-main"/>   
+  </forrest:view>  
+</forrest:views>]]>
+      </source>-->
+    </section>
+  </steps>
   <extension title="Further Reading">
     <p>
-      Congratulations you are now able to work with views. 
+      Congratulations you are now able to work with the view DSL. 
       From here we recommend to read the following How-To's:
     </p>
     <ul>
-      <li><a href="site:howto/view/DSL">Getting started with forrest:view DSL</a>
</li>
       <li><a href="site:howto/view/contracts">Create your own contract implementation</a>
</li>
     </ul>
   </extension>
@@ -163,5 +243,5 @@
       Please provide feedback about this document via the
       <a href="site:mail-lists">mailing lists</a>.
     </p>
-  </feedback>-->
+  </feedback>
 </howto>



Mime
View raw message