Return-Path:
- This part of the views is dedicated to webdesigner and user with some knowlegde of css.
+ This part of the views is dedicated to web designers and users with some knowlegde of css.
- This how-to will show you how to write a forrest:view from ground on.
- We will focus on html as output format. As well it will show how to add your own css implementation to the view.
+ This how-to will show you how to write a forrest:view from the ground up.
+ We will focus on html as the output format and show how to add your own css implementation to the view.
- We developed forrest:view to let the user decide where to place elements in e.g. html-pages.
+ We developed forrest:view to let the user decide where to place elements
+ in, e.g., html pages.
We started this work with the
- The work started with grouping elements (the ones from skinconf). We used css-contracts that
- we added as @attributes e.g.
- Around this contracts we developed a configuration Domain Specific Language and called it forrest:view .
- forrest:view 's allows us to define the order in which forrest:contract's appear, and also to group
- them using forrest:hook's.
+ Around these contracts we developed a configuration Domain Specific Language and called it forrest:view .
+ forrest:view allows us to define the order in which forrest:contracts appear, and also to group
+ them using forrest:hooks.
- forrest:hook's are container that are only used for layout reasons. They do not add
+ forrest:hooks are containers that are only used for layout reasons. They do not add
any content nor functionality to the output. They add only layout information to
the output. Actually a
- forrest:contract's are functionality or extra content that a skin can use to display the requested
+ forrest:contracts add functionality or extra content that a skin can use to display the requested
document (content-main). Sometimes a contract delivers format-specific markup, other times it delivers
a format-independent string.
- forrest:view is designed to be open for any format that can use forrest:view as configuration file.
- The only format we implemented is xhtml for now. This is as well true for the delivered contracts.
+ forrest:view is designed to be available for any format that can use
+ forrest:view as a configuration file.
+ The only format we have implemented is xhtml for now. This is also true for the delivered contracts.
Now lets start to skin our site. :)
@@ -115,18 +117,18 @@
- In this section we will create a new view. We will override the default view of the view-plugin
+ 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 newSeed.
- For that we will create a file called
Remember: pointing your browser to
- 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
+ Let's use the blank view from the earlier step and add the content-main contract. In
+ ls.contracts.html we find the information about how to use the contract in our view. Our
- 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
+ We now see the main content and the section navigation in the order
+ we placed them in the view, but we want them next to each other
(left: nav-section; right: content-main).
- We will use now the first time a
- With this information we know to use
If we want to put the nav-section contract into the left side position
- of the site we need to place the contract into that hook. Like:
+ of the site we need to place the contract into that hook like so:
Now you see a white page where the menu is sourrounded by a solid border with the defined background.
- As second example let us change as well the content-main by adding another hook
-
- Then we have to add the 'content-main' contract to the 'content' hook, the resulting view looks like:
+ Then we have to add the 'content-main' contract to the 'content' hook. The resulting view looks like:
- We are now able to place contracts into layout container and add custom css to the view.
+ We are now able to place contracts and layout containers and add custom css to the view.
- Congratulations you are now able to work with the view DSL.
- From here we recommend to read the following How-To's:
+ Congratulations, you are now able to work with the view DSL.
+ From here we recommend reading the following How-To's:
Users/devs who wants to get started with view development.
- This setup guide is valid for both user and devs.
+ This setup guide is valid for both users and devs.
- To help user installing views. This is the "getting started" setup-guide.
+ To help users install views. This is the "getting started" setup-guide.
- The process of setting up the plugin is quite heavy. We promise it will be easier in the future.
- Some of the instructions has to be modified with your local settings.
+ The process of setting up the plugin is quite involved. We promise it will be easier in the future.
+ Some of the instructions have to be modified with your local settings.
Go to the dir where you want to seed a new project and seed it.
- Then we have to prepare a default.fv directory in project.conf-dir (forrest.properties)
- of the fresh seed. That will be needed as soon you modify the default view of your project.
- The "templates"-directory is need for your project specific contract implementations.
+ Next we have to prepare a default.fv directory ("conf") in project.conf-dir (forrest.properties)
+ of the fresh seed. This will be needed as soon you modify the default view of your project.
+ A "templates" directory is needed as well, for your project-specific contract implementations.
then point to http://localhost:8888/ and you should see the default
- view based skin.skinconf.xml
where you could configure certain elements and
- their positions. This elements was known under certain names. It was up to the skin-designer to support
+ their positions. These elements were known by established names and it was up to the skin-designer to support
this configuration and the elements.
]]>
. That made it
- possible to use the same elements in different skins. For the full list refer to the
+ We started by grouping the elements (from skinconf) and using css contracts that
+ we added as @attributes, e.g. ]]>
. That made it
+ possible to use the same elements in different skins. For the full list of these contracts refer to the
- inicial contract list
-
+ initial contract list
+ .
]]>
will be transformed
to ]]>
index.ft
and save it in our xdocs directory.
- This will make only the index.html page look different from the rest of the project.
+ To do this we will create a file called index.ft
and save it in our xdocs directory.
+ This will only make the index.html page look different from the rest of the project.
http://localhost:8888/ls.contracts.html
will
show a page with all contracts that you can use in your project.
index.fv
should look like:
]]>
.
- Hooks are the styling side of views. We can imitate arbitrary html skeleton
+ We will now use for the first time a ]]>
.
+ Hooks are the styling side of views. We can imitate an 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
]]>
+ With this information we can see the purpose of ]]>
and add contracts into that container.
]]>
has to be direct son of
+ ]]>
has to be the direct son of
]]>
!!!
]]>
We need to add the new layout container
+ For a second example let's change the content-main by adding another hook
+ ]]>
. We need to add the new layout
+ container
to our howTo.css:
-
- 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 + The newly installed plugin will show the available contracts listed in an html page. + First we have to tell forrest that we are planning to use the new plugin. We will do that by editing the forrest.properties of the newSeed to add the plugin:
@@ -152,8 +152,8 @@- Congratulations you are now able to work with views. - From here we recommend to read the following How-To's: + Congratulations, you are now able to work with views. + From here we recommend reading the following How-To's: