jQuery UI Examples in CoffeeScript

Recently, I've been playing with CoffeeScript and have found it to be a lot of fun. I'm a big fan of JavaScript and CoffeeScript has only added to the enjoyment of writing client-side code by taking away a few of the "bad parts" and reducing syntactic noise. To help learn the language, I took a few of the jQuery UI examples and re-wrote them in CoffeeScript. You can find the full solution (F# + ASP.NET MVC (Razor) + CoffeeScript) at https://github.com/dmohl/FsCoffeeScriptjQueryUIExample. (Note: You will need to install the Mindscape Web Workbench Visual Studio 2010 extension to make the CoffeeScript aspects work correctly. Visit this post by Scott Hanselman for information on getting started with this extension).

Here are the before and after examples:

This simple Portlets example comes from the jQuery UI demo found at http://jqueryui.com/demos/sortable/#portlets.

The JavaScript Version:

(function (portlets, undefined) {
    portlets.init = function() {
        $(".column").sortable({
            connectWith: ".column"
        });

        $(".portlet")
	        .addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
	        .find(".portlet-header").addClass("ui-widget-header ui-corner-all")
	        .prepend("<span class='ui-icon ui-icon-minusthick'></span>")
	        .end().find(".portlet-content");

        $(".portlet-header .ui-icon").click(function () {
            $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
            $(this).parents(".portlet:first").find(".portlet-content").toggle();
        });

        $(".column").disableSelection();
    };

} (window.portlets = window.portlets || {}));

The CoffeeScript Version:

((portlets) ->
  portlets.init = ->  
    $(".column").sortable(connectWith: ".column").disableSelection()

    $(".portlet")
      .addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
      .find(".portlet-header").addClass("ui-widget-header ui-corner-all")
      .prepend("<span class='ui-icon ui-icon-minusthick'></span>")
      .end().find ".portlet-content"

    $(".portlet-header .ui-icon").click -> 
      $(this).toggleClass("ui-icon-minusthick").toggleClass "ui-icon-plusthick"
      $(this).parents(".portlet:first").find(".portlet-content").toggle()
) window.portlets = window.portlets or {}

This simple Photo Manager example comes from the jQuery UI demo found at  http://jqueryui.com/demos/droppable/#photo-manager.

The JavaScript Version:

(function (pictureManager, undefined) {
    pictureManager.init = function() {
        var $gallery = $("#gallery"),
		    $trash = $("#trash");

	    $( "li", $gallery ).draggable({
		    cancel: "a.ui-icon",
		    revert: "invalid", 
		    containment: $( "#demo-frame" ).length ? "#demo-frame" : "document", 
		    helper: "clone",
		    cursor: "move"
	    });

	    $trash.droppable({
		    accept: "#gallery > li",
		    activeClass: "ui-state-highlight",
		    drop: function( event, ui ) {
			    deleteImage( ui.draggable );
		    }
	    });

	    $gallery.droppable({
		    accept: "#trash li",
		    activeClass: "custom-state-active",
		    drop: function( event, ui ) {
			    recycleImage( ui.draggable );
		    }
	    });

        $("ul.gallery > li").click(function (event) {
            var $item = $(this), $target = $(event.target);
            if ($target.is("a.ui-icon-trash")) {
                deleteImage($item);
            } else if ($target.is("a.ui-icon-zoomin")) {
                viewLargerImage($target);
            } else if ($target.is("a.ui-icon-refresh")) {
                recycleImage($item);
            }
            return false;
        });

        var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>";
        function deleteImage($item) {
            $item.fadeOut(function () {
                var $list = $("ul", $trash).length ?
				$("ul", $trash) :
				$("<ul class='gallery ui-helper-reset'/>").appendTo($trash);

                $item.find("a.ui-icon-trash").remove();
                $item.append(recycle_icon).appendTo($list).fadeIn(function () {
                    $item
					.animate({ width: "48px" })
					.find("img")
						.animate({ height: "36px" });
                });
            });
        }

        var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>";
        function recycleImage($item) {
            $item.fadeOut(function () {
                $item
				.find("a.ui-icon-refresh")
					.remove()
				.end()
				.css("width", "96px")
				.append(trash_icon)
				.find("img")
					.css("height", "72px")
				.end()
				.appendTo($gallery)
				.fadeIn();
            });
        }

        function viewLargerImage($link) {
            var src = $link.attr("href"),
			title = $link.siblings("img").attr("alt"),
			$modal = $("img[src$='" + src + "']");

            if ($modal.length) {
                $modal.dialog("open");
            } else {
                var img = $("<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />")
				.attr("src", src).appendTo("body");
                setTimeout(function () {
                    img.dialog({
                        title: title,
                        width: 400,
                        modal: true
                    });
                }, 1);
            }
        }
    };
} (window.pictureManager = window.pictureManager || {}));

The CoffeeScript Version:

((pictureManager) ->
  pictureManager.init = ->
    $gallery = $("#gallery")
    $trash = $("#trash")
    recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off'  
                            title='Recycle this image' 
                            class='ui-icon ui-icon-refresh'>Recycle image</a>"
    trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' 
                         title='Delete this image' 
                         class='ui-icon ui-icon-trash'>Delete image</a>"

    deleteImage = ($item) ->
      $item.fadeOut ->
        $list = if $("ul", $trash).length then $("ul", $trash) else $("<ul class='gallery ui-helper-reset'/>").appendTo $trash
        $item.find("a.ui-icon-trash").remove()
        $item.append(recycle_icon).appendTo($list).fadeIn ->
          $item.animate(width: "48px").find("img").animate height: "36px"

    recycleImage = ($item) ->
      $item.fadeOut ->
        $item.find("a.ui-icon-refresh").remove().end()
          .css("width", "96px").append(trash_icon).find("img")
          .css("height", "72px").end().appendTo($gallery).fadeIn()

    viewLargerImage = ($link) ->
      src = $link.attr "href"
      title = $link.siblings("img").attr "alt"
      $modal = $("img[src$='#{src}']")
      if $modal.length
        $modal.dialog "open"
      else
        img = $("<img alt='#{title}' width='384' height='288' 
               style='display: none; padding: 8px;' />")
               .attr("src", src).appendTo "body"
        setTimeout (->
          img.dialog 
            title: title
            width: 400
            modal: true
        ), 1

    $("li", $gallery).draggable 
      cancel: "a.ui-icon"
      revert: "invalid"
      containment: if $("#demo-frame").length then "#demo-frame" else "document"
      helper: "clone"
      cursor: "move"
    
    $trash.droppable 
      accept: "#gallery > li"
      activeClass: "ui-state-highlight"
      drop: (event, ui) ->
        deleteImage ui.draggable
    
    $gallery.droppable 
      accept: "#trash li"
      activeClass: "custom-state-active"
      drop: (event, ui) ->
        recycleImage ui.draggable
    
    $("ul.gallery > li").click (event) ->
      $item = $(this)
      $target = $(event.target)
      if $target.is "a.ui-icon-trash"
        deleteImage $item
      else if $target.is "a.ui-icon-zoomin"
        viewLargerImage $target
      else recycleImage $item  if $target.is "a.ui-icon-refresh"
      false    
) window.pictureManager = window.pictureManager or {}

This simple User Manager example comes from the jQuery UI demo found at  http://jqueryui.com/demos/dialog/#modal-form.

The JavaScript Version:

(function (userManager, undefined) {
    userManager.init = function () {
        $("#dialog:ui-dialog").dialog("destroy");

        var name = $("#name"),
			email = $("#email"),
			password = $("#password"),
			allFields = $([]).add(name).add(email).add(password),
			tips = $(".validateTips");

        function updateTips(t) {
            tips
				.text(t)
				.addClass("ui-state-highlight");
            setTimeout(function () {
                tips.removeClass("ui-state-highlight", 1500);
            }, 500);
        }

        function checkLength(o, n, min, max) {
            if (o.val().length > max || o.val().length < min) {
                o.addClass("ui-state-error");
                updateTips("Length of " + n + " must be between " +
					min + " and " + max + ".");
                return false;
            } else {
                return true;
            }
        }

        function checkRegexp(o, regexp, n) {
            if (!(regexp.test(o.val()))) {
                o.addClass("ui-state-error");
                updateTips(n);
                return false;
            } else {
                return true;
            }
        }

        $("#dialog-form").dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
            buttons: {
                "Create an account": function () {
                    var bValid = true;
                    allFields.removeClass("ui-state-error");

                    bValid = bValid && checkLength(name, "username", 3, 16);
                    bValid = bValid && checkLength(email, "email", 6, 80);
                    bValid = bValid && checkLength(password, "password", 5, 16);

                    bValid = bValid && checkRegexp(name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter.");
                    bValid = bValid && checkRegexp(email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com");
                    bValid = bValid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9");

                    if (bValid) {
                        $("#users tbody").append("<tr>" +
							"<td>" + name.val() + "</td>" +
							"<td>" + email.val() + "</td>" +
							"<td>" + password.val() + "</td>" +
						"</tr>");
                        $(this).dialog("close");
                    }
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            },
            close: function () {
                allFields.val("").removeClass("ui-state-error");
            }
        });

        $("#create-user")
			.button()
			.click(function () {
			    $("#dialog-form").dialog("open");
			});        
    };
} (window.userManager = window.userManager || {}));

The CoffeeScript Version:

((userManager) ->
  userManager.init = ->
    name = $("#name")
    email = $("#email")
    password = $("#password")
    allFields = $([]).add(name).add(email).add password
    tips = $(".validateTips")

    updateTips = (t) ->
      tips.text(t).addClass "ui-state-highlight"
      setTimeout (->
        tips.removeClass "ui-state-highlight", 1500
      ), 500

    checkLength = (o, n, min, max) ->
      if o.val().length > max or o.val().length < min
        o.addClass "ui-state-error"
        updateTips "Length of #{n} must be between #{min} and #{max}."
        false
      else true

    checkRegexp = (o, regexp, n) ->
      unless regexp.test o.val()
        o.addClass "ui-state-error"
        updateTips n
        false
      else true

    $("#dialog-form").dialog 
      autoOpen: false
      height: 300
      width: 350
      modal: true
      buttons: 
        "Create an account": ->
          bValid = true
          allFields.removeClass "ui-state-error"
          bValid = bValid and checkLength name, "username", 3, 16
          bValid = bValid and checkLength email, "email", 6, 80
          bValid = bValid and checkLength password, "password", 5, 16
          bValid = bValid and checkRegexp name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter."
          bValid = bValid and checkRegexp email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com"
          bValid = bValid and checkRegexp password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9"
          if bValid
            $("#users tbody").append "<tr>" + "<td>" + name.val() + "</td>" + "<td>" + email.val() + "</td>" + "<td>" + password.val() + "</td>" + "</tr>"
            $(this).dialog "close"
        
        Cancel: ->
          $(this).dialog "close"
      
      close: ->
        allFields.val("").removeClass "ui-state-error"
    
    $("#dialog:ui-dialog").dialog "destroy"

    $("#create-user").button().click ->
      $("#dialog-form").dialog "open"
) window.userManager = window.userManager or {}

WPF Behaviors in the F# WPF Project Templates

In my last post, I mentioned that I was working on a few enhancements to the my F# WPF Project Templates that are out on Visual Studio Gallery. I'm happy to say that the new versions of the F# and C# Windows App (WPF, MVVM) and F# Windows App (WPF, MVVM) templates are now available.

What Was Changed?

For the F# Windows App (WPF, MVVM) template, a few WPF behaviors have been added. I'll talk about these changes in a bit (for those that can't wait, see http://fssnip.net/62 and http://fssnip.net/6h).

The F# and C# Windows App (WPF, MVVM) template includes all of the same changes as the F# only template. Additionally, I've taken the multiple F# projects that were previously provided in this template and coalesced them into one F# project. I believe that this change better reflects the real-world use of this template.

You Mentioned WPF Behaviors?

The biggest change to the templates is the addition of examples of a few different types of WPF behaviors. These templates include examples of event to command as well as a type converter. The event to command implementation is Blendable (meaning that it plays well with Expression Blend) and is loosely based on the MVVM Light Toolkit EventToCommand implementation.

Here's the code:

namespace FSharpWpfMvvmTemplate.Behavior

open System
open System.Windows
open System.Windows.Input
open System.Windows.Interactivity

type EventToCommand() =
    inherit TriggerAction<DependencyObject>()
    [<DefaultValue(false)>] 
    static val mutable private CommandProperty:DependencyProperty
    [<DefaultValue(false)>] 
    static val mutable private CommandParameterProperty:DependencyProperty
    
    /// Set the command dependency property
    static do 
        EventToCommand.CommandProperty <-
            DependencyProperty.Register("Command", 
                typeof<ICommand>, typeof<EventToCommand>)
    
    /// Set the command parameter dependency property
    static do 
        EventToCommand.CommandParameterProperty <-
            DependencyProperty.Register("CommandParameter", 
                typeof<obj>, typeof<EventToCommand>)
    
    /// Get/Set the Command 
    member this.Command 
        with get() = this.GetValue EventToCommand.CommandProperty :?> ICommand
        and set value = this.SetValue(EventToCommand.CommandProperty, value)
    
    /// Get/Set the CommandParameter 
    member this.CommandParameter 
        with get() = this.GetValue EventToCommand.CommandParameterProperty 
        and set value = this.SetValue(EventToCommand.CommandParameterProperty, value)
    
    /// Implement the Invoke method from TriggerAction to execute the command
    override this.Invoke parameter = 
        let command = this.Command
        let commandParameter = match this.CommandParameter with
                               | null -> parameter
                               | commandParam -> commandParam  
        if command <> null && command.CanExecute(commandParameter) then
            command.Execute(commandParameter)

Here's the XAML that uses this code:

        <Button Grid.Row="2" Command="{Binding ApproveExpenseReportCommand}" 
                Style="{StaticResource buttonStyle}" Content="Approve"
                Grid.Column="1" Margin="0,10,53,0">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseEnter">
                    <Behavior:EventToCommand 
                            Command="{Binding MouseEnterButtonCommand}" 
                            CommandParameter="Approve" />
                </i:EventTrigger>
                <i:EventTrigger EventName="MouseLeave">
                    <Behavior:EventToCommand 
                            Command="{Binding MouseLeaveButtonCommand}" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>

The value converter example uses a ConverterBase class that simplifies the creation of any concrete implementations. This base class uses a combination of functional and object-oriented programming to provide a default implementation of Convert and ConvertBack. The child class can then provide a function to override the implementation of either or both of these methods. For the sake of brevity, I will not post the ConvertBase code here, but you can go to http://fssnip.net/62 to see it.

The concrete implementation that is provided as an example in these project templates is shown below:

namespace FSharpWpfMvvmTemplate.Behavior

open System
open System.Windows
open System.Windows.Data
open System.Windows.Media
open ConverterBase

/// Returns Visibility.Visible if the string is not null or empty
type StringExistsToVisibilityConverter() =
    inherit ConverterBase()
    let convertFunc = fun (v:obj) _ _ _ ->         
        match String.IsNullOrEmpty(string v) with
        | false -> Visibility.Visible
        | _ -> Visibility.Collapsed
        :> obj
    override this.Convert = convertFunc 

This can be used in XAML like this:

<TextBlock Grid.Row="3" HorizontalAlignment="Center" Margin="0,10,0,0" 
                FontSize="12" FontWeight="Bold" 
                Grid.ColumnSpan="2" Text="{Binding LastApprovalDisplayMessage}" 
                Visibility="{Binding Path=LastApprovalDisplayMessage, 
                            Converter={StaticResource StringExistsToVisibility}}" />

While I don't have an example in these templates of an Attached Property written in F#, it is worth noting that you can find just such an example at http://fssnip.net/69.

A Few Items of Note

In this post, I'm going to highlight a few things that I have been working on that aren't big enough to warrant their own blog entry, but that are worth pointing out. Note: If you follow me on Twitter (i.e. @dmohl) you may have already heard about these things.

1. In Feb. of this year, I blogged about the F# PowerPack being added to NuGet gallery. Since that time, there have been several requests to add the .NET 4 binaries to that NuGet package. I'm happy to say that a new version of the FSPowerPack.Community package has been uploaded that includes these binaries.

2. In Jan. of this year, an F# ASP.NET MVC 3 template was announced. There have been a few reports of an exception on some operating systems during the extension installation that points to a specific path that is too long. For those of you who are experiencing this error, there is a VSIX with a reduced path length available for download at https://sites.google.com/site/danodocs/Home/FSMVC3_min.vsix.

3. Have you visited the F# Snippets site yet? If not, I strongly recommend checking it out. While you are there, have a look at the WPF/Silverlight Value Converter base class and sample concrete implementation as well as an example of a WPF/Silverlight Attached Property. I'd love to hear what you think. Along these lines, I've been working on a few additions to the F# WPF templates that have been announced on this blog. If you have any enhancement requests, send them my way.

F# XAML Item Templates Now on Visual Studio Gallery

A new VS2010 extension is now available on Visual Studio Gallery that provides several XAML related item templates for F# projects. The provided item templates include Window for WPF as well as Page, UserControl, and ResourceDictionary for Silverlight and WPF.

To get started, do the following:

1. Download and install the extension from http://visualstudiogallery.msdn.microsoft.com/06c6ece1-2084-4083-a0f7-934fce9d22fb or through the Extention Manager in Visual Studio 2010 as shown below (Extension Manager can be found under Tools -> Extension Manager..):

2. Once installed, you will see the following option available in the Add New Item wizard for F# Silverlight projects:

3. For F# WPF projects, the Add New Item wizard will look like the following:

These item templates complement the existing F# WPF and Silverlight project templates quite well. Here is a list of a few of these project templates that are currently available on Visual Studio Gallery:

Silverlight:

F# Client-Side Application (Silverlight)

F# Empty Web Application (Silverlight)

F# Silverlight Application

F# Web Application (Silverlight)

WPF:

F# App Template with Theme
F# Windows App (WPF, MVVM)
F# WPF Application

As usual you can find the source on my github (https://github.com/dmohl/FsXAMLItemTemplate).

Version 1.3.0.1 of the F# and C# Win Phone App (Silverlight) Project Template Released

Version 1.3.0.1 of the basic WP7 project template has been released. The core feature of this release is a new item template that allows you to add a F# Source File in WP7 projects. Prior to this release, attempting to add a new item through the standard process resulted only in options targeting C#.

To take advantage of this new feature, do the following:

1. Install the 1.3.0.1 version of the project template (see this blog post for more information).
2. Right click on the F# project and select Add -> New Item...
3. The resulting window will now include a F# Source File item as shown below:

FsUnit.MvcSample Now On NuGet Gallery

A new NuGet package is now available on the NuGet Gallery that makes it very easy to get started using FsUnit to test your ASP.NET MVC apps. The packageId is FsUnit.MvcSample and it can be found at http://nuget.org/List/Packages/FsUnit.MvcSample. For more information on FsUnit and the previously provided FsUnit NuGet package, check out http://bloggemdano.blogspot.com/2011/02/fsunit-now-on-nuget-gallery.html.

As usual, you can find everything used to create this package on my github (https://github.com/dmohl/FsUnit.MvcSample.NuGet).

Getting Started with FSRepository 2.0

FSRepository 2.0 is now available in the NuGet gallery. This version references EF 4.1, fixes an issue, and attempts to provide a more intuitive example.

Getting Started:

It's easy to get started with FSRepository 2.0.

1. Create a new F# Application (this example uses a project named TestFSRepository).
2. Follow the instructions defined in http://bloggemdano.blogspot.com/2011/01/fsrepository-new-nuget-package.html to install the FSRepository package.
3. Move the FSRepository.fs file above the Program.fs file (see http://lorgonblog.wordpress.com/2008/08/03/sneak-peeks-into-the-f-project-system-part-three/ for information on how to do this).
4. Add the following code to Program.fs and you're done.

open TestFSRepository.Repositories

type Program() = 
    static member Run() =
        use sampleRepository = new SampleRepository()
        let sample = new ASample()
        sample.Id <- 1
        sample.CreatedBy <- "Dan"
        do sampleRepository.Add sample
        do sampleRepository.Save()
        sampleRepository.GetAll()
        |> Seq.iter (fun (sample:ASample) -> 
                   (printfn "Sample Id = %A" sample.Id |> ignore))

Program.Run()