●ウィンドウのリサイズ
- Tk はウィンドウのサイズに合わせてウィジェットの大きさを変更することができる
- ジオメトリマネージャーに用意されているオプションを設定するだけ
- Packer のリサイズ
- -expand => boolean
ウィンドウに余白が生じたとき、boolean が真であれば余白をウィジェットに割り当てる - 余白をウィジェットに割り当てただけでは、ウィジェットは大きくならない
- ウィジェットを引き伸ばすため -fill オプションを設定すること
- 簡単な使用例
リスト : Packer のリサイズ
use strict;
use warnings;
use Tkx;
my $top = Tkx::widget->new('.');
Tkx::option_add('*font', ['', 12]);
$top->new_button(-text => 'button 0')->g_pack(-expand => 1, -fill => 'both');
$top->new_button(-text => 'button 1')->g_pack(-expand => 1, -fill => 'both');
Tkx::MainLoop();
- Packer はウィンドウが小さくなるとウィジェットを圧縮する
- 本当にスペースが無くなるとウィジェットは表示されなくなる
- このとき、配置された逆順でウィジェットが削除される
- 最初に配置されたウィジェットが最後まで残る
- 大切なウィジェットは最初に配置した方がよいだろう
Packer によるボタンの配置
ウィンドウを拡大する
- Gridder のリサイズ
- マスの状態を設定する関数 grid_columnconfigure と grid_rowconfigure で行う
- 先頭に g_ を付けてメソッドとして呼び出してもよい
関数呼び出し Tkx::grid_columnconfigure($window, column_index, options); Tkx::grid_rowconfigure($window, row_index, options); メソッド呼び出し $window->g_grid_columnconfigure(column_index, options); $window->g_grid_rowconfigure(row_index, options);
| -minsize | 最小の幅/高さを数値で指定する |
| -weight | 余白を配分するときの割合を数値で指定する |
| -pad | 詰め物を数値で指定する |
- リサイズに対応するには、オプション weight に 1 以上の整数値を指定する
- 簡単な使用例
リスト : Gridder のリサイズ
use strict;
use warnings;
use Tkx;
my $top = Tkx::widget->new('.');
Tkx::option_add('*font', ['', 12]);
my @column_data = (0, 0, 1, 1);
my @row_data = (0, 1, 0, 1);
foreach my $i (0 .. 3) {
$top->new_button(-text => "button $i")
->g_grid(-column => $column_data[$i], -row => $row_data[$i], -sticky => 'nsew');
}
Tkx::MainLoop();
Gridder によるボタンの配置
- grid_columnconfigure は縦方向に配置されたマスのオプションを設定する
$top->g_grid_columnconfigure(0, -weight => 1);
button 0, 1 は横方向に伸びる
- 1 列目は -weight オプションを設定していないので、余白は割り当てられない
- 次のように 1 列目にも -weigth を設定する
$top->g_grid_columnconfigure(1, -weight => 2);
4 つのボタンが横方向に伸びる
- -weight オプションの設定が 2 なので 0 列の 2 倍の余白が割り当てられる
- つまり、ボタン button 2 と button 3 の方が大きく伸びる
- ウィジェットを縦方向に伸ばすには grid_rowconfigure を使う
$top->g_grid_rowconfigure(0, -weight => 1); $top->g_grid_rowconfigure(1, -weight => 2);
4 つのボタンが縦横方向に伸びる
- ウィンドウを大きくするとボタン button 3 がいちばん大きくなる
- キャンバスウィジェットのリサイズ
- キャンバスもウィジェットなので、pack() や grid() のオプションを指定することで、ウィンドウのリサイズに対応することができる
リスト : キャンバスウィジェットのリサイズ (1)
use strict;
use warnings;
use Tkx;
# メインウィンドウの設定
my $top = Tkx::widget->new('.');
# キャンバスの設定
my $c0 = $top->new_canvas(-bg => 'darkgreen', -width => 200, -height => 200);
$c0->create_rectangle(20, 20, 180, 180, -fill => 'red');
$c0->g_pack(-fill => 'both', -expand => 1);
Tkx::MainLoop();
- キャンバスウィジェットの背景は green で、その上には赤い四角形が描かれている
- ウィンドウの大きさを変えると、キャンバスウィジェットの大きさは変わりますが、図形の大きさは変わらない
- Packer はキャンバスウィジェットを引き伸ばすことはできても、その中の図形を操作することはできない
- ウィンドウのリサイズに対応するには、ユーザー側で図形を再描画する処理をプログラムする必要がある
キャンバスウィジェットを配置
ウィンドウを縮小
ウィンドウを拡大
- 図形の再描画
- 図形を再描画するには、ウィンドウがリサイズされたときに発生するイベント Configure を使う
- このイベントをバインドして、ウィンドウの大きさが変わったら図形を再描画する
- バインドはメインウィンドウに対して設定する
$top->g_bind('<Configure>', change_size)
- 簡単な使用例
リスト : キャンバスウィジェットのリサイズ (2)
use strict;
use warnings;
use Tkx;
# メインウィンドウの設定
my $top = Tkx::widget->new('.');
$top->g_wm_minsize(100, 100);
$top->g_wm_maxsize(400, 400);
# キャンバスの設定
my $c0 = $top->new_canvas(-bg => 'darkgreen', -width => 200, -height => 200);
$c0->g_pack(-fill => 'both', -expand => 1);
my $id = $c0->create_rectangle(20, 20, 180, 180, -fill => 'red');
# 図形の大きさを変更
sub change_size {
my $w = $c0->g_winfo_width;
my $h = $c0->g_winfo_height;
$c0->coords($id, 20, 20, $w - 20, $h - 20);
}
# バインドの設定
$top->g_bind("<Configure>", \&change_size);
Tkx::MainLoop();
- 図形の大きさは関数 change_size で行う
- winfo_width と winfo_height でキャンバスの大きさを求め、メソッド coords() で図形の位置を変更するだけ
ウィンドウを縮小
ウィンドウを拡大
●フレーム
- フレーム (frame) ウィジェットは、複数のウィジェットをひとまとめにする入れ物
- 単純なウィジェットだが、ジオメトリマネージャと組み合わせることで、複雑なウィジェットの配置にも簡単に対応することができる
- フレームウィジェットは new_frame で生成する
- 形状は -relief オプションで指定する
- flat (平坦)、raised (出っぱり)、sunken (引っ込み)、groove (溝)、ridge (土手) の 5 種類がある
- デフォルトは flat
- 簡単な使用例
リスト : フレームの表示
use strict;
use warnings;
use Tkx;
my $top = Tkx::widget->new('.');
foreach my $r ('raised', 'sunken', 'flat', 'groove', 'ridge') {
$top->new_frame(-width => 60, -height => 40, -relief => $r,
-borderwidth => 4, -bg => 'gray')->g_pack(-padx => 5, -pady => 5, -side=> 'left');
}
Tkx::MainLoop();
- borderwidth は枠の幅を指定する
- 形状が raised の場合、borderwidth の値を増やすと、フレームはより出っ張って見えるようになる
フレームの形状
- フレームにウィジェットを配置する方法はいままでと同じ
- もうひとつ、ジオメトリマネージャのオプション -in を使う方法がある
- 簡単な例題として、ボタンを 3 つ横に並べて、その下にボタンを縦に 3 つ配置するプログラムを示す
リスト : フレームにボタンを配置する
use strict;
use warnings;
use Tkx;
my $top = Tkx::widget->new('.');
Tkx::option_add('*font', ['', 12]);
# フレームの生成
my $f0 = $top->new_frame();
my $f1 = $top->new_frame();
# フレーム $f0 にボタンを配置
$f0->new_button(-text => "button 00")->g_pack(-side => 'left');
$f0->new_button(-text => "button 01")->g_pack(-side => 'left');
$f0->new_button(-text => "button 02")->g_pack(-side => 'left');
# フレーム $f1 にボタンを配置
$top->new_button(-text => "button 10")->g_pack(-in => $f1, -fill => 'both');
$top->new_button(-text => "button 20")->g_pack(-in => $f1, -fill => 'both');
$top->new_button(-text => "button 30")->g_pack(-in => $f1, -fill => 'both');
# フレームを配置する
$f0->g_pack();
$f1->g_pack(-fill => 'both');
Tkx::MainLoop();
- フレーム $f0 には今までと同じ方法でボタンを配置する
- このボタンを g_pack するとフレーム $f0 に配置される
- この段階ではフレームにボタンを詰め込んだだけなので、まだウィンドウには表示されない
- フレーム $f1 には、-in オプションを使ってボタンを配置する
- この場合、ボタンはメインウィンドウ $top から生成する
- g_pack の -in オプションによりフレーム $f1 に配置される
- なお、-in オプションは g_grid でも使用することができる
- 最後にフレーム $f0 と $f1 を g_pack で配置する
- これでボタンが表示される
- それから、縦に配置したボタンを引き伸ばすため、fill オプションを指定する
- この場合、ボタンをフレームに配置するときと、フレームをウィンドウに配置するときの 2 か所で指定する必要がある
- 片方だけではボタンを引き伸ばすことはできない
フレームを使ってボタンを配置する
- 重なり順の変更
- ウィジェットには上下の順番があり、Tk の場合はあとから作成したウィジェットが上になる
- ウィジェットの重なり順を変更することで、ウィジェットをフレームの下に隠すことができる
- ウィジェットの重なり順はメソッド g_lower と g_raise で変更する
$widget->g_raise(widget1); $widget->g_lower(widget1);
- 簡単な使用例
リスト : フレームの下にボタンを隠す
use strict;
use warnings;
use Tkx;
my @button = ();
# ボタンを隠す
sub hide {
my $i = shift;
$button[$i]->g_lower;
}
# メインウィンドウ
my $top = Tkx::widget->new('.');
Tkx::option_add('*font', ['', 12]);
# フレーム
my $frame = $top->new_frame();
# ボタン
$top->new_button(-text => 'Show', -command => sub { $frame->g_lower; })
->g_pack(-in => $frame, -fill => 'x');
foreach my $i (1 .. 4) {
$button[$i] = $top->new_button(-text => "button $i", -command => [\&hide, $i]);
$button[$i]->g_pack(-in => $frame, -fill => 'x');
}
$frame->g_pack(-fill => 'x');
Tkx::MainLoop();
- 5 つのボタンをフレームに配置する
- これらのボタンは g_pack の -in オプションで配置することに注意
- ボタンをフレームから生成すると、フレームとボタンの重なり順を変更できなくなる
- button 1 - 4 を押すと、そのボタンがフレームの下に隠れる
- ボタンを隠す処理は関数 hide で生成した関数で行う
- ボタンウィジェットのオブジェクトは配列 @button に格納されている
- 押したのボタンの重なり順を lower でいちばん下にすれば、フレームの下に隠すことができる
- いちばん上のボタン Show を押すと、隠れたボタンを表に出す
- この場合、フレームウィジェットの重なり順をいちばん下に変更した方が簡単
button 1 と 3 を押した状態
Show を押した状態
●ラベルフレーム
- ラベルフレームウィジェットはフレームウィジェットとラベルウィジェットを合わせたもの
- 見た目は枠付きのフレームで、枠の上に見出しラベルが表示される
- ラベルフレームウィジェットは new_labelframe で生成する
- 主なオプションを以下に示す
- -text, 見出しラベルに表示されるテキストを指定する
- -relief, 形状 (flat, raised, sunken, groove, ridge) を指定する
- -labelanchor, 見出しラベルの位置 (nw, n, ne, e, se, s, sw, w) を指定する
- -labelwidget, 見出しラベルのかわりにウィジェットを指定する
- -labelanchor のデフォルトは nw (左上)
- -relief のデフォルトは groove
- 簡単な使用例 (1)
リスト : ラベルフレーム (1)
use strict;
use warnings;
use Tkx;
my $top = Tkx::widget->new('.');
foreach my $r ('nw', 'n', 'ne', 'sw', 's', 'se') {
my $f = $top->new_labelframe(-text => 'label', -width => 80, -height => 60, -labelanchor => $r);
$f->g_pack(-padx => 5, -pady => 5, -side => 'left');
}
Tkx::MainLoop();
- -lableanchor を nw, n, ne, sw, s, se に変えてラベルフレームを表示する
- g_pack のオプション -padx と -pady は、ウィジェットの周囲に設定する余白の長さを指定する
- これが大きいとウィジェットの間隔が開くことになる
ラベルフレーム(1)
- 簡単な使用例 (2)
リスト : ラベルフレーム (2)
use strict;
use warnings;
use Tkx;
my $top = Tkx::widget->new('.');
foreach my $r ('raised', 'sunken', 'flat', 'groove', 'ridge') {
$top->new_labelframe(-text => 'label', -width => 80, -height => 60, -relief => $r,
-borderwidth => 4, -bg => 'gray')->g_pack(-padx => 5, -pady => 5, -side=> 'left');
}
Tkx::MainLoop();
- 枠の幅はフレームウィジェットと同様にオプション -borderwidth で変更する
- -borderwidth の値を増やすと、フレームはより出っ張って見えるようになる
ラベルフレーム(2)
- ラベルフレームにウィジェットを配置する
リスト : ラベルフレーム (3)
use strict;
use warnings;
use Tkx;
my $top = Tkx::widget->new('.');
my $v = 0;
my $f0 = $top->new_labelframe(-text => 'Group1');
my $f1 = $top->new_labelframe(-text => 'Group2');
foreach my $x (0, 1, 2) {
$f0->new_radiobutton(-text => "radiobutton $x", -value => $x, -variable => \$v)->g_pack;
$f1->new_checkbutton(-text => "checkbutton $x")->g_pack;
}
$f0->g_pack(-padx => 5, -pady => 5, -side => 'left');
$f1->g_pack(-padx => 5, -pady => 5, -side => 'left');
Tkx::MainLoop();
- ラベルフレーム $f0 にはラジオボタンを 3 個、$f1 にはチェックボタンを 3 個配置する
- ウィジェットの配置方法はフレームウィジェットと同じ
ラベルフレーム(3)
- labelwidget オプションの使用例
リスト : ラベルフレーム (4)
use strict;
use warnings;
use Tkx;
my $top = Tkx::widget->new('.');
Tkx::option_add('*font', ['', 12]);
# 値を格納するオブジェクト
my $flag = 0;
my $v = 0;
# ラジオボタンを格納
my @buttons = ();
# ボタンの状態を変更
sub change_state {
my $new_state;
if ($flag) {
$new_state = 'normal';
} else {
$new_state = 'disabled';
}
foreach $b (@buttons) {
$b->configure(-state => $new_state);
}
}
# チェックボタン
my $cb = $top->new_checkbutton(-text => 'use button', -variable => \$flag, -command => \&change_state);
# ラベルフレーム
my $f = $top->new_labelframe(-labelwidget => $cb);
# ラジオボタン
foreach my $x (0, 1, 2) {
my $b = $f->new_radiobutton(-text => "radiobutton $x",
-value => $x, -variable => \$v, -state => 'disabled');
$b->g_pack;
$buttons[$x] = $b;
}
# フレームの配置
$f->g_pack(-padx => 5, -pady => 5);
Tkx::MainLoop();
- 見出しラベルの部分をチェックボタンにして、ラジオボタンの状態を制御する
- ラジオボタンを使用するときはチェックボタンをオンにする
- チェックボタンがオフのときはラジオボタンを使うことはできない
- 最初にチェックボタン $cb を生成する
- メソッド new_checkbutton は $top から呼び出す
- そして、ラベルフレームを生成する new_labelframe の -labelwidget に $cb を指定する
- $cb は g_pack で配置する必要はない
- ラベルフレーム $f を g_pack で配置するとき、ラベルフレームといっしょにチェックボタンも表示される
- チェックボタンの状態は $flag に格納する
- $flag の値は 0 に初期化しているので、チェックボタンはオフの状態する
- これに合わせて、ラジオボタンはすべて disabled の状態に初期化する
- ボタンの状態は関数 change_state で変更する
- change_state は flag の値によってラジオボタンの状態を変更する
- あとは、new_checkbutton の -command に \&change_state をセットするだけ
disabled 
normal
●ペインドウィンドウ
- ペインドウィンドウ (panedwindow) は、一つのウィンドウを複数の領域に分割する場合に便利なウィジェット
- 分割した領域を pane (ペイン) といい、ペインとペインの間には sash (サッシュ、サッシ) と呼ばれる線が入る
- この線をマウスでドラッグすることで、ペインの大きさを変更することができる
- pane は「窓ガラス」、sash は「窓わく」という意味で、サッシの動作は窓の開閉によく似ている
- ペインドウィンドウは、ペイン・ウィンドウとかペイン式 (型) ウィンドウと呼ばれることもある
- ペインドウィンドウは、いろいろなアプリケーションでよく使われている形式
- 一つの画面を複数の領域に分割して内容を表示する方式を「タイリング」という
- これに対し、現在のウィンドウシステムは複数のウィンドウを重ねて表示する
- この方式を「オーバーラッピング」という
- 昔はタイリング方式を採用したシステム (たとえば Lisp マシンなど) もあったようだ
- ペインドウィンドウはアプリケーションの画面で「タイリング」を実現するウィジェットと考えることができる
- ペインドウインドウは new_panedwindow で生成する
- 主なオプションを以下に示す
- -orient => 方向
ペインを配置する方向 (horizontal : 水平, vertical : 垂直) を指定する - -sashwidth => 数値
サッシの幅を指定する - -sashrelief => 形状
サッシの形状 (flat, raised, sunken, groove, ridge) を指定する - -showhandle => boolean
真 : サッシにハンドルを付ける。偽 : サッシにハンドルを付けない。 - -handlesize => 数値
ハンドルの大きさを指定する - -orient のデフォルト値は horizontal で、ウィンドウは左右に分割され、サッシは縦線になる
- vertical を指定するとウィンドウは上下に分割され、サッシは横線になる
- サッシの形状は -relief で指定し、デフォルトは ridge になる
- -showhandle を真に設定すると、サッシに四角形のハンドルを付けることができる
- ハンドルの大きさは -handlesize で指定する
- ウィジェットの配置
- ペインにウィジェットを配置するにはメソッド add() を使う
- n 個のウィジェットを配置すると、ウィンドウは n 分割される
- -orient が horizontal の場合、ウィジェットは左側から順番に配置される
- vertical の場合は上から順番に配置される
- 簡単な使用例 (1)
リスト：ペインドウィンドウ (1)
use strict;
use warnings;
use Tkx;
my $top = Tkx::widget->new('.');
Tkx::option_add('*font', ['', 12]);
# ペインドウィンドウの生成
my $pw = $top->new_panedwindow(-sashwidth => 4);
$pw->g_pack(-expand => 1, -fill => 'both');
# ラベルの生成
my $a = $pw->new_label(-text => "panedwindow\ntest1", -bg => 'white');
my $b = $pw->new_label(-text => "panedwindow\ntest2", -bg => 'yellow');
# ペインドウィンドウに追加
$pw->add($a);
$pw->add($b);
Tkx::MainLoop();
- 最初に new_panedwindow でペインドウィンドウ $pw を生成する
- オプション -expand => 1, -fill = 'both' を指定すると、ウィンドウのリサイズに対応することができる
- $pw に配置するラベルを生成する
- ラベルは $pw の子ウィジェットになるので、new_label は $pw から呼び出す
- 最後に、メソッド add でラベルをペインドウィンドウに配置する
1. 
2.
3.
- 実行した直後の状態
- サッシを右へ移動した状態
- サッシを左へ移動した状態
- 簡単な使用例 (2)
リスト : ペインドウィンドウ (2)
use strict;
use warnings;
use Tkx;
my $top = Tkx::widget->new('.');
Tkx::option_add('*font', ['', 12]);
# ペインドウィンドウの生成
my $pw = $top->new_panedwindow(-orient => 'vertical', -sashwidth => 4);
$pw->g_pack(-expand => 1, -fill => 'both');
# ラベルの生成
my $a = $pw->new_label(-text => "panedwindow\ntest1", -bg => 'white');
my $b = $pw->new_label(-text => "panedwindow\ntest2", -bg => 'yellow');
my $c = $pw->new_label(-text => "panedwindow\ntest3", -bg => 'cyan');
# ペインドウィンドウに追加
$pw->add($a);
$pw->add($b);
$pw->add($c);
Tkx::MainLoop();
- ウィンドウを縦方向に分割する場合は -orient に vertical を指定する
1. 
2. 
3. 
- 実行した直後の状態
- 上のサッシを上へ移動した状態
- 下のサッシを下へ移動した状態
- 簡単な使用例 (3)
リスト : ペインドウィンドウ (3)
use strict;
use warnings;
use Tkx;
my $top = Tkx::widget->new('.');
Tkx::option_add('*font', ['', 12]);
my @la = ();
my @var = (1, 1, 1, 1);
# ペインドウィンドウの生成
my $pw = $top->new_panedwindow(-orient => 'vertical', -sashwidth => 4);
$pw->g_pack(-expand => 1, -fill => 'both');
# フレーム
my $f = $pw->new_frame;
$pw->add($f);
# ラベルの表示切り替え
sub change_label {
my $n = shift;
if ($var[$n]) {
$pw->add($la[$n]);
} else {
$pw->forget($la[$n]);
}
}
# チェックボタン
foreach my $x (0, 1, 2, 3) {
$f->new_checkbutton(-text => "display label $x",
-variable => \$var[$x],
-command => [\&change_label, $x])->g_pack;
}
# ラベル
my @colors = ('white', 'yellow', 'cyan', 'pink');
foreach my $x (0, 1, 2, 3) {
my $a = $pw->new_label(-text => "panedwindow\ntest$x", -bg => $colors[$x]);
$la[$x] = $a;
$pw->add($a);
}
Tkx::MainLoop();
- ペインに配置できるウィジェットは一つだけ
- 複数のウィジェットを配置する場合はフレームウィジェットを使う
- チェックボタンはフレームにまとめてペインウィンドウに配置
- フレームはペインウィンドウの子ウィジェットになるので $pw->new_frame; とする
- あとはフレーム $f にチェックボタンを配置する
- チェックボタンは配列 @la に、チェックボタンの状態は配列 @var に格納する
- リストの要素のオブジェクトは 1 に初期化しているので、最初はすべてオンの状態
- 関数 change_label はチェックボタンの状態を調べる
- オンのときはペインドウィンドウにラベルを配置し、オフのときはペインドウィンドウからラベルを削除する
- メソッド forget を使うとペインウィンドウからウィジェットを削除することができる
- 削除したウィジェットはメソッド add で再度ペインウィンドウに配置することができる
- 最後に、ラベルを 4 つ作成して、フレームとラベルをペインウィンドウに配置する
1. 
2. 
3. 
- 実行した直後の状態
- ラベル 0 と 1 を削除した状態
- 2 の後にラベル 1 を表示した状態
- add はウィジェットを上から順番に追加していくだけ
- 削除したラベル 1 を add で再度配置すると一番下に表示される
- 簡単な使用例 (4)
リスト：ペインドウィンドウ (4)
use strict;
use warnings;
use Tkx;
my $top = Tkx::widget->new('.');
Tkx::option_add('*font', ['', 12]);
# ペインドウィンドウ 1
my $pw1 = $top->new_panedwindow;
$pw1->g_pack(-expand => 1, -fill => 'both');
# ラベル 1
my $a =$pw1-> new_label(-text => "panedwindow\ntest1", -bg => 'yellow');
# ペインドウィンドウ 2
my $pw2 = $top->new_panedwindow(-orient => 'vertical');
# ラベル 2, 3
my $b = $pw2->new_label(-text => "panedwindow\ntest2", -bg => 'cyan');
my $c = $pw2->new_label(-text => "panedwindow\ntest3", -bg => 'pink');
# ペインドウィンドウに配置
$pw1->add($a);
$pw1->add($pw2);
$pw2->add($b);
$pw2->add($c);
Tkx::MainLoop();
- ペインドウィンドウの中にペインドウィンドウを配置することもできる
- 最初にペインドウィンドウ 1 を作る
- 左側のペインにはラベル 1 を配置し、右側のペインにはペインドウィンドウ 2 を配置する
- ここで、ペインドウィンドウ 2 の -orient を vertical に設定する
- アプリケーションでよく見かける 3 ペイン型のウィンドウになる
1. 
2. 
3. 
- 実行した直後の状態
- 縦線のサッシを左へ移動した状態
- 横線のサッシを上に移動した状態