Graphical User Interfaces in Haskell

Koen Lindström Claessen

First a Demo

An editor for simple straight line drawings

Line currently being drawn by dragging

the mouse

Remove last line drawn

Load and save drawings to files

A graphical user interface

Saving a Drawing

File selection dialogue

GUI Libraries

• GUI programming is complex– Much graphics programming needed– Many different elements needed (buttons,

scroll bars, menus, entry fields…)

• It is not practical to write a GUI from scratch– We must use an existing GUI library

Portability

• Every platform provides a GUI library…• …but they are all different!

• The differences are more

than just skin deep• How do we write portable programs with GUIs?

Two Roads to Portability

Windows Mac Linux

New portableGUI library

Applications

• The Java approach

• Interfaces ”look funny”

Windows Mac Linux

Portable interface

Applications

WindowsGUI lib

Mac GUIlibrary

LinuxGUI lib

• The wxWindows approach

• Native look and feel

wxHaskell

Windows Mac Linux

wxWindows

Haskellapplications

WindowsGUI lib

Mac GUIlibrary

LinuxGUI lib

wxHaskell

Industrial strengthopen source library

500 C++ classeswith 4000 methods!

There are many ”native Haskell” GUI libraries:

• More ”Haskellish”

• Generally not portable

• Generally less complete

wxHaskell is a good compromise.

GHC

• wxHaskell only works with GHC– Glasgow Haskell compiler

Haskell mainprogram

ghc –package wx –make Prog -o prog

Prog.hs

Compiledcode

prog

A compiled program like any other

Cannot call individual functions in an interpreter

Haskell Main Programs

• Definitionmain :: IO ()

• In module Main (the default)

Main programs produce no ”result” – they just do input/output

main :: IO ()main = do putStrLn ”What is your name?” name <- getLine putStrLn (”Hello ”++name)

Hello.hs

Hello with a GUIimport Graphics.UI.WX

main :: IO ()main = start gui

gui :: IO ()gui = do f <- frame [text := "Hello"] inp <- entry f [] out <- entry f [] but <- button f [ text := "Hello” , on command := do s <- get inp text

set out [text := "Hello "++s] ] set f [ layout := floatCentre $ column 5

[ label "What is your name?” , widget inp , widget but , widget out ] ]

Import wxHaskell(a hierarchical library)

Start up the GUI

GUI Concepts

Panel PanelPanel

A frame – top level window

Several panels contained in one frame

Widgets – ”WIndow gaDGETS”

Entry fields and buttons are controls

GUI Hierarchy

• Every GUI element (except a frame) has a parent

• We specify the parent at creation

f <- frame [text := "Hello"]inp <- entry f []out <- entry f []but <- button f [text := "Hello",

on command := do s <- get inp text set out [text := "Hello "++s]]

Create a frame (no parent)

Create two entry fields (with parent f)

Create a button (with parent f)

The first parameter of a creation call is always the parent.

Attributes

• GUI elements have attributes– Rather like the fields of a record, or

components of a data structure

• Types: Attr w a– An attribute of type a, for a widget of type w

• Attributes can be specified at creation– Type checker ensures attributes match the

widget typef <- frame [text := "Hello"]

Create a frame with text attribute ”Hello”

Do not confuse this with assignment – we are just specifying a list of attribute values

Overloading

• The same attribute name can be used with many different widget types– Attribute names are overloaded

• Type: text :: Textual w => Attr w String– Same idea used for many, many attributes

f <- frame [text := "Hello"]but <- button f [text := "Hello”]

Layout

• The layout attribute specifies the appearance on the screen

f <- frame [text := "Hello"]set f [layout := floatCentre $ column 5

[label "What is your name?", widget inp, widget but, widget out]]

Place argument in the centre of the frame

widget converts GUI elements to a layout for

inclusion in a frame

Instructions

• Controls have attributes which are instructions to follow if the user activates them

• A GUI’s purpose is to let a user give instructions to the computer

but <- button f [text := "Hello", on command := do s <- get inp text

set out [text := "Hello "++s]]on creates an

instruction attribute

These instructions are followed when the button is pressed

Modifying Attributes

• Attributes can be read and modified

• Modifying attributes changes what appears on the screen

do s <- get inp text set out [text := "Hello "++s]]

Instructions to read the value of an attribute

Instructions to modify one or more attributes

Invisible Widgets

• Some widgets are invisible• They still have attributes that can be set

and modified• Examples:

– Timer widget• Interval• On command

– Variable widget• Value

Functions vs. Instructions

f :: String -> Int

g :: String -> IO Int

vs

Compare:Only the knowledge about the string is

needed to understand the result…

Anything can be used to compute the result: Reading from files,

randomness, user input…!

Moreover, anything can be modified or changed!

Design Principles

• Separate the GUI from the functionality as much as possible– So that the GUI can later be replaced without

changing the functionality

• Avoid duplicating code as far as possible– So that errors need be fixed only once (c.f.

”cut and paste programming”)

Modelling the State

• A GUI is often used to edit or modify something– What is the state?

Examples

• Hello.hs– Simple hello example

• BouncingBalls.hs– A simple animation containing bouncing balls

• Draw.hs– A simple drawing program

• Mine.hs– A version of the game minesweeper

How do I find the right function?

• Haskell has many hierarchical libraries, with documentation on the web

• Every wxHaskell function is documented on the web

• Know how to find the documentation!

haskell.org

Libraries!

haskell.org/libraries/

Hierarchical libraries!

You have these already.

Hierarchical Libraries

Lots of modules

Googling wxHaskell

Here it is!

wxHaskell Home Page

Documentation

wxHaskell Documentation

Haddock documentation for wxHaskell

General information on wxWidgets –

sometimes you have to read this

wxHaskell Haddock

Attributes: defines set, get, (:=), …

Classes: one for each attribute

Controls: Buttons, entry fields etc

Dialogs: Built-in popups, e.g. for choosing a file

Draw: Functions for drawing on a panel

Layout: Operators to build layouts

And much, much, more!

Ignore WXCore!It’s a level below wxHaskell

Reading

• http://wxhaskell.sourceforge.net/

• wxHaskell: A Portable and Concise GUI Library for Haskell, Daan Leijen – Haskell Workshop, Salt Lake City, 2004– http://www.cs.uu.nl/~daan/download/papers/

wxhaskell.pdf