International Radio Operators Alphabet in F# & Silverlight – Part 2
- by MarkPearl
So the brunt of my my very complex F# code has been done. Now it’s just putting the Silverlight stuff in. The first thing I did was add a new project to my solution. I gave it a name and VS2010 did the rest of the magic in creating the .Web project etc. In this instance because I want to take the MVVM approach and make use of commanding I have decided to make the frontend a Silverlight4 project. I now need move my F# code into a proper Silverlight Library. Warning – when you create the Silverlight Library VS2010 will ask you whether you want it to be based on Silverlight3 or Silverlight4. I originally went for Silverlight4 only to discover when I tried to compile my solution that I was given an error… Error 12 F# runtime for Silverlight version v4.0 is not installed. Please go to http://go.microsoft.com/fwlink/?LinkId=177463 to download and install matching.. After asking around I discovered that the Silverlight4 F# runtime is not available yet. No problem, the suggestion was to change the F# Silverlight Library to a Silverlight3 project however when going to the properties of the project file – even though I changed it to Silverlight3, VS2010 did not like it and kept reverting it to a Silverlight4 project. After a few minutes of scratching my head I simply deleted Silverlight4 F# Library project and created a new F# Silverlight Library project in Silverlight3 and VS2010 was happy. Now that the project structure is set up, rest is fairly simple. You need to add the Silverlight Library as a reference to the C# Silverlight Front End. Then setup your views, since I was following the MVVM pattern I made a Views & ViewModel folder and set up the relevant View and ViewModels. The MainPageViewModel file looks as follows using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;
namespace IROAFrontEnd.ViewModels
{
public class MainPageViewModel : ViewModelBase
{
private string _iroaString;
private string _inputCharacters;
public string InputCharacters
{
get
{
return _inputCharacters;
}
set
{
if (_inputCharacters != value)
{
_inputCharacters = value;
OnPropertyChanged("InputCharacters");
}
}
}
public string IROAString
{
get
{
return _iroaString;
}
set
{
if (_iroaString != value)
{
_iroaString = value;
OnPropertyChanged("IROAString");
}
}
}
public ICommand MySpecialCommand
{
get
{
return new MyCommand(this);
}
}
public class MyCommand : ICommand
{
readonly MainPageViewModel _myViewModel;
public MyCommand(MainPageViewModel myViewModel)
{
_myViewModel = myViewModel;
}
public event EventHandler CanExecuteChanged;
public bool CanExecute(object parameter)
{
return true;
}
public void Execute(object parameter)
{
var result = ModuleMain.ConvertCharsToStrings(_myViewModel.InputCharacters);
var newString = "";
foreach (var Item in result)
{
newString += Item + " ";
}
_myViewModel.IROAString = newString.Trim();
}
}
}
}
One of the features I like in Silverlight4 is the new commanding. You will notice in my I have put the code under the command execute to reference to my F# module. At the moment this could be cleaned up even more, but will suffice for now..
public void Execute(object parameter)
{
var result = ModuleMain.ConvertCharsToStrings(_myViewModel.InputCharacters);
var newString = "";
foreach (var Item in result)
{
newString += Item + " ";
}
_myViewModel.IROAString = newString.Trim();
}
I then needed to set the view up. If we have a look at the MainPageView.xaml the xaml code will look like the following…. Nothing to fancy, but battleship grey for now… take careful note of the binding of the command in the button to MySpecialCommand which was created in the ViewModel.
<UserControl x:Class="IROAFrontEnd.Views.MainPageView"
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"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBox Grid.Row="0" Text="{Binding InputCharacters, Mode=TwoWay}"/>
<Button Grid.Row="1" Command="{Binding MySpecialCommand}">
<TextBlock Text="Generate"/>
</Button>
<TextBlock Grid.Row="2" Text="{Binding IROAString}"/>
</Grid>
</UserControl>
Finally in the App.xaml.cs file we need to set the View and link it to the ViewModel.
private void Application_Startup(object sender, StartupEventArgs e)
{
var myView = new MainPageView();
var myViewModel = new MainPageViewModel();
myView.DataContext = myViewModel;
this.RootVisual = myView;
}
Once this is done – hey presto – it worked. I typed in some “Test Input” and clicked the generate button and the correct Radio Operators Alphabet was generated.
And that’s the end of my first very basic F# Silverlight application.
