Reading time: 4 - 6 minutes

 

In the first part of this article we have been exploring how beWeeVee works under the hood, as many other frameworks like Google Wave it resorts to an Operational Transformation Framework.

We also talked about linearizable structures, that is the base of the current beWeeVee implementation that will be released in the CTP. Text as we know it easily linearizable, as you can treat each character as an element on a list. Other things require a little more though, but we are going to show how to create a type independent elements list.

We will focus on explaining how to modify the structures using a Range API that is the base of the ITextView and IElementView<T> helpers.

 

How to use it for ITextView

The ITextView is a high level representation of a simple text document with edition capabilities based on Range primitives. Ranges are primitive types lately popularized by Andrei Alexandrescu at the Boost Conference [1] and are defined as a pair of begin/end iterators that are packed together as a high level entity. Ranges are perfectly suited to handle the signaling process required by beWeeVee, provide a verifiable and extensible API as they allow easy composition and are a superior abstraction.

The current SDK version only supports non-tracking Ranges, so they are invalidated after an editing operation is performed. After any edition operation is performed it will be returned a new Range accounting for the edition operations that were performed.

Let’s suppose that we want to create a Text Document with “ABC” as its content, and then create a range spanning the entire document.

var textView = new TextView(”ABC”);
Range all = textView.CreateRange(0, 3);

Now all is a range that has “ABC” as its content. If we would wanted to create a range that has on “BC” we would have do the following:

var textView = new TextView(”ABC”);
Range partial = textView.CreateRange(1, 2);

Note that we are starting the range at position 1 and giving it a length of 2. Now let’s suppose that we want to add an “X” before the “B”. It is as simple as:

var textView = new TextView(”ABC”);
Range partial = textView.CreateRange(1, 2);
partial = partial.InsertBefore (”X”);

Now the new partial range contains “AXBC” because it has added before “X” so its length is 4 and the start position is still 1. You can also insert at a specific position inside the range with the InsertAt method.

var textView = new TextView(”ABC”);
Range partial = textView.CreateRange(0, 3);
partial = partial.InsertAt (1, “XX”);

The result of inserting “XX” at position 1 of the range starting and 0 with Length equal to 5 is “AXXBC”. You can also shrink or expand the ranges in any direction using the appropriate methods and delete or replacing range content with something else.

On the background, the Range will signal the ConcurrencyController of the TextView of the changes and transform those operations into canonical form to be sent to the other parties.

 

How to use the IElementView

The IElementView<T> is a high level representation for elements lists similar to the ITextView but allowing any arbitrary serializable type. It also provides a Range based interface to interact with the content.

It’s usage pattern similar to the TextView, but provides the ability to synchronize more complex structures. The biggest advantage is that allows the developer to control the representation and complexity of the information exchange. For example, you can use Silverlight Stroke class (a non serializable type) and create a synchronized data structure with just a few lines of code.

In the SketcherSample, that we will cover in the third part of this series, we will show a sample where you will be able to see how to perform non serializable types’ adaptation and extending the ElementView<T> through inheritance (it can be possible to also use it without inheriting) to create a synchronized drawing pad.

As a sneak peak I think you can fill in the blanks of what it is needed from this simple code:

public class SynchronizableStrokeCollection : ElementView<SerializableStroke>
{
   public SyncronizableStrokeCollection()
   {
      [...]
   }

   public StrokeCollection Strokes { get; set; }
   [...]
}

In the SynchronizableStrokeCollection example we are creating an ElementView with a SerializableStroke that is a wrapper over the Stroke data structure used in WPF and Silverlight. We exposed the StrokeCollection to perform data binding on the InkPresenter that will show those strokes.

You may be asking yourself: “Could it be so easy?”. You will know pretty soon, so stay tuned.

Technology beweevee, co-operation, google wave, programming, sdk