MVC (Model-View-Controller)
- 導入
- 準備
- 問題
MVC を利用して、次のようなツールを作成してみましょう。
- MVC による表示
- MVC による時計 (アナログ時計とデジタル時計)
- MVC による手描き
サンプルプログラムのソースをファイルインします。
| aPoint |
aPoint := -100 @ -50.
((OrderedCollection new)
add: 'Exercise-Display.st' -> #('Foo-Display' #{FooDisplayModel});
add: 'Exercise-Clock.st' -> #('Foo-Clock' #{FooClockModel});
add: 'Exercise-Freehand.st' -> #('Foo-Freehand' #{FooFreehandModel});
yourself) do:
[:each |
| aString aURL aFilename aBrowser aWindow aRectangle aPackage aNavigator aClass aProtocol aSelector |
aString := 'http://www.cc.kyoto-su.ac.jp/~atsushi/Programs/VisualWorks/Exercises/Exercise_MVC/' , each key.
aURL := JunURL named: aString.
aURL exists ifFalse: [^nil].
aFilename := Filename defaultDirectory construct: aURL asURI tail.
aURL downloadTo: aFilename.
aFilename exists ifFalse: [^nil].
aFilename fileIn.
aBrowser := #{Refactory.Browser.RefactoringBrowser} value open.
aWindow := aBrowser builder ifNil: [^nil] ifNotNil: [:aBuilder | aBuilder window].
aRectangle := JunGeometry alignedBoxWithScreenCenter: 800 @ 600.
aWindow displayBox: (aRectangle translatedBy: aPoint).
aPackage := Store.Registry packageNamed: each value first.
aPackage ifNil: [^nil].
aNavigator := aBrowser navigator.
aClass := each value last value class.
aProtocol := #examples.
aSelector := #example1.
(aNavigator state)
pundles: (Array with: aPackage);
classesAndNameSpaces: (Array with: aClass);
protocols: (Array with: aProtocol);
selectors: (Array with: aSelector).
aNavigator
setState: aNavigator state;
changed.
aPoint := aPoint translatedBy: 100 @ 50]
プログラムは、一部虫食いになっています。
スーパクラスのMVCの機能も参考にして、それぞれのツールを完成させましょう。
MVC(スーパークラス)
各ツールのスーパークラスは以下のようになっています。
JunModel example1
ウィンドウを開いた直後や、再描画するような操作(最小化して元に戻すなど)を行うと、トランスクリプトに「view received a message
'displayOn: graphicsContext' at」に続いて、現在時間が出力されます。
ウィンドウの中をドラッグすると、トランスクリプトに「red button pressed」に続いて、マウスの座標と現在時間が出力されます。
選択した画像ファイルや、スクリーンから切り取ったものを、ウィンドウ内にきちんと表示できるようにしましょう。
FooDisplayModel example1
 |
ー (ファイル選択) → |
 |
 |
ー (ドラッグで領域指定) → |
 |
|
アナログ時計とデジタル時計を正常に動作させましょう。
FooClockModel example1
アナログ時計は秒針を表示してください。
FooClockModel example2
デジタル時計は中央に現在時間を表示してください。
FooClockModel example3
マウスでドラッグした軌跡を表示できるようにしましょう。
FooFreehandModel example1
いろいろな色を使って、素敵なイラストを描いてください。
オプション問題:塗りつぶし
塗りつぶしができるようにしてみましょう。(難易度:高)
作品集
歴代の学生さんたちが描いてくれたものを集めました。
参考
青木塾で行っている「MyFirstMVC:初めてのアプリケーション」を以下に置きますので参考にしてください。
Updated: 2015/11/08 (Created: 2008/04/01)
