Using Umbraco for the first time

by Kev Ritchie 26. November 2010 21:12

Yesterday, I spent a few hours tinkering with Umbraco.  For those of you that don’t know, Umbraco is an Open Source ASP.NET CMS (Content Management System).

Before I ramble on, a little back story for you.

I recently developed a website for my company that dynamically constructed the page content based on data retrieved from a SQL database.  Unfortunately, common in most development projects, the budget didn’t stretch as far as I needed it to Wink

So, the end result a really good CMS base, but no way of maintaining it; well unless you’re a whiz with SQL Server and fancy adding new pages and content through the SQL Server Management Studio.

It wasn’t until a few days ago, a friend of mine; Martin Beeby mentioned that he was looking into a CMS tool called Umbraco.  I was intrigued.

Now back to the present, an IE9 tab opened on and an eager mouse hanging over the download link.

NOTE: There are two options for downloading.  You can use the Web Installer (which will do all the fiddly bits for you) or you can download the files for manual install.  Follow this link for more detail on the install options:

I chose the manual install option because I like to know what’s going on and how things hang together. 

After following the instructions in the link above, I fired up my browser (IE9 in case you didn’t notice before) and navigated to the Umbraco URL I had set up earlier, the Umbraco Configuration Wizard then appeared.  Part of the configuration was to install Runway (a basic website) or create a blank site.  My choice was to install Runway, the reason being that I could get an idea of what was needed to build a website.

After some familiarisation, I removed the Runway files (Document Types, Templates, CSS and Content).  One handy feature; in light of this, is the Recycle Bin.  If you make a mistake you can get your files back.

So, sitting with a now blank website structure in front of me, I needed to decide what I was going to put in it.  Yes, you guessed it, I decided to port over the website I created for the company.  This was an obvious decision because all the content and layouts had already been done.  All I needed to was a user friendly CMS.  Step in Umbraco. 

Diving straight into the Settings section (above), I created a new CSS file under Stylesheets and copied over the CSS from the other site.  I then created a new master page under Templates and copied over the HTML markup from the other master page.


As you will notice in the screenshot above, there are some more templates and also Document Types.  Document Types are extremely important and define the content for your site.  For more detail on this go to:

When creating Document Types you have the option to create matching templates, I went with this as it saves time (well not too much Wink)).  I clicked on each newly created template and changed the Master Template option to the name of the master page I created earlier.  The screenshot  below shows this and also the markup copied from the other website.

You’ve probably noticed some <Umbraco:> elements in the screenshot above.  These relate to controls or objects created for example via the Document Types or the Developer section where you can create XSLT (Extensible Stylesheet Language Transformations) files and accompanying Macros.  In my case, I used XSLT and Macros to control the dynamic building of a list based on the Umbraco Related Links item.

It’s also worth mentioning that every template must have an <asp:content> element and the ContentPlaceHolderID  must match the Id of the ContentPlaceHolder in the master page.  If not, you will get either a compilation error or your content will not appear on the page.

With my CSS, templates, document types, XSLT and macros set up, it was time to create some content.

This was very easy.  I navigated to the Content section, right clicked on the Content node in the tree view and selected Create. 

I gave the new page a name (the name you enter for the page will be used in the URL with an .aspx extension), selected a document type (template) for the new page and clicked Create.  My new page appeared in the tree view (in a dirty state – highlighted by an asterisk) with all the fields set up previously in the selected document type.  Now it was just a matter of entering some content and publishing.

If you’re a stickler for procedures and want some control over what goes on to the web.  Umbraco has a nice permission set that allows you to give users Writer permissions (this means they can’t publish content, only send for approval) and Editor permissions (the ones that do the approving and publishing).  There is also the ability to lock users down to specific sections of the CMS.  So for example, if you give a user Writer permission and lock them down to just the Content and Media sections, they will only be able to create and save content.  So we have procedural control and security, nice Laughing

Final Thoughts

With just the few hours that I spent playing with Umbraco, I was able to move over my layouts and HTML markup and build up the new website exactly the same as the original, even adding more functionality than was possible before.  All this, without reading a single help file, which is testament to a well thought out and designed CMS.

Thanks Umbraco Laughing

Tags: , ,


Reflection and Non-Public Properties

by Kev Ritchie 23. November 2010 11:34

Ever wondered how to get to those Non-Public properties of an object?

With Reflection, here’s how you do it:

object propertyValue = anyObject.GetType().GetProperty("TheProperty", 
BindingFlags.Instance | BindingFlags.NonPublic).GetValue(anyObject, null);

All you need to do is replace “anyObject” with the name of object you are trying to get the Non-Public property from, then change “TheProperty” to the name of the Non-Public property you are trying to access.

A little explanation.

When we call the GetProperty method on a type, we supply some parameters to search the associated object with.

Our first parameter is the name of the property that we’re looking for.  The second parameter; BindingFlags, is a bitmask comprised of one or more BindingFlags that specify how the search is conducted; in really basic terms, a filter.  In the example above, we are specifying a Binding Flag of Instance, this must be specified in order to get a return from the search.  We are then using an “Or” operator to tell the search that we want to include Non-Public properties.

The GetValue method is then called to return the value of the property you were looking for.

Hope this is of some use to someone and if anything else will be a little reminder to myself in case I forget Winking smile

OK, OK, yes I'm a geek!

by Kev Ritchie 21. November 2010 20:18

It's not often that I profess to being a geek, but today I was looking through my DVD collection and noticed that I have a fair few "geek" films.  I like to think they're cool and never get bored of watching them.

Here a just a few that I can see at a glance.

1. Hackers - This should be in every geeks DVD collection.  Yes, there are a few technical faux pas, but we can let them slip because, well just because.

2. War Games - Who wouldn't want a super computer like Joshua!

3. Antitrust - Was this based on Microsoft?!? They've certainly tried to make Tim Robbins look like Bill Gates.  Well; that aside, Rachael Leigh Cook and Claire Forlani are in it, so that's good enough for me Laughing

How sad I am!  If you're a geek like me, what geek films do you have in your DVD collection?

jQuery Festivities…yes it’s nearly Christmas!

by Kev Ritchie 18. November 2010 13:39

After reading The Beebs post on how to create a jQuery rollover like the one on  It got me thinking about how this or other effects could be used to create an Advent Calendar.

The animate function has been in the jQuery library for a while now (v1.0 I think, correct me if I’m wrong), but I thought that even though it’s not a new function of jQuery, it’s exactly what I need to achieve my goal…a door sliding effect.

Click here for a demo

If you want to replicate it, here are a few steps to help:

1. Add a reference to the jQuery library:

<script src="" language="javascript"

2. Next write a little HTML mark-up to build each of the calendar doors:

<div class="day">
    <div class="overlay">
        <img src="bells25.jpg" />
    <img class="image" src="1.jpg" />

3. And now for some styling.  Or in my case an attempt Smile

            position: relative;
            border: solid 2px black;
            width: 150px;
            height: 150px;
            display: inline-block;
            overflow: hidden;
            margin: 5px;
            font-size: 2.0em;
            text-align: center;
            width: 150px;
            height: 150px;
            background-color: #ffffff;
            /*  Setting the position to absolute here keeps the image and text on top */
            position: absolute;
            z-index: 1;

            position: relative;
            width: 150px;
            height: 150px;

            color: red;

4. Now for the jQuery magic.  In step 2 we defined our layout using DIVs, each DIV had a class name, these names are important for this step to work.

First we add a jQuery ready function that will fire when the document is ready.  In this function, we immediately start to hook up our methods to create the “sliding door” effect.  We search the document for a DIV called .day and attach a hover function to it.  We then search that DIV for another DIV called .overlay.  When this element is found, we add the animation using the animate function.

We use two animate methods.  One to change the position of the overlay to the day DIV width and the second to set it back.


    $(document).ready(function() {

        /* Get the day div width */
        var width = $(this).outerWidth();
        /* Change the position of the overlay to the day div width with an animation effect */
        $(this).find('.overlay').animate({ right : width },
    }, function() {
        /* When the mouse is no longer hovering over the div set the position back. */
        $(this).find('.overlay').animate({ right : '0px' },

        /* queue:false = start the animation immediately, it won't wait for the previous 
animation to stop */
        /* duration:300 = how long the animation will take to finish in this case 0.3 
seconds. */

Try the demo above.  Feel free to add to it criticise it, let me know how you get on!

MS Access vs. Visual Studio LightSwitch

by Kev Ritchie 14. November 2010 11:59

On 3rd August at VSLive! 2010 in Redmond; Corporate Vice President of Visual Studio, Jason Zander, unveiled Visual Studio LightSwitch.

Yes, it’s taken this long for me to get around to writing about it.

What is LightSwitch?  LightSwitch is a member of the Visual Studio family targeted at developers who need to rapidly build LOB (Line of Business) Applications.

What relevance does this have to Access?

Well, recently a colleague of mine was asked to look into LightSwitch as an alternative to building database applications using Access.  Yes, there are still applications in use today that use Access!  So, I thought I’d take this opportunity to find out if LightSwitch really is; what has been seen by some developers, as a replacement for Access.

It seems that even though Access was developed as a package to help business end users store, report on and share business data with other business end users, the Access package has been leveraged by developers to create what you could class as LOB applications.

This brings to light a common issue with this type of development. Whilst this method of application development fits personal or small business usage, scalability of the application is limited.  As a business grows the reliance on the application grows and with it the data.  It wouldn’t be long before you had to compress and archive off the data, to allow for further storage.

Oh, and let’s not forget, have you ever seen a nice looking Access application UI? J  If you have or have created one, then I apologise.

To overcome the issues of using Access as a platform for developing business applications, I believe, is where LightSwitch comes in.

I fully understand that at first glance, LightSwitch seems to be a glorified version of Access with a Visual Studio IDE.  But look closer!  You are getting so much more.  Here are a few that I thought were worth mentioning:

Out-of-the-box you get a classic three tier architecture built on top of .NET (WCF, RIA Services and Entities), ASP.NET and Silverlight. Nice!

Microsoft are also working with Partners, like Infragistics, to develop Shell and Theme components that developers can install to dramatically change the look and feel of their application at the click of a button.  If you’re rubbish at UI design like me, this is a brilliant addition.

You also have the ability to connect to data sources such as SQL Server and SharePoint.  But Access 2010 can do that as well, so why was it worth mentioning?  Well, really to highlight the point that the major difference between the two packages is that LightSwitch is capable of connecting to the Cloud (Windows Azure and SQL Azure Platform) albeit Post beta.  Ah, scalability!

So, is LightSwitch a replacement for Access?

In my honest opinion, LightSwitch is not a replacement for Access.

LightSwitch is a product that gives developers the tools to provide feature-rich and scalable business applications that can be deployed to multiple platforms.

Access is a product that; as I mentioned before, is for allowing business end users to store, report on and share business data.  It was never intended to be a platform to build business applications.

Now that LightSwitch is here, the weight of being a business application can be taken off of Access’s shoulders!

The lines are clearly defined between these two products and both are here to stay.

For more information on LightSwitch and the Keynote from VSLive! head over to You won’t be disappointed.

Powered by BlogEngine.NET
Theme by Mads Kristensen | Modified by Mooglegiant