Hibernating Rhinos

Fade-Trimming TextBlocks in Silverlight and WPF

Mon, 12 Mar 2012 10:00:00 GMT

This is a guest post by Samuel Jack, who had done a lot of work on the new UI for RavenFS.

Using ellipsis is so last year. When did you last see the cool HTML 5 kids writing … when they couldn’t fit all their text in a column? They’ve got this fancy new feature, powered by CSS3, where text that doesn’t quite fit simply fades out as it reaches the edge of the text block. Like this (with thanks to the QuickUI Catalog)

Subtle! It looks much prettier, and it means you can fit in an extra three characters of real text instead of the …s.

Silverlight’s future might be uncertain, but I want to show you that it isn’t ready to roll over and die just yet. We can have those fancy fade-trimming effects too!

As part of the work I’m doing on the UI for RavenFS I implemented Fade-trimming to make our DataGrids look smarter, and I thought it would be nice to share. So I’ve packaged up all you need it into an easy-to-use class called FadeTrimming.cs which works in Silverlight and WPF, and given you two demo projects to show you how to get started.

How to use it

Include the FadeTrimming.cs file in your project. Add a namespace reference in the root element of your XAML file like this:

<Window x:Class="FadeTrimmingDemo.Wpf.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        
        xmlns:b="clr-namespace:SilverlightEffects"
        
        Title="MainWindow" Height="350" Width="525">

You can then enable Fade Trimming on individual TextBlocks like this:

<TextBlock b:FadeTrimming.IsEnabled="True">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</TextBlock>

or using a Style, like this:

<Style x:Key="Style_TextBlock_FadeTrimming" TargetType="TextBlock">
    <Setter Property="b:FadeTrimming.IsEnabled" Value="True"/>
</Style>

If you want to use it in a column of a DataGrid, try this:

<sdk:DataGridTemplateColumn Header="Name" Width="*">
     <sdk:DataGridTemplateColumn.CellTemplate>
         <DataTemplate>
             <TextBlock Text="{Binding Item.Name}" 
                        b:FadeTrimming.IsEnabled="True" 
                        b:FadeTrimming.ShowTextInToolTipWhenTrimmed="True"
                        VerticalAlignment="Center"
                        Margin="4"/>
         </DataTemplate>
     </sdk:DataGridTemplateColumn.CellTemplate>
 </sdk:DataGridTemplateColumn>

This last example shows another useful feature. Set b:FadeTrimming.ShowTextInToolTipWhenTrimmed="True", and when the text is trimmed, the TextBlock will automatically start showing the full text in its tool tip.

A couple of things to note:

If TextBlock.TextWrapper is set to NoWrap, then the TextBlock will be fade-trimmed on the left. Otherwise, when text wrapping is switched on, it will be fade-trimmed at the bottom.
You’ll probably want to set TextOptions.TextHintingMode=”Animated”. Otherwise there’s a strange rendering glitch in Silverlight where the font appears darker when it is fade-trimmed. I don’t think my code’s to blame: it seems to happen whenever text is rendered using anything other than a SolidColorBrush. TextHintingMode is an inherited property, so you can set it on a root element and it will flow to the children.
When TextBlocks are used in certain places (e.g. as direct children of Grids, with GridSplitters involved) they don’t seem to get the events they need to know when to update the Fade Trimming. The solution is to wrap the TextBlock in another element, usually a Border, and then everything works as it should.

How it works

There are two key ingredients to this fade-trimming trick:

Knowing when and where the TextBlock has been clipped
Setting the TextBlock’s Foreground brush to a LinearGradientBrush that fades to transparent just before the clip boundary.

Finding out if and how an element has been clipped in Silverlight turns out to be very easy. You just call

var layoutClip = LayoutInformation.GetLayoutClip(_textBlock);

layoutClip will be null if the element is not clipped. Otherwise its Bounds property will be set to a rectangle outlining the visible area of the element.

Fading at the edges

Setting up the TextBlock’s Foreground Brush is slightly more involved. Here’s how we do it for a horizontally clipped TextBlock:

private LinearGradientBrush GetHorizontalClipBrush(double visibleWidth)
{
    return new LinearGradientBrush
    {
        // set MappingMode to absolute so that
        // we can specify the EndPoint of the brush in
        // terms of the TextBlock's actual dimensions
        MappingMode = BrushMappingMode.Absolute,
        StartPoint = new Point(0, 0),
        EndPoint = new Point(visibleWidth, 0),
        GradientStops =
            {
                new GradientStop()
                    {Color = _foregroundColor, Offset = 0},
                new GradientStop()
                    {
                        Color = _foregroundColor,
                        // Even though the mapping mode is absolute,
                        // the offset for gradient stops is always relative with
                        // 0 being the start of the brush, and 1 the end of the brush
                        Offset = (visibleWidth - FadeWidth)/visibleWidth
                    },
                new GradientStop()
                    {
                        Color = Color.FromArgb(0, _foregroundColor.R, _foregroundColor.G, _foregroundColor.B),
                        Offset = 1
                    }
            }
    };
}

First we create a LinearGradientBrush and set its MappingMode to BrushMappingMode.Absolute. This allows us to set the StartPoint and EndPoint in terms of coordinates on the TextBlock itself. We set StartPoint to the top left corner of the TextBlock, and EndPoint to the edge of the visible region.

Then we set three GradientStops, the first two in the solid foreground color, and the last one, at the edge of the clipping region, completely transparent. One oddity with GradientStops is that even though the brush mapping mode is Absolute their values are still relative – but relative to the StartPoint and EndPoint of the brush. So Offset = 0 maps to the StartPoint of the Brush, and Offset = 1 maps to the end point of the brush. We want the fade to start a few pixels in from the edge of the visible area, so we set the Offset of the second GradientStop to (visibleWidth - FadeWidth)/visibleWidth.

Other points of interest

There are a couple of other points of interest, if you fancy inspecting the code.

One is that the clipping requirements of the TextBlock can change for many reasons. It could change because the length of the text changing, or because the font size or style changes, or because the size of the text block itself changes (imagine it is in a column of a DataGrid that the user is expanding or contracting). Whenever any of these changes occur, we need to update our special Foreground brush so the gradient fades out at the right point.

It turns out that we can handle all of these cases just by listening for the SizeChanged event on the TextBlock and of its visual parent. Note that the visual parent is not the one you obtain by calling TextBlock.Parent. That gets you the logical parent (see here to understand the difference). To get the Visual parent you call VisualTreeHelper.GetParent(_textBlock).

Before I hit on the trick of using the Foreground brush, I tried implementing this using OpacityMasks. That worked too, but it was horribly slow once you enabled fade-trimming on any significant number of TextBlocks. But that is only to be expected when you remember how OpacityMasks work. An OpacityMask is a Brush from which Silverlight extracts just the Alpha channel. To display an element with an OpacityMask, Silverlight first has to render everything behind the element, then it has to render the element (and each of its children), then finally it has to composite the two pixel-by-pixel, giving each pixel of the element the transparency determined by the corresponding pixel in the OpacityMask brush. And none of that work is hardware accelerated. OpacityMasks are great, but only when used sparingly.

Give it a go. I’d love to hear how it works out for you.

Fixing memory leaks in RavenDB Management Studio–BindableCollection

Wed, 29 Feb 2012 10:00:00 GMT

Continuing on my last blog post in this series, which I talked about the WeakReference, that time I’ll talk about the BindableCollection.

One the key goals of the new RavenDB Management Studio was to never show an old data in the studio that it’s already obsolete by the server. Say a documents was deleted/updated in the server, you want to see this change in the Management Studio immediately (or at least a few seconds later). We came up with an interesting solution for that. Each model has TimerTickedAsync method which is called both by some update event like delete a document on the studio or by a timer of 5 seconds in order to fetch changed occurred on the server. Now we need to merge the new data with the old data, remove the expired items and render the new once, but we better not render the staff that haven't been changed on a timer basis. So this is the code that we came with in order to do the range:

public class BindableCollection<T> : ObservableCollection<T> where T : class
{
    private readonly Func<T, object> primaryKeyExtractor;
    private readonly KeysComparer<T> objectComparer;

    public BindableCollection(Func<T, object> primaryKeyExtractor, KeysComparer<T> objectComparer = null)
    {
        if (objectComparer == null)
            objectComparer = new KeysComparer<T>(primaryKeyExtractor);
        else
            objectComparer.Add(primaryKeyExtractor);
        
        this.primaryKeyExtractor = primaryKeyExtractor;
        this.objectComparer = objectComparer;
    }

    public void Match(ICollection<T> items, Action afterUpdate = null)
    {
        Execute.OnTheUI(() =>
        {
            var toAdd = items.Except(this, objectComparer).ToList();
            var toRemove = this.Except(items, objectComparer).ToArray();

            for (int i = 0; i < toRemove.Length; i++)
            {
                var remove = toRemove[i];
                var add = toAdd.FirstOrDefault(x => Equals(ExtractKey(x), ExtractKey(remove)));
                if (add == null)
                {
                    Remove(remove);
                    continue;
                }
                SetItem(Items.IndexOf(remove), add);
                toAdd.Remove(add);
            }
            foreach (var add in toAdd)
            {
                Add(add);
            }

            if (afterUpdate != null) afterUpdate();
        });

        if (afterUpdate != null) afterUpdate();
    }
    ...
}

Note that the match method is effectively remove/add just what that is needed.

Later on, we started use the Reactive Extensions’ Observable pattern in order to register to some events, and this made some of our main models to be a disposable one.

So now, we had lots of models that was created by the TimerTickedAsync but never got used in any manner. Those object was held in memory since they were registered to an events outside of the class but never got disposed (dispose unregister those events).

So this fixed it:

public void Match(ICollection<T> items, Action afterUpdate = null)
{
    Execute.OnTheUI(() =>
    {
        var toAdd = items.Except(this, objectComparer).ToList();
        var toRemove = this.Except(items, objectComparer).ToArray();
        var toDispose = items.Except(toAdd, objectComparer).OfType<IDisposable>().ToArray();

        for (int i = 0; i < toRemove.Length; i++)
        {
            var remove = toRemove[i];
            var add = toAdd.FirstOrDefault(x => Equals(ExtractKey(x), ExtractKey(remove)));
            if (add == null)
            {
                Remove(remove);
                continue;
            }
            SetItem(Items.IndexOf(remove), add);
            toAdd.Remove(add);
        }
        foreach (var add in toAdd)
        {
            Insert(0, add);
        }
        foreach (var disposable in toDispose)
        {
            disposable.Dispose();
        }

        if (afterUpdate != null) afterUpdate();
    });
}

Now we dispose all the objects that was created on the fly and not needed anymore.

Fixing memory leaks in RavenDB Management Studio - FluidMoveBehavior

Tue, 28 Feb 2012 10:00:00 GMT

Continuing on my last blog post in this series, which I talked about the WeakReference, that time I’ll talk about the FluidMoveBehavior.

The FluidMoveBehavior gives you a great transition effect to the items in your WrapPanel, which is in the Silverlight toolkit. The FluidMoveBehavior is part of the Expression Blend and it’s exists in the microsoft.expression.interactions.dll.

When I profiled the application with a memory profiler, I have some memory leaks that caused by the FluidMoveBehavior. Surprised I Googled the following “FluidMoveBehavior memory leak” and the first result was this thread, which effectively showed that this is a known issue with no fix yet.

So removing the FluidMoveBehavior from the Management Studio fixes a big source of memory leak. What’s interesting, that the visual effect itself of the FluidMoveBehaviour barley was needed, since we already populating the panel with items each time the panel size is changed.

Fixing memory leaks in RavenDB Management Studio - WeakReference

Mon, 27 Feb 2012 10:00:00 GMT

Continue from the last blog post in this series, which I talked about the WeakEventListener, now I’m going to talk about using the WeakReference.

In the RavenDB Management Studio we have 4 pages that contains lots of data: the Home page, Collections page, Documents page and Indexes page. Once you enter to one of those pages, we’ll fetch the data from the RavenDB database but in order to avoid fetching it each time we navigate to that page the data is stored in a static variable. This way, if you re-navigate to a page, you will see the database immediately while we making a background request to RavenDB in order to give you more updated data.

You can look on this code for example:

public class HomeModel : ViewModel
{
    public static Observable<DocumentsModel> RecentDocuments { get; private set; }

    static HomeModel()
    {
        RecentDocuments = new Observable<DocumentsModel>
                          {
                            Value = new DocumentsModel
                                    {
                                        Header = "Recent Documents",
                                        Pager = {PageSize = 15},
                                    }
                          };
    }

    public HomeModel()
    {
        ModelUrl = "/home";
        RecentDocuments.Value.Pager.SetTotalResults(new Observable<long?>(ApplicationModel.Database.Value.Statistics, v => ((DatabaseStatistics)v).CountOfDocuments));
        ShowCreateSampleData = new Observable<bool>(RecentDocuments.Value.Pager.TotalResults, ShouldShowCreateSampleData);
    }

    public override Task TimerTickedAsync()
    {
        return RecentDocuments.Value.TimerTickedAsync();
    }
}

The problem is, what happening when the application consumes to much memory because of all of this static data? In that case there likely to be a performance issues. In order to avoid that, we used make static data to be a WeakReference type, so we basically say to the Silverlight GC engine: If you want to GC the data, please do so. And in this case we’ll just re-initialize it when we need the data again.

This had an huge impact of the memory consumption of the Management Studio application, but we still had some memory leaks which I’ll talk about in the next blog post.

Why make WeakEventListener internal?

Fri, 24 Feb 2012 10:00:00 GMT

In the previous post I described how I used the WeakEventListener from the Silverlight Toolkit in order to solve a memory leak. This class is a very needed tool, and it’s something that is recommended to use in Silverlight applications, in order to avoid memory leaks.

Since this class is internal, you must copy the code from the source (thanks to the Microsoft Public License) to your Silverlight application. I’m not sure if this is still the case in the last version of the toolkit, which is compatible with Silverlight 5 (the source code for this is not public when I wrote this), but in any case, if you’re developing a Silverlight application, I’m pretty sure that you’ll need this class.

Fixing memory leaks in RavenDB Management Studio - WeakEventListener

Thu, 23 Feb 2012 06:22:00 GMT

After shipping the new version of the Management Studio for RavenDB, which was part of build #573, we got reports from our users that it have some memory leaks. This report indicated that we have an huge memory leak in the management studio. I started to investigate this and found a bunch problems with cause it. In this blog posts series I’ll share with you what it took to fix it.

RavenDB Management Studio is a Silverlight based application. One of the mistakes that can be done easily in a Silverlight application (as many other platforms for UI applications) is to attach an event to an object, than discard that object. The problem is that the object will never be cleaned up from the memory, since we have a reference for it – the event listener.

Consider the following code for example:

public static class ModelAttacher
{
    public static readonly DependencyProperty AttachObservableModelProperty =
        DependencyProperty.RegisterAttached("AttachObservableModel", typeof(string), typeof(ModelAttacher), new PropertyMetadata(null, AttachObservableModelCallback));
    
    private static void AttachObservableModelCallback(DependencyObject source, DependencyPropertyChangedEventArgs args)
    {
        var typeName = args.NewValue as string;
        var view = source as FrameworkElement;
        if (typeName == null || view == null)
            return;

        var modelType = Type.GetType("Raven.Studio.Models." + typeName) ?? Type.GetType(typeName);
        if (modelType == null)
            return;

        try
        {
            var modelInstance = Activator.CreateInstance(modelType);
            var observableType = typeof(Observable<>).MakeGenericType(modelType);
            var observable = Activator.CreateInstance(observableType) as IObservable;
            var piValue = observableType.GetProperty("Value");
            piValue.SetValue(observable, modelInstance, null);
            view.DataContext = observable;

            var model = modelInstance as Model;
            if (model == null) 
                return;
            model.ForceTimerTicked();

            SetPageTitle(modelType, modelInstance, view);
            
            view.Loaded += ViewOnLoaded;
        }
        catch (Exception ex)
        {
            throw new InvalidOperationException(string.Format("Cannot create instance of model type: {0}", modelType), ex);
        }
    }
    
    private static void ViewOnLoaded(object sender, RoutedEventArgs routedEventArgs)
    {
        var view = (FrameworkElement)sender;
        var observable = view.DataContext as IObservable;
        if (observable == null)
            return;
        var model = (Model)observable.Value;
        model.ForceTimerTicked();

        var viewModel = model as ViewModel;
        if (viewModel == null) return;
        viewModel.LoadModel(UrlUtil.Url);
    }

For information about the ModelAttacher pattern, take a look on this blog post.

What it means basically is that we creating a models for each page, but never dispose it. So basically each time you navigate to a page, a new view model is created for the page but the old one never got cleaned up.

There was more examples like that, where we have an event keeping a reference to a dead objects. You can look on the RavenDB commits log if you interested in the details. But what is the way to solve this?

In order to solve this I copy the WeakEventListener from the Silverlight Toolkit, which is internal class. Using the WeakEventListener in order to attach to objects solved the above memory issue since we don’t have a strong reference to the dead object anymore, and the GC can just clean them up.

Stress testing RavenDB

Fri, 10 Feb 2012 10:00:00 GMT

The following is cross posted from Mark Rodseth’s blog (he also posted a follow up post with more details).

Mark is a .Net Technical Architect at a digital agency named Fortune Cookie in London. I would like to take the opportunity and thank Mark both for the grand experiment about which you are about to read and for the permission to post this in the company blog.

Please note: Mark or Fortune Cookie are not affiliated with either Hibernating Rhinos or RavenDB in any way.

When a colleague mentioned RavenDB to me I had a poke around and discovered that it was one of the more popular open source NoSQL technologies on the market. Not only that but it was bundled with Lucene.Net Search making it Document Database coupled with Lucene search capabilities. With an interest in NoSQL technology and a grudge match that hadn’t been settled with Lucene.Net, I set myself the challenge to swap out our SQL Search implementation with RavenDB and then do a like for like load test against the two search technologies.
These are my findings from both a programmatic and performance perspective.

Installing RavenDB
There isnt much to installing Raven and its pretty much a case of downloading the latest build and running the Server application.
The server comes with a nice Silverlight management interface which allows you to manage all aspects of Raven Db from databases to data to indexes. All tasks have a programmatic equivalent but a decent GUI is an essential tool for noobs like myself.

Storing the Data
My first development task was to write an import routine which parsed the property data in SQL and then add it into a Raven Database. This was fairly easy and all I needed to do was to create a POCO, plug it with data from SQL and save it using the C# Raven API. The POCO serialised into JSON data and saved as a new document in the RavenDB.

The main challenge here was changing my thinking from relational modelling to domain driven modelling - a paradigm shift required when moving to NoSQL - which includes concepts like aggregate roots, entities and value types. Journeying into this did get a bit metaphysical at times but here is my understanding of this new fangled schism.

Entity - An entity is something that has a unique identity and meaning in both the business and system context. In the property web site example, a flat or a bungalow or an office match these criteria.

Value Type - Part of the entity which does not require its own identity and has no domain or system relevance on its own. For example, a bedroom or a toilet.

Aggregate Root - Is an master entity with special rules and access permissions that relate to a grouping of similar entities. For example, a property is an aggregate of flats, bungalows and offices. This is the best description of these terms I found.

Hibernating Rhinos note: With RavenDB, we usually consider the Entity and Aggregate Root to be synonyms to a Document. There isn’t a distinction in RavenDB between the two, and they map to a RavenDB document.

In this example, I created one Aggregate Root Entity to store all property types.

C# Property POCO

Indexing the Data
Once the Data was stored it needed to be indexed for fast search. To achieve this I had to get to grips with map reduce functions which I had seen around but avoided like the sad and lonely looking bloke** at a FUN party.
The documentation is pretty spartan on the RavenDB web site but after hacking away I finally created an index that worked on documents with nested types and allowed for spatial queries.
RavenDB allows you to create indexes using Map Reduce functions in LINQ. What this allows you to do is create a Lucene index from a large, tree like structure of data. Map reduce functions give you the same capability as SQL using joins and group by statements. To create a spatial index which allowed me to search properties by type and sector (nested value types) I created an index using the following Map Reduce function.

Index created using the Raven DB Admin GUI

Hibernating Rhinos note: a more efficient index would likely be something like:

from r in docs.AssetDetailPocos
select new
{
  sectorname = r.Sectors,
  prnlname = r.AddressPnrls,

  r.AssetId,
  r.AskingPrice,
  r.NumberOfBedrooms,
  r.NumberOfBathRooms,
  
  
  _ = SpatialIndex.Generate(r.AssetLatitude, r.AssetLongitude)
}

This would reduce the number of index entries and make the index smaller and faster to generate.

Querying the data

Now that I had data that was indexed, the final development challenge was querying it. RavenDB has a basic search API and a Lucene Query API for more complex queries. Both allow you to write queries in LINQ. To create the kind if complex queries you would require in a property searching web site, the API was a bit lacking. To work around this I had to construct my own native Lucene queries. Fortunately the API allowed me to do so.

Performance Testing

All the pawns were now in place for my load test.

The entire property SQL database was mirrored to RavenDB.
The Search Interface now had both a SQL and a RavenDB implementation.
I created a crude Web Page which allowed switching the search from SQL to RavenDB via query string parameters and output the results using paging.To ensure maximum thrashing the load tests passed in random geo locations for proximity search and keywords for attribute search.
A VM was setup and ready to face the wrath of BrowserMob.

I created a ramp test scaling from 0 to 1000 concurrent users firing a single get request with no think time at the Web Page and ran it in isolation against the SQL Implementation and then in isolation against the RavenDB Implementation. The test ran for 30 minutes.
And for those of you on the edge of you seat the results where a resounding victory for RavenDB. Some details of the load test are below but the headline is SQL choked at 250 concurrent users whereas with RavenDB even with 1000 concurrent users the response time was below 12 seconds.

SQL Load Test

Transactions: 111,014 (Transaction = Single Get Request)
Failures: 110,286 (Any 500 or timeout)

SQL Data Throughput - Flatlines at around 250 concurrent users.

RavenDB Load Test

Transactions: 145,554 (Transaction = Single Get Request)
Failures: 0 (Any 500 or timeout)

RavenDB Data Throughput - What the graph should look like

Final thoughts

RavenDB is a great document database with fairly powerful search capabilities. It has a lot of pluses and a few negative which are listed for you viewing pleasure below.
Positives

The documentation although spartan does cover the fundamentals making it easy to get started. On some instances I did have to sniff through the source code to fathom how some things worked but that is the beauty of open source I guess.
The Silverlight Admin interface is pretty sweet
The Raven community (a google group) is very active and the couple of queries I posted were responded to almost immediately.
Although the API did present some challenges it both allowed you to bypass its limitations and even contribute yourself to the project.
The commercial licence for RavenDB is pretty cheap at a $600 once off payment

Negatives

The web site documentation and content could do with an a facelift. (Saying that, I just checked the web site and it seems to have been be revamped)
I came a cross a bug in the Lucene.Net related to granular spatial queries which has yet to be resolved. Not RavenDB's fault but a dependence on third party libraries can cause issues.
I struggled to find really impressive commercial reference sites. There are some testimonials but they give little information away.
Sharding scares me.

I look forward to following the progress of RavenDB and hopefully one day using it in a commercial project. I'm not at the comfort level yet for proposing it but with some more investigation and perhaps some good reference sites this could change very quickly.

* Starry Eyed groupies sadly didn't exist, nor have they ever.
** Not me.

http://ravendb.net

Invalid JSON results via Powershell 3

Mon, 30 Jan 2012 09:28:00 GMT

This is a guest post by Chris, a RavenDB user, originally posted on the RavenDB group.

Background

I’ve been fiddling with document databases for a while trying to find a way to aggregate our logs without having to demoralize everything. I started with CouchDB and because of the odd status of the project with the founder abandoning it and since I work in a Windows world, going with Raven ultimately seemed like a wholly better solution – all the goods of Couch plus a .Net API.

I built a data model in C# and used a CSV library to push a few hundred thousand records into Raven. The goal is to allow support engineers to query this log information with some simple PowerShell one-liners.

I thought parsing 100megs of CSV and jamming in the thousands of corresponding documents would be the difficult part to figure out and the one-liners would be a couple hours of work at most.

The Problem

Yes, it was a bit challenging to build an efficient importer, but most of that was due to my limited knowledge of C#. I thought it was still not working when I started to build my Posh one-liners and some queries were returning invalid JSON. The PowerShell 3 CTP introduce some new cmdlets for handling JSON and one specifically for executing HTTP Rest API calls – Invoke-RestMethod (alias irm). IRM is 100 times more user friendly than CURL and it even goes a step above and beyond by automatically deserializing the content returned. So, it’s extremely easy to consume JSON via a REST API, but I kept running into an issue where Posh would throw an error that there was no Results (the deserialized JSON) property on the object. I must have been pushing in bad data – garbage in equals garbage out.

I thought the HTML in some of the log values was invalidating the JSON string. I deleted all the documents, added a call to HTTPEncode on all strings before Storing it to Raven, then I reloaded the records. I ended up with the same results; or, lack of Results property in this case.

The Invoke-RestMethod cmdlet did return what looked like a valid JSON string, so I dropped it into Notepad++ and turned on JavaScript syntax highlighting and went through the string. I found the culprit.

"SkippedResults:0,

There was a missing quote around a key name. I almost posted this as a RavenDB bug, but I checked the raw HTTP response in Fiddler and found that the quote existed.

What do to about it

I am working with a Technology Preview release of Powershell 3, so I checked Connect and found a similar report of missing characters in content deserialization.

“It seems that the last byte of the second HTTP response packet is being dropped by powershell. This only seems to happen when the second response packet is smaller than the first.”

Microsoft closed this issue as “Won’t Fix” and suggested using Invoke-WebRequest instead. Invoke-WebRequest removes all the magic of Invoke-RestMethod and just gets raw HTTP content. I piped the Content parameter to the, also new to Powershell 3, cmdlet ConvertFrom-Json and got proper deserializedJSON.

$c = Invoke-WebRequest "http://localhost:8080/indexes/vovici/Logs/process?query=customer:blah"
$r = $c.content | convertfrom-json

So, it’s an extra step, but if you want to reliably access RavenDB’s HTTP API via PowerShell 3 that seems to be the way to do it.

UPDATE: It does look like MS fixed the lost character issue in the Invoke-RestMethod cmdlet in the latest beta release. I can pull down 1024 documents with one web request and get a usable, deserialized Object[].

Model Attacher pattern in Silverlight applications

Thu, 24 Nov 2011 06:49:00 GMT

A while ago, when we started to develop our next version of RavenDB Studio, one of our goals was to make its code as simple as possible. That way, we ensure that it is easy to understand what is going on, so making changes to the Studio should be a trivial task.

In order to achieve that, we decided to not use any MVVM toolkits, but simply use a simple pages (views) and attach a model to them. In this approach, every view (page) know how to resolve its view-model by itself. This makes the Silverlight code much more simple, since it let’s you open a specific view by just navigating to its relative URL.

In order to make this possible we have a ModelAttacher.AttachModel attached property on the page, which takes care of instantiating the view-model and attach it to the page’s DataContext property.

Take a look on the following tipical view (page) in order to see it in action:

<Infrastructure:View x:Class="Raven.Studio.Views.Home"
                     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:Infrastructure="clr-namespace:Raven.Studio.Infrastructure"
                     Title="Home"
                     Style="{StaticResource PageStyle}"
                     Infrastructure:ModelAttacher.AttachModel="HomeModel">

</Infrastructure:View>

In this example, we have an empty Home view, which is make a use of a HomeModel. The ModelAttacher’s job here is to create an instance of the HomeModel class and attach it to the View.DataContext property. (The view is a simple class that derives from Page.)

This is how ModelAttacher works, in order to achieve this:

namespace Raven.Studio.Infrastructure
{
    public static class ModelAttacher
    {
        public static readonly DependencyProperty AttachModelProperty =
            DependencyProperty.RegisterAttached("AttachModel", typeof(string), typeof(ModelAttacher), new PropertyMetadata(null, AttachModelCallback));
        
        private static void AttachModelCallback(DependencyObject source, DependencyPropertyChangedEventArgs args)
        {
            var typeName = args.NewValue as string;
            var view = source as FrameworkElement;
            if (typeName == null || view == null)
                return;

            var modelType = Type.GetType("Raven.Studio.Models." + typeName) ?? Type.GetType(typeName);
            if (modelType == null)
                return;

            try
            {
                var model = Activator.CreateInstance(modelType);
                view.DataContext = model;
            }
            catch (Exception ex)
            {
                throw new InvalidOperationException(string.Format("Cannot create instance of model type: {0}", modelType), ex);
            }
        }

        public static string GetAttachModel(UIElement element)
        {
            return (string)element.GetValue(AttachModelProperty);
        }

        public static void SetAttachModel(UIElement element, string value)
        {
            element.SetValue(AttachModelProperty, value);
        }
    }
}

Now in order to attach a model to its view, we need to just add the attached property to the view element: Infrastructure:ModelAttacher.AttachModel="HomeModel".

Please note that in this case any view-model has to have a default (parameters-less) constructor. In order to solve that, what we have done in RavenDB Studio is to have a ModelBase class for our view-models which make sure to expose all our common model dependencies.

XAML Magic: Turning an Ugly Silverlight Duckling into a Beautiful Photoshopped Swan

Mon, 24 Oct 2011 10:00:00 GMT

This is a guest post by Samuel Jack, who had done a lot of work on the new UI for RavenDB.

Three weeks ago Ayende put out a request for help in turning an ugly duckling into a beautiful swan, and I, rather nervously, signed up for the job. The ugly duckling in question was Raven Studio, the Silverlight-based management UI for Raven Db. The nerves were a result of doubting that my limited graphic design skills were up to the job. But when Ayende assured me that he had a proto-type swan in the form of a Photoshop design, drawn up by a bona-fide, turtle-neck-wearing designer, they were calmed. Marginally.

Because the design Ayende had was for the new-look RavenDb website.

He wanted me to take the look and feel and transfer it to the Silverlight Raven Studio application. Which, when he handed it over to me, looked like this:

Ahh! Where to start?

Photoshop for Developer Dummies

To ease myself in, I got started by simply trying to imitate parts of the Photoshop design in XAML, beginning with the header bar at the very top of the page. Not being a designer myself, I’m rather like a duck out of water when it comes to Photoshop, but I’ve at least got the basics sussed.

The thing to understand is that designers construct Photoshop images like onions, layer upon layer, sometimes eye-watering in complexity, and to reproduce the design, you have to peel down through the layers.

First go to Photoshop’s Layers pane, and make sure all the layers are unlocked. This allows the Move Layer tool to come into play, not to move layers, but identify layers by selecting them in the Layers pane when you click the corresponding part of the image. Once you’ve identified a layer, Alt-Click it, and all other layers in the image will be hidden, allowing you to figure out exactly how the thing should look.

Mostly when I’m paring down Photoshop layers I’m looking to isolate them so that I can figure out the colour gradients they use. You could, of course, navigate your way through Photoshop’s dialogs to read off the exact RGB values. Or, if you can get the layer on its lonesome, you can use Expression Blend’s Gradient Dropper tool.

This is a brilliant little timesaver. In the Blend Property pane, select the Brush property of your choice, put it into Gradient mode, click the Gradient Dropper tool, then drag over any area on screen, and Blend will reproduce the gradient under the cursor in XAML form.

After all that, I have the first feather of the new swan: a header bar matching the Photoshop design. Well, the background of the header bar. It needs fleshing out with some buttons.

Let it Live: Control Templates and Visual States

Silverlight, following WPF, has the concept of look-less controls. That is, the Controls (take Button as an example) manage their behaviour (Buttons respond to mouse clicks by executing commands) but don’t define how they are rendered on screen. That is left to the control’s Style, and specifically its ControlTemplate. The ControlTemplate defines the visual tree of all the UI elements needed to present the control and make it look snazzy. With a little patience, some assistance from Expression Blend, and plenty of application of the Gradient Dropper tool, it’s possible to take the built-in controls and make them look and feel just how the designer ordered.

I wanted Buttons that look like those in the header bar of the Photoshop design, but when the corresponding page is selected, they should change to have a background gradient with colours like the RavenDb logo.

When restyling a Control, it’s best to start by modifying the existing style. This way you can be sure you won’t miss an aspect of the control’s behaviour that you might otherwise forget. Blend makes this easy by giving you the option of editing a copy of the Control’s current ControlTemplate (right-click on it in the Objects and Timeline View, then select Edit Template > Edit a Copy). There are occasions when that little trick has failed, and I’ve ended up with an empty control template. But MSDN has come through for me then: it has a whole section containing the default Styles and Control Templates for all the built-in controls, like this one for Button.

Part of the ControlTemplate defines how the control looks in its various states, when the mouse is over it, when it has focus, or when it is selected, for example. The Control itself is responsible for indicating when it has entered each state. As a designer, it’s your job to specify Storyboards that are activated each time particular states are entered. Each Storyboard can animate whichever properties it likes to achieve the desired effect – in my Buttons, for example, I animate the opacity property of a Border element to fade in a coloured background indicating that it is selected. All this is overseen by the VisualStateManager, of which, more here. Naturally, Expression Blend has great editing support for visual states. Read John Papa’s tutorial to learn more.

So now I have a header bar with buttons that change colour when the corresponding page is selected. Where next?

Textured Backgrounds

Well, that page background could do with spicing up. The Photoshop design has a nice textured background, which I extracted to a PNG file that Silverlight would understand by hiding every layer except the background, then using Photoshop’s “Save for Web & Devices” feature.

The thing about textured backgrounds is that you do want them to cover the whole of the page background, which means tiling the texture to fill all the space. WPF makes this easy with its ImageBrush, which has a TileMode property, which, when set to a value other than None, automatically repeats the image over the whole area to be painted by the brush. Silverlight has ImageBrushes, but they don’t support tiling out of the box. Fortunately, Phil Middlemiss has supplied what is lacking in the form of the TiledBGControl which does exactly what I need – you should take a look: it makes clever use of Silverlight’s pixel shader effects.

This is what we’ve got so far.

The Index Editor Page, Before and After

Here are a couple of other pages I’ve beautified. First, the Index Editor page, as it was before:

And now:

Again, it was a challenge knowing where to apply my beautician’s brush first. I settled on adding the header bar at the top, and I then realised it could double up as a toolbar. Originally the page had no header at all, but by having a bread-crumb bar in the header it helps to give the user a bit more context when they’re looking at the page, as well as making it easier to navigate around.

Inspiration and Icons

Since my graphic-design skills are so underdeveloped, I borrow ideas shamelessly wherever I find something that fits. You may recognise the styling of the toolbar buttons in the Index page header bar as being remarkably similar to the ones on the Google Chrome toolbar. Yes – Expression Blend’s Gradient dropper does work on live applications too! Two places to check out if you find yourself short on inspiration are Quince and Pattern Tab which both catalogue examples of user interface and user experience design from across the web. Pattern Tab especially has myriad examples of beautiful UIs.

In the past I’ve struggled to find icons for my projects, but I’ve recently discovered two great sources: IconFinder.com and IconArchive.com. Both have excellent search facilities (which is often what’s missing from the commercial collections you buy and download to your machine in a whacking great zip file), and are careful to call out the license attached to each icon. A surprisingly large number are licensed so that they can be used without charge in commercial products.

A XAML Tip

The nice thing about styling an application is that it gets easier with every page you complete. Once you’ve settled on a look for a particular kind of element, you can repeat that look on every page. Silverlight’s support for Styles and Resources makes this very easy. And I have a tip that can make it easier still.

I put all my styles into a single resource dictionary, Styles.xaml which I merge into my App.xaml resource dictionary. I then name all my Styles, Brushes, etc. using a hierarchical naming convention. So Styles all begin with “Style_”, Styles for Buttons would all begin “Style_Button”, and then would come the styles for different purposes: “Style_Button_Toolbar”, “Style_Button_Hero” (for those big red buttons in your app that the hero uses to save the world), etc.. The pay-off for using this convention comes when you’re hand-editing XAML and making use of Resharper’s XAML intellisense. Type “{StaticResource Style_[ControlType]” and Resharper instantly presents you with a list of all the styles that might apply.

A Parting Screenshot

To finish, here’s one more before and after comparison, this time of the Edit Document page. Before:

And after:

You can begin to sense the benefit of using a consistent set of styles, as it brings a harmonious feel to the whole application.

I hope you’ve enjoyed this whistle-stop tour of the Raven Studio beautification process. Remember that all the code is available on GitHub. We’d love to hear what you think.

XAML Magic: Turning an Ugly Silverlight Duckling into a Beautiful Photoshopped Swan

Mon, 24 Oct 2011 10:00:00 GMT

This is a guest post by Samuel Jack, who had done a lot of work on the new UI for RavenDB.

Because the design Ayende had was for the new-look RavenDb website.

He wanted me to take the look and feel and transfer it to the Silverlight Raven Studio application. Which, when he handed it over to me, looked like this:

Ahh! Where to start?

Photoshop for Developer Dummies

After all that, I have the first feather of the new swan: a header bar matching the Photoshop design. Well, the background of the header bar. It needs fleshing out with some buttons.

Let it Live: Control Templates and Visual States

So now I have a header bar with buttons that change colour when the corresponding page is selected. Where next?

Textured Backgrounds

This is what we’ve got so far.

The Index Editor Page, Before and After

Here are a couple of other pages I’ve beautified. First, the Index Editor page, as it was before:

And now:

Inspiration and Icons

A XAML Tip

A Parting Screenshot

To finish, here’s one more before and after comparison, this time of the Edit Document page. Before:

And after:

You can begin to sense the benefit of using a consistent set of styles, as it brings a harmonious feel to the whole application.

I hope you’ve enjoyed this whistle-stop tour of the Raven Studio beautification process. Remember that all the code is available on GitHub. We’d love to hear what you think.

XAML Magic: Turning an Ugly Silverlight Duckling into a Beautiful Photoshopped Swan

Mon, 24 Oct 2011 10:00:00 GMT

This is a guest post by Samuel Jack, who had done a lot of work on the new UI for RavenDB.

Because the design Ayende had was for the new-look RavenDb website.

He wanted me to take the look and feel and transfer it to the Silverlight Raven Studio application. Which, when he handed it over to me, looked like this:

Ahh! Where to start?

Photoshop for Developer Dummies

After all that, I have the first feather of the new swan: a header bar matching the Photoshop design. Well, the background of the header bar. It needs fleshing out with some buttons.

Let it Live: Control Templates and Visual States

So now I have a header bar with buttons that change colour when the corresponding page is selected. Where next?

Textured Backgrounds

This is what we’ve got so far.

The Index Editor Page, Before and After

Here are a couple of other pages I’ve beautified. First, the Index Editor page, as it was before:

And now:

Inspiration and Icons

A XAML Tip

A Parting Screenshot

To finish, here’s one more before and after comparison, this time of the Edit Document page. Before:

And after:

You can begin to sense the benefit of using a consistent set of styles, as it brings a harmonious feel to the whole application.

I hope you’ve enjoyed this whistle-stop tour of the Raven Studio beautification process. Remember that all the code is available on GitHub. We’d love to hear what you think.

XAML Magic: Turning an Ugly Silverlight Duckling into a Beautiful Photoshopped Swan

Mon, 24 Oct 2011 10:00:00 GMT

This is a guest post by Samuel Jack, who had done a lot of work on the new UI for RavenDB.

Because the design Ayende had was for the new-look RavenDb website.

He wanted me to take the look and feel and transfer it to the Silverlight Raven Studio application. Which, when he handed it over to me, looked like this:

Ahh! Where to start?

Photoshop for Developer Dummies

After all that, I have the first feather of the new swan: a header bar matching the Photoshop design. Well, the background of the header bar. It needs fleshing out with some buttons.

Let it Live: Control Templates and Visual States

So now I have a header bar with buttons that change colour when the corresponding page is selected. Where next?

Textured Backgrounds

This is what we’ve got so far.

The Index Editor Page, Before and After

Here are a couple of other pages I’ve beautified. First, the Index Editor page, as it was before:

And now:

Inspiration and Icons

A XAML Tip

A Parting Screenshot

To finish, here’s one more before and after comparison, this time of the Edit Document page. Before:

And after:

You can begin to sense the benefit of using a consistent set of styles, as it brings a harmonious feel to the whole application.

I hope you’ve enjoyed this whistle-stop tour of the Raven Studio beautification process. Remember that all the code is available on GitHub. We’d love to hear what you think.

XAML Magic: Turning an Ugly Silverlight Duckling into a Beautiful Photoshopped Swan

Mon, 24 Oct 2011 10:00:00 GMT

This is a guest post by Samuel Jack, who had done a lot of work on the new UI for RavenDB.

Because the design Ayende had was for the new-look RavenDb website.

He wanted me to take the look and feel and transfer it to the Silverlight Raven Studio application. Which, when he handed it over to me, looked like this:

Ahh! Where to start?

Photoshop for Developer Dummies

After all that, I have the first feather of the new swan: a header bar matching the Photoshop design. Well, the background of the header bar. It needs fleshing out with some buttons.

Let it Live: Control Templates and Visual States

So now I have a header bar with buttons that change colour when the corresponding page is selected. Where next?

Textured Backgrounds

This is what we’ve got so far.

The Index Editor Page, Before and After

Here are a couple of other pages I’ve beautified. First, the Index Editor page, as it was before:

And now:

Inspiration and Icons

A XAML Tip

A Parting Screenshot

To finish, here’s one more before and after comparison, this time of the Edit Document page. Before:

And after:

You can begin to sense the benefit of using a consistent set of styles, as it brings a harmonious feel to the whole application.

I hope you’ve enjoyed this whistle-stop tour of the Raven Studio beautification process. Remember that all the code is available on GitHub. We’d love to hear what you think.

Sneak peek at the new RavenDB Studio

Sun, 02 Oct 2011 14:24:46 GMT

We started to develop the next generation of RavenDB Studio and I wanted to share a screenshot of first take of the new UI in order to gather some feedback:

The main goals of the new UI are:

Responsiveness. You can’t see this in this picture but the UI that we play with now is very responsive.
Easy to use. The UI should be simple and very easy to use.
Easy to understand. This goal is to create a project that is very easy to contribute to. So far, we had very little contributions to the Studio, no doubt because the current version is quite complex. We are trying to make it very easy to understand and work with the new studio, so if you have a problem or want a new feature, it would be trivial to add and contribute.

Sneak peek at the new RavenDB Studio

Sun, 02 Oct 2011 14:24:46 GMT

We started to develop the next generation of RavenDB Studio and I wanted to share a screenshot of first take of the new UI in order to gather some feedback:

The main goals of the new UI are:

Responsiveness. You can’t see this in this picture but the UI that we play with now is very responsive.
Easy to use. The UI should be simple and very easy to use.
Easy to understand. This goal is to create a project that is very easy to contribute to. So far, we had very little contributions to the Studio, no doubt because the current version is quite complex. We are trying to make it very easy to understand and work with the new studio, so if you have a problem or want a new feature, it would be trivial to add and contribute.

RavenDB Webinar #1 now available on YouTube

Sun, 11 Sep 2011 04:58:00 GMT

The first ever RavenDB webinar aired last week, Thursday the 8th, and it was a great success. We announced it only about 12 hours in advance, yet 260+ people registered. Unfortunately the software we were using only allowed 100 people in – our apologies for all of you who wanted to participate but couldn’t get in, or heard of it too late.

We have now uploaded the recording to our YouTube channel here, and you can watch it from there. Embedded here is the first part:

The other parts are available from our YouTube channel: www.youtube.com/user/HibernatingRhinos.

We had a second webinar last Friday, and had a very good Q&A session during it. Unfortunately _someone_ forgot to press the “Record” button, and there we are all left with no recording…

RavenDB webinars are here to stay. We are still formulating our plans for future webcasts – both in terms of a format and topics. The general idea is that whenever there will be enough demand, we will do a webcast on a specific topic, or just a Q&A session. Ideally we would like to have a bi-weekly session, and by the time we settle on a format you can expect many more spontaneous sessions like we had last week…

This is why we would really like to hear back from you. What are you looking for to have, when, in what format. Any other feedback – here or in the RavenDB mailing list – is definitely welcome.

See you all in our next webinars…

RavenDB Webinar #1 now available on YouTube

Sun, 11 Sep 2011 04:58:00 GMT

We have now uploaded the recording to our YouTube channel here, and you can watch it from there. Embedded here is the first part:

The other parts are available from our YouTube channel: www.youtube.com/user/HibernatingRhinos.

We had a second webinar last Friday, and had a very good Q&A session during it. Unfortunately _someone_ forgot to press the “Record” button, and there we are all left with no recording…

This is why we would really like to hear back from you. What are you looking for to have, when, in what format. Any other feedback – here or in the RavenDB mailing list – is definitely welcome.

See you all in our next webinars…

Entity Framework Profiler supports for LinqPAD

Fri, 29 Jul 2011 07:33:00 GMT

If you’re using LinqPAD and wants to profile your Entity Framework usage with the Entity Framework Profiler, you can use the following snippet of code in order to achieve that:

void Main()
{
    HibernatingRhinos.Profiler.Appender.EntityFramework.EntityFrameworkProfiler.Initialize();
    Blogs.Take(50).Dump();
}

Please make sure to use the "C# Program" option from the "language" ComboBox, and that’s it. You can now see the the profiling data in the Entity Framework Profiler.

Entity Framework Profiler supports for LinqPAD

Fri, 29 Jul 2011 07:33:00 GMT

If you’re using LinqPAD and wants to profile your Entity Framework usage with the Entity Framework Profiler, you can use the following snippet of code in order to achieve that:

void Main()
{
    HibernatingRhinos.Profiler.Appender.EntityFramework.EntityFrameworkProfiler.Initialize();
    Blogs.Take(50).Dump();
}

Please make sure to use the "C# Program" option from the "language" ComboBox, and that’s it. You can now see the the profiling data in the Entity Framework Profiler.