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 :
- presentation of different types of mushrooms
- recipes using mushrooms
- stories related to picking mushrooms
To represent this data, you first create the classes needed for each type of element (see virtual classes) :
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 SQLiss “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.
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.
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>
Zena allows you to define your own data objects, and use zafu to mange them.
We recommend you read the next tutorial create a skin to learn how to create your own skin.