Lightweigth Language

●Ttk Widget の基本

• Ttk (Themed Tk) は Tk 8.5 から導入されたテーマ付きウィジェットのこと
• Ttk ウィジェットを使うと、テーマの変更で GUI の見た目を切り替えることができる
• Ttk には 18 個のウィジェットがあり、そのうちの 12 個は tk にもある
• button, checkbutton, entry, frame, label, labelframe
• menubutton, panedwindow, radiobutton, scale, scrollbar, spinbox
• Ttk にしかないウィジェット
  • combobox, notebook, progressbar, separator, sizegrip, treeview
• Tk にしかないウィジェット
  • canvas, listbox, menu, message
• Ruby/Tk で Ttk を使う場合、二通りの方法がある
1. 変数 Tk.default_widget_set の値を :Ttk に切り替える
• widgetClass は今までと同じく Tk + 名前 で OK
2. ウィジェットの名前の前に Ttk:: を付ける
• 基本的なオプションは Tk と同じ
• ただし、Tk と Ttk では見た目 (スタイル) を調整するオプション (方法) が異なる
• 簡単に置き換えることはできないので注意すること

• 参考 URL
1. Tk Commands, (Tcl/Tk 8.7 Manual)
2. TclTk8.5のTtk Widget, (もっとTcl/Tk, 今井智さん)

• 簡単な使用例 (1)

リスト : Ttk Widget の簡単な使用例

# coding: utf-8
require 'tk'

Tk.default_widget_set = :Ttk 
Ttk::Style.configure('.', font: ['', 12])  # Ttk Widget のフォントの大きさを 12 に変更
$theme = ARGV[0]
Ttk::Style.theme_use($theme)

# ラジオボタン用
$v = TkVariable.new(1)

# チェックボタン用
$opts = [
  TkVariable.new(true), 
  TkVariable.new(false), 
  TkVariable.new(true), 
  TkVariable.new(false), 
]

# テーマ表示用ラベル
TkLabel.new(text: $theme).pack

# ボタン類の配置
$f0 = TkLabelFrame.new(text: 'Buttons')
$f1 = TkLabelFrame.new(text: 'CheckButtons')
$f2 = TkLabelFrame.new(text: 'RadioButtons')
for x in 0 .. 3
  TkButton.new($f0, text: "button #{x}").pack
  TkRadiobutton.new($f1, text: "radiobutton #{x}", value: x, variable: $v).pack
  TkCheckbutton.new($f2, text: "checkbutton #{x}", variable: $opts[x]).pack
end

$f0.pack(padx: 5, pady: 5, side: 'left')
$f1.pack(padx: 5, pady: 5, side: 'left')
$f2.pack(padx: 5, pady: 5, side: 'left')

Tk.mainloop

• Ttk のテーマやスタイルの設定は Tcl/Tk の ttk::style コマンドを使う
• Ruby/Tk の場合、style のサブコマンドが Ttk::Style のクラスメソッドになる
• Ttk::Style.theme_names(), 使用可能なテーマ名を配列に格納して返す
• Ttk::Style.theme_use(name), 引数 name のテーマに切り替える, 引数なしの場合はエラー
• Linux 系 OS の場合、テーマは標準で 4 つある
1. clam, Gnome スタイル
2. alt, GTK+ のデフォルトスタイル
3. default, X11 スタイル
4. classic, Motifスタイル
• Ttk::Style.configure(style, option: value, ...), style の option を value に設定する
• 通常 style には Ttk Widget のクラス名を指定する
• widget のクラス名は TkWinfo.classname(widget) で取得可能
• たとえば、ボタンのクラス名は TButton で、ラベルは TLabel
• そのクラスの option が value になる
• TkOptionDB.add() と同じ動作
• ピリオド '.' はルートを表す (すべてのウィジェットが対象になる)

• 簡単な使用例 (2)

リスト : Ttk Widget の簡単な使用例

# coding: utf-8
require 'tk'

Tk.default_widget_set = :Ttk 
Ttk::Style.configure('.', font: ['', 12])

Ttk::Style.configure('test1.TLabel', font: ['', 12])
Ttk::Style.configure('test2.TLabel', font: ['serif', 14], foreground: 'blue')
Ttk::Style.configure('test3.TLabel', font: ['monospace', 16, 'italic'], foreground: 'green')

$str = 'Hello, world, こんにちは世界';
TkLabel.new(text: $str, style: 'test1.TLabel').pack
TkLabel.new(text: $str, style: 'test2.TLabel').pack
TkLabel.new(text: $str, style: 'test3.TLabel').pack

Tk.mainloop

• Ttk::Style.configure(style, ...) の style には独自の名前を付けることもできる
• 名前の付け方は name.class_name (たとえば、Test.TButton など)
• Ttk Widget を生成するとき、オプション style でその名前を指定する
• 生成した widget のオブジェクトの option が value になる
• なお、Ttk Widget のコンストラクタでも font や foreground などのオプションを指定できるようだ

●コンボボックス

• コンボボックス (Combo Box) はエントリーとリストボックスを組み合わせたウィジェット
• 実際には、エントリーの右横に矢印があり、それをクリックするとリストボックスが表示される
• これをドロップダウンリストという
• なお、コンボボックスをドロップダウンリストと呼ぶこともあるようだ
• リストボックスから項目を選択できるほか、キーボードで独自の値を入力できる
• コンボボックスは TkCombobox.new で生成する

TkCombobox.new(parent, option: value, ...);

• コンボボックスはエントリーのメソッドやオプションを使用できる
• コンボボックスに特有なオプションを下表に示す

• 主なメソッド
• current(index)
  values[index] をコンボボックスの値とする。
  引数なしの場合はコンボボックスの値を values から検索して位置を返す。values にない場合は -1 を返す。
• get(), コンボボックスの値を取得する
• set(item), コンボボックスの値を item にする

• 簡単な使用例

リスト : コンボボックスの使用例

# coding: utf-8
require 'date'
require 'tk'

Tk.default_widget_set = :Ttk 
Ttk::Style.configure('.', font: ['', 12])

$label_buff = TkVariable.new('')
$year_buff = TkVariable.new('1970')
$month_buff = TkVariable.new('1')
$day_buff = TkVariable.new('1')

$la = TkLabel.new(textvariable: $label_buff)
$la.pack

TkLabel.new(text: " 年: ").pack(side: 'left')
$year_cb = TkCombobox.new(textvariable: $year_buff, width: 8, values: [*1970 .. 2031])
$year_cb.pack(side: 'left')

TkLabel.new(text: " 月: ").pack(side: 'left')
$month_cb = TkCombobox.new(textvariable: $month_buff, width: 8, height: 12, values: [*1 .. 12])
$month_cb.pack(side: 'left')

TkLabel.new(text: " 日: ").pack(side: 'left')
$day_cb = TkCombobox.new(textvariable: $day_buff, width: 8, values: [*1 .. 31])
$day_cb.pack(side: 'left')

# 入力データの表示
def get_item
  y = $year_cb.value
  m = $month_cb.value
  d = $day_cb.value
  if Date.valid_date?(y.to_i, m.to_i, d.to_i)
    $label_buff.value=("#{y}年 #{m} 月 #{d} 日")
  else
    $label_buff.value=("Input Error")
  end
end

$year_cb.bind('<ComboboxSelected>', proc { get_item })
$year_cb.bind('Return', proc { get_item })
$month_cb.bind('<ComboboxSelected>', proc { get_item })
$month_cb.bind('Return', proc { get_item })
$day_cb.bind('<ComboboxSelected>', proc { get_item })
$day_cb.bind('Return', proc { get_item })

get_item()

Tk.mainloop

• リストボックスから項目を選択したとき、仮想イベント <ComboboxSelected> が生成される
• このイベントに関数 get_item をバインドする
• エントリーでデータ入力してリターンキーを押しても <ComboboxSelected> は生成されない
• そこで、エントリーではイベント Return に get_item をバインドしている
• get_item は Date のメソッド valid_date? で日付が正しいかチェックしている
• 存在しない日付であればラベルに Input Error を表示する

初期状態

日付の入力

エラー

●ノートブック

• ノートブック (Notebook) は複数のウィジェットを格納し、表示するウィジェットをタブで切り替える
• タブブラウザ (Tabbed Browser) と同様の動作
• ノートブックは TkNotebook.new で生成する
• ノートブックにウィジェットを配置するにはメソッド add(widget, option => value, ...) を使う
• 追加した widget はタブ識別子として使用できる
• 整数 (0 - タブ数-1) でもよい
• 現在選択されているタブは 'current' で指定できる
• タブの名前はオプション text で指定する
• この他にも state, sticky, padding などいくつかオプションがある
• タブを選択したとき仮想イベント <NotebookTabChanged> が生成される

• 簡単な使用例 (1)

リスト : ノートブックの使用例 (1)

# coding: utf-8
require 'tk'

Tk.default_widget_set = :Ttk 
Ttk::Style.configure("TButton", font: ['', 12])
Ttk::Style.configure("TRadiobutton", font: ['', 12])
Ttk::Style.configure("TCheckbutton", font: ['', 12])

$v = TkVariable.new(0)
$opts = [
  TkVariable.new(true),
  TkVariable.new(true),
  TkVariable.new(true),
  TkVariable.new(true)
]

# ノートブック
$nb = TkNotebook.new
$nb.pack

# ボタン類の配置
$f0 = TkFrame.new
$f1 = TkFrame.new
$f2 = TkFrame.new
for x in 0 .. 3 
  TkButton.new($f0, text: "button #{x}").pack
  TkRadiobutton.new($f1, text: "radiobutton #{x}", value: x, variable: $v).pack
  TkCheckbutton.new($f2, text: "checkbutton #{x}", variable: $opts[x]).pack
end

$nb.add($f0, text: 'Button', padding: 20)
$nb.add($f1, text: 'Radio', padding: 20)
$nb.add($f2, text: 'Check', padding: 20)

Tk.mainloop

初期状態 (Button が選択されている)

Radio を選択

Check を選択

• 簡単な使用例 (2)

リスト : ノートブックの使用例 (2)

# coding: utf-8
require 'tk'
TkOptionDB.add('*Text.font', ['Ricty Diminished', 12])

# 生成したテキストウィジェットの個数
$text_count = 0

# ノートブック
$nb = TkNotebook.new

# テキストウィジェットを追加
def new_text
  tw = TkText.new(width: 40, height: 10)
  $text_count += 1
  $nb.add(tw, text: "Memo#{$text_count}")
  $nb.select(tw);
end

# テキストウィジェットを削除
def del_text
  $nb.forget('current')
end

# ボタン
$fr = TkFrame.new
TkButton.new($fr, text: 'New', command: proc { new_text }).pack(side: 'left')
TkButton.new($fr, text: 'Del', command: proc { del_text }).pack(side: 'left')

# 配置
$fr.pack(anchor: 'w');
$nb.pack

Tk.mainloop

• ボタン New を押すとノートブックにテキストウィジェットを挿入する
• ボタン Del を押すとカレントタブのテキストウィジェットを削除する
• テキストの挿入は関数 add_text で行う
• add で挿入しても、カレントタブは変化しない
• テキスト tw を add で挿入したあと、メソッド select(tw) でカレントタブを変更する
• ウィジェットの削除はメソッド forget で行う
• ウィジェットを隠すメソッド hide もある (add() で復活する)
• この他にもタブを操作するメソッドがいろいろ用意されている

初期状態

Memo1 を生成

Memo2 を生成

Memo3 を生成して Memo2 を削除

●プログレスバー

• プログレスバー (progressbar) は時間がかかる処理で進捗状況を表示するためのウィジェット
• 水平方向のバーで進捗率を表すものが一般的
• プログレスバーは TkProgressbar.new で生成する
• 主なオプション
• orient, バーの方向 ('horizontal' が水平 [デフォルト], 'vertical' が垂直)
• length, バーの長さ
• mode, 動作モード
• 'determinate', 進捗状況を確定的に表す (バーが一方向に伸びていく) [デフォルト]
• 'indeterminate', 処理が進行中であることを表す (ブロックが左右 (上下) に繰り返し移動する)
• maximum, 最大値 [デフォルトは 100]
• value, プログレスバーの値
• variable, 値を格納するオブジェクトを指定
• 値を書き換えるとプログレスバーに反映される
• メソッド
• start(msec), 自動増加モードを開始 (msec [デフォルトは 50 msec] ごとに step() を呼び出す
• step(amount), 値を amount だけ増やす (引数なしは 1.0 だけ増える)
• stop(), 自動増加モードを停止する
• 自動増加モードは indeterminate モードで使うとよい

• 簡単な使用例

リスト : プログレスバーの使用例

require 'tk'
Tk.default_widget_set = :Ttk 

$var = TkVariable.new(0)
$pb1_obj = nil

def start_pb1
  $var.numeric=(0) 
  $pb1_obj = TkAfter.start(40, 100) {
    $var.numeric=($var.numeric + 1)
  }
end

def stop_pb1
  if $pb1_obj
    $pb1_obj.stop
    $pb1_obj = nil
  end
end

$pb1 = TkProgressbar.new(length: 200, variable: $var)
$pb2 = TkProgressbar.new(length: 200, mode: 'indeterminate')
$pb1.pack

$f1 = TkFrame.new
TkButton.new($f1, text: 'Start', command: proc {start_pb1}).pack(side: 'left')
TkButton.new($f1, text: 'Stop', command: proc {stop_pb1}).pack(side: 'left')
$f1.pack

$pb2.pack
$f2 = TkFrame.new
TkButton.new($f2, text: 'Start', command: proc { $pb2.start(10) }).pack(side: 'left')
TkButton.new($f2, text: 'Stop',  command: proc { $pb2.stop }).pack(side: 'left')
$f2.pack

Tk.mainloop

• $pb1 は determinate, $pb2 は indeterminate で動作する
• どちらも下のボタン Start で動作開始、Stop で動作停止する
• $pb2 は自動増加モードを使っている
• $pb1 は関数 start_pb1 で 40 msec ごとにプログレスバーの値を 1 増やしている

初期状態

途中経過

pb1 が終了し、pb2 を停止した状態

●ツリービュー

• ツリービュー (Tree view) は階層的なデータ構造 (木構造、Tree structure) を表示するためのウィジェット
• ツリービューの見た目は N 行 M 列の表 (table)
• 一番左側の列 (ツリーカラム) が木を表していて、残りの列はデータを表示するためのもの
• 簡単にいうと、ツリーカラムは節 (Node) を表示し、残りのカラムは葉 (Leaf) に格納されているデータを表示する
• 実際には、節にもデータを持たせることができる
• その場合は、そのデータが残りのカラムに表示される
• 節を表す項目には左側に記号 (Windows の場合は +) が付いている
• それをクリックすると、記号が変化 (Windows の場合は -) して、その下に節が保持している子を表示する
• 記号を再度クリックすると表示は元に戻る
• ツリービューは TkTreeview.new で生成する
• オプション columns でツリーカラムを除いたカラムの名前を指定する
• これがカラム識別子 (column id) になる
• カラム識別子は整数 0 - n や文字列 '#0' - '#n' でもよい
• 0 や '#0' はツリーカラムを表す
• カラムの設定や問い合わせはメソッド column_configure(column_id, option_name, option: value, ...) で行う
• 第 2 引数 option_name を指定すると、そのカラムのオプション値が返される
• 主なオプション
• id, カラム名を返す
• anchor, テキストの配置 (Tk と同じ)
• minwidth, カラムの最小幅
• stretch, ウィンドウをリサイズしたときカラムを引き延ばすか (真偽値)
• width, カラムの幅
• xscrollcommand, yscrollcommand, スクロールバーの設定
• カラムのヘッダの設定や問い合わせはメソッド heading_configure(column_id, option_name, option: value, ...) で行う
• 第 2 引数 option_name を指定すると、そのヘッダのオプション値が返される
• 主なオプション
• text, 見出し
• anchor, 見出しの配置 (Tk と同じ)
• command, 見出しをクリックしたときに呼び出されるコールバック関数
• メソッド insert(parent, index, iid, option: value, ...) は新しい子 (要素) を生成する
• insert は要素の識別子 (オブジェクト) を返す
• 生成した要素は親節 parent の index 番目に挿入される
• 末尾に追加する場合は 'end' を指定する
• ルートは空文字列 '' で表す
• 引数 iid は生成した要素に付ける識別子を指定する
• 主なオプション
• text, 要素の名前
• values, 要素の値を格納したタプル (or リスト)
• open, 要素の子を表示するか否か
• tags, タグ

• 簡単な使用例 (1)

リスト : ツリービューの簡単な使用例 (1)

# coding: utf-8
require 'tk'
Tk.default_widget_set = :Ttk 
Ttk::Style.configure('.', font: ['', 12])

$tview = TkTreeview.new(columns: ['Name', 'Height'])
$tview.column_configure('#0', width: 50)
$tview.column_configure('Name', anchor: 'w', width: 100)
$tview.column_configure('Height', anchor: 'e', width: 50)
$tview.heading_configure('#0', text: "クラス")
$tview.heading_configure('Name', text: "名前")
$tview.heading_configure('Height', text: "身長")

id = $tview.insert('', 'end', text: 'A')
$tview.insert(id, 'end', values: ['Ada', 148.7])
$tview.insert(id, 'end', values: ['Hanna', 154.2])
$tview.insert(id, 'end', values: ['Miranda', 148.2])

id = $tview.insert('', 'end', text: 'B')
$tview.insert(id, 'end', values: ['Alice', 149.5])
$tview.insert(id, 'end', values: ['Janet', 147.8])
$tview.insert(id, 'end', values: ['Sara', 153.1])

id = $tview.insert('', 'end', text: 'C')
$tview.insert(id, 'end', values: ['Carey', 133.7])
$tview.insert(id, 'end', values: ['Linda', 154.6])
$tview.insert(id, 'end', values: ['Tracy', 138.2])

id = $tview.insert('', 'end', text: 'D')
$tview.insert(id, 'end', values: ['Ellen', 157.9])
$tview.insert(id, 'end', values: ['Maria', 159.1])
$tview.insert(id, 'end', values: ['Violet', 138.7])

$sb = TkYScrollbar.new
$sb.assign($tview)

$tview.pack(side: 'left')
$sb.pack(side: 'left', fill: 'y')

Tk.mainloop

• クラスごとに女生徒の名前と身長を表示する
• TkTreeview.new のオプション columns には ['Name', 'Height'] を指定する
• メソッド column_configure と heading_configure でカラムと見出しの設定を行う
• クラスは A, B, C, D の 4 つ
• クラスを表す要素はルートに追加する
• そして、これらの要素に女生徒のデータを格納した要素を追加する

初期状態

クラス A を表示

クラス A と C を表示

全クラスを表示

• ツリービューはマウスの左クリックで要素を選択できる
• Ctrl Key + 左クリックで複数の要素を選択
• 要素を選択したあと、Shift Key + 左クリックでその範囲の要素をすべて選択
• 要素を選択したとき仮想イベント <TreeviewSelect> が生成される
• 実際には、左クリックするたびにイベントが発生する
• 選択した要素はメソッド selection で取得できる
• 返り値は要素の識別子 (オブジェクト) を格納した配列
• 要素のカラム値はメソッド get, set でアクセスする

get(item, column)
set(item, column, value);

• get は要素 item のカラム column の値 (文字列) を返す
• column が存在しない場合は空文字列を返す
• set は item の column を value に更新する

• 簡単な使用例 (2)

リスト : 身長の更新機能を追加

# coding: utf-8
require 'tk'
Tk.default_widget_set = :Ttk 
Ttk::Style.configure('.', font: ['', 12])

$buff1 = TkVariable.new('        ')
$buff2 = TkVariable.new('')
$select_item = nil

$fr = TkFrame.new
TkLabel.new($fr, textvariable: $buff1).pack(side: 'left')
$e = TkEntry.new($fr, width: 8, textvariable: $buff2)
$e.pack(side: 'left')
$fr.pack(anchor: 'w')

$tview = TkTreeview.new(columns: ['Name', 'Height'])
$tview.column_configure('#0', width: 50)
$tview.column_configure('Name', anchor: 'w', width: 100)
$tview.column_configure('Height', anchor: 'e', width: 50)
$tview.heading_configure('#0', text: "クラス")
$tview.heading_configure('Name', text: "名前")
$tview.heading_configure('Height', text: "身長")

id = $tview.insert('', 'end', text: 'A')
$tview.insert(id, 'end', values: ['Ada', 148.7])
$tview.insert(id, 'end', values: ['Hanna', 154.2])
$tview.insert(id, 'end', values: ['Miranda', 148.2])

id = $tview.insert('', 'end', text: 'B')
$tview.insert(id, 'end', values: ['Alice', 149.5])
$tview.insert(id, 'end', values: ['Janet', 147.8])
$tview.insert(id, 'end', values: ['Sara', 153.1])

id = $tview.insert('', 'end', text: 'C')
$tview.insert(id, 'end', values: ['Carey', 133.7])
$tview.insert(id, 'end', values: ['Linda', 154.6])
$tview.insert(id, 'end', values: ['Tracy', 138.2])

id = $tview.insert('', 'end', text: 'D')
$tview.insert(id, 'end', values: ['Ellen', 157.9])
$tview.insert(id, 'end', values: ['Maria', 159.1])
$tview.insert(id, 'end', values: ['Violet', 138.7])

$sb = TkYScrollbar.new
$sb.assign($tview)

$tview.pack(side: 'left')
$sb.pack(side: 'left', fill: 'y')

# 生徒の選択
def select_student
  x = $tview.selection()
  n = $tview.get(x[0], 'Name')
  if n
    $buff1.value=(sprintf("%8s", n))
    $buff2.value=($tview.get(x[0], 'Height'))
    $select_item = x[0]
  else
    $buff1.value=('        ')
    $buff2.value=('')
    $select_item = nil
  end
end

# 身長の更新
def update_height
  if $select_item
    $tview.set($select_item, 'Height', $buff2.value)
  end
end

# バインディング
$e.bind('Return', proc { update_height })
$tview.bind('<TreeviewSelect>', proc { select_student })

Tk.mainloop

• 身長を更新する機能を追加する
• 生徒を選択すると、ラベルに名前を、エントリーに身長を表示する
• エントリーで身長を書き換えてリターンキーを押すと、ツリービューの値が更新される

Alice を選択

エントリーで身長を入力

リターンキーで更新