kipusoep's tech blog

Umbraco 4.5 & Visual Studio 2010 & .Less & jQuery vsdoc & SquishIt & masterpages

kipusoep — Fri, 23 Jul 2010 15:06:04 +0000

Using Umbraco with VS2010

… and masterpages, jQuery vsdoc, dotless, SquishIt

Welcome all to this magnificent blogpost about using Umbraco 4.5 with Visual Studio 2010 and everything you’ll need to know about some other tools!

First things first; we, at InfoCaster, use Visual Studio 2010 and .NET to develop our Umbraco web applications. We try not to use XSLT, just because .NET is much better and everyone at InfoCaster knows .NET, unlike XSLT. I always like to say that .NET with LINQ can do like everything, but XSLT can’t or does things inefficient. It’s not even possible to assign a value to a variable for a second time. How variable is that ‘variable’ then? But that’s another discussion!

So a few months ago I started developing our own ‘Umbraco Website Starter project’. It’s like a clean Umbraco installation wrapped in a Visual Studio solution, with some extra’s, like some handy extension methods, pre-installed packages and default properties for the homepage (title prefix/suffix, Google analytics code, meta data etc.).

Now I migrated it to Umbraco 4.5 and removed all packages and installed the necessary packages again. I’d like to tell you all what I did and how.

Blueprint CSS

We’re using Blueprint CSS from now on to have a good start on creating our templates and stylesheets, this is combined with SquishIt.

.Less

We’re using .Less for our custom stylesheet. You can read everything about how to set this up in VS(2010), so I’m not going to explain that: http://www.dotlesscss.com/

I’m using SquishIt to generate the CSS files out of the .css.less files. These .css.less files can be opened with VS2010 with css highlighting / autocompletion by using this plug-in: http://visualstudiogallery.msdn.microsoft.com/en-us/dd5635b0-3c70-484f-abcb-cbdcabaa9923

<%= Bundle.Css()
	.Add("~/css/blueprint/screen.css")
	.Add("~/css/style.css.less")
	.WithMedia("screen, projection")
	.Render("~/css/output/screen_#.css")
%>

SquishIt and jQuery vsdoc

SquishIt download page: http://www.codethinked.com/post/2010/05/26/SquishIt-The-Friendly-ASPNET-JavaScript-and-CSS-Squisher.aspx

VS2010 has better intellisense features when it comes to JavaScript. So why not use jQuery with vsdoc and let SquishIt minimize and combine it for production environments?

Great idea! BUT this is how SquishIt requires it’s mark-up:

<%= Bundle.JavaScript()
    .Add("~/js/jquery-1.4.2.js")
    .Add("~/js/jquery-ui-1.8.1.js")
    .Render("~/js/combined_#.js")
%>

Hmm… That’s not going to work with intellisense/vsdoc, because Visual Studio looks for real

Then you can just add any JavaScript reference you’d like To enable vsdoc intellisense, you must also have the vsdoc file in the same folder as the realy jQuery file

The literal is being parsed in code-behind by using regex and it gets rewritten:

Regex scriptTagRegex = new Regex(@"");
IJavaScriptBundle jsBundle = Bundle.JavaScript();
IJavaScriptBundleBuilder jsBundleBuilder = null;
foreach (Match match in scriptTagRegex.Matches(ltlScripts.Text))
{
    if (jsBundleBuilder == null)
        jsBundleBuilder = jsBundle.Add(match.Groups[3].Value);
    else
        jsBundleBuilder.Add(match.Groups[3].Value);
}
ltlScripts.Text = jsBundleBuilder.Render("~/scripts/output/js_#.js");

Simple as that (using SquishIt.Framework.JavaScript)

Default meta properties

(title prefix/suffix, meta tags, meta description, meta title, favicon, Google analytics)

This is the markup I have as :


    Title will be filled from codebehind

    
    
    
    " />
    " />

    
    
    
    

    
    <%= Bundle.Css()
        .Add("~/css/blueprint/screen.css")
        .Add("~/css/style.css.less")
        .WithMedia("screen, projection")
        .Render("~/css/output/screen_#.css")
    %>
    <%= Bundle.Css()
        .Add("~/css/blueprint/print.css")
        .WithMedia("print")
        .Render("~/css/output/print_#.css")
    %>
    
    

    

    
    
    
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', '{0}']);
        _gaq.push(['_trackPageview']);

        (function () {{
            var ga = document.createElement('script');
            ga.type = 'text/javascript';
            ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(ga, s);
        }})();

The title, favicon and Google analytics gets set from code-behind.

The meta tags/description are filled by using a recursive extension method I wrote.

I also added a content placeholder in the head and also at the end of the XHTML document, right before the , so it’s possible to load custom CSS (head) and JS (bottom) per sub masterpage.

This is the code-behind which belongs to this mark-up:

protected override void OnPreRender(EventArgs e)
{
    base.OnPreRender(e);

    #region Page stuff (google analytics, favicon, title)
    // Google analytics
    if (!string.IsNullOrEmpty(CurrentNode.GetPropertyValueRecursive("analyticsCode")))
        ltlGoogleAnalytics.Text = string.Format(
            ltlGoogleAnalytics.Text,
            CurrentNode.GetPropertyValueRecursive("analyticsCode")
        );
    else
        ltlGoogleAnalytics.Visible = false;

    // Favicon
    int faviconId;
    if (!string.IsNullOrEmpty(CurrentNode.GetPropertyValueRecursive("favicon")) && int.TryParse(CurrentNode.GetPropertyValueRecursive("favicon"), out faviconId))
        ltlFavicon.Text = string.Format(
            "{0}{1}{2}",
            ltlFavicon.Text.Substring(0, ltlFavicon.Text.IndexOf("href=\"") + ("href=\"").Length),
            new Media(faviconId).getProperty("umbracoFile").Value,
            ltlFavicon.Text.Substring(ltlFavicon.Text.IndexOf("href=\"\"") + ("href=\"").Length)
        );
    else
        ltlFavicon.Visible = false;

    // Title
    Page.Title = string.Format(
        "{0}{1}{2}",
        CurrentNode.GetPropertyValueRecursive("titlePrefix"),
        CurrentNode.GetPropertyValueOrDefault("pageTitle", CurrentNode.Name),
        CurrentNode.GetPropertyValueRecursive("titleSuffix")
    );
    #endregion
}

Easy right?

Extension methods

I wrote some extension methods to ease some default tasks.

These extension methods are duplicated, for use in multilingual sites.

You can download the .cs file right here, it contains enough comments/documentation. Look at the end of this post

Masterpage intellisense VS2010 bug

There is a bug in VS2010 when using Umbraco’s masterpage as root master (umbraco.presentation.masterpages._default). The intellisense doesn’t work anymore. I’ve created a bug report on Microsoft Connect about this: https://connect.microsoft.com/VisualStudio/feedback/details/567771/no-asp-tag-intellisense-in-some-cases-when-using-masterpages

I’ve got a ‘dirty’ work-around. I don’t know if this work-around works with the ‘Canvas-editing’ feature in Umbraco (we and our customers don’t use it).

Just let every main masterpage (with tags) inherit: umbraco.presentation.masterpages._default

#Protip: Creating new templates

When using Visual Studio, it’s nice to have code-behind files for your templates (at least, that’s how we do stuff). If you create a template in Umbraco, it creates a masterpage without code-behind…

Then you would have to add a code-behind manually, link it with the mark-up and create designer file. That sucks right?

Just do this:

Create a nested masterpage in VS and use your ‘master’-masterpage as masterpage in the masterpages folder. Lol, there’s a lot of ‘masterpage’ in that sentence hehe.
VS creates a masterpage for you with code-behind, sweet!
VS opens the mark-up of this newly created masterpage, keep it opened!
Then go to your Umbraco back-end and create a template like you would normally do. Give it the same name as you defined in step 1.
This should create an Umbraco template by using the already created masterpage as file.
Now return to Visual Studio. It should notify you that the file has changed and gives you the option to reload the file. Reload and then use CTRL+Z to undo the changes made by Umbraco (else the code-behind won’t be linked to the mark-up) and save it.
You’re done!

Downloads

‘Master’-Masterpage with code-behind: StefanKip.InfoCaster.Umbraco.masterpage

Extension methods: UmbracoExtensions.cs (remove ending .txt)

Updating Harman/Kardon AVR255/x55/x45

kipusoep — Wed, 21 Jul 2010 19:46:13 +0000

I tried updating the firmware of my Harman/Kardon AVR255 with Windows 7 Ultimate x64, but it always failed at the video subsystem part with the message: “AVR didn’t respond properly. Video subsystem upgrade failed.”

Then I tried using Windows XP Mode for Windows 7 and it worked!

301 URL Tracker v1.1 for Umbraco

kipusoep — Wed, 12 May 2010 18:28:02 +0000

I just released an update for the 301 URL Tracker for Umbraco: http://bit.ly/301URLTracker

Changelist

[Bug fix (critical)] The 404 Handler returned ’301 URL Tracker’ as HTTP Status instead of ’301 Moved Permanently’
[New feature] View/manage Url Mappings on the node itself with the new 301 URL Tracker Datatype (ofcourse you must add a property, with the 301 URL Tracker Datatype, to a Document Type and !!!REMOVE IT WHEN YOU ARE GOING TO UN-INSTALL THE 301 URL TRACKER !!!)
[New feature] Create RegEx Url Mappings (url mappings will be tried to match first, if no match found RegEx matching kicks in, ordered by Insertion date ascending)
[New feature] Option to disable the 301 URL Tracker (add to appSettings:
[New feature] When clicking on the ’301 URL Tracker’ node in the tree, there’s a button to view all not found requests

301 URL Tracker for Umbraco

kipusoep — Wed, 28 Apr 2010 21:52:57 +0000

Just released my second package for Umbraco; the 301 URL Tracker.

I could really use some feedback for my graduation report, so please leave some when you’ve given it a run!

Release notes

About the 301 URL Tracker package

The 301 URL Tracker package is created by InfoCaster. The original idea comes from Soeteman Software.

The purpose of the 301 URL Tracker package, is to create some SEO friendlyness.
Search engines crawl your website and store links to all pages within your website.
The 301 URL Tracker keeps track of all the url changes of these pages:

When a document is moved it gets a new url
When a document is renamed it gets a new url

The old urls are stored and when someone requests one of these old urls, they are automatically transfered to the correct new url, with a 301 HTTP response.
Search engines recognize this HTTP response and replace the old location with the new location.

All features of the 301 URL Tracker package:

Keeps track of url changes and redirects requests from these ‘old’ urls to the new ones
Ability to create custom url mappings, e.g. when you get a new website, the urls can be changed. This way you can map old urls to new ones
Remove any url mapping; automatically tracked urls and custom mapped urls

Some hints

When a document gets a new url, the old url is saved and the document is automatically added to the 301 URL Tracker tree (including all child documents)
When one wants to create a custom url mapping, just right-click on the 301 URL Tracker node and click ‘Create’. Select the document to create the custom url mapping for
The reason for an automatic mapping is shows next to the mapping url. When creating custom mappings, you can add your own note to the mapping
To delete all url mappings for a document, just right-click on the document in the 301 URL Tracker tree and press ‘Delete’. Important note: the documents underneath the deleted one will NOT be removed, although it looks like they are
The url mappings are ordered by date descending. To view the creation date of a mapping, hover with the mouse over the url of a mapping entry
When a document with configured url mappings gets recycled, it won’t show up in the 301 URL Tracker tree anymore (and the url mappings won’t work)
When a document gets moved back from the recycle bin, it shows up again in the 301 URL Tracker tree. When a document gets deleted for real, the url mappings get deleted too

Graduation project

This package is part of my graduation project. Yes, I’m trying to graduate with Umbraco as graduation topic. So I would like to call in your help!
I really need feedback for my graduation report. So please, if you have a spare moment, leave some feedback in the ‘Feedback forum’ below.
Thank you all very much in advance!

Requirements

.NET 3.5
SQL Server

Tested on

.NET 3.5
SQL Server 2008
Windows 7 Ultimate
IIS 7.5

True Color Picker for Umbraco

kipusoep — Thu, 12 Nov 2009 23:13:43 +0000

This package will create a DataType called “True Color Picker”.
You may be wondering, what’s “True” doing there?
Well I was looking for a color picker without the need to provide pre-defined colors.
I saw the built-in Color Picker, but that’s not a color picker! It’s an approved color picker.
So I create a TRUE color picker.

This package will create the following files / directories:

/umbraco/css
    colorpicker.css
/umbraco/js/colorpicker
    colorpicker.js
/umbraco/images/colorpicker
    *

Link: http://our.umbraco.org/projects/true-color-picker

Screenshot:

Ajax Control Toolkit 30390 for Umbraco

kipusoep — Thu, 05 Nov 2009 16:52:13 +0000

I modified the Ajax Control Toolkit version 30390 so it can be used next to Umbraco’s ACT version.

Look at http://our.umbraco.org/projects/ajaxcontroltoolkit-30930-for-umbraco

Asp.NET + IIS 6 – Assembly caching?!

kipusoep — Sat, 28 Mar 2009 10:21:36 +0000

The last weeks am employee of one of our clients and me had some problems getting a project, I’ve build, running on IIS 6.
There was a website configured in IIS for the main webapplication, which was already running on their server, and my project would be placed in a subdirectory of that webapplication.
So I deliverd the project with the following files:

Aspx pages
A bin directory
Stylesheet directory
Images directory
No web.config, because the root application already has one

We just couldn’t get it to work properly and I thought IIS was caching assemblies, even after a IIS reset and server reboot.
After some time someone found the problem; the assemblies in the bin directory cannot be placed in a subdirectory, if a website isn’t configured for that specific directory. So we placed the assemblies in the root webapplication’s bin directory, and it worked!

Remote desktop not sharing clipboard information

kipusoep — Thu, 19 Feb 2009 20:39:46 +0000

Usually when I set up a remote desktop connection I was able to share clipboard information between the server and the client, but for some reason it didn’t work anymore.
After some search I found out that it has something to do with ‘rdpclip.exe’. Some websites suggested to restart this process, but the problem was ‘rdpclip.exe’ wasn’t even showing up in my process list.
The trick is to add this executable to your startup folder in the start menu. The file ‘rdpclip.exe’ is located in your System32 directory, e.g.: C:\Windows\System32\rdpclip.exe. Now you’re able to use the clipboard again with remote desktop sessions.

Winamp and Dolby Digital AC3

kipusoep — Mon, 16 Feb 2009 20:58:45 +0000

I recently bought a new A/V Receiver, which supports digital audio via two connection types: optical and digital. So I connected my laptop via spdiff – optical to the receiver and the receiver was receiving Dolby Digital perfectly.
There was only one problem, I wanted to send stereo sound via Winamp in 5.1 signal too. After looking around the web for some plug-in, I found ATSurround. This plug-in can upmix stereo to 5.1 / AC3.

Just download it from free-codecs.com

Vista logon changes dual monitor settings

kipusoep — Mon, 16 Feb 2009 20:39:53 +0000

I recently had a problem with Windows Vista and the nVidia display drivers:
When I logged on to Windows and the dual monitor settings were set correctly (19″ display as primary display and the laptop display as secundary), Vista would reset these settings, setting my laptop display as primary, my stand-alone display as secundary with a resolution based on the laptop display (1280 x 800).

Then I found a fix for this issue, changing a register entry:
The key is in HKLM\Software\Microsoft\TMM, called
UseIViewHelper and it’s value is 1. Just rename this key and reboot. The problem will be fixed!