overview (mushrooms)

Imagine you are creating a website to present your hobby: mushrooms. You will first sit at a table and think about what information you want on your site :

1. presentation of different types of mushrooms
2. recipes using mushrooms
3. stories related to picking mushrooms

data model

To represent this data, you first create the classes needed for each type of element (see virtual classes) :

• MushroomType
• Recipe
• Story

display

You can now display a list of the mushroom types like this :

<h3>Learn about the different mushrooms</h3>
<ul do='mushroom_types in site'>
  <li do='each'><r:link/></li>
</ul>

This will produce a list of the mushroom types with a link to the corresponding page. Note the first use of pseudo sql “mushroom_types in site”. The first part mushroom_types means “find all MushroomTypes”. The second part in site means “find them anywhere in the website”. You could have used in project (find them only in the current project), etc.

If you want to be able to add new mushroom types directly in this list, change the code to :

<h3>Learn about the different mushrooms</h3>
<ul do='mushroom_types in site'>
  <li do='each' do='link'/>
  <li do='add' klass='MushroomType'/>
</ul>

Hey, you’ve just created “GET” (retrieve) and “POST” (create) requests ! Now when you clic on the add icon produced by “add”, an inline form will be displayed to create a new mushroom type.

You might wonder where this form comes from. Of course, you can create your own, but you can also let zena guess from the list you are editing. Zena uses the content of the “each” block to produce a form, replacing all “link” and “show” tags by corresponding input fields.

relations

This is nice, but now you would like to show a picture with the mushroom type. To do this, you have to create a link from the mushroom type to an image. Create a relation (see relations) called “icon” to link an image to any other element. You can now write the following code :

<h3>Learn about the different mushrooms</h3>
<ul do='mushroom_types from site'>
  <li do='each'><r:icon><r:img/></r:icon> <r:link/></li>
  <li do='add' klass='MushroomType'/>
</ul>

Note that this time, we have used the “ztag” notation instead of “do”. We haven’t explained how the tags work. It’s time to do so before going any further. There are mainly two types of tags :

• display tags these tags produce what the user sees.
• context tags these tags change the current context.

In the example above, mushroom_types in site, each and icon are context tags and link, img are content tags. add_btn is a special ajax tag.

Simply put, a tag displays content depending on the current context. So if you put ‘img’ inside the context of ‘icon’, you get the icon’s image. If you put ‘link’ inside the ‘each’ context, you create a link for every element in the current list. The query tag “mushroom_types in site” opens a new context with the list of elements found by the query.

As you learn zafu, these context changing tags will become a second nature :

<div do='images in project' updated='-7days'/><r:each do='img' mode='pv' link='parent'/></div>

conclusion

When starting a new website, we found that it is easy to first write complete pages with lipsum text and dummy images. If your webpage looks pretty and you are happy with it (in fact, you stole it from some other website, but nobody should know, you changed the background color). Upload the html page and css and gently add the “do” tags to make your content dynamic.

We recommend you read the next tutorial html to zafu to understand the relation between a “pure” html document and a template.