MVC (Model-View-Controller)

  1. 導入
  2. 準備
  3. 問題

1. 導入

MVC を利用して、次のようなツールを作成してみましょう。

FooDisplayModel01_2.jpg FooClockModel_Analog.jpg FooClockModel_Digital.jpg Freehand_Tegaki.jpg

2. 準備

サンプルプログラムのソースをファイルインします。

| 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]
SystemBrowsers.png

3. 問題

プログラムは、一部虫食いになっています。
スーパクラスのMVCの機能も参考にして、それぞれのツールを完成させましょう。

MVC(スーパークラス)

各ツールのスーパークラスは以下のようになっています。

DesignMVC.jpg
JunModel example1
JunModel.jpg JunModel_Transcript.jpg

ウィンドウを開いた直後や、再描画するような操作(最小化して元に戻すなど)を行うと、トランスクリプトに「view received a message 'displayOn: graphicsContext' at」に続いて、現在時間が出力されます。

ウィンドウの中をドラッグすると、トランスクリプトに「red button pressed」に続いて、マウスの座標と現在時間が出力されます。

問題 1(表示)

選択した画像ファイルや、スクリーンから切り取ったものを、ウィンドウ内にきちんと表示できるようにしましょう。

DesignDisplay.jpg
FooDisplayModel example1
FooDisplayModel02_1.jpg ー (ファイル選択) → FooDisplayModel02_2.jpg
FooDisplayModel01_1.jpg ー (ドラッグで領域指定) → FooDisplayModel01_2.jpg

問題 2(時計)

アナログ時計とデジタル時計を正常に動作させましょう。

DesignClock.jpg
FooClockModel example1
FooClockModel_Analog.jpg

アナログ時計は秒針を表示してください。

FooClockModel example2
FooClockModel_Digital.jpg

デジタル時計は中央に現在時間を表示してください。

FooClockModel example3
FooClockModel_Analog2.jpg FooClockModel_Digital2.jpg

問題 3(手描き)

マウスでドラッグした軌跡を表示できるようにしましょう。

DesignFreehand.jpg
FooFreehandModel example1
FooFreehandModel.jpg FooFreehandModel_Color.jpg

いろいろな色を使って、素敵なイラストを描いてください。

Freehand_Stroke.jpg Freehand_Tegaki.jpg

オプション問題:塗りつぶし

塗りつぶしができるようにしてみましょう。(難易度:高)

Freehand_Ajisai.jpg

作品集

歴代の学生さんたちが描いてくれたものを集めました。

g1215543.jpg g1210548.jpg g1144858.jpg g1144614.jpg
g1114590.jpg g1111179.jpg g1103998.jpg g1100595.jpg
g0937227.jpg g0922764.jpg g1044093.jpg g1044156.jpg
g1044309.jpg g1044408.jpg g1044480_2.jpg g1045038.jpg
g1111142.jpg 20120110_1.jpg 20120110_2.jpg 20120110_3.jpg
20111220_1.jpg 20111220_2.jpg 20111220_3.jpg 20111220_4.jpg
20080805221231.jpg 20090717222157.jpg 20090717235301.jpg 20090719_2.jpg
20090719_3.jpg 20090719_4.jpg 20070812_1.jpg 20080805_1.jpg
20090719_1.jpg 20030806_1.jpg 20030806_2.jpg 20030806_3.jpg

参考

青木塾で行っている「MyFirstMVC:初めてのアプリケーション」を以下に置きますので参考にしてください。


Updated: 2015/11/08 (Created: 2008/04/01) KSU AokiHanko