BWidget入門

BWidgetは、拡張Widgetのパッケージです。
シンプルで強力なWidgetを提供します。
Widget間のDrag&Drop機能まで提供しています。

以下は、BWidgetのWidgetとClassの一覧です。

シンプルWidget Label, Entry, Button, ArrowButton, ProgressBar, ScrollView, Separator
マネージャWidget MainFrame, LabelFrame, TitleFrame, ScrolledWindow, ScrollableFrame, PanedWindow, ButtonBox, PagesManeger, NoteBook, Dialog
合成Widget LabelEntry, ComboBox, SpinBox, Tree, ListBox, MessageDlg, PasswdDlg, SelectFont, SelectColor
コマンドClass Widget, DynamicHelp, DragSite, DropSite, BWidget
ビットマップ 標準のビットマップ

高速化

フォントロードの高速化をしてみました。

Label

バルーンヘルプ付きのラベルです。 

package require BWidget

pack [Label .l -text ラベル -helptext ラベルです]

Entry

バルーンヘルプ付きのエントリです。 

package require BWidget

set var デフォルト
pack [Entry .e -helptext エントリです -textvariable var]

Button

バルーンヘルプ付きのボタンです。 

package require BWidget

pack [Button .b -text ボタン -helptext ボタンです -command exit]

ArrowButton

バルーンヘルプ付きの矢印ボタンです。 

package require BWidget

ArrowButton .ab1 -helptext 上矢印ボタンです -dir top
ArrowButton .ab2 -helptext 下矢印ボタンです -dir bottom
ArrowButton .ab3 -helptext 左矢印ボタンです -dir left
ArrowButton .ab4 -helptext 右矢印ボタンです -dir right
pack .ab1 .ab2 .ab3 .ab4 -side left

ProgressBar

プログレスバーです。 

package require BWidget

pack [ProgressBar .p -maximum 10 -variable var]
set var 5

ScrollView

スクロールビューです。ScrolledWindow Widgetと連係して使います。 

package require BWidget

pack [ScrollView .sv -relief groove]

Separator

セパレータです。 

package require BWidget

pack [Separator .s -orient horizontal] -pady 10 -fill x

LabelEntry

ラベル付きのエントリです。 

package require BWidget

set var デフォルト
pack [LabelEntry .le -label ラベル -helptext ラベルエントリです -textvariable var]

ComboBox

ラベル付きのコンボボックスです。 

package require BWidget

set var {いちご みかん バナナ りんご} 
pack [ComboBox .c -label ラベル -helptext コンボボックスです -values $var]
.c setvalue first

SpinBox

ラベル付きのスピンボックスです。 

package require BWidget

pack [SpinBox .sb -label ラベル -helptext スピンボックスです -range {1 10 1}]

Tree

Explorer風のツリーです。
フォルダは、開いたり閉じたりします。 

package require BWidget

# 画面作成
Tree .tree -opencmd "change 1" -closecmd "change 0"
pack .tree
entry .entry -textvariable var
pack .entry -fill x

# ルート挿入
.tree insert end root やさい -text やさい -image [Bitmap::get openfold] -open 1
.tree insert end root くだもの -text くだもの -image [Bitmap::get openfold] -open 1

# ノード挿入
.tree insert end やさい やさい/キャベツ -text キャベツ -image [Bitmap::get file]
.tree insert end やさい やさい/はくさい -text はくさい -image [Bitmap::get file]
.tree insert end やさい やさい/ピーマン -text ピーマン -image [Bitmap::get file]

.tree insert end くだもの くだもの/りんご -text りんご -image [Bitmap::get file]
.tree insert end くだもの くだもの/みかん -text みかん -image [Bitmap::get file]
.tree insert end くだもの くだもの/バナナ -text バナナ -image [Bitmap::get file]

# バインド
.tree bindText <1> click

# プロシジャ
proc change {idx node} {
    .tree itemconfigure $node -image [Bitmap::get [lindex {folder openfold} $idx]]
}

proc click {node} {
    global var
    .tree selection set $node
    set var [.tree selection get]
}

ListBox

イメージ付のリストボックスです。 

package require BWidget

pack [ListBox .lb]
.lb insert end folder -text フォルダ1 -image [Bitmap::get folder]
.lb insert end openfold -text フォルダ2 -image [Bitmap::get openfold]
.lb insert end new -text ファイル1 -image [Bitmap::get new] -indent 20
.lb insert end file -text ファイル2 -image [Bitmap::get file] -indent 20
.lb selection set new

マルチカラムにしたリストボックスです。 

package require BWidget

pack [ListBox .lb -width 35 -height 3 -multicolumn true]

for {set i 1} {$i < 10} {incr i} {
    .lb insert end file$i -text ファイル$i -image [Bitmap::get file]
}
.lb selection set file1

MessageDlg

メッセージ・ダイアログボックスです。 

package require BWidget

MessageDlg .md -title タイトル -icon info -message "メッセージです" -type ok

ProgressDlg

プログレス・ダイアログボックスです。 

package require BWidget

set mesg ファイルをコピーしています。
ProgressDlg .pd -title タイトル -maximum 10 -variable var -stop 中止 \
    -textvariable mesg -command exit
set var 5

PasswdDlg

パスワード・ダイアログボックスです。 

package require BWidget

set login "hello"
set passwd "12345"
PasswdDlg .pd -title タイトル -loginlabel Login -passwdlabel Password \
    -command exit -logintextvariable login -passwdtextvariable passwd

SelectFont

ダイアログ・ボックス型のフォント選択です。 

package require BWidget

SelectFont .sf -title タイトル -sampletext "ABCDE abcde あいうえお" -type dialog

ツールバー型のフォント選択です。 

package require BWidget

SelectFont .sf -title タイトル -sampletext "ABCDE abcde あいうえお" -type toolbar
pack .sf

SelectColor

ダイアログ・ボックス型のカラー選択です。

50%縮小 
package require BWidget

set color [SelectColor .sc -title タイトル -type dialog]

メニューボタン型のカラー選択です。 

package require BWidget

set var #ffffff
SelectColor .sc -title タイトル -variable var -type menubutton
pack .sc

NoteBook

タブ付きのノートブックです。 

package require BWidget

pack [NoteBook .n -side top -width 150 -height 50] -fill both
.n insert end tanaka -text 田中 -createcmd tanaka
.n insert end suzuki -text 鈴木 -createcmd suzuki
.n insert end satou -text 佐藤 -createcmd satou
after 100 {.n raise [.n page 0]}

proc tanaka {} {
    set frame [.n getframe tanaka]
    pack [button $frame.b -text 田中のフレームです] -anchor c
}

proc suzuki {} {
    set frame [.n getframe suzuki]
    pack [button $frame.b -text 鈴木のフレームです] -anchor c
}

proc satou {} {
    set frame [.n getframe satou]
    pack [button $frame.b -text 佐藤のフレームです] -anchor c
}

MainFrame

メインウィンドウのためのフレームです。
メニュー、ツールバー、ステータスバーが簡単に追加できます。 

package require BWidget

set descmenu {
    "&File" {} {} 0 {
	{command "E&xit" {} "アプリケーションを終了します" {} -command exit}
    }
    "&Edit" {} {} 0 {
    }
}

set var ステータスバー
MainFrame .mf -menu $descmenu -textvariable var -separator both
pack .mf -fill both -expand 1

set frame1 [.mf addtoolbar]
set bbox [ButtonBox $frame1.bbox -spacing 0 -padx 1 -pady 1]
$bbox add -image [Bitmap::get new] \
    -highlightthickness 0 -takefocus 0 -relief link -borderwidth 1 -padx 1 -pady 1 \
    -helptext "新規ファイルを作成します"
$bbox add -image [Bitmap::get open] \
    -highlightthickness 0 -takefocus 0 -relief link -borderwidth 1 -padx 1 -pady 1 \
    -helptext "既存のファイルを開きます"
$bbox add -image [Bitmap::get save] \
    -highlightthickness 0 -takefocus 0 -relief link -borderwidth 1 -padx 1 -pady 1 \
    -helptext "ファイルを保存します"
pack $bbox -side left -anchor w

.mf addindicator -text 指示

LabelFrame

ラベル付のフレームです。 

package require BWidget

pack [LabelFrame .lf -text ラベル -helptext ラベルフレームです -side top -relief groove -bd 3] -fill both -expand 1
set frame [.lf getframe]
pack [Button $frame.b -text ボタン] -anchor c

TitleFrame

タイトル付のフレームです。 

package require BWidget

pack [TitleFrame .tf -text タイトル -side left] -fill both -expand 1
set frame [.tf getframe]
pack [Button $frame.b -text ボタン] -anchor c

ScrolledWindow

スクロールバー付きのウィンドウです。 

package require BWidget

pack [ScrolledWindow .sw -scrollbar both -auto none]

set frame [.sw getframe]
pack [canvas $frame.c -width 50 -height 50] -fill both -expand 1
$frame.c create oval 10 10 40 40 -fill red -width 4
$frame.c create oval 30 10 60 40 -fill green -width 4
$frame.c create oval 20 30 50 60 -fill blue -width 4
.sw setwidget $frame.c

ScrollableFrame

スクロール可能なフレームです。 

package require BWidget

ScrollableFrame .sf -yscrollcommand {.y set} -xscrollcommand {.x set} -width 140 -height 50
scrollbar .y -command {.sf yview}
scrollbar .x -orient horizontal -command {.sf xview}
grid .sf .y -sticky ns
grid .x -sticky we

set frame [.sf getframe]
for {set i 0} {$i < 10} {incr i} {
    pack [LabelEntry $frame.$i -label ラベル$i] -side top
}

PanedWindow

パネル形状のウィンドウです。境界線を変更できます。
左右と上下のレイアウトを選択できます。 

package require BWidget

pack [PanedWindow .pw -side left -pad 0] -fill both

.pw add -weight 1
set frame [.pw getframe 0]
pack [listbox $frame.l1 -bg white -height 2] -anchor c
$frame.l1 insert end りんご みかん いちご メロン バナナ

.pw add -weight 1
set frame [.pw getframe 1]
pack [listbox $frame.l2 -bg white -height 2] -anchor c
$frame.l2 insert end キャベツ はくさい レタス かぼちゃ

ButtonBox

バルーンヘルプ付のツールバーです。 

package require BWidget

set bbox [ButtonBox .bbox -spacing 0 -padx 1 -pady 1]
$bbox add -image [Bitmap::get new] \
    -highlightthickness 0 -takefocus 0 -relief link -borderwidth 1 -padx 1 -pady 1 \
    -helptext "新規ファイルを作成します"
$bbox add -image [Bitmap::get open] \
    -highlightthickness 0 -takefocus 0 -relief link -borderwidth 1 -padx 1 -pady 1 \
    -helptext "既存のファイルを開きます"
$bbox add -image [Bitmap::get save] \
    -highlightthickness 0 -takefocus 0 -relief link -borderwidth 1 -padx 1 -pady 1 \
    -helptext "ファイルを保存します"
pack $bbox -side left -anchor w

Dialog

ダイアログボックスです。 

package require BWidget

Dialog .dlg -title タイトル -parent . -default 0 -cancel 1 -modal local
.dlg add -name ok
.dlg add -name cancel

set frame [.dlg getframe]
pack [message $frame.m -text {ダイアログボックスのメッセージ}]
.dlg draw

PagesManager

ページマネージャです。
複数枚のウィンドウを切り替えるのに使います。 

package require BWidget

button .b1 -text 最初 -command {.pm raise 最初}
button .b2 -text 真中 -command {.pm raise 真中}
button .b3 -text 最後 -command {.pm raise 最後}
PagesManager .pm -width 100 -height 50
grid .b1 .b2 .b3
grid .pm - -

.pm add 最初
set frame1 [.pm getframe 最初]
pack [label $frame1.l -text 最初 -bd 50]

.pm add 真中
set frame2 [.pm getframe 真中]
pack [label $frame2.l -text 真中 -bd 50]

.pm add 最後
set frame3 [.pm getframe 最後]
pack [label $frame3.l -text 最後 -bd 50]

.pm raise 最初

Drag&Drop

Widget間のDrag&Dropの実験です。
Entry1からEntry2へバナナをDrag&Dropできます。 

package require BWidget

set var バナナ
set titf1 [TitleFrame .titf1 -text "Drag sources"]
set subf  [$titf1 getframe]
pack [LabelEntry $subf.drag -label Entry1 -dragenabled 1 -dragevent 1 -textvariable var] -side top
pack $titf1

set titf2 [TitleFrame .titf2 -text "Drop targets"]
set subf  [$titf2 getframe]
pack [LabelEntry $subf.drop -label Entry2 -dropenabled 1] -side top
pack $titf2