Ferguson Moriyama and Umbraco 5: Part 2

So a little while later than planned I'm taking the next steps with building the new Ferguson Moriyama site with Umbraco 5. Since last time I wrote I've upgraded to Umbraco to the RTM release, but I've also upgraded the office PC so it is hard to comment on performance.

This time I'm going to look at adding CSS and JavaScript to my site and also trying to output some of the site navigation.

Adding some style

I already have the mark-up for my site built so my first step today is to grab the CSS and the JavaScript and drop it into the appropriate folders under the Umbraco web root. A little digging around suggests that the place to put CSS files is in ~/Content/Styles  so I drop my CSS files in there and happily they appear in the Settings section of Umbraco just as they did in Umbraco 4.

For JavaScript the location is ~/Scripts/Umbraco so I copy my file in and the back office looks nicely familiar.

18-02-2012 10-52-23

In Umbraco 5 you can create folders underneath the StyleSheets root folder using the Umbraco UI which is an improvement on version 4.

I now want to add my CSS and JavaScript to the pages on my site so I revisit the Layout template that I worked with in my previous post. At this point I realise that by modifying the default Layout I've trashed the out of the box example layout, but luckily I can now just go and install a clean copy of Version 5 from web matrix to use as a reference alongside the site that I am building.

The dev dataset Layout contains examples of including JavasScript and CSS in a page so I quickly copy and paste them into my own Layout.

18-02-2012 11-01-54

Click image for a larger version

I'm a little fussy and I'm not really happy that the URL of my JavaScript file contains the word Umbraco - as a pedant I'd prefer that my site didn't reveal the technology that was powering it. This happens as the Scripts tree maps to ~/Scripts/Umbraco - I hope there is a way around this.

I copy some images into ~/Content/Images and drop some static mark-up into the body of my Home template and I've got a half decent looking homepage.

Making it dynamic

So now I have a website of sorts the two parts that I haven't covered are dynamic parts of pages such as navigation and forms. In Umbraco 4 we'd have called these Macros.

Glancing around Umbraco 5 I notice that you can add Partial Views in the settings section of Umbraco and just render them out onto a template using @Html.Partial - a familiar piece of syntax for those who have worked with ASP.net MVC a little. Partial views created from the Umbraco back office are stored in ~/Views/Umbraco/Partial

I decide to start with my top level navigation which strictly speaking I could write into the Layout directly but I'm trying to discover some of the new features of Umbraco 5 so I create a new partial. After a bit of playing I end up with the following code:

@inherits RenderViewPage
@{ var counter = 1; }
    <li><a href="/">Home</a></li>
    @foreach (var page in DynamicModel.AncestorsOrSelf.Last().Children)
           <li class="item-@counter"><a href="@page.Url">@page.Name</a></li>

I add this to my layout by adding:


where topLevelNavigation.cshtml is the name of my partial view. The code above just finds the root node of the current site and iterates over the children.

A moment of realisation

In playing with Umbraco templates (or views) and also partials I had a moment of realisation. It is so nice in Umbraco 5 to have a templating language (or view engine) that is free from proprietary/custom tags and without references to Macros that could contain anything from XSLT to Ruby.

I was one of the people who grumbled and complained when XSLT was nudged out of the door in Umbraco 5 but now I've used the finished product I conclude that it was the right choice. You can't please all of the people all of the time but standardising on the Microsoft supported stack gives the developer a fantastic experience when using Visual Studio. It also means when inheriting or supporting legacy sites that you don't unwrap the box to find out that you need to hire an entirely new development team. 

Next Time

The old Ferguson Moriyama site used web site forms and Umbraco to handle a lot of our back office processes - in the next post in this series I'll be trying to put some forms onto my web pages and experiment with using hive to abstract the storage of those forms.


Leave a comment