SqueakByExample:11.8 - Revision history

Onionmixer: 번역수정

2013-09-16T09:43:34Z

번역수정

New page

==완전한 예제==

주사위(die)<ref name="주석11-4">NB: One die, two dice</ref>를 굴리기 위한 morph 를 만들어보겠습니다 morph 를 클릭하면, 빠른 반복을 통해 모든면이 변경되어 표시되며, 다시 클릭을 하면 애니메이션을 멈추는 동작이 되도록 할것입니다.

[[image:die.png|none|134px|thumb|그림 11.8: Morphic 에서의 주사위]]

{{CommentSqueak|{{Template:HighlightBold|Morph}} 대신에 {{Template:HighlightBold|BorderedMorph}}의 서브클래스로 die 를 정의하도록 하겠습니다.. 왜나하면 여기서 테두리를 활용할 것이기 때문입니다.}}

클래스 11.27: 주사위 morph 정의하기

<syntaxhighlight lang="smalltalk">
BorderedMorph subclass: #DieMorph
instanceVariableNames: 'faces dieValue isStopped'
classVariableNames: ''
poolDictionaries: ''
category: 'SBE-Morphic'
</syntaxhighlight>

인스턴스 변수 faces 는 주사위에 대한 면의 개수를 기록하며, 여기서는 주사위의 면들을 9 개까지 지정하도록 하겠습니다.

dieValue는 현재 표시되고있는 면의 값을 나타내며, isStopped 는 주사위의 애니메이션이 정지된경우 true 가 됩니다. 주사위의 인스턴스를 만들기 위해, DieMorph 의 class side 에 faces: n 메서드를 정의해서, n 개의 면을 가지는 새로운 주사위를 만들어 보겠습니다.

메서드 11.28: 선호하는 면의 개수를 가지는 새로운 주사위를 만들기

<syntaxhighlight lang="smalltalk">
DieMorph class>>faces: aNumber
↑ self new faces: aNumber
</syntaxhighlight>

initialize 메서드는 이전과 같은 방식으로 instance side 에서 정의합니다. 덧붙이자면 New 는 새롭게 만들어진 인스턴스에 initialize를 전송한다는 것을 기억해 주십시오.

메서드 11.29: DieMorph의 인스턴스 초기화 하기

<syntaxhighlight lang="smalltalk">
DieMorph>>initialize
super initialize.
self extent: 50 @ 50.
self useGradientFill; borderWidth: 2; useRoundedCorners.
self setBorderStyle: #complexRaised.
self fillStyle direction: self extent.
self color: Color green.
dieValue := 1.
faces := 6.
isStopped := false
</syntaxhighlight>

주사위(die)의 모양새를 보다 좋게 하게 위해서, BorderedMorph 의 메서드를 몇가지 사용하겠습니다: 입체적인 효과를 얻기 위해서 테두리선을 굵게하거나, 모서리를 다듬거나, 보이는면에 그라디언트를 적용한다던가 등의 작업을 합니다. instance side 의 faces: 메서드는, 올바른 인자가 주어지고 있는지를 점검하기 위한 내용을 정의합니다.

메서드 11.30: 주사위 면의 개수를 설정하기

<syntaxhighlight lang="smalltalk">
DieMorph>>faces: aNumber
"Set the number of faces"
(aNumber isInteger
and: [aNumber > 0]
and: [aNumber <= 9])
ifTrue: [faces := aNumber]
</syntaxhighlight>

주사위를 만들었을 때, 메시지가 전송되는 순서를 리뷰하는 것이 좋습니다. 예를 들어, {{Template:HighlightBold|DieMorph face:9}} 을 평가한다고 가정해 보겠습니다:

# 클래스 메서드 DieMorph class>>faces: 는 DieMorph 클래스에 new 메시지를 발송합니다.
# new 메서드(Behavior 클래스로부터 상속된 DieMorph 클래스)를 이용해서, 새로운 인스턴스가 생성되고 initialize 를 생성된 인스턴스에 발송합니다.
# DieMorph 에서의 initialize 메서드는 faces 를 초기 값 6 으로 설정합니다.
# DieMorph class>>new 메서드를 실행하면 새로운 인스턴스를 만든후, 새로 만들어진 인스턴스에 클래스 메서드인 DieMorph class>>faces: 에 faces: 9메시지를 발송합니다.
# 인스턴스 메서드인 DieMorph>>faces: 가 실행되며 인스턴스 변수인 faces 를 9 로 설정합니다.

drawOn: 메서드를 정의하기 전에, 표시되는 면에 그리는 눈의 위치를 요구하는 메서드를 몇개 만들어보겠습니다.

메서드 11.31: die 의 faces 에 점 그림을 배치하기 위한 9 개의 메서드

<syntaxhighlight lang="smalltalk">
DieMorph>>face1
↑{0.5@0.5}
DieMorph>>face2
↑{0.25@0.25 . 0.75@0.75}
DieMorph>>face3
↑{0.25@0.25 . 0.75@0.75 . 0.5@0.5}
DieMorph>>face4
↑{0.25@0.25 . 0.75@0.25 . 0.75@0.75 . 0.25@0.75}
DieMorph>>face5
↑{0.25@0.25 . 0.75@0.25 . 0.75@0.75 . 0.25@0.75 . 0.5@0.5}
DieMorph>>face6
↑{0.25@0.25 . 0.75@0.25 . 0.75@0.75 . 0.25@0.75 . 0.25@0.5 . 0.75@0.5}
DieMorph>>face7
↑{0.25@0.25 . 0.75@0.25 . 0.75@0.75 . 0.25@0.75 . 0.25@0.5 . 0.75@0.5 . 0.5@0.5}
DieMorph>>face8
↑{0.25@0.25 . 0.75@0.25 . 0.75@0.75 . 0.25@0.75 . 0.25@0.5 . 0.75@0.5 . 0.5@0.5 . 0.5@0.25}
DieMorph>>face9
↑{0.25@0.25 . 0.75@0.25 . 0.75@0.75 . 0.25@0.75 . 0.25@0.5 . 0.75@0.5 . 0.5@0.5 . 0.5@0.25 . 0.5@0.75}
</syntaxhighlight>

각 좌표는 1 x 1 크기의 사각형 범위안에 있습니다; 보여지는 면에 표시될 점의 현재 값은 그대로 사용하기에는 너무 작기때문에, 실제 표시작업에 사용하기 위해서는 값을 조절해야 합니다.

drawOn: 메서드는 두 가지 작업을 수행합니다: 주사위의 배경을 그리기 위해서 super 클래스로 메시지를 전송하며, 주사위에 들어갈 점을 그립니다.

메서드 11.32: 주사위 morph 그리기

<syntaxhighlight lang="smalltalk">
DieMorph>>drawOn: aCanvas
super drawOn: aCanvas.
(self perform: ('face' , dieValue asString) asSymbol)
do: [:aPoint | self drawDotOn: aCanvas at: aPoint]
</syntaxhighlight>

위 메서드의 뒷부분은 스몰토크의 replection 기능을 사용합니다. 주사위의 면에 점을 그리는 작업은, faceX 메서드로부터 얻은 좌표의 콜렉션에 대해서, 순서대로 각 좌표에 대한 drawDotOn:at: 메시지를 보내서 진행합니다. 알맞은 faceX 메서드를 호출하기 위해, perform: 메서드를 사용해서, ('face', dieValueasString) asSymbol 에 의해 만들어진 string 을 메시지로 전송합니다. 이런식의 perform: 메서드에 대한 사용법은 몇번 더 보게 될겁니다.

메서드 11.33: 면에 한개의 점 그리기

<syntaxhighlight lang="smalltalk">
DieMorph>>drawDotOn: aCanvas at: aPoint
aCanvas
fillOval: (Rectangle
center: self position + (self extent * aPoint)
extent: self extent / 6)
color: Color black
</syntaxhighlight>

좌표의 숫자범위는 현재 [0:1] 사이에 있기때문에, 주사위의 크기에 맞게 점의 좌표를 계산하기 위해서 self extent * aPoint 를 사용해서 좌표값을 변경하도록 하겠습니다.

{{CommentSqueak|워크스페이스를 통해서 주사위 인스턴스를 만들 수 있습니다.:}}

<syntaxhighlight lang="smalltalk">
(DieMorph faces: 6) openInWorld.
</syntaxhighlight>

주사위의 보여지는 면을 바꾸기 위해서, myDie dieValue: 4 와 같은 동작이 가능한 접근자<sup>accessor</sup> 를 만들어보겠습니다.

메서드 11.34: 주사위(die)의 현재 값을 설정하기

<syntaxhighlight lang="smalltalk">
DieMorph>>dieValue: aNumber
(aNumber isInteger
and: [aNumber > 0]
and: [aNumber <= faces])
ifTrue:
[dieValue := aNumber.
self changed]
</syntaxhighlight>

이제 주사위의 모든 면을 빠르게 보여주기 위한 애니메이션 시스템을 사용할 것입니다:

메서드 11.35: 주사위에 애니메이션 효과 주기
<syntaxhighlight lang="smalltalk">
DieMorph>>stepTime
↑ 100

DieMorph>>step
isStopped ifFalse: [self dieValue: (1 to: faces) atRandom]
</syntaxhighlight>

이제 주사위가 작동합니다!

클릭으로 애니메이션을 시작하거나 멈추기 위해, 이전에 마우스 이벤트에 관해 배운 내용을 적용해 보겠습니다. 먼저, 마우스 이벤트의 수신을 활성화합니다:

메서드 11.36: 애니메이션을 시작하고 멈추기 위해 마우스 클릭 처리하기

<syntaxhighlight lang="smalltalk">
DieMorph>>handlesMouseDown: anEvent
↑ true

DieMorph>>mouseDown: anEvent
anEvent redButtonPressed
ifTrue: [isStopped := isStopped not]
</syntaxhighlight>

이제 주사위를 클릭하면, 주사위가 돌아갑니다.

==Notes==
<references />

[[Category:SqueakByExample]]

Onionmixer at 04:42, 30 August 2012

2012-08-30T04:42:45Z

← Older revision		Revision as of 04:42, 30 August 2012
Line 20:		Line 20:


	인스턴스 변수 faces는 주사위 면들의 개수를 기록하며, 우리는 9개의 면까지 주사위의 면들을 만들 수 있습니다. dieValue는 현재 디스플레이된 면의 값을 기록하며, isStopped는 주사위의 애니메이션이 멈출 경우 true가 됩니다. 주사위(die) 인스턴스를 만들기 위해, 우리는 faces를 정의합니다: n faces로 새로운 주사위 (die)를 만들기 위해 DieMorph의 클래스 side(the class side)에 있는 n ~~메소드를~~ 정의합니다.		인스턴스 변수 faces는 주사위 면들의 개수를 기록하며, 우리는 9개의 면까지 주사위의 면들을 만들 수 있습니다. dieValue는 현재 디스플레이된 면의 값을 기록하며, isStopped는 주사위의 애니메이션이 멈출 경우 true가 됩니다. 주사위(die) 인스턴스를 만들기 위해, 우리는 faces를 정의합니다: n faces로 새로운 주사위 (die)를 만들기 위해 DieMorph의 클래스 side(the class side)에 있는 n 메서드를 정의합니다.


	~~메소드~~ 11.28: 우리가 좋아하는 면의 개수로 새로운 주사위를 만들기		메서드 11.28: 우리가 좋아하는 면의 개수로 새로운 주사위를 만들기
	<syntaxhighlight lang="smalltalk">		<syntaxhighlight lang="smalltalk">
	DieMorph class»faces: aNumber		DieMorph class»faces: aNumber
Line 30:		Line 30:


	초기화 ~~메소드~~(initialize method)는 평상시의 방법으로 인스턴스 사이트(the instance side)에서 정의됩니다. New는 새롭게 만들어진 인스턴스에 initialize를 발송한다는 것을 기억해 주십시오.		초기화 메서드(initialize method)는 평상시의 방법으로 인스턴스 사이트(the instance side)에서 정의됩니다. New는 새롭게 만들어진 인스턴스에 initialize를 발송한다는 것을 기억해 주십시오.


	~~메소드~~ 11.29: DieMorph의 인스턴스들을 초기화 하기		메서드 11.29: DieMorph의 인스턴스들을 초기화 하기
	<syntaxhighlight lang="smalltalk">		<syntaxhighlight lang="smalltalk">
	DieMorph»initialize		DieMorph»initialize
Line 48:		Line 48:


	우리는 주사위(die)에 훌륭한 외관을 부여하기 위해 몇 가지 BorderedMorph의 ~~메소드를~~ 사용합니다: 상승효과(raised effect), 모서리 다듬기(rounded corners)와 함께 굵은 경계(thick border) 그리고 보이는 면에 컬러 경사도(gradient).		우리는 주사위(die)에 훌륭한 외관을 부여하기 위해 몇 가지 BorderedMorph의 메서드를 사용합니다: 상승효과(raised effect), 모서리 다듬기(rounded corners)와 함께 굵은 경계(thick border) 그리고 보이는 면에 컬러 경사도(gradient).
	우리는 인스턴스 ~~메소드~~ faces를 다음과 같이 유효한 파라미터를 점검하기위해 정의합니다:		우리는 인스턴스 메서드 faces를 다음과 같이 유효한 파라미터를 점검하기위해 정의합니다:


	~~메소드~~ 11.30: 주사위 면들의 개수를 설정하기		메서드 11.30: 주사위 면들의 개수를 설정하기
	<syntaxhighlight lang="smalltalk">		<syntaxhighlight lang="smalltalk">
	DieMorph»faces: aNumber		DieMorph»faces: aNumber
Line 64:		Line 64:

	주사위가 만들어 졌을 때, 발송된 메시지들의 순서를 리뷰하는 것이 좋습니다. 예를 들어, 우리가 {{Template:HighlightBold\|DieMorph face:9}}을 평가함으로써 시작한다면:		주사위가 만들어 졌을 때, 발송된 메시지들의 순서를 리뷰하는 것이 좋습니다. 예를 들어, 우리가 {{Template:HighlightBold\|DieMorph face:9}}을 평가함으로써 시작한다면:
	# 클래스 ~~메소드~~ DieMorph class»faces:는 DieMorph 클래스에 new를 발송합니다.		# 클래스 메서드 DieMorph class»faces:는 DieMorph 클래스에 new를 발송합니다.
	# new를 위한 ~~메소드는~~ (Behavior로부터 DieMorph에 의해 상속된) 새로운 인스턴스를 만들고 초기화 메시지(the initialize message)를 그 인스턴스에 발송합니다.		# new를 위한 메서드는 (Behavior로부터 DieMorph에 의해 상속된) 새로운 인스턴스를 만들고 초기화 메시지(the initialize message)를 그 인스턴스에 발송합니다.
	# DieMorph에서의 초기화 ~~메소드~~(the initialize method)는 초기 값 6으로 faces를 설정합니다.		# DieMorph에서의 초기화 메서드(the initialize method)는 초기 값 6으로 faces를 설정합니다.
	# DieMorph class»new는 새로운 인스턴스에 메시지 faces:9을 발송하는 클래스 ~~메소드~~ DieMorph class»faces:로 리턴합니다.		# DieMorph class»new는 새로운 인스턴스에 메시지 faces:9을 발송하는 클래스 메서드 DieMorph class»faces:로 리턴합니다.
	# 인스턴스 변수를 9로 설정하며, 인스턴스 ~~메소드~~ DieMorph»faces:가 지금 실행됩니다.		# 인스턴스 변수를 9로 설정하며, 인스턴스 메서드 DieMorph»faces:가 지금 실행됩니다.

	drawOn: 을 정의하기 전에, 우리는 디스플레이된 표면(face)에 점(dots)을 배치하기 위한 몇 가지 ~~메소드가~~ 필요합니다.		drawOn: 을 정의하기 전에, 우리는 디스플레이된 표면(face)에 점(dots)을 배치하기 위한 몇 가지 메서드가 필요합니다.


	~~메소드~~ 11.31: die의 faces에 점들(points)를 배치하기 위한 9개의 ~~메소드~~		메서드 11.31: die의 faces에 점들(points)를 배치하기 위한 9개의 메서드
	<syntaxhighlight lang="smalltalk">		<syntaxhighlight lang="smalltalk">
	DieMorph»face1		DieMorph»face1
Line 96:		Line 96:


	이 ~~메소드들은~~ 각 표면(face)을 찍을 점(dots)의 좌표(coordinates)의 컬렉션들을 정의합니다. 좌표(coordinates)는 1x1 스퀘어 이며, 우리는 단순히 실제의 점(dots)을 배치 하기 위해 그것들을 측량할 필요가 있습니다.		이 메서드들은 각 표면(face)을 찍을 점(dots)의 좌표(coordinates)의 컬렉션들을 정의합니다. 좌표(coordinates)는 1x1 스퀘어 이며, 우리는 단순히 실제의 점(dots)을 배치 하기 위해 그것들을 측량할 필요가 있습니다.

	drawOn: ~~메소드는~~ 두 가지 일들을 수행합니다: 이것은 수퍼발송(super-send)으로 주사위 배경(die background)을 그리고, 그 다음 점(dots)를 그립니다.		drawOn: 메서드는 두 가지 일들을 수행합니다: 이것은 수퍼발송(super-send)으로 주사위 배경(die background)을 그리고, 그 다음 점(dots)를 그립니다.


	~~메소드~~ 11.32: 주사위 모프(die morph) 그리기		메서드 11.32: 주사위 모프(die morph) 그리기
	<syntaxhighlight lang="smalltalk">		<syntaxhighlight lang="smalltalk">
	DieMorph»drawOn: aCanvas		DieMorph»drawOn: aCanvas
Line 110:		Line 110:


	이 ~~메소드의~~ 두 번째 부분은 스몰토크의 반영 능력(the reflective capacities)을 사용합니다. Face의 dots를 그리는 것은 각 좌표를 위해 drawDotOn:at: 메시지를 발송함으로써, face를 위해, faceX ~~메소드를~~ 통해 주어진 컬렉션(collection)에 반복적용(iteration)을 하는 단순한 작업입니다. 정확한 faceX ~~메소드를~~ 콜하기 위해, 우리는 여기 ('face', dieValueasString) asSymbol 문자열로부터 구축된 메시지를 발송하는 perform: ~~메소드를~~ 사용합니다. 여러분은 이 perform:quite의 사용을 규칙적으로 마주치게 될 것입니다.		이 메서드의 두 번째 부분은 스몰토크의 반영 능력(the reflective capacities)을 사용합니다. Face의 dots를 그리는 것은 각 좌표를 위해 drawDotOn:at: 메시지를 발송함으로써, face를 위해, faceX 메서드를 통해 주어진 컬렉션(collection)에 반복적용(iteration)을 하는 단순한 작업입니다. 정확한 faceX 메서드를 콜하기 위해, 우리는 여기 ('face', dieValueasString) asSymbol 문자열로부터 구축된 메시지를 발송하는 perform: 메서드를 사용합니다. 여러분은 이 perform:quite의 사용을 규칙적으로 마주치게 될 것입니다.


	~~메소드~~ 11.33 표면(face)에 단일 점(dot)을 그리기		메서드 11.33 표면(face)에 단일 점(dot)을 그리기
	<syntaxhighlight lang="smalltalk">		<syntaxhighlight lang="smalltalk">
	DieMorph»drawDotOn: aCanvas at: aPoint		DieMorph»drawDotOn: aCanvas at: aPoint
Line 135:		Line 135:
	디스플레이된 표면(face)을 변경하기 위해, 우리는 myDie dieValue:4로서 우리가 사용할 수 있는 accessor를 만듭니다.		디스플레이된 표면(face)을 변경하기 위해, 우리는 myDie dieValue:4로서 우리가 사용할 수 있는 accessor를 만듭니다.

	~~메소드~~ 11.34: 주사위(die)의 현재 값을 설정하기		메서드 11.34: 주사위(die)의 현재 값을 설정하기
	<syntaxhighlight lang="smalltalk">		<syntaxhighlight lang="smalltalk">
	DieMorph»dieValue: aNumber		DieMorph»dieValue: aNumber
Line 150:		Line 150:


	~~메소드~~ 11.35: 주사위(die)에 에니메이션(움직임) 효과 주기		메서드 11.35: 주사위(die)에 에니메이션(움직임) 효과 주기
	<syntaxhighlight lang="smalltalk">		<syntaxhighlight lang="smalltalk">
	DieMorph»stepTime		DieMorph»stepTime
Line 163:		Line 163:


	~~메소드~~ 11.36: 에니메이션을 시작하고 멈추기 위해 마우스 클릭 취급(handling)하기		메서드 11.36: 에니메이션을 시작하고 멈추기 위해 마우스 클릭 취급(handling)하기
	<syntaxhighlight lang="smalltalk">		<syntaxhighlight lang="smalltalk">
	DieMorph»handlesMouseDown: anEvent		DieMorph»handlesMouseDown: anEvent

Onionmixer: SBE 완전한예제 페이지 추가

2012-08-17T13:32:10Z

SBE 완전한예제 페이지 추가

New page

==완전한 예제==

주사위(die)를<ref name="주석11-4">NB: One die, two dice</ref> 던지기 위해 모프를 디자인 해봅시다. 모프를 클릭하면, 신속한 루프(quick loop)에서 주사위의 모든 면들의 값들을 디스플레이하고, 다시 클릭을 하면 그 에니메이션을 멈춥니다.

[[image:die.png|none|134px|thumb|그림 11.8: Mophic에서의 주사위]]

{{CommentSqueak|{{Template:HighlightBold|morph}} 대신에 {{Template:HighlightBold|BorderedMorph}}의 서브클래스로서 주사위(die)를 정의합니다. 그 이유는 우리가 경계(border)를 활용할 것이기 때문입니다.}}

클래스 11.27: 주사위 모프(the die morph) 정의하기
<syntaxhighlight lang="smalltalk">
BorderedMorph subclass: #DieMorph
instanceVariableNames: 'faces dieValue isStopped'
classVariableNames: ''
poolDictionaries: ''
category: 'SBE--Morphic'
</syntaxhighlight>

인스턴스 변수 faces는 주사위 면들의 개수를 기록하며, 우리는 9개의 면까지 주사위의 면들을 만들 수 있습니다. dieValue는 현재 디스플레이된 면의 값을 기록하며, isStopped는 주사위의 애니메이션이 멈출 경우 true가 됩니다. 주사위(die) 인스턴스를 만들기 위해, 우리는 faces를 정의합니다: n faces로 새로운 주사위 (die)를 만들기 위해 DieMorph의 클래스 side(the class side)에 있는 n 메소드를 정의합니다.

메소드 11.28: 우리가 좋아하는 면의 개수로 새로운 주사위를 만들기
<syntaxhighlight lang="smalltalk">
DieMorph class»faces: aNumber
↑ self new faces: aNumber
</syntaxhighlight>

초기화 메소드(initialize method)는 평상시의 방법으로 인스턴스 사이트(the instance side)에서 정의됩니다. New는 새롭게 만들어진 인스턴스에 initialize를 발송한다는 것을 기억해 주십시오.

메소드 11.29: DieMorph의 인스턴스들을 초기화 하기
<syntaxhighlight lang="smalltalk">
DieMorph»initialize
super initialize.
self extent: 50 @ 50.
self useGradientFill; borderWidth: 2; useRoundedCorners.
self setBorderStyle: #complexRaised.
self fillStyle direction: self extent.
self color: Color green.
dieValue := 1.
faces := 6.
isStopped := false
</syntaxhighlight>

우리는 주사위(die)에 훌륭한 외관을 부여하기 위해 몇 가지 BorderedMorph의 메소드를 사용합니다: 상승효과(raised effect), 모서리 다듬기(rounded corners)와 함께 굵은 경계(thick border) 그리고 보이는 면에 컬러 경사도(gradient).
우리는 인스턴스 메소드 faces를 다음과 같이 유효한 파라미터를 점검하기위해 정의합니다:

메소드 11.30: 주사위 면들의 개수를 설정하기
<syntaxhighlight lang="smalltalk">
DieMorph»faces: aNumber
"Set the number of faces"
(aNumber isInteger
and: [aNumber > 0]
and: [aNumber <= 9])
ifTrue: [faces := aNumber]
</syntaxhighlight>

주사위가 만들어 졌을 때, 발송된 메시지들의 순서를 리뷰하는 것이 좋습니다. 예를 들어, 우리가 {{Template:HighlightBold|DieMorph face:9}}을 평가함으로써 시작한다면:
# 클래스 메소드 DieMorph class»faces:는 DieMorph 클래스에 new를 발송합니다.
# new를 위한 메소드는 (Behavior로부터 DieMorph에 의해 상속된) 새로운 인스턴스를 만들고 초기화 메시지(the initialize message)를 그 인스턴스에 발송합니다.
# DieMorph에서의 초기화 메소드(the initialize method)는 초기 값 6으로 faces를 설정합니다.
# DieMorph class»new는 새로운 인스턴스에 메시지 faces:9을 발송하는 클래스 메소드 DieMorph class»faces:로 리턴합니다.
# 인스턴스 변수를 9로 설정하며, 인스턴스 메소드 DieMorph»faces:가 지금 실행됩니다.

drawOn: 을 정의하기 전에, 우리는 디스플레이된 표면(face)에 점(dots)을 배치하기 위한 몇 가지 메소드가 필요합니다.

메소드 11.31: die의 faces에 점들(points)를 배치하기 위한 9개의 메소드
<syntaxhighlight lang="smalltalk">
DieMorph»face1
↑{0.5@0.5}
DieMorph»face2
↑{0.25@0.25 . 0.75@0.75}
DieMorph»face3
↑{0.25@0.25 . 0.75@0.75 . 0.5@0.5}
DieMorph»face4
↑{0.25@0.25 . 0.75@0.25 . 0.75@0.75 . 0.25@0.75}
DieMorph»face5
↑{0.25@0.25 . 0.75@0.25 . 0.75@0.75 . 0.25@0.75 . 0.5@0.5}
DieMorph»face6
↑{0.25@0.25 . 0.75@0.25 . 0.75@0.75 . 0.25@0.75 . 0.25@0.5 . 0.75@0.5}
DieMorph»face7
↑{0.25@0.25 . 0.75@0.25 . 0.75@0.75 . 0.25@0.75 . 0.25@0.5 . 0.75@0.5 . 0.5@0.5}
DieMorph »face8
↑{0.25@0.25 . 0.75@0.25 . 0.75@0.75 . 0.25@0.75 . 0.25@0.5 . 0.75@0.5 . 0.5@0.5 . 0.5@0.25}
DieMorph »face9
↑{0.25@0.25 . 0.75@0.25 . 0.75@0.75 . 0.25@0.75 . 0.25@0.5 . 0.75@0.5 . 0.5@0.5 . 0.5@0.25 . 0.5@0.75}
</syntaxhighlight>

이 메소드들은 각 표면(face)을 찍을 점(dots)의 좌표(coordinates)의 컬렉션들을 정의합니다. 좌표(coordinates)는 1x1 스퀘어 이며, 우리는 단순히 실제의 점(dots)을 배치 하기 위해 그것들을 측량할 필요가 있습니다.

drawOn: 메소드는 두 가지 일들을 수행합니다: 이것은 수퍼발송(super-send)으로 주사위 배경(die background)을 그리고, 그 다음 점(dots)를 그립니다.

메소드 11.32: 주사위 모프(die morph) 그리기
<syntaxhighlight lang="smalltalk">
DieMorph»drawOn: aCanvas
super drawOn: aCanvas.
(self perform: ('face' , dieValue asString) asSymbol)
do: [:aPoint | self drawDotOn: aCanvas at: aPoint]
</syntaxhighlight>

이 메소드의 두 번째 부분은 스몰토크의 반영 능력(the reflective capacities)을 사용합니다. Face의 dots를 그리는 것은 각 좌표를 위해 drawDotOn:at: 메시지를 발송함으로써, face를 위해, faceX 메소드를 통해 주어진 컬렉션(collection)에 반복적용(iteration)을 하는 단순한 작업입니다. 정확한 faceX 메소드를 콜하기 위해, 우리는 여기 ('face', dieValueasString) asSymbol 문자열로부터 구축된 메시지를 발송하는 perform: 메소드를 사용합니다. 여러분은 이 perform:quite의 사용을 규칙적으로 마주치게 될 것입니다.

메소드 11.33 표면(face)에 단일 점(dot)을 그리기
<syntaxhighlight lang="smalltalk">
DieMorph»drawDotOn: aCanvas at: aPoint
aCanvas
fillOval: (Rectangle
center: self position + (self extent * aPoint)
extent: self extent / 6)
color: Color black
</syntaxhighlight>

좌표들이 [0:1] interval 에 정상화되기 때문에, 우리는 우리의 die: self extent * aPoint의 치수(diemensions)들로 그 좌표들을 조정(scale)합니다.

{{CommentSqueak|우리는 워크스페이스로 부터 주사위(die) 인스턴스를 이미 만들었습니다:}}
<syntaxhighlight lang="smalltalk">
(DieMorph faces: 6) openInWorld.
</syntaxhighlight>

디스플레이된 표면(face)을 변경하기 위해, 우리는 myDie dieValue:4로서 우리가 사용할 수 있는 accessor를 만듭니다.

메소드 11.34: 주사위(die)의 현재 값을 설정하기
<syntaxhighlight lang="smalltalk">
DieMorph»dieValue: aNumber
(aNumber isInteger
and: [aNumber > 0]
and: [aNumber <= faces])
ifTrue:
[dieValue := aNumber.
self changed]
</syntaxhighlight>

이제 우리는 모든 표면(faces)을 신속하게 보여드리기 위해 에니메이션 시스템(animation system)을 사용할 것입니다:

메소드 11.35: 주사위(die)에 에니메이션(움직임) 효과 주기
<syntaxhighlight lang="smalltalk">
DieMorph»stepTime
↑ 100

DieMorph»step
isStopped ifFalse: [self dieValue: (1 to: faces) atRandom]
</syntaxhighlight>

이제 주사위가 돌아갑니다. 클릭으로 에니메이션을 시작하거나 멈추기 위해 우리가 이전에 마우스 이벤트에 관해 배운 것을 사용하게 될 것입니다. 먼저, 마우스 이벤트(mouse events)의 수신(reception)을 활성화합니다:

메소드 11.36: 에니메이션을 시작하고 멈추기 위해 마우스 클릭 취급(handling)하기
<syntaxhighlight lang="smalltalk">
DieMorph»handlesMouseDown: anEvent
↑ true

DieMorph»mouseDown: anEvent
anEvent redButtonPressed
ifTrue: [isStopped := isStopped not]
</syntaxhighlight>

우리가 주사위(die)를 클릭하면, 그 주사위가 돌아가게 됩니다.

==Notes==
<references />

[[Category:SqueakByExample]]