Tool Presentation: Balsamic Mockup

Last week I joined the DNUG Frankfurt to speak about Umbraco. This motto of this meeting was 'Cool Tipps Camp' where six other tracks showed some other stuff. The tool 'Balsamiq Mockup' was presented by Stephan Schneider and I wanted to forward this info to you as I think it is a great tool.

Balsamiq Mockup is a tool used for defining the structure of a web site or web application. Yes, there are some other tools around this defining websites so why am I so excited about this tool? It is a program let you define the structure without the design. You can edit a browser window to a certain state of the web application and it looks like painted with a pencil. That gives you the opportunity to separate the structure of the website from the design. Check out the webcasts on the start page and some screenshots here.

Balsamiq Mockup opens in a window with a tabbed toolbar where all the 'widgets' are placed like a browser window, an IPhone, navigations sliders, calendars, buttons, etc. You can change some properties on the widgets and you also can put in some basic functionality (link to other mockups like links in a web page). With you can save and export these mockups, co-workers can add notices and finally you can get c# code out of it (with a plugin you have to buy).

In the state of defining the structure of a web site you shouldn't talk about design. I think the design comes afterwards when you know how the website is structured. In many discussions with my 'clients' I had the problem that if I was showing a sample behaviour live in a browser all clients wanted to talk about the design: 'this button has to be a bit more blue' (what is more blue?) and 'the navigation bar looks a little bit crappy' instead of talking of the way to navigate through the web application and which kind of navigation should be used. Perhaps with Balsamiq Mockup I will help me define better web site structures with my clients.

Balsamiq Mockup is based on Adobe Air and costs about 80 $. It's worth to have a look on it.

Replacing characters for filenames on upload

After I got tired to talk to our users that they should upload only web friendly named files and they don't care about it (or they don't understand it or perhaps they have something like Alzheimer) I added character replacing to the upload field of umbraco.

First I added a new section to the umbraco.config under content:

<content>
    <filenameReplacing>
        <char org=" ">-</char>
        <char org="&quot;"></char>
        <char org=";"></char>
        <char org="/"></char>
        <char org=":"></char>
        <char org="+">plus</char>
        <char org="*">star</char>
        <char org="&amp;"></char>
        <char org="?"></char>
    </filenameReplacing>
</content>

After that I added a new property to the UmbracoSettings class in the umbraco.businesslogic project:

/// <summary>
/// Gets a list of characters that will be replaced when uploadingFiles via fileUpload
/// </summary>
/// <value>The filename replacement characters for uploaded Files.</value>
public static XmlNode FilenameReplaceCharacters
{
    get { return GetKeyAsNode("/settings/content/filenameReplacing"); }
}

Finally I added some lines to uploadField class in the umbraco.editorControls project

if (umbraco.UmbracoSettings.UploadAllowDirectories)
{
    // Changed by TH to replace filename characters (2009-05-26)
    filename = this.getFilename(_text.Substring(_text.LastIndexOf("\\") + 1, _text.Length - _text.LastIndexOf("\\") - 1).ToLower());

    // Create a new folder in the /media folder with the name /media/propertyid
    System.IO.Directory.CreateDirectory(System.Web.HttpContext.Current.Server.MapPath(umbraco.GlobalSettings.Path + "/../media/" + _data.PropertyId.ToString()));
    _fullFilePath = System.Web.HttpContext.Current.Server.MapPath(umbraco.GlobalSettings.Path + "/../media/" + _data.PropertyId + "/" + filename);
    this.PostedFile.SaveAs(_fullFilePath);
    _data.Value = "/media/" + _data.PropertyId + "/" + filename;
}
else
{
    // Changed by TH to replace filename characters (2009-05-26)
    filename = this.getFilename(System.IO.Path.GetFileName(this.PostedFile.FileName));

    filename = _data.PropertyId + "-" + filename;
    _fullFilePath = System.Web.HttpContext.Current.Server.MapPath(umbraco.GlobalSettings.Path + "/../media/" + filename);
    this.PostedFile.SaveAs(_fullFilePath);
    _data.Value = "/media/" + filename;
}

and a new function:

/// <summary>
/// Function to get the filename with replaced characters
/// </summary>
/// <param name="originalFilename"></param>
/// <returns></returns>
private string getFilename(string originalFilename)
{
    string retVal = System.IO.Path.GetFileNameWithoutExtension(originalFilename);
    System.Xml.XmlNode replaceChars = UmbracoSettings.FilenameReplaceCharacters;
    foreach (System.Xml.XmlNode n in replaceChars.SelectNodes("char"))
        if (n.Attributes.GetNamedItem("org") != null && n.Attributes.GetNamedItem("org").Value != "")
            retVal = retVal.Replace(n.Attributes.GetNamedItem("org").Value, xmlHelper.GetNodeValue(n));
    return retVal + System.IO.Path.GetExtension(originalFilename); 
}

I recompiled the solution and replaced the businesslogic.dll, the umbraco.editorControls.dll and the umbracoSettings.config on the webserver.

This works fine for me and saves me a lot of time talking to the users uploading web friendly filenames.

Your feedback is welcome

Broken Area Icons after Upgrade to v4 via v4Betas

EDIT: Added a before image to make clear which entries have to be changed into which values. Thanks to S�ren Sprog� for the comment.

In one of my buddy's installations I was upgrading to Umbraco v4 via various Beta's. I can't remember exactly which versions this had been and please don't ask my why I had to do this. The whole upgrade worked like a charm except of the Area Icons in the bottom left area. There you could only see broken icons. If you have this behaviour just edit the umbracoApp table and change the values of the appIcon column from

to

The reason is that Umbraco v4 now uses only one png file for all build in areas together changing the image by changing the background-position CSS value.