Hey! I have some useful info about Umbraco. Lately I've been looking into how to create Document Types, Templates, Stylesheets, Macros, XSLT and .Net user controls inserted in an Umbraco template.
I'd like to explain a little about how these items mentioned above relate to each other. Document types have been previously explained, so we'll just say that those are like data types, where you
can store information related to a specific entity. Well, the Document Types can not be displayed in umbraco directly, but through a Template.
In the Settings section in Umbraco admin, you'll find the Templates folder, where you can create new Templates or edit existing ones. Templates are the mean of displaying the info contained in
a Document Type. In the Document Type info, the desired Template should be checked as allowed in order to use this template. The same Document Type can be displayed by several Templates and also
one Template can be displaying information contained in several Document Types. Templates are written in stardard HTML with some ASP code, with the ability to use Master Pages like in a regular .Net
web application. Also there are some specific tags interpreted by Umbraco, used when you need to add a page field, a dictionary item or a macro.
Now, when we create Templates we can reference css just by adding the reference tag (eg. <link rel="stylesheet" href="/css/Products.css" />). Of course, we need to create the css file in the
Stylesheets section. The files in Stylesheed section are regular css files with the same syntax as a regular css file.
Now, you can create data in document types, and display it through Templates. Now how can we display a collection of items dynamically. Let's say we have a Document Type Product, and we have
various different products created. We could create a Template to display the Product Document Type so we can see the details of each product in our web page, and also we can create a Template
to display a list with the products with a link to the details of each product. Now, if we don't want to modify this last template each time a product is added or removed, we should try to
make the content of the product list dynamic. One way to do this is by creating a XSLT file, where you can create the logic necesary to display the list with the current active Products
(or any other condition you like). Now, to do this, in the Developer section of Umbraco we have the folder XSLT Files, where we can create a new one. When we create a new XSLT file we are asked to
give it a name and we can choose a XSLT template. If you're not too familiar with XSL syntax this is very useful, because there are the most used cases ready to go with minimal modifications
(these XSLT templates have been really useful to me).
Once the XSLT file is created, the way to insert this XSLT into the Template where we want to display the Product list is throught a Macro. Macros are the way of inserting some external code, such as
XSLT files or a custom .Net user control.
In the Developer section we got to the folder Macros, right click, create. We give it a name and we choose the XSLT file from the corresponding drop down list. Then save (with the little diskette
on the upper left).
Once we have our Macro ready, we can go back to our product list template, where we place the cursor in the code where we would like to insert the Product list and then click on the button placed
on the upper toolbar "Insert Macro". We choose the Macro we have just created and Umbraco will generate the tag in the place we need.
After that all we have to do is save the changes and test it.
I've also created a ASP.Net User Control and inserted it in a template. I did this just by creating a new web application in Visual Studio 2010 and created a simple user control (.ascx) with a
a texbox, a button and a literal, with a little functionality. Just display in the literal a message including the text typed in the textbox. When all is ready, I compiled the solution and then
simply copied the dll generated to the bin directory of Umbraco installation and the ascx file to the usercontrols directory. Once this is done, we can go and create a new Macro, just the way
we did to include the XSLT file before, but selecting the user control from the drop down list corresponding to .Net user control.
After the Macro is created it can be added to a Template like explained above.
I did another small test with this matter. That is to make the user control to comunicate with a WCF service. To do this, in the same solution where I created the user control, I created a
WCF service project with a small operation that receives a string as a parameter and returns a string response. After the WCF service was ready I added the service reference in the user control
project and added the invocation to the service passing as an argument the text typed in the textbox and displaying the result in the literal. Now, the procedure to include this user control
in Umbraco is the same (copy the dll and the ascx file), but we will also need to copy the whole system.serviceModel tag created in my user control web.config to the Umbraco web.config, so
the user control included in Umbraco can find the configuration needed to access the WCF Service.
I hope this info has been usefull :)
Regards
Diego
Add comment