Glade 3 でGUI開発

(2008.8.7) Gtk+/GNOME アプリケーションを開発するための、ユーザインターフェイスデザイナ Glade について。

(2017.6.6) 今どきのバージョンと gtk3 に合わせて更新。コンパイルエラーの除去など。

(2022.04) Glade は GTK4 に対応せず, もはや推奨されない。Glade Not Recommended. GNOME Builder も実装途上で、v42.0 時点で, GTK4 UIテンプレートを生成するが、UI Designer がただのXMLエディタ (笑う)。可能性がありそうなのは Juan Pablo Ugarte / Cambalache · GitLab

Gladeとは

GUIアプリケーションを作るとき、ウィンドウを開いたり部品 (コントロール) を配置するプログラムをいちいち手で書くのは現実的ではありません。余白などはプログラム上で数値を書いてもピンときませんし。

Gladeは、Gtk+/GNOMEアプリケーションのウィンドウなどをGUIでデザインできます。Gladeが生成するgladeファイルは、C/C++, Python など, gtkバインディングがあるプログラミング言語から扱えます。

[2017-05] 今は, .glade 形式ファイルは廃れ、GtkBuilder 形式のファイルを編集・出力します。

使い勝手は、だいぶ, 今ひとつです。ある型のwidgetの子にできる型が決まっている場合に、限定して候補を表示したりしてくれない。

Gladeのインストール

Fedora 9 Linux には Glade3 バージョン3.4.4のパッケージが用意されています。yumコマンドでインストールします。 

# yum install glade3

[2017-05] Fedora 25 Linux には、次のバージョンのパッケージがあります。最新版は 'glade3' ではなく, 'glade' パッケージです。

glade.x86_64 3.20.0-1.fc25
glade2.x86_64 2.12.2-23.fc25
glade3.x86_64 2:3.8.5-7.fc25

バージョン 3.20 では昔の .glade ファイルはもはや開けません。バージョン3.8で開いて修正し, コンバートしていけば何とかなるか？

(2017-05 ここまで.)

Note.

Glade3以外にも、Gazpacho, Glade2 でもgladeファイルを編集できます。Glade2はC言語のソースを出力することもできます。

やってみよう

簡単なGUIアプリを作ってみましょう。

gladeを開き、簡単なダイアログボックスを作ります。ボタンのプロパティで、コールバック関数の名前を設定してください。

Glade3 はGUIデザインを表現する GtkBuilder ファイルを出力するだけです。プログラムでそのファイルを読み込んで、ウィンドウなどを構築させます。

まずは, main 関数から。

<glade/glade.h> ヘッダや GladeXML クラス, glade_xml_new() 関数は廃れました。

C++
[RAW]
  1. #include <gtk/gtk.h>
  2. #include <stdlib.h>
  4. GtkBuilder* builder = nullptr;
  5. GtkWindow* main_window = nullptr;
  7. int main(int argc, char* argv[])
  8. {
  9. gtk_init(&argc, &argv);
  10. builder = gtk_builder_new();
  12. GError* error = nullptr;
  13. if ( !gtk_builder_add_from_file(builder, "glade-sample.ui", &error) ) {
  14. g_warning("Couldn't load builder file: %s", error->message);
  15. g_error_free(error);
  16. exit(1);
  17. }
  19. // リンク時に -rdynamic オプションが必要.
  20. gtk_builder_connect_signals( builder, nullptr );
  22. main_window = GTK_WINDOW(gtk_builder_get_object(builder, "window1"));
  23. gtk_widget_show_all( GTK_WIDGET(main_window) );
  25. gtk_main();
  27. return 0;
  28. }

順に説明しますと、

  1. gtk_builder_add_from_file() 関数にgladeファイルのファイル名を渡して, GtkBuilder XMLデータを読み込みます。ここでは手を抜いていますが, きちんとしたコードでは絶対パスで指定します。

    文字列データからXML木を構築するときは、glade_xml_new_from_buffer() を使います。XML木を構築した後で、ノードを追加したり削除したりはできないようです。

  2. それぞれのwidgetへの参照は, gtk_builder_get_object() で得られます。名前は, XMLファイルの, object要素のid属性値です。
  3. シグナルのコールバック関数への接続は, gtk_builder_connect_signals() で、いっぺんに、自動的にできます。リンカに必要なオプションを渡す必要があります。後述。

    コールバック関数の宣言は、plain Cスタイルで書かないといけません。プロトタイプ宣言を G_BEGIN_DECLS / G_END_DECLS で囲みます。

コールバック関数を定義する

各widgetに接続するコールバック関数を用意します。

メニューをクリックした場合, テキストエントリの値が変わった場合、ウィンドウが閉じられようとする場合、の3つを作ってみます。本題でもないので、だいぶざっくりした感じです。

C++
[RAW]
  1. #include <gtk/gtk.h>
  2. #include "callbacks.h"
  4. // とりあえず無効化
  5. #define _(message) (message)
  7. extern GtkBuilder* builder;
  8. extern GtkWindow* main_window;
  10. // GtkWidget::delete-event
  11. // @return FALSE で、ウィンドウの破壊処理続行
  12. // GtkMenuItem::activate
  13. gboolean on_file_quit_activate(GtkWidget* widget,
  14. /*GdkEvent* event,*/
  15. gpointer user_data)
  16. {
  17. GtkEntry* entry = GTK_ENTRY(gtk_builder_get_object(builder, "text_entry"));
  18. int len = gtk_entry_get_text_length(entry);
  20. // 未保存のデータがない場合, として
  21. if ( len == 0 ) {
  22. gtk_widget_destroy( GTK_WIDGET(main_window) );
  23. return FALSE; // 続行
  24. }
  26. // はい・いいえ, や OK/Cancelが適切でない、典型的な状況
  27. // => アクションは、OK / Yes ではなく, 動詞を用いる.
  28. // See
  29. // https://docs.oracle.com/cd/E19620-01/805-5814/sgmessages-10/
  30. // [1998年の文書]
  31. // http://uxmilk.jp/56527 [2016-12-19]
  32. // http://goodpatch.com/blog/dialog-design/ 2017-05-31. 焼き直し.
  33. unsigned int flags = GTK_DIALOG_MODAL |
  34. GTK_DIALOG_DESTROY_WITH_PARENT;
  35. // GTK_STOCK_SAVE などは廃れている.
  36. GtkDialog* dlg = GTK_DIALOG(gtk_dialog_new_with_buttons(
  37. "変更されています",
  38. main_window,
  39. (GtkDialogFlags) flags,
  40. _("_Cancel"), GTK_RESPONSE_CANCEL,
  41. _("_Discard"), GTK_RESPONSE_REJECT,
  42. _("_Save"), GTK_RESPONSE_ACCEPT,
  43. nullptr));
  44. // これがないと、一番左がデフォルトになる.
  45. gtk_dialog_set_default_response(dlg, GTK_RESPONSE_ACCEPT);
  47. gtk_widget_show_all(GTK_WIDGET(dlg));
  48. int result = gtk_dialog_run(dlg);
  49. switch (result)
  50. {
  51. case GTK_RESPONSE_ACCEPT: // 保存
  52. printf("TODO: impl. 'save'\n");
  53. gtk_widget_destroy(GTK_WIDGET(main_window));
  54. return FALSE;
  55. case GTK_RESPONSE_REJECT: // 破棄
  56. printf("破棄する.\n");
  57. gtk_widget_destroy(GTK_WIDGET(main_window));
  58. return FALSE;
  59. default:
  60. gtk_widget_destroy(GTK_WIDGET(dlg));
  61. return TRUE; // 単に閉じない
  62. }
  63. }

このサンプルでは、単に関数だけ作ります。

C++
[RAW]
  1. // GtkMenuItem::activate
  2. void on_do_something_activate(GtkMenuItem* menuitem, gpointer user_data)
  3. {
  4. printf("do_something!!!\n");
  5. }
  7. // GtkEditable::changed
  8. void on_text_entry_changed(GtkEditable* editable,
  9. gpointer user_data)
  10. {
  11. printf("changed.\n");
  12. }

ヘッダファイル. extern "C" しなければなりません。

C++
[RAW]
  1. #ifndef CALLBACKS_H
  2. #define CALLBACKS_H
  4. #include <glib.h>
  6. // extern "C"
  7. G_BEGIN_DECLS
  8. gboolean on_file_quit_activate(GtkWidget* widget,
  9. /*GdkEvent* event,*/
  10. gpointer user_data);
  12. void on_do_something_activate(GtkMenuItem* menuitem, gpointer user_data);
  14. void on_text_entry_changed(GtkEditable* editable,
  15. gpointer user_data);
  17. G_END_DECLS
  19. #endif // !CALLBACKS_H

コンパイル、実行

コンパイルのために、Makefile を簡単に作ります。ここも、本来は, automake / autoconf などを使うところです。 

CC = gcc
CFLAGS = -Wall -g

targets = glade-sample

all: $(targets)

# gcc だと, リンク時に -rdynamic を付けるでも可. (コンパイルオプションは不要)
glade-sample: callbacks.o main.o
	$(CC) `pkg-config --libs gtk+-3.0 gmodule-2.0` -o $@ $^

callbacks.o: callbacks.cc callbacks.h glade-sample.ui
	$(CC) -c $(CFLAGS) `pkg-config --cflags gtk+-3.0 gmodule-2.0` $<

main.o: main.cc glade-sample.ui
	$(CC) -c $(CFLAGS) `pkg-config --cflags gtk+-3.0 gmodule-2.0` $<

clean:
	rm -f $(targets) *.bak *~ *.o a.out

gccの場合は, リンク時に -rdynamic オプションを付ければ, gmodule-2.0 はなくても大丈夫。

C++の場合

プログラムを C++ で書く場合は次のようになります。C++では glade_xml_signal_autoconnect() が使えないので、一手間増えます。

次のサンプルコードは、gtkmm での派生クラスのサンプルも兼ねています。

C++
[RAW]
  1. #define GTKMM_DISABLE_DEPRECATED 1
  2. #include <libglademm/xml.h>
  3. #include <gtkmm.h>
  4. #include <iostream>
  5. #include <cassert>
  7. typedef Glib::RefPtr<Gnome::Glade::Xml> glade_ref_t;
  9. // 派生クラスのサンプル
  10. class MyDialog: public Gtk::Dialog
  11. {
  12. typedef Gtk::Dialog super;
  13. glade_ref_t glade_xml;
  14. public:
  15. MyDialog(BaseObjectType* cobject, const glade_ref_t& glade_xml_): // (1)
  16. super(cobject),
  17. glade_xml(glade_xml_)
  18. {
  19. Gtk::Widget* drawing = NULL;
  20. glade_xml->get_widget("drawingarea", drawing); // (2)
  21. assert(drawing);
  23. // (3)
  24. glade_xml->connect_clicked("button2",
  25. sigc::mem_fun(*this, &MyDialog::on_button_clicked));
  26. }
  28. void on_button_clicked() {
  29. std::cout << "clicked!\n";
  30. }
  31. };
  33. int main(int argc, char* argv[]) {
  34. Gtk::Main kit(argc, argv);
  36. glade_ref_t glade_xml;
  37. try {
  38. glade_xml = Gnome::Glade::Xml::create("glade_test.glade"); // (4)
  39. }
  40. catch (const Gnome::Glade::XmlError& ex) {
  41. std::cerr << ex.what() << std::endl;
  42. return 1;
  43. }
  45. MyDialog* dialog = NULL;
  46. glade_xml->get_widget_derived("window", dialog); // (5)
  47. assert(dialog);
  49. kit.run(*dialog);
  50. return 0;
  51. }
  1. gtkmmのクラスを派生させるときは、決まったコンストラクタを持たなければなりません。cobject はそのままスーパクラスへ渡します。
  2. widgetへの参照を得るのは、get_widget() メソッドです。第2引数に得たいクラスのポインタを渡します。dynamic_cast は不要です。
  3. シグナルの接続ですが、ボタンについては簡便なメソッドが用意されています。それ以外のときは、普通にgtkmmの流儀で接続します。
  4. gladeファイルを読み込むのは、create() クラスメソッドです。
  5. 派生クラスのインスタンスを得たいときは、get_widget() ではなく、get_widget_derived() を呼び出すようにします。

コンパイルは次のようにします。 

$ gcc -Wall sample02.cc `pkg-config --cflags --libs libglademm-2.4` -lstdc++

外部リンク

gtkmm - the C++ interface to GTK+
gtkmm の公式サイト。Documentation のセクションで提供される、Programming with gtkmm が優れている。
gtkmm 入門
さまざまなサンプルプログラムがある。