|
概要 |
GUIシリーズ第2弾の「いま何時かしら?」。今回は誰に指南するわけでもなく私は休憩...ですが、いつかの自分のためにも軽くだけまとめておきます。 ちなみにテキストはこちら(http://www.cc.kyoto-su.ac.jp/~atsushi/Programs/WhatTime/index-j.html)
|
概要 |
GUIシリーズ第2弾の「いま何時かしら?」。今回は誰に指南するわけでもなく私は休憩...ですが、いつかの自分のためにも軽くだけまとめておきます。 ちなみにテキストはこちら(http://www.cc.kyoto-su.ac.jp/~atsushi/Programs/WhatTime/index-j.html)
|
準備 |
マシンメンテナンス
例の如く、道具のメンテナンスを行いましょう。(日々のマシンメンテナンス)
準備プログラムの実行
前回のペアプログラミングでも行なったと思いますが、準備のためのプログラムを実行しましょう。
| aString aURL aFilename aCollection | aString := 'http://www.cc.kyoto-su.ac.jp/~atsushi/Programs/loading.st'. aURL := JunURL named: aString. aURL exists ifFalse: [^nil]. aFilename := Filename defaultDirectory construct: aURL asURI tail. aURL downloadTo: aFilename. aFilename exists ifFalse: [^nil]. aFilename fileIn. (aCollection := OrderedCollection new) add: #url: -> 'http://www.cc.kyoto-su.ac.jp/~atsushi/Programs/WhatTime/WhatTime.st'; add: #comment: -> 'Copyright 2008-2011 KSU (Kyoto Sangyo University). All Right Reserved.'; add: #bundle: -> #KSU; add: #package: -> 'KSU-Template'; add: #nameSpace: -> #KSU; add: #category: -> 'KSU-Template'; add: #class: -> #{KSU.WhatTime}; add: #protocol: -> #examples; add: #selector: -> #example1; add: #execute: -> [#{KSU.WhatTime} value example1]; yourself. JunSystem perform: ((aCollection collect: [:each | each key]) inject: String new into: [:selector :key | selector , key]) asSymbol withArguments: (aCollection collect: [:each | each value]) asArray
|
今回のGUI部品:Action Button, Check Box, Radio Button |
GUI部品の設置(ボタン、チェックボックス、ラジオボタン)
まずはウィンドウに部品を貼り付けておきましょう。 前回はProportionとOffsetの数値で位置・サイズを決めていましたが、今回はマウス操作で位置を決めましょう。 その際、GUI Painter Toolの「Grid」メニューで「On」を選択しておきましょう。位置合わせが楽になるはずです。
上の完成図を参考に、ボタン(Action Button)、チェックボックス(Check Box)、ラジオボタン(Radio Button)を貼り付けてください。また、各部品に対する設定は以下の画像の通りです。
くれぐれもインストールを忘れないようにしてくださいね。
ちゃんと動きますか?
これで出来上がったと思います。動作を確認してみてください。
|
コードリーディング |
outputMode
ラジオボタンの初期化を行なっています。起動時「トランスクリプト」を選択した状態になっているのは、このメソッドによるものです。 試しに「トランスクリプト」を「ダイアログ」にして実行してみると良いでしょう。
showDate, showWeekday, showSeconds
これら3つはチェックボックスの初期化を行なっています。起動時にはどれもfalse(チェックされていない状態)になるはずです。 試しにtrue(チェックされている状態)にして実行するとよく分かるはずです。
tellTime
ここでは、画面に表示する日時情報を生成して、ダイアログボックスの状態によってトランスクリプトまたはダイアログに表示します。 起動時は時刻(時分)のみで表示文字列を生成しますが、チェックボックスの状態によっては日付や曜日、秒の情報を追加するように処理しています。
先週に同じく「ValueHolder」
今回のペアプログラミングで注目すべき点は、前回登場したValueHolderが、また登場しているということです。 チェックボックス用に3つ、そしてラジオボタン用に1つ、ValueHolderのオブジェクトが動いています。
ここで一つ、ValueHolderを使って実験を行いましょう。example1をInspect itしてみてください。 開いたインスペクタに表示されている「showDate」からメニューを出して「Dive」してみてください。 すると「日付」のチェックボックスに対応するValueHolderオブジェクトをつかまえることができます。
片やチェックボックス、片やそれに対応するValueHolder。さて、チェックボックスにチェックを入れると、ValueHolderはどうなるでしょうか。
見事に「true」に変更されました!ちゃんと連携しているようですね。ではその逆も。ValueHolderに「false」を設定すると、チェックボックスはどうなるでしょうか。
self value: false
これも見事にチェックが外れました!いかがでしょう、チェックボックス(GUI部品)とValueHolder(プログラム)との連携を垣間見ることができたと思います。
|
コードライティング |
今回の例題は、未完成のメソッドはありませんので、GUI部品を貼り付けさえすれば完成です。 が、やっぱりコードライティングもしたいですよね?(「したい」と言ってください)
もう一つチェックボックスを増やして、曜日の表示を英語表記にしたり日本語表記にしたり...そんな機能を実装してみましょう。
「曜日」の表記を英語と日本語とで変更できるようにする
あまり詳しい説明は行いませんが、以下の事項を実装してゆけば、実現することができるでしょう。 ヒントとして画像を掲載しておきますので、是非とも挑戦してみてください。
どうぞ、おきばりやしとくれやす!
|
さいごに |
今回は、かなり多くの部品を貼り付けたと思いますが、GUIによる各部品の設定(特にActionやAspect)と、Smalltalkプログラムとの繋がりを把握できるようになったでしょうか。 チェックボックスとValueHolderの連携を見ればわかるように、 結局GUIツールを用いて作ることも、文字ベースのSmalltalkプログラミングに相当するのです。(GUIツールはプログラミングのファサードでしかありません。) その証拠として、windowSpecのソースコードを見てみると良いでしょう。マウス操作で設置したGUI部品たちがSmalltalkプログラムとして表現されているはずです。
GUIツールを使い続ける限り、ユーザでしかありません。是非、その中のSmalltalkプログラムを操るディベロッパを目指してください!(私も目指さねば。。。