wxHaskell part II Martijn Schrage (speciale versie van de slides, met screenshots toegevoegd als pictures)

1/36 Vanmiddag Dazzle demo Attributes & properties Layout Koffie Overzicht wxHaskell features

2/36 Dazzle Editor voor Bayesiaanse netwerken In gebruik bij DSS groep regels Haskell C++ library om netwerken door te rekenen GUI in wxHaskell

3/36 Attributes & properties Voorbeeldjes Property list ::[Prop w] [ attribuut := waarde, attribuut := waarde,.. ] f <- frameFixed [text := "Bouncing balls"] p <- panel f [on paint := paintBalls vballs] t <- timer f [ interval := 20,, on command := nextBalls vballs p ] property

4/36 Gebruik van attrs en props Bij aanmaken widget: bv: button :: Window a -> [Prop (Button ())] -> IO (Button ()) Met get en set bv: get :: w -> Attr w a -> IO a set :: w -> [Prop w] -> IO () x <- get t interval; set t [ interval := x ] b <- button f [ text := "Knopje" ]

5/36 := en :~ Voor updates: (:=) :: Attr w a -> a -> Prop w (:~) :: Attr w a -> (a -> a) -> Prop w x <- get t interval; set t [ interval := incr x ] where incr x = 1+x set t [ interval :~ incr ] where incr x = 1+x is gelijk aan := is een infix data constructor ipv. [ text := "Bouncing balls" ] zou bv. [ Assign text "Bouncing balls" ] ook kunnen (maar dat is niet zo)

Layout

7/36 Combinator-taal voor type Layout Bouwstenen: Om te combineren: Layout combinators row :: Int -> [Layout] -> Layout column :: Int -> [Layout] -> Layout grid :: Int -> Int -> [[Layout]] -> Layout label :: String -> Layout space :: Int -> Int -> Layout rule :: Int -> Int -> Layout widget :: Widget w => w -> Layout main = start $ do { f <- frame []... ; set f [ layout :=... ] } :: Layout

8/36 b, b1, b2 en b3 zijn buttons voorbeelden layout := grid 5 5 [ [ label "label", widget b1 ], [ widget b2, widget b3 ] ] layout := row 5 [ widget b, rule 1 40, label "label" ] layout := column 5 [ row 5 [ label "label", widget b1 ], row 5 [ widget b2, widget b3 ] ]

9/36 Posititie in de extra ruimte Voorbeelden: Alignment halignLeft, halignCenter, halignRight :: Layout -> Layout valignTop, valignCenter, valignBottom :: Layout -> Layout layout := grid 0 0 [ [ widget b, vrule 200 ], [ hrule 200, empty ] ].. widget b..

10/36 Voorbeelden: Alignment.. valignCenter $ widget b.... halignRight $ widget b.... valignBottom. halignCenter $ widget b.. vAlignCenter (widget b)

11/36 Al dan niet opvullen van extra ruimte Alleen expand, geen hexpand en vexpand Voorbeelden: Expansion rigid :: Layout -> Layout shaped :: Layout -> Layout expand :: Layout -> Layout.. shaped $ widget b.... expand $ widget b.. layout := grid 0 0 [ [ widget b, vrule 200 ], [ hrule 200, empty ] ]

12/36 Align en expand: gebruik van extra ruimte Stretch: extra ruimte of minimaal? Stretch alleen belangrijk in rows/columns/grids Stretch static :: Layout -> Layout hstretch :: Layout -> Layout vstretch :: Layout -> Layout stretch = hstretch. vstretch

13/36 Row hstretch als 1 kind hstretch heeft vstretch als alle kinderen vstretch hebben Column analoog Grid analoog, voor iedere column en iedere row Stretch in rows en columns layout := row 5 [ widget b1, stretch. expand $ rule 1 1, widget b2 ] layout := row 5 [ stretch. expand $ widget b1, stretch. expand $ rule 1 1, stretch. expand $ widget b2 ]

14/36 Voorbeeld Combinaties van stretch met align en expand Waarom expansion & stretch? layout := column 5 [ halignRight $ widget b1, expand $ widget b2, hstretch $ widget b3 ] layout := column 5 [ stretch. halignRight $ widget b1, stretch. expand $ widget b2, hstretch $ widget b3 ] floatCenter = stretch. alignCenter floatRight, floatTop, floatTopRight,... hfill = hstretch. expand vfill = vstretch. expand fill = hfill. vfill

15/36 Alignment & Expansion: hoe wordt beschikbare ruimte gevuld Stretching: kan omvattende kolom/rij groter worden Orthogonale concepten Zie ook de documentatie van Graphics.UI.WXCore.Layout Bv op: Samenvattend

Overzicht wxHaskell features

17/36 Overzicht wxHaskell features Monads best ingewikkeld maar patronen simpel Belangrijkste gereedschap voor GUIs: Ctrl-C en Ctrl-V (copy & paste) + samples Algemeen: do { f <- frame [] ; w <- create a widget... ; set f [ layout := widget w ] } where handler =..

18/36 Dialog: infoDialog infoDialogExample = start $ do { f <- frame [] ; set f [ layout := empty ] ; infoDialog f "Message" "Press OK to proceed." } infoDialog :: Window a -> String -> String -> IO ()

19/36 Dialog: errorDialog errorDialogExample = start $ do { f <- frame [] ; set f [ layout := empty ] ; errorDialog f "File not found" ("Having been erased,\n" ++ "The document you're seeking\n" ++ "Must now be retyped.") }

20/36 Labels labelExample = start $ do { f <- frame [] ; set f [ layout := label "What's in a label?" ] }

21/36 Widget: staticText staticTextExample = start $ do { f <- frame [] ; l <- staticText f [ text := "What's in a label?" ] ; set f [ layout := widget l ] }

22/36 Widget: button buttonExample = start $ do { f <- frame [] ; b <- button f [ text := "Don't push me" ] ; set f [ layout := widget b ] }

23/36 Widget: button buttonExample2 = start $ do { f <- frame [] ; b <- button f [ text := "Don't push me", on command := buttonHandler f ] ; set f [ layout := widget b ] } where buttonHandler :: Window a -> IO () buttonHandler f = do { infoDialog f "Message" "You pushed the button." } :: IO ()

24/36 Widget: textEntry textEntryExample = start $ do { f <- frame [] ; t <- textEntry f [ text := "A line of text." ] ; set t [ on command := entryHandler f t ] ; set f [ layout := widget t ] } where entryHandler :: Window a -> TextCtrl b -> IO () entryHandler f t = do { txt <- get t text ; infoDialog f "Message" ("You entered: \""++txt++"\"") } gesplitst wegens referentie aan t :: IO ()

25/36 Variable: varCreate Even terug naar het buttonvoorbeeld: buttonExample2 = start $ do { f <- frame [] ; b <- button f [ text := "Don't push me" ] ; set b [ on command := buttonHandler f] ; set f [ layout := widget b ] } where buttonHandler :: Window a -> IO () buttonHandler f = do { infoDialog f "Message" "You pushed the button." }

26/36 varExample = start $ do { f <- frame [] ; v <- varCreate 1 ; b <- button f [ text := "Don't push me" ] ; set b [ on command := buttonHandler f v ] ; set f [ layout := widget b ] } where buttonHandler :: Window a -> Var Int -> IO () buttonHandler f v = do { i <- get v value ; infoDialog f "Value" (show i) ; set v [ value := i + 1 ] } Variable: varCreate

27/36 Widget: panel panelExample = start $ do { f <- frame [ text := "menus" ] ; p <- panel f [ bgcolor := yellow ] ; set p [ on paint := paintHandler p ] ; set f [ layout := minsize (sz ) $ widget p ] } where paintHandler :: Panel a -> DC () -> Rect -> IO () paintHandler p dc _ = do { line dc (pt 5 5) (pt 90 70) [ penWidth := 2 ] ; circle dc (pt ) 30 [ penColor := red ] } :: DC () -> Rect -> IO ()

28/36 Menus: menuPane & menuItem menuExample = start $ do { f <- frame [] ; fileMenu <- menuPane [ text := "&File" ] ; openItem <- menuItem fileMenu [ text := "&Open", on command := menuHandler f "Open" ] ; saveItem <- menuItem fileMenu [ text := "&Save", on command := menuHandler f "Save" ] ; set f [ menubar := [fileMenu], layout := label "What's in a label?" ] } where menuHandler :: Window a -> String -> IO () menuHandler f txt = infoDialog f "Selection" txt

29/36 Dialog: fileOpenDialog fileOpenDialogExample = start $ do { f <- frame [] ; set f [ layout := empty ] ; maybeFile <- fileOpenDialog f False True "Open File" [ ("Haskell files (*.hs)", ["*.hs"]), ("All files (*.*)", ["*.*"]) ] "" "" ; infoDialog f "Selected" (show maybeFile) } change directory fileName read-only title directory file selection wildcards

30/36 Dialog: fileOpenDialog

31/36 Dialog: fileSaveDialog fileSaveDialogExample = start $ do { f <- frame [] ; set f [ layout := empty ] ; maybeFile <- fileSaveDialog f False True "Save File" [ ("Haskell files (*.hs)", ["*.hs"]), ("All files (*.*)", ["*.*"]) ] "" "Turtle.hs" ; infoDialog f "Selected" (show maybeFile) } change directory title fileName overwrite prompt directory file selection wildcards

32/36 Dialog: fileSaveDialog

33/36 Widget: singleListBox singleListBoxExample = start $ do { f <- frame [] ; l <- singleListBox f [ items := [ "Leonardo", "Donatello", "Michelangelo", "Raphael" ] ] ; set l [ on select := selectionHandler f l ] ; set f [ layout := widget l ] } where selectionHandler :: Window a -> SingleListBox b -> IO () selectionHandler f l = do { is <- get l items ; selected <- get l selection ; infoDialog f "Selected" (is !! selected) } :: IO ()

34/36 Widget: radioBox radioBoxExample = start $ do { f <- frame [] ; r <- radioBox f Vertical [ "Leonardo", "Donatello", "Michelangelo", "Raphael" ] [] ; set r [ on select := selectionHandler f r ] ; set f [ layout := widget r ] } where selectionHandler :: Window a -> RadioBox b -> IO () selectionHandler f r = do { is <- get r items ; selected <- get r selection ; infoDialog f "Selected" (is !! selected) }

35/36 Event: mouse mouseExample = start $ do { f <- frame [] ; s <- staticText f [] ; set f [ on mouse := mouseHandler s, layout := widget s ] } where mouseHandler :: StaticText a -> EventMouse -> IO () mouseHandler s evt = do { set s [ text := show evt ] } :: EventMouse -> IO ()

36/36 Event: keyboard keyboardExample :: IO () keyboardExample = start $ do { f <- frame [] ; s <- staticText f [] ; set f [ on keyboard := keyHandler s, layout := widget s ] } where keyHandler :: StaticText a -> EventKey -> IO () keyHandler s evt = do { set s [ text := show evt ] } :: EventKey -> IO ()