Tixいろいろ (2)
 今度は次のウィジェットどもの紹介です。 「いろいろ」と雑多なもののような扱いをしていますが、 これらも面白くて役立つウィジェットであることは確かなんです。 ただ、機能が先述のグリッドやハイアラキカルリストのように多種多様多機能というわけではないので、 全部ごた混ぜで1ページに載せることができました。

●リストノートブック
 リストノートブックは、用途としてはノートブックによく似たウィジェットですが、 外見は左にハイアラキカルリスト、右にパネルのペインという2つの部分から構成されます。 つまり、左半分のハイアラキカルリストの項目をつつくと、 その項目にあたるパネルが右に現れる、というものです。 Adobe社のPDFビューアAcrobat Readerをご存知の方はあのようなレイアウトを想像して頂くとよいでしょう。
 下の例はココイチのようなカレーショップの注文風景を模したもので、 一覧からトッピング、量、辛さを選ぶことができます。


package require Tix
wm title . "Curry Ordering"

image create photo ImageIcon -file yosyoku06.gif
set fa [frame .fa]
label $fa.la -image ImageIcon
label $fa.lb -text "お好みに合わせてお選びくだされ。"
foreach e {la lb} {pack $fa.$e -side left -padx 20}
set noa [tixListNoteBook .noa]
set ha [$noa subw hlist]

$ha add to -text トッピング
$ha add ryo -text 量
$ha add karasa -text 辛さ

foreach e {to ryo karasa} {set p($e) [$noa add $e]}

set fa $p(to)
label $fa.la -text "トッピング:"
listbox $fa.lsta -selectmode multiple
foreach e {チーズ ロースカツ チキンカツ チキン煮込み ほうれん草
卵 もつ シーフード 根菜} { $fa.lsta insert end $e }
foreach e {la lsta} { pack $fa.$e -side top -anc w -padx 20 }

set fa $p(ryo)
label $fa.la -text "ライスの量:"
scale $fa.scaa -from 200 -to 1300 -resolution 100 -variable ryo
set ryo 300
foreach e {la scaa} { pack $fa.$e -side top -anc w -padx 20 }

set fa $p(karasa)
label $fa.la -text "辛さ:"
set fb [frame $fa.fb -rel groove -bd 2]
set r 1; set c 1
foreach e {甘口 普通 中辛 激辛} {
    radiobutton $fb.rad$e -text $e -anc w -variable karasa -value $e
    grid $fb.rad$e -row $r -col $c
    if {[incr r] == 4} {set r 1; incr c}
}
set karasa 普通
foreach e {la fb} { pack $fa.$e -side top -anc w -padx 20 }

button .cmde -text 注文 -command "order $p(to).lsta"

proc order lsta {
    global ryo karasa
    set a {}
    foreach e [$lsta curselection] { lappend a [$lsta get $e] }
    tk_messageBox -message "トッピング:$a\n量:$ryo\n辛さ:$karasa" \
      -title Ordered
    exit
}

pack .fa -side top -fill x
pack .noa -side top -fill x
pack .cmde -side right -padx 30

スクリーンショット
 リストノートブックはtixListNoteBookコマンドで作ることができます。 パネル(ペイン)の作成には決まった手順があるので、 何はなくともとりあえず、これを紹介しておきましょう。
  1. tixListNoteBookコマンドで、リストノートブックを作ります。
  2. リストノートブックのsubwidgetサブコマンドで、 ウィジェット左半分を担当するサブウィジェットであるハイアラキカルリスト (hlist)を取り出します。
  3. 取り出したハイアラキカルリストに、パネル1枚につき1つずつ、 項目を追加します。
  4. リストノートブックのaddサブコマンドで、各パネルに相当するフレームを追加します。 ここでフレームにつける名前は、 3.でハイアラキカルリストに追加した項目の名前と1対1に対応しなくてはいけません。
お約束としてはこんなもんでしょう。例もこの通りの順で書いています。
set noa [tixListNoteBook .noa]
set ha [$noa subw hlist]

$ha add to -text トッピング
$ha add ryo -text 量
$ha add karasa -text 辛さ

foreach e {to ryo karasa} {set p($e) [$noa add $e]}
なお、スクリーンショット左上の美味しそうなカレーのアイコンは、 うみもるサービスエリアで配布されているものを頂いてきたものです。 他にも腹が減ること請け合いの食べ物アイコンがたくさんあります。

●compound画像タイプ
 compound画像タイプは、標準Tkで用意されているbitmap画像タイプ、 photo画像タイプと同様、image createコマンドで使える新しい画像タイプです。 これはどんな画像タイプかというと、 文字列と画像データを自由に組み合わせてひとつの画像として扱うものです。 これを使えば、アイコンとテキストを両方持つボタンなどが簡単に作れます。 というわけで、さっそくサンプルを作ってまいりました。


package require Tix
wm title . "Choose Your Decoder"
label .la -text "デコーダを選んでください。"

# 複合画像型の中に入れる画像データ
image create photo ImageHard -file /usr/icons/win98/setuphard.gif
image create photo ImageSoft -file /usr/icons/win98/moviefile1.gif

# ボタンと、その上に表示する複合画像型を作ります。
button .cmda
image create compound ImageHardC -window .cmda
ImageHardC add image -image ImageHard
ImageHardC add line
ImageHardC add space -width 6
ImageHardC add text -text ハード -foreground #700040
.cmda configure -image ImageHardC

button .cmdb
image create compound ImageSoftC -window .cmdb
ImageSoftC add image -image ImageSoft
ImageSoftC add line
ImageSoftC add space -width 6
ImageSoftC add text -text ソフト -foreground #700040
.cmdb configure -image ImageSoftC

# バルーンを作ります。
tixBalloon .bal1 -initwait 300
.bal1 bind .cmda -msg "ハードウェアでアグレッシヴャにデコードを行います。"
tixBalloon .bal2 -initwait 300
.bal2 bind .cmdb -msg "ソフトウェアでロマンティックにデコードを行います。"

# ポップするウィンドウの背景色を変えます。
set bgcolor #f0c0c0
foreach c [winfo children .bal2] { $c configure -bg $bgcolor }
.bal2 subwidget label configure -bg $bgcolor
.bal2 subwidget message configure -bg $bgcolor

pack .la -side top
pack .cmda .cmdb -side left -padx 10 -pady 10 -ipadx 10 -expand yes

# end.

スクリーンショット
 実際にcompound画像タイプを使って、アイコンとテキストを両方持つボタンを作る手順は次のようにまとめることができます。
  1. アイコンになる画像データを、image create photoまたはimage create bitmap で作っておきます。
  2. buttonコマンドでボタンを作ります。
  3. image create compound 画像名コマンドでcompoundの画像を作ります。
  4. 3. で作った画像に、テキストやアイコンを載せていきます。
    • 画像名 add image -image 1.でロードした画像データ
    • 画像名 add text -text テキスト
    • 画像名 add line
      (「改行」します。それまでに追加したものの下に並ぶようになります)
    • 画像名 add space -width 間隔
      (指定した間隔を空けます)
  5. 2.で作ったボタンをコンフィギャーして、-imageに3.の画像名を指定します。
なお、「image create compound」の-window オプションは、そのcompound画像が使われるはずであるところのウィジェット名を指定します。 こうすると、そのウィジェットがデストロイされた瞬間に、 この画像も一緒に削除してもらえます。
image create compound ImageHardC -window .cmda
ImageHardC add image -image ImageHard
ImageHardC add line
ImageHardC add space -width 6
ImageHardC add text -text ハード -foreground #700040
.cmda configure -image ImageHardC

●バルーン
 バルーンとは、「吹き出し」と訳すのがより一層ベストでしょう。 MS-Windowsのオフィスツールで盛んに見られる、 ボタンなどにマウスを当てたまま、じゃなかった、 マウスカーソルを当てたまましばらくすると、 そのボタンの機能を説明するテキストが吹き出し状の枠の中に表示されるまさにあれです。 他のGUIツールキットではしばしば「ツールチップ」と呼ばれます。 Tixのバルーンはそれ単体がひとつのウィジェットです。 角の丸いいわゆる吹き出しではなく、 単なる四角で右上に小さい矢印マークがある形をしています。 バルーンの使い方は

  1. tixBalloonコマンドでバルーンを作ります。 -initwaitにはマウスカーソルを当ててからバルーンが現れるまでの時間 (単位はミリ秒)を指定します。
  2. そのbindサブコマンドで、対象とするウィジェットと、 表示したいメッセージを指定します。
tixBalloon .bal1 -initwait 300
.bal1 bind .cmda -msg "ヘルプテキスト"
なお、バルーンの背景色はちょっと鮮やか過ぎる山吹色、いわゆるピカチュウ色です。 他の色に変えるには、上のソースコードでやっているような処理を書けばOKです。

●ポップアップメニュー
 標準Tkでもtk_popupコマンドを使えばポップアップメニューが出せますが、 Tixのポップアップメニューはこれをより使いやすくしたものです。 特にウィジェットと「bind」しておけば、 そのウィジェットがマウスで右クリックされると自動的にメニューがポップアップします。 下のサンプルは簡単な画像ビューアで、 キャンバスを右クリックするとメニューがポップアップします。


package require Tix
package require pife

set w ""
wm title . "Image Viewer"

proc createWindow w {
    pack [canvas $w.can -bg black] -expand yes -fill both

    #### tixPopupMenu
    # bindサブコマンドで結びつけたウィジェットが右クリックされると、
    # 自動的にポップアップされます。
    # 実際のメニュー操作はサブウィジェットであるmenuを取り出して
    # 行います。
    tixPopupMenu .pm -title "画像ビューアメニュー"
    .pm bind $w.can
    set menu [.pm subwidget menu]

    $menu add command -label "開く..." -command "openImageFile $w"
    $menu add separator
    $menu add command -label "終了" -command exit
}

proc openImageFile {{w {}}} {
    set can $w.can

    set filename [tk_getOpenFile -initialdir .]
    if {"$filename" == ""} {return}

    catch {cd [file dirname $filename]}
    image create photo Image1 -file $filename
    $can delete all
    $can configure -width [image width Image1]\
	    -height [image height Image1]
    $can create image 0 0 -anc nw -image Image1
}
createWindow $w
# end.

 ポップアップメニューはtixPopupMenuコマンドで作れます。 -titleでメニューの上部に表示したいタイトルが指定できます。 で、先述したようにそのbindコマンドでウィジェットを指定しておけば、 そのウィジェットが右クリックされると自動的にこのメニューがポップアップします。
実際にメニューに項目を追加するには、ポップアップメニューの subwidget menuサブコマンドでメニューにあたるサブウィジェットを取り出し、 これに対して通常のメニューと同様に項目を追加していけばOKです。
    tixPopupMenu .pm -title "画像ビューアメニュー"
    .pm bind $w.can
    set menu [.pm subwidget menu]

    $menu add command -label "開く..." -command "openImageFile $w"
    $menu add separator
    $menu add command -label "終了" -command exit

拡張レビュー分室 top
(first uploaded 2001/04/22 last updated (not ever), MISUMI URANO)