Maarten De Wilde

Auto-ViewModel binding with Ninject

2011-01-25T15:11:00.001-08:00

I have done a lot of post about binding ViewModels to Views in Silverlight, so can you see that it is really a subject I am quite interested in. It also allows me to learn more about several technologies all in the context of this domain.

Having said this, lets have a look at using Ninject for Injecting our ViewModels into our Views. We are going to use the concept of a ViewModelLocator that will be hosting our Ninject kernel in the application scope.

This means we are going to host our Locator as a resource in our App.xaml resource dictionary and bind to it in our views, using the StaticResource as a source.

You would go about doing this as following, and reference it in your code

<Application.Resources> 
  <Foo:ViewModelLocator x:Key="viewModelLocator"/>
</Application.Resources>

<UserControl DataContext="{Binding [Bar], Source={StaticResource viewModelLocator}}"/>

You can see that we have defined our ViewModel with the name ‘Bar’ and within square brackets, this means we are binding to an indexer of the ViewModelLocator. This allows us to do some pretty cool stuff, on the expense of loosing Intelli-Sense.
So lets get started on writing our locator, we first start my setting up our class and initializing some Ninject stuff, creating the Kernel, adding modules,…

public class ViewModelLocator
{        
  private readonly IKernel kernel;        
  public ViewModelLocator()
  {            
    kernel = new StandardKernel(GetModules());            
    kernel.Load();        
  }
}

So the really cool thing we can do now, is create an indexer that will allow us the query our ViewModels setup in our Kernel dynamically without having to type it, and add a new Property for every ViewModel.

The indexer is pretty straightforward, it looks like this :

public object this[string viewModel]
{
  get { return GetViewModel(viewModel); }
}

So as you could imagine, the real stuff goes on in the GetViewModel method, so lets have a quick look at that now, I'll explain what we are doing here afterwards.

private object GetViewModel(string viewModel)
{
    String viewModelName = viewModel;
    if (!viewModel.ToUpper().EndsWith("VIEWMODEL"))
    {
        viewModelName = viewModelName + "ViewModel";
    }
    return kernel.Get(GetViewModelType(viewModelName));
}

private Type GetViewModelType(string viewModelname)
{
    foreach (string location in GetLocations())
    {
      Type type = Type.GetType(string.Format("{0}.{1}", location, viewModelname), false, true);
      if (type != null)
          return type;
    }
    return null;
}

When we are calling our “Bar” viewmodel, the GetViewModel method will get a string with the value '”Bar”, from this it will need to locate the ViewModel from our kernel which could have a whole bunch of dependency’s injected ( or should I say nInjected ) into it.

Our locator will will take into account a few conventions, it will check the ViewModel string ends with “ViewModel” and if not will append it. It will then attempt to find the ViewModel Type and return the corresponding instance of that type from the Ninject kernel.

This is where our last convention comes into play, our ViewModels in our application will most likely be located on some very well defined locations (hence the GetLocations method). We can easily define these conventions and possibly even add new ones later, a simple convention for locations might look something like this :

 private IEnumerable GetLocations()
 {
      string applicationNamespace = GetType().Namespace;
      yield return applicationNamespace;
      yield return applicationNamespace + ".Shared";
      yield return applicationNamespace + ".Shared.ViewModel";
      yield return applicationNamespace + ".Views";
      yield return applicationNamespace + ".Views.ViewModel";
  }

So this way you can add ViewModels with Ninject without having to define any properties to bind to, you just have to type your ViewModel’s name and the locator will do the rest for you.

Automatic MVVM Command Binding

2010-10-19T13:46:00.001-07:00

When working with MVVM it can be quite a lot of work to wire up all commands with the view, bind them and make sure the right method was called.

Furthermore, you would need a property in your ViewModel that would bind to the view, wouldn’t it be nice to just have some methods in your ViewModel that would just like that respond to the buttons you click.

I came across this technique while looking at a MIX talk by Rob Eisenberg. The following example is an easy to use simple framework. It allows you to implement this quickly. And use it without needing to change a lot of your already in place MVVM screens. It is based on a great MVVM framework that Rob has been working on : Caliburn , which definitely is worth a look.

The concept that we are working with here, is to have some convention in our application in regards to using ViewModels and Commands. The convention in this example is that all methods used for handling commands start with “Execute” and end with “Command”. This is a very intuitive way to write commands, and is actually the way I was declaring then before I started to use this setup.

Lets say for a moment, we want to create new MVVM screen using a ViewModel, in this example we want to declare our ViewModel inside our View by calling an extension method “Bind<TViewModel>()” and binding the ViewModel to it. You could eventually extract this into a Bootstrapper or so… But for now we will just keep it this way.

Our first class to do this, is our Extension class called “MvvmBindingExtension”. It accepts a TViewModel generic type and reflects all Command methods in it. Then it binds them to the View so they can be invoked.

Lets have a look at the implementation of this extension.

public static class MvvmBindingExtension
{
        private const string COMMAND_METHOD_PREFIX = "Execute";
        private const string COMMAND_METHOD_SUFFIX = "Command";

        /// <summary>
        /// Bind a ViewModel to a View, and auto bind commands
        /// </summary>
        /// <typeparam name="TViewModel">The ViewModel that should be </typeparam>
        /// <param name="element">The view we want to bind our viewmodel to</param>
        public static void Bind<TViewModel>(this FrameworkElement view) where TViewModel : new()
        {
            //Create an instance of our viewModel
            object viewModel = new TViewModel();

            //Get the type of the viewmodel for reflection purposes.
            Type viewModelType = viewModel.GetType();

            //Get all command methods obbeying the convention we set up for command handler methods
            IEnumerable<MethodInfo> commandMethods = viewModelType.GetMethods()
                .Where(method => method.Name.StartsWith(COMMAND_METHOD_PREFIX))
                .Where(method => method.Name.EndsWith(COMMAND_METHOD_SUFFIX));

            foreach (MethodInfo commandMethod in commandMethods)
            {
                //Make sure we get the right name of the method
                int lengtOfSubString = commandMethod.Name.Length - COMMAND_METHOD_PREFIX.Length - COMMAND_METHOD_SUFFIX.Length;
                string commandName = commandMethod.Name.Substring(COMMAND_METHOD_PREFIX.Length, lengtOfSubString);

                //Get button by name
                ButtonBase button = view.FindName(commandName) as ButtonBase;
                if (button != null)
                {
                    //Set binding to reflection command
                    button.SetBinding(ButtonBase.CommandProperty, new Binding { Source = new ReflectionCommand(commandMethod, viewModel) });
                }
            }
            view.DataContext = viewModel;
        }
}

You can see that we are using a “ReflectiveCommand” here, this command takes the MethodInfo we have extracted from the ViewModel, and invokes it when executing the command on the ViewModel.
We are binding this directly to the Source, so we don’t have to create any properties in our ViewModel to bind to.

public class ReflectionCommand : ICommand
{
        private object target;
        private MethodInfo method;

        public ReflectionCommand(MethodInfo method, object target)
        {
            this.method = method;
            this.target = target;
        }

        public bool CanExecute(object parameter)
        {
            return true;
        }

        public event EventHandler CanExecuteChanged;

        public void Execute(object parameter)
        {
            method.Invoke(target, new[] { parameter });
        }
}

This is command is then bound to a FrameworkElement that has the same name as the Command method without it’s PRE- and SUFFIX. So basically for a “Save” method this would be “ExecuteSaveCommand” where Save would then be set as the name of the element.

<Grid x:Name="LayoutRoot" Background="White">
   <Button x:Name="Save" Content="Save"/>
</Grid>

Finally we would have a ViewModel that would look something like this, no more Command properties, no more RelayCommands being initialized. Just simply one public command method we can use.

  public class ViewModel
  {
        public void ExecuteSaveCommand(object parameter)
        {
            MessageBox.Show("Hello world!");
        }
  }

Useful Outlook Plug-in

2010-06-14T12:47:00.001-07:00

If you are anything like me, you will have probably sent mails referring to an attachment without actually including the attachment in this mail.

So, anyone feel like this has happened to you, well here is some small tool that could prove useful.

To build it just create Outlook 2007 plug-in in Visual Studio, and add the following code.

public partial class ThisAddIn
{
   private Outlook.MailItem MailItem;

   private void ThisAddIn_Startup(object sender, System.EventArgs e)
   {
      this.Application.Inspectors.NewInspector +=
      Inspectors_NewInspector;
   }

   void Inspectors_NewInspector(Inspector inspector)
   {

     Outlook.MailItem mailItem = inspector.CurrentItem
     as Outlook.MailItem;

     if (mailItem != null)
   {
       MailItem = mailItem;

       if (MailItem.EntryID == null)
       {
          ((ItemEvents_10_Event)MailItem).Send += SendMail;
       }
     }
   }

   private void SendMail(ref bool cancel)
   {

      if (MailItem.Attachments.Count == 0 && (MailItem.Body.ToLower()
          .Contains("attachment"))
    {
         if (MessageBox.Show("Are you sure you want to send this mail
             without an attachment?", "Are you sure ?",
             MessageBoxButtons.YesNo, MessageBoxIcon.Question) ==
              DialogResult.No)
             {
                cancel = true;
             }
      }
   }

   private void ThisAddIn_Shutdown(object sender, System.EventArgs e)
   {
     ((ItemEvents_10_Event)MailItem).Send -= SendMail;
     this.Application.Inspectors.NewInspector –= Inspectors_NewInspector;

   }
}

So what exactly are we doing here ?

Basically it’s simply getting an inspector for a MailItem, and then intercepting the Send event.

A send event is triggered whenever a user clicks on send while creating an email.
Our code will simply check if this user has mentioned an attachment in his email and ask for confirmation to send this mail without any attachments.

Tracking events with Rx in Silverlight

2010-04-01T11:33:00.000-07:00

When you want to execute some code after multiple events have been completed, you don’t always know which event will be triggered first, you might have to synchronize them using some boiler plate logic. This could, for example, happen when you have to execute two service calls at the same time.

The solution for this problem comes with the Rx framework, the System.Reactive assembly found in the Silverlight Toolkit.

Image you have two events coming from “serviceProxy”, you could make them observable like this.

IObservable<Event<EventArgs>> observable1
= Observable.FromEvent<RoutedEventArgs>(serviceProxy, "EventOne");

IObservable<Event<EventArgs>> observable2
= Observable.FromEvent<EventArgs>(serviceProxy, "EventTwo");

You can execute the following Rx method to make sure only a composite event is triggered once both events have been triggered.

IObservable<Event<EventArgs>> joinedObservable = observable1.ForkJoin(observable2);

To be able to now execute our event we can simply call the Subscribe method and execute a action of our choice :

joinedObservable.Subscribe( /* Some Method */ );

Generating GUIDs with Powershell

2010-02-25T10:08:00.001-08:00

Something I ran across the other day, was to use Powershell to generate a GUID.
This is quite useful since you’re not always working in a .NET application when you need one. And you don’t always want to compile an application to get it.

One way to do this, is to talk to the .NET runtime in Powershell. You can simply execute the following command :

[System.Guid]::NewGuid()

This will generate a simple Guid, however now you will still have to copy/paste it from your command line to be able to use it.
It would be very handy to immediately have the Guid available in your clipboard.

You can do this using the following powershell script :

[reflection.assembly]::LoadWithPartialName("System.Windows.Forms")
[System.Windows.Forms.Clipboard]::SetText([System.Guid]::NewGuid().ToString())

This script will load the the Windows Forms assembly and get the Clipboard class to use the SetText method. And … magic we have the Guid in our clipboard.

Silverlight : MEF and MVVM

2010-02-02T23:19:00.001-08:00

With the upcoming release of Silverlight 4, I had a look at the Managed Extensibility Framework, since it is shipped together with Silverlight 4 once it is released.

What is MEF ?

According to the codeplex project :

MEF provides a standard way for the host application to expose itself and consume external extensions. Extensions, by their nature, can be reused amongst different applications. However, an extension could still be implemented in a way that is application-specific. Extensions themselves can depend on one another and MEF will make sure they are wired together in the correct order (another thing you won't have to worry about).
source : http://mef.codeplex.com/

Basically you can export members of a class, these will be viewed by MEF as parts, which in turn can be imported by other classes.

When you want to import those parts to you Silverlight view you have to use, PartInitializer which will satisfy all imports on the class with the exported types.

MEF and MVVM

This functionality gave me the idea to import a ViewModel to a View to there is no link between the both in either direction. Allowing to easily change ViewModels and Views and reuse them.

Defining the contract

To be able to export and import our ViewModel parts, we have to define a contract for them.

We will simply add the following empty interface that we must implement on all our ViewModels :

public interface IViewModelBase { }

public class ViewModel : IViewModelBase
{
public string Value
{
   get
   {
     return "Some Display Value";
   }
}
}

Exporting our ViewModel

The next step would be to export our ViewModel and expose it so it can be imported by our view.

To do this we could provide a custom MetaModel class to make sure we can differentiate our ViewModels when assigning them to our View, however since we are only interested in a single identifier, we can create a custom export attribute to automatically do this.

To do this we first create a contract that will be implemented as the MetaData.

public interface IViewModelMetaData
{
string Identifier { get; }
}

Next we will create our custom export attribute, we should make sure we inherit the original ExportAttribute and mark the class as metadata so the metadata contract can be interpreted when we are importing.

[MetadataAttribute]
[AttributeUsage(AttributeTargets.Class, AllowMultiple = false)]
public class ViewModelExportAttribute : ExportAttribute, IViewModelMetaData
{
public ViewModelExportAttribute(): base(typeof(IViewModelBase))
{}

public string Identifier { get; set; }
}

We can apply this to our ViewModel by adding the following attribute above the class definition.

[ViewModelExport(Identifier = "MyViewModelIdentifier")]

Importing the ViewModel

At this point we want to be able to link the exported ViewModel to our View, to do this we can create a abstract class we can use as a base for all our views, implementing some basic functionality to enable the import.

public abstract class ViewBase : UserControl
{
   protected ViewBase()
   {
       PartInitializer.SatisfyImports(this);
   }

   public abstract string ViewModelIdentifier { get; }

   [ImportMany]
   public Lazy<IViewModelBase,IViewModelMetaData>[] ViewDataContext
   {
       set
       {
           DataContext = value
           .Where(viewModel => viewModel.Metadata.Identifier == ViewModelIdentifier)
           .First().Value;
        }
    }
}

So what exactly did we do here ? To start ,we have created a ViewDataContext property of type Lazy<IViewModelBase,IViewModelData> and marked it with the ImportMany attribute.

Once the StatisfyImports method is called, MEF will initialize all properties marked with the Import attribute, in our case it will initialize the ‘ViewDataContext’ property. Since MEF will import all Parts of the given IViewModelBase contract, we need a way to identify which ViewModel we want to use on our View, we can do this by exposing an abstract property ‘ViewModelIdentifier’ that will have to implemented by all views.

Doing this we can check the exported metadata for the Identifier and compare it to the ViewModelIdentifier defined in the view, when a match has been found, the ViewModel is assigned to the DataContext of the view and we can do all the usual MVVM magic.

Creating a simple Commanding Framework for Silverlight 3

2009-12-28T02:50:00.001-08:00

Whenever you are working with commanding, you are dependent on using either PRISM or perhaps the Interactivity framework. ( see my previous post )

Even in the future when Silverlight 4 is released there will only be support for commanding on Buttons and Hyperlinks. So you might consider writing your own framework to handle all these things for you and allowing you to add some functionality on the way.

Getting Started

By default, Silverlight provides an ICommand interface that already provides you with a basic contract to get started with Commanding. What we are going to do is extend this interface in an ITriggeredCommand interface. This will allow us to hook up some event handler when we want to execute the command.

public interface ITriggeredCommand : ICommand
{
string Trigger { get; set; }
}

Setting up the Framework

Next we will create an abstract implementation to hide some of the contract from the ICommand and create our own contract. We will however expose the possibility to invoke the CanExecuteChanged event, to be able to adapt our interface in the way we desire.

public abstract class BaseCommand<T> : ITriggeredCommand
{
    public string Trigger { get; set; }

    private Action<T> execute;
    private Func<T, Boolean> canExecute;

    public BaseCommand(Action<T> execute, Func<T, Boolean> canExecute)
    {
        if(execute == null)
            throw new ArgumentNullException("The execution action cannot be null.");
        this.execute = execute;
        this.canExecute = canExecute;
    }

    /// <summary>
    /// When we have a canExecute function, execute it and pass the result
    /// </summary>
    public bool CanExecute(object parameter)
    {
        if (canExecute != null)
            return canExecute((T)parameter);
        return true;
    }

    /// <summary>
    /// Execute the execution action, passing the parameter
    /// </summary>
    public void Execute(object parameter)
    {
        execute((T)parameter);
    }
    /// <summary>
    /// Allow for an implementation of this abstract class to invoke the CanExecuteChanged event
    /// </summary>
    protected void InvokeCanExecuteChanged()
    {
        if (CanExecuteChanged != null)
            CanExecuteChanged(this, EventArgs.Empty);
    }

    public event EventHandler CanExecuteChanged;
}

At this point you should write a custom implementation of the BaseCommand<T>, however I will now continue with describing how we can hook this functionality up with our UI and ultimately allow you to use it in an MVVM application.

Making it work

So how do we hook up the commands to our UI, well for this we can use attached properties and databind our commands to them accordingly.

The following code listing will describe how we can make sure the correct event is triggered ( the Trigger property ).

public static class Commands
{
    /// <summary>
    /// Register the new attached property for a command
    /// </summary>
    public static DependencyProperty CommandProperty = DependencyProperty.RegisterAttached
       (
           "Command",
           typeof(ITriggeredCommand),
           typeof(Commands),
           new PropertyMetadata(commandChanged)
       );

   public static void SetCommand(DependencyObject obj, ITriggeredCommand propertyValue)
   {
       obj.SetValue(CommandProperty, propertyValue);
   }

   public static ITriggeredCommand GetCommand(DependencyObject obj)
   {
       return (ITriggeredCommand)obj.GetValue(CommandProperty);
   }

   //When the command changed make sure it is handled correctly
   private static void commandChanged(DependencyObject obj, DependencyPropertyChangedEventArgs arguments)
   {
       if (arguments.NewValue is ITriggeredCommand)
      {
           ITriggeredCommand command = (ITriggeredCommand)arguments.NewValue;
           //Get the event that is related to the trigger
           EventInfo evInfo = obj.GetType().GetEvent(command.Trigger);
           //Create an eventhandler delegate for it
           Delegate executeEventDelegate = Delegate.CreateDelegate
               (
                  evInfo.EventHandlerType,
                   null,
                   typeof(Commands).GetMethod("handler",BindingFlags.Static | BindingFlags.NonPublic)
                );
            //Assign the Event handler to the object
            evInfo.AddEventHandler(obj,executeEventDelegate);
        }
    }

    //Execute the command
    private static void handler(object sender, EventArgs args)
    {
        ITriggeredCommand command = GetCommand((DependencyObject)sender);
        //We could implement an additional attached property to allow for a parameter to be set
        if (command.CanExecute(null))
            command.Execute(null);
    }
}

The important thing here is that we able to attach our command to an event that is related to the object we are binding our command to.

In the commandChanged method we subscribe our handler to our event using reflection based on the EventHandlerType that was provided by the event defined in the Trigger property.

Creating a basic MVVM Application

2009-12-01T11:02:00.001-08:00

In one of my previous post I mentioned MVVM ( or Model-View-ViewModel ) , so what exactly is the idea behind it, and more importantly, what are the advantages?

Separating UI from Business logic

The main problem with a Silverlight application is that you have a whole bunch of UI code intermingled with a bunch of Business logic. This makes the whole application hard to understand, hard to debug and hard to test. We would like to have a way to avoid this.

A solution to this problem is the concept of databinding in Silverlight, this allows us to loosely couple business Logic ( ViewModel )to our UI ( View ) and display the data we want ( Model ).

To allow interaction with our ViewModel, we would also require some functionalities to be bound to some UI components such as buttons. For this we can use Commands, Silverlight 3 provides by default the ICommand interface, and the PRISM framework has made an implementation of this so we can define commands on our FrameworkElement using attached properties.

In Silverlight 4 there will be support for Commands out of the box for the ButtonBase and Hyperlink classes, so we will simply be able to bind to the Command property directly.

Setting it up

To make a MVVM application we will have to define a View and a ViewModel, a practice I like to use is to create two folders in our application to group our View’s and ViewModel’s so we have a clear view were our UI and our business logic is located.

As an example we will create a simple UI with a listbox and a button that will add quotes to it and display the data when the last quote was added.

The XAML for this view is straightforward :

<StackPanel Orientation="Vertical">
<ListBox Height="150"/>
<TextBlock />
<Button Content="Add Quote"/>
</StackPanel>

Notice that I have not yet defined any databinding here, we will first create our ViewModel and map our binding to this afterwards.

A ViewModel that wants changes in it to be propagated to the UI should implement INotifyPropertyChanged this will provide a NotifyPropertyChanged event that will have to be invoked whenever a property in our ViewModel changes. We will use an ObservableCollection to bind our quotes, to automatically trigger changes when we add new quotes.

This is the code for our ViewModel

public class ViewModel : INotifyPropertyChanged
{
    public ViewModel()
    {
        //Initialize our properties
        Quotes = new ObservableCollection<string>();
        AddQuoteCommand = new DelegateCommand<object>(onAddQuoteCommandExecute);
    }

    /// <summary>
    /// Command that will be triggered when a button was clicked and will add a quote to the Quotes collection
    /// </summary>
    public DelegateCommand<object> AddQuoteCommand { get; set; }

    /// <summary>
    /// The list of Quotes we will bind to our listbox
    /// </summary>
    public ObservableCollection<String> Quotes { get; set; }

    private DateTime lastModified;
    /// <summary>
    /// When was the list last modified
    /// </summary>
    public DateTime LastModified
    {
        get { return lastModified; }
        set
        {
            lastModified = value;
            InvokePropertyChanged("LastModified");
        }
    }

    /// <summary>
    /// When the AddQuoteCommand is triggered, it execute run this method
   /// </summary>
    private void onAddQuoteCommandExecute(object parameter)
    {
        //Add a generated quote
        Quotes.Add(QuoteFactory.Generate());
        //Set the last modified date
        LastModified = DateTime.Now;
    }

    public event PropertyChangedEventHandler PropertyChanged;
    /// <summary>
    /// Invoke that a property was changed
    /// </summary>
    /// <param name="propertyName">The propertyname</param>
    private void InvokePropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
         PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }

}

Now we can start binding our ViewModel to our View, there are a few ways you could to this, you could set the DataContext of the View in Code, or use dependency injection to initialize the ViewModel. But for this example I will just define an instance of the ViewModel in the XAML of the View in its DataContext. Now we can simple add the databinding to our ListBox ,our TextBlock and bind the Command to the Button. Silverlight will take care of the rest.

<ListBox Height="150" ItemsSource="{Binding Quotes}"/>
<TextBlock Text="{Binding LastModified}" />
<Button Content="Add Quote" Commands:Click.Command="{Binding AddQuoteCommand}"/>

Conclusion

This example illustrates that setting up MVVM is not very difficult and allows for a nice separation of UI code and business logic. You can, using MVVM, very easily define logic on several controls without having to write spaghetti code with events. You would simply bind to the changing property in the UI ( e.g. a checkbox that is checked ) and have your View adapt to it accordingly because the setter in the ViewModel can very easily trigger business logic to occur.

There are however cases where you cannot, or very difficultly, achieve this. You can not, for example, bind to a DependencyObject ( which is possible in WPF ). This will throw a XAML error in Silverlight 3. However, in Silverlight 4 it will be possible to bind to a DependencyObject, making life a bit easier for people implementing MVVM.

Silverlight 4 BETA – A first look

2009-11-18T13:16:00.001-08:00

Today Silverlight 4 beta was released !!

New with Silverlight 4 is a lot of features, a whole list of new stuff has been released, many of which are things I was really looking forward to ( native support for commands, binding on dependency objects, right clicking,text trimming , …).

So what are all the new features in Silverlight, well there is a whole list that can be found on the Blog of Tim Heuer.

http://timheuer.com/blog/archive/2009/11/18/whats-new-in-silverlight-4-complete-guide-new-features.aspx

You can expect a number of posts on Silverlight 4 in the coming days, as I am exploring this new version.

Exiting stuff !

Commanding with PRISM in Silverlight 3

2009-11-16T11:43:00.001-08:00

You have probably already heard about PRISM, but in case you, like me, have not really looked at it I thought I would write a small intro to using commands in PRISM.

What is PRISM ?

The Composite Client Application Guidance is designed to help you more easily build modular Windows Presentation Foundation (WPF) and Silverlight client applications. These types of applications typically feature multiple screens, rich, flexible user interaction and data visualization, and role-determined behavior. They are "built to last" and "built for change."

Source : http://www.codeplex.com/CompositeWPF/

Prism is a much broader field then just commanding, and I will spend a few future blogpost in explaining it a bit more in detail, but for now I am just going to talk about using Commands. Why, could you ask, well the main reason is that this is the biggest thing I was missing in Silverlight, a way to define ( in XAML ) how we want our UI to behave without having to attach unreadable event handlers like we would normally do.

For a detailed explanation on how commanding works you could visit the msdn website, but for a simple, back to basics solution, please read on.

MVVM

To illustrate our point we are going to create an MVVM application, what MVVM is and how we should work with it is something we will talk about in one of my next posts. The think here is that we will not have any code behind in our View ( Page ) and we will databind our ViewModel to it to be able to do some commanding.

The XAML code :

This is the xaml code we will place in our view class, for example “MainPage.xaml”, the code behind will be empty, appart from the standard InitializeComponent() call.

<UserControl.DataContext>
<local:ViewModel/>
</UserControl.DataContext>
<Grid x:Name="LayoutRoot">
<StackPanel Orientation="Vertical">
<TextBlock Text="Please enter the answer : "/>
<TextBox Text="{Binding TextValue}" x:Name="answer"/>
<Button Content="Ok" composite:Click.Command="{Binding ConfirmCommand}"
composite:Click.CommandParameter="{Binding ElementName=answer,
Path=Text}" />
<StackPanel>
</Grid>

The ViewModel

This is the ViewModel, this is a concept that I will explain in further detail in future posts, but the idea is that this ViewModel is databound to the View ( as we can see in the DataContext property in the View )

public class ViewModel : INotifyPropertyChanged
{
public ViewModel()
{
//Initialize the command, hooking up the execute method and the canexecute method
ConfirmCommand = new DelegateCommand<string>(execute, canExecute);
}

/// <summary>
/// Execute the command when it was clicked
/// </summary>
/// <param name="parameter">The Command Parameter that was given</param>
private void execute(string parameter)
{
MessageBox.Show(string.Format("You have succesfully answered : {0}", parameter));
}

/// <summary>
/// Can we execute the command, this will disable the related control if it cannot
/// </summary>
/// <param name="parameter">The command parameter that was given</param>
/// <returns>Can the command execute</returns>
private bool canExecute(string parameter)
{
//Can we execute the command
return parameter == "42";
}

private string textValue;
/// <summary>
/// Definition of our bindeable TextValue, with a trigger to update the UI
/// </summary>

public string TextValue
{
get { return textValue; }
set
{
textValue = value;
//Notifiy the property has changed
InvokePropertyChanged("TextValue");
//Notify the command that the conditions to execute have changed
ConfirmCommand.RaiseCanExecuteChanged();
}
}

public DelegateCommand<string> ConfirmCommand { get; set; }

/// <summary>
/// Track changes to the Properties, so the UI can know when to update the bindings.
/// </summary>

public event PropertyChangedEventHandler PropertyChanged;

private void InvokePropertyChanged(string property){
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(property));
}
}

So what exactly does this application do ? Well basically it check if your entered text in a textbox is equal to “42” and enables the Button if so. Nothing to complicated, just the answer to life the universe and everything (link).

Conclusion

I hope it is clear by this example what power Commanding has in Silverlight ( just like in WPF ) and how we can benefit from using it more extensively. Mainly the CanExecute makes a huge difference in how you can easily allow an application to respond to your input and adapt.

Silverlight Rx : System.Reactive

2009-11-07T01:23:00.000-08:00

Yesterday I came across the System.Reactive assembly that is included with the Silverlight Toolkit. On the blog of Jafar Husain

He has made a lot of posts about the Rx framework, and it is definitely interesting to read!

http://themechanicalbride.blogspot.com/2009/07/introducing-rx-linq-to-events.html

We can program in reaction to events and apply our logic on them. We could for example do some action only when an event is raised with a certain event argument. This embeds the Async handling of events and allows this code to be unit tested.

The big problem with asynchronous programming is that the code very quickly gets unreadable and hard to maintain, as it is not always clear how several events are linked to one another.

The Reactive framework works with the IObserver and the IObservable classes, which can be thought of as Reactive versions of IEnumerable in the context of Linq ( actually the extension methods have been added to the System.Linq namespace ). You basically look at the events being thrown as a collection you can browse trough.

So how does it work.

To quickly show how we can use Rx to simplify our code, We will write an extension method that will call a web client's DownloadString method and return a String.

public static class WebClientExtender
{

public static IObservable<string> GetSite(this WebClient client, string url)
{
var downloaded = Observable.FromEvent<DownloadStringCompletedEventArgs>
(client, "DownloadStringCompleted");
client.DownloadStringAsync(new Uri(url));
return downloaded.Select(x=>((DownloadStringCompletedEventArgs)x.EventArgs).Result);
}

}

To call this we can now simple add the following line of code to our Silverlight application.

new WebClient().GetSite("http://localhost/").Subscribe(x => MessageBox.Show(x));

This way we can very easily clean up the code and structure how the Asynchronous events are handled.

CollectionViewSource in Silverlight

2009-11-01T10:52:00.001-08:00

What is CollectionViewSource

The CollectionViewSource is a class that is used in WPF to apply sorting and filtering on Data. We can also use this class in Silverlight 3.
I came across it while studying for my WPF exam and noticed it was also available in Silverlight. So naturally I had a look. It is very easy to use as I will demonstrate below.

So lets have a look.

In this case, we have List of Person we want be able to Filter and Sort correctly.

A person could be defined like this :

public class Person
{
public String FirstName { get; set; }
public String LastName { get; set; }
}

To be able to use a CollectionViewSource we can define it as a resource in our XAML, we could also define it in code, but for this example we will write most in XAML.

<UserControl.Resources>
<local:PersonDataSource key="data">
<CollectionViewSource Source="{Binding Source={StaticResource data}}" x:Key="CollVS">
<CollectionViewSource.SortDescriptions>
<ComponentModel:SortDescription Direction="Descending">
</CollectionViewSource.SortDescriptions>
</CollectionViewSource>
</UserControl.Resources>

You see here that we defined a "data" datasource, we should create a class that will be able to store the information we need, lets call it PersonDataSource. We could also add some logic here to return some dummy data for now. For this example I chose to simply inherit from ObservableCollection and not add any additional logic, obviously you could use any collection here you would normally use to bind to a datagrid.

To finish our XAML UI, we add a DataGrid to display our data and a TextBox we can use for filtering. In our case we will apply filtering on the LastName.

<StackPanel Orientation="Vertical">
<data:DataGrid ItemsSource="{Binding Source={StaticResource CollVS}}"/>
<TextBox x:Name="filter"/>
</StackPanel>

Now we can define how we are going to do our filtering and make sure the filtering is visible in the User interface.

public MainPage()
{
InitializeComponent();
//Get the CollectionViewSource from the Resource of the UserControl
CollectionViewSource CollVS = (CollectionViewSource)Resources["CollVS"];
//Make sure we update the datagrid when we change our filter
filter.TextChanged += delegate { CollVS.View.Refresh(); };
//Subscribe to the filter event
CollVS.Filter += cvs_Filter;
}

void cvs_Filter(object sender, FilterEventArgs e)
{
e.Accepted = ((Person)e.Item).LastName.ToLower().StartsWith(filter.Text.ToLower());
}

So what did we do here ? First we needed to get our CollectionViewSource from our Resources. The most important thing here is that we do the following :

filter.TextChanged += delegate { CollVS.View.Refresh(); };

If we don't do this, our view will not update and we will not be able to see our filter.

To filter, we can change if an Item should be filtered by setting the Accepted property , the Filter will be called for every element in your collection.

The last step is to implement IComparable on our Person object , this is required by the CollectionViewSource to apply sorting on the Collection. The data will now be automatically sorted as it is filtered.

Downloading Dynamic files in Internet Explorer with SSL

2009-10-30T15:37:00.001-07:00

I recently had a problem while trying to download a file that was being generated dynamically from an ASP.NET application.

This was being done the following way:

Response.Clear();
Response.AddHeader("content-disposition", "attachment; filename=EXAMPLE.bin");
Response.AddHeader("Content-Transfer-Encoding", "binary");
Response.AddHeader("Content-Length", /* The length */);
Response.ContentType = "/*Wanted content type*/";
Response.OutputStream.Write(/* Your File */);
Response.Flush();
Response.End();

When you run this code this will work perfectly for Firefox and IE, allowing you to download the generated file.

However, once you enable SSL encryption on this website, you will get to following error message in Internet Explorer :

Internet Explorer cannot download <PAGENAME> from <SERVERNAME> .
Internet Explore was not able to open this Internet Site. The requested site is either unavailable or cannot be found. Please try again later.

You can fix this problem by adding the following line above your header definitions.

Response.ClearContent();
Response.ClearHeaders();

This way the request headers will be set correctly and you will be able to download your file from your SSL encrypted website.

Opening of My Blog

2009-10-30T15:06:00.001-07:00

Hi everyone,

My name is Maarten De Wilde, I am 21 years old. And I am currently working for RealDolmen.

I have been working with Silverlight 2 & 3 for the last year in combination with some ASP.NET development.

This blog, will present issues I have encountered during my development within these platforms as well as information regarding development in general.

I hope you will find my blog interesting to read.