ソフトウェア設計及び演習2015 - gtk::チュートリアル

gtk::チュートリアル

archive mode

第2回～第3回の演習で実際に（自分で手を動かして）学んでもらう内容についてです．

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

!!! 準備

* gtkの演習用にディレクトリを作成してください．
6<
8<
% (cd ~; mkdir -p csd/gtk)
>8
* csdは本講義用のディレクトリ（トップ）
* csd/gtkは入門gtk+用のディレクトリ
>9

!!! お手本コード置き場

教育用端末なら
6<
[/home/prog/kimura/csd/gtk/tutorial|file:///home/prog/kimura/csd/gtk/tutorial/]
>9
以下にあります．

!!! 演習内容

[教科書|http://wiki.cis.iwate-u.ac.jp/~wiki/csd/docs/GTK-book-all.pdf]第2章の内容をトレースし，中身を理解する．

!! [step1] 空ウィンドウ作成

* csd/gtk/image-viewer/1 を作り，
* image-viewer.c を（教科書ソース2-1どおりに）入力
* コンパイル，動作確認
6<
* コンパイルコマンドは
8<
gcc -o image-viewer image-viewer.c `pkg-config --cflags --libs gtk+-2.0`
>8
* 動作確認は
8<
./image-viewer
>8
* プログラムの終了はウィンドウの「×」ボタンか，プログラムを実行した端末ウィンドウで「Ctrl+C」
>9
* Makefile を作成してみる（参考：[[Makefileの書き方]]）
6<
* 解答例
8<
# $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)
>8
以下は中級者向け．（$< とか $@ とか .PHONY とか，分からないことは自分で調べてみよう！）
8<
# $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)
>8
>9

6<
((color red '''step1で理解すべき項目'''))

* GTK+の関数を利用する場合のインクルードファイル指定，コンパイル・リンク法
* GTK+の初期化法
* ウィンドウの作成，大きさ変更，表示
>9

!! [step2] 終了ボタンの追加

* csd/gtk/image-viewer/2 を作り，
* image-viewer.c を（教科書ソース2-2どおりに）入力
* Makefile作成
* step1との差分をよく確認する
//6<
//8<
//(cd ~/csd/gtk; meld 1 2)
//表示されたウィンドウでimage-viewer.cを選択（どちら側でもよい）
//>8
//>9
* コンパイル，実行
6<
8<
cd ~/csd/gtk/2
make
./image-viewer
>8
>9

6<
((color red '''step2で理解すべき項目'''))

* ボタンウィジェットの作成，配置
* '''コンテナ'''
* '''コールバック関数'''，'''イベント'''
>9

!! [step3] 画像の表示

* csd/gtk/image-viewer/3 を作り，
* image-viewer.c を（教科書ソース2-3どおりに）入力
* Makefile作成
* step2との差分をよく確認する
//6<
//8<
//(cd ~/csd/gtk; meld 2 3)
//>8
//>9
* コンパイル，実行
** 実行の際，コマンドラインで「表示したい画像ファイル名」を指示すること
6<
教科書と同じ画像は以下にあります．
8<
/home/prog/kimura/csd/gtk/tutorial/birds.png
>8
>9

6<
((color red '''step3で理解すべき項目'''))

* イメージウィジェットの作成，配置法
* '''パッキングボックス'''
>9

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

* csd/gtk/image-viewer/4 を作り，
* image-viewer.c を（教科書ソース2-4どおりに）入力
* Makefile作成
* step3との差分をよく確認する
//6<
//8<
//(cd ~/csd/gtk; meld 3 4)
//>8
//>9
* コンパイル，実行
** スクロールバーで画像が動くことを確認する
** ウィンドウを大きくするとスクロールバーはどうなる？

6<
((color red '''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を使ってみよう）
6<
8<
(cd ~/csd/gtk; meld 4 5)
>8
>9
* コンパイル，実行
** メニューの内容とプログラムに記載した事項をよく確認する
** Unityを使っている場合，初期設定は'''グローバルメニュー（画面上部がメニューバーで，そこにカーソルを移動させないとメニューが表示されない）'''なので注意しよう．

6<
((color red '''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との差分をよく確認する
6<
8<
(cd ~/csd/gtk; meld 5 6)
>8
>9
* コンパイル，実行

6<
((color red '''step6で理解すべき項目'''))

* ファイル選択ダイアログ（gtk_file_chooser_dialog_new）

Tag:

Attachment

New: append-tag

(download: 901 bytes, at 2015/03/05 10:01:30 <frozen> )
(download: 1665 bytes, at 2015/03/05 10:01:30 <frozen> )
(download: 2937 bytes, at 2015/03/05 10:01:30 <frozen> )
(download: 2959 bytes, at 2015/03/05 10:01:30 <frozen> )
(download: 3535 bytes, at 2015/03/05 10:01:30 <frozen> )
(download: 4496 bytes, at 2015/03/05 10:01:30 <frozen> )
(download: 4582 bytes, at 2015/03/05 10:01:30 <frozen> )
(download: 5013 bytes, at 2015/03/05 10:01:30 <frozen> )
(download: 5046 bytes, at 2015/03/05 10:01:30 <frozen> )
(download: 5115 bytes, at 2015/03/05 10:01:30 <frozen> )
(download: 5211 bytes, at 2015/03/05 10:01:31 <frozen> )
(download: 5384 bytes, at 2015/03/05 10:01:31 <frozen> )
(download: 5615 bytes, at 2015/03/05 10:01:31 <frozen> )
(download: 5628 bytes, at 2015/03/05 10:01:31 <frozen> )
(download: 5743 bytes, at 2015/03/05 10:01:31 <frozen> )
(download: 5788 bytes, at 2015/03/05 10:01:31 <frozen> )
(download: 5791 bytes, at 2015/03/05 10:01:31 <frozen> )
(download: 5787 bytes, at 2015/03/05 10:01:31 <frozen> )
(download: 5893 bytes, at 2015/03/05 10:01:31 <frozen> )
(download: 6235 bytes, at 2015/03/05 10:01:31 <frozen> )
(download: 6511 bytes, at 2015/03/05 10:01:31 <frozen> )
(download: 6522 bytes, at 2015/03/05 10:01:31 <frozen> )
(download: 6445 bytes, at 2015/03/05 10:01:31 <frozen> )
(download: 6713 bytes, at 2015/03/05 10:01:31 <frozen> )
(download: 6719 bytes, at 2015/03/05 10:01:31 <frozen> )
(download: 6785 bytes, at 2015/03/05 10:01:31 <frozen> )

Syntax Help

URL Link

[text|http://example.com//] http://example.com/to{text}

Page Link

[[PageName]] [[text|PageName]] >>{PageName} >>{PageName}{text}

Image or Attachment

<<{filename} <<{filename}{text}

Text Decoration

'' Italic '' ''' Bold ''' '''' Large-font '''' `` Typewriter `` `?` Preformatted `?` __ Underline __ == Strike == == DEL =={ INS } ((br)) line feed

Special Letter

((amp)) & ((bq)) ` ((lt)) < ((gt)) > ((lp)) ( ((rp)) ) ((lb)) [ ((rb)) ] ((ll)) (( ((rr)) ))

Headline

!!!! site-name !!! section-name !! subsection-name ! subsubsectino-name << section-name >> <<< subsection-name >>> <<<< subsubsection-name >>>> >> Centering and Large-font <<

Itemize

* item1 ** item1-1 ** item1-2

Enumerate

+ item1 + item2 ++ item2-1

Table

|| 1-1 | 1-2 | 1-3 || 2-1 | 2-2 | 2-3

Description

:item ::description

Quotation

6< quotation >9

Preformatted text

8< preformatted-text >8

Edit