F# And Silverlight

F# and SilverlightTalbott CrowellF# User Group, April 5, 2010http://fsug.org

QuickIntro to F#Calculating Moving Average in F#Quick Intro to SilverlightVisualizing F# Using Silverlight ToolkitAgenda

Functional language developed by Microsoft Research2002 language design started by Don Syme2005 F# 1.0.1 public release (integration w/ VS2003)2010 F# is “productized” and baked into VS2010Multi-paradigmFunctional/Imperative/OO/Language OrientedKey characteristicsSuccinct, Type Inference (strongly typed), 1st class functionsWhat is F#

Type inferencingStrong typedFunctions as valuesF# Introb is a floatlet a = 5let b = 6.0let c = “7 feet”let d x = x * xlet e = d bd is a functionWhat data type is e?

The |> Combinator “Pipe Forward” ExampleF# Combinators x |> f is the same as f x let sqr x = x * xsqr 5 5 |> sqr

Start with a list of numbersMoving Average step 1let testdata = [1.0 .. 10.0]testdata is a list of floats

Create windows of the seriesMoving Average step 2Seq.windowed 4 testdatait is a sequence of float arrays

Average the values in each arrayMoving Average step 3Array.average [|1.0; 2.0; 3.0; 4.0|]

Use Seq.map to calculate average of all arrays in the sequenceMoving Average step 4let windowedData = Seq.windowed period dataSeq.map Array.averagewindowedDatathe first argument is the function to apply to each item in the sequencethe second argument is the sequence

Use the pipe forward operator to put it together and omit the letMoving Average step 5Seq.windowed period data |> Seq.map Array.average

Put our algorithm into a function and test itMoving Average functionlet MovingAverage period data =Seq.windowed period data |> Seq.map Array.averagelet testdata = [1.0 .. 10.0]let test = MovingAverage 4 testdata

Let’s generate some random dataopen Systemlet GenerateData offset variance count = let rnd = new Random() let randomDouble variance = rnd.NextDouble() * variance let indexes = Seq.ofList [0..(count-1)] let genValuei = let value = float i + offset + randomDouble variance value Seq.map genValue indexeslet dataGenerator = GenerateData 50.0 100.0 200

Putting it togetherlet data1 = List.ofSeqdataGeneratorlet data2 = List.ofSeq <| MovingAverage 10 data1

What is Silverlight?Microsoft RIA plug-in for browsers2007 Version 1.0 JavaScript based2008 Version 2.0 .NET based2009 Version 3.0 more controls, out of browser support (offline)2010 Version 4.0 printing, COM, Multi-touchRuns on multiple browsers/OSIE, Safari, Firefox, Chrome / Win, MacOS, Linux*via Mono Moonlight implementation

WPF/E (original name)VS 2008Microsoft Silverlight 3 Tools for Visual Studio 2008 SP1VS 2010Built in support for Silverlight 3Current RC requires “Silverlight 4 Tools for VS 2010”http://www.silverlight.net/getstarted/silverlight-4/RTM expected to include Silverlight 3 and 4 tools built inVisual Studio Integration

Visual Studio 2008Using Luke Hoban’s F# Silverlight templatesVisual Studio 2010 RCBuilt-inF# Support for Silverlight in VShttp://code.msdn.microsoft.com/fsharpsilverlight

Silverlight Toolkithttp://silverlight.codeplex.com/Silverlight SDKSilverlight 3 SDKSilverlight 4 SDK BetaGraphing Controls

Visualizing F# using Silverlight Toolkit

Use the “Silverlight Application” template in Visual StudioCreates Silverlight Application (produces XAP)Creates Web Application (hosts web site and XAP)Create a Silverlight Application

Initial UserControlNotice XML Namespaces (need to add more)XAML

Add namespaces to XAML to support Silverlight Toolkitxmlns:controls="clr-namespace: System.Windows.Controls; assembly=System.Windows.Controls"xmlns:controlsToolkit="clr-namespace: System.Windows.Controls; assembly=System.Windows.Controls.Toolkit"xmlns:chartingToolkit="clr-namespace: System.Windows.Controls.DataVisualization.Charting; assembly=System.Windows.Controls.DataVisualization.Toolkit"xmlns:chartingPrimitivesToolkit="clr-namespace: System.Windows.Controls.DataVisualization.Charting.Primitives; assembly=System.Windows.Controls.DataVisualization.Toolkit"

Sample Series comes from Static Resource.Define Static Resource in App.xamlAdd a chart to MainPage.xaml

add namespaceadd sample datasetStatic Resource App.xaml

Similar to a Class Library project except it compiles with special options to target the Silverlight CLRUse file links to share F# files between Class Library and Silverlight LibraryAdd Existing FileChoose “Add As Link” from dropdownCreate an F# Silverlight Library

SeriesDataPoint is a class (type) that has two members, Index and ValueUsed for series dataAdd Chart Helpertype SeriesDataPoint(index, value) = member this.Index with get() = index member this.Value with get() = value

Used by XAML Designer to bind at design timeAdd Sample Data Settype SampleDataSet() = static member SampleSeries1 = 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

Designer is now binding with F#

Code behind for MainPage.xamlUse constructor to wire up eventsAdd code behind for MainPagepublic partial class MainPage : UserControl{ public MainPage() {InitializeComponent();SilverlightEvents.RegisterHandlers(this.LayoutRoot); }}

Event handling code for application in F#SilverlightEvents in F#

Sample Button Click EventbuttonGenerateSampleData.Click.Add(fun(_) -> let data = GenerateDataPoints 125.0 10.0 10 let series = DataConverter.ConvertDataPointsToLineSeries "Sample Series 3" datachart.Series.Add(series) )

Slider Events - Mouseslider.MouseLeftButtonUp.Add(fun(_) -> model.UpdateSeries())member internal this.UpdateSeries() =m_range <- (intslider.Value) let movingAverage = MovingAveragem_rangem_data let newSeries = this.GetMovingAverageSeriesmovingAveragechart.Series.[1] <- newSeries ()

Slider Events – Value Changedslider.ValueChanged.Add(fun(callback) ->model.UpdateMovingAverage(callback))member this.UpdateMovingAverage(args:RoutedPropertyChangedEventArgs<float>) = let oldVal = intargs.OldValue let newVal = intargs.NewValue if oldVal = newVal then ()elif (Math.Abs(oldVal - newVal) > 4) thenm_range <- newValthis.UpdateSeries() () elsem_range <- newVal ()

Generate Data and Moving Average

Getting Startedhttp://www.silverlight.net/getstarted/silverlight-4/Tim Heuer’s Bloghttp://timheuer.com/blog/archive/2010/03/15/whats-new-in-silverlight-4-rc-mix10.aspxSilverlight 4 and Visual Studio 2010 RC

Bart Czernicki’s Silverlight Hack Bloghttp://www.silverlighthack.com/post/2009/11/04/Silverlight-3-and-FSharp-Support-in-Visual-Studio-2010.aspxLuke Hoban’s WebLoghttp://blogs.msdn.com/lukeh/archive/2009/06/26/f-in-silverlight.aspxsupport for F# in VS 2008http://code.msdn.microsoft.com/fsharpsilverlightF# and Silverlight 2.0http://jyliao.blogspot.com/2008/11/f-and-silverlight-20.htmlOther Helpful Links

http://fsug.orgThank you. Questions?F# and SilverlightTalbott CrowellThirdM.comhttp://talbottc.spaces.live.comTwitter: @talbottand @fsug

F# And Silverlight

More Related Content

What's hot

Similar to F# And Silverlight

More from Talbott Crowell

Recently uploaded

F# And Silverlight