ソフトウェア設計及び演習2017

gtk::チュートリアル

第2回~第3回の演習で実際に(自分で手を動かして)学んでもらう内容についてです.

step1からstep6まで,もれなく,順番に進めていき,gtkプログラミングに関する簡単な仕組みを理解してください.

準備

  • gtkの演習用にディレクトリを作成してください.
% (cd ~; mkdir -p csd/gtk)
  • csdは本講義用のディレクトリ(トップ)
  • csd/gtkは入門gtk+用のディレクトリ

お手本コード置き場

教育用端末なら

以下にあります.

演習内容

教科書第2章の内容をトレースし,中身を理解する.

[step1] 空ウィンドウ作成

  • csd/gtk/image-viewer/1 を作り,
  • image-viewer.c を(教科書ソース2-1どおりに)入力
  • コンパイル,動作確認
  • コンパイルコマンドは
gcc -o image-viewer image-viewer.c `pkg-config --cflags --libs gtk+-2.0`
  • 動作確認は
./image-viewer
  • プログラムの終了はウィンドウの「×」ボタンか,プログラムを実行した端末ウィンドウで「Ctrl+C」
  • 解答例
# $Id:$
# -*- coding:utf-8; -*-

CC = gcc

TARGET = image-viewer

GTK2FLAG = `pkg-config gtk+-2.0 --cflags --libs`

$(TARGET): image-viewer.c
        $(CC) image-viewer.c $(GTK2FLAG) -o $(TARGET)

以下は中級者向け.($< とか $@ とか .PHONY とか,分からないことは自分で調べてみよう!)

# $Id:$
# -*- coding:utf-8; -*-

CC = gcc

TRGS = image-viewer

GTK2FLAG = `pkg-config gtk+-2.0 pango gdk-pixbuf-2.0 --cflags`
GTK2LIBS = `pkg-config gtk+-2.0 pango gdk-pixbuf-2.0 --libs`

CFLAGS = -g -Wall -DG_DISABLE_DEPRECATED -DGTK_DISABLE_DEPRECATED -DGDK_DISABLE_DEPRECATED -DGDK_PIXBUF_DISABLE_DEPRECATED -I .

all: $(TRGS)

.c.o:
        $(CC) -c $< $(GTK2FLAG) $(CFLAGS)

image-viewer: image-viewer.o
        $(CC) -o $@ $^ $(GTK2LIBS)

image-viewer.o: image-viewer.c

.PHONY: clean
clean:
        rm -f *~ *.o $(TRGS)
step1で理解すべき項目
  • GTK+の関数を利用する場合のインクルードファイル指定,コンパイル・リンク法
  • GTK+の初期化法
  • ウィンドウの作成,大きさ変更,表示

[step2] 終了ボタンの追加

  • csd/gtk/image-viewer/2 を作り,
  • image-viewer.c を(教科書ソース2-2どおりに)入力
  • Makefile作成
  • step1との差分をよく確認する
  • コンパイル,実行
cd ~/csd/gtk/2
make
./image-viewer
step2で理解すべき項目
  • ボタンウィジェットの作成,配置
  • コンテナ
  • コールバック関数イベント

[step3] 画像の表示

  • csd/gtk/image-viewer/3 を作り,
  • image-viewer.c を(教科書ソース2-3どおりに)入力
  • Makefile作成
  • step2との差分をよく確認する
  • コンパイル,実行
    • 実行の際,コマンドラインで「表示したい画像ファイル名」を指示すること

教科書と同じ画像は以下にあります.

/home/prog/kimura/csd/gtk/tutorial/birds.png
step3で理解すべき項目
  • イメージウィジェットの作成,配置法
  • パッキングボックス

[step4] スクロールバーの追加

  • csd/gtk/image-viewer/4 を作り,
  • image-viewer.c を(教科書ソース2-4どおりに)入力
  • Makefile作成
  • step3との差分をよく確認する
  • コンパイル,実行
    • スクロールバーで画像が動くことを確認する
    • ウィンドウを大きくするとスクロールバーはどうなる?
step4で理解すべき項目
  • スクロールバー付ウィジェット
  • スクロールバーの設定法

[step5] メニューバーの追加

  • 先に教科書の内容をよく読んでGtkUIManagerについて簡単に知っておいた方がベターです.その後,
  • csd/gtk/image-viewer/5 を作り,
  • image-viewer.c を(教科書ソース2-5どおりに)入力
    • ソースがかなり長くなるので注意!
    • 129行めを,image = gtk_image_new_from_file( argv[1] ); として,画像を表示してみるのもいいかもしれません.
  • Makefile作成
  • step4との差分をよく確認する(meldを使ってみよう)
(cd ~/csd/gtk/image-viewer; meld 4 5)
  • コンパイル,実行
    • メニューの内容とプログラムに記載した事項をよく確認する
    • Unityを使っている場合,初期設定はグローバルメニュー(画面上部がメニューバーで,そこにカーソルを移動させないとメニューが表示されない)なので注意しよう.
step5で理解すべき項目
  • メニュー作成の手順
  • メニュー構成を記述するXMLファイル
  • メニューアイテムを設定するGtkActionEntry
  • GtkUIManager
  • ショートカットキーを使う場合の設定法
  • メニューバーウィジェット
  • g_object_set_data(),およびg_object_get_data()
    • コールバック関数内でウィジェットを参照したい場合に必須!(ほぼ全ての班が利用すると思われます)
[2014/10/23]追記

ウィンドウ自体にメニューを表示したいよ!(グローバルメニューが嫌)という人は,

  • 環境変数 UBUNTU_MENUPROXY に 0 をセット

してみてください.( .bashrcに export UBUNTU_MENUPROXY=0 を追加して再ログイン)

オーバーレイスクロールバーが嫌だ!という人は,

  • gsettings set com.canonical.desktop.interface scrollbar-mode normal を実行してみてください.
  • gsettings reset com.canonical.desktop.interface scrollbar-mode で元に戻ります.

[step6] ファイル選択ダイアログの実装

  • csd/gtk/image-viewer/6 を作り,
  • image-viewer.c を(教科書ソース2-6どおりに)入力
  • Makefile作成
  • step5との差分をよく確認する
(cd ~/csd/gtk/image-viewer; meld 5 6)
  • コンパイル,実行
step6で理解すべき項目
  • ファイル選択ダイアログ(gtk_file_chooser_dialog_new)


最終更新日:2017/04/28 09:51:52