gladeで雛型を作成


起動

まず、gladeを起動します。
$ glade-2 &
RedHat 9では、gladeのプログラム名は「glade-2」となっていますが、 他のパッケージやソースからmakeした場合は、恐らく「glade」だと思います。
起動すると、こんなウインドウ(図1、図2、図3)が表示されます。
図1 gladeメインウインドウ
gladeメインウインドウ
図2 パレットウインドウ
パレットウインドウ
図3 プロパティウインドウ
プロパティウインドウ
新規プロジェクト作成

メインウインドウで、「Project」→「新規作成」を選択します。 そうすると、「Which type of project do you want to create?」と聞かれます(図4)。 ここでは、GTK+アプリケーションを作成したいので、「New GTK+ Project」を選択します。
図4 プロジェクトの選択
プロジェクトの選択
プロジェクト名の指定

次に、メインウインドウで、「Project」→「Options」を選択します。 そうすると、図4のようなウインドウが開きます。 ここでは、プロジェクト名の設定をします。 今回は、「simpledraw」というプロジェクト名にすることにしました。 そこで、基本設定のプロジェクトディレクトリの部分の最後の部分を 「simpledraw」と変更します。 残りの部分は、自動的に変更されました。 ここでは、この変更のみを行います。
図5 プロジェクトのオプション
プロジェクトのオプション
ウインドウの作成

では、早速ドローツールの作成をはじめようと思います。 まず、ウインドウの作成をします。パレットウインドウの ウインドウのアイコン(図6、赤い四角)をクリックします。 すると新しいウインドウが表示されます(図7)。
ウインドウには、メニューと描画領域を配置しようと思います。 そこで、垂直ボックスを作成します。パレットウインドウの 垂直ボックスのアイコン(図6、青い四角)をクリックします。 行数は2行を指定します。
そして、それぞれの垂直ボックスにメニューと描画領域を作成します。 まず、メニューを作成します。メニューのアイコン(図6、黄色い四角)をクリックします。 そして、垂直ボックスの上の部分をクリックします。
次に、描画領域を作成します。ツールバーの描画領域のアイコン(図6、オレンジの四角)をクリックします。 そして、垂直ボックスの下の部分をクリックします。
このように操作すると、図9のようなウインドウが作成されます。

図6 各ウィジェットの作成
各ウィジェットの作成
図7 新しいウインドウの作成
新しいウインドウの作成
図8 垂直ボックスを追加
垂直ボックスを追加
図9 メニューと描画領域を追加
メニュー、ツールバー、描画領域を追加
メニューの編集

メニューの編集を行います。以下のようなメニューにすることにしました。 既成アイテムを使用せずに新規にメニューを日本語で作成することに失敗したので、 今回は全て英語表記でメニューを作成しました。 (日本語で作成する方法をご存知の方はお知らせください) まず、先程作成した図9のメニューバーの部分をクリックします。そうすると、 プロパティのウインドウに「menubar1」のプロパティが表示されます。 そこで、「ウィジェット」タブの「メニューの編集」ボタンをクリックし、 メニューの編集のウインドウを起動します。 一つずつメニューを選択し、ラベル、名前、ハンドラ名を決めていきます。 最終的に、図10のようにメニューを編成しました。
図10 メニューの編集
メニューの編集
描画領域のサイズの設定

描画領域のサイズを設定します。設定しないと0×0のドローイング エリアが生成されてしまうようです。 先程作成した図9の描画領域の部分をクリックします。 そうすると、プロパティのウインドウに「drawingare1」のプロパティが表示されます。 そこで、「共通」タブをクリックし、幅と高さを設定します(図11)。 ここでは、幅:400、高さ:300としました。
図11 描画領域のサイズの設定
描画領域のサイズの設定
ソースコードの生成

このあたりで、一度ソースコードを生成してみることにしました。 メインウインドウから「Project」→「Build」を選択するとソースコード一式が 生成されます。 ソースコードは、プロジェクト名の指定の際に指定したプロジェクトの ディレクトリに生成されます。 以下のようなファイルが生成されます(生成コードのダウンロード)。 とりあえず、生成されたコードをコンパイルしてみました。 トップディレクトリにあるautogen.shを実行します。
$ ./autogen.sh

そうするとMakefileが生成されるので、makeします。
$ make

実行バイナリが src/simpledraw として生成されます。 実行するとほぼgladeで作成した外見とメニューを持つプログラムが起動します。 ただ、この時点では、どのメニューをクリックしても何も反応はありません。 また、閉じるボタン[x]をクリックするとウインドウは消えますが、 アプリケーションは完全に終了しません。 これらの操作に対するシグナルハンドラが実装されていないためです。

生成コードの確認

シグナルハンドラの実装の前に生成コードを確認しました。 ファイル名を見る限り、 プログラムに直接関係するファイルはsrc以下の 以下のファイルです。それぞれ以下の役割があるようです。 ここで、これらのファイルの役割を分かる範囲でメモしておきます。

callbacks.cはシグナルハンドラの雛型です。 ここに生成された空っぽの各シグナルハンドラを実装することでプログラムを 実現します。 gladeで新たなシグナルハンドラを生成すると、シグナルハンドラがファイルの最後に追加されます。 但し、削除してもシグナルハンドラは削除されないようです。 シグナルハンドラは開発者が実装する部分なので、開発者が作成したコードは消去しないように配慮されているものと思われます。

interface.cは各ウィジェットの構成を記述してあります。 メインウインドウに2つの垂直ボックスがあり、 それぞれにメニューと描画領域が配置されるようにコードが出力されます。 このinterface.cは編集禁止とコメントで書かれています。 このコードは、gladeがソースを生成するたびに上書きされるようです。

main.cはmain()関数が出力されます。コメントによると、このコードは編集して良いようです。 開発者は初期化処理を追加する必要があります。

support.cは各ウィジェットへのポインタをウィジェット名から検索するためのコードが格納されています。このコードは編集禁止と書かれています。 このファイルに生成されるlookup_widget()関数を用いるとウィジェットへのポインタが検索できます。
出力されたコードをざっと眺めておきます。 main.cでは、create_window1()でメインウィンドウを作成し、gtk_main()によりメインループに入ります。 このcreate_window1()がinterface.cの中に実装されています。 create_window1()では、垂直ボックス、メニュー、描画領域の配置に関する記述と、 各メニューに対応するシグナルハンドラに関する記述があります。 callback.cには、create_window1()内で関連づけられたシグナルハンドラの雛型が生成されています。
次はメニューのシグナルハンドラを実装します。

シグナルハンドラの実装 〜メニューの実装(その1)〜 へ
GTK/GDK/gladeによるプログラムメモ Topへ
Copyright (C) 2004 Kohta NAKASHIMA
All Rights Reserved.