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
