Functional Programming and Graphical User Interfaces

Why am I talking about this?

A long time ago a colleague I created Fudgets.

A GUI library for Haskell.
- Fudget = Functional Widget
  - Widget = Window gadget (the building blocks in user interfaces)
It was the first solution that allowed GUIs to be programmed in a pure functional style.
- Before the
```
IO
```
  monad was introduced in Haskell.
Not the main topic today.

Graphical User Interface Libraries

Several libraries for Graphics and GUIs can be found on Hackage:

Big, general purpose: wxHaskell, gtk3.
Smaller, simpler and/or special purpose: HGL, gloss, diagrams.

Today: threepenny-gui

On hackage: threepenny-gui
- Install it with: cabal install threepenny-gui (or with stack).
A library that uses a web browser for the user interface.
- Platform independent and fairly small.
- Has a distinct web programming feel.
It is used in Lab 4 in The Standard Lab.

First: HTML and JavaScript

HTML – T is for Text

<!DOCTYPE html> <html> <head> <title>Hello</title> </head> <body> <h1>Hello world</h1> <p>Can we create web pages in <a href="http://www.haskell.org/">Haskell</a>? </body> </html>
T is for Text.
HTML = HyperText Markup Language.

HTML – Markup and hyperlinks

<!DOCTYPE html> <html> <head> <title>Hello</title> </head> <body> <h1>Hello world</h1> <p>Can we create web pages in <a href="http://www.haskell.org/">Haskell</a>? </body> </html>
The page is built from a set of nested elements, as described by the markup.
Elements can have attributes and contents.

Making web pages more dynamic

In the beginning, web pages were static documents...
JavaScript allows web pages to be more dynamic.
- Can manipulate the contents of the web page
  - DOM = Document Object Model
    - One object per element in the page.
- Can react to input from the user
- Can communicate with a server

JavaScript Example

Creating the a similar web page as before
... <body></body> <script> hello=document.createTextNode("Hello") h1=document.createElement("h1") h1.appendChild(hello) document.body.appendChild(h1) p1=document.createElement("p") p1.appendChild(document.createTextNode("Hello world!")) document.body.appendChild(p1) </script> </html>

User interface elements

In HTML
- <input> <input type="button" value="Click me">
In JavaScript
- input=document.createElement("input") button=document.createElement("input") button.type="button" button.value="Click me"

Adding functionality: event handlers

Adding an event handler for the button

input= ... button= ... function count() { input.value++ } button.onclick=count
Note: JavaScript is a dynmaically typed langauge that does automatic type conversions, e.g. between strings and numbers…

threepenny-gui

The threepenny-gui library allows us to do similar things in Haskell.
Here are few of the functions you get when you
```
import Graphics.UI.Threepenny
```
:

string       :: String -> UI Element                -- a text element
mkElemement  :: String -> UI Element                -- createElement
(#+)         :: UI Element -> [UI Element] -> UI () -- appendChildren
getBody      :: Window -> UI Element                -- document.body

startGUI     :: Config -> (Window -> UI ()) -> IO ()

The type
```
Element
```
is for references to objects in the JavaScript world.
The type
```
UI
```
is a monad in which
```
Elements
```
can be created and manipulated.
See Graphics.UI.Threepenny for more details.

threepeny-gui programming example

Live demo: 3pIntro.hs
The next few slides summarises some important things covered in the live demo.

Elements and attributes

Example

mkButton :: String -> UI Element
mkButton label =
  mkElement "input"
    # set (attr "type") "button"
    # set (attr "value") label

The operator
```
#
```
from the 3p library is defined like this
- ```
x # f = f x
```
- It is used to give the code a more object-oriented look, together with
```
set
```
  and
```
set'
```
  .

Event handlers

Counter Example

counterExample w =
  do input <- mkElement "input"
     button <- mkButton "Increment"
     getBody w #+ [element input,element button]
     let increment _ = do s <- input # get value
                          let v = read s
                          input # set' value (show (v+1))
     on click button increment

The function
```
on
```
adds an event handler to an element
Note: we use
```
read
```
and
```
show
```
to convert between
```
String
```
and
```
Int
```

Drawing on a canvas

Import Graphics.UI.Threepenny.Canvas:

type Canvas = Element
canvas :: UI Canvas   -- create a canvas element

type Point = (Double,Double)

beginPath      :: Canvas -> UI ()
moveTo, lineTo :: Point -> Canvas -> UI ()
closePath      :: Canvas -> UI ()

stroke, fill   :: Canvas -> UI ()

fillText       :: String -> Point -> Canvas -> UI ()

There is also

arc

fillRect

lineWidth

strokeStyle

fillStyle

textFont

and lots more…

State handling and mutable variables

A GUI program usually has some state that the user manipulates.
Sometimes the state can be kept in the user interface elements (like in the counter example above), but it requires conversion to and from
```
String
```
.
If the state is more complex (e.g. there is a lot more info than is visible in the user interface), one can use mutable variables.

import Data.IORef --  a standard library module

newIORef   :: a -> IO (IORef a)     -- create and initialize
writeIORef :: IORef a -> a -> IO () -- update
readIORef  :: IORef a -> IO a       -- read

These work in the
```
IO
```
monad (even though there is no I/O involved).
There is a function
```
liftIO
```
that allows any
```
IO
```
instruction to be used in the
```
UI
```
monad.
This is not functional programming!

GUI programming in a functional style?

Most GUI libraries for Haskell, including threepenny-gui, are thin layers on top of libraries written in other languages.
- They inherit the imperative, object-based programming style from those libraries.
- The user interface is created with a sequence of imperative instructions.
- State is handled with mutable variables.
Is this how GUI programming has to be done?
- No…

GUI programming in a functional style

code.world/haskell. Breakout in code.world.
FRAN: Functional Reactive Animation.
FRP: Functional Reactive Programming.
Fudgets
- The first library for high-level GUI programming in Haskell.
- It is built on top of the X11 Window system, so it works best on Linux. It also works on macOS if you install XQuartz.

Haste

A compiler + library for creating web applications in Haskell. Based on GHC 7.10.
Haste home page.
Video of a lecture on Haste with Anton Ekblad, who created Haste.
Haste.App: compile a Haskell program to a client-side part and a server-side part, allowing type-safe client-server communication.
WebFudgets. Fudgets for Haste.

For reference

threepenny-gui.
ThreepennyPages.hs: some useful functions for threepenny-gui. Their definitions also serve as illustrative examples.
3pIntro.hs. Today's programming examples.
Breakout.hs. Game logic for the Breakout game.
Lab 4: The Standard Lab. Uses threepenny-gui.

Graphical User Interfaces in Haskell

Thomas Hallgren, December 2019

Functional Programming and Graphical User Interfaces

Why am I talking about this?

A long time ago a colleague I created Fudgets.

Graphical User Interface Libraries

Several libraries for Graphics and GUIs can be found on Hackage:

Today: threepenny-gui

First: HTML and JavaScript

HTML – T is for Text

HTML – Markup and hyperlinks

Making web pages more dynamic

JavaScript Example

User interface elements

Adding functionality: event handlers

Adding an event handler for the button

threepenny-gui

threepeny-gui programming example

Elements and attributes

Example

Event handlers

Counter Example

Drawing on a canvas

State handling and mutable variables

GUI programming in a functional style?

GUI programming in a functional style

Haste

For reference