Haskell/Solutions/GUI

From Wikibooks, the open-content textbooks collection

← Back to GUI

Exercises

Add a checkbox control. It doesn't have to do anything yet, just make sure it appears next to the staticText and the button when using row-layout, or below them when using column layout. text is also an attribute of the checkbox. Notice that row and column take a list of layouts, and also generates a layout itself. Use this fact to make your checkbox appear on the left of the staticText and the button, with the staticText and the button in a column. Can you figure out how the radiobox control works? Take the layout of the previous exercise and add a radiobox with two (or more) options below the checkbox, staticText and button. Use the documentation! Use the boxed combinator to create a nice looking border around the four controls, and another one around the staticText and the button. (Note: the boxed combinator might not be working on MacOS X - you might get widgets that can't be interacted with. This is likely just a bug in wxhaskell.)

1. gui-function with a checkbox, row layout. (replace row with column to get column layout)

gui :: IO ()
gui = do
  f <- frame [ text := "Hello World!" ]
  st <- staticText f [ text := "Hello StaticText!" ]
  b <- button f [ text := "Hello Button!" ]
  cb <- checkBox f [ text :=  "Hello Checkbox!" ]
  set f [ layout := row 5 [ widget st, widget b, widget cb ] ]

2. gui-function with nested layout-combinators.

gui :: IO ()
gui = do
  f <- frame [ text := "Hello World!" ]
  st <- staticText f [ text := "Hello StaticText!" ]
  b <- button f [ text := "Hello Button!" ]
  cb <- checkBox f [ text := "Hello Checkbox!" ]
  set f [ layout := row 5
          [ widget cb
          , column 25
            [ widget st
            , widget b
            ]
          ]
        ]

3. gui-function with a radiobox control. The documentation of the radioBox function says Create a new radio button group with an initial orientation and a list of labels. As can be seen on the documentation of Orientation, it is either Horizontal or Vertical. I'm using Vertical here, but it doesn't matter.

gui :: IO ()
gui = do
  f <- frame [ text := "Hello World!" ]
  st <- staticText f [ text := "Hello StaticText!" ]
  b <- button f [ text := "Hello Button!" ]
  cb <- checkBox f [ text :=  "Hello Checkbox!" ]
  rb <- radioBox f Vertical ["Hello Option 1!", "Hello Option 2!" ] [ text := "Hello Radiobox!" ]
  set f [ layout := column 5
          [ row 5
            [ widget cb
            , column 25
              [ widget st
              , widget b
              ]
            ]
          , widget rb
          ]
        ]
  return ()

4. gui-function for the complete layout as in the screenshot:

gui :: IO ()
gui = do
  f <- frame [ text := "Hello World!" ]
  st <- staticText f [ text := "Hello StaticText!" ]
  b <- button f [ text := "Hello Button!" ]
  cb <- checkBox f [ text := "Hello Checkbox!" ]
  rb <- radioBox f Vertical ["Hello Option 1!", "Hello Option 2!" ] [ text := "Hello Radiobox!" ]
  set f [ layout := boxed "Hello Box 1" $ column 5
          [ row 5
            [ widget cb
            , boxed "Hello Box 2" $ column 25
              [ widget st
              , widget b
              ]
            ]
          , widget rb
          ]
        ]
  return ()