F# And Silverlight
Upcoming SlideShare
Loading in...5

F# And Silverlight



This talk describes building Silverlight 3 applications using F#. Both Visual Studio 2008 and 2010 RC are demonstrated. This talk was given by Talbott Crowell at the F# User Group meeting on April 4, ...

This talk describes building Silverlight 3 applications using F#. Both Visual Studio 2008 and 2010 RC are demonstrated. This talk was given by Talbott Crowell at the F# User Group meeting on April 4, 2010 at Microsoft, Cambridge, MA.



Total Views
Views on SlideShare
Embed Views



1 Embed 26

http://www.slideshare.net 26



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

F# And Silverlight F# And Silverlight Presentation Transcript

  • F# and Silverlight
    Talbott Crowell
    F# User Group, April 5, 2010http://fsug.org
  • QuickIntro to F#
    Calculating Moving Average in F#
    Quick Intro to Silverlight
    Visualizing F# Using Silverlight Toolkit
  • Quick Intro to F#
  • Functional language developed by Microsoft Research
    2002 language design started by Don Syme
    2005 F# 1.0.1 public release (integration w/ VS2003)
    2010 F# is “productized” and baked into VS2010
    Functional/Imperative/OO/Language Oriented
    Key characteristics
    Succinct, Type Inference (strongly typed), 1st class functions
    What is F#
  • Type inferencing
    Strong typed
    Functions as values
    F# Intro
    b is a float
    let a = 5
    let b = 6.0
    let c = “7 feet”
    let d x = x * x
    let e = d b
    d is a function
    What data type is e?
  • The |> Combinator “Pipe Forward”
    F# Combinators
    x |> f is the same as f x
    let sqr x = x * x
    sqr 5
    5 |> sqr
  • Moving Average in F#
  • Start with a list of numbers
    Moving Average step 1
    let testdata = [1.0 .. 10.0]
    testdata is a list of floats
  • Create windows of the series
    Moving Average step 2
    Seq.windowed 4 testdata
    it is a sequence of float arrays
  • Average the values in each array
    Moving Average step 3
    Array.average [|1.0; 2.0; 3.0; 4.0|]
  • Use Seq.map to calculate average of all arrays in the sequence
    Moving Average step 4
    let windowedData = Seq.windowed period data
    Seq.map Array.averagewindowedData
    the first argument is the function to apply to each item in the sequence
    the second argument is the sequence
  • Use the pipe forward operator to put it together and omit the let
    Moving Average step 5
    Seq.windowed period data
    |> Seq.map Array.average
  • Put our algorithm into a function and test it
    Moving Average function
    let MovingAverage period data =
    Seq.windowed period data
    |> Seq.map Array.average
    let testdata = [1.0 .. 10.0]
    let test = MovingAverage 4 testdata
  • Let’s generate some random data
    open System
    let 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
    Seq.map genValue indexes
    let dataGenerator = GenerateData 50.0 100.0 200
  • Putting it together
    let data1 = List.ofSeqdataGenerator
    let data2 = List.ofSeq <| MovingAverage 10 data1
  • Time to visualize…
  • Quick Intro to Silverlight
  • What is Silverlight?
    Microsoft RIA plug-in for browsers
    2007 Version 1.0 JavaScript based
    2008 Version 2.0 .NET based
    2009 Version 3.0 more controls, out of browser support (offline)
    2010 Version 4.0 printing, COM, Multi-touch
    Runs on multiple browsers/OS
    IE, Safari, Firefox, Chrome / Win, MacOS, Linux*
    • via Mono Moonlight implementation
    • WPF/E (original name)
  • VS 2008
    Microsoft Silverlight 3 Tools for Visual Studio 2008 SP1
    VS 2010
    Built in support for Silverlight 3
    Current RC requires “Silverlight 4 Tools for VS 2010”
    RTM expected to include Silverlight 3 and 4 tools built in
    Visual Studio Integration
  • Visual Studio 2008
    Using Luke Hoban’s F# Silverlight templates
    Visual Studio 2010 RC
    F# Support for Silverlight in VS
  • Silverlight Toolkit
    Silverlight SDK
    Silverlight 3 SDK
    Silverlight 4 SDK Beta
    Graphing Controls
  • Visualizing F# using Silverlight Toolkit
  • Use the “Silverlight Application” template in Visual Studio
    Creates Silverlight Application (produces XAP)
    Creates Web Application (hosts web site and XAP)
    Create a Silverlight Application
  • Initial UserControl
    Notice XML Namespaces (need to add more)
  • Add References
  • Add namespaces to XAML to support Silverlight Toolkit
    xmlns: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.xaml
    Add a chart to MainPage.xaml
  • add namespace
    add sample dataset
    Static Resource App.xaml
  • Similar to a Class Library project except it compiles with special options to target the Silverlight CLR
    Use file links to share F# files between Class Library and Silverlight Library
    Add Existing File
    Choose “Add As Link” from dropdown
    Create an F# Silverlight Library
  • SeriesDataPoint is a class (type) that has two members, Index and Value
    Used for series data
    Add Chart Helper
    type SeriesDataPoint(index, value) =
    member this.Index with get() = index
    member this.Value with get() = value
  • Used by XAML Designer to bind at design time
    Add Sample Data Set
    type 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))
  • Designer is now binding with F#
  • Code behind for MainPage.xaml
    Use constructor to wire up events
    Add code behind for MainPage
    public partial class MainPage : UserControl
    public MainPage()
  • Event handling code for application in F#
    SilverlightEvents in F#
  • Sample Button Click Event
    buttonGenerateSampleData.Click.Add(fun(_) ->
    let data = GenerateDataPoints 125.0 10.0 10
    let series = DataConverter.ConvertDataPointsToLineSeries
    "Sample Series 3" data
  • Slider Events - Mouse
    slider.MouseLeftButtonUp.Add(fun(_) -> model.UpdateSeries())
    member internal this.UpdateSeries() =
    m_range <- (intslider.Value)
    let movingAverage = MovingAveragem_rangem_data
    let newSeries = this.GetMovingAverageSeriesmovingAverage
    chart.Series.[1] <- newSeries
  • Slider Events – Value Changed
    slider.ValueChanged.Add(fun(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) then
    m_range <- newVal
    m_range <- newVal
  • Generate Data and Moving Average
  • Getting Started
    Tim Heuer’s Blog
    Silverlight 4 and Visual Studio 2010 RC
  • Bart Czernicki’s Silverlight Hack Blog
    Luke Hoban’s WebLog
    support for F# in VS 2008
    F# and Silverlight 2.0
    Other Helpful Links
  • http://fsug.org
    Thank you. Questions?F# and Silverlight
    Talbott Crowell
    Twitter: @talbottand @fsug