Gorgeously simple – part 3

To wrap up this brief series of demonstrations, I’m just going to glue the previous two posts together to show you something that made me go ‘wow’

We’ve looked at how to display an object, and how to display a list of objects on a window using a DataTemplate and some simple DataBinding.

Put these two concepts together, mix it up with WPF’s ‘Current Item’ functionality and what have you got? A super-simple Master-Detail page…

1. Using the DataTemplates defined in the previous posts, split the Window’s main grid into two; put the list on the left hand side, then the detail in the right

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <ListBox
        Grid.Column="0"
        IsSynchronizedWithCurrentItem="True"
        ItemsSource="{Binding}" ItemTemplate="{StaticResource bookListItemTemplate}"
        HorizontalContentAlignment="Stretch" />
    <ContentPresenter
        Grid.Column="1" Margin="4"
        Content="{Binding}" ContentTemplate="{StaticResource bookTemplate}" />
</Grid>

2. Remark upon how Robert is your Father’s Brother… It truly is that easy.

So how do you refresh the ContentPresenter with the data  from the selected item from the list on the left-hand side? You absolutely don’t need to… Synchronising the ‘current item’ with the ListBox does all the work for you… cool eh?

One last thing: Notice how we’ve bound the ItemsSource to the DataContext of the ListBox (and, by extension since the DataContext is not explicitly set, the DataContext of the Window)? This is (from the previous post) a list of books, which appears in the list box exactly as one would expect.

Now notice how we have bound the Content of the ContentPresenter to exactly the same object (i.e. a list of books)? The ContentPresenter is smart enough to work out that it can only cope with one thing at a time, so it simply takes the current item out of the list and presents that…

Master-detail pages have never been so simple…

Gorgeously simple – part 2

Remember how easy it is to display ‘something’ in WPF? Well, what if you’ve got a whole list of stuff? no probs…

1. Create a real simple DataTemplate, similar to last time…

        <DataTemplate DataType="{x:Type local:Book}" x:Key="bookListItemTemplate">
            <DockPanel>
                <TextBlock DockPanel.Dock="Right" Width="60" Text="{Binding StringFormat={}{0:yyyy}, Path=FirstPublished}" />
                <TextBlock>
                    <TextBlock.Text>
                        <MultiBinding StringFormat="{}{0}, {1}">
                            <Binding Path="Title" />
                            <Binding Path="Author" />
                        </MultiBinding>
                    </TextBlock.Text>
                </TextBlock>
            </DockPanel>
        </DataTemplate>

2. Set the DataContext to be a list of our stuff… anything that implements the IList interface will do… List<T> is the easiest for demonstration purposes (more on this later)

            IList Books = new List<Book>
            {
                new Book
                {
                    Author = "Orson Scott Card",
                    Title = "Ender's Game",
                    FirstPublished = new DateTime(1977, 08, 01),
                    Publisher = "Tor books"
                },
                new Book
                {
                    Author = "Terry Pratchett",
                    Title = "Mort",
                    FirstPublished = new DateTime(1987, 01, 01),
                    Publisher = "Victor Gollancz"
                },
                new Book
                {
                    Author = "Truman Capote",
                    Title = "In Cold Blood",
                    FirstPublished = new DateTime(1966, 01, 01),
                    Publisher = "Random House"
                }
            };
            this.DataContext = Books;

3. Throw the list onto the View in an items presenter…

    <ListBox
        ItemsSource="{Binding}" ItemTemplate="{StaticResource bookListItemTemplate}"
        HorizontalContentAlignment="Stretch" />

Seriously, what could be simpler? Isn’t WPF stunning? notice how I have deliberately not introduced glimmering shadow effects or animations to spin the controls into place? WPF is not (only) ‘eye-candy’… the aesthetic beauty comes from the delicious simplicity with which we can generate ultra-powerful user interfaces, in order to deliver pleasurable user-experiences…

I just love it

Gorgeously simple – part 1

Adding a ‘thing’ to a View in WPF is deliciously simple…

Step 1.
Define your thing

public class Book
{
    public string Title { get; set; }
    public string Author { get; set; }
    public DateTime FirstPublished { get; set; }
    public string Publisher { get; set; }
}

Step 2.
Define the WPF template for presenting this thing to the world…

        <DataTemplate DataType="{x:Type local:Book}" x:Key="bookTemplate">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="30" />
                    <RowDefinition Height="30" />
                    <RowDefinition Height="30" />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100" />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>

                <TextBlock Grid.Row="0" Grid.Column="0" Text="Title" />
                <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Title}" />

                <TextBlock Grid.Row="1" Grid.Column="0" Text="Author" />
                <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Author}" />

                <TextBlock Grid.Row="2" Grid.Column="0" Text="Published" />
                <TextBlock Grid.Row="2" Grid.Column="1">
                    <TextBlock.Text>
                        <MultiBinding StringFormat="{}{0} ({1:MMM yyyy})">
                            <Binding Path="Publisher" />
                            <Binding Path="FirstPublished" />
                        </MultiBinding>
                    </TextBlock.Text>
                </TextBlock>
            </Grid>
        </DataTemplate>

Step 3.
Set the DataContext of your view to be an instance of your thing…

public Window1()
{
    InitializeComponent();
    this.DataContext = new Book
    {
        Author = "Orson Scott Card",
        Title = "Ender's Game",
        FirstPublished = new DateTime(1977, 08, 01),
        Publisher = "Tor books"
    };
}

Step 4.
Just chuck your thing on the screen…

        <ContentPresenter Content="{Binding}" ContentTemplate="{StaticResource bookTemplate}" />

Content="{Binding}" means just use the object set as the DataContext, and ContentTemplate="{StaticResource bookTemplate}" means use the template called ‘bookTemplate’ to render the thing…

and you see…

Salesforce Studio

I’ve been using force.com as a development platform for over a year now, and quite frankly the development experience is as bad as it’s always been. The Eclipse plug-in, whilst now being officially supported by Salesforce.com, still delivers a very poor development experience. Too many functions rely too heavily on lengthy, synchronous operations to work, namely:

• Saving code to the salesforce server
• Loading code in the editor – just double-clicking the filename in the project explorer can result in a 10 second delay whilst Eclipse heads off to San Francisco to check for code-differences… My code is synchronised with TFS (via a nice extension called Teamprise) so I don’t care if it’s in sync with the sandbox or not – I can deploy the whole code-base up to the sand box if I want!
• Intellisense – this was a recent addition to the toolkit (and it was hateful not having it) but Ctrl+Space can mean another 10-second delay whilst it sorts out its dictionary and works out what words to offer up in auto-complete. Sometimes it doesn’t offer any choices when you know there should be some… I have learnt that placing a space immediately after an opening parenthesis for a method call gives me a much greater chance of having intellisense offer anything up at all – but then I waste clicks and keystrokes tidying up the meaningless spaces, because I’m so pedantic about the aesthetics of my code…

So anyway, my plans to write an IDE continue apace – nothing in the Eclipse/supporting offerings world has diverted me from this task.

What *has* diverted me from this task, however, is the small matter of a brand shiny new IDE called Visual Studio 2010 and the release of .net 4.0 beta. Like a magpie I have chased the shiny new stuff without a moment’s thought for the tatty old rubbish left behind… this is why in the real world, developers need project managers, but hey – this isn’t the real world, it’s my pet project, so I get to make these calls

So the scope of the assignment hasn’t really changed – I still want a text editor that is lean and responsive – I’m only trying to write text to my c: drive for goodness sake – one that can take a process that is potentially lengthy, like deploying code to a web service, and run them asynchronously to ensure the application retains that responsiveness.

But the subtle difference in the technology stack is that I’m targeting .net 4.0 (not 3.5), and I’ve also found a couple of really nice open-source projects that will help me no end.

AvalonDock is a window-docking solution, that offers drag-and-drop, window splitting and more with a clean API; AvalonEdit is part of SharpDevelop, a full open-source IDE that has about a gazillion features and attempts to be an open-source Visual Studio replacement… I just need the text editor, thank you

I’ve also signed in blood to get the binaries for the WPFRibbon – Microsoft are just sorting their shit out between the Office team and the developer teams.. I’m reasonably sure the Ribbon will become a standard control, baked into Studio at some stage in the future, so I think I can screen-shot the work I’ve done with it, but if not, they can always repossess my house or whatever…

So here’s a sneak-peak at a vanilla, style-less version of the product so far…