Glade — это приложение, позволяющее создавать GUI на Gtk+ не кодом, самостоятельно выделяя память для того или иного виджета, инициализируя его и помещая в контейнер, а при помощи визуального конструктора.
Данная программа имеет открытый исходный код, распространяется абсолютно бесплатно.
Для данной операционной системы вам, вероятно, потребуется MSYS. Для работы с Glade вам нужно установить с его помощью несколько пакетов. Введите в терминал msys эту команду: pacman -S base-devel mingw-w64-x86_64-gtk3 mingw-w64-x86_64-glade
После установки, вы сможете найти glade.exe где-то в папке с msys или запустить его из того же терминала командой: glade
Тут все очень просто: sudo pacman -S glade
Тоже элементарно ^ sudo apt install glade
Для начала необходимо запустить программу и создать новый документ (форму пользовательского интерфейса). Это делается нажатием на кнопку в левом верхнем углу программы. После этого можно начинать создавать UI.
Давайте начнем с простого и создадим обычное окно(GtkWindow) с заголовком и дефолтным размером при создании, например 640*320px. Для этого дважды тыкаем в рабочей области программы и выбираем необходимый виджет из списка. Он появиться не только в рабочей области, но и в дереве виджетов(расположено в левой части программы). Так же откроются свойства только что созданного объекта(правая часть экрана).
Для каждого виджета необходимо задать ID (в качестве ID окна будем использовать ID:main_window), чтобы в дальнейшем имелась хоть какая-то возможность с ним работать. Это делается в свойствах виджета(правая часть программы). Там же мы установим Title(Заголовок) для окна(Пусть будет «Title for main window») и его Default Width(Стандартная ширина) и Default Height(Стандартная высота).
Как видите, в свойствах виджета есть несколько вкладок — General(основное), Packing(компоновка), Common(Общее) и Signals(Сигналы).
Во вкладке General находятся основные свойства того или иного виджета. Для Label — текст надписи и ее выравнивание, для Window — заголовок, стандартный размер и тд.
Вкладка Packing предназначена для виджета, помещенного в какой-либо контейнер и определяет положение этого виджета.
В Common расположены атрибуты стилей; там можно определить ID и класс объекта для того, чтобы задать какому-то виджету необходимый внешний вид при помощи CSS.
Signals предназначено для связывания сигналов со слотами. Тут можно указать, какая функция будет вызываться при нажатии на кнопку, вводе текста и тому подобному.
Так что же делать дальше? В Gtk+ виджет для его отображения необходимо помещать в контейнер(чтучка для компоновки виджетов). Window сам по себе является контейнером, но в него можно положить только что-то одно, а для наглядности нам нужно нечто большее, чем просто одинокая кнопка.
Попробуем создать сетку(GtkGrid) (контейнер, куда можно очень много чего положить). Для этого тыкаем на контейнер(в нашем случае окно), в который мы хотим положить новый виджет(сетка) дважды и выбираем из появившегося списка нужный. Для сетки установим количество столбцов и строк, а также сделаем так, чтобы столбцы были одинаковой ширины, а строки одинаковой высоты(сделаем их гомогенными).
Обратите внимание на дерево объектов. Оно явно показывает, что сетка(GtkGrid), которой я забыл назначить ID(сделайте это сами), помещена в окно main_window.
Теперь давайте создадим кнопку и наконец поэксперементируем с вкладкой Packing. Тыкаем ту клеточку сетки, куда хотим поместить кнопку, выбираем GtkButton в списке, устанавливаем ID и текст, отображаемый на кнопке, после чего идем во вкладку компоновки и экспериментируем с расположением кнопки в сетке. Можно задать координату клетки начала виджета и количество клеток, на которое этот виджет будет растянут в сетке. Кнопка в итоге будет находиться в самой верхней левой клетке и растянута на всю длину окна.
По аналогии создадим надпись(GtkLabel) с неким текстом. Разместим ее под кнопкой, но будем растягивать не на всю ширину окна, а лишь на 4/5 его часть…
Помним, что мы не забываем указывать ID для каждого виджета)
Теперь импортируем что-то из внешнего мира, например картинку. Для этого нам нужна сама картинка… Как насчет этого прекрасного гуся?
Создаем объект GtkImage и указываем путь до необходимой картинки(относительно от файла c ui. Там есть кнопочка с карандашиком, она открывает меню выбора файла, — используйте ее. Не удалось показать работу этим методом, так как при записи экрана эта менюшка странно себя ведет).
На данный момент она не отобразилась, но она есть. Не забываем про нее.
Еще в Gtk+ есть встроенные иконки. Давайте создадим картинку с такой иконкой. Для этого так же создаем GtkImage, но вместо FileName(Имя файла) необходимо будет выбрать IconName(Имя иконки).
Создадим еще парочку простых виджетов — поле для ввода текста(GtkEntry) и кнопку выбора цвета(GtkColorButton).
Теперь создадим еще кое-что интересное и перейдем непосредственно к тому, как сильно Glade сокращает код. Сделаем кнопку, по нажатию на которую, будет открываться всплывающее меню. Сначала показываю как, потом объясняю:
Для начала создаем GtkMenuButton — это как раз кнопка, с нужным функционалом, и присваиваем ей id. Потом переходим в меню popover (Именно popover!!! Popup является устаревшим) в свойствах этой кнопки. Этот параметр позволяет задать меню, которое будет открываться по нажатию. Так как такового мы еще не создали, нажимаем кнопку New.
Создастся новый виджет — виджет выпадающего меню. Положим в него просто надпись, хотя туда можно добавить контейнер, и тоже что-то с этим сделать.
Теперь сигналы. Подключим 2 штуки. Первый — сигнал выхода из приложения при закрытии окна. Для этого в дереве объектов выбираем нужный виджет и тыкаем на него. Переходим во вкладку signals, выбираем нужный сигнал и пишем к нему имя функции-обработчика. Имя сигнала закрытия окна(уничтожения виджета окна) — destroy. Функцию обработчик назовём onExit.
Теперь добавим также сигнал для кнопки с надписью привет. Он должен срабатывать при нажатии(clicked) и вызывать функцию onBtnClicked.
Теперь делаем предпросмотр и сохраняем файл с интерфейсом:
Был создан файл Unsaved1.glade. Это и есть наш интерфейс. Теперь перейдем к коду
Для универсальности написан на C, но тем не менее работает там, где есть биндинг к Gtk+ (gtkmm, gtkd, gtkrust и тд).
Файл main.c:
Как компилить? gcc main.c -o app `pkg-config --cflags --libs gtk+-3.0` -Wl,-export-dynamic
Ну вот наконец мы и подабрались к окончанию статьи. Надеюсь она была полезной для вас. Вот, что в итоге вышло:
Данная программа имеет открытый исходный код, распространяется абсолютно бесплатно.
Как установить?
Windows
Для данной операционной системы вам, вероятно, потребуется MSYS. Для работы с Glade вам нужно установить с его помощью несколько пакетов. Введите в терминал msys эту команду: pacman -S base-devel mingw-w64-x86_64-gtk3 mingw-w64-x86_64-glade
После установки, вы сможете найти glade.exe где-то в папке с msys или запустить его из того же терминала командой: glade
Arch Linux
Тут все очень просто: sudo pacman -S glade
Ubuntu
Тоже элементарно ^ sudo apt install glade
Приступаем к работе
Все инструкции по работе с Glade в посте выполнены в форме GIF и также описаны в текстовой форме
Для начала необходимо запустить программу и создать новый документ (форму пользовательского интерфейса). Это делается нажатием на кнопку в левом верхнем углу программы. После этого можно начинать создавать UI.
Давайте начнем с простого и создадим обычное окно(GtkWindow) с заголовком и дефолтным размером при создании, например 640*320px. Для этого дважды тыкаем в рабочей области программы и выбираем необходимый виджет из списка. Он появиться не только в рабочей области, но и в дереве виджетов(расположено в левой части программы). Так же откроются свойства только что созданного объекта(правая часть экрана).
Для каждого виджета необходимо задать ID (в качестве ID окна будем использовать ID:main_window), чтобы в дальнейшем имелась хоть какая-то возможность с ним работать. Это делается в свойствах виджета(правая часть программы). Там же мы установим Title(Заголовок) для окна(Пусть будет «Title for main window») и его Default Width(Стандартная ширина) и Default Height(Стандартная высота).
Как видите, в свойствах виджета есть несколько вкладок — General(основное), Packing(компоновка), Common(Общее) и Signals(Сигналы).
Во вкладке General находятся основные свойства того или иного виджета. Для Label — текст надписи и ее выравнивание, для Window — заголовок, стандартный размер и тд.
Вкладка Packing предназначена для виджета, помещенного в какой-либо контейнер и определяет положение этого виджета.
В Common расположены атрибуты стилей; там можно определить ID и класс объекта для того, чтобы задать какому-то виджету необходимый внешний вид при помощи CSS.
Signals предназначено для связывания сигналов со слотами. Тут можно указать, какая функция будет вызываться при нажатии на кнопку, вводе текста и тому подобному.
Так что же делать дальше? В Gtk+ виджет для его отображения необходимо помещать в контейнер(чтучка для компоновки виджетов). Window сам по себе является контейнером, но в него можно положить только что-то одно, а для наглядности нам нужно нечто большее, чем просто одинокая кнопка.
Попробуем создать сетку(GtkGrid) (контейнер, куда можно очень много чего положить). Для этого тыкаем на контейнер(в нашем случае окно), в который мы хотим положить новый виджет(сетка) дважды и выбираем из появившегося списка нужный. Для сетки установим количество столбцов и строк, а также сделаем так, чтобы столбцы были одинаковой ширины, а строки одинаковой высоты(сделаем их гомогенными).
Обратите внимание на дерево объектов. Оно явно показывает, что сетка(GtkGrid), которой я забыл назначить ID(сделайте это сами), помещена в окно main_window.
Теперь давайте создадим кнопку и наконец поэксперементируем с вкладкой Packing. Тыкаем ту клеточку сетки, куда хотим поместить кнопку, выбираем GtkButton в списке, устанавливаем ID и текст, отображаемый на кнопке, после чего идем во вкладку компоновки и экспериментируем с расположением кнопки в сетке. Можно задать координату клетки начала виджета и количество клеток, на которое этот виджет будет растянут в сетке. Кнопка в итоге будет находиться в самой верхней левой клетке и растянута на всю длину окна.
По аналогии создадим надпись(GtkLabel) с неким текстом. Разместим ее под кнопкой, но будем растягивать не на всю ширину окна, а лишь на 4/5 его часть…
Помним, что мы не забываем указывать ID для каждого виджета)
Теперь импортируем что-то из внешнего мира, например картинку. Для этого нам нужна сама картинка… Как насчет этого прекрасного гуся?
Создаем объект GtkImage и указываем путь до необходимой картинки(относительно от файла c ui. Там есть кнопочка с карандашиком, она открывает меню выбора файла, — используйте ее. Не удалось показать работу этим методом, так как при записи экрана эта менюшка странно себя ведет).
На данный момент она не отобразилась, но она есть. Не забываем про нее.
Еще в Gtk+ есть встроенные иконки. Давайте создадим картинку с такой иконкой. Для этого так же создаем GtkImage, но вместо FileName(Имя файла) необходимо будет выбрать IconName(Имя иконки).
Создадим еще парочку простых виджетов — поле для ввода текста(GtkEntry) и кнопку выбора цвета(GtkColorButton).
Теперь создадим еще кое-что интересное и перейдем непосредственно к тому, как сильно Glade сокращает код. Сделаем кнопку, по нажатию на которую, будет открываться всплывающее меню. Сначала показываю как, потом объясняю:
Для начала создаем GtkMenuButton — это как раз кнопка, с нужным функционалом, и присваиваем ей id. Потом переходим в меню popover (Именно popover!!! Popup является устаревшим) в свойствах этой кнопки. Этот параметр позволяет задать меню, которое будет открываться по нажатию. Так как такового мы еще не создали, нажимаем кнопку New.
Создастся новый виджет — виджет выпадающего меню. Положим в него просто надпись, хотя туда можно добавить контейнер, и тоже что-то с этим сделать.
Теперь сигналы. Подключим 2 штуки. Первый — сигнал выхода из приложения при закрытии окна. Для этого в дереве объектов выбираем нужный виджет и тыкаем на него. Переходим во вкладку signals, выбираем нужный сигнал и пишем к нему имя функции-обработчика. Имя сигнала закрытия окна(уничтожения виджета окна) — destroy. Функцию обработчик назовём onExit.
Теперь добавим также сигнал для кнопки с надписью привет. Он должен срабатывать при нажатии(clicked) и вызывать функцию onBtnClicked.
Теперь делаем предпросмотр и сохраняем файл с интерфейсом:
Был создан файл Unsaved1.glade. Это и есть наш интерфейс. Теперь перейдем к коду
Написаник кода
Для универсальности написан на C, но тем не менее работает там, где есть биндинг к Gtk+ (gtkmm, gtkd, gtkrust и тд).
Файл main.c:
//Подключаем заголовочные файлы gtk
#include <gtk/gtk.h>
// Слот выхода из программы
G_MODULE_EXPORT void onExit(GtkWidget * w) {
gtk_main_quit();
}
// Слот нажатия на кнопку
G_MODULE_EXPORT void onBtnClicked(GtkButton * btn, gpointer data) {
//Просто меняем надпись на кнопке
gtk_button_set_label(GTK_BUTTON(btn), "Woof");
}
//Главная функция
int main(int argc, char * argv[]) {
//Инициализация gtk
gtk_init(&argc, &argv);
// Этот объект будет считывать данные из формы
// и создавать интерфейс на их основе
GtkBuilder * ui_builder;
// Если будут какие-либо ошибки, то они появятся здесь
GError * err = NULL;
// Инициализируем GtkBuilder
ui_builder = gtk_builder_new();
//Загрузка файла с UI в GtkBuilder
if(!gtk_builder_add_from_file(ui_builder, "/home/kimp/Unsaved 1.glade", &err)) {
g_critical ("Не вышло загрузить файл с UI : %s", err->message);
g_error_free (err);
}
//Теперь получаем виджет из Builder
// Помните мы указывали ID? Вот по нему мы и ищем нужный
// В данном случае ищем виджет окна
GtkWidget * window = GTK_WIDGET(gtk_builder_get_object(ui_builder, "main_window"));
//Таким же образом можно получить и другие виджеты
// но нам они не понадобятся
//Подключаем сигналы)
gtk_builder_connect_signals(ui_builder, NULL);
// Разрешаем отображение
gtk_widget_show_all(window);
//Пошла программа
gtk_main();
return 0;
}Как компилить? gcc main.c -o app `pkg-config --cflags --libs gtk+-3.0` -Wl,-export-dynamic
Пробный запуск
Ну вот наконец мы и подабрались к окончанию статьи. Надеюсь она была полезной для вас. Вот, что в итоге вышло: