GTK

〜 glade の使い方 〜

概要
GUI を自分でも作ってみたい.どうしたらいいか.ひとつの方法 GTK を紹介する.
目次

What is GUI?

GUIとは,Graphical User Interfaceの略で[1],コンピュータグラフィックスとポインティングデバイス(マウスなど)を用いて,直感的な操作を提供する ユーザインターフェースである.視認性,操作性に優れ,直感的な操作が可能なため,広く普及し,現在では主流のインターフェイスになっている.

構成要素

デスクトップ,ウィンドウ,メニュー,アイコン,ボタン…

GUI を採用しているもの

Mac OS, Microsoft Windows, X Window System(Unix 系OS,Linux)…

参考になるページ

What is GTK?

GTKは,GIMP Toolkit の略で [2] ,GUI を作成するためのフリーなライブラリである.最新のバージョンはGTK+2.0である.GTK+ 1.2 から2.0 に,関数名が変わったので,ネットで調べる時には関数に対応するライブラリバージョンを注意してください.

今回はGTK のC 言語インタフェースについて紹介するが,他に,C++,Perl,Python,Ruby などのプログラミング言語に対応するGTK バインディングが存在する.

GTKのプログラムをはじめてみよう

Helloボタン

それでは,簡単なGTKプログラムを作ってみよう.`first.c` のソースをコンパイルして実行するとウィジット [3] (ウィンドウ,ボタン)がついたGUIプログラムができる.

gtk+2.0プログラムのコンパイル

ターミナル上で,次のコマンドを実行すると,保存されたソースファイルをコンパイルすることができる.

length() used on @lines (did you mean "scalar(@lines)"?) at /usr/bin/code2html line 1360.
length() used on @lines (did you mean "scalar(@lines)"?) at /usr/bin/code2html line 1370.
  gcc -Wall -g first.c -o first `pkg-config --cflags gtk+-2.0` `pkg-config --libs gtk+-2.0`

ここで,

  • pkg-config --cflags gtk+-2.0 :インクルード・ファイルのディレクトリの並びを出力する
  • pkg-config --libs gtk+-2.0 :ライブラリの並びとそれを検索するディレクトリの並びを出力する

first.c

length() used on @lines (did you mean "scalar(@lines)"?) at /usr/bin/code2html line 1360.
length() used on @lines (did you mean "scalar(@lines)"?) at /usr/bin/code2html line 1370.
  #include <gtk/gtk.h>
  void hello( GtkWidget *widget,
              gpointer   data )
  {
      printf ("Hello World\n");
  }
  int delete_event( GtkWidget *widget,
                    GdkEvent  *event,
                    gpointer   data )
  {
      printf ("delete event occurred\n");
      return 0;
  }
  void destroy( GtkWidget *widget,
                gpointer   data )
  {
    gtk_main_quit ();
  }
  int main( int   argc, char *argv[] )
  {
      GtkWidget *window;
      GtkWidget *button;
      gtk_init (&argc, &argv);
      /*ウィンドウを作る*/
      window = gtk_window_new (GTK_WINDOW_TOPLEVEL); // 新しいウィンドウを生成する
      gtk_container_set_border_width (GTK_CONTAINER (window), 10);
      // ウィンドウの幅
      gtk_widget_show (window); //ウィンドウを表示
      /*ボタンを作る*/
      button = gtk_button_new_with_label ("Hello"); //ボタンに''Hello''を書く
      gtk_container_add (GTK_CONTAINER (window), button); //ボタンをパックする
      gtk_widget_show (button); //ボタンを表示
      /*イベントに対応するコールバック関数*/
      g_signal_connect (G_OBJECT (window), "delete_event",
                         G_CALLBACK (delete_event), NULL); //終了用シグナル
      g_signal_connect (G_OBJECT (window), "destroy",
                         G_CALLBACK (destroy), NULL); //終了用シグナル
      g_signal_connect_swapped (G_OBJECT (button), "clicked",
                                 G_CALLBACK (gtk_widget_destroy),
                                 G_OBJECT (window));
                                 //ウィンドウを閉じるボタンをクリックした時
      g_signal_connect (G_OBJECT (button), "clicked",
                         G_CALLBACK (hello), NULL);
                         //''Hello''ボタンをクリックした時
      gtk_main ();
      return 0;
  }

signal とcallback

GTK はイベント駆動型ツールキットの一つで,イベントが発生されて,制御が適切な関数に受渡されるまでgtk main()関数でスリープ状態になる.制御の受渡しは\シグナル(signal)" の概念を使っている.マウスボタン押下などのイベントが発生すると,作用されたウィジットによって適切なシグナルが発生される.

シグナルを発信する関数

length() used on @lines (did you mean "scalar(@lines)"?) at /usr/bin/code2html line 1360.
length() used on @lines (did you mean "scalar(@lines)"?) at /usr/bin/code2html line 1370.
  gulong g_signal_connect( gpointer *object, //発信するウィジット
                           const gchar *name, //受信するシグナルの名前
  GCallback callback_func, //呼び出す関数
                           gpointer data ); //関数に渡す引数

コールバック関数

length() used on @lines (did you mean "scalar(@lines)"?) at /usr/bin/code2html line 1360.
length() used on @lines (did you mean "scalar(@lines)"?) at /usr/bin/code2html line 1370.
  void callback_func( GtkWidget *widget, //発信するウィジット
                      gpointer data ); //渡された引数

ここで,コールバック関数に渡す引数を注意してください.引数はgpointer 型のポイント変数であって,渡される引数は一個しかできない. 複数の引数を渡す必要がある場合は,構造体(struct) などのデータ構造を利用してください.

Event

X 上ではいろいろなイベントの組がある.コールバックもこれらのイベントにアタッチすることができる. 付録A は各イベントを示してる.前述したg signal connect() 関数はこれらのイベントのうちのどれか一つに対応したコールバック関数に接続するとき,引数(const gchar)name として上記のイベント名を指定する.

例として,ボタンを押すイベントは次のような関数を使う.

length() used on @lines (did you mean "scalar(@lines)"?) at /usr/bin/code2html line 1360.
length() used on @lines (did you mean "scalar(@lines)"?) at /usr/bin/code2html line 1370.
  g_signal_connect ( G_OBJECT (button), "button_press_event",
                      G_CALLBACK (button_press_callback), NULL );

ここの\G CALLBACK(button press callback)" は 型変換(cast) をしている.GTK の型変換システムは常にマクロ [4] を使って処理されており,指定したアイテムの型を変換する機能のテストと型変換そのものを行っている.

Widget の階層

ウィジットは階層構造なクラスを利用し,階層構造は付録Bを参照ください.各クラスは自分のメンバ関数とメンバ変数だけではなく,親クラスのメンバ変数と関数も使えます.資料を調べる際に気を付けてください.

いよいよGlade

GladeはGTK+のGUIの部分を構築するためのGUIのツールである.このツールを使って,各ウィジットを手軽に作成できて,イベントの定義も可能であり,多種類なプログラミング言語のソースコードを自動的に生成ができる.生成されたソースコードは別のエディタで修正する必要がある.

現在,GTK+ 2.0に対応するglade-2がよく使われている.より効率的にきれいなGUIを作れる.

備考 Gladeは確かに便利なツールであるが,Gladeしかできないことはなくて,Gladeから生成されたソースは全て自分でも書ける.

Gladeの起動

ターミナル上で,以下のコマンドを実行するとGlade-2が起動する.

length() used on @lines (did you mean "scalar(@lines)"?) at /usr/bin/code2html line 1360.
length() used on @lines (did you mean "scalar(@lines)"?) at /usr/bin/code2html line 1370.
 $ glade-2

正常に起動できればメインウィンドウといくつかのサブウィンドウが同時に表示される. 下述のウィンドウが表示されていない,あるいは消された場合は,\メインウィンドのメニュー/[画面]/" から選択することにより,再び表示することができる.

メインウィンドウ/プロジェクトウィンド

メインウィンドウはプロジェクトの一覧を表示するウィンドである.さらに,プロジェクトの新規,読込,保存と設定 もできて,ソースファイルの生成(ビルド)もできる.

パレットウィンドウ(Palette)

パレットには,GTK+のウィジェットがのっている.ここから使いたいウィジェットを選んで配置することができる.

プロパティウィンドウ(Properites)

プロパティウィンドウで,選択しているウィジェットのプロパティの表示と編集ができる.

ウィジットツリーウィンドウ(Widget tree)

ウィジットツリーウィンドウは各ウィジェットの物理的な相互位置関係を表示することができる.

プロジェクトの設定,保存とソースの出力

メインウィンドウのツールバーからオプションボタンを押すと下図のようなオプションウィンドウが出てくる.ここで,オブジェクト名,保存するフォルダとソースファイルの言語を設定できる.設定が終わったら,メインウィンドウでセーブして,ビルドしたら,設定された場所にソースを生成することができる.

このとき,プロジェクタを保存されたフォルダの中に以下の構造になっている.

length() used on @lines (did you mean "scalar(@lines)"?) at /usr/bin/code2html line 1360.
length() used on @lines (did you mean "scalar(@lines)"?) at /usr/bin/code2html line 1370.
  AUTHORS      autogen.sh*        project1.gladep
  ChangeLog    configure.in       project1.gladep.bak
  Makefile.am  po/                src/
  NEWS         project1.glade     stamp-h.in
  README       project1.glade.bak

とりあえず,コンパイルしてみましょう

プロジェクトをコンパイルする時は,まずautogen.sh を実行して,自分のOSに適用できるMakefileを生成する.そしてmakeコマンドを実行すると,ソースファイルがコンパイルされる.srcフォルダの中にコンパイルされたプロジェクト名と同じ名前の実行可能ファイルが生成され,このファイルを実行したら,作成したXのアプリケーションが起動される.

ソースコードの修正

ここまでできたプログラムによりウィジェットが表示できる.これから,各ウィジェットに対応する操作をプログラミングする必要がある.

プロジェクトをビルドした時,src ディレクトリの中のmain.c,interface.c とcallback.c が作られているが,interface.cはウィジェットの表示とシグナルの発生部分のソースであて,glade-2 によりこのソースは大体できているので,あまり編集しなくてもいい.callback.c はコールバック関数のソースである.関数の定義はできているが,関数の中身は空で,主に修正する部分である.

付録A:イベントとメンバ型

イベント(EVENT)

length() used on @lines (did you mean "scalar(@lines)"?) at /usr/bin/code2html line 1360.
length() used on @lines (did you mean "scalar(@lines)"?) at /usr/bin/code2html line 1370.
  event
  button press event
  button release event
  scroll event
  motion notify event
  delete event
  destroy event
  expose event
  key press event
  key release event
  enter notify event
  leave notify event
  congure event
  focus in event
  focus out event
  map event
  unmap event
  property notify event
  selection clear event
  selection request event
  selection notify event
  proximity in event
  proximity out event
  visibility notify event
  client event
  no expose event
  window state event

メンバ型

length() used on @lines (did you mean "scalar(@lines)"?) at /usr/bin/code2html line 1360.
length() used on @lines (did you mean "scalar(@lines)"?) at /usr/bin/code2html line 1370.
  GDK NOTHING
  GDK DELETE
  GDK DESTROY
  GDK EXPOSE
  GDK MOTION NOTIFY
  GDK BUTTON PRESS
  GDK 2BUTTON PRESS
  GDK 3BUTTON PRESS
  GDK BUTTON RELEASE
  GDK KEY PRESS
  GDK KEY RELEASE
  GDK ENTER NOTIFY
  GDK LEAVE NOTIFY
  GDK FOCUS CHANGE
  GDK CONFIGURE
  GDK MAP
  GDK UNMAP
  GDK PROPERTY NOTIFY
  GDK SELECTION CLEAR
  GDK SELECTION REQUEST
  GDK SELECTION NOTIFY
  GDK PROXIMITY IN
  GDK PROXIMITY OUT
  GDK DRAG ENTER
  GDK DRAG LEAVE
  GDK DRAG MOTION
  GDK DRAG STATUS
  GDK DROP START
  GDK DROP FINISHED
  GDK CLIENT EVENT
  GDK VISIBILITY NOTIFY
  GDK NO EXPOSE
  GDK SCROLL
  GDK WINDOW STATE
  GDK SETTING

付録B:ウィジットの階層

length() used on @lines (did you mean "scalar(@lines)"?) at /usr/bin/code2html line 1360.
length() used on @lines (did you mean "scalar(@lines)"?) at /usr/bin/code2html line 1370.
  GObject
  |
  GtkObject
  +GtkWidget
  | +GtkMisc
  | | +GtkLabel
  | | | `GtkAccelLabel
  | | +GtkArrow
  | | `GtkImage
  | +GtkContainer
  | | +GtkBin
  | | | +GtkAlignment
  | | | +GtkFrame
  | | | | `GtkAspectFrame
  | | | +GtkButton
  | | | | +GtkToggleButton
  | | | | | `GtkCheckButton
  | | | | | `GtkRadioButton
  | | | | `GtkOptionMenu
  | | | +GtkItem
  | | | | +GtkMenuItem
  | | | | +GtkCheckMenuItem
  | | | | | `GtkRadioMenuItem
  | | | | +GtkImageMenuItem
  | | | | +GtkSeparatorMenuItem
  | | | | `GtkTearoffMenuItem
  | | | +GtkWindow
  | | | | +GtkDialog
  | | | | | +GtkColorSelectionDialog
  | | | | | +GtkFileSelection
  | | | | | +GtkFontSelectionDialog
  | | | | | +GtkInputDialog
  | | | | | `GtkMessageDialog
  | | | | `GtkPlug
  | | | +GtkEventBox
  | | | +GtkHandleBox
  | | | +GtkScrolledWindow
  | | | `GtkViewport
  | | +GtkBox
  | | | +GtkButtonBox
  | | | | +GtkHButtonBox
  | | | | `GtkVButtonBox
  | | | +GtkVBox
  | | | | +GtkColorSelection
  | | | | +GtkFontSelection
  | | | | `GtkGammaCurve
  | | | `GtkHBox
  | | | +GtkCombo
  | | | `GtkStatusbar
  | | +GtkFixed
  | | +GtkPaned
  | | | +GtkHPaned
  | | | `GtkVPaned
  | | +GtkLayout
  | | +GtkMenuShell
  | | | +GtkMenuBar
  | | | `GtkMenu
  | | +GtkNotebook
  | | +GtkSocket
  | | +GtkTable
  | | +GtkTextView
  | | +GtkToolbar
  | | `GtkTreeView
  | +GtkCalendar
  | +GtkDrawingArea
  | | `GtkCurve
  | +GtkEditable
  | | +GtkEntry
  | | `GtkSpinButton
  | +GtkRuler
  | | +GtkHRuler
  | | `GtkVRuler
  | +GtkRange
  | | +GtkScale
  | | | +GtkHScale
  | | | `GtkVScale
  | | `GtkScrollbar
  | | +GtkHScrollbar
  | | `GtkVScrollbar
  | +GtkSeparator
  | | +GtkHSeparator
  | | `GtkVSeparator
  | +GtkInvisible
  | +GtkPreview
  | `GtkProgressBar
  +GtkAdjustment
  +GtkCellRenderer
  | +GtkCellRendererPixbuf
  | +GtkCellRendererText
  | +GtkCellRendererToggle
  +GtkItemFactory
  +GtkTooltips
  `GtkTreeViewColumn
  • [1]CUI:Character User Interface の略.キーボードを用いて入力を行う,文字によって出力を行うユーザインターフェースである.例:Shell, MS-DOS…
  • [2]GTK:元もGIMP の開発用に作られたものである.
  • [3]ウィジット(Widget):ボタンやスクロールバーのようなGUIの部品である.より狭い意味では X Window のXツールキットと呼ばれるフレームワークで使用するGUIパーツである.
  • [4]マクロ関数:C 言語では#de ̄ne により定義された関数である.

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2018-08-30 (木) 07:17:04 (75d)