Steven Hook's Blog

MVVM for non MVVM people : Part 2

2011-02-01T07:17:00.001-05:00

Picking up after part 1, where our artistically challenged software developer just finished writing a view model. We will continue with the user interface designer where he will

Create a beautiful and eye catching user interface.
Use Blend Behaviors to handle button click events
Define a special behavior that passes a property to the view model

The UI artist is using Expression Blend. After several months of designing he ends up with this:

With a layout like this:

Our artist did not graduate at the top of his class.

Wiring Up Commands on the View

You need to first attach a DataContext to the UserControl. A DataContext will help the application bind to the commands we created and it is even helpful at design time when setting the bindings. You want to set the DataContext at the highest level you can so that all the child controls will have access to the DataContext as well. Select the [UserControl] or LayoutRoot in your layout and create a new DataContext from the properties window. You will see your view model (VideoPlayerViewModel) in the list of choices. This class was created in part one of this post. Now we can reference those commands we created in the model.
To allow those commands to be executed you need to add a behavior to the element you want to make the command call. Click the PlayButton and add a behavior asset called “InvokeCommandAction”. Notice that it will become a child of the PlayButton.

Click on the command in your layout. Set the EventName that will invoke the command to be “Click”. Now all you need to tell it is what command to invoke. Click the tiny box on the right of the command property and click “Data Binding”. The Data Context tab reveals the relevant properties you can bind to. In this case you want to bind to the PlayCommand on your model. You can just as easily edit commands straight through Xaml if you prefer. Repeat these steps for your Pause and Stop buttons.

Now you have some great buttons but no media element source to control. The last command to hook up to the view is the MediaOpenedCommand. As you would expect, it is done the same way as the buttons only
with a different EventName. Select your MediaElement in the layout and add an InvokeCommandAction so that it is a child of the MediaElement. Change the EventName to be “MediaOpened” and set the command to be “MediaOpenedCommand” just as you did with the buttons. This just means as soon as the MediaElement has successfully loaded the source defined, invoke this action.

This command will have a catch though. If you remember, our developer is expecting us to provide our MediaElement so that it knows how to control the video. We can send this information to the model with this “MediaOpenedCommand”. You need to send the loaded media element as parameter. In the InvokeCommandAction properties, click the show advanced properties arrow in Common Properties to get more info. Click the tiny advanced options box to the right of the “CommandParameter” property. This time, we want to bind using the element tab and select the MediaElement in your view. Not a property on the MediaElement, just the MediaElement object.

Once the command parameter is defined you are finished.

You have just made the worst video player ever created, but you can feel good that you did it without writing any code behind and you were able to separate concerns between the developer and the user interface designer.

Mix11 Picks

2011-01-30T14:34:00.000-05:00

I just made my picks for MIX 2011 sessions. It is interesting to see the massive number of Silverlight sessions available. This MIX looks like it will have some great sessions that are going to be relevant to the work I am interested in.

Advanced Styling and Templating for Silverlight and WPF

WCF Patterns and Practices for Silverlight

Microsoft Surface v2 – designing for the new form factor

It's Only A Game

Using Metro Motion Design To Improve App Performance

HTML 5 for .NET Pros

Building an ASP.NET MVC 3 Mobile Application

Fun with ASP.NET MVC 3 and MEF

WebMatrix, ASP.NET & Razor - The easiest and fastest way to creating websites and dynamic webpages for beginners & professionals.

Coding Animation Across Silverlight, WPF, XNA and HTML5

Open Call voting closes February 4, 2011. What were your picks? I wish I could make it in person this year but that ticket price is just a bit too much for me. I'm still really looking forward to the web sessions though.

MVVM for non MVVM people : Part 1

2011-01-28T07:08:00.001-05:00

In my recent explosion of Silverlight development I have seen the term Model View ViewModel being thrown around a lot. I really enjoy writing Silverlight apps so I am interested in technologies that make that experience better/easier.

The MVVM pattern is easy to pick up for an ASP.NET MVC developer because both are working towards the same separation goals. While my use with MVVM has been relatively limited so far, I have found some great applications for it and I also recognize that it may not be the right tool for every Silverlight application.
I recently created a Silverlight Video Player from scratch for a presentation that follows the MVVM pattern and I thought it worked out great. I want to take you through that process now.

It is easy to visualize the result. I just want a way to wire up a video player. When the user presses play on the video player I want it to invoke some command and execute some code. Knowing that, I want to make a command for each button or each action that might normally have code behind in Silverlight.

Why Would You Do This?

Because MVVM is a buzz word and employers like it when you know buzz words! That may be true, but some people are turned off of by buzz word topics. If you are one of those people, just try and think of MVVM as a separation of concerns between a UI artist and a developer. You don’t want the artist messing around with your code, but if your code is in the code behind you do not have a choice. Your UI artist will be editing the xaml directly which will affect how the code behind file is generated. Alternatively, the UI developer does not want the untrained eye of the software engineer to alter the artist’s work.
There are also benefits with testing. Some may not find value in that benefit but you do if you regularly test code. MVC developers should appreciate and completely understand.

Getting Started

There are a few general thoughts on how to get started. Some say to start with your view and create your model off of the components you can see that you need to wire up. For example, if you drop on a play, stop and pause button on your UI, you know that your model needs to support a play, stop, and pause command that the UI will call.
Others prefer to create the model before creating the UI. This way you can build the UI off of the public exposure of the model.
I actually prefer creating the view before the model, but in this case I will be creating the model before the UI.

Creating the Model

To create the model you need to remember that the model is just a collection of commands that the view will be calling. Literally, they are commands! The command object descends from the ICommand interface. That means each of our commands will be implementing CanExecute and Execute. You’ll need to create a class that implements these (which is not difficult) or use a third party command. Either way, you need a way to create an ICommand descendant. I will be using the Mvvm Light Toolkit.

As you have probably figured out by now, your model will be doing the direct two way communication with the view. Because of this, the model class will need to descend from the INotifyPropertyChanged interface. From there you can just go nuts and define your public interface. Just think of whatever you might need to do in your player. If you’re new to MVVM you might think it will only take a few simple video navigation commands to get this working, but you need to remember that the goal is to not have code behind. That means, you should not be writing code for loading or initializing either. If your model needs to grow to accommodate, that is fine.

public ICommand PlayCommand { get; set; }
public ICommand PauseCommand { get; set; }
public ICommand StopCommand { get; set; }
public ICommand MediaOpenedCommand { get; set; }
public ICommand SetVideoSourceCommand { get; set; }

Then your constructor can create the concrete implementation or you can use dependency injection or an Inversion of Control container if you prefer.

PlayCommand = new RelayCommand(PlayVideo, CanPlayVideo);
PauseCommand = new RelayCommand(PauseVideo, CanPauseVideo);
StopCommand = new RelayCommand(StopVideo, CanStopVideo);
MediaOpenedCommand = new RelayCommand<MediaElement>(MediaOpened, CanMediaOpened);
SetVideoSourceCommand = new RelayCommand<string>(SetVideoSource, CanSetVideoSource);

Now we can get down to writing some code for those fancy commands. When conceptually thinking about how to tell the video how to play, you have to wonder, what is the video? Video in Silverlight is displayed in a MediaElement. We will need one of those in our class.

private MediaElement _mediaElement;

The PlayVideo() method has a really easy implementation!

public void PlayVideo()
{
    _mediaElement.Play();
}

If you want to make it more complicated you can… I like this implementation. From that I am guessing you can figure out what the implementation of the pause and stop buttons will be. One last thing to do for the play button, you will want to implement the CanPlayVideo() method. For me, I only want to play the video if it is not already playing.

private bool CanPlayVideo()
{
    return (_mediaElement != null && 
            _mediaElement.CurrentState != MediaElementState.Playing)
}

MediaOpenedCommand is intended to be invoked when the MediaElement has been loaded with a video. This code will need to remember what MediaElement has been loaded so the other commands can work properly. You can assume that the view will be passing in the MediaElement as the parameter. We set this requirement in the view models constructor when we passed the MediaElement type to the RelayCommand.

private void MediaOpened(MediaElement mediaElement)
{
    _mediaElement = mediaElement;
}

One command that may not be intuitive is the SetVideoSource() method. It is still simple though.

public void SetVideoSource(string source)
{
    MediaSource = new Uri(source, UriKind.Relative);
}

When the view calls the SetVideoSource command it will be passing a video source location in the form of string. This code will convert that to a Uri and set it to a public property on our model that we have not defined yet. Here it is:

private Uri _mediaSource;
public Uri MediaSource
{
    get
    {
        return _mediaSource;
    }
    set
    {
        _mediaSource = value;
        NotifyPropertyChanged("MediaSource");
    }
}

This code makes me angry. It is so close to being an automatic property using { get; set; } but the NotifyPropertyChanged messes everything up! Not only that, but I do not like having to pass in “MediaSource” as a string to the changed method. I think there is a lambda equivalent but I have a short attention span and I lost interest when Googling it.

Now for the confession: you do not really need to bind all UI elements to a command on a view model. You can bind the UI to anything on your model. It can be a string, Uri, a custom Silverlight type, or whatever you want as long as your view knows how to interpret the result. The commands are used for more of a method call where you are expecting an action to be performed (like the play button). You can use other types of binding to determine:

The duration of the video source
The current location in the video timeline
Does the video currently require buffering
If the video is buffering, how much longer will it be buffering

The list goes on, but really any information you want to show or bind to on your player is what you can define in your model.

As a developer you can now tell the UI artist to slap on their squiglies, rainbows, and unicorns… or whatever it is they do. The cool part is that they can use your model and it is simple enough that they can even wire it up without writing code. That is sweet.

Watching Movies with WCF and Silverlight

2011-01-27T09:30:00.000-05:00

I had a request from a member of the Silverlight Media Framework community to write a Silverlight application that retrieves a list of videos from a WCF service and plays the video using SMFPlayer. The member also had a requirement where he wanted to be able to have a separate Listbox show his available movies and when you click on a movie in the list it should load the movie into the player. This all started when I made a suggestion in the “How to change Video Source” thread and I said:

“I store information about videos in a SQL Server database. I have a large number of available videos that get loaded at various times in my application. To do this I am using WCF RIA Services. The idea is that I can make a call to a WCF Service to return me a list of my videos. Then my Silverlight assembly can process those videos into PlaylistItems that get fed to the SMF player.” –Steve Hook

I’m always happy to help if I can, and in this case I certainly can. Here is what you will learn in this tutorial

Using the Silverlight Media Framework player.
Retrieve a list of Movies from a WCF service.
Creating a playlist outside of the SMFPlayer.
Changing the movie selection with a ListBox.
Keeping a strong separation of concerns when retrieving movies for playback in Silverlight.
Using data transfer objects to limit transfer sizes.
Know when to use a Silverlight Class Library and when not to.
Using ItemTemplates for generated ListBox items
Basic MVVM using MVVMLight via NuGet.

The full code is also available at my blog’s bitbucket repository.

The Player

Create a Silverlight Application using Silverlight 4 and call it MoviePlayer. Host it in a web application when you are prompted. The web project will default to being named MoviePlayer.Web. It does not matter if you use ASP.NET or ASP.NET MVC or any other options. We will not be writing any web code. The test pages that are provided in the templates will be enough to demonstrate this example.
Make sure you already have the Silverlight Media Framework setup. You can download the binaries from their download page or grab them from my repository. Anyone who does Silverlight or WPF work knows that life is easier with Expression Blend. I will be using Blend for most of my XAML but it will not be necessary for this tutorial. Now, you can open either Blend or Visual Studio and start working on the MoviePlayer project. Open MainPage.xaml and define two columns on the LayoutRoot. The first column will hold the video player. The second column will hold our external playlist. Drop on the SMFPlayer in the first column. Drop a GridSplitter and Grid with a listListBox in the second column.

<Grid x:Name="LayoutRoot" Background="Black">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.673*"/>
        <ColumnDefinition Width="0.327*"/>
    </Grid.ColumnDefinitions>
    <smf:SMFPlayer x:Name="Player"/>
    <Grid
        Grid.Column="1"
        Margin="10,0,0,0">
        <ListBox />
    </Grid>
    <sdk:GridSplitter
        HorizontalAlignment="Left"
        Grid.Column="1"
        Width="10"
        Background="#FF323232"/>
</Grid>

Those namespaces are pulled from:

xmlns:smf="http://schemas.microsoft.com/smf/2010/xaml/player"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"

This will get you the basic layout of the page and we can come back to do the binding. If you were to run the application now you would see the video player with no video as well as a grid splitter that can change the size of the two columns. We know that we want to be using MVVM to bind our data to our views, so we can write some XAML in preparation for this. I like to write the view first because I feel that it creates a better, cleaner view model when you define the data the way the view would want to reference it. We know we want to provide the player a few things…

The playlist – The SMFPlayer needs a playlist of every movie you want it to play even if you are not using the built in playlist viewer.
The current playlist item – If you intend to change the currently playing movie from an external control (not from the built in playlist viewer from SMFPlayer) you will need some way of telling the player what movie you want to be watching.
Movies – The list of movies you have available to watch. This is not to be confused with the playlist. Perhaps you store more information about each movie than you provide in a playlist item. This list of movies can be your external playlist as demonstrated in the right column of the example screenshot above.

Writing binding support for the playlist items is simple. Modify your SMFPlayer to bind to these imaginary properties on our imaginary view model.

<smf:SMFPlayer
    x:Name="Player"
    CurrentPlaylistItem="{Binding CurrentPlaylistItem, Mode=TwoWay}"
    Playlist="{Binding Playlist}"/>

We bound the SMFPlayer property CurrentPlaylistItem to the view model’s CurrentPlaylistItem property (which does not exist yet). Since the player can also change the current playlist item we have defined the binding to be two way so that the player can notify the view model that the item has changed. We bound the SMFPlayer property Playlist to the view model’s Playlist property so we can provide the player a list of PlaylistItems it is permitted to show.

Binding the list of movies to the ListBox can be a bit more tricky to really show each movie in a way that you want. You can quickly just bind the ItemsSource property of the ListBox to the view model’s property Movies (which does not exist yet) but that only gets you halfway there. What is a Movie? We have not really defined that yet. I envision a Movie to be a class with some basic properties on it such as title and a path to the movie’s video file. The ListBox is not going to know how to display that class. You need to define a template for what each item looks like. In Blend, this is done by selecting the ListBox, right click > Edit Additional Templates > Edit Generated Items > Create Empty. Outside of blend you would need to write the code.

<UserControl.Resources>
    <DataTemplate x:Key="MovieListItem">
        <Grid>
            <TextBlock
                Text="{Binding Title}"
                Foreground="White"/>
        </Grid>
    </DataTemplate>
</UserControl.Resources>

<ListBox
    x:Name="listBox"
    Background="{x:Null}"
    BorderBrush="{x:Null}"
    Foreground="White"
    BorderThickness="0"
    ItemTemplate="{StaticResource MovieListItem}"
    ItemsSource="{Binding Movies}"/>

In this code I created a local resource then used it later in the ListBox by binding the ItemTemplate to the resource. You can also see the ItemsSource binding to the view model’s Movies property. My template is very basic, but know that this could be anything you want. Your template needs to have a Grid, but inside that grid it can be however you would like to show what a Movie is. My template simply has a TextBlock that binds a Movie property Title (that does not exist yet). Notice in my binding of Title that I did not need to say it is Movie.Title or Movie[x].Title. The application knows that because I bound my ItemsSource of my ListBox to be a list of Movies and the template is for one item of the ListBox, that the template will only be dealing with one Movie. Therefore, I can write my binding code directly off of a Movie class. That’s pretty awesome.

I think we have a good idea of what our models will look like now, but we still don’t know what this movie class is and where it comes from.

The Domain

Your domain and data access layer should be separated from your implementation. Start by creating a new .NET class library project called MovieLibraryData. This project is to demonstrate a layer that you may not have much control over. This is likely driven by Entity Framework models or some other form of connecting to a database of Movies. In my case this will contain a basic Movie class.

public class Movie
{
    public string Title { get; set; }
    public string Path { get; set; }
    // public IEnumerable<Comment> Comments { get; set; }
    // public IEnumerable<Review> Reviews { get; set; }
    // public IEnumberable<CastMember> Cast { get; set; }
    // public byte[] Poster { get; set; }
}

You should envision this class as having several complex types and possibly some methods/business logic. This could have collections of reviews or comments. Links to actors/actresses, producers, directors, etc. The point is, this could potentially be a complicated class.

For our movie player we really do not care about all that data. we just want the movie path and a little info about the movie. If you start thinking about where this data will come from you will realize it will be coming over an http request through a web service we have not created yet. So we know we need a simple class that is light weight and serializable. We need a data transfer object.

Create a new .NET class library project called MovieLibraryDto. This project will hold all of our light weight versions of the classes from MovieLibraryData so that we only have to send the properties we care about on the client. In the MovieLibraryDto project, create the class MovieDto.

[DataContract]
public class MovieDto
{
    [DataMember]
    public string Title { get; set; }
    [DataMember]
    public string Path { get; set; }
}

You’ll notice I did not use the [Serializable] attribute on the class. Instead I used a DataContract with DataMembers which comes from System.Runtime.Serialization. I have found this is a better approach. DataContracts give you control over the name and the namespace of the class and its properties as seen from the client. If you were to mark the class [Serializable] you will find many strange member names on the class when you get it on the client through a WCF service.

The Service

We need a way to get the movies from our domain/database to the client. Picture all of your movie watchers accessing a server out there somewhere that needs to give them the movies they want to watch. You need to create a service that can send those movies back to them. Then we’ll get into how Silverlight can call this service.

Create a new WCF Service Application project and call it MovieService. Add a reference to MovieLibraryData and MovieLibraryDto. If you look at what you get with this template you will see an interface and a svc file that implements that interface. Open the interface and rename it (using ReSharper or Visual Studio refactor rename) to IMovieRetrievalService.cs. Clear out the sample code Visual Studio adds so that your class looks like this

[ServiceContract]
public interface IMovieRetrievalService
{
    [OperationContract]
    IEnumerable<MovieDto> GetMovies();
}

We just want a simple method to get all of our movies. Your method could get specific movies if you wanted. You should notice a few things about our interface.

This interface is defining what we want our service to be capable of.
We are using those ServiceContracts again. These are required by WCF.
We are sending back a Dto. This is great because they are so light weight.

Open the .svc file and rename it to MovieRetrievalService and have it implement our new interface IMovieRetrievalService. Even Resharper can get confused when renaming a service file. You should check the markup of the svc file to make sure it reads Service="MovieService.MovieRetrievalService". In the MovieRetrievalService.svc.cs file we can write code to pull out our movies from the domain level. Once we pull out the movies (IEnumerable<Movie>) we need to convert them to data transfer objects (IEnumberable<MovieDto>). Here is my code.

public IEnumerable<MovieDto> GetMovies()
{
    IEnumerable<Movie> movies = GetMoviesFromDatabase();

    // You could also use AutoMapper to map the domain model
    // to the data transfer objects
    return movies.Select(movie => new MovieDto
    {
        Title = movie.Title,
        Path = movie.Path
    });
}

I call a mysterious GetMoviesFromDatabase() method that returns domain level Movie objects where I project each movie into a new MovieDto object and return that list. Mapping the Movie class to the MovieDto class is tedious in this case because the field names match one to one. A cleaner approach may be to use AutoMapper to do that mapping for us.

My GetMoviesFromDatabase() method call is just creating a static list of movies because I did not want to go through the trouble of creating a database in this example. You could replace this with retrieving data from your favorite database provider or repository that likely lives on the domain side.

private IEnumerable<Movie> GetMoviesFromDatabase()
{
    return new List<Movie>
    {
        new Movie
        {
            Title = "Microsoft Wildlife sample",
            Path = "http://smf.vertigo.com/videos/wildlife.wmv"
        },
        new Movie
        {
            Title = "We're All In at PDC10",
            Path = "http://ecn.channel9.msdn.com/o9/ch9/2497/0e8a5166-3984-4a91-925d-9e1500f92497/SharePointSideshow02_ch9.wmv"
        },
        new Movie
        {
            Title = "Silverlight TV 50",
            Path = "http://ecn.channel9.msdn.com/o9/ch9/d274/e69539b7-2e75-462d-a614-9e150175d274/sltv50_ch9.wmv"
        },
        new Movie
        {
            Title = "Silverlight TV 16",
            Path = "http://ecn.channel9.msdn.com/o9/ch9/6/7/5/6/3/5/SLTV16SL4RCPanel_ch9.wmv"
        }
    };
}

It just so happens that each of my videos I selected are wmv files. This is not a requirement. Silverlight has several other supported video formats.

Before we move on you should be aware of access policies. You have the option to define who can see and call your service. This is done through a ClientAccessPolicy.xml file. Create this file with that exact name in root of the MovieService project. You can start with a base that gives everyone access to this service by using this code:

<?xml version="1.0" encoding="utf-8"?>
<access-policy>
    <cross-domain-access>
        <policy>
            <allow-from http-request-headers="*">
                <domain uri="*"/>
            </allow-from>
            <grant-to>
                <resource path="/" include-subpaths="true"/>
            </grant-to>
        </policy>
    </cross-domain-access>
</access-policy>

You should now be able to right click the MovieService project and debug run the service to open a port. If you are looking for the traditional welcome page from other types of web services you can click on the MovieRetrievalService.svc in the directory listing when the web page comes up.

Calling The Service

Now that you are capable of retrieving the list of movies, you just need to find something to call the service. Your first thought might be just add a service reference from MoviePlayer so that you can call the service from the Silverlight assembly. Unfortunately you cannot do this. You will get several errors:

“Custom tool error: Failed to generate code for the service reference ‘ServiceReference1’.”

“No endpoints compatible with Silverlight 4 were found. The generated client class will not be usable unless endpoint information is provided via the constructor.”

“Cannot import wsdl: binding …”

The point is, Silverlight is upset. You cannot call a WCF service directly from the Silverlight application. In fact, your Silverlight application can only interact with Silverlight class libraries. Create a new Silverlight class library project called MovieServiceClient. Right click the references in this new project and add a service reference. If you click discover you should see your localhost web service running from the previous steps. Name this reference MovieServiceReference. Once you click OK and get your service reference you will notice a new file called ServiceReferences.ClientConfig. This is an evil file. It stores all the connection information for if you ever need to update your service reference. This is evil because this information can change depending on your build configuration but it’s not in the web config so you cannot really do a web config transform. We’ll get back to that.

Now you can reference the MovieServiceClient project from MoviePlayer because they are two Silverlight assemblies talking to each other. Exciting, I know.

We can revisit the Silverlight UI, but before we do that I want to make sure a few things are clear. You have created six projects. It is important to understand each project and its role:

MoviePlayer.Web - Provides a way to show the Silverlight application in a browser
MoviePlayer - This is our Silverlight application that holds our movie and navigation controls. This is the user interface.
MovieService - The service lives on the server. It communicates with the database/domain models to retrieve the movie objects, convert them to data transfer objects (dto) and send the light weight objects back to the client
MovieServiceClient - This is a Silverlight class library that is reverenced by MoviePlayer. It provides a web reference to MovieService to allow the Silverlight application to make a WCF service call.
MovieLibraryData - A .NET class library to mimic a real and possibly complicated data access layer. The MovieService will be using the Movie class in this library and convert it to a MovieDto.
MovieLibraryDto - A .NET class library that contains light weight object designed to be serialized. The MovieService will be using the MovieDto class in this library and send it back to the MovieServiceClient.

Setting up MVVM

Make sure you have NuGet installed and add a reference to Mvvm Light Toolkit in the MoviePlayer project by right clicking References and selecting “Add Library Package Reference”. If you are not familiar with NuGet, you can think of it as a fancy way to add DLLs to your project.

Create a class called MoviePlayerViewModel.cs in the MoviePlayer project. This class will contain all the movie information you will be showing on the view. The view model just organizes this information so the view can simply reference a property on the view model to get its data. This class needs to implement the interface INotifyPropertyChanged found in System.ComponentModel.

public class MoviePlayerViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

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

Now you can add public properties to this class. Every public property you provide here will be available to the view. Lets add a few that we know we will need. We know we will have a playlist, and if you look at the SMFPlayer you will see that the Playlist property is expecting a collection of PlaylistItem. MVVM binding works off of a System.Collections.ObjectModel.ObservableCollection<T>. Knowing this we can start to create some properties on our view model.

private ObservableCollection<PlaylistItem> _playlist;
public ObservableCollection<PlaylistItem> Playlist
{
    get { return _playlist; }
    set
    {
        _playlist = value;
        NotifyPropertyChanged("Playlist");
    }
}

private ObservableCollection<MovieDto> _movies;
public ObservableCollection<MovieDto> Movies { ... }

private PlaylistItem _currentPlaylistItem;
public PlaylistItem CurrentPlaylistItem { ... }

See the list of Movies? It is of type MovieDto that we created in the MovieLibraryDto project. You would think you would need to add a reference to that project to get this type, but remember that you cannot add a reference to a non Silverlight class library within a Silverlight application. You will get this type through the MovieServiceClient when you created the service reference to MovieService it recreated those types so the MovieServiceClient can provide those types to the assemblies that call it.

Create a constructor in the view model and lets get some movies from that service.

public MoviePlayerViewModel()
{
    ...
    PopulateMovies();
}

private void PopulateMovies()
{
    var movieService = new MovieRetrievalServiceClient(
        new BasicHttpBinding(),
        new EndpointAddress("http://localhost:49885/MovieRetrievalService.svc"));

    movieService.GetMoviesCompleted += GetMoviesCompleted;
    movieService.GetMoviesAsync();
}

We got a MovieRetrievalServiceClient class from MovieServiceClient.MovieServiceReference. Notice all the parameters on the constructor. You don’t actually need these. Instead you could provide a copy of the ServiceReferences.ClientConfig file from the MovieServiceClient in the root of the MoviePlayer project. Why would you do that though? We have already established that file is evil. Create the bindings in code that way you could extract out that information into a config file or something where you could change the endpoint without rebuilding the solution or ripping apart the XAP file. Make sure your path points to the localhost port that was opened when running your WCF Service.

The client class has a GetMoviesAsync method on it that calls our GetMovies method on the MovieService. You need to give it a callback to execute once the asynchronous method call completes.

private void GetMoviesCompleted(object sender, GetMoviesCompletedEventArgs e)
{
    Movies = e.Result;
    if (Movies == null)
        return;

    var playlistItems = Movies.Select(movie => new PlaylistItem
    {
        Title = movie.Title,
        MediaSource = new Uri(movie.Path)
    });

    Playlist = new ObservableCollection<PlaylistItem>(playlistItems);
    CurrentPlaylistItem = Playlist.FirstOrDefault();
}

e.Result is our strongly typed list of ObservableCollection<MovieDto> just like we defined on our Service interface. We can save off that list of movies but we also need a list of playlist items to feed to the Silverlight Media Framework player. We can project new playlist items from the list of movies as shown in the code snippet. Then create a new observable collection with this list of playlist items.

Connecting the View Model to the View

If you've been paying attention you know that we have never told the view how it retrieves its data. We have told it what properties to pull from, but never from what object. To do this we can simply add a DataContext to the LayoutRoot of the MainPage.xaml. Before you add the DataContext you should think about what that does when you add it. You are really saying everytime you show the MainPage I want you to create a new MoviePlayerViewModel and use that for your data. This literally calls the default constructor, even when in design mode (Expression Blend and Visual Studio designer). You need to be aware of this and handle it appropriately. For instance, if we are in the designer we do not want our code calling the service and pulling down movies. Although, it would be nice to see some sample data so we can see how the page is organized with data on it. There are mechanisms in place to do just that. You can rewrite your PopulateMovies() method to use DesignerProperties.IsInDesignTool.

private void PopulateMovies()
{
    if (DesignerProperties.IsInDesignTool)
    {
        Movies = new ObservableCollection<MovieDto>
        {
            new MovieDto
            {
                Title = "Sample Movie 1",
                Path = "http://sample.path"
            },
            new MovieDto
            {
                Title = "Sample Movie 2",
                Path = "http://sample.path"
            },
            new MovieDto
            {
                Title = "Sample Movie 3",
                Path = "http://sample.path"
            }
        };
    }
    else
    {
        ...
    }
}

Now you can safely attach your view model to your view. In Blend you can select the LayoutRoot of MainPage.xaml. Click new DataContext and select MoviePlayerViewModel.cs from the list. In xaml it looks like this:

<Grid x:Name="LayoutRoot" Background="Black">
    <Grid.DataContext>
        <local:MoviePlayerViewModel/>
    </Grid.DataContext>
    ...
</Grid>

with a namespace of “xmlns:local="clr-namespace:MoviePlayer"” defined. Once you add the DataContext to your xaml and you have your bindings defined from previous steps you will start to see some data in your view!

Run the Web application (MoviePlayerTestPage.aspx or MoviePlayerTestPage.html) and you will see even more. Now it knows you are not in the designer and uses the WCF service to pull down the list of movies. It populates a list of playlist items, a current playlist item, and the list of movies on the side just like the screenshot from the beginning of the post.

This is great progress, so congratulations.

Changing the Current Movie

If you click on the playlist built into the SMFPlayer and select a different movie you can change the currently playing movie. One of the goals of this tutorial was to have an external playlist. If you click on another movie in the list to the right of the SMFPlayer it will not change the currently playing movie. We can fix this.

This time let’s start at the view model and create a new property for handling the change in movie.

public ICommand MovieSelectionChangedCommand { get; set; }

MVVM commanding works through the ICommand interface. ICommand works off of the idea that you have code you want to execute when this command happens and you also have code you want to execute to determine if you can execute the command. ICommand can also support parameters that the view can pass you. You could write your own implementation of an ICommand or you could use one from the Mvvm Light Toolkit (which you installed in the MVVM section). This toolkit has an implementation of ICommand called RelayCommand that supports defining the type of CommandParameter you expect the view to be sending you. In this case we want the view to tell us what movie the user selected. We can create a command for this in the constructor of the MoviePlayerViewModel.

public MoviePlayerViewModel()
{
    MovieSelectionChangedCommand = new RelayCommand<MovieDto>(MovieSelectionChanged, CanMovieSelectionChange);
    ...
}

I am using the generic version of RelayCommand to say that my view will be providing me a MovieDto as a parameter. The first parameter to the RelayCommand constructor is what method to execute when the command is called. The second parameter is what method to execute to determine if the command can be executed. You will need to implement these methods.

private bool CanMovieSelectionChange(MovieDto movie)
{
    return movie != null;
}

private void MovieSelectionChanged(MovieDto movie)
{
    var playlistItem = Playlist.Where(item => item.Title == movie.Title).FirstOrDefault();
    CurrentPlaylistItem = playlistItem;
}

I have a rather crude way of finding the playlist item from the playlist. You could change that to something more realistic if you had some unique identifier for a movie. Once you have the playlist item you just set the item to be the current playlist item which is bound to the view. When the CurrentPlaylistItem changes the NotifyPropertyChanged method in the setter will tell the view that it has a new playlist item and the SMFPlayer will change the movie.

Now that we have a command written up in the view model we can attach it to the view. In Blend, select the ListBox, go to Assets > Behaviors > double click InvokeCommandAction. This will nest the action with the ListBox. There are three properties you need to change.

Change the event to be “SelectionChanged”.
Click the advanced options of the “Command” property in Common Properties. Select “Data Binding…”. Select the MovieSelectionChangedCommand from the “Data Context” tab and click OK. If you do not see the command in the list you may need to rebuild the solution.
Click the “Show Advanced Options” arrow in the Common Properties. Click the advanced options of the “Command Parameter” property. Select “Data Binding…”. On the Element Property tab select the ListBox on the left panel and the SelectedItem property on the right panel.

Remember that we used a list of Movies as the ItemsSource for the ListBox. Even though the SelectedItem says it is of type Object, we know that is going to be a MovieDto and that’s awesome. In the end we know that when the ListBox selection changes our command is going to call the view models CanMovieSelectionChanged(movieDto) if that is true it will call MovieSelectionChanged(movieDto) Here is the xaml you just generated.

<ListBox x:Name="listBox"
    ...
    ItemTemplate="{StaticResource MovieListItem}"
    ItemsSource="{Binding Movies}" BorderThickness="0">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="SelectionChanged">
            <i:InvokeCommandAction
                Command="{Binding MovieSelectionChangedCommand}"
                CommandParameter="{Binding SelectedItem, ElementName=listBox}"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
</ListBox>

Once you have the command finished you can run it and see that if you click on a different movie it will change the movie in the player.

Summary

The goal of this post was to give you the functionality required to get a list of movies from a WCF service and feed them to a SMFPlayer. This base will allow you to make changes to suit your needs whether it is domain level or UI level. I will write another post showing what sort of UI is possible when starting with a base like this.

You can download the full source from my bitbucket blog code repository.

WPF Borderless Window Controls

2011-01-25T07:25:00.000-05:00

The first challenge I tackled when writing Metro Stack was creating that Microsoft Zune player feel with no border while still supporting a draggable and resizable window. I have created an isolated project to demonstrate how you can do this.
Creating a borderless window that supports resizing is simple. Here is the code:

<Window
    ...
    ResizeMode="CanResizeWithGrip"
    WindowStyle="None"
    AllowsTransparency="True">
    ...
</Window>

Just three properties can get you a borderless window like you would expect. WindowStyle will remove the standard control box. AllowsTransparency will remove the border. ResizeMode will give you a drag option in the bottom right of the window.

When I initially thought of creating a custom control box for the minimize, maximize, and close buttons I started thinking how annoying it would be to find or create images for each function and possibly for each state of the button. I got less interested in making them the more I thought about it. Then I heard about people doing this using Wingdings and I thought that was a great idea! This would also allow me to handle different effects for MouseOver and Pressed events easier. Getting this going was rather simple. I just created a TextBlock, changed the font to Wingdings and entered the appropriate character for the symbol I am looking for. For example, the close button would look like this:

<TextBlock
    x:Name="CloseButton"
    Text="r"
    FontFamily="Webdings"
    Foreground="Gray"
    Margin="5,0,0,0"
    HorizontalAlignment="Right"
    VerticalAlignment="Top"
    MouseLeftButtonUp="CloseButtonMouseLeftButtonUp" />

I decided to go with traditional code behind because I find it appropriate that these controls are the concern of the view.

Accomplishing the window drag was not too bad either. For my application, I wanted just a portion of the window to be dragable. To do this I created a new grid to act as the window drag handle.

<Grid x:Name="LayoutRoot"
    Background="White">
    <Grid 
        x:Name="HeaderGrid" 
        Height="50" 
        VerticalAlignment="Top">
        <Grid 
            x:Name="DragableAreaGrid"
            Background="White"
            MouseDown="DragableGridMouseDown"/>
        ...
    </Grid>
</Grid>

There were a few tricks I had to play to get the dragable area working with the control box. Notice that the DragableAreaGrid has a background of white, which is really just on top of another grid that is white. This is done so that the user actually has some surface area of the DragableAreaGrid to grab on to. If this were a transparent background you would never be able to invoke the MouseDown event of the grid.

Here is the full XAML code for this sample:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    x:Class="Metro.CustomControlBox"
    x:Name="Window"
    ResizeMode="CanResizeWithGrip"
    WindowStyle="None"
    AllowsTransparency="True"
    Width="640"
    Height="480">
    <Grid x:Name="LayoutRoot"
        Background="White">
        <Grid 
            x:Name="HeaderGrid" 
            Height="50" 
            VerticalAlignment="Top">
            <Grid
                x:Name="DragableArea"
                Background="White"
                MouseDown="DragableGridMouseDown"/>
            <StackPanel
                Orientation="Horizontal"
                Margin="0,5,5,0"
                HorizontalAlignment="Right"
                VerticalAlignment="Top"
                Background="White">
                <TextBlock 
                    x:Name="ChangeViewButton"
                    Text="2"
                    FontFamily="Webdings"
                    Foreground="Gray"
                    Margin="0"
                    VerticalAlignment="Top"
                    HorizontalAlignment="Right"
                    MouseLeftButtonUp="ChangeViewButtonMouseLeftButtonUp" />
                <TextBlock
                    x:Name="MinimizeButton"
                    Text="0"
                    FontFamily="Webdings"
                    Foreground="Gray"
                    Margin="5,0,0,0"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Top"
                    MouseLeftButtonUp="MinimizeButtonMouseLeftButtonUp" />
                <TextBlock
                    x:Name="MaximizeButton"
                    Text="1"
                    FontFamily="Webdings"
                    Foreground="Gray"
                    Margin="5,0,0,0"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Top"
                    MouseLeftButtonUp="MaximizeButtonMouseLeftButtonUp" />
                <TextBlock
                    x:Name="CloseButton"
                    Text="r"
                    FontFamily="Webdings"
                    Foreground="Gray"
                    Margin="5,0,0,0"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Top"
                    MouseLeftButtonUp="CloseButtonMouseLeftButtonUp" />
            </StackPanel>
        </Grid>
    </Grid>    
</Window>

Here is the code behind for this XAML window:

using System.Windows;
using System.Windows.Input;

namespace Metro
{
    public partial class CustomControlBoxWindow : Window
    {
        public CustomControlBoxWindow()
        {
            InitializeComponent();
        }

        private void CloseButtonMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            Close();
        }

        private void MaximizeButtonMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            WindowState = WindowState.Maximized;
        }

        private void ChangeViewButtonMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            WindowState = WindowState.Normal;
        }

        private void MinimizeButtonMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            WindowState = WindowState.Minimized;
        }

        private void DragableGridMouseDown(object sender, MouseButtonEventArgs e)
        {
            if (e.LeftButton == MouseButtonState.Pressed)
                DragMove();
        }
    }
}

The code behind is just slap happy code, but really there is not much more to it. Notice the condition in the DragableGridMouseDown event. You will get an exception if you try and call DragMove() if the user was dragging with any other button other than the primary button. InvalidOperationException: Can only call DragMove when primary mouse button is down.

Checking for the LeftButton is probably not the best idea but it demonstrates something to watch out for. I doubt this code would work with a left handed mouse as the input device may consider the RightButton to be the primary button.

Other tricky parts to watch out for is how your DragableAreaGrid interacts with your new control box. If the controls are within the DragableAreaGrid the grid will handle your mouse events for the controls. Because of this, I have added my controls side-by-side (rather than the controls in the dragable grid) with my DragableAreaGrid. You will also run into the same background problem with the control grid if your controls sit on top of your DragableAreaGrid. Unless you put a background color on your controls you will only get a click event on your controls if you hit it perfectly on the wingding character. Don’t be sad though. There are tricks inside of tricks for that. If you truly do not want a color for your background but you need some surface area to be able to catch that mouse input you can set the alpha channel of the background to be 1% so you can’t even see the background but it’s there as a clickable space.

Metro Stack

2011-01-24T12:56:00.001-05:00

I have a low attention span for side projects. I’ve come to find out that if I cannot complete the project in two days, the chances of me finishing that side project rapidly diminish. I am starting to accept this and find ways to increase my two day window. Metro Stack was created out of a challenge from John Nelson to create a well written Metro template. John did a great job on some mockups for a blog he and I are working on that followed the Metro theme. I thought I could one-up him and create a template for a WPF application that could work for any list driven content. Knowing fully that I had approximately two days to finish the project, I began.

The thought was to create a simple template with minimal to zero code behind. You would be able to populate a view model that contained all the data that is relevant to your application. Then you could override the styling in Blend for whatever different theming or additional behavior you needed. Going into the application I knew of some of the challenges in a Metro design:

No window border or title bar while also supporting a mouse drag
A custom control box
Strong use of Segoe UI
Docking/Undocking a window with no border
Drop shadow around the application window
Animations! Metro is all about subtle slide in animations everywhere.
Making a pivot control for WPF

As I was writing the themed WPF page I started thinking, “How am I going to show that I am clearly the better programmer over John without some data to show in it?” I needed some interesting sample data to show to a developer. Twitter or Netflix are the usual victims of a sample data feed but why not be different. I wanted to create a Metro themed Stack Overflow.

It was at this moment that Metro Stack was born.

Since then, I have migrated my project to be exclusively Metro Stack and put the Metro templating project on the shelf for another day (or never). Before I made the decision to switch projects I dumped an entire day into the Metro Stack UI and MVVM binding support to start tackling the known challenges. I came up with some pretty impressive results for one day, but more importantly I got to reset my side project timer! Since I switched ideas I am back to zero days of development and have a fresh two days to finish my project. That’s good because there are all new types of challenges when writing a Stack Overflow reader. To ensure that I don’t abandon the project immediately after posting this I registered Metro Stack on StackApps.

For now, I’ll leave you with a prototype screenshot with real data from Stack Overflow. The application gets inspiration from MetroTwit and the Microsoft Zune player. Look for more posts explaining how I tackled these challenges.

Note: OK, I don’t really stick to a strict two day per side project schedule, but I do tend to get distracted from projects and never go back. I just wanted to make sure that I stick with this one for as long as it is still interesting and useful.

Silverlight DataGrid Column Binding

2010-12-10T09:05:00.000-05:00

I may be relatively new to Silverlight and MVVM but I know enough that I should be able to bind to a ObservableCollection<DataGridColumn>. What’s up with that?

I tried forcing the binding in code and it tells be that Columns does not have a setter. What if my columns need to change at runtime? In my case they do! I have a feeling that columns will be bindable in the future so I want a solution that will be easy to swap out into an MVVM solution when this functionality becomes available. I just created a solution that worked for me, hopefully it works for you.
Starting with my view model I want to add an ObservableCollection to hold my columns I want the view to bind to.

private ObservableCollection<DataGridColumn> _columns;
public ObservableCollection<DataGridColumn> Columns
{
    get
    {
        return _columns;
    }
    set
    {
        _columns = value;
        NotifyPropertyChanged("Columns");
    }
}

This is common MVVM code, having a class that implements INotifyPropertyChanged. It is also important to note that this is the same way it would be implemented if binding in xaml actually worked for DataGridColumns. Now I can modify this local list and ideally the Column list would be bound in xaml to the DataGrid.Columns property.

public MyViewModel()
{
    ...
    Columns = new ObservableCollection<DataGridColumns>();
}

public ChangeDataGridColumns()
{
    Columns.Clear();
    Columns.Add(new DataGridTextColumn
    {
        Binding = new Binding("Column1"),
        Header = "Column1Header",
        Visibility = Visibility.Visible
    });
    ...
}

This code is simply creating a new column collection then eventually some action will call ChangeDataGridColumns which will remove all other columns and create a new column or columns. I am also demonstrating a binding in code. Elsewhere in my view model I am binding the DataGrid.ItemsSource property to an ObservableCollection<Widget>. The binding is the property that says show the column Widget.Column1 as the data for this column.

The interesting thing here is that now I can bind to stuff that even Blend doesn’t allow you to bind to, like Header and Visibility. In my case, this is valuable because my users can specify what they want the Header text to be for each column and I determine its visibility at runtime based on certain criteria.

Now I need to write some view code. MVVM purists might want to stop here.

Since the Columns list on a DataGrid is an ObservableCollection we have a changed event we can access. I wrote some basic code behind to get to a loaded event and wire up an event handler for the Columns CollectionChanged event.

public MainPage()
{
    InitializeComponent();
    Loaded += MainPageLoaded;
}

private void MainPageLoaded(object sender, RoutedEventArgs e)
{
    ...
    myViewModel.Columns.CollectionChanged += ColumnsCollectionChanged;
}

This is really doing the same thing binding does, only we’re going to see the code. The idea is that in the ColumnsCollectionChanged handler we are going to recognize changes to the view model’s Column collection and make the same changes on the view’s DataGrid control. I just recently wrote this code so I might not have worked out all possible scenarios yet.

private void ColumnsCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
{
    if (e.Action == NotifyCollectionChangedAction.Reset)
    {
        myDataGrid.Columns.Clear();
    }
    else if (e.Action == NotifyCollectionChangedAction.Add)
    {
        foreach (DataGridColumn column in e.NewItems)
        {
            myDataGrid.Columns.Add(column);
        }
    }
    else if (e.Action == NotifyCollectionChangedAction.Remove)
    {
        foreach (DataGridColumn column in e.OldItems)
        {
            myDataGrid.Columns.Remove(column);
        }
    }
}

It may not be perfect MVVM code but it can’t be. Once the ObservableCollection<DataGridColumn> property can be bound all we need to do is take out this crappy code behind and replace it with:

<sdk:DataGrid
    x:Name="myDataGrid"
    ItemsSource="{Binding Widgets}"
    Columns="{Binding Columns}"
    AutoGenerateColumns="False"/>

Until then… the code behind solution will work.

JavaScript Bridge for Silverlight

2010-11-22T09:43:00.003-05:00

I’ve been using JavaScript to send simple messages to and from Silverlight for quite some time now. I have even talked about it in my “ASP.NET MVC and Silverlight Playing Nice” talk at the Pittsburgh .NET meeting and most recently at Pittsburgh Code Camp 2010.2.
I added a simple JavaScript/jQuery bridge to the MVCSilverlight project I have used in previous posts. If you have not read the other posts, MVCSilverlight demonstrates basic Silverlight integration into a ASP.NET MVC project. This demonstration could also apply to a web forms project with a few minor changes.
Let’s start off with the view. My index view for my ASP.NET MVC project looks like this…

<h2>Javascript Bridge Example</h2>
<input id="message" type="text" value="Message" />
<input id="send-message" type="button" value="Send Message" /> 

<h2>Silverlight Integration</h2>
<p>
<%: Html.DisplayFor(m => m.SilverightSample) %>
</p>

I want to start with communication from Silverlight to the web because it is relatively simple. Don’t be afraid of the DisplayFor in the Silverlight integration. That is the display template I have setup to show my Silverlight Plugin. The idea is that I want to write a message in the Silverlight message input, click the send button and Silverlight sends that message to the web page and processes the message.

My Silverlight page is still called MainPage and no, this sample is not using MVVM so we will be using good ol’ code behind. On our button click from the Silverlight Send Message button we want to communicate with the html page and access a JavaScript method if it exists. You can write the code just like that. Here’s the Silverlight button click code.

private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
{
var script = (ScriptObject)HtmlPage.Window.GetProperty("MessageFromSilverlight");
script.InvokeSelf(MessageTextbox.Text.Trim());
}

It is pretty close to what I said. Access the System.Windows.Browser.HtmlPage class and get a property (in this case a function) called MessageFromSilverlight. The one non-intuitive part of this is casting the property to ScriptObject. Once you have a reference to the script you can invoke it with any number of arguments you want. In my case, I am passing the text from the message textbox.
On the web page side of this. You can add some JavaScript to the page and define a function that the Silverlight method can see.

<script type="text/javascript">
function MessageFromSilverlight(message) {
alert('Silverlight tells Web "' + message + '"');
$('#message').val(message);
};
</script>

If you happen to spell the JavaScript function name incorrectly then try to access the script object you will get a NullReferenceException so be sure to handle that properly.

That is the entire process for sending information from Silverlight to the Web page.

Web to Silverlight

Communication from the web page to Silverlight requires just a little bit more knowledge of how the two can talk to each other. In the MainPage.xaml, define the method you want the web page to call via JavaScript. You can write this just like any other public method. Once that is written, one of the keys to opening that communication is decorating your method with the attribute [ScriptableMember]

[ScriptableMember]
public void MessageFromWeb(string message)
{
MessageTextbox.Text = message.Trim();
}

You would think that is all you need to do, but there are two more steps in Silverlight. Even though you told the method it can be called by decorating it with [ScriptableMember], you also need to decorate the class with the attribute [ScriptableType]. If you read the description of these two attributes, you will be even more confused, because I have not found the descriptions to be accurate.

[ScriptableMember]
Indicates that a specific property, method, or event is accessible to JavaScript callers.

[ScriptableType]
Indicates that all public properties, methods, and events on a managed type are available to JavaScript code…

From the descriptions, you would think you would only need the [ScriptableMember] or only need [ScriptableType] without [ScriptableMember] and JavaScript would be able to access it. I have not found this to be the case. You need both attributes defined. Additionally, you need to register the class with a name so that JavaScript can call it. You do this in the constructor.

public MainPage()
{
InitializeComponent();

if (HtmlPage.IsEnabled)
HtmlPage.RegisterScriptableObject("Communicator", this);
}

Notice the RegisterScriptableObject call. You can name the reference anything you want. This name will be used in JavaScript when you reference the Silverlight plugin.

Let’s take a look at the JavaScript side of calling Silverlight. First I am going to use jQuery to wire up my button click on the html page so that it calls a JavaScript function when I click it.

<script type="text/javascript">
    $(document).ready(function () {
        $('#send-message').click(function () {
            var message = $('#message').val();
            MessageToSilverlight(message);
        });
    });
</script>

When I click the button on the html page it will call MessageToSilverlight with the message typed in the html textbox. Now we can define the JavaScript function to call Silverlight. First, we need to reference the html <object> tag that Silverlight uses. I abstract this object tag away so I don’t have to deal with it. If you want to see where it is in my code, it is in my DisplayTemplates. Define an id on that tag, something like: <object id=”silverlight-plugin” …>. Now you can reference that object tag and communicate with it. You have a stylistic choice on how you want to get that object control. If you know JavaScript, you can use:

var control = document.getElementById('silverlight-plugin');

If you are afraid of JavaScript, you have a few options. Either way, you need to use JavaScript to get to that “Communicator” scriptable object we created in Silverlight, but you can get there through jQuery if you understand how jQuery selects elements. jQuery selects a list. Even if you select one element, jQuery will consider that a list of one element. You can achieve the same functionality as JavaScript’s getElementById if you use jQuery’s get method. It is important to note that once you get a result from jQuery’s get method you are no longer in jQuery. You can no longer use jQuery methods on that result. Here is the jQuery equivalent.

var control = $('#silverlight-plugin').get(0);

Once you have the control you would think you could just call: control.Communicator.MessageFromWeb(message);. Unfortunately, there is one more level of complexity. The Communicator scriptable object we defined is off of the control’s context property. Your end result method call becomes:

function MessageToSilverlight(message) {
    alert('Web tells Silverlight "' + message + '"');

    // JavaScript selector
    //var control = document.getElementById('silverlight-plugin');

    // jQuery selector
    var control = $('#silverlight-plugin').get(0);

    if (control != null) {
        control.content.Communicator.MessageFromWeb(message);
    }
};

You can view the entire source code for this project at my blog’s BitBucket page.

Parsing XML using C#

2010-11-03T17:24:00.003-04:00

Time after time I find myself referring to a stack overflow post that I answered when I need to write code to parse XML quickly. I thought I would blog the code instead. If nothing else, it will save me a few clicks.
Considering I have the following XML:

<Changesets>
    <Changeset>
        <id>185:04dbb0d95f27</id>
        <User>shook</User>
        <Date>Wed Nov 03</Date>
        <Summary>Text Here</Summary>
    </Changeset>
</Changesets>

Start off with a new using

using System.Xml.Linq;

Write a linq query to open your xml file. Get the descendants of the element that is grouping the elements you want to parse. Then do something with the result. In my case I am populating and returning a container object.

XDocument changesetXML = XDocument.Load(Server.MapPath(@"~\changesets.xml"));

return from changeset in changesetXML.Descendants("Changeset")
       select new ChangeSet
       {
           Id = changeset.Element("id").Value,
           User = changeset.Element("User").Value,
           DateAdded = changeset.Element("Date").Value,
           Summary = changeset.Element("Summary").Value
       };

ASP.NET MVC 3 Preview 1

2010-07-27T16:20:00.001-04:00

I just upgraded to the MVC 3 preview that just came out today.

I did not have time to play around with the new features so I just installed it and kept working on my existing MVC 2 application. Later in the day when I ran my application I found that I was receiving the error

No parameterless constructor defined for this object.

** commence freaking out **

It appears that the install of MVC 3 Preview 1 has affected my existing MVC 2 application. Or so it seemed.

Uninstalling MVC 3 Preview 1 fixes the problem. Installing it again causes the problem.

My MVC 2 application is using Ninject 2 so I can inject dependencies into my constructors and they do not require parameterless constructors. This made me think that it had to be a problem with Ninject, but all the proper breakpoints were being hit in my Ninject application to set the default controller factory.

I attempted to reproduce the problem in a simple project (since I was convinced it was Ninject). After uninstalling MVC 3, I created a simple application that required an interface to be injected into my HomeController using Ninject. I ran it to see that it works. Then I installed MVC 3 just as I did before but this time the sample application worked.

So what is the difference? More importantly, what is the solution?

It’s all in your references. Looking side by side at my project files, I can see a difference. Here is the sample MVC 2 project that worked:

<Reference Include="System.Web.Mvc,
                    Version=2.0.0.0,
                    Culture=neutral,
                    PublicKeyToken=31bf3856ad364e35,
                    processorArchitecture=MSIL" />

Here is the production MVC 2 application that did not work after installing MVC 3 Preview 1:

<Reference Include="System.Web.Mvc,
                    Version=2.0.0.0,
                    Culture=neutral,
                    PublicKeyToken=31bf3856ad364e35,
                    processorArchitecture=MSIL">
    <SpecificVersion>False</SpecificVersion>
</Reference>

The difference being SpecificVersion. The hint text reads…

Specific Version Indicates whether this assembly can be resolved without regard to multi-targeting rules for assembly resolution.

So there you have it. My production application is looking for the latest System.Web.Mvc DLL it could find even though I have specified I want to use 2.0.0.0. By either defaulting this property or explicitly setting SpecificVersion to True will tell the application to use the version you tell it to.

I do not believe this is any fault of MVC 3, MVC 2, Ninject, or anything else. This is just something to look out for when you get brave (as you should) and start looking at MVC 3 Preview 1.

ASP.NET MVC and Silverlight Playing Nice: Part Two

2010-07-06T09:00:00.001-04:00

Now that I have been using my Silverlight helpers for sometime on my work and fun projects, I thought I would revisit my ASP.NET MVC and Silverlight playing nice post. I have added just a few features to it and I wanted to give you more code so that others can use this simple way to add Silverlight to ASP.NET MVC. I do not want to repeat myself too much so I’ll just show you some code. Most of it has been explained in the last post but some will be new.

The first step is to create your Silverlight partial view. I find it better to write the view before the model for stuff like this. If you write the model first you will write the view to fit the model rather than writing the model to fit the view. This view will replace the test page you get from adding a Silverlight application to your MVC application. Here is my new partial.

<%@ Control Language="C#"

Inherits="System.Web.Mvc.ViewUserControl<MvcSilverlight.Models.SilverlightObject>" %>

<form id="form1" runat="server" style="height:100%">
  <div id="silverlightControlHost">
    <object data="data:application/x-silverlight-2,"
            type="application/x-silverlight-2"
            width="<%: Model.Size.Width %>"
            height="<%: Model.Size.Height %>">
      <param name="source"
             value="<%: Url.Content("~/ClientBin/" + Model.XapName + ".xap") %>"/>
      <param name="onError"
             value="<%: Model.OnSilverlightError %>" />
      <param name="background"
             value="<%: Model.BackgroundColor.Name %>" />
      <param name="minRuntimeVersion"
             value="<%: Model.MinimumRuntimeVersion %>" />
      <param name="autoUpgrade"
             value="<%: Model.AutoUpgrade %>" />
      <% if (Model.Parameters != null && Model.Parameters.Count > 0) { %>
          <param name="initParams" value="<%: Model.ParameterString %>" />
      <% } %>
      <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0"

style="text-decoration:none">
           <img src="http://go.microsoft.com/fwlink/?LinkId=161376"

alt="Get Microsoft Silverlight" style="border-style:none"/>
      </a>
    </object>
    <iframe id="_sl_historyFrame"

            style="visibility:hidden;height:0px;width:0px;border:0px">

    </iframe>
  </div>
</form>

If you read the last post you will see that I changed my partial a bit.

I added the colon to the code nuggets to get the implied Html.Encode calls. I also added parameters. I found that my Silverlight applications needed to know some info about my MVC applications to work. In one example I have, my file upload Silverlight control needed to know where to store the meta data in my database about the file being uploaded. To do this, I conditionally add the parameter element then add the parameters I want using a name value pair dictionary. Remember that this is going to be a display template so you need to put it in Views > Shared > DisplayTemplates folder and name it with the same name of the type you are strongly typing it to. In this case it will be SilverlightObject.

Next you will want to create a model that will hold the info on how to load your Silverlight control. You’ll see that it is pretty simple. Here is mine.

public class SilverlightObject
{
    public string XapName { get; set; }
    public Size Size { get; set; }
    public string OnSilverlightError { get; set; }
    public Color BackgroundColor { get; set; }
    public string MinimumRuntimeVersion { get; set; }
    public bool AutoUpgrade { get; set; }
    public IDictionary<string, string> Parameters { get; set; }

    public string ParameterString
    {
        get
        {
            StringBuilder sb = new StringBuilder();

            foreach (var parameter in Parameters)
            {
                sb.Append(parameter.Key);
                sb.Append("=");
                sb.Append(parameter.Value);

                if (Parameters.Count > 1)
                    sb.Append(",");
            }
                
            return sb.ToString();
        }
    }

    public SilverlightObject()
    {
        OnSilverlightError = "onSilverlightError";
        BackgroundColor = Color.Black;
        MinimumRuntimeVersion = "4.0.50524.0";
        AutoUpgrade = true;
    }
}

It is just a container for some very specific options for Silverlight that you plug into your partial view

Also, there is a property to get a parameter string so that we can simply drop that value into the parameter value if we have any. This is just another way to make the view extremely simple and not require business logic.This class is just saved in your models folder.

You will also want a ViewModel for whatever page you will be showing the Silverlight control on.Typically you would have a bit more in the view model an just the Silverlight control but for my example I will just have the SIlverlight control.

public class IndexViewModel
{
    public SilverlightObject SilverightSample;
}

Now you just need to wire it up in true MVC fashion!

In my index Action of my home controller I will create a new SilverlightObject and pass it into my ViewModel which will be passed into my Index View.

public ActionResult Index()
{
    var parameters = new Dictionary<string, string>
    {
        { "MyParameter", "123" },
        { "Value", "123abc" },
    };

    var silverlight = new SilverlightObject
    {
        XapName = "SilverlightSample",
        Size = new Size(300, 300),
        Parameters = parameters
    };

    var model = new IndexViewModel
    {
        SilverightSample = silverlight
    };

    return View(model);
}

Now you can drop the control in your view that is strongly typed to your view model.

<%: Html.DisplayFor(m => m.SilverightSample) %>

This design does not currently have a way to make the Silverlight control full screen.

I have not needed a Silverlight control to be full screen so that is probably why I never added it. If you wanted to make it full screen you could just have a boolean for full screen and change the height and width to be 100% in your partial.

OpenSearch in ASP.NET MVC

2010-06-14T23:34:00.002-04:00

I got tired of referring to my codecamp presentation every time I wanted to do another implementation of OpenSearch so I figured I would write it down.

What is OpenSearch

OpenSearch is using that search bar that is built into most browsers. Google Chrome uses the address bar. Internet Explorer has a separate textbox for searching. This is defaulted to your default search engine that is setup when you run your browser for the first time, but you can have your browser search other sites if you tell it to. If you go to a site like Amazon and click the down arrow for your search textbox (in IE) you will see the search providers configured for Amazon.com.

This stuff is easy to write, even if you have never even heard of OpenSearch before. It will literally take you 5 minutes to get running. So let’s do it!

Step 1

Do not go to OpenSearch.org because it will only give you confusion and heartache.

Step 2 and Beyond

Create a new XML file in the content folder of your site and call it OpenSearch.xml. Here is the contents of my file.




< ?xml version="1.0" encoding="UTF-8" ? >
< OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
  <ShortName>My Site’s Asset FinderShortName>
  <Description>Find all your assetsDescription>
  <Url type="text/html"
       method="get"
       template="http://MySite.com/Home/Search/?q={searchTerms}"/>
  <InputEncoding>UTF-8InputEncoding>
  <SearchForm>http://MySite.com/SearchForm>
< /OpenSearchDescription>

Nothing fancy here, but you wouldn’t know how to write it without looking it up. It is OpenSearch specific but the elements are easy to fill in. ShortName and Description just write in whatever you want the browser to show. The Url template needs to be your site and point to the action you want it to go to. Alternatively you could write a route that corresponds to the Url you are supplying here. You will also want to supply a search terms parameter to your Url so that the action will be able to filter the results.

Next, you need to link to this XML file in your master page. In site.master, add the link to the header and change some of the attributes to suit your needs.

< link href="< %= Url.Content("~/Content/OpenSearch.xml") % >
       rel="search"
       title="My Site’s Asset Finder"
       type="application/opensearchdescription+xml" / >

The type is another one of those things you are not going to remember. Now that your site has a reference to the xml file and knows how to search your site, all you have to do is implement the action that you promised would be there.

Implementing the Action

In your Home controller (or whatever you defined in your OpenSearch.xml) create a Search action that can return a view filtering the results with the given query string.

public ActionResult Search(string q)
{
    var assets = _assetRepository.FindAll()
        .Where(m => m.Name.Contains(q))
        .OrderBy(m => m.Name.IndexOf(q));
 
    var model = new SearchViewModel
    {
        Assets = assets,
        SearchTerm = q
    };
    return View(model);
}

I just wrote a linq query to pull all the assets out of my repository where the asset’s name contains the search term and order the results so that the closest matches are first.

In my example I am also creating a view model called SearchViewModel that is just a container class that holds my asset objects and remembers my search term.

Creating the Search View

The last thing you need to do is implement the view you are calling in the Search action. This is where you can write your implementation specific code. It will be strongly typed to whatever structure you use to hold your search results. Mine was SearchViewModel and this is what I have in my search view.

<h3>
    Found < %: Model.Assets.Count().ToString() % > results for "< %: Model.SearchTerm % >".
h3>
< % foreach (var asset in Model.Assets) { % >
    <div class="search-result">
        < %: asset.Name % >
    div>
< % } % >

This is just a basic implementation but now that you have a template you can make it whatever you want.

Build. Run.

Testing in Internet Explorer

Internet Explorer is actually easier to work with OpenSearch than others are (weird, I know). Go to your site and you will see that the drop down on the search bar is glowing red/orange. If you click it, you will see your search provider! Click on the provider and anything you type into your search bar will be your query string parameter to your action method. Now if you enter in “Bacon” as your search term (as I often do), you will get a view of all assets with the word “Bacon” in the name.

Pretty sweet, or is it savory?

You can also set your site’s search provider to be your default search provider. This will get you some added benefits when browsing. You can get buttons to search your site anytime you select text in Internet Explorer. You can also use the search bar to search your site even if you are not at your site.

Testing in Google Chrome

Since Chome does not have a search textbox, it does not have a glowing dropdown button to select your new search provider. You need to be pretty direct with it and add the search provider. Right click the address bar and go to “Edit Search Engines…” Add a new one. I’ll call mine Asset Finder. The keyword is going to be “Asset” and the Url is the same as how I defined it in my OpenSearch.xml file only you add a %s where the search term should go. Mine looks like this: http://www.MySite.com/Home/Search/?q=%s

Now when you type "asset" in your address bar you will see Chrome recommend your search provider. You can tab to select it and start typing your query string. Chrome will insert the query string where you dropped %s in the Url.

Testing on a Mac

Ha! I’m just kidding. I’m so clever.

Microsoft Tag

2010-05-27T11:33:00.000-04:00

Microsoft Tag is out of beta as of a few hours ago. If you are not familiar with the technology, you can think of it as a hyperlink for mobile devices. Developers can even get an API to create your own tags or use the web interface in the tag manager.

As long as you have a phone with a camera and web access you can get the reader and start reading tags.

Here is a tag for my blog. The great part about tags is it is really up to the tagger to define the future of Microsoft Tag. It is only limited by your creativity on what and how to tag.

Code Camp Wrap Up

2010-04-26T13:26:00.000-04:00

Code camp 2010.1 is in the books.

I presented on the topic of "ASP.NET MVC Beyond the Project Template" at the Philly and Pittsburgh code camp. This presentation also marked my first contribution to both user groups. The discussion was well received with several great comments from the reviews.

I wanted to take a moment to let everyone know where the content is for the presentation. You won't see any slides because I did not have any. I am a strong believer in code camp being about code and not slides. You can however take a look at the working project that was created in both demonstrations.

I am hosting the project on BitBucket just as you saw in the discussion. You can browse it or pull it down at http://bitbucket.org/swhook52/thisiswhyyourefat

The project includes a ton of useful practices for working with a remote team, setting up a great development environment from the start, using tools to maximize productivity, using OpenIdPortableArea, using OpenSearch, and other interesting practices.

I also had a question from the Pittsburgh Code Camp presentation that I did not have time to address in the discussion. The question was how to add Data Annotations to validate a model. The question was specifically how to get rid of the Id column on the register page when calling Html.EditorForModel(). I have added this to the project under the User.cs file. So that was for you front row guy.

Lastly, I want to say thank you to the organizers of Philly and Pittsburgh code camps, the attendees, and the reviewers for making my first contribution to the community one that I will not long forget. I plan to contribute more.

ASP.NET MVC 2 and Silverlight Playing Nice

2010-04-19T11:28:00.002-04:00

I have been getting into Silverlight quite a bit lately, probably because I have Expression Studio 3 now (and soon to be Expression Studio 4). Originally being a windows developer then moving to an MVC web developer makes me miss some of the windows like stuff I used to do. Silverlight has given that back to me and Expression Blend has made creating a UI fun and easy. I originally found it awkward to inject a Silverlight application into an MVC web app. I even gave up on Silverlight the first time I tried it. Now I have a bit more knowledge about the two and I wanted them to work well together. I found some of the pain points and simplified them a bit.

Recently I needed more control over uploading a file in an ASP.NET MVC application. I outsourced to Silverlight and created a new control library. Since the control library is a separate project I also need to create a Silverlight application to use the new user control. This new Silverlight control also needs to have a web application to use the Silverlight application. When you add the Silverlight application through the MVC project in the project options you get a ClientBin folder off the root that holds an xap file that builds from your Silverlight application. Consider this your DLL from Silverlight. Also, by default, you will get an aspx test page for your Silverlight application. This is really the starting point, you’re done with setup, now let’s begin.

If you open the test page you will see a lot of scary Html/Javascript code. I have separated this out to make it easier to read. Start with the Javascript. I moved the reference to Silverlight.js out to my master page because my app uses Silverlight in several places.

8 <script type="text/javascript"

9 src="< %= Url.Content("~/Scripts/Silverlight.js") % >">

10 script>

Notice the use of Url.Content to find the script instead of an absolute path. I do this so that the script can be found even if I am using a virtual directory.

Next, take the onSilverlightError Javascript function and move it to another script file. I moved mine to my default Javascript file for my website.

All you are left with is this nasty form and object tag that is incredibly complicated and something you could never recreate if you had to. We will deal with that later. By now you should be realizing that you really don’t want to be using an aspx page in your nice, new MVC project. That is just wrong. Ideally, I want to be dropping Silverlight in a partial view. Especially if it just a file upload control. So let’s do that.

I want to just drop this Silverlight control on my index page of this new MVC application. So I create a partial view off of my Home controller and call it UploadAsset. In my index view I can call the partial view.

13 < % Html.RenderPartial("UploadAsset"); % >

In the UploadAsset partial view all we really want is that scary form and object tag that was in the test page. Copy that and paste that into your partial view. Once that is done you should have a fully functional Silverlight application running in the context of MVC. I accepted this solution for a while. Then I realized it doesn’t feel like I’m writing MVC code. It doesn’t even feel like a good solution. I hate that object tag and I know I could never write that from scratch if I had to and if I had not created a test page I never would have even known how to create the tag.

I want it to feel like Silverlight is made for MVC; I want to have a Silverlight reference in my model; I want to wire it up in the controller. And ideally I would want to use an Html helper class for Silverlight so that the framework could just know how to display it.

Let’s start with the Model.

I created a model that holds the basic information about what a Silverlight reference is and defaulted the basics in the constructor.

9 public class SilverlightObject

10 {

11 public string XapName { get; set; }

12 public Size Size { get; set; }

13 public string OnSilverlightError { get; set; }

14 public Color BackgroundColor { get; set; }

15 public string MinimumRuntimeVersion { get; set; }

16 public bool AutoUpgrade { get; set; }

18 public SilverlightObject()

19 {

20 OnSilverlightError = "onSilverlightError";

21 BackgroundColor = Color.White;

22 MinimumRuntimeVersion = "3.0.40624.0";

23 AutoUpgrade = true;

24 }

25 }

The non-defaulted properties are XapName and Size. The Xap name is the reference name you find under the ClientBin folder of you web project. The Size is just how big you want the Silverlight canvas to be. The rest of the properties are probably the same for every Silverlight application in your web project. If not, you can change the default.

Now that I have a new SilverlightObject type, I can use it in a view model.

8 public class IndexViewModel

9 {

10 public SilverlightObject UploadControl { get; set; }

11 }

In the controller we can now wire this up like we would any view model.

13 public ActionResult Index()

14 {

15 SilverlightObject uploadControl = new SilverlightObject

16 {

17 XapName = "UploadDemo",

18 Size = new System.Drawing.Size(400, 800)

19 };

21 IndexViewModel model = new IndexViewModel

22 {

23 UploadControl = uploadControl

24 };

26 return View(model);

27 }

Then in the index view we can change where we call the partial because now our partial view can be strongly typed to a SilverlightObject.

13 < % Html.RenderPartial("UploadAsset", Model.UploadControl); % >

Now it feels more like MVC but it doesn’t work. It doesn’t use our settings we wired up for the UploadControl. Ideally we want our partial view to just contain…

3 < %= Html.DisplayForModel() % >

We can do that by telling the framework what to use when it sees a type of SilverlightObject. To do this, create a partial view under View\Home\DisplayTemplates called SilverlightObject and strongly type it to a SilverlightObject. Go back to your UploadAsset partial and get that scary form and object tag and replace it with the DisplayForModel call. Drop that form and object tag into the SilverlightObject template and now you can start piecing it together with the SilverlightObject model you have strongly typed to. In the end it can be as customizable as you want. Here is what I have.

type="application/x-silverlight-2"

width="< %= Html.Encode(Model.Size.Width) % >"

height="< %= Html.Encode(Model.Size.Height) % >">

<param name="source"

value="< %= Url.Content("~/ClientBin/" + Html.Encode(Model.XapName) + ".xap") % >"/>

<param name="onError"

value="< %= Html.Encode(Model.OnSilverlightError) % >" />

<param name="background"

value="< %= Html.Encode(Model.BackgroundColor.Name) % >" />

<param name="minRuntimeVersion"

value="< %= Html.Encode(Model.MinimumRuntimeVersion) % >" />

<param name="autoUpgrade"

value="< %= Html.Encode(Model.AutoUpgrade) % >" />

<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0"

style="text-decoration:none">

<img src="http://go.microsoft.com/fwlink/?LinkId=108181"

alt="Get Microsoft Silverlight"

style="border-style:none"/>

object>

div>

form>

It’s confusing, but look at why it is confusing. Silverlight made it confusing, I only made it so that I never have to see how confusing it is.

MVC will automatically pick up on this new template when you run it. When it parses the Html.DisplayForModel() it will see that your model has a SilverlightObject and it will look for a view that knows how to handle that type. We created one for it and it will use that one. MVC will pass the view the data for the SilverlightObject and our view will create that scary object tag.

This extension is even reusable for any Silverlight references you might have in your MVC application. It will even feel like Silverlight belongs in MVC!

Salted Hash

2010-04-01T15:09:00.000-04:00

Recently, I had a problem beyond the usual problems of having to go downstairs to get coffee and deciding what to eat for dinner.

My problem was with encrypting passwords. I had never done that before. It just aways turned out that when that step came, someone on my team had always created some sort of architecture to support it. It was abstracted away so I never really knew about how it worked. This time I am a team of one and the problem needs to be addressed. Doing a quick Topeka on the subject I found that there are a ton of ways to encrypt passwords in a SQL Server database. Using a combination of different strategies I was able to come up with my solution.

The solution is pretty simple to understand (even for an encryption novice like myself).

My database is just a simple column called "Password" with datatype "nvarchar(50)". For my solution, the encryption is going to happen on the application side.

To start things off, i knew I eventually had to call some System.Security.Cryptography class. I chose MD5 just for the sake of choosing MD5. Once I have an instance, all I need to do is give the MD5 instance a byte array to hash.

MD5 md5 = MD5.Create();

Byte[] computedHash = md5.ComputeHash(passwordBytes);

Since I am storing the password as a string, the hash that I calculated needs to eventually be encoded to save in the database. Again, you can choose whatever encoder you want, but I chose to use a UTF8Encoding.

UTF8Encoding encoder = new UTF8Encoding();

Byte[] passwordBytes = encoder.GetBytes(password);

and eventually return the encoded string

return encoder.GetString(computedHash);

Doing those few steps works for encoding passwords in a database. I wasn't really satisfied with this implementation though. The problem is that if I have two users that have the same password, they will have the same hash. If someone ever gets access to your Users database and can see your hash you could run the risk of unintentionally exposing user passwords.

I ultimately want a different hash result for each user. This is where a concept called salting comes in.

If I can also encrypt a unique identifier with my password, the encrypted password will be different for every user in my database and will deter security attacks looking to decrypt my hash. For my Users table, my username is always unique so I will be adding the username bytes as my salt to my delicious hash.

// Create a new salt

Byte[] saltBytes = encoder.GetBytes(this.Username);

You can add as many additional salt bytes that you like, as long as you know how to get back from it. Once I have my salt bytes I can simply added the two byte arrays together and hash the combined byte array. Here is the full method.

public string CreatePasswordHash(string value)

{

// Create Byte array of password string

UTF8Encoding encoder = new UTF8Encoding();

Byte[] passwordBytes = encoder.GetBytes(value);

// Create a new salt

Byte[] saltBytes = encoder.GetBytes(this.Username);

// append the two arrays

Byte[] toHash = new Byte[passwordBytes.Length + saltBytes.Length];

Array.Copy(passwordBytes, 0, toHash, 0, passwordBytes.Length);

Array.Copy(saltBytes, 0, toHash, passwordBytes.Length, saltBytes.Length);

MD5 md5 = MD5.Create();

Byte[] computedHash = md5.ComputeHash(toHash);

return encoder.GetString(computedHash);

}

Now that I have this super awesome encrypted string I thought the next step was to be able to decrypt this string into a readable password. I was wrong. Think about it. When do you ever show an unencrypted password. You don't. You only ever validate if the password supplied is equal to the password in the database. This means you only ever have to encrypt a password and never decrypt it. This actually makes me feel good that I never even store how to get to a real password in my code. Here is how the validation might look like.

if (user.Password == CreatePasswordHash(password))
{
    // Do something for this user
}

Career Change

2010-03-21T10:57:00.000-04:00

After three years as a developer in the ticketing industry, I have moved on. I just needed a change. I have never been a person that can follow a routine for very long. Just picking up and leaving is a big deal though! The two jobs are just as far apart from each other as can be.

The old job

Point of sale and ticketing industry
Near Philadelphia
Writing in Delphi and a touch of C#
Using Visual Source Safe
Company of about 80 employees
Development team of about 15
Working in a cubicle

The new job

Sports instant replay industry
Near Pittsburgh
Writing ASP.NET MVC and Silverlight
Using Mercurial
Company of about 25 employees
Development team of 2
Working in an office

It is certainly a change in direction for my career. A direction I have always wanted to go even with the old job.

I am into my first week with the new job and it was been wonderful so far. Of course first week reviews are always a bit skewed, but I did actually develop a lot this week. I think it helps when you can walk in and do File > New Project your first day.

So it does not look like I would be qualified to do the new job. Thankfully, I have never stopped learning outside of work. I now know how important it is to do that, because I got the new job because I go home and write code for fun. I go home and write ASP.NET MVC 2.0 for fun and create some pretty awesome stuff too. In fact, John Nelson and I are working on something we hope to be releasing to the public soon. I wish I could talk more about it but I will in time. I am also a huge advocate of mercurial so that was and easy change.

It has been so nice to be given every tool I have asked for to do my job right and continually be asked if I have everything I need. Valuing my opinion is high on my list of what it takes for me to be satisfied with my job.

I guess the one bad thing about the new job is that the team size is drastically decreased from the old job. I thrive on other employees challenging me. It makes me want to do more and learn more when another teammate talks about interesting that I know nothing about. I think that in time this will improve when the company gets more team members in development, and what better place to be, than the first one there.

Life According To Trine

2010-03-09T21:26:00.001-05:00

What is Trine

Trine is a three player game available on PC and PS3 that requires all three characters to play a critical role to get the characters through a level full of puzzles and undead enemies.

A few months ago, I took a day and played through Trine with John and Todd. Trine is a light purchase costing about $20.00 and giving hours of laughing, hating, and questioning friendships with the the other two players. Trine requires an extremely coordinated group using the talents of each character to achieve the ultimate goal.

The Characters

The Knight

Armed with a shield and a sword, the knight is your frontal defenses. He is your primary attacker that ultimately shields the other two from fire, arrows, traps, and pitfalls. The best of groups are led by the knight.

The Thief

A master of the bow and swinging from platforms, the thief is used as a support attacker and allows the group to uncover treasures that cannot be reached by the other less mobile characters. Nine chances out of ten the thief will swing into some spikes within three seconds of starting the level, so they play a much less vital role in the game than the other two.

The Wizard

The character that gets you results, the wizard is the key to winning. Without a wizard you do not have a group. You might as well give up. The wizard uses magic to create a path for the group by creating boxes, planks, or levitating and moving objects. The draw back to the wizard is that he cannot attack. This creates problems when there are so many undead wanting to kill your wizard.

Applying the Concept

Now you should have a good understand of the game and who the players are. I want to explain the game from the perspective of software development. You can consider the enemies as anyone that wants to make life difficult for you. Whether it is giving you more work, changing your priorities, or someone wanting to tell you the latest bad news. If you have not already seen it, this game has some solid ties to the software industry. Let me lay out a scenario for you.

Knight = Project Manager

Thief = Quality Assurance

Wizard = Developer

Undead = The Customer

This scenario is familiar to me and it works well. The wizard is in the back doing what wizards do. He progresses the three through the level. The Knight is out in front protecting the wizard from the undead enemies. The thief finds all those "treasures" that the wizard and knight could never find. The undead enemies are constantly approaching the knight and desperately want to get to the rest of the group to change, redirect, rewrite, and add functionality to whatever it is the wizard is doing.

If the wizard were on the frontlines with the knight, the wizard would not last long. There needs to be a barrier between the undead and the wizard. That barrier must be the knight. All communication from the outside world goes through the Knight. If it does not, chaos ensues. If that line is breached once it will be breached again, which leads to problems.

I think we can agree that the previous scenario is a common one and it probably works pretty well. Let's try another scenario.

Knight = Lead Employee

Thief = The Process*

Wizard = Employee

Undead = Your Boss

* The Thief can help or hurt the group depending on how it is used.

Is this scenario really so different from the first? Let me get less hypothetical and say that a great example of this scenario in action is when your boss has 37 tasks that your team needs to complete by the end of the week. If the boss came straight to the employee, chaos would ensue (once again). If the boss goes to the lead with 37 tasks the lead can take that information and give it to the wizard in a more positive manner by separating it into manageable chunks. Four or five tasks are a lot easier to handle than 37. The end result is a happy group.

The key to all the scenarios is to take care of your wizard. Without them, it is game over.

Invoke a bug tracking application (part 2)

2010-02-16T22:04:00.000-05:00

Now that I have this great application that can open a bug report just by me sending the bug report number as a parameter, I can do some pretty powerful stuff. I can thank John Nelson for coming up with this part of the solution.

This is a solution to the problem of having an executable to do all this isn't that useful. I need a quick way to be able to invoke the executable's functionality. I can't just depend on people using Launchy.

The answer is a URI Protocol.

If you are not familiar with them, think of a mailto link. Your OS just knows how to handle clicking on a mailto link because it knows what your configured default mail client is. Now I can tell the OS what my default bug tracking application is. You would think this requires some level of application level code or something like that but it's simpler than that. You just need to tell the OS that you want to register a protocol with it in the dreaded registry. You can do this with a straight .reg file or you can do it the way John and I did in the setup project for the application that invokes the bug tracking software.

This setup project is no different than your average Add new project > Other Project Types > Setup Project. You can right click the project and view the registry keys associated with the installer and add your own. The real key is knowing where to put it.

My work machine uses Win XP. I know, it's so retro! On XP the protocols are defined under the root of HKEY_CLASSES_ROOT. On my home machine running Windows 7 the protocols are under HKEY_CLASSES_ROOT\PROTOCOLS\Handler. If you are interested, you can see all the other protocols that are registered there too. Even the mailto protocol we all know about. From the rest of the protocols you can see that the colon in the protocol is implied. In my case I want to create a protocol named "issue" so that I can write out "issue:12345" and the OS will know I want to call my default bug tracking software by saying "issue:" and I want to open this bug report "12345". To do this I create a folder in this location called "issue" as well as a few others.

In the Command folder you will need to specify a default key with the data of:

"[TARGETDIR]\BugReportInvoker.exe" "%1"

The installer will fill in the [TARGETDIR] with the executable path. So this is telling the OS that when you use "issue:" call this application and pass it the parameter of whatever is after "issue:". Pretty clever, I know!

All of a sudden this simple, crappy little application that opens a bug report has more uses. I can go to start > run and type in "issue:12345" and bug report number 12345 opens right up. I can go into an email and create hyperlinks to bug reports by simply typing my new protocol and the bug report number. Now I feel like my application has full exposure. Wherever I want to invoke a bug report, I can do it!

Now all I have left with this project is making it easy to use. As if it were transparent to anyone want to use it or wanting to embed a link into some text. That's the challenging part, right? The user friendly aspect of it? My first hurdle is Office. That's where it's really useful, is embedding links into things like a development schedule. So I can see in a schedule that I will be working on a bug and I know the number, it's right there, so I want to click it to open it. Office gets upset and wants to warn about the potential risk of opening a link. Come on, I'm an adult. I don't get a warning every time I click a link in a web browser so why start now! My coworkers were annoyed by this message popping up and asked if I could do anything about it. I googled my way out of it and found these steps:

1. Click Start, and then click Run.

2. In the Open dialog box, type regedit, and then click OK.

3. In Registry Editor, locate one of the following registry subkeys:

HKEY_CURRENT_USER\Software\Microsoft\Office\12.0\Common

HKEY_CURRENT_USER\Software\Policies\Microsoft\Office\12.0\Common

Note You only have to modify one of these registry subkeys. You do not have to modify both of them.

4. Right click the registry subkey, point to New on the Edit menu, and then click Key.

5. Type Security, and then press ENTER to name the key.

6. On the Edit menu, point to New, and then click DWORD Value.

7. Type DisableHyperlinkWarning, and then press ENTER to name the entry.

8. In the right pane, right-click DisableHyperlinkWarning, and then click Modify.

9. In the Edit DWORD Value dialog box, click Decimal, and then type 1 under Value data.

Some people are weirded out by taking warnings like that out so I did not include it in the installer and I didn't add an option in the installer because I am lazy.

Removing the warning has made several people happy and certainly not a complaint I thought I would hear. Like I said, the user friendly part of it is the hardest part. Who would have thought I would be having user friendly issues in a non GUI application where the user has literally no interaction with the application.

Recently I have had another complaint. The complaint is that when writing a document in Microsoft Word it is too much work to create hyperlinks every time I want to have a bug report link. You might be thinking, "really? Too much work?" but, yes. I totally agree. a productivity tool should be oozing with productivity! If it is not, then what good is it?

Part three will talk about how I addressed it and it might just be my favorite step yet (I get to write code).

Invoke a bug tracking application

2010-02-09T18:41:00.001-05:00

My employer uses a home grown application for bug tracking that is written in Delphi. It works pretty well for their needs but it can be annoying at times when I know what bug report number I want to get to but I need to open the winforms application and search for that number.

I'm a huge fan of productivity tools so I wanted to make some tools that might help people with this annoyance.

I wanted to create a very basic application that I could build tools off of the basic concept. I created a C# application that does some pretty scary stuff to get to the bug tracking software. The bug tracking software only supports windows messaging of passing in a bug report number. This meant I had to know what process to send the message to, but once I know what process, it's easy to write some crap code to send the message and have that bug report open.

I am not an expert on windows messaging, in fact I am not even a fan. I had to use some DLLImports to be able to send the message

[DllImport("user32.dll", CharSet = CharSet.Auto)]
public static extern IntPtr SendMessage(IntPtr hWnd, UInt32 Msg, IntPtr wParam, IntPtr lParam);

I also used a FindWindow method to find the bug tracking application. I require my users to already have the bug tracking application open and that is a fair requirement at my employer because we live by it.

[DllImport("user32.dll")]
public static extern IntPtr FindWindow(string lpClassName, string lpWindowName);

In my Main method I get the bug report number from the string arguments, find the window, and send the bug report number message to the window.

IntPtr MainWindow = FindWindow(null, settings.BugTrackingFormCaption);


if (bugReportNumber > 0 && MainWindow.ToInt32() > 0)
    SendMessage(MainWindow, WM_USER + 1, (IntPtr)bugReportNumber, IntPtr.Zero);

Like I said, I am no expert on windows messaging. I had to google a bit to get the SendMessage syntax. I just know I want to send bugReportNumber that I got from the command line arguments and send it to the window I got from MainWindow. You can see that I also created a settings file in case the form caption changes.

To avoid a flicker of a console window when the executable is invoked, I used a windows application output type but I never create a form or show it so I never see anything pop up other than the bug report.

So now if I run the application at the command line at pass in a bug report number it opens up a new window for the bug report I typed it. That's perfect! But not that useful... however, it is something I can really build on.

Even this executable alone, I can do some pretty cool things with it. I'm a huge Launchy fan. I can train Launchy to find the executable and press tab to pass in a bug report number!

I have more plans for using this executable in other tools so stay tuned.

Conversion to Blogspot

2010-01-15T11:04:00.000-05:00

I am mostly finished converting my previously internal community server blog over to a public blog on blogger.com. Unfortunately I had to take out most of my posts over the past year because they have been so specific to my employer. I was not getting the response I was expecting from the internal blog so I decided to open it up to the rest of the world.

I'm still working on finding a good template that works well with code and images. I also need to find out how I can show code blocks in blogger.

I will eventually move (yet again) to my own domain but until then I need a place to store my thoughts!

£5,000 Cookies

2010-01-10T10:43:00.001-05:00

If you develop web applications you must read this new law. Europe will require web user consent before allowing cookies in a web page. There are a few exceptions, but for the most part, this changes the way we develop web applications.

Web users that prompt for cookies (like me) should be happy to hear this news that websites should now be asking you to write files to your machine.

Fresh Eyes

2010-01-10T10:27:00.001-05:00

I am still on the plane. With all the frustrating moments I have had on this flight I think it is time for me to just relax and do some stuff that I would probably get yelled at for doing at work.

No, not that.

Stay focused. I'm talking about revitalizing my work environment by designing a new Delphi IDE color scheme. Color schemes bring new life into an otherwise visually dull programming experience. For two years and nine months I have been using the default color scheme for my Delphi IDE. I am bored with it. I need something fresh. I need something that gives me a feeling
of creativity. I look at my IDE more than I look at myself. Sometimes more than I look at my wife. It's time for a change.

I have never been a fan of white backgrounds. It hurts my eyes to look at it for an extended period of time. I have my brightness on my monitor down to about ten percent but I still squint at the brightness sometimes. I know that I need something dark but not the easy fall back to black background and lime green foreground to let everyone know that I used to write code in BASIC. I need something modern and inspiring.

John Nelson has been working with a nice style for Visual Studio that he found from someone else on the web. John and I have been working together on a project in Visual Studio outside of the office so I have had quite a bit of exposure to his IDE style. Before I left for the trip I asked
John to send me a screenshot of a good sampling of his IDE styling. On the plane, I have been using the Delphi highlighting options to make it look similar to John's but still have a few original colors to set it apart as being my own.

If you want to change your color options you do not have too many ways of doing it. Delphi does not have a fancy style importer/exporter that you can pass around styles with. You have the configuration in Tools > Options > Editor Options > Colors. From there you can define an impressive amount of symbol highlighting. The configuration, however, is lacking in its
ability to be a user friendly experience. I am using custom colors for nearly all of my highlighting. This requires me to go into the custom color dialog and type in the RGB values (I also found a RAD Studio bug on this form). I have chosen all of my background colors to be the same shade of gray/black. That's great, but I'm still going to need to enter in those RGB values every single time because the IDE does not keep my custom colors even when I tell it to save the color. RAD Studio has no consideration for my time. Lucky for RAD Studio, I still have three hours on my flight.

Once I was happy with my color scheme and it makes me want to write code I saved the changes and starting playing around with it. I really like it! Usually I do not like anything other than the default color scheme because I feel like I cannot even read the words on the page but I have chosen colors that are very dull, but yet they stand out from each other.

The next step is to figure out where this information is stored for RAD Studio so that I can export it from my laptop and magically import it on my desktop. I look in the obvious places like Program Files, My Documents, and Application Data. Nothing; why are they making this so hard? After digging for quite some time I thought, no, they wouldn't put it in the registry would
they? That would make me sad. A few moments later I found this path:
HKEY_CURRENT_USER\Software\Borland\BDS\5.0\Editor\Highlighting
I'm sad. This plane flight has nothing but bad news. Anyway, I found the location of the code styling. Now I can test this:
1. Open "regedit" using the run dialog.
2. Navigate to HKEY_CURRENT_USER\Software\Borland\BDS\5.0\Editor\Highlighting
3. Backup the Highlight entry by right clicking the highlight folder and clicking Export.
4. Delete the Highlight entry in the registry.
5. Run the .reg registry entry that has your new color scheme.

This is just a simple way to see that the registry created the tree properly. Now I can go into Delphi and see that it still looks great. I now have a poor man's import/export for my new, fancy IDE styling.
I recommend changing your style every once in a while. The more I think about how I was afraid to create this style on work time the more I think of how silly I was for being afraid of doing it. It comes down to doing my job better. A better work environment will help me be productive. It is
really no different than cleaning off my desk at the end of the day so that I am productive the next day. Changing my color scheme is much like one of my steps from the Step It Up post that talks about improving productivity.

"Looking at the problem with fresh eyes can clear up that issue
that's been bugging you all day."

A new color scheme gives you your fresh eyes.

11E

2010-01-10T10:22:00.000-05:00

I am sitting on my flight to Anaheim, CA for a two week support trip. I have the exit row all
to myself. My travel buddy did not blink an eye when shouting, "I'll take it" to the only available seat upgrade to first class and leave me deserted with the heathens that live in economy. As I looked at him in disbelief, he could not help but laugh and say, "I'm sorry, I feel bad about
it". I don't think those two things go together. I'll get you back... somehow. After the seat drama, I got settled in and the flight attendant kindly started her routine asking me if I am willing and able to assist a passen... and she stopped. She seemed bothered and asked me, "Are you over the age of fifteen?" She then giggles and says, "You look so young" loud enough that the rows surrounding me are now interested enough to turn around to get a glimpse of the
little youngster without adult supervision.

Most of you know me. You know that I am extremely easy going, and can find a positive aspect to any encounter. There are few things in this world that make me want to physically harm another person. The prioritized list goes:

1. Talk about how young I look.

2. Apologize for offending me about my age by saying, "You'll appreciate it when you're older."

3. American Idol

4. The phrase, "We need the rain".

...

With a twitching eye, I look down at my wedding ring as I twirl it between my thumb and pinkie as if to gain control of my emotions. I kindly, and with the most respect I could muster, told the flight attendant that I am of age to sit in the exit row. All the while I am having Scrubs like daydreams of wishing harm upon her. She is now the enemy for the rest of the trip. She will be shunned at every possible moment.

This was a very mild case of someone offending me, but when I talk about other incidents, it is really a form of discrimination that is often overlooked and shrugged off as being a comical discussion about different generations of people. Many times in my life I have thought of creating a website designed to hold the amazing stories I have about people offending me. These stories that I have unwillingly acquired over the years would make you realize why it is my number one social quam. I have dozens of stories that would make you reassess yourself in these seemingly
harmless social situations. Ask me.

On-Call

2010-01-10T10:17:00.001-05:00

Along the lines of rethinking our current practices I would like to share an idea for convenience, efficiency, and cost cutting.

Back Story:

I recently accepted an invitation to use Google Voice. I was excited because it was going to be a way that I could reliably call into meetings for work. I was wrong about what Google Voice was all about. I thought it was going to be a VOIP system that would allow me to make calls from my computer so that I don't need to be hanging on the phone so much when in a meeting at home.
I continued to play around with Google Voice. I made myself a phone number and added my cell phone number under that Google phone number (still not knowing what Google Voice was for). I click the call button to call my wife. Google calls my phone, I pick up, it then rings my wife's phone and I can talk to her on my phone. At this point I am thinking, "Well, this is stupid!" I have now created a middleman for my phone that still requires me to be at my phone. How silly.
I also found that since Google has given me real phone number, I can call that number. What does it do? It forwards the call to all of my phones I have configured. Whoa, that's cool, but I already have that through Vonage. Someone calls my home phone and it gets forwarded to my cell phone after a few rings. This Google Voice is just not working for me. I'm not a fan.
This week I have the programmer on-call phone. I hate that thing. While I was holding the on-call phone I was talking to a co-worker about Google Voice...

My Idea:

Then, boom, It hit me! Google Voice eliminates the need for a programmer on-call phone rotation! Why stop there, Google Voice eliminates the programmer on-call phone completely. Create a Google phone number and give that phone number to Customer Support. Now from your Google Voice account you can add phone numbers that you would like to forward the phone call to. Here is where an engineer can specifiy the number they would like to be reached at for the on call phone. For me, I would use my mobile number most of the time. If I have the on-call phone over a holiday, I do not get service on my mobile number or the on-call phone when visiting family in western PA. Instead of just chancing it, I could supply a number that I can be reached at, like my parent's phone number, or an alternate cell number, or even another Google Voice number that rings all my numbers!
When the on-call rotation changes, we just change the number that the Google Voice number forwards to and we are done. Personally, I hate having to carry around the phone and making sure it is charged when I already do that with my personal cell phone. Plus, we get the added bonus that the company has absolutely no reason to keep the on-call phone or the phone plan which cuts costs. It cuts costs because Google Voice is free to the US and Canada.
Google Voice can also manage your voicemails if you want it to; it can get transcripts of the call; do conference calls; there is just so much you can do! I think this is a great opportunity for the company and I wanted to share it with everyone, so let me know what you think.