「OSS開発ツール/GUIツールキット」の版間の差分
削除された内容 追加された内容
M 見出しを変更しました。 |
M 画像の大きさを変更しました。 |
||
290 行
=====ボタンを利用した例=====
ここでは、GtkButtonを利用した例を扱います。この例は公式のチュートリアル
GtkButtonは、gnomeのソフトウェアを利用するときに頻繁に利用されるボタンウィジェットです。
356 行
:垂直ボックス.png
3.GtkButtonをvbox1の2つの空白に収納する。(button1, button2)
:[[画像:ボタンとウィンドウ.png|200px]]
4.button1の'ラベル'をaaaとする。button2の'ラベル'をbbbとする。
:[[画像:ラベルの変更.png|200px]]
=====gtk-demoの例=====
365 行
$gtk-demo
のコマンドで利用することができます。ここでは、Dialog and Message Boxes という例を取り上げます。(demos/gtk-demo/dialog.c)
:[[画像:dialog_messege.png|200px]] <!-- スペルミスに注意。 -->
dialog.cはいくつかのウィジェットを利用して書かれています。多くはコンテナウィジェットであり、コンテナの使い方を見る上でよい題材です。
379 行
1.gtkwindowを導入する。
2.gtkframeを加える。影の種類を'Etched In'にする。'境界線の幅'を、5程度にしておく。
:[[画像:Gtk-demo_frame.png|200px]]
3.gtkvboxを収納する。
:[[画像:Frame_vbox.png|200px]]
4.gtkhboxをgtkvboxに収納し、gtkbuttonをgtkhboxに収納する。
:[[画像:Button_hbox.png|200px]]
5.gtkhseparatorをgtkvboxに収納する。
*図
6.gtkvboxにgtkhboxを収納する。列の数は2とする。
7.gtkhboxにgtkbuttonとgtktableを加える。
:[[画像:Button_table.png|200px]]
8.gtktableに、gtklabel, gtkentryを加える。
:[[画像:Labels_and_entries.png|200px]]
9.gtkbutton, gtklabelの'ラベル'を_Message Dialog などの内容に書き換える。詳しい内容は前述した。gtklabelでは、'下線付き'を'はい'にしておく。
:[[画像:Label_changed.png|200px]]
10. .gladeファイルとして保存し、先程のプログラムを使って表示する。
:[[画像:Gtk-demo_completed.png|200px]]
<!-- (注意 例ではgtkhseparatorを入れるのと、gtkframeのプロパティを変更するのを忘れたため、作成時の見ためが違ってしまっている。) -->
======Expanderの例======
次に、gtk-demoの'Expander'の例を扱います。GtkExpanderは閉じた状態と開いた状態を持つウィジェットです。
:[[画像:gtk_expander_closed.png|200px]]
:[[画像:gtk_expander_open.png|200px]]
GtkExpanderはコンテナウィジェットでもあり、GtkExpanderを開いた時に現れるウィジェットはGtkExpanderに収納されているウィジェットです。ここでは上の例を順に作成していきます。
414 行
$LC_ALL=en_US gtk-demo
とすると、ボタンの文章が英語に変わります。
:[[画像:gtk_expander_eng.png|200px]]
こちらはドイツ語の例です。
$LC_ALL=de gtk-demo
:[[画像:gtk_expander_de.png|200px]]
)
423 行
1:GtkDialogを開く。
:[[画像:expander_dialog.png|200px]]
2:GtkDialogにGtkVBoxを収納する。GtkVBoxの収納数は2とする。
:[[画像:expander_vbox.png|200px]]
3:GtkVBoxの上部に、GtkLabelを収納する。
:[[画像:expander_label.png|200px]]
4:GtkVBoxの下部にGtkExpanderを収納する。
:[[画像:expander_expander.png|200px]]
5:GtkExpanderにGtkLabelを収納する。
GtkExpanderを開いた状態です。
:[[画像:expander_expander_open.png|200px]]
GtkExpanderにGtkLabelを追加した状態です。
:[[画像:expander_expander_label.png|200px]]
6:2つのGtkLabelと、GtkExpanderの文章を書き換える。
:[[画像:expander_label_changed.png|200px]]
7:先程のプログラムを作成し.gladeファイルを表示する。
:[[画像:expander_completed_closed.png|200px]]
:[[画像:expander_completed_open.png|200px]]
====より進んだ例====
| |||