1. Graphical User Interfaces in Haskell Koen Lindström Claessen

2. 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

3. Saving a Drawing File selection dialogue

4. 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

5. 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?

6. Two Roads to Portability WindowsMacLinux New portable GUI library Applications The Java approach Interfaces ”look funny” WindowsMacLinux Portable interface Applications Windows GUI lib Mac GUI library Linux GUI lib The wxWindows approach Native look and feel

7. wxHaskell WindowsMacLinux wxWindows Haskell applications Windows GUI lib Mac GUI library Linux GUI lib wxHaskell Industrial strength open source library 500 C++ classes with 4000 methods! There are many ”native Haskell” GUI libraries: More ”Haskellish” Generally not portable Generally less complete wxHaskell is a good compromise.

8. GHC wxHaskell only works with GHC –Glasgow Haskell compiler Haskell main program ghc –package wx –make Prog -o prog Prog.hs Compiled code prog A compiled program like any other Cannot call individual functions in an interpreter

9. Haskell Main Programs Definition main :: 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

10. Hello with a GUI import 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

11. GUI Concepts Panel A frame – top level window Several panels contained in one frame Widgets – ”WIndow gaDGETS” Entry fields and buttons are controls

12. 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.

13. 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

14. 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”]

15. 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

16. 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

17. 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

18. 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

19. 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!

20. 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”)

21. Modelling the State A GUI is often used to edit or modify something –What is the state?

22. 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

23. 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!

24. haskell.org Libraries!

25. haskell.org/libraries/ Hierarchical libraries! You have these already.

26. Hierarchical Libraries Lots of modules

27. Googling wxHaskell Here it is!

28. wxHaskell Home Page Documentation

29. wxHaskell Documentation Haddock documentation for wxHaskell General information on wxWidgets – sometimes you have to read this

30. 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

31. 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