Creating a GUI application in Haskell - Tutorials

• GTK+ terminology

• Writing handlers that process user's actions (button click, etc.)

• Introducing global state

• Manual creation of forms and creation of forms using Glade

Available libraries

• wx — bindings to wxWidgets. A couple of things about this package I find suspicious: 1) it had delays in development when for a couple of years no new version was released, 2) it's still not present on Stackage. A practical conclusion from the point 2 is that it's not very popular nowadays, or at least not many Haskellers start writing any application with it otherwise it would be added already.

• X11 — direct translation of the C binding to X11 graphics library (quote taken from the package description). “Direct translation” means that you pass around pointers. Yes, in Haskell code. For documentation authors suggest to look here (although Haddocks are not blank either). Last release was in May 2014.

• hsqml — the Haskell bindings to Qt Quick. Missing from Stackage. Releases seem to happen once a year.

• fltkhs — the Haskell bindings to the FLTK GUI library. The package seems to be pretty new and I personally don't see any benefit in using it over more mature solutions.

• Easy to install.

• Robust and mature. Documentation is quite good and comprehensive.

• The section in Gabriel Gonzalez's State of Haskell Ecosystem

• The blog post by Keera Studios

Installation

First steps

import Control.Monad
import Control.Monad.IO.Class
import Data.IORef
import Graphics.UI.Gtk hiding (Action, backspace)

main :: IO ()
main = do
  void initGUI          -- (1)
  window <- windowNew   -- (2)
                        -- (3)
  widgetShowAll window  -- (4)
  mainGUI               -- (5)

1. The first thing we need to do in any program that uses GTK+ is to call the initGUI function. This function allocates some resources and prepares GTK+ for work, it also looks up command line arguments that are relevant to GTK+, parses them, and returns all non-parsed arguments. For our purposes, we don't need the command line arguments, so let's wrap it with the void.

2. Next, we need a window to build the interface of our calculator inside it. To create a new top-level window we use the newWindow action. It returns an opaque Window value that can be used to manipulate the window.

3. After creation of a new window we typically want to change some parameters and then render it. For now we just render the window “as is”, but in the next section we will see how to customize widgets using attributes.

4. widgetShowAll works with any kind of widget. It performs all the necessary allocations and makes widget passed to it as an argument visible together with all its children widgets.

5. mainGUI is the main loop. The loop listens to events such as button click and mouse pointer movement and let appropriate handlers run.

Attributes

1. Set them with the set action.

2. Use Glade to design your UI.

• windowTitle

• windowType

• windowResizable

Containers

• those that serve purely decorative purpose and can contain only one widget;

• those that help organize forms and can contain several widgets.

• containerAdd parent child to add child widget to parent widget

• containerRemove parent child to remove child widget from parent widget

• containerGetChildren to get all children of a container widget

• containerForeach to perform an action on all children of a container

1. gridNew creates a new grid.

2. gridSetRowHomogeneous grid True makes every row have equal height.

3. Here we define the attach helper function. It attaches given widget to our grid. The argument order of this function helps to use it with (>>=).

4. We attach the display we created previously to the grid. It will occupy the entire top row.

5. Here we use combination of the mkBtn helper and attach to quickly create buttons and place them on the grid. I'll show what mkBtn is in a moment.

6. Now the grid itself needs to be inserted into window to be visible. This is done with help of the above-mentioned containerAdd function.

Signals and events

• Just IO (): no information is given to the handler and it is not expected to return anything. Example of such signal is showSignal.

• Handlers that are given arguments: a -> IO Bool. Example of such signal is focus whose handlers have the type DirectionType -> IO Bool. Another interesting thing here is returned value of the type Bool. This is a convention in GTK+ allowing to disable default handling of some signals. If we return True, default handling will be disabled, while False will keep it active executing our handler and default handler as well.

Note that an event handler must always return True if the event was handled or False if the event should be dealt with by another event handler. For instance, a handler for a key press should return False if the pressed key is not one of those that the widget reacts to. In this case the event is passed to the parent widgets. This ensures that pressing, say, Alt-F opens the file menu even if the current input focus is in a text entry widget. In order to facilitate writing handlers that may abort handling an event, this module provides the function tryEvent. This function catches pattern match exceptions and returns False. If the signal successfully runs to its end, it returns True.

Using IORefs for application state

• IORefs — mutable references inside IO monad.

• TVars from Control.Concurrent.STM.

1. Just like before we register a handler that will fire on button activation.

2. atomicModifyIORef modifies given IORef atomically. The callback should return a tuple, first element is the new value to put into IORef, second value is the return value of the action. In this case we want the values to be equal.

3. We call updateDisplay to make results of last action visible to the user.

1. We need to create IORef to keep the program's state there. Value "" Nothing is its initial value.

2. The helper function mkBtn uses previously written mkButton and just saves us the boilerplate of passing st and display again and again.

3. Some examples of mkBtn use. By passing id as state mutating function we make buttons have no effect, but all the machinery for actual work is already in place.

Using Glade to design forms

1. Select window button on the topmost palette and the window will appear on the working area.

2. Enter “Calculator” in the title field.

3. Don't forget to fill out the “ID” attribute of every widget, this is how you will access widgets on your form in the Haskell code.

4. Create grid with id grid. When asked about number of rows and columns, choose 7 × 5. Select the “Homogeneous” check box under the “Rows” title.

5. Insert entry, use “Drag and resize widgets in the workspace” button on the top tool bar to make it occupy the entire top row.

6. Insert buttons to match our existing design.

1. We need to create a new builder.

2. Load our form into it from a file. There are other options such as loading form text (String, Text) and so forth. Consult the docs for more information.

3. Now the interesting part is that we can get actual button object knowing its identifier. For example here I'm retrieving button that inputs zeros, it has the "btn_0" identifier on my form. castToButton casts abstract representatin of an object to its typed form. There are many castToSomething functions, one per widget (for example we have castToWindow for windows).

Conclusion

See also