Graphical User Interfaces in Haskell

Koen Lindstrm Claessen

First a Demo
An editor for simple straight line drawings Line currently being drawn by dragging the mouse

A graphical user interface

Remove last line drawn

Load and save drawings to files

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

Applications Applications

New portable GUI library Windows GUI lib Windows Mac Linux Windows

Portable interface

Mac GUI library Mac

Linux GUI lib Linux

The Java approach Interfaces look funny

The wxWindows approach Native look and feel

Haskell wxHaskell applications Industrial strength open source library wxHaskell

500 C++ classes with 4000 methods!

wxWindows

Windows GUI lib

Mac GUI library Mac

Linux GUI lib Linux

There are many native Haskell GUI libraries:

More Haskellish Generally not portable Generally less complete wxHaskell is a good compromise.

Windows

GHC
wxHaskell only works with GHC
Glasgow Haskell compiler
Prog.hs Haskell main program ghc package wx make Prog -o prog prog Compiled code

A compiled program like any other Cannot call individual functions in an interpreter

Haskell Main Programs

Definition
main :: IO ()
Main programs produce no result they just do input/output

In module Main (the default)

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

Hello with a GUI

import Graphics.UI.WX
main :: IO () main = start gui Import wxHaskell (a hierarchical library) Start up the 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 ]]

GUI Concepts
A frame top level window

Panel

Panel

Panel

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 [] Create two entry fields (with out <- entry f [] parent f) but <- button f [text := "Hello", on command := do s <- get inp text set out [text := "Hello "++s]] Create a button (with parent f)
The first parameter of a creation call is always the parent. Create a frame (no 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 type f <- 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
f <- frame [text := "Hello"] but <- button f [text := "Hello]

Type: text :: Textual w => Attr w String

Same idea used for many, many attributes

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, Place argument in the widget but, centre of the frame widget out]]
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 These instructions are followed when
the button is pressed

but <- button f [text := "Hello", on command := do s <- get inp text set out [text := "Hello "++s]] on creates an instruction attribute

A GUIs purpose is to let a user give instructions to the computer

Modifying Attributes
Attributes can be read and modified
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

Modifying attributes changes what appears on the screen

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

Compare:
Only the knowledge about the string is needed to understand the result

f :: String -> Int

vs

g :: String -> IO Int

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
Controls: Buttons, entry fields etc

Layout: Operators to build layouts

Classes: one for each attribute

Draw: Functions for drawing on a panel

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

And much, much, more!

Ignore WXCore! Its a level below wxHaskell Attributes: defines set, get, (:=),

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/w xhaskell.pdf