Tuesday, November 16, 2010

My first page with Umbraco

 

Technorati Tags: ,,

After a small Diwali break, I am back to my blogging. The focus of this post is going to be a CMS from MS called Umbraco. I came to know about Umbraco from one of my friends. Having been involved in developing and designing a few content managed websites, I decided to take a deeper look into Umbraco. It is just a week since I started playing around with it but I thought I will get started off about creating a first page with Umbraco as I delve into other advanced aspects and figure out how to get it done.

For the unfamiliars, Umbraco is an ASP.NET based CMS. You can install Umbraco by using the web platform installer. The installation is fairly easy and self-explanatory. After you have installed it, launching Umbraco will give you the admin log in page. Use the credentials you used during set up to log in. Your home page will look like below

image

Settings is where to start off creating the first page. Clicking  on Settings will reveal the tree view that shows the building blocks that we will use to build our site. Let us focus on Templates and Document Types for a second. These are the two most important artifacts we will use to come up with a content managed page. For those of you familiar with Sharepoint, Templates are like Master Pages and Document Types are like Page Layouts.

The first step in creating a site is to get the master page and the style sheets done. Since Umbraco is a folder based CMS, you should be able to copy your existing Stylesheets to the stylesheet folder under the Umbraco virtual directory and you are good to go. Though it does work for the master pages to some extent, I had a bit of an issue getting Umbraco to recognise the master pages I had copied. So, I create the master page through the Umbraco interface. You have to right click on Templates and then Click on Create. Once you provide the name and confirm the creation, you will have the ability to add HTML content to the master page. The interface will look as shown below

 

image

Umbraco, by itself creates a nested master page. You just have to put in your content. Since it is a nested master page, be sure you put the content inside your content place holder (in my case called “ContentPlaceHolderDefault”). You will also see that you have the option of using one of your own master pages as the parent master page.

Once the master page is done, the next step is to go ahead and create a document type that we will use to put in content. Its quite easy to create a document type. You just right click and say Create.

 

image 

Give a name for the Document Type and select the Template that this document type will use. You can change this later too so don’t worry too much about selecting the wrong master page.

The document type is where most of the work happens to make a page content managed. There are four tabs for every document type you create.  The first tab is the Info tab where all the details of the document type are displayed. You can provide an alias and associate the document type with an image. You can also set what Master Pages this document type can use and what is the default Master Page for this document type. Below is an example of the HomePage document type I created.

 

image

Next, let us examine the Tabs tab. In this tab, you can create tabs that will be displayed when this document type is used to create content. To show how it works, I have created a tab called Content that will hold the rich text box for the content author to put in the content.

The next step is to let the document type know that it has to display a rich text box in the Content tab. You do this by creating a property of type Rich text box in the Generic Properties tab under Content.

As you can see in the screenshot, I have created a “HelloWorldContent” property of type rich text box. You can also create properties of various other types. These types are essentially controls. Do note that the alias is like the HTML id of the control. You can also set if the content in this is mandatory and what regular expressions can be used to validate the content but we will save that for later. Now that the document type is created and we have created a rich text control as a part of the document type, we have to let the master page know where to display the content of the rich text box.

image

This can be done by inserting a page filed in the master page. Go back to the Master Page and click on Insert Page field in the tool bar above the master page. The below window will open up. If you have created the property right, then you should see it in the Choose Field dropdown. Select the field and leave the other fields to default. Save the master page.

image

We are done with the administration part. The final step in creating a page is the content authoring page. All content authoring in Umbraco is done in the Content screen. Click on Content in the Sections area. Right Click on the top level Content and click on Create. This pulls up a window with a text box for naming your page and a dropdown with the list of created Document Types. Choose the document type you just created and give the page a name. In my case, I choose to call it HomePage. Post creation, you will see two tabs Content and Properties as seen below.

image

The order in which they are displayed depends on the Sort Order I have set in the Tabs tab of the document type. The content author can put in any content in the rich text box and publish the page by clicking the Save and Publish icon. As soon as you publish, Umbraco generates a URL which you can view in the Properties tab. The page that I have created is shown below

image

Phew!!! That was quite a long post. I am sure this is the first of many to come from me on Umbraco. If you want to to get adventurous with Umbraco too, take a look at their site. For starters I found this site too very useful. Please feel free to leave your comments on this post and as always, Happy Coding!!!