Over the past two tutorials we've learned about Document Types and how they were used to organize our data model. We also learned how we could control the visual appearance of the Document Type in umbraco and we tried create some content based on the "Home Page" and "Text Page" Document Types. So far so good.
But one thing is entering and managing data, another thing is actually presenting them and so far all we get when we preview our pages is plain old whitespace:
But fear not my friend, it's simply because we need to learn a bit more.
Introducing templates
One of the things that people really likes about umbraco is that it gives you complete - as in total, non-destructive and non interfering - control over the output. This assures that you can create valid, semantic and accessible markup in anyway you want. And so far we haven't told umbraco anything, so it proves it's worth; I won't do anything, because that's what I'm told. If only I could raise my kids like I raised umbraco ;-)
The solution to our blank page is adding markup to our templates, but before we do that I'd like to take a moment to explain what a template in umbraco actually is - which is very simple. An umbraco template is basically text - usually (X)Html - combined with umbraco tags (elements). This means that you can simply take your own markup and replace the chunk of "Lorem Ipsum" (or whatever you call your placeholders) with umbraco tags. That's it! umbraco will respect your attention to detail when it comes to markup and output exactly the same as you created, including whitespace, tabs and linebreaks and it gets even better - you don't need to learn a new proprietary and obscure template language.
The Template Tags
Instead of having it's own template language and re-inventing the wheel by having yet-another-way-to-handle-presentation-logic, umbraco is based on standards for dynamic content, which we'll get back to in a moment. For know, let's focus on the simplicity of the template elements which consists of five element (yes, just 5!):
- <?UMBRACO_GETITEM />: This is for inserting a property from the current page that's rendered. So if we wanted to output the name of the page we would simply write: <?UMBRACO_GETITEM field="pageName"/> (in fact we wouldn't as there's a complete UI - you don't even have to learn the element syntax!)
- <?UMBRACO_MACRO />: This is for inserting dynamic content like lists or forms. We'll explore macros in depth in a later tutorial, but basically a macro is a wrapper for either a .NET control or an XSL Template, which is a standard made by W3C, the same group who developed Html.
- <?UMBRACO_TEMPLATE_LOAD_CHILD/>: With umbraco you can have the central layout stored in Master Templates and this element will determine where to insert child templates that uses the master.
- <?ASPNET_FORM />. As umbraco is based on Microsoft ASP.NET, but don't output any markup unless told (you get the picture now, right!) you'll need to tell umbraco where to put a serverside form if you use .NET Controls.
- <?ASPNET_HEAD />. If you wish to use an ASP.NET server side Head element, you'll use this element
Help on the elements is always near by - simply click the "Help" button in the toolbar when editing a template and you'll get the list:
Updating our template
Enough with the theory - let's try to make a simple templates. Go to the Settings section and foldout the templates. If you've followed the previous tutorials, you can see we have two templates which was automatically created when we added the corresponding Document Types (because we checked the "Create matching template" box when creating the Document Type):
Click the "Home Page" template and you'll see this view:
For now we'll concentrate on the "Template" textbox, so try to add "<p>Hello World</p>" into the big textarea and click the Save button in the toolbar. Now try go previewing your Home Page:
Stunning!
Adding page information to the template
Now you always need a Hello World Sample, but wouldn't it be great to improve just a little? Well, come back tomorrow and we'll start using the elements (I would have liked this tutorial to been a little longer, but I ran out of time!)