2007年08月07日

[004] GUI部品を使った簡単な例〜前編〜

ボタンやテキスト入力などを使った簡単なプログラム例です。

下図のようなプログラムを作成します。
Sample.png

anjutaを起動したら「アプリケーション・ウィザード」ボタンを押します(下図)。
Screenshot037.png

「進む(F」をクリックします(下図)。
Screenshot038.png

「GTK+-2.0プロジェクト」を選択して「進む(F)」をクリックします(下図)。
Screenshot039.png

プロジェクト名を「WhatsYourName」として「進む(F)」をクリックします(下図)。
Screenshot040.png

何も入力しなくても大丈夫ですが、「あなたのお名前は」と入力して「進む(F)」をクリックします(下図)。
Screenshot041.png

そのまま「進む(F)」をクリックします(下図)。
Screenshot042.png

「適用(A」をクリックします(下図)。
Screenshot043.png

メニューから「プロジェクト(P)」→「アプリのGUI編集」を選びます(下図)。
Screenshot044.png

gladeが立ち上がったら、window1(下図赤丸(1))のところをクリックしてwindow1のプロパティを表示させます。次にwindow1のプロパティのサイズ変更のところをクリックして「はい」から「いいえ」に変更します(下図赤丸(2))。
Screenshot046.png

次にシグナルタブ(下図赤丸(1))をクリックしてから「シグナル」という項目の右端の「…」をクリックします(下図赤丸(2))。
Screenshot047.png

「シグナルの選択」ウインドウが表示されたら一番下の方にある「destroy」を選択して「Ok」ボタンを押します(下図)。
Screenshot048.png

「ハンドラ」の項目で右端の「▼」をクリックしてリストを表示し、一番最後の「gtk_main_quit」を選択します(下図)。
Screenshot049.png

「追加」をクリックします(下図)。
Screenshot050.png

「window1」をダブルクリックします(下図)。
Screenshot051.png

するとちっこいウインドウがでますが、これがwindow1です。下図のように見やすい位置に移動します。(先程「サイズ変更:」のプロパティを「いいえ」にした結果このようにウインドウのサイズが最小限になっています。)
Screenshot052.png

パレットウインドウのテーブル(下図赤丸のボタン)をクリックしてからカーソルを小さなウインドウの中に移動し、ふたたびクリックします。このときカーソルが「+」になる位置でクリックしてください。
Screenshot053.png

「新しいテーブル」ウインドウが現れたら、行数を「2」に変えて「Ok」ボタンを押します(下図)。
Screenshot054.png

小さなウインドウが少し大きくなり、中が6つのエリアに仕切られた状態に変わります。今度はパレットウインドウからラベル(下図赤丸)をクリックしてから小さなウインドウの6つのエリアのうち右上のエリアの中にカーソルを移動してクリックします。
Screenshot055.png

「ウィジット」タブ(下図赤丸(1))をクリックします。「ラベル」の項目が「label1」となっていますが、これを「あなたのお名前は?」に変更します。
Screenshot057.png

再びパレットウインドウでテキストエントリ(下図赤丸)をクリックし、カーソルをwindow1ウインドウの1行2列目のエリアに移動しクリックします。
Screenshot058.png

続けてパレットウインドウからボタン(下図赤丸)をクリックし、window1ウインドウの1行3列目のエリアにカーソルを移動してクリックします。
Screenshot059.png

ボタンの「ラベル」プロパティを「button1」から「Ok」に変更します(下図)。
Screenshot060.png

次にシグナルタブをクリックします(下図)。
Screenshot061.png

シグナルの項目の「…」の部分(下図赤丸(1))をクリックして「シグナルの選択」ウインドウを表示させます。「clicked」を選択します(下図赤丸(2))。
Screenshot062.png

「追加」ボタンをクリックします(下図)。
Screenshot063.png

パレットウインドウでラベルをクリックしてから、window1ウインドウの2行1列目のエリアにカーソルを移動してクリックします(下図)。
Screenshot064.png

「ラベル」プロパティが「label2」となっていますが、これをクリアします(下図)。
Screenshot066.png

「パッキング」タブをクリックし(下図(1))、「列の占有」のところを1から3に変えます(下図(2))。「保存」ボタン(下図(3))を押してから「ビルド」ボタン(下図(4))を押し、最後に「×」(下図(5))を押してgladeを終了します。

これでGUIのデザインの部分が出来ました。次回にボタンが押されたときの処理をプログラミングします。
posted by knyakki at 16:42| Comment(1) | TrackBack(0) | プログラミング | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
失礼いたします
Posted by エロ at 2008年01月25日 23:50
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/50588852

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。