https://trans.onionmixer.net/mediawiki/index.php?title=SqueakByExample:11.8&feed=atom&action=history
SqueakByExample:11.8 - Revision history
2024-03-28T21:01:51Z
Revision history for this page on the wiki
MediaWiki 1.38.1
https://trans.onionmixer.net/mediawiki/index.php?title=SqueakByExample:11.8&diff=2226&oldid=prev
Onionmixer: 번역수정
2013-09-16T09:43:34Z
<p>번역수정</p>
<p><b>New page</b></p><div>==완전한 예제==<br />
<br />
주사위(die)<ref name="주석11-4">NB: One die, two dice</ref>를 굴리기 위한 morph 를 만들어보겠습니다 morph 를 클릭하면, 빠른 반복을 통해 모든면이 변경되어 표시되며, 다시 클릭을 하면 애니메이션을 멈추는 동작이 되도록 할것입니다.<br />
<br />
<br />
[[image:die.png|none|134px|thumb|그림 11.8: Morphic 에서의 주사위]]<br />
<br />
<br />
{{CommentSqueak|{{Template:HighlightBold|Morph}} 대신에 {{Template:HighlightBold|BorderedMorph}}의 서브클래스로 die 를 정의하도록 하겠습니다.. 왜나하면 여기서 테두리를 활용할 것이기 때문입니다.}}<br />
<br />
<br />
클래스 11.27: 주사위 morph 정의하기<br />
<br />
<syntaxhighlight lang="smalltalk"><br />
BorderedMorph subclass: #DieMorph<br />
instanceVariableNames: 'faces dieValue isStopped'<br />
classVariableNames: ''<br />
poolDictionaries: ''<br />
category: 'SBE-Morphic'<br />
</syntaxhighlight><br />
<br />
<br />
인스턴스 변수 faces 는 주사위에 대한 면의 개수를 기록하며, 여기서는 주사위의 면들을 9 개까지 지정하도록 하겠습니다. <br />
<br />
dieValue는 현재 표시되고있는 면의 값을 나타내며, isStopped 는 주사위의 애니메이션이 정지된경우 true 가 됩니다. 주사위의 인스턴스를 만들기 위해, DieMorph 의 class side 에 faces: n 메서드를 정의해서, n 개의 면을 가지는 새로운 주사위를 만들어 보겠습니다.<br />
<br />
<br />
메서드 11.28: 선호하는 면의 개수를 가지는 새로운 주사위를 만들기<br />
<br />
<syntaxhighlight lang="smalltalk"><br />
DieMorph class>>faces: aNumber<br />
↑ self new faces: aNumber<br />
</syntaxhighlight><br />
<br />
<br />
initialize 메서드는 이전과 같은 방식으로 instance side 에서 정의합니다. 덧붙이자면 New 는 새롭게 만들어진 인스턴스에 initialize를 전송한다는 것을 기억해 주십시오. <br />
<br />
<br />
메서드 11.29: DieMorph의 인스턴스 초기화 하기<br />
<br />
<syntaxhighlight lang="smalltalk"><br />
DieMorph>>initialize<br />
super initialize.<br />
self extent: 50 @ 50.<br />
self useGradientFill; borderWidth: 2; useRoundedCorners.<br />
self setBorderStyle: #complexRaised.<br />
self fillStyle direction: self extent.<br />
self color: Color green.<br />
dieValue := 1.<br />
faces := 6.<br />
isStopped := false<br />
</syntaxhighlight><br />
<br />
<br />
주사위(die)의 모양새를 보다 좋게 하게 위해서, BorderedMorph 의 메서드를 몇가지 사용하겠습니다: 입체적인 효과를 얻기 위해서 테두리선을 굵게하거나, 모서리를 다듬거나, 보이는면에 그라디언트를 적용한다던가 등의 작업을 합니다. instance side 의 faces: 메서드는, 올바른 인자가 주어지고 있는지를 점검하기 위한 내용을 정의합니다.<br />
<br />
메서드 11.30: 주사위 면의 개수를 설정하기<br />
<br />
<syntaxhighlight lang="smalltalk"><br />
DieMorph>>faces: aNumber<br />
"Set the number of faces"<br />
(aNumber isInteger<br />
and: [aNumber > 0]<br />
and: [aNumber <= 9])<br />
ifTrue: [faces := aNumber]<br />
</syntaxhighlight><br />
<br />
<br />
주사위를 만들었을 때, 메시지가 전송되는 순서를 리뷰하는 것이 좋습니다. 예를 들어, {{Template:HighlightBold|DieMorph face:9}} 을 평가한다고 가정해 보겠습니다:<br />
<br />
# 클래스 메서드 DieMorph class>>faces: 는 DieMorph 클래스에 new 메시지를 발송합니다.<br />
# new 메서드(Behavior 클래스로부터 상속된 DieMorph 클래스)를 이용해서, 새로운 인스턴스가 생성되고 initialize 를 생성된 인스턴스에 발송합니다.<br />
# DieMorph 에서의 initialize 메서드는 faces 를 초기 값 6 으로 설정합니다.<br />
# DieMorph class>>new 메서드를 실행하면 새로운 인스턴스를 만든후, 새로 만들어진 인스턴스에 클래스 메서드인 DieMorph class>>faces: 에 faces: 9메시지를 발송합니다.<br />
# 인스턴스 메서드인 DieMorph>>faces: 가 실행되며 인스턴스 변수인 faces 를 9 로 설정합니다.<br />
<br />
<br />
drawOn: 메서드를 정의하기 전에, 표시되는 면에 그리는 눈의 위치를 요구하는 메서드를 몇개 만들어보겠습니다.<br />
<br />
<br />
메서드 11.31: die 의 faces 에 점 그림을 배치하기 위한 9 개의 메서드<br />
<br />
<syntaxhighlight lang="smalltalk"><br />
DieMorph>>face1<br />
↑{0.5@0.5}<br />
DieMorph>>face2<br />
↑{0.25@0.25 . 0.75@0.75}<br />
DieMorph>>face3<br />
↑{0.25@0.25 . 0.75@0.75 . 0.5@0.5}<br />
DieMorph>>face4<br />
↑{0.25@0.25 . 0.75@0.25 . 0.75@0.75 . 0.25@0.75}<br />
DieMorph>>face5<br />
↑{0.25@0.25 . 0.75@0.25 . 0.75@0.75 . 0.25@0.75 . 0.5@0.5}<br />
DieMorph>>face6<br />
↑{0.25@0.25 . 0.75@0.25 . 0.75@0.75 . 0.25@0.75 . 0.25@0.5 . 0.75@0.5}<br />
DieMorph>>face7<br />
↑{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}<br />
DieMorph>>face8<br />
↑{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}<br />
DieMorph>>face9<br />
↑{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}<br />
</syntaxhighlight><br />
<br />
<br />
각 좌표는 1 x 1 크기의 사각형 범위안에 있습니다; 보여지는 면에 표시될 점의 현재 값은 그대로 사용하기에는 너무 작기때문에, 실제 표시작업에 사용하기 위해서는 값을 조절해야 합니다.<br />
<br />
<br />
drawOn: 메서드는 두 가지 작업을 수행합니다: 주사위의 배경을 그리기 위해서 super 클래스로 메시지를 전송하며, 주사위에 들어갈 점을 그립니다.<br />
<br />
<br />
메서드 11.32: 주사위 morph 그리기<br />
<br />
<syntaxhighlight lang="smalltalk"><br />
DieMorph>>drawOn: aCanvas<br />
super drawOn: aCanvas.<br />
(self perform: ('face' , dieValue asString) asSymbol)<br />
do: [:aPoint | self drawDotOn: aCanvas at: aPoint]<br />
</syntaxhighlight><br />
<br />
<br />
위 메서드의 뒷부분은 스몰토크의 replection 기능을 사용합니다. 주사위의 면에 점을 그리는 작업은, faceX 메서드로부터 얻은 좌표의 콜렉션에 대해서, 순서대로 각 좌표에 대한 drawDotOn:at: 메시지를 보내서 진행합니다. 알맞은 faceX 메서드를 호출하기 위해, perform: 메서드를 사용해서, ('face', dieValueasString) asSymbol 에 의해 만들어진 string 을 메시지로 전송합니다. 이런식의 perform: 메서드에 대한 사용법은 몇번 더 보게 될겁니다.<br />
<br />
<br />
메서드 11.33: 면에 한개의 점 그리기<br />
<br />
<syntaxhighlight lang="smalltalk"><br />
DieMorph>>drawDotOn: aCanvas at: aPoint<br />
aCanvas<br />
fillOval: (Rectangle<br />
center: self position + (self extent * aPoint)<br />
extent: self extent / 6)<br />
color: Color black<br />
</syntaxhighlight><br />
<br />
<br />
좌표의 숫자범위는 현재 [0:1] 사이에 있기때문에, 주사위의 크기에 맞게 점의 좌표를 계산하기 위해서 self extent * aPoint 를 사용해서 좌표값을 변경하도록 하겠습니다.<br />
<br />
<br />
{{CommentSqueak|워크스페이스를 통해서 주사위 인스턴스를 만들 수 있습니다.:}}<br />
<br />
<syntaxhighlight lang="smalltalk"><br />
(DieMorph faces: 6) openInWorld.<br />
</syntaxhighlight><br />
<br />
<br />
주사위의 보여지는 면을 바꾸기 위해서, myDie dieValue: 4 와 같은 동작이 가능한 접근자<sup>accessor</sup> 를 만들어보겠습니다.<br />
<br />
메서드 11.34: 주사위(die)의 현재 값을 설정하기 <br />
<br />
<syntaxhighlight lang="smalltalk"><br />
DieMorph>>dieValue: aNumber<br />
(aNumber isInteger<br />
and: [aNumber > 0]<br />
and: [aNumber <= faces])<br />
ifTrue:<br />
[dieValue := aNumber.<br />
self changed]<br />
</syntaxhighlight><br />
<br />
<br />
이제 주사위의 모든 면을 빠르게 보여주기 위한 애니메이션 시스템을 사용할 것입니다:<br />
<br />
<br />
메서드 11.35: 주사위에 애니메이션 효과 주기<br />
<syntaxhighlight lang="smalltalk"><br />
DieMorph>>stepTime<br />
↑ 100<br />
<br />
DieMorph>>step<br />
isStopped ifFalse: [self dieValue: (1 to: faces) atRandom]<br />
</syntaxhighlight><br />
<br />
<br />
이제 주사위가 작동합니다!<br />
<br />
클릭으로 애니메이션을 시작하거나 멈추기 위해, 이전에 마우스 이벤트에 관해 배운 내용을 적용해 보겠습니다. 먼저, 마우스 이벤트의 수신을 활성화합니다:<br />
<br />
<br />
메서드 11.36: 애니메이션을 시작하고 멈추기 위해 마우스 클릭 처리하기 <br />
<br />
<syntaxhighlight lang="smalltalk"><br />
DieMorph>>handlesMouseDown: anEvent<br />
↑ true<br />
<br />
DieMorph>>mouseDown: anEvent<br />
anEvent redButtonPressed<br />
ifTrue: [isStopped := isStopped not]<br />
</syntaxhighlight><br />
<br />
<br />
이제 주사위를 클릭하면, 주사위가 돌아갑니다.<br />
<br />
<br />
<br />
==Notes==<br />
<references /><br />
<br />
[[Category:SqueakByExample]]</div>
Onionmixer
https://trans.onionmixer.net/mediawiki/index.php?title=SqueakByExample:11.8&diff=2224&oldid=prev
Onionmixer at 04:42, 30 August 2012
2012-08-30T04:42:45Z
<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 04:42, 30 August 2012</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l20">Line 20:</td>
<td colspan="2" class="diff-lineno">Line 20:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>인스턴스 변수 faces는 주사위 면들의 개수를 기록하며, 우리는 9개의 면까지 주사위의 면들을 만들 수 있습니다. dieValue는 현재 디스플레이된 면의 값을 기록하며, isStopped는 주사위의 애니메이션이 멈출 경우 true가 됩니다. 주사위(die) 인스턴스를 만들기 위해, 우리는 faces를 정의합니다: n faces로 새로운 주사위 (die)를 만들기 위해 DieMorph의 클래스 side(the class side)에 있는 n <del style="font-weight: bold; text-decoration: none;">메소드를 </del>정의합니다.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>인스턴스 변수 faces는 주사위 면들의 개수를 기록하며, 우리는 9개의 면까지 주사위의 면들을 만들 수 있습니다. dieValue는 현재 디스플레이된 면의 값을 기록하며, isStopped는 주사위의 애니메이션이 멈출 경우 true가 됩니다. 주사위(die) 인스턴스를 만들기 위해, 우리는 faces를 정의합니다: n faces로 새로운 주사위 (die)를 만들기 위해 DieMorph의 클래스 side(the class side)에 있는 n <ins style="font-weight: bold; text-decoration: none;">메서드를 </ins>정의합니다.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">메소드 </del>11.28: 우리가 좋아하는 면의 개수로 새로운 주사위를 만들기</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">메서드 </ins>11.28: 우리가 좋아하는 면의 개수로 새로운 주사위를 만들기</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><syntaxhighlight lang="smalltalk"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><syntaxhighlight lang="smalltalk"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>DieMorph class»faces: aNumber</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>DieMorph class»faces: aNumber</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l30">Line 30:</td>
<td colspan="2" class="diff-lineno">Line 30:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>초기화 <del style="font-weight: bold; text-decoration: none;">메소드</del>(initialize method)는 평상시의 방법으로 인스턴스 사이트(the instance side)에서 정의됩니다. New는 새롭게 만들어진 인스턴스에 initialize를 발송한다는 것을 기억해 주십시오. </div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>초기화 <ins style="font-weight: bold; text-decoration: none;">메서드</ins>(initialize method)는 평상시의 방법으로 인스턴스 사이트(the instance side)에서 정의됩니다. New는 새롭게 만들어진 인스턴스에 initialize를 발송한다는 것을 기억해 주십시오. </div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">메소드 </del>11.29: DieMorph의 인스턴스들을 초기화 하기</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">메서드 </ins>11.29: DieMorph의 인스턴스들을 초기화 하기</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><syntaxhighlight lang="smalltalk"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><syntaxhighlight lang="smalltalk"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>DieMorph»initialize</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>DieMorph»initialize</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l48">Line 48:</td>
<td colspan="2" class="diff-lineno">Line 48:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>우리는 주사위(die)에 훌륭한 외관을 부여하기 위해 몇 가지 BorderedMorph의 <del style="font-weight: bold; text-decoration: none;">메소드를 </del>사용합니다: 상승효과(raised effect), 모서리 다듬기(rounded corners)와 함께 굵은 경계(thick border) 그리고 보이는 면에 컬러 경사도(gradient).</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>우리는 주사위(die)에 훌륭한 외관을 부여하기 위해 몇 가지 BorderedMorph의 <ins style="font-weight: bold; text-decoration: none;">메서드를 </ins>사용합니다: 상승효과(raised effect), 모서리 다듬기(rounded corners)와 함께 굵은 경계(thick border) 그리고 보이는 면에 컬러 경사도(gradient).</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>우리는 인스턴스 <del style="font-weight: bold; text-decoration: none;">메소드 </del>faces를 다음과 같이 유효한 파라미터를 점검하기위해 정의합니다: </div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>우리는 인스턴스 <ins style="font-weight: bold; text-decoration: none;">메서드 </ins>faces를 다음과 같이 유효한 파라미터를 점검하기위해 정의합니다: </div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">메소드 </del>11.30: 주사위 면들의 개수를 설정하기</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">메서드 </ins>11.30: 주사위 면들의 개수를 설정하기</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><syntaxhighlight lang="smalltalk"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><syntaxhighlight lang="smalltalk"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>DieMorph»faces: aNumber</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>DieMorph»faces: aNumber</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l64">Line 64:</td>
<td colspan="2" class="diff-lineno">Line 64:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>주사위가 만들어 졌을 때, 발송된 메시지들의 순서를 리뷰하는 것이 좋습니다. 예를 들어, 우리가 {{Template:HighlightBold|DieMorph face:9}}을 평가함으로써 시작한다면:</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>주사위가 만들어 졌을 때, 발송된 메시지들의 순서를 리뷰하는 것이 좋습니다. 예를 들어, 우리가 {{Template:HighlightBold|DieMorph face:9}}을 평가함으로써 시작한다면:</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div># 클래스 <del style="font-weight: bold; text-decoration: none;">메소드 </del>DieMorph class»faces:는 DieMorph 클래스에 new를 발송합니다.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div># 클래스 <ins style="font-weight: bold; text-decoration: none;">메서드 </ins>DieMorph class»faces:는 DieMorph 클래스에 new를 발송합니다.</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div># new를 위한 <del style="font-weight: bold; text-decoration: none;">메소드는 </del>(Behavior로부터 DieMorph에 의해 상속된) 새로운 인스턴스를 만들고 초기화 메시지(the initialize message)를 그 인스턴스에 발송합니다.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div># new를 위한 <ins style="font-weight: bold; text-decoration: none;">메서드는 </ins>(Behavior로부터 DieMorph에 의해 상속된) 새로운 인스턴스를 만들고 초기화 메시지(the initialize message)를 그 인스턴스에 발송합니다.</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div># DieMorph에서의 초기화 <del style="font-weight: bold; text-decoration: none;">메소드</del>(the initialize method)는 초기 값 6으로 faces를 설정합니다.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div># DieMorph에서의 초기화 <ins style="font-weight: bold; text-decoration: none;">메서드</ins>(the initialize method)는 초기 값 6으로 faces를 설정합니다.</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div># DieMorph class»new는 새로운 인스턴스에 메시지 faces:9을 발송하는 클래스 <del style="font-weight: bold; text-decoration: none;">메소드 </del>DieMorph class»faces:로 리턴합니다. </div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div># DieMorph class»new는 새로운 인스턴스에 메시지 faces:9을 발송하는 클래스 <ins style="font-weight: bold; text-decoration: none;">메서드 </ins>DieMorph class»faces:로 리턴합니다. </div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div># 인스턴스 변수를 9로 설정하며, 인스턴스 <del style="font-weight: bold; text-decoration: none;">메소드 </del>DieMorph»faces:가 지금 실행됩니다. </div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div># 인스턴스 변수를 9로 설정하며, 인스턴스 <ins style="font-weight: bold; text-decoration: none;">메서드 </ins>DieMorph»faces:가 지금 실행됩니다. </div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>drawOn: 을 정의하기 전에, 우리는 디스플레이된 표면(face)에 점(dots)을 배치하기 위한 몇 가지 <del style="font-weight: bold; text-decoration: none;">메소드가 </del>필요합니다. </div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>drawOn: 을 정의하기 전에, 우리는 디스플레이된 표면(face)에 점(dots)을 배치하기 위한 몇 가지 <ins style="font-weight: bold; text-decoration: none;">메서드가 </ins>필요합니다. </div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">메소드 </del>11.31: die의 faces에 점들(points)를 배치하기 위한 9개의 <del style="font-weight: bold; text-decoration: none;">메소드</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">메서드 </ins>11.31: die의 faces에 점들(points)를 배치하기 위한 9개의 <ins style="font-weight: bold; text-decoration: none;">메서드</ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><syntaxhighlight lang="smalltalk"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><syntaxhighlight lang="smalltalk"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>DieMorph»face1</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>DieMorph»face1</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l96">Line 96:</td>
<td colspan="2" class="diff-lineno">Line 96:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>이 <del style="font-weight: bold; text-decoration: none;">메소드들은 </del>각 표면(face)을 찍을 점(dots)의 좌표(coordinates)의 컬렉션들을 정의합니다. 좌표(coordinates)는 1x1 스퀘어 이며, 우리는 단순히 실제의 점(dots)을 배치 하기 위해 그것들을 측량할 필요가 있습니다. </div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>이 <ins style="font-weight: bold; text-decoration: none;">메서드들은 </ins>각 표면(face)을 찍을 점(dots)의 좌표(coordinates)의 컬렉션들을 정의합니다. 좌표(coordinates)는 1x1 스퀘어 이며, 우리는 단순히 실제의 점(dots)을 배치 하기 위해 그것들을 측량할 필요가 있습니다. </div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>drawOn: <del style="font-weight: bold; text-decoration: none;">메소드는 </del>두 가지 일들을 수행합니다: 이것은 수퍼발송(super-send)으로 주사위 배경(die background)을 그리고, 그 다음 점(dots)를 그립니다.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>drawOn: <ins style="font-weight: bold; text-decoration: none;">메서드는 </ins>두 가지 일들을 수행합니다: 이것은 수퍼발송(super-send)으로 주사위 배경(die background)을 그리고, 그 다음 점(dots)를 그립니다.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">메소드 </del>11.32: 주사위 모프(die morph) 그리기</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">메서드 </ins>11.32: 주사위 모프(die morph) 그리기</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><syntaxhighlight lang="smalltalk"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><syntaxhighlight lang="smalltalk"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>DieMorph»drawOn: aCanvas</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>DieMorph»drawOn: aCanvas</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l110">Line 110:</td>
<td colspan="2" class="diff-lineno">Line 110:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>이 <del style="font-weight: bold; text-decoration: none;">메소드의 </del>두 번째 부분은 스몰토크의 반영 능력(the reflective capacities)을 사용합니다. Face의 dots를 그리는 것은 각 좌표를 위해 drawDotOn:at: 메시지를 발송함으로써, face를 위해, faceX <del style="font-weight: bold; text-decoration: none;">메소드를 </del>통해 주어진 컬렉션(collection)에 반복적용(iteration)을 하는 단순한 작업입니다. 정확한 faceX <del style="font-weight: bold; text-decoration: none;">메소드를 </del>콜하기 위해, 우리는 여기 ('face', dieValueasString) asSymbol 문자열로부터 구축된 메시지를 발송하는 perform: <del style="font-weight: bold; text-decoration: none;">메소드를 </del>사용합니다. 여러분은 이 perform:quite의 사용을 규칙적으로 마주치게 될 것입니다. </div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>이 <ins style="font-weight: bold; text-decoration: none;">메서드의 </ins>두 번째 부분은 스몰토크의 반영 능력(the reflective capacities)을 사용합니다. Face의 dots를 그리는 것은 각 좌표를 위해 drawDotOn:at: 메시지를 발송함으로써, face를 위해, faceX <ins style="font-weight: bold; text-decoration: none;">메서드를 </ins>통해 주어진 컬렉션(collection)에 반복적용(iteration)을 하는 단순한 작업입니다. 정확한 faceX <ins style="font-weight: bold; text-decoration: none;">메서드를 </ins>콜하기 위해, 우리는 여기 ('face', dieValueasString) asSymbol 문자열로부터 구축된 메시지를 발송하는 perform: <ins style="font-weight: bold; text-decoration: none;">메서드를 </ins>사용합니다. 여러분은 이 perform:quite의 사용을 규칙적으로 마주치게 될 것입니다. </div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">메소드 </del>11.33 표면(face)에 단일 점(dot)을 그리기</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">메서드 </ins>11.33 표면(face)에 단일 점(dot)을 그리기</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><syntaxhighlight lang="smalltalk"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><syntaxhighlight lang="smalltalk"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>DieMorph»drawDotOn: aCanvas at: aPoint</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>DieMorph»drawDotOn: aCanvas at: aPoint</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l135">Line 135:</td>
<td colspan="2" class="diff-lineno">Line 135:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>디스플레이된 표면(face)을 변경하기 위해, 우리는 myDie dieValue:4로서 우리가 사용할 수 있는 accessor를 만듭니다.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>디스플레이된 표면(face)을 변경하기 위해, 우리는 myDie dieValue:4로서 우리가 사용할 수 있는 accessor를 만듭니다.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">메소드 </del>11.34: 주사위(die)의 현재 값을 설정하기 </div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">메서드 </ins>11.34: 주사위(die)의 현재 값을 설정하기 </div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><syntaxhighlight lang="smalltalk"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><syntaxhighlight lang="smalltalk"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>DieMorph»dieValue: aNumber</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>DieMorph»dieValue: aNumber</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l150">Line 150:</td>
<td colspan="2" class="diff-lineno">Line 150:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">메소드 </del>11.35: 주사위(die)에 에니메이션(움직임) 효과 주기</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">메서드 </ins>11.35: 주사위(die)에 에니메이션(움직임) 효과 주기</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><syntaxhighlight lang="smalltalk"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><syntaxhighlight lang="smalltalk"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>DieMorph»stepTime</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>DieMorph»stepTime</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l163">Line 163:</td>
<td colspan="2" class="diff-lineno">Line 163:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">메소드 </del>11.36: 에니메이션을 시작하고 멈추기 위해 마우스 클릭 취급(handling)하기 </div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">메서드 </ins>11.36: 에니메이션을 시작하고 멈추기 위해 마우스 클릭 취급(handling)하기 </div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><syntaxhighlight lang="smalltalk"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><syntaxhighlight lang="smalltalk"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>DieMorph»handlesMouseDown: anEvent</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>DieMorph»handlesMouseDown: anEvent</div></td></tr>
</table>
Onionmixer
https://trans.onionmixer.net/mediawiki/index.php?title=SqueakByExample:11.8&diff=2223&oldid=prev
Onionmixer: SBE 완전한예제 페이지 추가
2012-08-17T13:32:10Z
<p>SBE 완전한예제 페이지 추가</p>
<p><b>New page</b></p><div>==완전한 예제==<br />
<br />
주사위(die)를<ref name="주석11-4">NB: One die, two dice</ref> 던지기 위해 모프를 디자인 해봅시다. 모프를 클릭하면, 신속한 루프(quick loop)에서 주사위의 모든 면들의 값들을 디스플레이하고, 다시 클릭을 하면 그 에니메이션을 멈춥니다. <br />
<br />
<br />
[[image:die.png|none|134px|thumb|그림 11.8: Mophic에서의 주사위]]<br />
<br />
<br />
{{CommentSqueak|{{Template:HighlightBold|morph}} 대신에 {{Template:HighlightBold|BorderedMorph}}의 서브클래스로서 주사위(die)를 정의합니다. 그 이유는 우리가 경계(border)를 활용할 것이기 때문입니다.}}<br />
<br />
<br />
클래스 11.27: 주사위 모프(the die morph) 정의하기<br />
<syntaxhighlight lang="smalltalk"><br />
BorderedMorph subclass: #DieMorph<br />
instanceVariableNames: 'faces dieValue isStopped'<br />
classVariableNames: ''<br />
poolDictionaries: ''<br />
category: 'SBE--Morphic'<br />
</syntaxhighlight><br />
<br />
<br />
인스턴스 변수 faces는 주사위 면들의 개수를 기록하며, 우리는 9개의 면까지 주사위의 면들을 만들 수 있습니다. dieValue는 현재 디스플레이된 면의 값을 기록하며, isStopped는 주사위의 애니메이션이 멈출 경우 true가 됩니다. 주사위(die) 인스턴스를 만들기 위해, 우리는 faces를 정의합니다: n faces로 새로운 주사위 (die)를 만들기 위해 DieMorph의 클래스 side(the class side)에 있는 n 메소드를 정의합니다.<br />
<br />
<br />
메소드 11.28: 우리가 좋아하는 면의 개수로 새로운 주사위를 만들기<br />
<syntaxhighlight lang="smalltalk"><br />
DieMorph class»faces: aNumber<br />
↑ self new faces: aNumber<br />
</syntaxhighlight><br />
<br />
<br />
초기화 메소드(initialize method)는 평상시의 방법으로 인스턴스 사이트(the instance side)에서 정의됩니다. New는 새롭게 만들어진 인스턴스에 initialize를 발송한다는 것을 기억해 주십시오. <br />
<br />
<br />
메소드 11.29: DieMorph의 인스턴스들을 초기화 하기<br />
<syntaxhighlight lang="smalltalk"><br />
DieMorph»initialize<br />
super initialize.<br />
self extent: 50 @ 50.<br />
self useGradientFill; borderWidth: 2; useRoundedCorners.<br />
self setBorderStyle: #complexRaised.<br />
self fillStyle direction: self extent.<br />
self color: Color green.<br />
dieValue := 1.<br />
faces := 6.<br />
isStopped := false<br />
</syntaxhighlight><br />
<br />
<br />
우리는 주사위(die)에 훌륭한 외관을 부여하기 위해 몇 가지 BorderedMorph의 메소드를 사용합니다: 상승효과(raised effect), 모서리 다듬기(rounded corners)와 함께 굵은 경계(thick border) 그리고 보이는 면에 컬러 경사도(gradient).<br />
우리는 인스턴스 메소드 faces를 다음과 같이 유효한 파라미터를 점검하기위해 정의합니다: <br />
<br />
<br />
메소드 11.30: 주사위 면들의 개수를 설정하기<br />
<syntaxhighlight lang="smalltalk"><br />
DieMorph»faces: aNumber<br />
"Set the number of faces"<br />
(aNumber isInteger<br />
and: [aNumber > 0]<br />
and: [aNumber <= 9])<br />
ifTrue: [faces := aNumber]<br />
</syntaxhighlight><br />
<br />
<br />
주사위가 만들어 졌을 때, 발송된 메시지들의 순서를 리뷰하는 것이 좋습니다. 예를 들어, 우리가 {{Template:HighlightBold|DieMorph face:9}}을 평가함으로써 시작한다면:<br />
# 클래스 메소드 DieMorph class»faces:는 DieMorph 클래스에 new를 발송합니다.<br />
# new를 위한 메소드는 (Behavior로부터 DieMorph에 의해 상속된) 새로운 인스턴스를 만들고 초기화 메시지(the initialize message)를 그 인스턴스에 발송합니다.<br />
# DieMorph에서의 초기화 메소드(the initialize method)는 초기 값 6으로 faces를 설정합니다.<br />
# DieMorph class»new는 새로운 인스턴스에 메시지 faces:9을 발송하는 클래스 메소드 DieMorph class»faces:로 리턴합니다. <br />
# 인스턴스 변수를 9로 설정하며, 인스턴스 메소드 DieMorph»faces:가 지금 실행됩니다. <br />
<br />
drawOn: 을 정의하기 전에, 우리는 디스플레이된 표면(face)에 점(dots)을 배치하기 위한 몇 가지 메소드가 필요합니다. <br />
<br />
<br />
메소드 11.31: die의 faces에 점들(points)를 배치하기 위한 9개의 메소드<br />
<syntaxhighlight lang="smalltalk"><br />
DieMorph»face1<br />
↑{0.5@0.5}<br />
DieMorph»face2<br />
↑{0.25@0.25 . 0.75@0.75}<br />
DieMorph»face3<br />
↑{0.25@0.25 . 0.75@0.75 . 0.5@0.5}<br />
DieMorph»face4<br />
↑{0.25@0.25 . 0.75@0.25 . 0.75@0.75 . 0.25@0.75}<br />
DieMorph»face5<br />
↑{0.25@0.25 . 0.75@0.25 . 0.75@0.75 . 0.25@0.75 . 0.5@0.5}<br />
DieMorph»face6<br />
↑{0.25@0.25 . 0.75@0.25 . 0.75@0.75 . 0.25@0.75 . 0.25@0.5 . 0.75@0.5}<br />
DieMorph»face7<br />
↑{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}<br />
DieMorph »face8<br />
↑{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}<br />
DieMorph »face9<br />
↑{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}<br />
</syntaxhighlight><br />
<br />
<br />
이 메소드들은 각 표면(face)을 찍을 점(dots)의 좌표(coordinates)의 컬렉션들을 정의합니다. 좌표(coordinates)는 1x1 스퀘어 이며, 우리는 단순히 실제의 점(dots)을 배치 하기 위해 그것들을 측량할 필요가 있습니다. <br />
<br />
drawOn: 메소드는 두 가지 일들을 수행합니다: 이것은 수퍼발송(super-send)으로 주사위 배경(die background)을 그리고, 그 다음 점(dots)를 그립니다.<br />
<br />
<br />
메소드 11.32: 주사위 모프(die morph) 그리기<br />
<syntaxhighlight lang="smalltalk"><br />
DieMorph»drawOn: aCanvas<br />
super drawOn: aCanvas.<br />
(self perform: ('face' , dieValue asString) asSymbol)<br />
do: [:aPoint | self drawDotOn: aCanvas at: aPoint]<br />
</syntaxhighlight><br />
<br />
<br />
이 메소드의 두 번째 부분은 스몰토크의 반영 능력(the reflective capacities)을 사용합니다. Face의 dots를 그리는 것은 각 좌표를 위해 drawDotOn:at: 메시지를 발송함으로써, face를 위해, faceX 메소드를 통해 주어진 컬렉션(collection)에 반복적용(iteration)을 하는 단순한 작업입니다. 정확한 faceX 메소드를 콜하기 위해, 우리는 여기 ('face', dieValueasString) asSymbol 문자열로부터 구축된 메시지를 발송하는 perform: 메소드를 사용합니다. 여러분은 이 perform:quite의 사용을 규칙적으로 마주치게 될 것입니다. <br />
<br />
<br />
메소드 11.33 표면(face)에 단일 점(dot)을 그리기<br />
<syntaxhighlight lang="smalltalk"><br />
DieMorph»drawDotOn: aCanvas at: aPoint<br />
aCanvas<br />
fillOval: (Rectangle<br />
center: self position + (self extent * aPoint)<br />
extent: self extent / 6)<br />
color: Color black<br />
</syntaxhighlight><br />
<br />
<br />
좌표들이 [0:1] interval 에 정상화되기 때문에, 우리는 우리의 die: self extent * aPoint의 치수(diemensions)들로 그 좌표들을 조정(scale)합니다. <br />
<br />
<br />
{{CommentSqueak|우리는 워크스페이스로 부터 주사위(die) 인스턴스를 이미 만들었습니다:}}<br />
<syntaxhighlight lang="smalltalk"><br />
(DieMorph faces: 6) openInWorld.<br />
</syntaxhighlight><br />
<br />
<br />
디스플레이된 표면(face)을 변경하기 위해, 우리는 myDie dieValue:4로서 우리가 사용할 수 있는 accessor를 만듭니다.<br />
<br />
메소드 11.34: 주사위(die)의 현재 값을 설정하기 <br />
<syntaxhighlight lang="smalltalk"><br />
DieMorph»dieValue: aNumber<br />
(aNumber isInteger<br />
and: [aNumber > 0]<br />
and: [aNumber <= faces])<br />
ifTrue:<br />
[dieValue := aNumber.<br />
self changed]<br />
</syntaxhighlight><br />
<br />
<br />
이제 우리는 모든 표면(faces)을 신속하게 보여드리기 위해 에니메이션 시스템(animation system)을 사용할 것입니다:<br />
<br />
<br />
메소드 11.35: 주사위(die)에 에니메이션(움직임) 효과 주기<br />
<syntaxhighlight lang="smalltalk"><br />
DieMorph»stepTime<br />
↑ 100<br />
<br />
DieMorph»step<br />
isStopped ifFalse: [self dieValue: (1 to: faces) atRandom]<br />
</syntaxhighlight><br />
<br />
<br />
이제 주사위가 돌아갑니다. 클릭으로 에니메이션을 시작하거나 멈추기 위해 우리가 이전에 마우스 이벤트에 관해 배운 것을 사용하게 될 것입니다. 먼저, 마우스 이벤트(mouse events)의 수신(reception)을 활성화합니다:<br />
<br />
<br />
메소드 11.36: 에니메이션을 시작하고 멈추기 위해 마우스 클릭 취급(handling)하기 <br />
<syntaxhighlight lang="smalltalk"><br />
DieMorph»handlesMouseDown: anEvent<br />
↑ true<br />
<br />
DieMorph»mouseDown: anEvent<br />
anEvent redButtonPressed<br />
ifTrue: [isStopped := isStopped not]<br />
</syntaxhighlight><br />
<br />
<br />
우리가 주사위(die)를 클릭하면, 그 주사위가 돌아가게 됩니다.<br />
<br />
==Notes==<br />
<references /><br />
<br />
[[Category:SqueakByExample]]</div>
Onionmixer