GTK+3プログラミング：UIデザイナーGladeを使ってプログラミング

GTKってUIデザインにちょっとクセがあって部品のフォントを変えるにもちょっと迷うのですが、UIデザイナーGladeを使うことでそのストレスから開放できます。

今回はGladeのインストールから簡単な使い方、GTK側からの呼び出し方法について書きます。

Gladeのインストール

Ubuntu系Linuxは以下のコマンドでGladeのインストールができます。

$ sudo apt install glade
 

 

インストールが終わるとアプリケーションメニューにGladeが現れます。

 

Gladeの簡単な使い方

Gladeを起動するとこんな画面になります。

 

コンポーネントは「トップレベル」「コンテナー」「Control」「Display」の４カテゴリ。まずは「トップレベル」からウィンドウの種類を選択しましょう。

 

とりあえず、LabelとButtonを下記の通り配置しました。（詳しい使い方はいずれ…）

 

WindowコントロールのIDを設定しましょう。window1 としました（①→②）。また、Windowサイズは描画したサイズに設定されませんので「デフォルトの幅」と「デフォルトの高さ」に値を入れて設定します（③）。

 

作り終わったら右上に有る保存ボタンを押して保存しましょう。（hello.gladeというファイル名にしました）

GTK側のソースコード

生成したGladeファイルを呼び出して表示するソースコードはこちらです。

#include <gtk/gtk.h>

int main(int argc, char*argv[]){
  GtkBuilder *builder;
  GObject *window1;

  gtk_init(&argc,&argv);

  builder = gtk_builder_new();
  gtk_builder_add_from_file(builder, "hello.glade", NULL);
  gtk_builder_connect_signals(builder, NULL);
  window1 = gtk_builder_get_object(builder, "window1");
  gtk_widget_show_all(GTK_WIDGET(window1));
  g_signal_connect(window1, "destroy", G_CALLBACK(gtk_main_quit), NULL);
  gtk_main();

  return 0;
}
 

 

コンパイル・実行

コンパイルは以下のとおりです。

$ gcc grade.c `pkg-config --cflags --libs gtk+-3.0`
 

 

デフォルトで実行ファイル名がa.outという名前で生成されるので、以下のようにコマンドラインから実行してみましょう。

$ ./a.out
 

 

以下のウィンドウが起動したら成功です。

 - Gtk