Руководство GTK# для начинающих
Оглавление
1. Предисловие
Эта статья является руководством для начинающих GTK# программистов. Она поможет тем, кто никогда до этого не программировал графические пользовательские интрфейсы (далее GUI) при помощи GTK#. Программисты ранее знакомые с GTK+ API из опыта написания на других языках (C, C++, Perl, Python) так же найдут этот пассаж полезным, т.к. он объясняет основы процесса создания приложений на C# в среде Mono. Эта статья так же рассказывает об основах использования Glade и libglade как быстрого инструмента создания графического пользовательского интерфейса.
1.1 Что такое GTK#?
Сегодня gtk+ работает с любым X сервером, Direct Framebuffer’ом и производными в Microsoft Windows NT. Библиотека gtk+ известна от Linux, где она является базисом для построения виджетов рабочей среды GNOME. gtk+ включен практически во все дистрибутивы Linux, и стабильно работает под управлением Windows NT. (в 2000 работала нестабильно, если мне память не изменяет)
Портирование gtk+ на Mac OS X запланированно, но необходима заинтересованность других людей. Это зов к участию.
2. Установка
2.1 Скачивание/Установка
Linux, MacOSX, FreeBSD и другие: Проверьте наличие требуемых пакетов gtk-sharp, mono в вашем дистрибутиве.
aptitude install mono gtk-sharp2
для Debian-based дистрибутивов.
В SuSE Linux выберите нужные пакеты в YaST. Если их нет в дистрибутиве, тогда ищите здесь(http://www.mono-project.com/Downloads) и загружайте. Если на mono-project.com нет пакетов для Вашей платформы, тогда Вам придется скомпилировать из исходников 😉
Windows: программируйте Windows.Forms, не хрен лезть в GTK =) [примечание автора]
2.2 Внутри библиотек GTK#
Компоненты GTK#
GTK# состоит из следующих сборок, каждая соответствует подобной библиотеке:
gtk-sharp (http://www.mono-project.com/monodoc/N:Gtk)
Связи тулкита gtk+ 2.x для создания GUI
glib-sharp (http://www.mono-project.com/monodoc/N:Glib)
Связи тулкита glib 2.x, которые обеспечивают низкоуровневое библиотеки ядра для gtk+ (не-GUI)
pango-sharp (http://www.mono-project.com/monodoc/N:Pango)
Связи Pango, высокоуровневая библиотека компоновки и рендеринга международных текстов
atk-sharp (http://www.mono-project.com/monodoc/N:Atk)
связи к atk фреймворку
gdk-sharp (http://www.mono-project.com/monodoc/N:Gdk)
низкоуровневый инструментарий для «рисования», используемый gtk+
glade-sharp (http://www.mono-project.com/monodoc/N:Glade)
Glade# позволяет Вам загружать интерфейсы Glade в программу. Это наиболее простой путь создания GTK# GUI.
art-sharp (http://www.mono-project.com/monodoc/N:Art)
библиотека для работы с векторной графикой и отрисовки
rsvg-sharp (http://www.mono-project.com/monodoc/N:Rsvg)
gtk-dotnet (http://www.mono-project.com/monodoc/N:Gtk.DotNet)
интеграция пространства имен Gtk# с System.Drawing
gnomevfs-sharp (http://www.mono-project.com/monodoc/N:GnomeVfs)
связи файлов, их MIME типов, изображений к методу обращения приложений GNOME’а к файловой системе
vte-sharp (http://www.mono-project.com/monodoc/N:Vte)
связи к терминальному эмулятору VTE
gconf-sharp (http://www.mono-project.com/monodoc/N:GConf)
Связи к системе хранения конфигураций в GNOME
gtkhtml-sharp (http://www.mono-project.com/monodoc/T:Gtk.HTML)
Связи к легковесному HTML виджету
Другие компоненты не включены в основной дистрибутив GTK#, но заслуживают упоминания, потому что имеют отношение к GTK#: Gecko#, Gtksourceview#, Gsf#, Guile#, Gst# и dbus#.
2.3 GTK# или Glade#
Для быстрого ознакомления с Glade# Вы возможно захотете взглянуть на этот скринкаст(http://nat.org/demos/gtksharp.html) Ната Фридмана (Nat Friedman)(http://nat.org), в котором он создает простое графическое приложение всего за несколько минут.
3. Первое GTK# приложение
Шаг 1. Присядьте удобнее
Шаг 2. Создание папок и файлов
Для начала нам нужно создать новую директорию для маленького проекта. (Пользователи Windows: давайте не будем использовать пробелы в названии директории, чтобы избежать в дальнейшем головной боли).
Вернемся к делу. Откройте свой любимый редактор (MonoDevelop, vi, emacs, notepad и т.д.) и создайте новый пустой проект (если это возможно) или создайте новый пустой файл. Сохраните файл под именем «helloworld.cs».
Шаг 3. Формирование кода
Я надеюсь, что Вы уже знакомы с C#, и код написанный ниже не вызовет никаких проблем в понимании. Мы должны создать новый класс, использовать Gtk# и указать точку входа в нашу программу. Это будет выглядеть так:
Это должно выглядеть весьма знакомо для Вас. Только теперь мы можем воспользоваться компилятором. Сохраним исходный код, перейдем в консоль и построим проект:
Шаг 4. Добавление графического интерфейса GUI
Теперь скомпилируем исходный код так же как мы делали это раньше, и запустим программу
В итоге вы получите что-то вроде этого:
Не так уж и сложно, да?
Другая часть кода, которая могла Вас заинтересовать, это использование выражений «Application.Init()» и «Application.Run()». Если вы когда-либо ранее использовали System.Windows.Forms это аналогично использованию «Application.Run()» во многих случаях. Обычно, когда приложения заканчивает обработку любого кода в основном потоке, приложение останавливается. Команда «ShowAll()» не блокирует код и продолжает дальнейшее выполнение кода (вплоть до остановки). Команда «Application.Init()» говорит оболочке выполнения «слушать» сигналы поступающие от Gtk.Windows и в момент когда выполняется «Application.Run()» выполнение кода передается основному циклу сообщений. Это позволяет оставаться приложению запущенным до тех пор пока не будут закрыты все окна. Для большей информации смотрите информацию об объекте Application.
Шаг 5. Формирование окна
Возможно Вы захотите спросить себя «Как я смогу добавить новый виджет на окно, если оно может содержать только один виджет?» До этого мы говорили, что Window действительно может содержать в себе только один виджет, но виджет сам по себе может содержать в себе множество других виджетов. Некоторые из этих виджетов наследуются от контейнера Gtk.Box, а в некоторых случаях напрямую от контейнера. Контейнерный виджет Bin наследуется напрямую от виждета-контейнера, как и многие другие виджеты, но Bin может содержать в себе только один элемент управления.
Для того чтобы размещать большое количество виджетов в нашем окне, мы должны добавить на окно один из виджетов, который может содержать в себе другие виджеты. Существует множество виджетов, которые могут делать это, но мы затронем только некоторые простые: HBox(http://www.go-mono.com/docs/index.aspx?link=T%3aGtk.HBox), VBox(http://www.go-mono.com/docs/index.aspx?link=T%3aGtk.VBox) и возможно Table(http://www.go-mono.com/docs/index.aspx?link=T%3aGtk.Table).
Шаг 6. Добавление событий
Многие их этих событий могут быть обработаны стандартным обработчиком событий. Например:
public static void HandlerMethod(object obj, EventArgs args)
Пример обработки событий нажатия на кнопку:
public static void ButtonPressHandler(object obj, ButtonPressEventArgs args)
Например, для использования события Gdk.Event мы можем использовать такой код:
В примере выше вы можете увидеть как обнаружить было ли одиночное нажатие мышкой или это был двойной клик.
4. Первое Glade# приложение
Шаг 1. Что такое Glade#
4.1.1 Что такое glade файлы?
Шаг 2. Интеграция glade файлов с нашей программой
В намерениях нашего примера мы предпологаем, что GUI был сохранен в файл gui.glade, который содержит описание окна window1, кнопки button1 и метки label1.
Нам нужно будет создать новый указатель на Gtk# и Glade#, а затем создать новый класс и точку входа, с которой начинается наша программа.
4.2.1 Как скомпилировать?
Теперь мы должны скомпилировать исходный файл glade.cs указывая пространство имен для glade, которое находится в библиотеке glade-sharp. Команда компиляции следующая:
Если мы запускаем программу наш GUI может открыться, однако, нажимая на кнопки Вы не добьетесь эффекта, потому как мы не назначали событий виджету, определенному в gui.glade файле. Изучив следующую секцию Вы научитесь это делать.
Шаг 3. Как использовать Glade# в моем коде
4.4 Как обращаться к виджетам определенным в gui.glade
Для доступа к объектам, определенным в gui.glade файле, Вы должны знать имя объекта и его тип, и только тогда добавлять его в C# код. Делается это следующим образом (обратите внимание на оттрибут [Widget]):
Применяем это определение к нашему примеру как следует ниже в коде:
4.5 Как добавить событие
Для добавления событий Вам необходимо следовать примеру кода ниже. Вы также можете добавлять события из Glade.
Что означает GTK1;2;3?
Пользуйся гуглом хоть иногда.
. может все таки GTA?
/0 В гугле забанили?
Мне мамка тоже компьютер купила, правда это было давно.
GTK+ — это библиотека для рисования красивых и быстрых интерфейсов. 1, 2, 3 — это её мажорные версии (сейчас актуальны только 2 и 3). Объяснять, почему ты это видишь на сайте с темами?
«Страшных и громоздких» ты хотел сказать.
GTK+ — это библиотека для рисования красивых и быстрых интерфейсов
Введение в GTK
На ХабраХабре наконец-то появился новый блог, посвящённый GTK. Присоединяйтесь! 🙂
В сети бытуют страшные слухи об этом фреймворке, однако серией статей о нём на ХабраХабре я попытаюсь разрушить сложившиеся стереотипы.
GTK+ — это фреймворк для создания кроссплатформенного графического интерфейса пользователя (GUI). Наряду с Qt он является одной из двух наиболее популярных на сегодняшний день библиотек для X Window System.
Изначально эта библиотека была частью графического редактора GIMP, но позже стала независимой и приобрела популярность. GTK+ — это свободное ПО, распространяемое на условиях GNU LGPL и позволяющее создавать как свободное, так и проприетарное программное обеспечение.
Как это работает
GTK+ написан на языке Си, однако несмотря на это, является объектно-ориентированным. Также можно использовать обёртки для следующих языков: Ada, C, C++, C#, D, Erlang, Fortran, GOB, Genie, Haskell, FreeBASIC, Free Pascal, Java, JavaScript, Lua, OCaml, Perl, PHP, PureBasic, Python, R, Ruby, Smalltalk, Tcl, Vala.
Внутри GTK+ состоит из двух компонентов: GTK, который содержит набор виджетов (кнопка, метка и т.д.) и GDK, который занят выводом результата на экран.
Внешний вид приложений может меняться программистом и/или пользователем. По-умолчанию приложения выглядят нативно, т.е. так же, как и другие приложение в этой системе. Кроме того, начиная с версии 3.0, можно менять внешний вид элементов с помощью CSS.
Делаем «Hello, World»
Для начала за основу возьмём вот такую заготовку:
Пожалуйста, не используйте одинарные комментарии (//), если как и я решили писать на Си.
Давайте для начала создадим окно нашего приложения. В GTK существует несколько типов окошек, но нам понадобится обычный GtkWindow. Вставьте в нашу заготовку следующий код:
Прежде чем продолжить, несколько слов об упаковке.
В GTK+ виджеты принято размещать не по координатам, а упаковывать в специальные контейнеры. Окно, которое мы создали, также является контейнером, который может содержать только один виджет. Нам этого хватит, но в ином случае нам бы пришлось добавить специальный виджет-контейнер, который может представлять из себя сетку, а также горизонтальные или вертикальные поля. Но об этом я подробнее расскажу в следующем топике.
Пока остановимся на окне. Напомню, что окно — это контейнер, которому мы указали толщину границ в 50 пикселей. Что это значит?
Это значит, что мы создаём своего рода невидимую рамку вокруг этого контейнера и по этому ничего не сможем разместить в этой области.
Теперь рассмотрим сигналы.
Мы можем связать определённое событие, которое должно произойти с виджетом, со своей функцией.
Теперь создадим кнопку, по нажатию на которую будет появляться окошко с надписью «И тебе привет, %username%!».
Кнопка (GtkButton) — это тоже контейнер, который также может содержать один виджет. Чтобы не усложнять код созданием метки и помещением её в кнопку, сделаем вот так:
Выглядеть это будет так:
Теперь реализация функции welcome :
Результат после нажатия:
Вот так просто и быстро мы создали рабочую программу. В следующих топиках я расскажу про использование Glade (программа, чтобы рисовать виджеты без кода) и создание собственных виджетов.
Компиляция
Не забудьте установить пакет GTK для разработчика (кончается на «-dev»).
Что-нибудь ещё?
Да, пожалуй, приведу несколько ссылок:
www.gtkforums.com — англоязычный форум, посвящённый GTK
developer.gnome.org — информация для разработчиков под среду GNOME. Содержит много полезной информации о GTK, в том числе и на русском языке.
UPD: Полный код примера на PasteBin — pastebin.com/iPttWBne
HiDPI в Linux, в частности в KDE
О DPI вообще и HiDPI в частности
DPI (dots per inch) — это величина, говорящая, сколько пикселей экрана приходится физический сантиметр его площади. Если монитор работает в неродном разрешении, то речь идёт о виртуальных пикселях разрешения. С античных времён и до совсем недавно, величина в 96 DPI была стандартом — то есть, обычные мониторы если и отличались от неё, то настолько, что этим можно было пренебречь. 120 DPI когда-то была максимальной величиной, которую обычно тестировали.
Не удивительно, что за столько лет разработчики программ приняли эту величину за незыблемую постоянную. Вдруг пришли мониторы с 160-192 DPI и началось. Все программы, которые хоть какой-то размер в интерфейсе задавали в пикселях, получили наезжающие друг на друга панели, подписи, обрезанные до первой буквы, и кнопки, за успешное нажатие которых надо давать денежный приз.
Словом HiDPI называют ситуацию на мониторах с DPI>160. DPI операционной системы не обязательно равна DPI экрана. Напротив, DPI системы можно крутить для того, чтобы делать интерфейс крупнее-мельче. Мало того, системы различают DPI всего, DPI шрифтов и DPI, отдаваемую полноэкранным приложениям.
А как у других?
Макось выручило её авторитарное правление. Поскольку почти все программы создают свой интерфейс через одно и то же API, его просто поправили, и получилось сразу хорошо. Отдельные неистребимые косяки только подчёркивают, насколько в целом всё хорошо.
Android родился на системах с большим разбросом DPI, поэтому умел всё с самых пелёнок, и учебники для программистов это всё учитывали.
Windows позволяло крутить DPI шрифтов всегда. Вот только DPI графики от этого не менялась. Отдельные элементы меняли размер оттого, что привязаны к размеру шрифта, или экрана. Но размеры, заданные в пикселях, от этого не сдвигались. В Win 10, наконец, появилась нормальная поддержка HiDPI, но только для программ, написанных для Win 10. Для остальных написан костыль, делающий просто графическое увеличение окна программы с трансляцией положения кликов. Увеличение делает окно размытым, а трансляция работает криво. Хуже то, что это увеличение пробует запуститься для полноэкранных приложений тоже, поэтому, чтобы поиграть, его нужно выключить, а чтобы поработать — включить.
А в Linux?
А в Linux, как всегда, вакханалия. У нас есть два мажорных набора для GUI (Qt и GTK), каждый из которых относительно недавно пережил переписывание с нуля, поэтому до сих пор в ходу старая и новая версия. Плюс несколько наборов поменьше(EFL, wxWidgets). Плюс несколько языков, которые используют для этого свои средства, например Java. Плюс несколько древних библиотек, на которых уже никто не пишет, но нужный софт на них ещё бывает. (GTK 1, Motif) Даже если X сервер и оконный менеджер правильно обрабатывают DPI, не факт, что весь этот зоопарк воспримет эту информацию и будет работать нормально.
Можно много за что не любить Ubuntu с Unity, но одну вещь я должен сказать. Я не знаю, как в Unity настраивать HiDPI потому, что всё всегда работало само из коробки. Все остальные DE: Cinnamon, KDE, XFCE, тоже имеют соответствующий флажок. Этот флажок настраивает саму DE, приложения, написанные на её главной библиотеке(только новой версии) и пару флагов для Qt/GTK. А остальное всё побоку. В результате, например, в плеерах кнопка Play остаётся крошечной. И значки в трее маленькие, но не все. Годик за такой системой — и человек в Overwatch играет только за МакКряка, потому что у человека попиксельная меткость на мышке и он всех ненавидит.
Я буду рассказывать, как настроить KDE. Не так, как по инструкции, а так, чтобы работало всё. Deadbeef, Yakuake, Blender. Я проверял это, в основном, в Арче. В других дистрибутивах может быть, что что-то из того, что я опишу, уже сделано или сделано по-другому. Думайте головой или пишите в комментариях — разберёмся.
Настройка Иксов
Первым делом нужно проверить, а знают ли Иксы, что у нас HiDPI? Для этого нам нужна софтинка xdpyinfo — она есть в репе. Установите, если не установлено, родное разрешение монитора, (и перезапустите Иксы). Запускайте в консоли внутри иксов (то есть не по Ctrl-Alt-F*).
Видим три пары значений — разрешение экрана, реальные размеры экрана, и DPI (отдельно по вертикали и горизонтали) Если все три пары похожи на правду, то отвернитесь от монитора и воздайте хвалу высшей сущности по вашему выбору; ибо если же xdpyinfo возвращает ерунду и DPI=96, значит ваша высшая сущность посылает вам мытарства.
Если в предыдущем абзаце вы ничего не поняли, то можно просто отказаться от фирменных дров NVidia и использовать пока что Nouveau — там KMS из коробки. В Кубунте это делается через программу, управляющую драйверами.
/net_ne_vyrezali и перезагрузите ещё раз.
Всё равно не работает? Пропишем DPI в Иксы вручную. Создайте, если уже нет, файл /etc/X11/xorg.conf.d/90-monitor.conf и в него напишите:
А для фирменных дров Nvidia
Обратите внимание, что везде принудительное значение DPI я ставлю в 192, точнее в любое значение, кратное 96. Оно работает точнее, чем реальная DPI, потому что гладиолус. Тут работает парадокс дизайнера:
Сохраняем, перезапускаем Иксы и ликуем. Или пьём горькую и ждём, когда Wayland доделают.
Настройка в KDE
Итак, наконец, настраиваем HiDPI в KDE правильно. В меню → System Settings → Display and Monitor в самом внизу есть большая кнопка Scale Display. По её нажатию вылезает окно с единственным слайдером Scale. Теперь внимание! Если вам так и не удалось настроить DPI в иксах, закрывайте эту статью, ставьте значение ползунка по вкусу, и радуйтесь тому, что работает. А что не работает — смиритесь (Это обычно Хром, Скайп, QtCreator, Yakuake, GTK).
Если же DPI в Иксах у вас правильная — то не трогайте этот ползунок! В идеале, даже, не крутите его туда-сюда, потому что, кажется, он где-то что-то пишет при этом. Закрывайте это окно нафиг. Согласно статье в блоге создателя этого ползунка (соль в комментах) он переопределяет системную DPI и ставит ещё несколько переменных. Проблема в том, что это переопределение видят не все программы, и получается каша. Поэтому мы не будет трогать ползунок, а всё настроим вручную.
Вообще, на данном этапе, если DPI правильная, то всё должно быть уже достаточно крупно. Проходим в System Settings → Fonts. По умолчанию там стоит размер шрифта 11. Если для достижения гармонии вам хватит 10-14 — ставьте, приложения подтянутся. Если больше или меньше — имеет смысл попробовать подшаманить системную DPI как указано выше. Ниже стоит поле Force Font DPI. Можете его подкрутить, если хотите, но учтите, что не все приложения читают эту величину. Даже не так. Некоторые приложения читают эту величину не всеми своими частями. Так что если попытаться здесь исправить системную DPI в 96, будет каша. А вот поднять DPI 167 монитора до идеальных 192 можно.
Закрывайте окно Fonts. Вообще, сейчас самое время перезагрузить Иксы и посмотреть, что получилось. Должны работать и иметь удобный размер KDE, все его настройки и приложения. Панель плазмы, кстати, сама не вырастет. Но она векторная, и её всегда можно растянуть — кликните бутерброд слева и появятся кнопки. Так же размер в Долфине надо поставить вручную. Если же где-то ещё в KDE-приложениях кнопки и панели слишком мелкие, надо пошаманить размеры иконок в System Settings → Icons.
Настраиваем другие приложения
Chrome, Atom и другие
QtCreator, Yakuake, и другие приложения на Qt5
Не забудьте, что переменная QT_DEVICE_PIXEL_RATIO устарела. Если вы её где-то ставили, то надо убрать.
Приложения на Qt4
Приложения на GTK3
Здесь всё просто. Нужно установить в .xprofile две переменные:
GDK_SCALE=2 Командует GTK увеличить всё в 2 раза. Значение должно быть целым. GDK_DPI_SCALE регулирует увеличение шрифтов. Если после GDK_SCALE шрифты получились огромные, надо поставить GDK_DPI_SCALE=0.5
Приложения на GTK2
Здесь всё сложно. GTK2 вообще никак не умеет HiDPI. Но есть хак. Софтина под названием Oomox является генератором тем (скинов) для GTK. В том числе, с её помощью можно собрать такую тему под GTK2, которая будет имитировать HiDPI. Или найти такую тему готовую.
Приложения на Qt3, Gtk1, Motif
Здесь всё совсем сложно. Есть два возможных хака. Во-первых, можно воспользоваться способностью Kwin увеличивать весь экран. System Settings → Desktop Effects → Desktop Effects → Zoom. Средняя кнопка слева — это настройки, в том числе клавиши для включения и выключения. Второй способ — это запустить приложение в сервере удалённого рабочего стола и локально к нему подключиться. Я просто вставлю ссылку на скрипт, потому что настраивать это — вопрос отдельной статьи.
Программа для создания desktop-файлов
Немного о desktop-файлах
Вот пример desktop-файла для консольной игры nsnake:
Тут и так все понятно, но я все-таки прокомментировал пару позиций. Самое главное, что нужно прописать это название приложения (Name), путь до исполняемого файла (Exec) и путь до иконки (Icon). Если иконки нет и нет желания ее искать или создавать, то некоторые окружения рабочего стола установят иконку по умолчанию.
Краткое описание
Исходники приложения находятся здесь. Программа довольно простая. Выглядит она вот так:
Нужно заполнить необходимые поля, отметить нужные чекбоксы и нажать кнопку CREATE. Программа запросит подтверждение и после согласия оповестит об успешном или неуспешном создании файла.
В хидербаре находится кнопка, при нажатии на которую в файловом менеджере откроется папка, находящаяся по пути /.local/share/applications. Именно там программа сохраняет созданные файлы.
Как работает
Приложение написано на языке Vala с помощью среды разработки GNOME Builder. Устанавливал самую свежую версию среды (40.0) из репозитория Flathub. Оказалось, что визуальный дизайнер в этой версии еще багованнее, чем в предыдущей, поэтому интерфейс делал в Glade.
После того как созданы значки в полях ввода и к ним, также как и к другим кнопкам, привязаны необходимые действия, записываем в переменную directory_path путь до папки с desktop-файлами. Также на всякий случай надо проверить наличие этой папки перед запуском приложения и если папка по каким-то причинам отсутствует, то вывести специальное сообщение и деактивировать кнопку CREATE, так как в этом случае в ней нет необходимости.
При нажатии на кнопку CREATE вызывается метод on_create_file:
Он предназначен для проверки ввода имени файла и проверки возможных совпадений с именами уже существующих в папке файлов, а также для вывода запроса подтверждения на создание файла. Если все проверки пройдены и пользователь подтвердил создание файла, то вызывается метод create_desktop_file:
Чтобы просмотреть готовые файлы существует метод on_open_directory. Он срабатывает при нажатии на кнопку в хидербаре.
Для выбора исполняемого файла используется следующий код:
А для выбора иконки код сложнее, так как данный диалог, помимо фильтра, содержит функционал предварительного просмотра изображения:
Метод для вывода сообщений пользователю:
Чтобы проверить введено ли какое-либо значение в текстовое поле используется такой метод:
На этом все! Надеюсь, что пост был для Вас полезен.
Дополнительная ссылка на SourceForge. До встречи в следующих постах!
