何某日和

「カメラ」のち「ハンダゴテ」ところにより「プログラミング」 ── そんな私“かめきち”のウェブサイト

2012.10.10:いま何時かしら?

概要

 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部品の設置(ボタン、チェックボックス、ラジオボタン)
  • ちゃんと動きますか?

GUI部品の設置(ボタン、チェックボックス、ラジオボタン)

 まずはウィンドウに部品を貼り付けておきましょう。 前回はProportionとOffsetの数値で位置・サイズを決めていましたが、今回はマウス操作で位置を決めましょう。 その際、GUI Painter Toolの「Grid」メニューで「On」を選択しておきましょう。位置合わせが楽になるはずです。

Palette Grid On Window

上の完成図を参考に、ボタン(Action Button)、チェックボックス(Check Box)、ラジオボタン(Radio Button)を貼り付けてください。また、各部品に対する設定は以下の画像の通りです。

MainWindow tellTime showDate showWeekday showSeconds dialog transcript

くれぐれもインストールを忘れないようにしてくださいね。

ちゃんと動きますか?

完成したウィンドウ ダイアログが表示される

これで出来上がったと思います。動作を確認してみてください。

コードリーディング

  • outputMode
  • showDate, showWeekday, showSeconds
  • tellTime

outputMode

 ラジオボタンの初期化を行なっています。起動時「トランスクリプト」を選択した状態になっているのは、このメソッドによるものです。 試しに「トランスクリプト」を「ダイアログ」にして実行してみると良いでしょう。

showDate, showWeekday, showSeconds

 これら3つはチェックボックスの初期化を行なっています。起動時にはどれもfalse(チェックされていない状態)になるはずです。 試しにtrue(チェックされている状態)にして実行するとよく分かるはずです。

tellTime

 ここでは、画面に表示する日時情報を生成して、ダイアログボックスの状態によってトランスクリプトまたはダイアログに表示します。 起動時は時刻(時分)のみで表示文字列を生成しますが、チェックボックスの状態によっては日付や曜日、秒の情報を追加するように処理しています。

先週に同じく「ValueHolder」

 今回のペアプログラミングで注目すべき点は、前回登場したValueHolderが、また登場しているということです。 チェックボックス用に3つ、そしてラジオボタン用に1つ、ValueHolderのオブジェクトが動いています。

ここで一つ、ValueHolderを使って実験を行いましょう。example1をInspect itしてみてください。 開いたインスペクタに表示されている「showDate」からメニューを出して「Dive」してみてください。 すると「日付」のチェックボックスに対応するValueHolderオブジェクトをつかまえることができます。

example1をInspect it showDateにDiveする 「日付」のValueHolder

片やチェックボックス、片やそれに対応するValueHolder。さて、チェックボックスにチェックを入れると、ValueHolderはどうなるでしょうか。

「日付」のチェックボックスをオンにする ValueHolderの内容が「true」に変更された

見事に「true」に変更されました!ちゃんと連携しているようですね。ではその逆も。ValueHolderに「false」を設定すると、チェックボックスはどうなるでしょうか。

self value: false
ValueHolderの内容を「false」に変更する 「日付」のチェックボックスがオフになった

これも見事にチェックが外れました!いかがでしょう、チェックボックス(GUI部品)とValueHolder(プログラム)との連携を垣間見ることができたと思います。

コードライティング

 今回の例題は、未完成のメソッドはありませんので、GUI部品を貼り付けさえすれば完成です。 が、やっぱりコードライティングもしたいですよね?(「したい」と言ってください)

もう一つチェックボックスを増やして、曜日の表示を英語表記にしたり日本語表記にしたり...そんな機能を実装してみましょう。

「曜日」の表記を英語と日本語とで変更できるようにする

 あまり詳しい説明は行いませんが、以下の事項を実装してゆけば、実現することができるでしょう。 ヒントとして画像を掲載しておきますので、是非とも挑戦してみてください。

  • インスタンス変数useJapaneseを一つ増やす(Defenitionタブで)
  • インスタンス変数useJapaneseを初期化する(メッセージinitializeの中で)
  • aspectsに属するメッセージuseJapaneseを一つ増やす
  • windowSpecを編集してチェックボックスを一つ増やす
  • メッセージtellTimeを修正する
インスタンス変数useJapaneseを増やす initializeでuseJapaneseを初期化する aspectsにメッセージuseJapaneseを用意する チェックボックスを増やす チェックボックスの設定 メッセージtellTimeを修正する 英語で表示する 日本語で表示する

どうぞ、おきばりやしとくれやす!

さいごに

 今回は、かなり多くの部品を貼り付けたと思いますが、GUIによる各部品の設定(特にActionやAspect)と、Smalltalkプログラムとの繋がりを把握できるようになったでしょうか。 チェックボックスとValueHolderの連携を見ればわかるように、 結局GUIツールを用いて作ることも、文字ベースのSmalltalkプログラミングに相当するのです。(GUIツールはプログラミングのファサードでしかありません。) その証拠として、windowSpecのソースコードを見てみると良いでしょう。マウス操作で設置したGUI部品たちがSmalltalkプログラムとして表現されているはずです。

windowSpecのソースコード

GUIツールを使い続ける限り、ユーザでしかありません。是非、その中のSmalltalkプログラムを操るディベロッパを目指してください!(私も目指さねば。。。