Richard's blog

Developing for the iPhone - what you need to know

Sat, 13 Apr 2013 07:43:31 GMT

They say the future is mobile. (Ed. Two years on since originally writing this post, it almost seems like the future is here. We might have all missed the App Store gold rush, but app development for mobile is still exciting and now there's Android, Windows Phone 7 and iPads to think about.)

So, I'm quite excited to learn about developing for this new platform and see what I can create. Will I be able to use my existing web development and programming skills, or will I need to learn a new set of skills. This is what I've learnt so far about what I'll need to know.

There are two options when developing for the iPhone (or iPod touch): Develop a web application or develop a native iPhone application. There are plusses and minuses for both, and both require a completely different set of skills. Until recently you could only develop web applications, but Apple has recently released a beta of the iPhone SDK building up towards the planned opening of the iPhone App Store.

Developing a web based iPhone application

If you're a web developer like me, then this is going to be the easiest and possibly best option. You can use your existing web development skills and you can host your application on your current server.

I bought myself an iPod touch using the excuse that it would help me test websites on the iPhone. They're the same except the iPod touch doesn't have all the applications the iPhone does (most notably, and understandably the phone application). However, I've discovered that you don't even need an iPod touch. The iPhone Software Development Kit (SDK) includes an iPhone simulator. You will need a Mac though to run the SDK.

If you have an existing web application, it will probably already work on the iPhone, unless it uses Flash or a few other non-supported technologies. There are several things you could do to make it work better on an iPhone, some of these things will be helpful for other mobile devices.

You can add an iPhone, or small screen specific style sheet. This will allow you to lay things out better for the available screen size. You may also wish to take advantage of some Safari and iPhone specific CSS. For example there's CSS support for simple animation and transitions.

You may wish to detect that the browser is on an iPhone and serve them a specialised version. Facebook is an excellent example of this and creates an experience that is very similar to using a native iPhone application.

You can make use of iPhone JavaScript handlers that respond to touch gestures. The touch interface is one of the things that makes the iPhone shine, so it'd be great to take advantage of this in your web apps.

There are also some custom meta tags which allow you to control the screen area and whether the user can zoom. You can also add custom links that will launch other iPhone applications. You can even store data in a client side SQLite database, which is apparently part of the HTML 5 spec.

There's a lot you can do and that just scratches the surface. Using and building upon you existing HTML, CSS and JavaScript knowledge you could make something very exciting.

Now that all sounds great, but there are limitations with an iPhone web app. Firstly it's not going to work when the user is offline, and it's going to be slow when their connection is slow. You're also not going to be able to access all of the features of the device such as its location awareness, orientation awareness or be able to access things like the address book. If you want to make use of all the power and all the features then you're going to have to make a fully native iPhone application.

Developing a native iPhone application

If you've previously developed software for Apple Macs then you're probably going to find you can quite easily turn those skills to iPhone development. If you haven't then there's a lot your going to need to learn. It's aimed at software developers, rather than web developers and the skills needed are very different.

Before you begin there are a few things you will need. You'll need a Mac, you'll need to download the iPhone Software Development Kit (SDK) and it'd help for testing if you had a iPhone or an iPod touch (this last bit isn't essential as there is a simulator).

The SDK includes all the tools you'll need to develop iPhone applications. These tools include an interface designer, a code editor, profiling tools and an iPhone simulator. They're completely free, but there is an option to join the iPhone Developer Program. This costs $99. As far as I can tell, you need to join this if you wish to share your applications with anyone. Otherwise you can only install your programs on one designated test iPhone. I've also read in forums that the Developer Program is so popular that Apple are putting everyone on a waiting list. I thought I'd wait till I created a program worth sharing before I joined the program. There's a lot to learn before I can even think about doing this.

If you've not done Mac development before, the first you'll need to learn is the programming language Objective C. Knowing PHP and JavaScript, probably isn't going to help you that much, although it'd be a start. It's most similar to C and C++, although knowing something like Java, Ruby on Rails, or ASP.NET would also be helpful. Although I've used C++ in the past and currently use ASP.NET, I've found Objective C too different to be able to pick up from code samples. I'm currently reading Apple's reference guide to it and I've been reccommended the book Programming in Objective C.

You'll also need a good understanding of object orientated programming. If you've used Ruby on Rails, you'll be pleased to know that they seem to make heavy use of the Model View Controller architecture that Rails is built on.

All the actual fun stuff seems to be contained in the various frameworks that provide the iPhone functions and features that your application can use. I've not had time to explore this fully as learning Objective C has slowed me down a bit. These frameworks seem to be the Foundation Framework, UIKit and the Cocoa Touch Framework. You'll need to understand the basics of these frameworks so you can start making use of the functions they provide.

Once you've got your head round Objective C you can start looking through all the code examples they've got. It's probably a good way to start understanding how all the framework features work.

If you want to find out more, the iPhone Dev Centre has load of videos, reference material and code samples to work through:

Top Ten Windows 8 Apps

Fri, 15 Feb 2013 18:29:53 GMT

The Creative Bloq App Generator Contest was sponsored by Windows 8 and was a chance for UK developers to be recognised for their excellent work. I was very pleased that my app Font Picker was one of the top ten winners, particularly because of the high quality of the other winners. Here are the all the winners of the contest.

Grand Prize Winner

Didlr – Rich Holdsworth

Didlr lets you draw and share your pictures.

Top ten prize winners

These are in no particular order, except I'm biased so mine is at the top.

Font Picker – Richard Garside

Font Picker is an app for designers that makes trawling through your fonts a joy and means you'll always find the perfect font for your project.

Interference – Nathan Beardmore

Interference is a game that mixes Chinese Whispers with doodling in a wonderfully addictive way. More fun than you can doodle a stick at.

Tune Up – Anthony Wieser

Tune Up is a simple effective app for tuning your guitar or any other music instrument you have round the house.

My Study Life – Jamie Clarke

My Study Life is a planner for student, teachers and lecturers who want to organise their hectic academic lives.

Human Encyclopedia – André Barbosa

The Human Encyclopedia is a guide to the human body with interactive 3D models.

GetAbout.Me – Mark Bridgett

GetAbout.me is a social media monitoring tool that helps you discover what people are talking about.

Pepper – David Hamilton

Pepper is a social app for discovering, sharing and interacting with live music events.

Study Planner – Dominic Ayre

Study Planner is an organising app for students that keep track of their timetable and homework.

Album Flow – Crispin Hoult

Album Flow lets you browse through your music collection as if you were flipping though LPs in a record store.

Visual Snippet Library – Russell Archer

Visual Snippet Library allows you to open-up your Visual Studio code snippet library so you can quickly browse, search, view, edit and create snippets.

Sending XML to an ASP.NET MVC Action Method Argument

Thu, 17 Jan 2013 12:16:39 GMT

I read a great article recently by Phil Haack on sending JSON to an action method. This was very timely as I wanted to do exactly that in the REST API I've been created for a video hosting website. However, I wanted to make it work with XML as well as JSON.

Phil Haack creates something called a JSON value provider, so I followed his example and created an XML value provider. I've used it on two projects now and it's worked a treat. I thought I'd share it with the world in the hope that it will be useful to others.

Source code

XML Value Provider (C# source)

To get this working in your project you'll need to follow Phil Haack's instructions for his JSON Value Provider.

If anyone has any suggested improvements to the code, then I'd love to hear them.

Update - January 2013

This code has now been updated to stop it being vulnerable to an XML Bomb DOS Attack. We all know that you shouldn't trust anything sent by the user, but less of us know that XmlReader has a clever feature for expanding entities and that this feature presents a nice attack vector. It's very easy to fix. You just need to provide a setting that prohibits DTD Processing. This probably should be the standard setting, but as it isn't, you need to know to turn if off. If you do need this feature then read the article for details on how to use it and still keep your site safe.

If you're using an early version of this code, you should update it to this version.

Using a Custom Model Binder

If your model object needs to use XML attributes then you may be better off using a custom XML model binder instead.

Custom XML model binder for ASP.NET MVC

Thu, 17 Jan 2013 12:14:17 GMT

In an earlier post I wrote about using an XML value provider to allow you to send XML to your .NET MVC action methods. This is great, untill you want to accept XML where you have a model that needs XML atributes to control how it's deserialized. As the value provider stage happens before mondel binding it has no knowledge of the model objects that the values will be pushed into. So it can't look at your model class's XML attributes.

In cases like this, you're better of using a custom XML model binder.

To setup an XML model binder you need to create a model binder and a model binder provider. You then need to register the model binder provider in you app's startup.

XML Model Binder

using System;
using System.Web.Mvc;
using System.Xml.Serialization;

namespace XmlBinderExample.MVC.Extensions
{
    public class XmlModelBinder : IModelBinder
    {
        public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
        {
            var serializer = new XmlSerializer(bindingContext.ModelType);
            try
            {
                var boundModel = serializer.Deserialize(controllerContext.HttpContext.Request.InputStream);
                return boundModel;
            }
            catch (Exception e)
            {
                // Todo: Log this failed binding
                return null;
            }
        }
    }
}

XML Model Binder Provider

using System;
using System.Web;
using System.Web.Mvc;

namespace XmlBinderExample.MVC.Extensions
{
    public class XmlModelBinderProvider : IModelBinderProvider
    {
        public IModelBinder GetBinder(Type modelType)
        {
            var requestType = HttpContext.Current.Request.ContentType.ToLower();

            return (requestType == "application/xml"
                || requestType == "text/xml")
                       ? new XmlModelBinder()
                       : null;
        }
    }
}

Register the provider

In Global.asax modify your Application_Start method to include this extra line:

ModelBinderProviders.BinderProviders.Add(new XmlModelBinderProvider());

And you're done.

Mocking with NSubstitute

Wed, 09 Jan 2013 12:14:34 GMT

My previous C# mocking framework of choice was MOQ. It's very powerful and fairly easy to use, but I recently started using NSubstitute and fell in love with how easy and intuative it was to use.

The cleverest part is that unlike MOQ the mocks produced actually implement the interface they're mocking and this makes the code much clearer and a little bit shorter.

Here is a very simple example:

var mockThing = Substitute.For<IThing>();
mockThing.DoThingy().Returns("Something");

// Use mock thing
UseThing(mockThing);

In MOQ this is also quite straightforward but the setup code to change what a mocked method returns always had me reaching for Google.

var mockThing = new Mock<IThing>();
mockThing.Setup(m => m.Now()).Returns(new DateTime());

// Use mock thing
UseThing(mockThing.Object)

For a more complete comparison between Moq and NSubstutute you should read NSubstitute vs Moq. And, for a more detailed view of what NSubstitute can do you should read the getting started guide.

Moving from Subversion to Mercurial and Bitbucket

Fri, 09 Nov 2012 22:39:12 GMT

I've been using Mercurial for source control on my own small projects for a while and have really liked it. I've also wanted to stop supporting my own Subversion server, but previously I've found hosted solutions too expensive. That's why I like Bitbucket's pricing structure. I have lots of projects that need source control, but I either work alone or as part of a small team. Bitbucket charges by the team size, not the number of projects (which seems like a much better way to judge the budget of a project) and it's free for teams of 5 or under.

I've wanted to move my existing subversion projects over to Bitbucket, but I thought that keeping the revision history would be too difficult. Turns out that it was really simple.

Step 1: Enable hg convert
Assuming you've already installed mercurial command line or as I prefer Tortoise HG GUI on your computer you can enable this extension by finding mercurial.ini in your user directory and adding the following lines:
[extensions]
hgext.convert =
Step 2: Install hgsubvversion extension
The easiest way to do this is to clone the repository and copy the files into a folder here ~Program Files\TortoiseHg\extensions\hgsubversion
Step 3: Create a new mercurial repository in bitbucket
Use bitbucket's web interface to create a new repository.
Step 4: Clone this locally on your machine
Use either tortoise or the command line to clone this empty repository:
hg clone https://{bitbucket-username}@bitbucket.org/{bitbucket-username}/{bitbucket-repository-name} {local-directory-name}
Step 5: Get revisions from your subversion repository
Use the command line to use the convert extension, then update your local copy:
hg convert {svn-repository} {local-directory-name}
cd {local-directory-name}
hg update
Step 6: Push all these revisions to your bitbucket repository
hg push
Step 7: Set up aliases
The usernames used by Mercurial and Bitbucket will not match those imported from Subversion. The easiest way to fix this is using aliases in bitbucket. On the commits screen any unknown user has a little question mark by it. Clicking on that lets you alias that username to a Bitbucket user.

That's it.

The hg convert command can do fancier stuff, like renaming branches and changing usernames, but I've found that I don't really need that.

The Side Project Startup reading list

Tue, 06 Nov 2012 15:42:06 GMT

This is the reading list for my talk, 'The Side Project Startup. I last gave this talk at DDD North 2 and it's slowly evolving every time I give it. If you're interested in side projects and starting your own small software business then this reading list is for you.

Books

Blogs

The Lean Startup blog - Author of The Lean Startup
Sofware by Rob - Author of 'Start small stay small'
On Startups
A Smart Bear
Kalzumeus blog
Steve Blank
Single Founder

Reports

Developer Economics 2012

Videos

Lean Analytics

Podcasts

Record breaking fonts on vinyl

Tue, 06 Nov 2012 15:34:25 GMT

Font Sunday is a weekly twitter phenomena where the typographically obsessed share examples of fonts around them. The theme this week was 'Fonts on Vinyl' and this turned out to be a theme that got people excited and it was the most contributed to week we've ever had.

The Design Museum started Font Sunday and set the theme each week. I help out by collating the contributions on a Pinterest board.

Creating app bar buttons in WinRT

Mon, 24 Sep 2012 20:15:01 GMT

If you start a new blank Windows 8 App in Visual Studio you get loads of app bar button styles to choose from in StandardStyles.xaml including:

SkipBackAppBarButtonStyle, SkipAheadAppBarButtonStyle, PlayAppBarButtonStyle, PauseAppBarButtonStyle, EditAppBarButtonStyle, SaveAppBarButtonStyle, DeleteAppBarButtonStyle, DiscardAppBarButtonStyle, RemoveAppBarButtonStyle, AddAppBarButtonStyle, NoAppBarButtonStyle, YesAppBarButtonStyle, MoreAppBarButtonStyle, RedoAppBarButtonStyle, UndoAppBarButtonStyle, HomeAppBarButtonStyle, OutAppBarButtonStyle, NextAppBarButtonStyle, PreviousAppBarButtonStyle, FavouriteAppBarButtonStyle, PhotoAppBarButtonStyle, SettingsAppBarButtonStyle, VideoAppBarButtonStyle, RefreshAppBarButtonStyle, DownloadAppBarButtonStyle, MailAppBarButtonStyle, SearchAppBarButtonStyle, HelpAppBarButtonStyle, UploadAppBarButtonStyle.

If that list doesn't quite cover you then it's really easy to create a metro button style that will. The easiest way is to create a style based on AppBarButton and to use an icon from the font Segoe UI Symbol. The advantage of using a font is that it is automatically scaleable. Segoe UI Symbol has a lot of symbols for you to choose from and is the font used by AppBarButtonStyle, which we are basing our style on. You can use Character Map to find a good one, or I've included some of my favourites at the end of this post.

Here is my style for a crop button. Include this style in a resource dictionary that will be accessible to all the xaml files that need it:

The text in bold is the text you need to change to make different sorts of buttons. The Content property contains the hex unicode value for the font character you want to use as your icon. I wasn't aware of an accepted standard for a crop icon, so I found one that I thought worked pretty well.

To use this style on your button you just x like this:

Here is a table including most of the Segoe UI Symbols that you're likely to find useful:

Windows 8 Excellence Labs

Fri, 21 Sep 2012 10:50:42 GMT

Developing for a new platform, particularly one that's not finalised yet can come with a bit of a steep learning curve and a number of frustrating moments. It's also exciting and I can't wait for Windows 8 to come out and for my app Font Picker to be available in the new Windows Store. Something that has blown me away has been the support from Microsoft. The documentation is great, there have been roadshows and you could even get one on one time with a Microsoft engineer to fine tune your app and get it ready for the store. These were the slightly cheesily named 'Excellence Labs'.

The exciting promise of the excellence labs was that, if you passed, you'd get a developer token that would give you early access to the Windows Store before everyone else.

I took an early version of Font Picker for Windows 8 to Microsoft Reading in May and met with Richard Macdonald who gave me a full 4 hours of his time. Before I went I thought I was almost done. The only thing I wasn't happy with was my user interface. XAML gives you so much control over the appearance of your app that it's quite easy to make it look awful and that was what I'd done. So, I expected Richard to give me some UI tips and then hopefully say I could have an early access token on the condition that I improved the UI.

Instead, he raised the bar. It's incredibly useful to have an outside eye pass judgement over your work, but it's also quite annoying when you thought you were almost done. I had a great time in Reading. I got a lot of great advice and I got to see my app run on a tablet, where it almost immediately crashed because it used too much memory. That was embarrassing and obviously first on my list of things to fix. The problem with having a high powered dev machine is that it hides a multitude of sins. So, I left Reading with a long list of things to do and the promise of a second go at the test.

It took a while to implement all of Richard's recommendations and to sort out the UI. Font Picker was definitely in my mind finished now. So, I was excited while waiting for Richard to privately test it and then obviously just let me know that I could have my token. He found a UI bug, a really small one. A button remained disabled when it should have been enabled. The problem took 5 minutes to track down and fix, but that was my last chance with Richard. I was really annoyed with myself for not testing it better. I also need to find a way to automate UI testing in Windows 8.

All was not lost however, because you could apply for another excellence lab. I'd missed the deadline for the next ones but I got another go in August.

This time I talked to Hans Zeitler remotely (isn't the Internet fantastic) and he gave me over 2 hours of his time. Surely this time getting my token would be a breeze. My app was looking awesome and I'd done everything Richard told me too. But no, they raised the bar again. A fresh pair of eyes will always see new things and find new areas for improvement. Also, Hans told me that they'd learnt a lot since the early labs and they'd become a bit more strict.

My new list of recommendations was more difficult to implement than the first; in particular adding semantic zoom and not reintroducing the crashing bug I'd had in the first lab. By the time I'd done everything on my new list Font Picker was even more awesome, but the Windows Store had just been opened for everyone so I'd missed the boat on my token.

So now I'm just about to go through the store approval process and fingers crossed they'll think my app is as awesome as I do. Or, if experience has taught me anything, they'll probably raise the bar and force me make my app even more awesome.

WinRT GridView with inline group headers and semantic zoom

Sun, 09 Sep 2012 22:36:26 GMT

My Windows 8 app had a GridView with grouped content and also made nice use of semantic zoom to make navigating between those groups easy. All I wanted to do was to make the headers appear in the content like the People App. I thought this would be a simple case of finding the right container template to use, but after reading this post by Mike Taulty it turns out that using the group style built into GridView can't do this. His post goes into a lot of detail about how to figure out your XAML and shows a GridView with inline group headers. I've taken his method and extended it to include semantic zoom.

This is what we'll be creating:

This example is a simple app that uses a GridView to show the top 250 films grouped by year. I'll talk you through the steps but the source code is available on Bitbucket.

Final source code

I've also tagged the various versions with the steps I've gone through so you can see my example progress.

Step 1 - A GridView showing headers and items

To create a GridView with headers shown in the body of the GridView rather than above it, the headers need to be added as items to the GridView's ItemsSource list.

To manage the groups and the items I've created a GroupCollection<T> and Group<T> class. GroupCollection holds our groups of items, but also gives us access to a list of all items with the headers included. Feel free to use these classes and modify them if you need to, or just borrow the bits you need.

Setting up your grouped data

In App.xaml.cs create a static member variable to hold our film data

public static GroupCollection<Film> FilmData;

We then initialise this collection when the app loads:

IEnumerable<Film> films = CreateFilms();
FilmData = new GroupCollection<Film>(null, f => f.Year.ToString());
FilmData.AddItems(films);

The clever bit of GroupCollection is that it takes a lambda expression grouping rule which groups the items and gives those groups names. In this case we are grouping films by their year.

FilmData now has the following useful properties:

FilmData.Groups - A collection of all the groups containing our films
FilmData.ItemsWithHeaders - A collection of all the items with the groups included to server as headers

Displaying the films and group headers in a GridView

In our XAML page MainPage.xaml we set FilmData as the DataContext for the page and add a GridView bound to this list:

There is an item template for our Film item in MainPage's resource dictionary. I won't show it here, but it currently doesn't show our group headers well.

Source code: Source code for step 1

Step 2 - Headers with their own display templates

To display the film items and group headers differently we need to create a DataTemplateSelector that knows the difference between a film and a group of films. Here is an example of a DataTemplateSelector class which does the trick:

class ItemOrHeaderSelector : DataTemplateSelector
{
    public DataTemplate Group { get; set; }
    public DataTemplate Item { get; set; }

    protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
    {
        var itemType = item.GetType();
        var isGroup = itemType.Name == "Group`1" &&
            itemType.Namespace == "NogginBox.WinRT.Extra.Collections";

        // Disable headers so they can't be selected
        var selectorItem = container as SelectorItem;
        if (selectorItem != null)
        {
            selectorItem.IsEnabled = !isGroup;
        }

        return (isGroup) ? Group : Item;
    }
}

It also disables the item container for headers so you can't click on them. We then need to make our GridView use this DataTemplateSelector and create the two templates it selects. Modify the GridView code to this:

The selector and templates need to be included in the page's resource dictionary:

<Page.Resources>
  <ResourceDictionary>
    <DataTemplate x:Key="FilmHeader">
      <Border Margin="6" Width="250" Height="100">
        <TextBlock Text="{Binding Title}" Foreground="GreenYellow" FontSize="32" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center" />
      </Border>
    </DataTemplate>
    <DataTemplate x:Key="FilmItem">
      <Border Margin="6" Width="250" Height="100" Background="DarkSlateGray">
        <StackPanel>
          <HyperlinkButton NavigateUri="{Binding Link}">
            <TextBlock Text="{Binding Title}" Style="{StaticResource ItemTextStyle}"/>
          </HyperlinkButton>
          <TextBlock Text="{Binding Year}" Style="{StaticResource CaptionTextStyle}" Padding="20,0,0,0" />
        </StackPanel>
      </Border>
    </DataTemplate>
    <selectors:ItemOrHeaderSelector
    x:Key="FilmItemOrHeaderSelector"
      Item="{StaticResource FilmItem}"
      Group="{StaticResource FilmHeader}" />
  </ResourceDictionary>
</Page.Resources>

If all you want is a GridView showing groups with inline headers then we're done. Read on if you want to add semantic zoom.

Source code: Source code for step 2

Step 3 - Adding semantic zoom and linking the two views

The nice thing about a GridView using the grouped style is that semantic zoom just works. As we're not using the build in groups feature we need to do a little bit extra, but it's not too hard.

First we add the SemanticZoom control to MainPage.xaml:

Now we just need to link up the zoomed in and zoomed out view using the ViewChangeStarted event:

FilmZoom.ViewChangeStarted += OnZoomViewChanged;

And here is the code for that event:

private static void OnZoomViewChanged(object sender, SemanticZoomViewChangedEventArgs e)
{
if (e.SourceItem == null) return;

if (e.SourceItem.Item.GetType() == typeof(Film))
{
    var sourceFilm = (Film)e.SourceItem.Item;
    var fontsGroup = App.FilmData.GetGroupFor(sourceFilm);
    e.DestinationItem = new SemanticZoomLocation { Item = fontsGroup };
}

e.DestinationItem = new SemanticZoomLocation { Item = e.SourceItem.Item };
}

Now we've implemented semantic zoom and our two views are linked.

Source code: Source code for step 3

That's pretty much everything, but what if you've got some empty groups. My GroupCollection<T> class doesn't add these to the ItemsWithHeaders collection so they don't get shown in the zoomed in view. They are included in Groups so they'll be show in the zoomed out view. You might want to show them differently, which we'll cover in step 4.

Step 4 - Zoomed out view with different template for empty groups

My CollectionGroup<T> class will only create groups that are used by the items in it, but you can initialise it with a list of group names like this:

var films = CreateFilms();
var yearHeaders = Enumerable.Range(1912, 100).Select(t => t.ToString());
FilmData = new GroupCollection<Film>(yearHeaders, f => f.Year.ToString());
FilmData.AddItems(films);

We now have some empty groups so we can create a new DataTemplateSelector that chooses different templates based on whether the group is empty or not. Here is the template selector:

class EmptyOrFullSelector : DataTemplateSelector
{
public DataTemplate Full { get; set; }
public DataTemplate Empty { get; set; }

protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
{
    var groupItem = item as Group<Film>;
    var isEmpty = groupItem == null || groupItem.IsEmpty;

    // Disable empty items
    var selectorItem = container as SelectorItem;
    if (selectorItem != null)
    {
      selectorItem.IsEnabled = !isEmpty;
    }

    return (!isEmpty) ? Full : Empty;
}
}

Add this selector to the zoomed out GridView:

<SemanticZoom.ZoomedOutView>
<GridView ItemsSource="{Binding Groups}" ItemTemplateSelector="{StaticResource GroupTemplate}" />
</SemanticZoom.ZoomedOutView>

Now add the selector and templates to the page's resource dictionary:

And we're done.

Source code: Source code for step 4

Step 5 - ?

There's one last thing that I would like to do, but I've not figured out how yet. Sometime a header is the bottom item of a column and this doesn't look great. It would be nice to find a way to make sure that a header always has an item below it. I think the best way to do this would be to insert empty items in the list to stop headers being at the bottom of a column. I'd also like it to still work if items were removed from the list. Any ideas?

Drawing TEDx Bradford

Sat, 08 Sep 2012 08:57:15 GMT

I went to TEDx Bradford on Friday. I kept visual notes of the talks using Paper for iPad. I got better at using Paper with practice so my notes start to look better in the later talks. I had to leave a little bit early, so I didn't get to make notes on all the talks.

Tim O’Reilly

Jane MacDonald, Tales of Things & Electronic Memory

Mark Graham, Internet & information geographies

Maureen Pennock, Archiving the Web

Dominic Smith, Open source, Art & Wizardlyness

Dr Kieran Fenby-Hulse, The Modern Mixtape

My first Orchard Widget

Sat, 08 Sep 2012 08:55:49 GMT

When I first learnt ASP.NET I wrote a control for my website that told my visitors the weather I was currently experiencing. It was just a simple, fun project to help me learn. Now I’m using Orchard for my site I still want my visitors to know the weather I am experiencing. So this seemed like the ideal project for my first Orchard CMS module.

I wanted the module to display a widget that could be placed anywhere using Orchard’s new Widget Manager. At this point in time the documentation for making widgets isn’t complete and I’ve hit a few stumbling blocks along the way.

The first thing to realise is that a widget is just a content part with some simple extra bits, and there is a good tutorial on making content parts on the Orchard website. The simple extra bits are contained in the module’s data migration. This registers your content part as a widget when it is installed. The map module in the Modules gallery is an excellent source of code samples for this. It contains a simple Map content type which is also registered as a widget.

The next problem I hit was an unhelpful error message when I tried to install an early version of my module. The message just said ‘Some features need to be upgraded’. This was strange as this was the first time I’d tried to install it. I got some very useful advice on the discussion forum and finally found there was a problem with my data migration. I’d tried to use an unsigned integer and this was not supported by SQL Server.

A content part has a driver. This is a bit like a controller, but just for a part of the page. My widget displays the current weather based on a feed provided by BBC Backstage. The driver is the bit that queries this feed, populates a model and then passes this to view.

That’s the display part of the driver. The driver also controls editing the widget and mine allows the site administrator to change the place where the current weather is shown for.

When my module was finished and I wanted to deploy it on my real site I came across the dreaded ‘Some features need to be upgraded’ message again. It took me a while to work out that I hadn’t set all the permissions right on my live server. The IIS_IUSRS account needs write access to the App_Data folder and the data base user needs db_ddladmin rights so it can alter the data base. Mine didn’t have these because I’d moved the files and database from my test server. If I’d installed Orchard on the live server I would have realised earlier that these permissions were missing.

As I’m querying a web service and the data doesn’t change very often it makes sense to cache the response I’m getting. This is next on my list once I’ve figured out how Orchard Caching works.

You can see this widget on my homepage. I will probably leave it at this stage, but if I was to continue work on it, I would turn it into a more generic weather forecast module. Perhaps a holiday camp site would find it useful to display the forecast for their camps. I also like the idea of changing the CSS for the whole site based on the weather. I could have a sunny and cloudy site design that changed depending on the weather.

I’ve got some more module ideas for Orchard that I’m hoping to put in module gallery. Now I get the basics there’s nothing stopping me.

Mmmmm, Easter egg

Sat, 08 Sep 2012 08:55:01 GMT

For a long time I've felt the Easter eggs you buy in the shops were missing something. There's never enough chocolate, and when I was a kid, the chocolate treats used to be inside.

This year I decided to make my own. I made a mould out of paper mache and cling-film and coated the inside with chocolate, a lot of chocolate. The finished product was fantastic. It looks a bit like a dinosaur egg, which wasn't quite what I intended, but I think it adds to its charm.

Next year, I might try and perfect the mould to get a smoother outside. I might also try and make it twice as big. Mmmmmmmmm, chocolate!

Making a noise at Thwaite Mill

Sat, 08 Sep 2012 08:54:28 GMT

I've just recently started leading another art project. This time I'm working with the adult group from Pyramid of Arts. The BBC have very kindly leant us some sound recording equipment. We've used this to record some sounds and we're going to splice them together into something musical.

We spent the first few weeks of the project exploring sound. Making it, listening to it, drawing it and recording it. We've just got back from a sound recording trip to Thwaite Mill. We recorded a huge array of sounds made by the mill and pretty much anything else we could find that made sounds.

So, now we've got all our sounds, we just need to put them together into something musical. The difficult part is not going to be finding good sounds, it's going to be choosing the best ones from the hundreds we've got.

A quick project. Is there a strike?

Sat, 08 Sep 2012 08:53:30 GMT

This was just a little Sunday project inspired by the number of strikes we’ve been having and the isitchristmas.com website. Isthereastrike.co.uk lists organisations that have been experiences strikes and then has a simple yes/no page for each one.

As the site is very simple it was also a nice test bed for a few things I’ve been learning about lately. It runs on ASP.NET MVC (it may be the simplest MVC site ever), has an Entity Framework data model keeping track of the strikes and has a Dynamic Data admin section.

There is a small unit test for the project using xUnit and I’m going to try using an IOC container to allow me to test the data filtering. It’s overkill, but a good way to learn.

Perhaps people will even find it useful, but I’m really hoping that all the strikes (particularly Leeds Bin Strike) will be sorted out soon.

Update: The Leeds bin strike was sorted. However the administrative burden of keeping strike information updated proved a bit too much for me. I never realised strikes change so often. So the site's not currently maintained, and probably won't be unless someone fancies taking it on.

Update 2: Isthereastrike.co.uk ran its course and I didn't renew the domain.

Our sculpture on Google Earth

Sat, 08 Sep 2012 08:50:00 GMT

I've made a 3D model of Pyramid of Arts' sculpture at Thwaite Mill. Pyramid of Arts is an arts charity bringing together artists with and without learning disabilities to work on large scale arts projects.

I wanted to have an experiment with creating 3D models in Sketch-up and see if I could get it added to Google Earth. Google Earth is a program by Google that displays pictures of the whole world and 3D models of some of it.

Pyramid made this sculpture about 3 years ago and had just finished it when I joined. It's Pyramid's first permanent work, so it would be really nice if it could be added to Google Earth. Hopefully more people will get to enjoy it that way.

I've submitted it to Google Earth, but it needs to be popular to get added so everyone can see it. Please visit it and vote for it.

Thwaite Mill Sculpture for Google Earth

For more information about Pyramid of Arts and this particular sculpture project, you may find the following links interesting:

Happy 21st for Pyramid of Arts at Light Night Leeds

Fri, 07 Sep 2012 09:30:17 GMT

Here is a guest post I wrote for The Guardian Leeds Blog:

Happy 21st for Pyramid of Arts at Light Night Leeds

Videos about Orchard

Fri, 07 Sep 2012 09:29:43 GMT

Bradley Millington recently talked at Tech Ed Europe about Orchard. His first talk introduced Orchard CMS and its features. In the second he went into more depth about how to extend Orchard. If you've not heard of Orchard before these two videos are a great way to get up to speed.

Building websites with Orchard

View and download Building websites with Orchard files.

Deep dive into Orchard extensibility

View and download Deep dive into Orchard extensibility files.

Be in the Simpsons

Fri, 07 Sep 2012 09:26:34 GMT

This is my favourite recent discovery. A fantastic site for the new Simpsons Movie. The site is so good that I may go and see the film again.

The site is full of brilliant ideas and lots of cool games to play.

The part that has captured my imagination most is the create your own Simpsons character bit. Once you've made one, there are lots of ways to share it with your friends. What a brilliant piece of personalised viral marketting.

Here is my attempt, although I couldn't quite get the hair right.