Making a GTK application in Haskell, part 1

This article series details the construction of a todo-list application using Haskell, GTK 4, and the Adwaita library. Adwaita supplies a variety of widgets and styles. The intended readership is intermediate Haskell developers. Adwaita is a GTK component library embodying GNOME's design language and accessibility guidelines. It offers features like responsive design and runtime theme color changes.

Haskell bindings for GTK are generated via the haskell-gi toolkit, enabling interaction with GTK using a familiar C API interface.

The post's code examples are incomplete to emphasize key concepts. The complete project is accessible at https://github.com/Floreal-Technologies/adwaita-todo. The first example demonstrates a GTK/Adwaita application structure that manages resources, including Adwaita stylesheets. An empty window with "Todos" as its title and size of 480x640 is created.

The Elm Architecture, or TEA, is introduced as a design pattern for interactive programs, comprising three core concepts. This approach, popularized by Elm, improves the management of imperative GTK toolkit code. The application state and actions are modeled as data structures for clear visibility on triggered actions and their implications. User interactions are represented as Messages, a known set of actions with clear modifications to the model.

Initial domain logic is encoded as a sum type of messages and an update function to modify the state. It's advisable to outline expectations before starting a UI project, as design often doesn't directly stem from data. Several widgets are utilized, such as:

- Button

- Entry

- Label

- ListButton

- ListBox

- Spinner

These widgets connect to form the Model-View-Update trio. Functions dispatch and step are also defined, working together. dispatch manages GTK execution loop priority, calls step, and performs the model update leading to the view update. step reads the model, applies the update function to create a new model, writes it, and passes it to the View, which then returns the updated content as a Gtk widget.

This content is set in the window. The article concludes here, with Part 2 to add more features to the Todo List application.