Silverlight is a Rich Internet Application (RIA) platform for developing both enterprise and public Web-based applications. Silverlight 3 and later versions include support for out-of-browser applications and network status awareness for enabling offline mode. Silverlight 4 supports printing, local fonts, webcam, microphone, group policy object support, and many other features that make it an excellent platform for both Web and enterprise development.

The recommended architecture for Silverlight development separates the application into two tiers not including the database tier. The client tier includes presentation logic, for example client-side validation and animation, plus potentially some client-side business logic needed for lightweight calculations to reduce round trips to the server. See Figure 22-1. The application server tier includes server side validation, business logic, and database interaction. The client tier is implemented in Silverlight and deployed as a XAP file that is executed in the Silverlight CLR runtime in the browser. The application server tier can be implemented using RIA Services or any number of service platforms including Azure, XML Web Services, and OData. Sensitive intellectual property is one consideration when determining where to place the business logic. Also, data that requires secure access should be filtered on the server. For example, it would not be wise to cache project names on the client if the user is not allowed to have access to them. The business logic to filter the project names would run on the application server.

Figure 22.1. FIGURE 22-1

By leveraging the processing power of the user's computer to handle any quick response of presentation data, Silverlight has an advantage over other web development platforms such as ASP.NET. Because the CLR is multithreaded and GPU-accelerated, it also is a richer development platform than Flash. Because of F#'s built-in constructs such as asynchronous workflows, F# can easily take full advantage of Silverlight's multithreading capability on the client, exploiting the increasing number of cores per system produced by the many-core era of computing.

Using Isolated Storage, a Silverlight application can cache data and user preferences on the client machine for offline use or quicker responsiveness while the application connects to the backend systems. Be aware though, it is wise to keep sensitive data, sensitive logic, and intellectual property behind the firewall. A XAP file is just a ZIP file with a different name, and the contents can be reverse engineered. Enterprise applications built on Silverlight may present less concern regarding reverse engineering if only employees can access and download the Silverlight application as opposed to a publicly accessible application hosted on the Web open to anyone with an Internet connection. During the system design phase, it is important to plan how and where the code executes in a Silverlight application. Proper planning and architecture accounts for security, scalability, and performance.

Software Runtime and Developer Requirements

As mentioned earlier, Silverlight is a web browser plug-in runtime environment for executing .NET code. It uses a special CLR that is portable on both Windows and Macintosh computers. Also, through the Mono project called Moonlight, Silverlight is also available unofficially on Linux. Officially, Silverlight 3 and 4 are supported on Windows XP through Windows 7 in IE 7, IE 8, and Google Chrome. For the Mac, Silverlight 3 is supported in Safari on Intel hardware. The following table shows official support for Silverlight versions:

	IE 6 SP2	IE 7 & 8	Firefox 3	Safari	Google Chrome
Windows Vista/7		Silverlight 1, 2, 3, and 4		Silverlight 1 and 2	Silverlight 2, 3, and 4
Windows XP/2003	Silverlight 1, 2, 3, and 4	Silverlight 1, 2, 3, and 4		Silverlight 1 and 2	Silverlight 2, 3, and 4
Mac OS 10.4/10.5 Intel			Silverlight 1, 2, and 3	Silverlight 1, 2, and 3

Silverlight 1.0 released to Web in 2007 only supported JavaScript. Since Silverlight 2, released in 2008, Silverlight has included a .NET runtime environment. Because Silverlight requires a special lightweight CLR, a compiler target is required to generate Silverlight-compatible MSIL. Visual Studio provides templates for making the build process easier.

Visual Studio 2010 includes a project template called the "F# Silverlight Library" for creating code that can execute in the browser in a Silverlight application. Unfortunately, Visual Studio 2010 does not include a template for building the entire Silverlight application in F#, but it is possible to use C# or VB.NET templates to build the Silverlight application project and reference an F# class library for all the logic. An F# Silverlight application template written by Dmitry Lomov, a developer on the F# team, has been available on MSDN Code Gallery with limitations and documented issues. Perhaps as it continues to mature it will be included in one of the Silverlight or F# releases.

One of the best free extensions for developing Silverlight is the Silverlight Toolkit. The Silverlight Toolkit from CodePlex provides rich graphing tools and controls for building Silverlight applications. Additional Silverlight controls are also available from various third-party component venders.

F# Silverlight development with Visual Studio 2008 requires the F# CTP and the Microsoft Silverlight 3 Tools for Visual Studio 2008 SP1 found on Microsoft Download Center plus Luke Hoban's "F# for Silverlight" project templates for Silverlight 3.0 found on MSDN Code Gallery at

http://code.msdn.microsoft.com/fsharpsilverlight

Depending on which version of Visual Studio will be used for development (2008 or 2010) and which version of Silverlight (3 or 4) is targeted, various downloads are required. Note that Silverlight 4 development is not supported on Visual Studio 2008. Figure 22-2 shows the necessary components.

Figure 22.2. FIGURE 22-2

The key project template in Visual Studio that hosts the XAML files and builds the XAP file is called the Silverlight Application project template. The template for a Silverlight application creates two projects, one for building the Silverlight XAP file and another for building a web site that will host the Silverlight binaries and any services needed for communicating back to the server from the client application.

The C# or VB Silverlight application includes XAML files for laying out the user interface. Silverlight and WPF (Windows Presentation Framework) both use XAML for user interface development. There are only minor differences between Silverlight and WPF and, in fact, it is possible to write applications that can be compiled into both Silverlight and WPF. The similarities between the two are no accident; the original name for Silverlight was WPF/E or Windows Presentation Framework Everywhere. So skills gained from using one framework easily translate to the other.

The web site project by default includes an ASP.NET page for testing the Silverlight application, even though Silverlight does not require ASP.NET for hosting, only HTML. This project template is handy for rapid application development, because it facilitates building and running a Silverlight application and automatically connecting the debugger to both the web server process in the Visual Studio "Cassini" service and the Silverlight process on the browser. It also deploys the XAP file to a ClientBin folder that the HTML references.

When the build environment is set up, creating some sample data in F# and binding it to a chart provides a basic understanding of the chart tools. To demonstrate the ease and power of combining F# and Silverlight, this chapter demonstrates how to manipulate the chart by running the data through a moving average algorithm implemented in an F# function in just three lines of code. Moving average is often used in financial applications to visualize trends when the data series is volatile and erratic. F# provides not only a great way to express and manipulate data, but also to analyze data. Combined with Silverlight, F# can be a powerful tool for manipulating and visualizing data.

When the Silverlight project is compiled, the build process packages it into a XAP file. As mentioned previously, the XAP file is actually a zip file with a .xap extension. Changing the extension to .zip facilitates the ability to examine the contents. In fact, this technique is often handy when debugging deployment issues.

<Button Content="Button" Height="23" HorizontalAlignment="Left"
Margin="14,14,0,0" Name="button1" VerticalAlignment="Top" Width="75" />

XAML is an XML implementation that stands for eXtensible Application Markup Language and is used in Silverlight applications to describe the UI elements, layout, and behavior such as animation.

The XAML file includes a code-behind file in a similar fashion to Web Forms. The XML is used to declare the graphical components such as buttons and charts and important attributes including name and type.

Examining the XAML for MainPage.xaml created in the previous section reveals:

<UserControl x:Class="SilverlightAppTest.MainPage"
 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:DesignWidth="640"
 d:DesignHeight="480">
  <Grid x:Name="LayoutRoot">
    <Button Content="Button"
            Height="23"
            HorizontalAlignment="Left"
            Margin="14,14,0,0"
            Name="button1"
            VerticalAlignment="Top"
            Width="75" />
  </Grid>
</UserControl>

The XAML for this user control includes several namespaces that need to be added to in order to support additional controls and libraries. The UserControl element is the root XML document element and contains all the other elements. The Grid element has a name attribute assigned the value LayoutRoot that is used in examples later in this chapter to pass to F# a handle on the UI. Inside the grid is the button added in the previous section. The button contains attributes to describe its size and position, but most important has a name attribute that is used inside F# for acquiring a handle to this component to register events such as the Click event.

After the basic Silverlight build environment is prepped, it is easy to start building an F# Silverlight Library and get instant feedback verifying that the Silverlight Library is functioning properly in the Silverlight CLR.

module Module1

let HelloFromFsharp =
    "hello from F# at " + System.DateTime.Now.ToString()

button1.Content = Module1.HelloFromFsharp;

Click="button1_Click"

private void button1_Click(object sender, RoutedEventArgs e)
{
    button1.Content = Module1.HelloFromFsharp;
}

control.EventName.Add( fun(_) ->
    // event handler code here
    )

let button1 : Button = downcast container.FindName("button1")

static member WireUpEvents (container:UserControl) =
    let button1 : Button = downcast container.FindName("button1")
    button1.Click.Add(fun(_) ->
        button1.Content <- Module1.HelloFromFsharp
        )

public MainPage()
{
    InitializeComponent();
    SilverlightEvents.WireUpEvents(this.LayoutRoot);
}

namespace FSharpPro

open System.Windows.Controls

type SilverlightEvents() =
    static member WireUpEvents (container:UserControl) =
        let button1 : Button =
            downcast container.FindName("button1")

        button1.Click.Add(fun(_) ->
            button1.Content <- Module1.HelloFromFsharp
            )

To use the chart controls described next, download and install the Silverlight toolkit from CodePlex located at http://www.codeplex.com/Silverlight.

There are two versions of the Toolkit: one for Silverlight 3 and one for Silverlight 4. Download the appropriate one or both if needed and install them.

The Silverlight Toolkit offers a full set of rich controls including mature components such as the DatePicker, TabControl, and TreeView. It also includes data visualization controls for creating scatter, pie, bubble bar, and line charts.

As mentioned earlier, the toolkit also includes a Silverlight Unit Test Application project template for C# and VB.

Line Charts and Area Charts

Line charts are fairly straightforward to work with. Simply place a chart on the XAML surface, and add a LineSeries to it. To create an area chart, simply use an AreaSeries instead of a LineSeries. The LineSeries can be declared with XAML, loaded from a static resource at design time, or created at runtime programmatically. See Figure 22-3 for an example of a line chart.

Figure 22.3. FIGURE 22-3

To add the chart to the user control, an XML namespace is added to the UserControl element.

xmlns:chartingToolkit="clr-
namespace:System.Windows.Controls.DataVisualization.
Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"

Then add the Chart element to the contents of the Grid element.

<chartingToolkit:Chart
   Title="Chart Title"
   Name="chart1"
   Margin="12,41,12,0"
   Height="274">
</chartingToolkit:Chart>

XAML is used to declaratively add a line series using a point collection by placing it inside the Chart element. Visual Studio 2010 automatically displays the chart in the designer (see Figure 22-4).

<chartingToolkit:LineSeries
      DependentValuePath="Y"
      IndependentValuePath="X">
      <chartingToolkit:LineSeries.ItemsSource>
         <PointCollection>
            <Point>0,15</Point>
            <Point>35,5</Point>
            <Point>60,3</Point>
            <Point>75,35</Point>
            <Point>100,50</Point>
         </PointCollection>
      </chartingToolkit:LineSeries.ItemsSource>
   </chartingToolkit:LineSeries>

Designer Tools

Visual Studio 2010 includes a built-in designer to enable WYSIWYG (what you see is what you get) design of the Silverlight XAML. (See Figure 22-5.) This allows for adjusting the background gradients and other design elements for getting rapid feedback without rebuilding and running the application in the browser.

Figure 22.4. FIGURE 22-4

Figure 22.5. FIGURE 22-5

With Visual Studio 2008 there is no XAML designer for Silverlight built in. Expression Blend allows designers to open Visual Studio solution files and modify the XAML and even launch the application without Visual Studio (see Figure 22-6). It is possible to use Expression Blend as a designer tool to get the same WYSIWYG functionality found in Visual Studio 2010 and in some ways more.

Figure 22.6. FIGURE 22-6

Expression Blend 3 is targeted at Visual Studio 2008 and Silverlight 3 development and design. Expression Blend 4 is targeted at Visual Studio 2010 and Silverlight 4 development and design. When both developers and designers can work on the same files at the same time, there is more opportunity to work together and provide rapid feedback and development cycles. If a developer is also doing design work, both tools can be used together at the same time on the same solution. When switching between Visual Studio and Expression Blend, each tool prompts when the other updates. This prompt can be suppressed in Visual Studio under Tools

Data binding in Silverlight (as with WPF) can be done declaratively using XAML or programmatically using the Binding class.

type SeriesDataPoint(index, value) =
    member this.Index with get() = index
    member this.Value with get() = value

open System.Windows.Controls

type SampleDataSet() =
    static member SampleSeries =
        let data = new ObjectCollection()
        data.Add(new SeriesDataPoint(0, 124.1))
        data.Add(new SeriesDataPoint(1, 124.3))
        data.Add(new SeriesDataPoint(2, 125.7))
        data.Add(new SeriesDataPoint(3, 115.4))
        data.Add(new SeriesDataPoint(4, 115.9))
        data.Add(new SeriesDataPoint(5, 125.0))
        data.Add(new SeriesDataPoint(6, 133.6))
        data.Add(new SeriesDataPoint(7, 131.9))
        data.Add(new SeriesDataPoint(8, 127.3))
        data.Add(new SeriesDataPoint(9, 137.3))
        data
                                                    

<Application
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="FSharpSilverlightDemo.App"
             >
    <Application.Resources>
      <!-- put resources here -->
    </Application.Resources>
</Application>
                                        

xmlns:sampleData="clr-
namespace:ProFSharp.SeriesData;assembly=ProFSharp.SeriesData"

<Application.Resources>
        <sampleData:SampleDataSet x:Key="SampleDataSet"/>
    </Application.Resources>

<chartingToolkit:Chart
   Title="Simple Series Data"
   Name="chart1"
   Margin="12,41,12,0"
   Height="274">
    <chartingToolkit:Chart.Series>
      <chartingToolkit:LineSeries
        Title="Sample Series 1"
        ItemsSource="{Binding SampleSeries,
            Source={StaticResource SampleDataSet}}"
        IndependentValueBinding="{Binding Index}"
        DependentValueBinding="{Binding Value}" />
    </chartingToolkit:Chart.Series>
</chartingToolkit:Chart>
                                                          

type SeriesDataPoint(index, value) =
    member this.Index with get() = index //IndependentValueBinding
    member this.Value with get() = value //DependentValueBinding

namespace ProFSharp.ChartHelper

open System.Windows.Controls.DataVisualization.Charting
open System.Windows.Data //for data binding

type DataConverter =
    static member CreateLineSeries title data =
        let series = new LineSeries()
        series.ItemsSource <- data
        series.DependentValueBinding <- new Binding("Value")
        series.IndependentValueBinding <- new Binding("Index")
        series.Title <- title
        series

buttonLoadSampleData.Click.Add(fun(_) ->
   let data = SampleDataSet.SampleSeries2
   let series = DataConverter.CreateLineSeries "Series 2" data
   chart.Series.Add(series)
   )

namespace ProFSharp.ChartHelper

open System.ComponentModel

type SeriesDataPoint(index:int, value:float) =
   let mutable v = value
   let propertyChanged = Event<_, _>()

   member this.Index
      with get() = index
   member this.Value
      with get() = v
      and set(value) =
         v <- value

propertyChanged.Trigger(this,
            PropertyChangedEventArgs("Value"))
   interface INotifyPropertyChanged with
       [<CLIEvent>]
       member this.PropertyChanged = propertyChanged.Publish
                                                                        

Data by itself can be interesting to visualize, but often the trends or patterns in data can be more useful. In the financial sector and in economics, the moving average is a common model often applied to time series data to assist analysts in understanding trends and help predict future directions of a series. But looking for patterns in data can be useful for a range of solutions including security attack detection or business intelligence applications. An algorithm for calculating moving average in F# takes the data and chunks it into windows and calculates the average of each window:

let MovingAverage period data =
     Seq.windowed period data
     |> Seq.map Array.average

let testdata = [1.0 .. 10.0]
let result = MovingAverage 4 testdata
                                              

The output of these three let statements to the F# Interpreter are:

val MovingAverage : int -> seq<float> -> seq<float>
val testdata : float list =
  [1.0; 2.0; 3.0; 4.0; 5.0; 6.0; 7.0; 8.0; 9.0; 10.0]
val result : seq<float>

Viewing the result in FSI displays the first few items in the sequence.

> result;;
val it : seq<float> = seq [2.5; 3.5; 4.5; 5.5; ...]
>

The result is a moving average based on the period applied. The average of the first four points are (1 + 2 + 3 + 4)/ 4 = 2.5, which is the first value of the series result. The second set is (2 + 3 + 4 + 5)/4 = 3.5 and so on through the sequence. The Seq.windowed function returns a sequence that produces sliding windows of the input elements as arrays of the size specified.

If the testdata value contains ten elements (the floating point numbers 1 through 10) then Seq.windowed 4 testdata returns ten arrays each containing four elements:

> Seq.windowed 4 testdata;;
val it : seq<float []> =
  seq
    [[|1.0; 2.0; 3.0; 4.0|]; [|2.0; 3.0; 4.0; 5.0|];
     [|3.0; 4.0; 5.0; 6.0|]; [|4.0; 5.0; 6.0; 7.0|]; ...]
>

Take that sequence of windows and using the pipe forward operator, pipe it into the Seq.map function to apply the average of each array.

Seq.windowed period data
     |> Seq.map Array.average

Overlaying the moving average on the chart provides an augmented view of the original data. Using a slider control or other input control, the user interface can provide input for the moving average period function and provide a parameter to animate the chart.

Using a C# or VB Silverlight Application project to host the XAML and build the XAP file, an F# Silverlight Library project to put all the application logic, and the Silverlight Toolkit to provide visualization, the application framework is ready to generate some interesting charting. Leveraging the INotifyPropertyChanged to provide animation to the data points and a slider control to give the user the ability to change the range of the moving average period window, the following example puts together a MovingAverageModel to store the SeriesDataPoint collection as a generic List. When the UpdateSeries method is called as a result of a mouse event, a new moving average is calculated and the data point Value property is updated.

type internal MovingAverageModel(chart:Chart, slider:Slider) =
    // used for animated data bining
    let mutable m_dynamicItemsSource =
        new System.Collections.Generic.List<SeriesDataPoint>()
    // stores the original data
    let mutable m_data = []
    // stores the moving average range (window size)
    let mutable m_range = 1

    member private this.GetMovingAverageSeries movingAverage =
        let title = String.Format("{0} Moving Average", m_range)
        DataConverter.ConvertSequenceToAreaSeries title movingAverage

    member private this.InitSeries =
        chart.Series.Clear()
        // generate moving average using range and data

let movingAverage = MovingAverage m_range m_data
        // build both AreaSeries sets
        let series1 =
            DataConverter.ConvertSequenceToAreaSeries "Original Data" m_data
        let series2 = this.GetMovingAverageSeries movingAverage
        chart.Series.Add(series1)
        // generate dynamic item source used for animated data binding
        let array = List.toArray(m_data)
        let max = array.Length - 1
        for i in 0..max do
            m_dynamicItemsSource.Add(new SeriesDataPoint(i, array.[i]))
        series2.ItemsSource <- m_dynamicItemsSource
        chart.Series.Add(series2)
        this.UpdateSeries()
        ()

    member this.Init() =
        //initialize members
        m_dynamicItemsSource <-
            new System.Collections.Generic.List<SeriesDataPoint>()
        m_range <- (int slider.Value)
        m_data <- List.ofSeq <| GenerateData 200.0 50.0 50
        this.InitSeries

    //naive forcast algorithm based on historical flow
    member internal this.Forcast last index =
        let distance = index - last + 2
        let pastPoint = m_dynamicItemsSource.Item(last - distance)
        let lastPoint = m_dynamicItemsSource.Item(last - 1)
        let trend = lastPoint.Value - pastPoint.Value
        lastPoint.Value + trend

    member internal this.UpdateSeries() =
        m_range <- (int slider.Value)
        let movingAverage = MovingAverage m_range m_data |> Seq.toList
        for point in m_dynamicItemsSource do
            if point.Index < movingAverage.Length then
                point.Value <- movingAverage.Item(point.Index)
            else
                point.Value <- this.Forcast movingAverage.Length point.Index
            ()
        let legend = chart.Series.[1].LegendItems.Item(0) :?> LegendItem
        legend.Content <- m_range.ToString() + " Moving Average"
        ()

    member
this.UpdateMovingAverage(args:RoutedPropertyChangedEventArgs<float>) =
        let oldVal = int args.OldValue
        let newVal = int args.NewValue
        if oldVal = newVal then
            ()
        elif (Math.Abs(oldVal - newVal) > 4) then
            m_range <- newVal
            this.UpdateSeries()

()
        else
            m_range <- newVal
            ()
                                           

To complete the application, wire up the model to the chart. Add a slider and buttons and add event handlers to trigger the model to generate new data. The sample code downloadable from the book's site at www.wrox.com will product the graph seen in Figure 22-7.

static member WireUpMovingAverageChart (container:UserControl) =
   let chart : Chart = downcast container.FindName("chartMovingAverage")
   let slider : Slider = downcast container.FindName("sliderMovingAverage")

   let model = new MovingAverageModel(chart, slider)
   model.Init()
   let buttonNewData : Button = downcast container.FindName("buttonNewData")
   buttonNewData.Click.Add(fun(_) -> model.Init())

   slider.MouseLeftButtonUp.Add(fun(_) -> model.UpdateSeries())
   slider.ValueChanged.Add(fun(callback) -> model.UpdateMovingAverage(callback))
   ()
                                                           

Figure 22.7. FIGURE 22-7

This example generates the data randomly. For a true application, the next step would be to add a server-side component using RIA Services or another Silverlight-accessible service. Silverlight has the capability to consume restful services, WCF, Web services, and more. By placing the data source on the server, the data can be controlled and protected. Perhaps the service may require a monthly subscription, may be throttled by priority, or may provide limited access based on security roles. All these scenarios are possible by building services. And those services can also be built in F#.

This chapter leverages the powerful capabilities of F# to build rich, dynamic, and responsive Silverlight applications. Currently the tools are limited for F# Silverlight Application templates, but a C# or VB Silverlight Application template can be used to delegate all the important code to an F# Silverlight Library. Because Microsoft has implemented the FSharp.Core.dll (the F# runtime) for Silverlight, F# code can run in a multitude of browsers on multiple operating systems including Macintosh OS, Firefox, and Google Chrome browsers. Silverlight is a flexible application framework for both public Web applications and for Enterprise applications. Because Silverlight is a client-side technology, it can be easily deployed on any web server, including Linux and UNIX-based systems. As long as the users have installed the Silverlight plug-in in their browser, they can take advantage of all the power it offers. That is why Silverlight has been used for everything from the broadcast of the Olympics to real-time dashboards for financial advisors. Together F# and Silverlight make a powerful pair.