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/06/11 21:01:00 UTC
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
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> " + 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> " + 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>