DEV Community: Kashif Soofi

GTK4 DropDown with .NET

Kashif Soofi — Thu, 08 Jan 2026 19:00:00 +0000

In this post I will make use of GTK4 DropDown. DropDown is used to display selected item from a list of items.

Project Setup

Let's start by installing/updating the dotnet new GTK4 .NET Project Template.

After making sure we have the new project template available in dotnet new list. We can proceed to create our project.

Let's create a directory for the project and create project structure using following commands

mkdir gtk4-dotnet-drop-down
cd gtk4-dotnet-drop-down
dotnet new gtk4-app -p:n DropDown

Now we can run our application by executing:

dotnet run --project DropDown/DropDown.csproj

At this moment it would display a window with Hello, world!.

Simple DropDown

Let's start with simple DropDown. First we need to add a referce of GirCore.GObject-2.0.Integration to our sample project. We need this to use GObject.SubClass attribute that would generate boilerplate code for our inherited window.

Next lets add a class for our window.

[GObject.Subclass<Gtk.ApplicationWindow>]
public partial class WithStringList
{
    partial void Initialize()
    {
        // initialize all members
    }
}

With our window class added, let's update Program.cs to show the new window. Only showing new code for brevity.

application.OnActivate += (sender, args) =>
{
    var buttonShowWithStringList = CreateButton("With StringList");
    buttonShowWithStringList.OnClicked += (_, _) => new WithStringList().Show();
    ... 

    var gtkBox = Gtk.Box.New(Gtk.Orientation.Vertical, 0);
    gtkBox.Append(buttonShowWithStringList);

    ...

    window.Child = gtkBox;
}

static Gtk.Button CreateButton(string label)
{
    var button = Gtk.Button.New();
    button.Label = label;
    button.SetMarginTop(12);
    button.SetMarginBottom(12);
    button.SetMarginStart(12);
    button.SetMarginEnd(12);
    return button;
}

Next let's add and a label and a dropdown in WithStringList

    private Gtk.Label _labelSelected;
    private Gtk.DropDown _dropDown;

And then update the Initialize method to initialize label and dropdown.

    partial void Initialize()
    {
        Title = "DropDown With StringList";
        SetDefaultSize(300, 300);

        _labelSelected = Gtk.Label.New("Selected: 1 minute");
        _labelSelected.SetMarginTop(12);
        _labelSelected.SetMarginBottom(12);
        _labelSelected.SetMarginStart(12);
        _labelSelected.SetMarginEnd(12);

        var stringList = Gtk.StringList.New(["1 minute", "2 minutes", "5 minutes", "15 minutes", "30 minutes"]);
        _dropDown = new Gtk.DropDown();
        _dropDown.SetModel(stringList);
        _dropDown.SetSelected(0);
        _dropDown.SetMarginTop(12);
        _dropDown.SetMarginBottom(12);
        _dropDown.SetMarginStart(12);
        _dropDown.SetMarginEnd(12);

        _dropDown.OnNotify += (_, _) =>
        {
            var selectedItem = (Gtk.StringObject)_dropDown.SelectedItem!;
            var interval = selectedItem.GetString();
            _labelSelected.SetLabel($"Selected: {interval}");
        };

        var gtkBox = Gtk.Box.New(Gtk.Orientation.Vertical, 0);
        gtkBox.Append(_labelSelected);
        gtkBox.Append(_dropDown);

        Child = gtkBox;
    }

Here interesting part is that we create a StringList with the values that will be displayed in the DropDown. Then we set the model of DropDown to the created StringList. DropDown knows how to work with StringList. Finally we setup selected property changed handler of our DropDown and set the selected value in the label.

Following screenshots show the initial, dropdown and selection for simple DropDown.

Complex DropDown

Let's go through with a complex example, where we display a Title, Description and an image. There will be another tickbox next to the selected item.

First let's add a custom object StringHolder to use in the model.

[GObject.Subclass<GObject.Object>]
public partial class StringHolder
{
    public StringHolder(string title, string icon, string description) : this()
    {
        Title = title;
        Icon = icon;
        Description = description;
    }

    public string Title { get; }
    public string Icon { get; }
    public string Description { get; }
}

We would setup 2 instances of Gtk.SignalListItemFactory, 1st to setup and bind drop down items and 2nd to setup list and bind dropdown items when item is selected.

        var selectedFactory = Gtk.SignalListItemFactory.New();
        selectedFactory.OnSetup += OnSetupSelectedItem;
        selectedFactory.OnBind += OnBindSelectedItem;
        _dropDown.SetFactory(selectedFactory);

        // Factory for presenting the items in the dropdown list.
        var listFactory = Gtk.SignalListItemFactory.New();
        listFactory.OnSetup += OnSetupListItem;
        listFactory.OnBind += OnBindListItem;
        _dropDown.SetListFactory(listFactory);

Then we create the Gio.ListStore and set the dropdown's model.

        ...
        CreateModel();
        _dropDown.SetModel(_listStore);
        _dropDown.SetSelected(0);
        ...

    private void CreateModel()
    {
        _listStore = Gio.ListStore.New(StringHolder.GetGType());
        _listStore.Append(new StringHolder("Deskop", "user-desktop-symbolic", "Deskop Folder"));
        _listStore.Append(new StringHolder("Home", "user-home-symbolic", "Home Folder"));
        _listStore.Append(new StringHolder("Trash", "user-trash-symbolic", "Trash Folder"));
        _listStore.Append(new StringHolder("Videos", "folder-videos-symbolic", "Videos Folder"));
    }

For selected item, we only display an Image and Label and display Icon and Title property from the model.

    private static void OnSetupSelectedItem(Gtk.SignalListItemFactory factory, Gtk.SignalListItemFactory.SetupSignalArgs args)
    {
        var listItem = args.Object as Gtk.ListItem;
        var box = Gtk.Box.New(Gtk.Orientation.Horizontal, 10);
        box.Append(Gtk.Image.New());
        box.Append(Gtk.Label.New(""));
        listItem!.SetChild(box);
    }

    private static void OnBindSelectedItem(Gtk.SignalListItemFactory sender, Gtk.SignalListItemFactory.BindSignalArgs args)
    {
        var listItem = args.Object as Gtk.ListItem;
        var stringHolder = listItem!.GetItem() as StringHolder;
        if (stringHolder is null) return;

        var box = listItem.GetChild() as Gtk.Box;
        if (box is null) return;

        var image = box.GetFirstChild() as Gtk.Image;
        if (image is null) return;

        image.SetFromIconName(stringHolder.Icon);
        var label = image.GetNextSibling() as Gtk.Label;
        if (label is null) return;

        label.SetText(stringHolder.Title);
    }

For selected item however we also display Description and a tickbox image next to the selected item.

    private static void OnSetupListItem(Gtk.SignalListItemFactory factory, Gtk.SignalListItemFactory.SetupSignalArgs args)
    {
        var listItem = args.Object as Gtk.ListItem;

        var hbox = Gtk.Box.New(Gtk.Orientation.Horizontal, 10);
        var vbox = Gtk.Box.New(Gtk.Orientation.Vertical, 2);

        hbox.Append(Gtk.Image.New());
        hbox.Append(vbox);

        var lblTitle = Gtk.Label.New("");
        lblTitle.SetXalign(0);
        vbox.Append(lblTitle);

        var lblDescription = Gtk.Label.New("");
        lblDescription.SetXalign(0);
        lblDescription.SetCssClasses(["dim-label"]);
        vbox.Append(lblDescription);

        var checkmark = Gtk.Image.New();
        checkmark.SetFromIconName("object-select-symbolic");
        checkmark.SetVisible(false);
        hbox.Append(checkmark);

        listItem!.SetChild(hbox);
    }

    private void OnBindListItem(Gtk.SignalListItemFactory sender, Gtk.SignalListItemFactory.BindSignalArgs args)
    {
        var listItem = args.Object as Gtk.ListItem;

        var stringHolder = listItem!.GetItem() as StringHolder;
        if (stringHolder is null) return;

        var hbox = listItem.GetChild() as Gtk.Box;
        if (hbox is null) return;

        var image = hbox.GetFirstChild() as Gtk.Image;
        image?.SetFromIconName(stringHolder.Icon);

        var vbox = image?.GetNextSibling() as Gtk.Box;
        if (vbox is null) return;

        var title = vbox.GetFirstChild() as Gtk.Label;
        title?.SetText(stringHolder.Title);
        var description = title?.GetNextSibling() as Gtk.Label;
        description?.SetText(stringHolder.Description);

        Gtk.DropDown.SelectedPropertyDefinition.Notify(_dropDown, (_, _) =>
        {
            OnSelectedItemChanged(listItem);
        });

        listItem.SetData("connection", IntPtr.Zero);
        OnSelectedItemChanged(listItem);
    }

Running the application will display following

Source

Source code for the demo application is hosted on GitHub in gtk4-dotnet-drop-down repository.

References

In no particular order

GTK4 `dotnet new` Project Template

Kashif Soofi — Wed, 10 Apr 2024 17:00:00 +0000

I have been writing some samples using GTK4 using GirCore so its time to reduce the manual project setup steps and turn it into a dotnet new project template.

Project Template

Time to follow the excellent article by Syed Ibrahim.

I have taken out the project setup section from my GTK 4 tutorials and turned it into the template. I have created a console application, added GirCore.Gtk-4.0 nuget package to the project and updated the Program.cs to create a main Gtk window with Hello World label.

Next tutorial for GTK4 hopefully I will use this template to bootstrap the project. And I will keep it updated with new releases of GirCore.

Usage

Clone repository locally
Build nuget package dotnet pack -o .
Install template for dotnet new using following command dotnet new install Gtk4.Templates.1.0.0.nupkg
Create new project using template dotnet new gtk4-app --param:name [ProjectName] OR dotnet new gtk4-app -p:n [ProjectName]
Uninstall template using following command dotnet new uninstall Gtk4.Templates

Source

Source code for the template is available on GitHub in gtk4-dotnet-template repository.

References & Resources

GTK4 ColumnView with .NET

Kashif Soofi — Thu, 28 Mar 2024 19:00:00 +0000

In this post I will make use of ColumnView to display list of data. ColumnView is used to display 1-dimensional list with one or more columns. Foucus of this post will be to dispaly multiple columns.

Project Setup

Let's start by setting up a new solution and project.

dotnet new sln --name ColumnView
dotnet new console -o ColumnView.App
dotnet sln add ColumnView.App/ColumnView.App.csproj

And add a reference to GirCore.Gtk-4.0 nuget package, the latest version is 0.5.0-preview.4 at the time of writing.

cd ColumnView.App
dotnet add package GirCore.Gtk-4.0 --version 0.5.0-preview.4

ColumnViewWindow

I will add a new class named ColumnViewWindow inheriting from Gtk.Window. This window will contain a ColumnView widget to display tabular data.

Model

First let's add a class that we will use to display our data and a static method to generate the sample data. We will inherit this model from GObject.Object.

public class UserData : GObject.Object
{
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Username { get; set; }
    public string Email { get; set; }

    public UserData(int id, string firstName, string lastName, string username, string email)
        : base(true, Array.Empty<GObject.ConstructArgument>())
    {
        Id = id;
        FirstName = firstName;
        LastName = lastName;
        Username = username;
        Email = email;
    }

    public static UserData[] SampleUserData()
    {
        return
        [
            new UserData(1, "Leanne", "Graham", "Bret", "Sincere@april.biz"),
            new UserData(2, "Ervin", "Howell", "Antonette", "Shanna@melissa.tv"),
            new UserData(3, "Patricia", "Lebsack", "Karianne", "Julianne.OConner@kory.org"),
            new UserData(4, "Chelsey", "Dietrich", "Kamren", "Lucio_Hettinger@annie.ca"),
            new UserData(5, "Clementine", "Bauch", "Samantha", "Nathan@yesenia.net"),
        ];
    }
}

ColumnViewWindow

Next let's update the ColumnViewWindow to inherit from Gtk.Window. And then initialise ListStore and widgets to display the data.

First we will add a Gio.ListStore and add our sample data to the list store. Then we will add a single seletion model using the model.

var model = Gio.ListStore.New(UserData.GetGType());
foreach (var userData in UserData.SampleUserData())
{
    model.Append(userData);
}

var selectionModel = SingleSelection.New(model);
selectionModel.Autoselect = false;
selectionModel.CanUnselect = true;

Next we will add ColumnView and add it to a ScrolledWindow and add the scrolled window widget to ColumnViewWindow.

var columnView = ColumnView.New(selectionModel);
columnView.AddCssClass("data-table");

var scrolledWindow = ScrolledWindow.New();
scrolledWindow.Child = columnView;

Child = scrolledWindow;

Text Columns

Next we will add text based columns displaying data using Label widget.

// Id Column
var listItemFactory = SignalListItemFactory.New();
listItemFactory.OnSetup += (_, args) => OnSetupLabel(args, Align.End);
listItemFactory.OnBind += (_, args) => OnBindText(args, (ud) => ud.Id.ToString());

var idColumn = ColumnViewColumn.New(nameof(UserData.Id), listItemFactory);
columnView.AppendColumn(idColumn);

// Name Column
listItemFactory = SignalListItemFactory.New();
listItemFactory.OnSetup += (_, args) => OnSetupLabel(args, Align.Start);
listItemFactory.OnBind += (_, args) => OnBindText(args, (ud) => ud.Name);

var nameColumn = ColumnViewColumn.New(nameof(UserData.Name), listItemFactory);
columnView.AppendColumn(nameColumn);

// Sales Column
listItemFactory = SignalListItemFactory.New();
listItemFactory.OnSetup += (_, args) => OnSetupLabel(args, Align.End);
listItemFactory.OnBind += (_, args) => OnBindText(args, (ud) => $"{ud.Sales:C}");

var salesColumn = ColumnViewColumn.New(nameof(UserData.Sales), listItemFactory);
columnView.AppendColumn(salesColumn);

I have added helper methods to OnSetupLabel and OnBindText to reuse code to create Label and set text when binding data.

private void OnSetupLabel(SetupSignalArgs args, Align align)
{
    if (args.Object is not ListItem listItem)
    {
        return;
    }

    var label = Label.New(null);
    label.Halign = align;
    listItem.Child = label;
}

private void OnBindText(BindSignalArgs args, Func<UserData, string> getText)
{
    if (args.Object is not ListItem listItem)
    {
        return;
    }

    if (listItem.Child is not Label label) return;
    if (listItem.Item is not UserData userData) return;

    label.SetText(getText(userData));
}

ProgressBar Column

This is just to display how to use the ProgressBar widget and also to demonstrate that any widget can be used in the ColumnView.

Code to add the column

// Percentage Column
listItemFactory = SignalListItemFactory.New();
listItemFactory.OnSetup += OnSetupProgress;
listItemFactory.OnBind += OnBindProgress;

var percentageColumn = ColumnViewColumn.New(nameof(UserData.ProgressPercentage), listItemFactory);
columnView.AppendColumn(percentageColumn);

And methods to create widget and set data

private void OnSetupProgress(SignalListItemFactory sender, SetupSignalArgs args)
{
    if (args.Object is not ListItem listItem)
    {
        return;
    }

    var progressBar = ProgressBar.New();
    progressBar.SetShowText(true);
    listItem.Child = progressBar;
}

private void OnBindProgress(SignalListItemFactory sender, BindSignalArgs args)
{
    if (args.Object is not ListItem listItem)
    {
        return;
    }

    if (listItem.Child is not ProgressBar progressBar) return;
    if (listItem.Item is not UserData userData) return;

    progressBar.SetFraction(userData.ProgressPercentage * 0.01);
}

Program.cs

Lets update Program.cs to create and show our ColumnViewWindow.

var application = Gtk.Application.New("org.kashif-code-samples.columnview.sample", Gio.ApplicationFlags.FlagsNone);
application.OnActivate += (sender, args) =>
{
    var window = new ColumnViewWindow
    {
        Application = application
    };
    window.Show();
};
return application.RunWithSynchronizationContext(null);

Running the program will show us following window.

Source

Source code for the sample application is available on GitHub in gtk4-dotnet-column-view.

References

In no particular order

GTK 4 GridView with .NET

Kashif Soofi — Wed, 28 Feb 2024 19:00:00 +0000

In the previous post GTK 4 ListView with .NET I demonstrated how to use GTK4 ListView in a .NET application. In this post I will expoloe GridView.

ListView shows 1-dimensional list of data with one column. GridView shows a 2-dimensional grid.

Project Setup

Let's start by setting up a new solution and project.

dotnet new sln --name GridView
dotnet new console -o GridView.App
dotnet sln add GridView.App/GridView.App.csproj

And add a reference to GirCore.Gtk-4.0 nuget package, the latest version is 0.5.0-preview.4 at the time of writing.

cd GridView.App
dotnet add package GirCore.Gtk-4.0 --version 0.6.3

StringListGridViewWindow

Next we will add StringListGridViewWindow inheriting from Gtk.Window. We will start with a StringList ListStore and a NoSelection selection model and will use SignalListItemFactory to create Label for each of the items. I have set the WidthRequest and HeightRequest property of each label to 100 to demonstrate how the items will look on the window.

namespace GridView.App;

using Gtk;
using static Gtk.SignalListItemFactory;

public class StringListGridViewWindow : Window
{
    public StringListGridViewWindow()
        : base()
    {
        Title = "Gtk::GridView (Gio::ListStore)";
        SetDefaultSize(400, 400);

        var stringList = StringList.New(["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten"]);
        var selectionModel = NoSelection.New(stringList);
        var listItemFactory = SignalListItemFactory.New();
        listItemFactory.OnSetup += SetupSignalHandler;
        listItemFactory.OnBind += BindSignalHandler;

        var gridView = GridView.New(selectionModel, listItemFactory);

        var scrolledWindow = ScrolledWindow.New();
        scrolledWindow.Child = gridView;
        Child = scrolledWindow;
    }

    private void SetupSignalHandler(SignalListItemFactory sender, SetupSignalArgs args)
    {
        var listItem = args.Object as ListItem;
        if (listItem is null)
        {
            return;
        }

        var label = Label.New(null);
        label.WidthRequest = 100;
        label.HeightRequest = 100;
        listItem.Child = label;
    }

    private void BindSignalHandler(SignalListItemFactory sender, BindSignalArgs args)
    {
        var listItem = args.Object as ListItem;
        if (listItem is null)
        {
            return;
        }

        var label = listItem.Child as Label;
        if (label is null)
        {
            return;
        }

        var item = listItem.Item as StringObject;
        label.SetText(item?.String ?? "NOT FOUND");
    }
}

We will create an instance of our window in Program.cs and call the Show method to display it on screen.

using GridView.App;

var application = Gtk.Application.New("org.kashif-code-samples.listview.sample", Gio.ApplicationFlags.FlagsNone);
application.OnActivate += (sender, args) =>
{
    var window = new StringListGridViewWindow
    {
        Application = application
    };
    window.Show();
};
return application.RunWithSynchronizationContext(null);

Running the application will result in following window. Here you can see that items are arranged in a grid.

CustomObjectGridView

Let's add another window to display a list of custom objects as grid, its going to be very simple just displaying images of numbers from svgrepo and text underneath.
First we will add a model that will hold the data we would use to display image and text in a grid.

public class ItemData : GObject.Object
{
    public string ImagePath { get; set; }
    public string Text { get; set; }
    public string Description { get; set; }

    public ItemData(string imagePath, string text, string description)
        : base(true, Array.Empty<GObject.ConstructArgument>())
    {
        ImagePath = imagePath;
        Text = text;
        Description = description;
    }
}

The code will be largely similar to the GridView in other window with only change is we are going to use the SingleSelection and dispaly a message on console when user double clicks on an item or press enter in OnGridViewOnActiveHandler method.
Full listing will be as follows

public class CustomObjectGridViewWindow : Window
{
    private readonly ListStore _model;

    public CustomObjectGridViewWindow()
        : base()
    {
        Title = "Gtk::GridView (Gio::ListStore)";
        SetDefaultSize(400, 400);

        _model = ListStore.New(ItemData.GetGType());
        _model.Append(new ItemData("Resources/number-1.svg", "One", "One"));
        _model.Append(new ItemData("Resources/number-2.svg", "Two", "Two"));
        _model.Append(new ItemData("Resources/number-3.svg", "Three", "Three"));
        _model.Append(new ItemData("Resources/number-4.svg", "Four", "Four"));
        _model.Append(new ItemData("Resources/number-5.svg", "Five", "Five"));
        _model.Append(new ItemData("Resources/number-6.svg", "Six", "Six"));
        _model.Append(new ItemData("Resources/number-7.svg", "Seven", "Seven"));
        _model.Append(new ItemData("Resources/number-8.svg", "Eight", "Eight"));
        _model.Append(new ItemData("Resources/number-9.svg", "Nine", "Nine"));

        var selectionModel = SingleSelection.New(_model);
        var listItemFactory = SignalListItemFactory.New();
        listItemFactory.OnSetup += SetupSignalHandler;
        listItemFactory.OnBind += BindSignalHandler;

        var gridView = GridView.New(selectionModel, listItemFactory);
        gridView.OnActivate += OnGridViewOnActiveHandler;

        var scrolledWindow = ScrolledWindow.New();
        scrolledWindow.Child = gridView;
        Child = scrolledWindow;
    }

    private void SetupSignalHandler(SignalListItemFactory sender, SetupSignalArgs args)
    {
        if (args.Object is not ListItem listItem)
        {
            return;
        }

        var box = Box.New(Orientation.Vertical, 2);
        box.SetSizeRequest(100, 100);
        listItem.Child = box;

        var image = Image.New();
        box.Append(image);
        var label = Label.New(null);
        box.Append(label);
    }

    private void BindSignalHandler(SignalListItemFactory sender, BindSignalArgs args)
    {
        if (args.Object is not ListItem listItem)
        {
            return;
        }

        if (listItem.Child is not Box box) return;
        if (box.GetFirstChild() is not Image image) return;
        if (image.GetNextSibling() is not Label label) return;
        if (listItem.Item is not ItemData itemData) return;

        image.SetFromFile(itemData.ImagePath);
        label.SetText(itemData.Text);
    }

    private void OnGridViewOnActiveHandler(GridView sender, ActivateSignalArgs args)
    {
        var itemData = _model.GetObject(args.Position) as ItemData;
        if (itemData is null) return;

        Console.WriteLine($"Selected Text: {itemData.Text}, Description: {itemData.Description}");
    }
}

Application Window

We will update Program.cs file to add 2 buttons to display each window on a button click.

application.OnActivate += (sender, args) =>
{
    var buttonStringListGridView = CreateButton("String List GridView Window");
    buttonStringListGridView.OnClicked += (_, _) => new StringListGridViewWindow().Show();

    var buttonCustomObjectGridView = CreateButton("Custom Object GridView Window");
    buttonCustomObjectGridView.OnClicked += (_, _) => new CustomObjectGridViewWindow().Show();

    var gtkBox = Gtk.Box.New(Gtk.Orientation.Vertical, 0);
    gtkBox.Append(buttonStringListGridView);
    gtkBox.Append(buttonCustomObjectGridView);

    var window = Gtk.ApplicationWindow.New((Gtk.Application) sender);
    window.Title = "GridView Sample";
    window.SetDefaultSize(300, 300);
    window.Child = gtkBox;
    window.Show();
};

After running the application, window will look like following

And GridView window with custom object will look like as follows

Source

Source code for the sample application is available on GitHub in gtk4-dotnet-grid-view.

References

In no particular order

GTK 4 ListView with .NET

Kashif Soofi — Wed, 21 Feb 2024 18:00:00 +0000

GtkListView

GTK 4 has added new widgets for to display lists namely GtkListView, GtkGridView and GtkColumnView. Here is an excellent article by ToshioCP about GtkListView and an article by Matthias Clasen on why the new widgets were added to GTK 4.

In my search I could not find any guide or getting started with GtkListView in .NET. This post is an attempt to do that and also a reference to what I did :).

Project Setup

Let's start by creating a directory and run following command to create a new solution, project and add project to solution.

dotnet new sln --name ListView
dotnet new console -o ListView.App
dotnet sln add ListView.App/ListView.App.csproj

Next let's add a reference to GirCore.Gtk-4.0 nuget package.

cd ListView.App
dotnet add package GirCore.Gtk-4.0 --version 0.6.3

Application

Let's start by adding an empty GtkApplicationWindow. Add following code in Program.cs

var application = Gtk.Application.New("org.kashif-code-samples.listview.sample", Gio.ApplicationFlags.FlagsNone);
application.OnActivate += (sender, args) =>
{
    var window = Gtk.ApplicationWindow.New((Gtk.Application) sender);
    window.Title = "ListView Sample";
    window.SetDefaultSize(300, 300);
    window.Show();
};
return application.RunWithSynchronizationContext(null);

Running the application, will display an empty window.

No Selection ListView

Next lets enhance our sample application to add a window that has a simple ListView with no selection.
First lets add a new class CodeListViewWindow inherting from Gtk.Window to our project.
ListView will need 2 objects,

SelctionModel - is an interface to support selection of items
ListItemFactory - creates or recycles GtkListItem and connects it with an item of the list model. We are going to use NoSelection, SelectionModel needs a ListStore and we are going to use StringList to display a list of strings. For ListItemFactory we are going to use SignalListItemFactory and setup OnSetup and OnBind signal handlers to create Label and bind data to that Label.

You might get a warning on ListView is a namespace but being used as a type, trick is to add using Gtk; statement after namespace or fully qualify ListView.

Here is the code for the class.

public class CodeListViewWindow : Window
{
    public CodeListViewWindow()
        : base()
    {
        Title = "No Selection ListView";
        SetDefaultSize(300, 300);

        var stringList = StringList.New(["One", "Two", "Three", "Four"]);
        var selectionModel = NoSelection.New(stringList);
        var listItemFactory = SignalListItemFactory.New();
        listItemFactory.OnSetup += SetupSignalHandler;
        listItemFactory.OnBind += BindSignalHandler;

        var listView = ListView.New(selectionModel, listItemFactory);

        var scrolledWindow = ScrolledWindow.New();
        scrolledWindow.Child = listView;
        Child = scrolledWindow;
    }

    private void SetupSignalHandler(SignalListItemFactory sender, SetupSignalArgs args)
    {
        var listItem = args.Object as ListItem;
        if (listItem is null)
        {
            return;
        }

        var label = Label.New(null);
        listItem.Child = label;
    }

    private void BindSignalHandler(SignalListItemFactory sender, BindSignalArgs args)
    {
        var listItem = args.Object as ListItem;
        if (listItem is null)
        {
            return;
        }

        var label = listItem.Child as Label;
        if (label is null)
        {
            return;
        }

        var item = listItem.Item as StringObject;
        label.SetText(item?.String ?? "NOT FOUND");
    }
}

Next step is to add a button on our application window, then we will add a click handler to open a new window that has a no selection list view.
Update the OnActivate handler as follows.

application.OnActivate += (sender, args) =>
{
    var buttonShowCodeListView = CreateButton("Show Code ListView Window");
    buttonShowCodeListView.OnClicked += (_, _) => new CodeListViewWindow().Show();

    var gtkBox = Gtk.Box.New(Gtk.Orientation.Vertical, 0);
    gtkBox.Append(buttonShowCodeListView);

    var window = Gtk.ApplicationWindow.New((Gtk.Application) sender);
    window.Title = "ListView Sample";
    window.SetDefaultSize(300, 300);
    window.Child = gtkBox;
    window.Show();
};

And helper method to create the button.

static Gtk.Button CreateButton(string label)
{
    var button = Gtk.Button.New();
    button.Label = label;
    button.SetMarginTop(12);
    button.SetMarginBottom(12);
    button.SetMarginStart(12);
    button.SetMarginEnd(12);
    return button;
}

Running the application will show our application window with a button.

And clicking on that button will open a new window with a simple list as follows.

BuilderListItemFactory

We can also use the BuilderListItemFactory instead of SignalListItemFactory, this allows us the define the behaviour in ui file instead of writing the signal handlers in code.
I have added the following ui file copied from article by TochioCP.

<interface>
  <template class="GtkListItem">
    <property name="child">
      <object class="GtkLabel">
        <binding name="label">
          <lookup name="string" type="GtkStringObject">
            <lookup name="item">GtkListItem</lookup>
          </lookup>
        </binding>
      </object>
    </property>
  </template>
</interface>

Next I have added another class TemplateListViewWindow with following content. ListItemTemplate.ui file is set as Embedded Resource and for ReadResourceAsByteArray we would need to add using GObject;.

using System.Reflection;
using Gtk;
using GObject;
using GLib;

public class TemplateListViewWindow : Window
{
    public TemplateListViewWindow()
        : base()
    {
        Title = "Template ListView";
        SetDefaultSize(300, 300);

        var stringList = StringList.New(["One", "Two", "Three", "Four"]);
        var selectionModel = SingleSelection.New(stringList);
        var bytes = Assembly.GetExecutingAssembly()
            .ReadResourceAsByteArray("ListItemTemplate.ui");
        var listItemFactory = BuilderListItemFactory.NewFromBytes(null, Bytes.New(bytes));
        var listView = ListView.New(selectionModel, listItemFactory);

        var scrolledWindow = ScrolledWindow.New();
        scrolledWindow.Child = listView;
        Child = scrolledWindow;
    }
}

And I have added a button to show this new window on our application window in Program.cs.

    var buttonShowTemplateListView = CreateButton("Show Template ListView Window");
    buttonShowTemplateListView.OnClicked += (_, _) => new TemplateListViewWindow().Show();
    ...
    gtkBox.Append(buttonShowTemplateListView);

Window with ListItem template looks like following

Wrapup

Here is how you can use Gtk ListView in your application, hopefully it would be a good starting point for anyone looking to start using ListView in C# with code or template.

Source

Source code for the sample application is available on GitHub in gtk4-dotnet-list-view repository.

References

In no particular order

Entity Framework Core Owned Entity

Kashif Soofi — Thu, 15 Feb 2024 18:00:00 +0000

Owned Entity Types

As defined on Owned Entity Types

EF Core allows you to model entity types that can only ever appear on navigation properties of other entity types. These are called owned entity types. The entity containing an owned entity type is its owner.

If we talk in terms Domain Driven Design, the entity containing owned entity equates to the aggregate root and owned entity would become an aggregate.

Also owned entity is a good candidate to model values objects in Domain Driven Design. Value objects don't have a surrogate identity instead all fields make up the object identity.

An aggregate will have one of its component objects be the aggregate root. Any references from outside the aggregate should only go to the aggregate root. The root can thus ensure the integrity of the aggregate as a whole.

Based on the rule above EF Core has following limitations

A DbSet<T> of owned entity cannot be created.
You cannot call Entity<T>() with an owned type on ModelBuilder.

Domain

For the purpose of this post, we will create a Customer service, that will be responsible for CRUD operations on Customer. I will only implement the Create and Read operation for simplicity.

Our Customer object (root aggregate) will look like following

{
    "id": 1,
    "firstName": "John",
    "lastName": "Doe",
    "BillingAddress": {
        "line1": "10 Downing Street",
        "line2": null,
        "line3": null,
        "line4": null,
        "city": "London",
        "postCode": "SW1A 2AA",
        "country": "United Kingdom"
    },
    "ShippingAddress": {
        "line1": "10 Downing Street",
        "line2": null,
        "line3": null,
        "line4": null,
        "city": "London",
        "postCode": "SW1A 2AA",
        "country": "United Kingdom"
    }
}

As you can see we have address hanging off our root object Customer and we only want to query those address starting from Customer so the address makes a good candidate as a value object or in terms of implementation an EF Core Owned Entity. Moreover we have 2 addresses so we can add 2 instances of the same owned entity to our root aggregate.

Project Setup

Let's start by creating a new empty folder and create a new solution using following command.

dotnet new sln --name Customers

Let's add a webapi project and add it to solution.

dotnet new webapi --use-controllers -o Customers.Api
dotnet sln add Customers.Api/Customers.Api.csproj

I will use SQLite for simplicity, let's add a reference to Microsoft.EntityFrameworkCore.Sqlite using following command in project dir.

dotnet add package Microsoft.EntityFrameworkCore.Sqlite

Database Setup

I will use FluentMigrator to initialise database on startup. Let's start by adding SQLite runner to the project.

dotnet add package FluentMigrator.Runner.SQLite

Migration File

Next let's add a migration file to create Customer table. I have prefixed migration file with date time using pattern yyyyMMdd_HHmm_ and followed by _Table_ to denote this migration is creating a table and then finally followed by the table name.
I have used the same date time value as Migration attribute value. The contents of the file are as follows.

using FluentMigrator;

namespace Customers.Api;

[Migration(202402132026)]
public class _20240213_2026_Table_Customer_Create : Migration
{
    public override void Up()
    {
        Create.Table("Customer")
            .WithColumn("Id").AsInt32().PrimaryKey().Identity()
            .WithColumn("FirstName").AsString(50)
            .WithColumn("LastName").AsString(50)
            .WithColumn("BillingAddressLine1").AsString(50)
            .WithColumn("BillingAddressLine2").AsString(50).Nullable()
            .WithColumn("BillingAddressLine3").AsString(50).Nullable()
            .WithColumn("BillingAddressLine4").AsString(50).Nullable()
            .WithColumn("BillingAddressCity").AsString(50)
            .WithColumn("BillingAddressPostCode").AsString(50)
            .WithColumn("BillingAddressCountry").AsString(50)
            .WithColumn("ShippingAddressLine1").AsString(50)
            .WithColumn("ShippingAddressLine2").AsString(50).Nullable()
            .WithColumn("ShippingAddressLine3").AsString(50).Nullable()
            .WithColumn("ShippingAddressLine4").AsString(50).Nullable()
            .WithColumn("ShippingAddressCity").AsString(50)
            .WithColumn("ShippingAddressPostCode").AsString(50)
            .WithColumn("ShippingAddressCountry").AsString(50);
    }

    public override void Down()
    {
        Delete.Table("Customer");
    }
}

I have decided to use the same table to store address. We can use a separate table to store the address values and use ToTable method to configure EF to store address in a separate table.

Migration Runner

Next let's add a class to execute the migrations.

using FluentMigrator.Runner;

namespace Customers.Api;

public static class CustomersDbMigrator
{
    public static void Run(IServiceProvider serviceProvider)
    {
        // Instantiate the runner
        var runner = serviceProvider.GetRequiredService<IMigrationRunner>();

        // Execute the migrations
        runner.MigrateUp();
    }
}

Run Migrations

Add following to appsettings.json

"ConnectionStrings": {
  "CustomersConnectionString": "Data Source=Customers.db"
}

And finally update Program.cs to register FluentMigrator and run migrations before running our app.

var customersConnectionString = builder.Configuration.GetConnectionString("CustomersConnectionString");
...
builder.Services.AddFluentMigratorCore();
builder.Services.ConfigureRunner(rb => rb
        .AddSQLite()
        .WithGlobalConnectionString(customersConnectionString)
        .ScanIn(typeof(_20240213_2026_Table_Customer_Create).Assembly).For.Migrations());
...
using (var scope = app.Services.CreateScope())
{
    CustomersDbMigrator.Run(scope.ServiceProvider);
}

Running first time will create our table.

EF Core Setup

Models

Let's start by adding Address under Models folder.

public class Address
{
    public string Line1 { get; set; }
    public string? Line2 { get; set; }
    public string? Line3 { get; set; }
    public string? Line4 { get; set; }
    public string City { get; set; }
    public string PostCode { get; set; }
    public string Country { get; set; }
}

And our root object Customer

public class Customer
{
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public Address BillingAddress { get; set; }
    public Address ShippingAddress { get; set; }
}

Entity Type Configuration

Next we will configure Address properties as Owned Entity by using OwnsOne method of EntityTypeBuilder in CustomerEntityTypeConfiguration. It will look like following

public class CustomerEntityTypeConfiguration : IEntityTypeConfiguration<Customer>
{
    public void Configure(Microsoft.EntityFrameworkCore.Metadata.Builders.EntityTypeBuilder<Customer> builder)
    {
        builder.ToTable("Customer");

        builder.OwnsOne(p => p.BillingAddress, p =>
        {
            p.Property(pp => pp.Line1).HasColumnName("BillingAddressLine1");
            p.Property(pp => pp.Line2).HasColumnName("BillingAddressLine2");
            p.Property(pp => pp.Line3).HasColumnName("BillingAddressLine3");
            p.Property(pp => pp.Line4).HasColumnName("BillingAddressLine4");
            p.Property(pp => pp.City).HasColumnName("BillingAddressCity");
            p.Property(pp => pp.PostCode).HasColumnName("BillingAddressPostCode");
            p.Property(pp => pp.Country).HasColumnName("BillingAddressCountry");
        });
        builder.OwnsOne(p => p.ShippingAddress, p =>
        {
            p.Property(pp => pp.Line1).HasColumnName("ShippingAddressLine1");
            p.Property(pp => pp.Line2).HasColumnName("ShippingAddressLine2");
            p.Property(pp => pp.Line3).HasColumnName("ShippingAddressLine3");
            p.Property(pp => pp.Line4).HasColumnName("ShippingAddressLine4");
            p.Property(pp => pp.City).HasColumnName("ShippingAddressCity");
            p.Property(pp => pp.PostCode).HasColumnName("ShippingAddressPostCode");
            p.Property(pp => pp.Country).HasColumnName("ShippingAddressCountry");
        });
    }
}

DbContext

Then we will add ConsumersDbContext

public class CustomersDbContext : DbContext
{
    public DbSet<Customer> Customers { get; set; }

    protected override void OnModelCreating(ModelBuilder modelBuilder)
    {
        new CustomerEntityTypeConfiguration().Configure(modelBuilder.Entity<Customer>());
    }

    public CustomersDbContext(DbContextOptions<CustomersDbContext> options)
        : base(options)
    { }
}

Dependency Injection

Finally lets add our db context to dependency injection in Program.cs.

...
builder.Services
    .AddDbContext<CustomersDbContext>(options =>
        options.UseSqlite(customersConnectionString));
...

Customers Controller

Before we add a controller to expose endpoints for CR operations. Let's add an interface and service to Create and Get customer model from database.

public interface ICustomersService
{
    Task<Customer?> GetCustomerAsync(int id, CancellationToken cancellationToken = default);
    Task<int> CreateCustomerAsync(Customer customer, CancellationToken cancellationToken = default);
}

public class CustomersService : ICustomersService
{
    private readonly CustomersDbContext _customersDbContext;

    public CustomersService(CustomersDbContext customersDbContext)
    {
        _customersDbContext = customersDbContext;
    }

    public async Task<Customer?> GetCustomerAsync(int id, CancellationToken cancellationToken = default)
    {
        return await _customersDbContext.Customers
            .FirstOrDefaultAsync(x => x.Id == id, cancellationToken);
    }

    public async Task<int> CreateCustomerAsync(Customer customer, CancellationToken cancellationToken = default)
    {
        await _customersDbContext.Customers.AddAsync(customer, cancellationToken);
        await _customersDbContext.SaveChangesAsync(cancellationToken);
        return customer.Id;
    }
}

Now let's add a new controller that would expose the endpoints to perform the Create and Read operations.

[ApiController]
[Route("api/[controller]")]
public class CustomersController : ControllerBase
{
    private readonly ICustomersService _customersService;

    public CustomersController(ICustomersService customersService)
    {
        _customersService = customersService;
    }

    [HttpGet("{id}")]
    public async Task<IActionResult> GetCustomerAsync(int id)
    {
        var customer = await _customersService.GetCustomerAsync(id);
        return Ok(customer);
    }

    [HttpPost]
    public async Task<IActionResult> CreateCustomerAsync([FromBody] CustomerRequest request)
    {
        var customer = new Customer
        {
            FirstName = request.FirstName,
            LastName = request.LastName,
            BillingAddress = new Address
            {
                Line1 = request.BillingAddress.Line1,
                Line2 = request.BillingAddress.Line2,
                Line3 = request.BillingAddress.Line3,
                Line4 = request.BillingAddress.Line4,
                City = request.BillingAddress.City,
                PostCode = request.BillingAddress.PostCode,
                Country = request.BillingAddress.Country,
            },
            ShippingAddress = new Address
            {
                Line1 = request.ShippingAddress.Line1,
                Line2 = request.ShippingAddress.Line2,
                Line3 = request.ShippingAddress.Line3,
                Line4 = request.ShippingAddress.Line4,
                City = request.ShippingAddress.City,
                PostCode = request.ShippingAddress.PostCode,
                Country = request.ShippingAddress.Country,
            },
        };
        var id = await _customersService.CreateCustomerAsync(customer);
        return Ok(new CustomerResponse(id));
    }
}

public record CustomerRequest(
    string FirstName,
    string LastName,
    CustomerRequestAddress BillingAddress,
    CustomerRequestAddress ShippingAddress);

public record CustomerRequestAddress(
    string Line1,
    string? Line2,
    string? Line3,
    string? Line4,
    string City,
    string PostCode,
    string Country);

public record CustomerResponse(int id);

I have added the request and response object in the same file as controller. Reason for this is that this is only going to be used in this controller. However if you are going to use the same classes in other .NET projects, it would be a good idea to extrat out a contracts project and publish as nuget package that clients can use.

Test

Now code is done, let execute dotnet run from terminal and open Swagger UI in browser and test the operations.

Dapper

Let's explore how to do the same with Dapper that is a popular micro-ORM. Let's start by adding package reference.

dotnet add package Dapper --version 2.1.28

Update our service to work with Dapper

Task<Customer?> GetCustomerAsync(int id, bool useDapper = false, CancellationToken cancellationToken = default);
Task<int> CreateCustomerAsync(Customer customer, bool useDapper = false, CancellationToken cancellationToken = default);

Create Customer

Creating a customer with dapper will be a bit involved, we would need to write the insert sql statement and flatten the object to pass all parameters. I have manully flattened the object and created a param object but AutoMapper will be very useful in this situation.

if (useDapper)
{
    var sql = @"
        INSERT INTO Customer
            (FirstName, LastName,
            BillingAddressLine1, BillingAddressLine2, BillingAddressLine3, BillingAddressLine4, BillingAddressCity, BillingAddressPostCode, BillingAddressCountry,
            ShippingAddressLine1, ShippingAddressLine2, ShippingAddressLine3, ShippingAddressLine4, ShippingAddressCity, ShippingAddressPostCode, ShippingAddressCountry)
        VALUES
            (@FirstName, @LastName,
            @BillingAddressLine1, @BillingAddressLine2, @BillingAddressLine3, @BillingAddressLine4, @BillingAddressCity, @BillingAddressPostCode, @BillingAddressCountry,
            @ShippingAddressLine1, @ShippingAddressLine2, @ShippingAddressLine3, @ShippingAddressLine4, @ShippingAddressCity, @ShippingAddressPostCode, @ShippingAddressCountry);
        SELECT last_insert_rowid();";
    var param = new {
        customer.FirstName,
        customer.LastName,
        BillingAddressLine1 = customer.BillingAddress.Line1,
        BillingAddressLine2 = customer.BillingAddress.Line2,
        BillingAddressLine3 = customer.BillingAddress.Line3,
        BillingAddressLine4 = customer.BillingAddress.Line4,
        BillingAddressCity = customer.BillingAddress.City,
        BillingAddressPostCode = customer.BillingAddress.PostCode,
        BillingAddressCountry = customer.BillingAddress.Country,
        ShippingAddressLine1 = customer.ShippingAddress.Line1,
        ShippingAddressLine2 = customer.ShippingAddress.Line2,
        ShippingAddressLine3 = customer.ShippingAddress.Line3,
        ShippingAddressLine4 = customer.ShippingAddress.Line4,
        ShippingAddressCity = customer.ShippingAddress.City,
        ShippingAddressPostCode = customer.ShippingAddress.PostCode,
        ShippingAddressCountry = customer.ShippingAddress.Country,
    };

    using var connection = new SqliteConnection(_customersConnectionString);
    var id = await connection.ExecuteScalarAsync<int>(
        sql,
        param
    );
    return id;
}

Get Customer

Update GetCustomerAsync method to return Customer using Dapper. We will use splitOn to map the result to multiple objects. We would also need to write the full column list and alias all the columns same as the nested object property names. Had we used separate table for Address we could have just used * instead.

if (useDapper)
{
    var query = @"
        SELECT
            FirstName,
            LastName,
            BillingAddressLine1 AS Line1,
            BillingAddressLine2 AS Line2,
            BillingAddressLine3 AS Line3,
            BillingAddressLine4 AS Line4,
            BillingAddressCity AS City,
            BillingAddressPostCode AS PostCode,
            BillingAddressCountry AS Country,
            ShippingAddressLine1 AS Line1,
            ShippingAddressLine2 AS Line2,
            ShippingAddressLine3 AS Line3,
            ShippingAddressLine4 AS Line4,
            ShippingAddressCity AS City,
            ShippingAddressPostCode AS PostCode,
            ShippingAddressCountry AS Country
        FROM Customer
        WHERE Id = @id";
    using var connection = new SqliteConnection(_customersConnectionString);
    var customer = await connection.QueryAsync<Customer?, Address, Address, Customer?>(
        query,
        (customer, billingAddress, shippingAddress) => {
            customer.BillingAddress = billingAddress;
            customer.ShippingAddress = shippingAddress;
            return customer;
        },
        new { id },
        splitOn: "Line1, Line1");

    return customer.FirstOrDefault();
}

We will add a query parameter to Get endpoint to optionally use Dapper

    public async Task<IActionResult> GetCustomerAsync(int id, [FromQuery] bool useDapper)
    {
        var customer = await _customersService.GetCustomerAsync(id, useDapper);
        ...

Source

Source code for the demo application is host on GitHub in ef-core-owned-entity repository.

References

In no particular order

Counter App with GTK4 CompositeTemplate and Rust

Kashif Soofi — Thu, 01 Feb 2024 18:00:00 +0000

GTK and Rust

GTK is a free and open-source cross-platform widget toolkit for creating graphical user interfaces (GUIs).

Rust is a fast, reliable and productive language for building software on embedded devices, web services and more. It is a system programming language focused on safety, speed and concurrency.

Focus of this tutorial is to write a counter app with GTK 4 Composite Template and Rust. There is a much more comprehensive write up and walkthrough in GUI development with Rust and GTK 4 book. This is just a simplified version of that recreating our counter app with composite template.

Project Setup

Let's begin by installing all necessary tools if setup is not already complete. First, follow the instructions on the GTK website in order to install GTK 4. Then install Rust with rustup. We are targeting GTK4, Rust 1.75 and gtk-rs version 0.7.3 with features v4_12.

Now lets create a new project by executing:

cargo new gtk4-rust-counter-app-template

Add gtk4 crate to your dependencies in Cargo.toml.

cargo add gtk4 --rename gtk --features v4_12

Now we can run our application by executing:

cargo run

At this moment it would print Hello, world!.

Window Template

Lets start by adding a template for our counter app named window.ui, under resources folder.

<?xml version="1.0" encoding="UTF-8"?>
<interface>
  <template class="CounterAppWindow" parent="GtkApplicationWindow">
    <property name="title">GTK Template Counter App</property>
    <child>
      <object class="GtkBox">
        <property name="orientation">vertical</property>
        <property name="margin-start">12</property>
        <property name="margin-end">12</property>
        <property name="spacing">12</property>
        <child>
          <object class="GtkLabel" id="label_counter">
            <property name="label">0</property>
            <property name="margin-top">12</property>
            <property name="margin-bottom">12</property>
            <property name="margin-start">12</property>
            <property name="margin-end">12</property>  
          </object>
        </child>
        <child>
          <object class="GtkButton" id="button_increase">
            <property name="label">Increase</property>
            <property name="margin-top">12</property>
            <property name="margin-bottom">12</property>
            <property name="margin-start">12</property>
            <property name="margin-end">12</property>  
          </object>
        </child>
        <child>
          <object class="GtkButton" id="button_decrease">
            <property name="label">Decrease</property>
            <property name="margin-top">12</property>
            <property name="margin-bottom">12</property>
            <property name="margin-start">12</property>
            <property name="margin-end">12</property>  
          </object>
        </child>
      </object>
    </child>
  </template>
</interface>

Resources

We would take advantage of gio::Resource to embed the template file into our application. The files to embed are described by an xml file. For our template file we also add the compressed and preprocess attribute in order to reduce the final size of the resources. Lets add another file resources.gresource.xml under resources folder.

<?xml version="1.0" encoding="UTF-8"?>
<gresources>
  <gresource prefix="/org/gtk_rs/GTK4CounterTemplate/">
    <file compressed="true" preprocess="xml-stripblanks">window.ui</file>
  </gresource>
</gresources>

We would execute glib_build_tools::compile_resources within a cargo build script to compile the resources and link it to our application.

We will add glib-build-tools as build dependency in Cargo.toml by executing

cargo add glib-build-tools --build

Lets add build.rs file at the root of the project. This will compile the resources whenever we trigger a build with cargo and then statically link our executable to them.

fn main() {
    glib_build_tools::compile_resources(
        &["resources"],
        "resources/resources.gresource.xml",
        "counterapp.gresource",
    );
}

Use Resources

Next we would register and include the resources by calling the macro gio::resources_register_include. Remember to always register the resources before creating the gtk::Application.

main.rs would look like following, it won't compile just yet as we still have to add code for our window.

mod window;

use gtk::prelude::*;
use gtk::{gio, glib, Application};
use window::Window;

const APP_ID: &str = "org.gtk_rs.GTK4CounterTemplate";

fn main() -> glib::ExitCode {
    // Register and include resources
    gio::resources_register_include!("counterapp.gresource")
        .expect("Failed to register resources.");

    // Create a new application
    let app = Application::builder().application_id(APP_ID).build();

    // Connect to "activate" signal of `app`
    app.connect_activate(build_ui);

    // Run the application
    app.run()
}

fn build_ui(app: &Application) {
    // Create new window and present it
    let window = Window::new(app);
    window.present();
}

Application Window

We will create a custom widget in our code inheriting from gtk::ApplicationWindow to make use of our template.

Lets add mod.rs with following content.

mod imp;

use glib::Object;
use gtk::{gio, glib, Application};

glib::wrapper! {
    pub struct Window(ObjectSubclass<imp::Window>)
        @extends gtk::ApplicationWindow, gtk::Window, gtk::Widget,
        @implements gio::ActionGroup, gio::ActionMap, gtk::Accessible, gtk::Buildable,
                    gtk::ConstraintTarget, gtk::Native, gtk::Root, gtk::ShortcutManager;
}

impl Window {
    pub fn new(app: &Application) -> Self {
        // Create new window
        Object::builder().property("application", app).build()
    }
}

Next we will add a new file under src/window named imp.rs. I am following the same naming as the GTK4 Rust book, but feel free to name it after the window, this would be more appropriate if we have multiple windows.

We will start by adding Window struct and adding derive macro CompositeTemplate to the struct and we will also specify the template name.
We will also add struct member of type TemplateChild for each of the widgets we added with id in our template, this would allow us to access those widgets later. We will also add a struct member to hold the current counter that we will update and display in label_counter widget in our button click handlers.

#[derive(CompositeTemplate, Default)]
#[template(resource = "/org/gtk_rs/GTK4CounterTemplate/window.ui")]
pub struct Window {
    #[template_child]
    pub label_counter: TemplateChild<Label>,
    #[template_child]
    pub button_increase: TemplateChild<Button>,
    #[template_child]
    pub button_decrease: TemplateChild<Button>,

    pub counter: Rc<Cell<i32>>,
}

We will implement ObjectSubclass for our struct. Here we make sure that NAME matches class attribute value in template and ParentType matches parent attribute value.

// The central trait for subclassing a GObject
#[glib::object_subclass]
impl ObjectSubclass for Window {
    // `NAME` needs to match `class` attribute of template
    const NAME: &'static str = "CounterAppWindow";
    type Type = super::Window;
    type ParentType = gtk::ApplicationWindow;

    fn class_init(klass: &mut Self::Class) {
        klass.bind_template();
    }

    fn instance_init(obj: &InitializingObject<Self>) {
        obj.init_template();
    }
}

Next we connect the callbacks on the clicked signal of the buttons within constructed method of ObjectImpl trait. The widgets are available as struct members using self.

impl ObjectImpl for Window {
    fn constructed(&self) {
        // Call "constructed" on parent
        self.parent_constructed();

        // Connect to "clicked" signal of `button_increase`
        self.button_increase.connect_clicked(clone!(@weak self as obj => move |_| {
            obj.counter.set(obj.counter.get() + 1);
            obj.label_counter.set_label(&obj.counter.get().to_string());
        }));

        // Connect to "clicked" signal of `button_decrease`
        self.button_decrease.connect_clicked(clone!(@weak self as obj => move |_| {
            obj.counter.set(obj.counter.get() - 1);
            obj.label_counter.set_label(&obj.counter.get().to_string());
        }));
    }
}

Finally we will implement other traits need to successfully build our project.

// Trait shared by all widgets
impl WidgetImpl for Window {}

// Trait shared by all windows
impl WindowImpl for Window {}

// Trait shared by all application windows
impl ApplicationWindowImpl for Window {}

And thats it for this tutorial/sample, running this would diaplay the counter app window and we can click on Increase/Decrease button and see the value updated in the label.

Source

Source code for the demo application is hosted on GitHub in blog-code-samples repository.

References

In no particular order

Choose Font with GTK4 and .NET

Kashif Soofi — Thu, 25 Jan 2024 18:00:00 +0000

GTK and .NET

GTK is a free and open-source cross-platform widget toolkit for creating graphical user interfaces (GUIs).

.NET is the free, open-source, cross-platform framework for building modern apps and powerful cloud services.

Focus of this tutorial is to write an app to choose font with GTK 4 and C# targeting .NET 8.

Project Setup

Let's begin by installing all necessary tools. First, follow the instructions on the GTK website in order to install GTK 4. Then install .NET by following instructions for your platform from download page. We are targeting GTK4, .NET and Gir.Core.Gtk-4.0 0.6.3.

Now lets create a new empty folder named gtk4-dotnet-fontdialog and execute following to create an empty solution:

dotnet new sln

Next we will add a console application and add that to our solution

dotnet new console -o FontDialog.App
dotnet sln add FontDialog.App/FontDialog.App.csproj

New lets add C# bindings for Gtk4 to our Counter.App project

cd Counter.App
dotnet add package GirCore.Gtk-4.0 --version 0.6.3

Now we can run our application by executing:

dotnet run

At this moment it would print Hello, world!.

Application

Lets start by creating GTK Application and add an OnActivate event handler to create the application window and display it.

GTK provides a widget FontDialogButton to get the selected font. This widget expects a FontDialog to make the font selection, we will create a FontDialog, also available with GTK and then create an instance of FontDialogButton and add it to our window. We don't have to do anything else, clicking on button opens the dialog and selected font is updated on the button.

Code for the program is below following the screenshots.

var application = Gtk.Application.New("org.GirCore.GTK4FontDialog", Gio.ApplicationFlags.FlagsNone);
application.OnActivate += (sender, args) =>
{
    var fontDialog = Gtk.FontDialog.New();
    var fontDialogButton = Gtk.FontDialogButton.New(fontDialog);
    fontDialogButton.SetMarginTop(12);
    fontDialogButton.SetMarginBottom(12);
    fontDialogButton.SetMarginStart(12);
    fontDialogButton.SetMarginEnd(12);

    var gtkBox = Gtk.Box.New(Gtk.Orientation.Vertical, 0);
    gtkBox.Append(fontDialogButton);

    var window = Gtk.ApplicationWindow.New((Gtk.Application)sender);
    window.Title = "GTK Choose Font";
    window.SetDefaultSize(300, 300);
    window.Child = gtkBox;
    window.Show();
};
return application.RunWithSynchronizationContext(null);

Choose Font with Button

By using FontDialogButton we don't have to manage opening up FontDialog. However if you don't want to use the FontDialogButton then you would need to display FontDialog manually.
Lets add a label to dispaly selected font and a button that we would use to display FontDialog on click.

    var currentFont = fontDialogButton.GetFontDesc();
    var labelFont = Gtk.Label.New(currentFont?.ToString());
    labelFont.SetMarginTop(12);
    labelFont.SetMarginBottom(12);
    labelFont.SetMarginStart(12);
    labelFont.SetMarginEnd(12);

    var buttonSelectFont = Gtk.Button.New();
    buttonSelectFont.Label = "Select Font";
    buttonSelectFont.SetMarginTop(12);
    buttonSelectFont.SetMarginBottom(12);
    buttonSelectFont.SetMarginStart(12);
    buttonSelectFont.SetMarginEnd(12);

We will setup the click signal handler after creating the window, just before call to Show function. This is required to set the parent of FontDialog. In the handler we will create FontDialog and call ChooseFontAsync function to get the selected font. We are also handling an exception as when user clicks on Cancel button, it results in recoverable GTK error that translates to C# exception.

And add labelCounter as child of window.

    buttonSelectFont.OnClicked += async (_, _) =>
    {
        try
        {
            var fontDialog = Gtk.FontDialog.New();
            var selectedFont = await fontDialog.ChooseFontAsync(window, null);
            labelFont.SetLabel(selectedFont?.ToString() ?? string.Empty);
        }
        catch (Exception ex)
        {
            //Prints "Dismissed by user" if dialog is cancelled
            Console.WriteLine(ex.Message);
        }
    };

    window.Show();

Running the application now would display window with 2 buttons.

And selecting the font would update the font label text.

Source

Source code for the demo application is hosted on GitHub in gtk4-dotnet-font-dialog repository.

References

In no particular order

Counter App with GTK4 and .NET

Kashif Soofi — Thu, 18 Jan 2024 18:00:00 +0000

GTK and .NET

GTK is a free and open-source cross-platform widget toolkit for creating graphical user interfaces (GUIs).

.NET is the free, open-source, cross-platform framework for building modern apps and powerful cloud services.

Focus of this tutorial is to write a counter app with GTK 4 and C# targeting .NET 8.

Project Setup

Now lets create a new empty folder named gtk4-dotnet-counter-app and execute following to create an empty solution:

dotnet new sln

Next we will add a console application and add that to our solution

dotnet new console -o Counter.App
dotnet sln add Counter.App/Counter.App.csproj

New lets add C# bindings for Gtk4 to our Counter.App project

cd Counter.App
dotnet add package GirCore.Gtk-4.0 --version 0.4.0

Now we can run our application by executing:

dotnet run

At this moment it would print Hello, world!.

Application

Lets start by creating GTK Application and add an OnActivate event handler to create the application window.

var application = Gtk.Application.New("org.GirCore.GTK4Counter", Gio.ApplicationFlags.FlagsNone);
application.OnActivate += (sender, args) =>
{
    var window = Gtk.ApplicationWindow.New((Gtk.Application)sender);
    window.Title = "GTK Counter App";
    window.SetDefaultSize(300, 300);
    window.Show();
};
return application.RunWithSynchronizationContext();

This will dispaly an empty window.

Label

Time to add some content. Lets start by adding a Label and displaying Hello World! text.

Add following to OnActivate event handler.

    var labelCounter = Gtk.Label.New("Hello World!");
    labelCounter.SetMarginTop(12);
    labelCounter.SetMarginBottom(12);
    labelCounter.SetMarginStart(12);
    labelCounter.SetMarginEnd(12);

And add labelCounter as child of window.

    var window = Gtk.ApplicationWindow.New((Gtk.Application)sender);
    window.Title = "GTK Counter App";
    window.SetDefaultSize(300, 300);
    window.Child = labelCounter;
    window.Show();

Running the application now would display Hello World! text in the window.

Increment Button

Lets create a button

    var buttonIncrease = Gtk.Button.New();
    buttonIncrease.Label = "Increase";
    buttonIncrease.SetMarginTop(12);
    buttonIncrease.SetMarginBottom(12);
    buttonIncrease.SetMarginStart(12);
    buttonIncrease.SetMarginEnd(12);

Now that we have multiple widgets, we would add a Gtk.Box to hold all the child elements and add that Box as child to window instead.

    var gtkBox = Gtk.Box.New(Gtk.Orientation.Vertical, 0);
    gtkBox.Append(labelCounter);
    gtkBox.Append(buttonIncrease);

    ...
    window.Child = gtkBox;
    ...

Add Click Handler

Lets add a counter and button click handler. We will update the counter and update the labelCounter with the value.

Variable declare will look like following and set label value.

    var counter = 0;

    var labelCounter = Gtk.Label.New(counter.ToString());
    ...

Lets add a click handler for the buttonIncrease.

    buttonIncrease.OnClicked += (_, _) =>
    {
        counter++;
        labelCounter.SetLabel(counter.ToString());
    };

Add Decrease Button and Handler

Lets add another button to decrease the value and update label.

    var buttonDecrease = Gtk.Button.New();
    buttonDecrease.Label = "Decrease";
    buttonDecrease.SetMarginTop(12);
    buttonDecrease.SetMarginBottom(12);
    buttonDecrease.SetMarginStart(12);
    buttonDecrease.SetMarginEnd(12);
    buttonDecrease.OnClicked += (_, _) =>
    {
        counter--;
        labelCounter.SetLabel(counter.ToString());
    };

Source

Source code for the demo application is hosted on GitHub in gtk4-dotnet-counter-app repository.

References

In no particular order

Choose Font with GTK4 and Rust

Kashif Soofi — Thu, 11 Jan 2024 18:00:00 +0000

GTK and Rust

GTK is a free and open-source cross-platform widget toolkit for creating graphical user interfaces (GUIs).

Rust is a fast, reliable and productive language for building software on embedded devices, web services and more. It is a system programming language focused on safety, speed and concurrency.

Focus of this tutorial is to write an app to choose font with GTK 4 and Rust.

Project Setup

Let's begin by installing all necessary tools. First, follow the instructions on the GTK website in order to install GTK 4. Then install Rust with rustup. We are targeting GTK4, Rust 1.75 and gtk-rs version 0.7.3 with features v4_12.

Now lets create a new project by executing:

cargo new gtk4-rust-font-dialog

Add gtk4 crate to your dependencies in Cargo.toml.

cargo add gtk4 --rename gtk --features v4_12

Application

Lets start by creating GTK Application and connecting to activate event of the Application. We will create a method build_ui to create a window and display it. GTK4 provides a widget FontDialogButton, that can be added to a preferences or settings window of the application. It displays current (default) font. Clicking on it will launch the FontDialog also provided by GTK4 that gives uer the ability to select a font.

The whole listing of the main.rs is below following the screenshots.

use glib::clone;
use gtk::prelude::*;
use gtk::{
    self, gio, glib, pango, Application, ApplicationWindow, Button, FontDialog, FontDialogButton,
    Label, Orientation,
};

const APP_ID: &str = "org.gtk_rs.GTK4FontDialog";

fn main() -> glib::ExitCode {
    // Create a new application
    let app = Application::builder().application_id(APP_ID).build();

    // Connect to "activate" signal of `app`
    app.connect_activate(build_ui);

    // Run the application
    app.run()
}

fn build_ui(app: &Application) {
    let font_dialog = FontDialog::builder().modal(false).build();
    let font_dialog_button = FontDialogButton::builder()
        .dialog(&font_dialog)
        .margin_top(12)
        .margin_bottom(12)
        .margin_start(12)
        .margin_end(12)
        .build();

    // Add buttons to `gtk_box`
    let gtk_box = gtk::Box::builder()
        .orientation(Orientation::Vertical)
        .build();
    gtk_box.append(&font_dialog_button);

    // Create a window and set the title
    let window = ApplicationWindow::builder()
        .application(app)
        .title("GTK Choose Font")
        .child(&gtk_box)
        .build();

    // Present window
    window.present();
}

Choose Font with Button

By using FontDialogButton, we don't show the FontDialog it is handled by the FontDialogButton. Lets add a label to display selected font and a button where we show the dialog on button click and get the selected font.

    let current_font = font_dialog_button.font_desc().expect("").to_string();
    let label_font = Label::builder()
        .label(current_font.to_string())
        .margin_top(12)
        .margin_bottom(12)
        .margin_start(12)
        .margin_end(12)
        .build();

    let button_select_font = Button::builder()
        .label("Select Font")
        .margin_top(12)
        .margin_bottom(12)
        .margin_start(12)
        .margin_end(12)
        .build();

We will setup the click handler after creating the window as need to pass the reference to click handler to set the parent of FontDialog. In the handler we will create a FontDialog and call choose_font method to display and select the font. We will update the label_font with the selected font on selection.

    button_select_font.connect_clicked(clone!(@weak window, @weak label_font =>
        move |_| {
            let font_dialog = FontDialog::builder().modal(false).build();
            let current_font = label_font.label();

            font_dialog.choose_font(
                Some(&window),
                Some(&FontDescription::from_string(&current_font.as_str())),
                None::<&gio::Cancellable>,
                clone!(@weak label_font => move |result| {
                    if let Ok(font_desc) = result {
                        label_font.set_label(&font_desc.to_string());
                    }
                }));
        }));

Shout out to pacview preferences_window.rs to help me figure out how to use the choose_font method.

Choose Font with Button (Async)

We can also choose font using a Button but by using the async version of the choose_font. Lets add another button and handler. Result would be the same.

    let button_select_font_async = Button::builder()
        .label("Select Font (async)")
        .margin_top(12)
        .margin_bottom(12)
        .margin_start(12)
        .margin_end(12)
        .build();
    ....
    button_select_font_async.connect_clicked(clone!(@weak window, @weak label_font =>
        move |_| {
            glib::spawn_future_local(clone!(@weak window, @weak label_font => async move {
                let font_dialog = FontDialog::builder().modal(false).build();
                let current_font = label_font.label();

                match font_dialog.choose_font_future(
                    Some(&window),
                    Some(&FontDescription::from_string(&current_font.as_str())),
                ).await {
                    Ok(font) => { label_font.set_label(&font.to_string()); }
                    Err(e) => { println!("{}", e); }
                }
            }));
        }));

Shout out to rnote project to help me figure out how to use the async/await here.

Source

Source code for the demo application is hosted on GitHub in blog-code-samples repository.

References

In no particular order

Counter App with GTK4 and Rust

Kashif Soofi — Thu, 04 Jan 2024 18:00:00 +0000

GTK and Rust

GTK is a free and open-source cross-platform widget toolkit for creating graphical user interfaces (GUIs).

Rust is a fast, reliable and productive language for building software on embedded devices, web services and more. It is a system programming language focused on safety, speed and concurrency.

Focus of this tutorial is to write a counter app with GTK 4 and Rust.

Project Setup

Now lets create a new project by executing:

cargo new gtk4-rust-counter-app

Add gtk4 crate to your dependencies in Cargo.toml.

cargo add gtk4 --rename gtk --features v4_12

Now we can run our application by executing:

cargo run

At this moment it would print Hello, world!.

Application

Lets start by creating GTK Application and connecting to activate event of the Application. We will create a method build_ui to create a window and display it.

use gtk::prelude::*;
use gtk::{glib, Application, ApplicationWindow};

const APP_ID: &str = "org.gtk_rs.GTK4Counter";

fn main() -> glib::ExitCode {
// Create a new application
    let app = Application::builder().application_id(APP_ID).build();

    // Connect to "activate" signal of `app`
    app.connect_activate(build_ui);

    // Run the application
    app.run()
}

fn build_ui(app: &Application) {
    // Create a window and set the title
    let window = ApplicationWindow::builder()
        .application(app)
        .title("GTK Counter App")
        .build();

    // Present window
    window.present();
}

This will dispaly an empty window. Time to add some content.

Label

Lets start by adding a Label and displaying Hello World! text. Add Label to gtk imports.

Add following to build_ui method.

    let label_counter = Label::builder()
        .label("Hello World!")
        .margin_top(12)
        .margin_bottom(12)
        .margin_start(12)
        .margin_end(12)
        .build();

And add label_counter as child of window.

    let window = ApplicationWindow::builder()
        .application(app)
        .title("GTK Counter App")
        .child(&label_counter)
        .build();

Running the application now would display Hello World! text in the window.

Increment Button

Lets create a button

    let button_increase = Button::builder()
        .label("Increase")
        .margin_top(12)
        .margin_bottom(12)
        .margin_start(12)
        .margin_end(12)
        .build();

Now that we have multiple widgets, we would add a gtk_box to hold all the child elements and add that gtk_box as child to window instead.

    let gtk_box = Box::builder()
        .orientation(Orientation::Vertical)
        .build();
    gtk_box.append(&label_counter);
    gtk_box.append(&button_increase);

    ...
        .child(&gtk_box)
    ...

Add Click Handler

Lets add a counter and button click handler. We will update the counter and update the label_counter with the value. Out counter variable would need to be put inside Rc and Cell (not sure if I am using the term correctly) to enable multiple owners and mutable access to variable.

Variable declare will look like following and set label value.

    let counter = Rc::new(Cell::new(0));
    ...
    .label(&counter.get().to_string())
    ...

Lets add a click handler for the button_increase.

    button_increase.connect_clicked(clone!(@strong counter, @weak label_counter =>
        move |_| {
            counter.set(counter.get() + 1);
            label_counter.set_label(&counter.get().to_string());
    }));

Add Decrease Button and Handler

Lets add another button to decrease the value and update the value

    let button_decrease = Button::builder()
        .label("Decrease")
        .margin_top(12)
        .margin_bottom(12)
        .margin_start(12)
        .margin_end(12)
        .build();

    button_decrease.connect_clicked(clone!(@weak label_counter =>
        move |_| {
            counter.set(counter.get() - 1);
            label_counter.set_label(&counter.get().to_string());
    }));

Source

Source code for the demo application is hosted on GitHub in blog-code-samples repository.

References

In no particular order

Integration Test SQL Server Store with testcontainers-go

Kashif Soofi — Thu, 12 Oct 2023 17:00:00 +0000

This is a continuation of an earlier post Integration Test SQL Server Store (go). In this tutorial I will extend the sample to use testcontainers-go to spin up database container and apply migrations before executing our integration tests.

Prior to this sample, pre-requisite of running integration tests was that database server is running either on machine or in a container and migrations are applied. This update will remove that manual step.

Setup

We would need to start 2 containers before running our integration tests.

Database Container - hosting the database server
Migrations Container - container to apply database migrations

Database Container

Let's start by adding a new file containers.go under integrationtests folder. If there are multiple tests feel free to add a separate testhelper directory to add common code. When moving common code to separate package remember to make the types and methods public.

We will create a struct databaseContainer and embed testcontainers.Container from testcontainers-go. We will also add 2 fields for password and database. We are going to set default values for these fields in this tutorial.

We will add a helper method to return the connection string for sa default user.

package integrationtests

import (
    "context"
    "fmt"
    "io"
    "net"
    "strings"
    "time"

    "github.com/testcontainers/testcontainers-go"
    "github.com/testcontainers/testcontainers-go/wait"
)

const (
    defaultPassword     = "Password123"
    defaultDatabaseName = "Movies"
)

type databaseContainer struct {
    testcontainers.Container
    password string
    database string
}

func (c *databaseContainer) ConnectionString(ctx context.Context) (string, error) {
    containerPort, err := c.MappedPort(ctx, "1433/tcp")
    if err != nil {
        return "", err
    }

    host, err := c.Host(ctx)
    if err != nil {
        return "", err
    }

    connectionString := fmt.Sprintf("sqlserver://sa:%s@%s/%s", c.password, net.JoinHostPort(host, containerPort.Port()), c.database)
    return connectionString, nil
}

Database Container

Next we will add a method createDatabaseContainer in containers.go file. This is setting up ContainerRequest to create our custom SQL Server image, wait for log message to ensure database is running and then execute setup-db.sql script using sqlcmd and verify if the script was successful.

Next we start the container and return our custom databaseContainer struct if successful.

func createDatabaseContainer(ctx context.Context) (*databaseContainer, error) {
    req := testcontainers.ContainerRequest{
        FromDockerfile: testcontainers.FromDockerfile{
            Context:    "../db",
            Dockerfile: "Dockerfile.db",
        },
        ExposedPorts: []string{"1433/tcp"},
        Env: map[string]string{
            "ACCEPT_EULA":       "Y",
            "MSSQL_SA_PASSWORD": defaultPassword,
            "MSSQL_PID":         "Express",
        },
        Networks: []string{"testcontainers-go"},
        Name:     "movies.db",
        WaitingFor: wait.ForAll(
            wait.ForLog("SQL Server is now ready for client connections"),
            wait.ForExec([]string{
                "/opt/mssql-tools/bin/sqlcmd",
                "-U",
                "sa",
                "-P",
                defaultPassword,
                "-i",
                "/scripts/setup-db.sql",
            }).
                WithResponseMatcher(func(body io.Reader) bool {
                    data, _ := io.ReadAll(body)
                    return strings.Contains(string(data), "READY")
                }),
        ).
            WithStartupTimeoutDefault(time.Minute * 3).
            WithDeadline(time.Minute * 5),
    }

    dbContainer, err := testcontainers.GenericContainer(ctx, testcontainers.GenericContainerRequest{
        ContainerRequest: req,
        Started:          true,
    })
    if err != nil {
        return nil, err
    }

    return &databaseContainer{
        Container: dbContainer,
        password:  defaultPassword,
        database:  defaultDatabaseName,
    }, nil
}

Migrations Container

We will add another method in containers.go file to create and run migrations container by passing database container's IP address. To make this work we would need to run it in the same network we are running our database container i.e. testcontainers-go. First step of the method is to create a connection string, we are using the same values except for the database container IP but all these can be made configureable. Instead of keeping migrations container running we will wait until it exits.

func createMigrationsContainer(ctx context.Context, dbHostIP string) (testcontainers.Container, error) {
    connectionString := fmt.Sprintf("sqlserver://sa:Password123@%s:1433/Movies", dbHostIP)
    req := testcontainers.ContainerRequest{
        FromDockerfile: testcontainers.FromDockerfile{
            Context:    "../db",
            Dockerfile: "Dockerfile.migrations",
        },
        WaitingFor: wait.ForExit().WithExitTimeout(10 * time.Second),
        Cmd:        []string{connectionString, "up"},
        Networks:   []string{"testcontainers-go"},
        Name:       "movies.db.migrations",
    }

    migrationsContainer, err := testcontainers.GenericContainer(ctx, testcontainers.GenericContainerRequest{
        ContainerRequest: req,
        Started:          true,
    })
    if err != nil {
        return nil, err
    }

    return migrationsContainer, nil
}

Test Suite Changes

We will add 2 new fields in our test suite to hold reference to our database container and migrations container that we would start to run our integration tests.

type sqlServerMoviesStoreTestSuite struct {
    ...
    dbContainer         *databaseContainer
    migrationsContainer testcontainers.Container
    ...
}

We will update SetupSuite method to create both database and migration containers and use the connection string from our newly created database container to initialise sut and dbHelper. We are no longer loading database url from environment configuration.

func (suite *sqlServerMoviesStoreTestSuite) SetupSuite() {
    suite.ctx = context.Background()

    dbContainer, err := createDatabaseContainer(suite.ctx)
    if err != nil {
        log.Fatal(err)
    }
    suite.dbContainer = dbContainer

    dbHostIP, _ := suite.dbContainer.ContainerIP(suite.ctx)
    migrationsContainer, err := createMigrationsContainer(suite.ctx, dbHostIP)
    if err != nil {
        log.Fatal(err)
    }
    suite.migrationsContainer = migrationsContainer

    connectionString, err := suite.dbContainer.ConnectionString(suite.ctx)
    if err != nil {
        log.Fatal(err)
    }

    suite.sut = store.NewSqlServerMoviesStore(connectionString)
    suite.dbHelper = newDatabaseHelper(connectionString)
    suite.fake = faker.New()
}

We will also update TearDownSuite method to terminate both migrations and database containers.

func (suite *sqlServerMoviesStoreTestSuite) TearDownSuite() {
    if err := suite.migrationsContainer.Terminate(suite.ctx); err != nil {
        log.Fatalf("error terminating migrations container: %s", err)
    }
    if err := suite.dbContainer.Terminate(suite.ctx); err != nil {
        log.Fatalf("error terminating database container: %s", err)
    }
}

Run Integration Tests

Run following go test command to run integration tests. Please note now we don't need to setup DATABASE_URL environment variable before running the tests as our setup takes care of starting up database server and getting connection string for that server and passing on to migrationsContainer, sut and dbHelper.

go test ./integrationtests

Integration Tests in CI

I have also added GitHub Actions workflow to run these integration tests as part of the CI when a change is pushed to main branch.

We will use the standard steps defined in Building and testing Go guide. Running database server and migrations would be taken care by SetupSuite.

Here is the complete listing of the workflow.

name: Integration Test SQL Server (testcontainers-go)

on:
  push:
    branches: [ "main" ]
    paths:
     - 'integration-test-sqlserver-with-testcontainers-go/**'

jobs:
  build:
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: integration-test-sqlserver-with-testcontainers-go

    steps:
      - uses: actions/checkout@v3
      - name: Set up Go
        uses: actions/setup-go@v4
        with:
          go-version: '1.20'
      - name: Build
        run: go build -v ./...
      - name: Run integration tests
        run: TESTCONTAINERS_RYUK_DISABLED=true go test ./integrationtests

Source

Source code for the demo application is hosted on GitHub in blog-code-samples repository.

Source for Integration Test SQL Server (testcontainers-go) workflow is in integration-test-sqlserver-testcontainers-go.yml.

References

In no particular order

Integration Test SQL Server Store (go)
Microsoft SQL Server
Microsoft SQL Server - Ubuntu based images
Docker
envconfig
chi
migrate
sqlx
faker
testify
GitHub Actions
About service containers
Building and testing Go
Testcontainers for Go!
And many more