Golang gui: Best GUI frameworks for Go

GUI на Golang: GTK+ 3 / Хабр

Решил я написать одно кроссплатформенное десктопное приложение на Go. Сделал CLI-версию, всё работает отлично. Да ещё и кросскомпиляция в Go поддерживается. Всё в общем отлично. Но понадобилась также и GUI-версия. И тут началось…

Выбор библиотеки (биндинга) для GUI

Приложение должно было быть кроссплатформенным.
Поэтому должно компилироваться под Windows, GNU/Linux и macOS.
Выбор пал на такие библиотеки:

• gotk3 (GTK+ 3)
• therecipe/qt (Qt)
• zserge/webview (нативный вебвью)

Electron и прочие фреймворки, которые тянут с собой Chromium и node.js, я откинул так как они весят достаточно много, ещё и съедают много ресурсов операционной системы.

Теперь немного о каждой библиотеке.

gotk3

Биндинг библиотеки GTK+ 3. Покрытие далеко не всех возможностей, но всё основное присутсвует.

Компилируется приложение с помощью стандартного go build. Кроссплатформенная компиляция возможна, за исключением macOS. Только с macOS можно скомпилировать под эту ОС, ну и с macOS можно будет скомпилировать и под Windows + GNU/Linux.

Интерфейс будет выглядить нативно для GNU/Linux, Windows (нужно будет указать специальную тему). Для macOS будет выглядеть не нативно. Выкрутиться можно только разве что страшненькой темой, которая будет эмулирувать нативные элементы macOS.

therecipe/qt

Биндинг библиотеки Qt 5. Поддержка QML, стандартных виджетов. Вообще этот биндинг многие советуют.

Компилируется с помощью специальной команды qtdeploy. Кроме десктопных платформ есть также и мобильные. Кросскомпиляция происходит с помощью Docker. Под операционные системы Apple можно скомпилировать только с macOS.

При желании на Qt можно добиться чтобы интерфейс выглядел нативно на десктопных ОС.

zserge/webview

Библиотека, которая написана изначально на C, автор прикрутил её ко многим языкам, в том числе и к Go. Использывается нативный webview для отображения: Windows — MSHTML, GNU/Linux — gtk-webkit2, macOS — Cocoa/WebKit. Кроме кода на Go нужно будет и на JS пописать, ну и HTML пригодится.

Компилируется при помощи go build, кросскомпиляция возможна с помощью xgo.

Выглядеть нативно может настолько насколько позволит стандартный браузер.

Выбор

Почему же я выбрал именно gotk3?

В therecipe/qt мне не понравилась слишком сложная система сборки приложения, даже специальную команду сделали.

zserge/webview вроде бы не плох, весить будет не много, но всё-таки это webview и могут быть стандартные проблемы, которые бывают в таких приложениях: может что-то где-то поехать. И это не Electron, где всегда в комплекте продвинутый Chromium, а в какой-нибудь старой Windows может всё поехать. Да и к тому же придётся ещё и на JS писать.

gotk3 я выбрал как что-то среднее. Можно собирать стандартным go build, выглядит приемлемо, да и вообще я GTK+ 3 люблю!

В общем я думал, что всё будет просто. И что зря про Go говорят, что в нём проблема с GUI. Но как же я ошибался…

Начинаем

Устанавливаем всё из gotk3 (gtk, gdk, glib, cairo) себе:

go get github.com/gotk3/gotk3/...

Также у вас в системе должна быть установлена сама библиотека GTK+ 3 для разработки.

GNU/Linux

В Ubuntu:

sudo apt-get install libgtk-3-dev

В Arch Linux:

sudo pacman -S gtk3

macOS

Через Homebrew:

 brew install gtk-mac-integration gtk+3

Windows

Здесь всё не так просто. В официальной инструкции предлагают использовать MSYS2 и уже в ней всё делать. Лично я писал код на других операционных системах, а кросскомпиляцию для Windows делал в Arch Linux, о чём надеюсь скоро напишу.

Простой пример

Теперь пишем небольшой файл с кодом main.go:

package main
import (
    "log"
    "github.com/gotk3/gotk3/gtk"
)
func main() {
    // Инициализируем GTK.
    gtk.Init(nil)
    // Создаём окно верхнего уровня, устанавливаем заголовок
    // И соединяем с сигналом "destroy" чтобы можно было закрыть
    // приложение при закрытии окна
    win, err := gtk.WindowNew(gtk.  WINDOW_TOPLEVEL)
    if err != nil {
        log.Fatal("Не удалось создать окно:", err)
    }
    win.SetTitle("Простой пример")
    win.Connect("destroy", func() {
        gtk.MainQuit()
    })
    // Создаём новую метку чтобы показать её в окне
    l, err := gtk.LabelNew("Привет, gotk3!")
    if err != nil {
        log.Fatal("Не удалось создать метку:", err)
    }
    // Добавляем метку в окно
    win.Add(l)
    // Устанавливаем размер окна по умолчанию
    win.SetDefaultSize(800, 600)
    // Отображаем все виджеты в окне
    win.ShowAll()
    // Выполняем главный цикл GTK (для отрисовки). Он остановится когда
    // выполнится gtk.MainQuit()
    gtk.Main()
}

Спомпилировать можно с помощью команды go build, а потом запустить бинарник. Но мы просто запустим его:

go run main.go

После запуска получим окно такого вида:

Поздравляю! У вас получилось простое приложение из README gotk3!

Больше примеров можно найти на Github gotk3. Их разбирать я не буду. Давайте лучше займёмся тем, чего нет в примерах!

Glade

Есть такая вещь для Gtk+ 3 — Glade. Это конструктор графических интерфейсов для GTK+. Выглядит примерно так:

Чтобы вручную не создавать каждый элемент и не помещать его потом где-то в окне с помощью программного кода, можно весь дизайн накидать в Glade. Потом сохранить всё в XML-подобный файл *.glade и загрузить его уже через наше приложение.

Установка Glade

GNU/Linux

В дистрибутивах GNU/Linux установить glade не составит труда. В какой-нибудь Ubuntu это будет:

sudo apt-get install glade

В Arch Linux:

sudo pacman -S glade

macOS

В загрузках с официального сайта очень старая сборка. Поэтому устанавливать лучше через Homebrew:

brew install glade

А запускать потом:

glade

Windows

Скачать не самую последнюю версию можно здесь. Я лично на Windows вообще не устанавливал, поэтому не знаю насчёт стабильность работы там Glade.

Простое приложение с использованием Glade

В общем надизайнил я примерно такое окно:

Сохранил и получил файл

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.22.1 -->
<interface>
  <requires lib="gtk+" version="3.20"/>
  <object>
    <property name="title" translatable="yes">Пример Glade</property>
    <property name="can_focus">False</property>
    <child>
      <placeholder/>
    </child>
    <child>
      <object>
        <property name="visible">True</property>
        <property name="can_focus">False</property>
        <property name="margin_left">10</property>
        <property name="margin_right">10</property>
        <property name="margin_top">10</property>
        <property name="margin_bottom">10</property>
        <property name="orientation">vertical</property>
        <property name="spacing">10</property>
        <child>
          <object>
            <property name="visible">True</property>
            <property name="can_focus">True</property>
          </object>
          <packing>
            <property name="expand">False</property>
            <property name="fill">True</property>
            <property name="position">0</property>
          </packing>
        </child>
        <child>
          <object>
            <property name="label" translatable="yes">Go</property>
            <property name="visible">True</property>
            <property name="can_focus">True</property>
            <property name="receives_default">True</property>
          </object>
          <packing>
            <property name="expand">False</property>
            <property name="fill">True</property>
            <property name="position">1</property>
          </packing>
        </child>
        <child>
          <object>
            <property name="visible">True</property>
            <property name="can_focus">False</property>
            <property name="label" translatable="yes">This is label</property>
          </object>
          <packing>
            <property name="expand">False</property>
            <property name="fill">True</property>
            <property name="position">2</property>
          </packing>
        </child>
      </object>
    </child>
  </object>
</interface>

То есть у нас получилось окно window_main (GtkWindow), в котором внутри контейнер (GtkBox), который содержит поле ввода entry_1

Давайте теперь попробуем загрузить это представление в нашем main.go:

package main
import (
    "log"
    "github.com/gotk3/gotk3/gtk"
)
func main() {
    // Инициализируем GTK.
    gtk.Init(nil)
    // Создаём билдер
    b, err := gtk.BuilderNew()
    if err != nil {
        log.Fatal("Ошибка:", err)
    }
    // Загружаем в билдер окно из файла Glade
    err = b.AddFromFile("main.glade")
    if err != nil {
        log.Fatal("Ошибка:", err)
    }
    // Получаем объект главного окна по ID
    obj, err := b.GetObject("window_main")
    if err != nil {
        log.Fatal("Ошибка:", err)
    }
    // Преобразуем из объекта именно окно типа gtk.Window
    // и соединяем с сигналом "destroy" чтобы можно было закрыть
    // приложение при закрытии окна
    win := obj.(*gtk.Window)
    win.Connect("destroy", func() {
        gtk.  MainQuit()
    })
    // Отображаем все виджеты в окне
    win.ShowAll()
    // Выполняем главный цикл GTK (для отрисовки). Он остановится когда
    // выполнится gtk.MainQuit()
    gtk.Main()
}

Снова запускаем:

go run main.go

И получаем:

Ура! Теперь мы представление формы держим XML-подобном main.glade файле, а код в main.go!

Окно запускается, но давайте добавим интерактивности. Пусть текст из поля ввода при нажатии на кнопку попадёт в метку.

Для этого для начала получим элементы поля ввода, кнопки и метке в коде:

// Получаем поле ввода
obj, _ = b.GetObject("entry_1")
entry1 := obj.(*gtk.Entry)
// Получаем кнопку
obj, _ = b.GetObject("button_1")
button1 := obj.(*gtk.Button)
// Получаем метку
obj, _ = b.GetObject("label_1")
label1 := obj.(*gtk.Label)

Я не обрабатываю ошибки, которые возвращает функция GetObject(), для того, чтобы код был более простым. Но в реальном рабочем приложении их обязательно необходимо обработать.

Хорошо. С помощью кода выше мы получаем наши элементы формы. А теперь давайте обработаем сигнал clicked кнопку (когда кнопка нажата). Сигнал GTK+ — это по сути реакция на событие. Добавим код:

// Сигнал по нажатию на кнопку
button1.Connect("clicked", func() {
    text, err := entry1.GetText()
    if err == nil {
        // Устанавливаем текст из поля ввода метке
        label1.SetText(text)
    }
})

Теперь запускаем код:

go run main.go

После ввода какого-нибудь текста в поле и нажатию по кнопке Go мы увидем этот текст в метке:

Теперь у нас интерактивное приложение!

Заключение

На данном этапе всё кажется простым и не вызывает трудностей. Но трудности у меня появились при кросскомпиляции (ведь gotk3 компилируется с CGO), интеграции с операционными системами и с диалогом выбора файла. Я даже добавил в проект gotk нативный диалог. Также в моём проекте нужна была интернационализация. Там тоже есть некоторые особенности. Если вам интересно увидеть это всё сейчас в коде, то можно подсмотреть здесь.

Исходые коды примеров из статьи находятся здесь.

А если хотите почитать продолжение, то можете проголосовать. И в случае, если окажется это кому-нибудь интересным, я продолжу писать.

GTK + 3 / Sudo Null IT News

I decided to write one cross-platform desktop application on Go . Made a CLI version, everything works fine. Moreover, Go Cross-compilation is supported. Everything is fine in general. But I also needed a GUI version. And then it began …

Library selection (binding) for GUI

The application had to be cross-platform.
Therefore, it should compile under Windows , GNU / Linux and macOS .
The choice fell on such libraries:

• gotk3 (GTK + 3)
• therecipe / qt (Qt)
• zserge / webview (native webview)

Electron and other frameworks that pull Chromium and node. js with them , I threw away as they weigh quite a lot, they also eat up a lot of operating system resources.

Now a little about each library.

gotk3

Binding of the library GTK + 3 . Coverage is not all possibilities, but all the main presence.

Compiled application using the standard go build. Cross-platform compilation is possible, with the exception of macOS . Only with macOS you can compile for this OS, and with macOS you can also compile under Windows + GNU / Linux .

The interface will appear natively for GNU / Linux , Windows (you will need to specify a special theme). For macOS it will not look native. It is possible to get out only if it is a terrible topic that will emulate the native elements of macOS .

therecipe / qt

Binding the Qt 5 library . Support for QML, standard widgets. In general, many people advise this binding.

Compiled using a special command qtdeploy. In addition to the desktop platforms, there are also mobile ones. Crosscompilation takes place using Docker . For Apple operating systems , you can only compile with macOS .

At desire on Qt it is possible to achieve that the interface looked natively on desktop OS.

zserge / webview

The library, which was originally written in C , the author has screwed it to many languages, including Go . Native webview is used to display: Windows — MSHTML , GNU / Linux — gtk-webkit2 , macOS — Cocoa / WebKit . In addition to the Go code, you will need to pee on JS , well, HTML is useful.

Compiled with go build, cross- compilation is possible with xgo .

Looks native can as far as the standard browser allows.

Selection

Why did I choose gotk3 ?

In therecipe / qt, I didn’t like the application’s very complicated build system, they even made a special command.

zserge / webview does not seem to be bad, it will not weigh much, but still this is a webview and there may be standard problems that occur in such applications: something may go somewhere. And this is not Electron , where the advanced Chromium is always bundled , and everything can go to some old Windows . And besides, you also have to write on JS .

gotk3 I chose as something in between. You can build a standard go build, it looks acceptable, and indeed I love GTK + 3 !

In general, I thought everything would be easy. And that for nothing about Go say that in it a problem with GUI . But how am I wrong …

Getting started

Install everything from gotk3 ( gtk , gdk , glib , cairo ) to yourself:

go get github.com/gotk3/gotk3/...

Also, your system should have the GTK + 3 library itself in development.

GNU / Linux

In Ubuntu :

sudo apt-get install libgtk-3-dev

In Arch Linux :

sudo pacman -S gtk3

macOS

Via Homebrew :

 brew install gtk-mac-integration gtk+3

Windows

Everything is not so simple here. The official instructions suggest using MSYS2 and already do everything in it. Personally, I wrote code on other operating systems, and did cross-compilation for Windows in Arch Linux , which I hope to write soon.

Simple example

Now we write a small file with the code main. go:

package main
import (
    "log""github.com/gotk3/gotk3/gtk"
)
funcmain() {
    // Инициализируем GTK.
    gtk.Init(nil)
    // Создаём окно верхнего уровня, устанавливаем заголовок// И соединяем с сигналом "destroy" чтобы можно было закрыть// приложение при закрытии окна
    win, err := gtk.WindowNew(gtk.WINDOW_TOPLEVEL)
    if err != nil {
        log.Fatal("Не удалось создать окно:", err)
    }
    win.SetTitle("Простой пример")
    win.Connect("destroy", func() {
        gtk.MainQuit()
    })
    // Создаём новую метку чтобы показать её в окне
    l, err := gtk.LabelNew("Привет, gotk3!")
    if err != nil {
        log.Fatal("Не удалось создать метку:", err)
    }
    // Добавляем метку в окно
    win.Add(l)
    // Устанавливаем размер окна по умолчанию
    win.SetDefaultSize(800, 600)
    // Отображаем все виджеты в окне
    win.ShowAll()
    // Выполняем главный цикл GTK (для отрисовки). Он остановится когда// выполнится gtk.MainQuit()
    gtk.Main()
}

You can compile using the command go build, and then run the binary. But we just run it:

go run main.go

After launch, we get a window of this type:

Congratulations! You have a simple app from README gotk3 !

More examples can be found on Github gotk3 . I will not disassemble them. Let’s better deal with what is not in the examples!

Glade

There is such a thing for Gtk + 3 — Glade . This is the GUI Designer for GTK + . It looks like this:

In order not to create each element manually and not to place it somewhere in the window with the help of a program code, you can distribute the entire design in Glade . Then save everything to an XML-like * .glade file and load it already through our application.

Install glade

GNU / Linux

It is easy to install the glade in GNU / Linux distributions . In some Ubuntu it will be:

sudo apt-get install glade

In Arch Linux :

sudo pacman -S glade

brew install glade

glade

<?xml version="1.0" encoding="UTF-8"?><!-- Generated with glade 3.22.1 --><interface><requireslib="gtk+"version="3.20"/><objectclass="GtkWindow"id="window_main"><propertyname="title"translatable="yes">Пример Glade</property><propertyname="can_focus">False</property><child><placeholder/></child><child><objectclass="GtkBox"><propertyname="visible">True</property><propertyname="can_focus">False</property><propertyname="margin_left">10</property><propertyname="margin_right">10</property><propertyname="margin_top">10</property><propertyname="margin_bottom">10</property><propertyname="orientation">vertical</property><propertyname="spacing">10</property><child><objectclass="GtkEntry"id="entry_1"><propertyname="visible">True</property><propertyname="can_focus">True</property></object><packing><propertyname="expand">False</property><propertyname="fill">True</property><propertyname="position">0</property></packing></child><child><objectclass="GtkButton"id="button_1"><propertyname="label"translatable="yes">Go</property><propertyname="visible">True</property><propertyname="can_focus">True</property><propertyname="receives_default">True</property></object><packing><propertyname="expand">False</property><propertyname="fill">True</property><propertyname="position">1</property></packing></child><child><objectclass="GtkLabel"id="label_1"><propertyname="visible">True</property><propertyname="can_focus">False</property><propertyname="label"translatable="yes">This is label</property></object><packing><propertyname="expand">False</property><propertyname="fill">True</property><propertyname="position">2</property></packing></child></object></child></object></interface>

package main
import (
    "log""github.com/gotk3/gotk3/gtk"
)
funcmain() {
    // Инициализируем GTK.
    gtk.Init(nil)
    // Создаём билдер
    b, err := gtk.BuilderNew()
    if err != nil {
        log.Fatal("Ошибка:", err)
    }
    // Загружаем в билдер окно из файла Glade
    err = b.AddFromFile("main.glade")
    if err != nil {
        log.Fatal("Ошибка:", err)
    }
    // Получаем объект главного окна по ID
    obj, err := b.GetObject("window_main")
    if err != nil {
        log.Fatal("Ошибка:", err)
    }
    // Преобразуем из объекта именно окно типа gtk.Window// и соединяем с сигналом "destroy" чтобы можно было закрыть// приложение при закрытии окна
    win := obj.(*gtk.Window)
    win.Connect("destroy", func() {
        gtk.MainQuit()
    })
    // Отображаем все виджеты в окне
    win. ShowAll()
    // Выполняем главный цикл GTK (для отрисовки). Он остановится когда// выполнится gtk.MainQuit()
    gtk.Main()
}

go run main.go

// Получаем поле ввода
obj, _ = b.GetObject("entry_1")
entry1 := obj.(*gtk.Entry)
// Получаем кнопку
obj, _ = b.GetObject("button_1")
button1 := obj.(*gtk.Button)
// Получаем метку
obj, _ = b.GetObject("label_1")
label1 := obj.(*gtk.Label)

// Сигнал по нажатию на кнопку
button1.Connect("clicked", func() {
    text, err := entry1.GetText()
    if err == nil {
        // Устанавливаем текст из поля ввода метке
        label1.SetText(text)
    }
})

go run main.go