F# Tutorial

Playing with Windows Forms

In this section we will start using Windows Forms. The following code snippets are assumed sharing the following incipit:

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 

open System.Windows.Forms
open EvReact
open EvReact.Expr
open EvReact.Orchestrator

let E (e:IEvent<'c,'a>) = 
  let evt = new Control.Event<'a>()
  e.Add(fun e -> evt.Trigger(e))
  evt.Publish

The E function is an adapter needed to convert the IEvent<'a, 'b> interface implemented by Windows Forms events into IEvent<'b> used by F#. Future versions of the library will not need this adapter anymore.

A simple example

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 

let f = new Form(Text="Hello world from evReact")
let md = E f.MouseDown

let net = !!md |-> fun e -> printfn "Mouse down @(%d, %d)" e.X e.Y
f.Show()

let orch = Orchestrator.create()
Expr.start null orch net

A program using evReact needs an orchestrator to track the events defined by an expression (we will refer to the expression as net in this tutorial).

The first evReact expression

In this simple example we used the following expression:

1: 

let net = !!md |-> fun e -> printfn "Mouse down @(%d, %d)" e.X e.Y

• Using the operator !! we create a simple listener of the mouse down events.
• The operator |-> is used to associate an event handler to be fired when the net completes.

The net completes after the first click on the form.

The iteration operator

• evReact expressions generate Petri nets where token flows when events are received.
• A net can complete or terminate (i.e. all tokens are discarded)
• The + prefix operator interates the network for ever, ensuring that whenever the net completes it is restarted
• In our example we can refine the mouse down detection as follows:

1: 

  let net = +(!!md |-> fun e -> printfn "Mouse down @(%d, %d)" e.X e.Y)

Iteration completes each time its sub net completes, so the event handler associated with the operator |-> can be attached to md or to the iteration net.

Sequences

• Sequence is used to state that a net should complete before another net can start
• The infix operator for concatenating two nets is -
• For instance the net for recognizing two mouse down is:

1: 
2: 
3: 
4: 

  let net = +(
                (!!md |-> fun e -> printfn "Mouse down 1 @(%d, %d)" e.X e.Y)
              - (!!md |-> fun e -> printfn "Mouse down 2 @(%d, %d)" e.X e.Y)
             )

Restriction

• Iteration has no condition, so it is natural to wonder how it can be stopped
• The infix restriction operator / allows indicating an array of events such that if an event occurs and it belongs to the array but it's not expected the net terminates (not just completes)
• We can now track the whole drag and drop process:

1: 
2: 
3: 
4: 
5: 
6: 

  let net = 
    +(
        (!!md |-> fun e -> printfn "Mouse down @(%d,%d)" e.X e.Y) 
      - (+(!!mm) |-> fun e -> printfn "Mouse move @(%d,%d)" e.X e.Y) / [|mm; mu|]
      - !!mu |-> fun e -> printfn "Mouse up @(%d,%d)" e.X e.Y
    )

A new playground: the dragging square

• In the next examples we will refer to the following form:

 1: 
 2: 
 3: 
 4: 
 5: 
 6: 
 7: 
 8: 
 9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 

  type MyForm() as this =
    inherit Form()
    do this.SetStyle(ControlStyles.AllPaintingInWmPaint 
                     ||| ControlStyles.OptimizedDoubleBuffer, true)

  let f = new MyForm(Text="Drag&Drop test with evReact", Width=640, Height=600)
  let rect = ref(new Rectangle(0, 0, 50, 50))
  let target = ref(new Rectangle(300, 300, 200, 200))
  let bgcol = ref(Brushes.Red)
  let off = ref(new Point())

  f.Paint.Add(fun e ->
    let g = e.Graphics
    g.DrawRectangle(Pens.Gray, !target)
    g.FillRectangle(!bgcol, !rect)
    g.DrawRectangle(Pens.Black, !rect)
  )

• Using the global variables rect, target, bgcol, and off we can move the rectangle rect by just invalidating the form

Utilities

• We will also use the following utility functions:

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 

  // Utilities
  let uc col = bgcol := col; f.Invalidate()
  let dc col = !bgcol <> col
  let inR (p:Point) = (!rect).Contains(p)
  let placeR (p:Point) = 
    let r = !rect 
    rect := new Rectangle(p.X, p.Y, r.Width, r.Height);f.Invalidate()
  let inT () = (!target).Contains(!rect)

Hovering: conditional activation

• Using the %- operation we can indicate a boolean predicate P that activates the node when the event is received only if P is satisfied
• For example, we can define a net that takes care of highlighting the square when the mouse is over:

 1: 
 2: 
 3: 
 4: 
 5: 
 6: 
 7: 
 8: 
 9: 
10: 

  // Net recognizing hovering
  let highlight =
    +(
          ((mm %- fun e -> dc Brushes.Yellow && inR(e.Location)) 
           |-> fun _ -> uc Brushes.Yellow)
      ||| ((mm %- fun e -> dc Brushes.Red && not(inR(e.Location)))
           |-> fun _ -> uc Brushes.Red)
     )

  Expr.start null orch highlight

• The ||| (any) operator allows us to run two nets in parallel, the resulting net completes whenever any of the branches completes (in this case are mutually exclusive given the condition)

Dragging the square

• The last example of dragging will consist in implementing the dragging of the square
• If the square is moved within the target square it will stay, otherwise it should be moved back to the origin
• This is a complex behavior that can be defined in a very compact way using evReact as shown in the next page

Dragging the square: code

 1: 
 2: 
 3: 
 4: 
 5: 
 6: 
 7: 
 8: 
 9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 

  // Net performing the drag
  let drag = 
    +(
       ((md %- fun e -> (!rect).Contains(e.Location)) 
           |-> fun e -> 
                 let r = !rect
                 off := new Point(e.X - r.Left, e.Y - r.Top))
       - ((+(!!mm) |-> fun e -> 
                         placeR(new Point(e.X - (!off).X, e.Y - (!off).Y))
           ) / [| mm; mu |])
       - (!!mu |-> fun e -> 
                     if not(inT()) then
                       (placeR(new Point())
                       uc Brushes.Red))
     )

  let orch = Orchestrator.create()
  Expr.start null orch highlight
  Expr.start null orch drag

Dragging the square: considerations

• The drag net simply uses all the operations we already discussed for implementing the operation
• Note that we activate two nets on the orchestrator orch, so the highlight on hovering and the drag behaviors are tracked concurrently