Tck/Tk 最初の一歩

ホーム   目次


簡単な例

はじめの例では簡単なウィンドウを表示します。

simple.tcl


oo::class create Example {
    constructor {} {
        my initUI
    }
    method initUI {} {
        wm title . 簡単な
        wm geometry . 250x150+300+300
    }
}

set e [Example new]

上記のコードを、macOS、Windows、Linuxのお好きなプラットフォームの、お好きなエディタで記述してください。ファイル名の拡張子は.tclです。ここでは simple.tclというファイル名にしました。

実行するには、ターミナルもしくはコマンドプロンプトでファイルを保存したディレクトリへ移動し、次のように入力します。

wish simple.tcl

Windowsの場合は、前章のActiveStateからActiveTclをインストールした場合、上記の方法以外にも、simple.tclファイルをダブルクリックしてもアプリケーションが起動します。

なお、Tclでは、GUI プログラムの場合は wish で実行しますが、コマンドラインプログラムの場合は次のように、tclsh で実行します。

tclsh ファイル名.tcl

コード説明

コードを上から1行ずつ説明します。

oo::class create Example {

「oo::class   create   クラス名」でクラスが作られます。クラスの本体は波かっこで囲みます。

constructor {} {

コンストラクラはクラスがインスタンス化されるときに自動的に呼び出されるメソッドです。{} は引数がないことを表しています。

my initUI

インスタンスメソッドの initUI を呼び出しています。my が自身を表すキーワードとして使われます。

method initUI {} {

コンストラクタ以外のインスタンスメソッドは method キーワードで始めます。

wm title . 簡単な

wish コマンドで tcl を実行すると自動的にルートウィンドウが作成され、イベントループが始まります。wm は、そのルートウィンドウとそれ以外のウィンドウを操作するためのコマンドです。title は wm の title プロパティを操作することを表しています。次のドット(.) は、操作の対象がルートウィンドウ自身であることを表します。「簡単な」という文字列は、wm の title プロパティに与える値です。Tcl の場合、空白を含まない文字列は引用符で囲む必要はありません。(引用符で囲んでも問題ありません)

wm geometry . 250x150+300+300

wm の geometry プロパティに値を与えます。最初の250がウィンドウの横幅で、次の150がウィンドウの高さです。続く、300と300は、メインスクリーンに対する、x座標とy座標です。

set e [Example new]

「set   e」で、「e」という変数を宣言したことになります。そしてその e 変数に Example クラスのインスタンスを設定します。クラスのインスタンスは [クラス名   new]で作成されます。インスタンスが作成されると自動的に constructor が呼び出され、constructorからinitUIが呼び出され、ウィンドウのタイトルと大きさと位置が設定されることになります。ルートウィンドウの作成とイベントループは wish が自動的に行ってくれます。

なお、ソースファイルのファイル形式は、macOSとLinuxではUTF-8で問題のないのですが、Windowsでは日本語が文字化けします。私は、macOSやMintで記述したUTF-8ファイルをWindowsではメモ帳を使って、ANSIファイルに変換して使っています。

センタリングウィンドウ

次の例では、ウィンドウを画面中央に表示します。

centering.tcl


oo::class create Example    {
    constructor {} {
        my initUI
    }
    method initUI {} {
        wm title . "Centered Window"
        my centerWindow
    }
    method centerWindow {} {
        set w 290
        set h 150
        set x [expr ( [winfo vrootwidth    .] - $w ) / 2 ]
        set y [expr ( [winfo vrootheight .] - $h ) / 2 ]
        wm geometry . ${w}x$h+$x+$y
    }
}

set e [Example new]

TclTkには、ウィンドウの表示位置をセンターにするメソッドは用意されていません。このサンプルではメインスクリーンの幅と高さを取得して、ウィンドウをセンターに表示します。

wm title . "Centered Window"

ルートウィンドウのタイトルを「Centered   Window」に設定しています。文字列に空白がある場合は、全体を二重引用符で囲む必要があります。

set w 290
set h 150

変数を宣言して設定するには「set   変数名   値」と空白で区切って記述します。ここでは、w がウィンドウの幅として、h がウィンドウの高さとして後ほど使われます。

set x [expr ( [winfo vrootwidth .] - $w ) / 2 ]
set y [expr ( [winfo vrootheight .] - $h ) / 2 ]

Tclでは、算術計算(算術演算)は、expr コマンドを使って、[expr   計算式(演算式)] と記述します。[winfo   vrootwidth   .] で、メインスクリーンの幅が得られ、[winfo   vrootheight   .] で、メインスクリーンの高さが得られます。

$w
$h

Tclで、変数の値を使う場合は変数名の前に「$マーク」を付けます。「$」を付けずに変数を呼び出すと、変数の値ではなく、その変数の名前自体が値として呼び出されます。つまり、「$w]では、「290」が呼びされ、「w」だと、「w」という文字が呼び出されます。

ウィンドウのx座標はウィンドウの左端、y座標はウィンドウの上端を表します。つまりウィンドウの x y 座標はウィンドウの左上を表しますので、「(スクリーンの幅 - ウィンドウの幅) / 2」と「(スクリーンの高さ - ウィンドウの高さ) / 2」は、ウィンドウを中央に表示する場合のウィンドウのx座標とy座標を求める正しい式となります。

wm geometry . ${w}x$h+$x+$y

geometryに値を与える場合、「数値x数値+数値+数値」としますが、最初の値を$wxとすると、Tclは「wx」という変数を探そうとしてエラーを起こします。${w}を使って、変数は「w」であることを明確にTclに伝えます。

終了ボタン

この章の最後の例では、終了ボタンを持つアプリケーションを作成します。

quitbutton.tcl


oo::class create Example {
    constructor {} {
        my initUI
    }
    method initUI {} {
        wm title . 終了ボタン
        ttk::button .quit -text 終了 -command exit
        place .quit -x 50 -y 50
    }
}

wm geometry . 250x150+300+300

set e [Example new]

コードの要所を説明します。

ttk::button .quit -text 終了 -command exit

ttk::button コマンドはボタンを作成します。.quit のドット( . )はルートウィンドウを表しています。ドットとquitの間に空白はありません。.quitは、ルートウィンドウにquitという名前のボタンを作るという意味になります。
 -text オプションはボタンに表示される文字列を設定します。ここでは「終了」を設定しています。
 -command オプションは、ボタンがクリックされた時に呼び出されるコマンドを設定します。ここではexit を設定しています。exit は Tcl に用意されているアプリケーションを終了させるコマンドです。
 なお、ttk::button コマンドは、ttk::をつけずに button と呼び出すと、ボタンに表示される文字の大きさに合ったサイズのボタンが作成されます。

place .quit -x 50 -y 50

place コマンドはウィジェット(GUI 部品) をピクセル単位で指定した位置に配置します。
 .quit で、place コマンドの対象が .quit ボタンであることを表しています。-x オプションと -y オプションでは、ルートウィンドウの 左上からのx座標とy座標のそれぞれを 50 ピクセルに指定しています。


14488 visits
Posted: Dec. 16, 2018
Update: Dec. 17, 2018

ホーム   目次   ページトップ