Onionmixer: VisualWorksTutorial2 Page04 추가

2012-12-21T12:15:30Z

VisualWorksTutorial2 Page04 추가

New page

{{CincomTop|{{CincomSmalltalkHeadBanner|웹로그의 통계2 레슨4|VisualWorks에서 GUI의 동작}}}}

{| style="border: none; width:100%;"
|- style="text-align:center;font-weight:bold; font-style: normal;font-size:110%;"
| colspan="2" | | 목차 | 레슨3 | 레슨5 |<hr style="color:black;background-color:black;height:4px;">
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageOpenbook}}
| 앞 레슨에서는 {{HighlightBold|UIPainter}}를 소개하고, {{HighlightBold|"Hello World"}}라고 나타내는 간단한 어플리케이션을 작성했습니다. 하지만 어플리케이션에 더 정중하게 인사시켰어야 했던 게 아닐까요. 그러기 위해서는 그 외에 UIPainter 위젯이 어떻게 작동하는지 잘 이해할 필요가 있습니다. 앞 레슨과 같이, 이번 레슨에서는 웹서버 로그 통계나 그 외 어플리케이션을 실행하지 않습니다. 웹로그 통계 어플리케이션 작성을 시험해보기 전에, GUI 위젯이 어떤식으로 서로 커뮤니케이션하고 있는지, 두 가지 매우 중요한 개념을 이해할 필요가 있습니다. 전 레슨을 끝냈다는 것을 전제로 설명하겠습니다. 이 레슨은 UIPainter 기초강좌 2입니다.
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageCertifacate}}
| {{CincomSmalltalkGreenBigFont|이 레슨에서는 빈 캔버스에 위젯을 배치하여, 위젯끼리의 커뮤니케이션을 학습하겠습니다. 이것은 벨류 홀더(Value Holder)와 Aspect 어댑터(Aspect Adaptor)를 통해 실행됩니다. 이 개념을 습득함으로 인해, 웹서버 로그 어플리케이션 작성의 준비작업이 갖춰지게 됩니다.}}
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageDesign}}
| 이 레슨을 끝마치면 아래 기술한 것들이 가능하게 됩니다.

* 자신의 메시지 입력
* 버튼이 클릭되었을 경우 메시지 박스나 그 외 입력 박스에 메시지 표시
* 출력 선택에 라디오 버튼 사용
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageTools}}
| 밸류 홀더(Value Holder)

1. 이전 레슨의 캔버스가 열려있을 경우에는 닫아주십시오. 새로운 캔버스를 사용합니다.

2. VisualWorks메인 {{HighlightBold|런처 윈도우}}에서 {{HighlightBold|새로운 캔버스}} 버튼을 선택해주십시오.

3. 빈 캔버스에 아래 위젯들을 배치해주십시오.
:* 두 개의 액션 버튼
:* 두 개의 입력 필드
:* 두 개의 라디오 버튼

{{CincomSmalltalkBlueFont|처음, 캔버스 위에 모든 위젯을 배치했다는 가정하에 설명하겠습니다. 이제 속성을 설정합니다. 위젯 속성을 설정한 후에 적용 버튼을 클릭하고, 캔버스에서 다음 위젯을 선택합니다. GUI 페인터 툴 윈도우는 다른 위젯이 선택될 때마다 변경됩니다.}}

아래 그림과 같이 위젯을 배치해주십시오.

[[image:cincom_tutorial2_fig241.png|none|245px|thumb|그림 4-1. 위젯 초기배치]]

4. 아래의 목록과 같이 속성을 설정해주십시오.

{| class="wikitable" style="width:100%;"
|- style="color:black;background-color:white;"
| style="text-align:center;width:30%;" | {{CincomSmalltalkBlueFont|Entity}}
| style="text-align:center;width:30%;" | {{CincomSmalltalkBlueFont|속성}}
| style="text-align:center;width:40%;" | {{CincomSmalltalkBlueFont|설정}}
|- style="color:black;background-color:white;"
| style="text-align:left;width:30%;" | 메인 윈도우
| style="text-align:left;width:30%;" | 문자열
| style="text-align:left;width:40%;" | GUI 102
|- style="color:black;background-color:white;"
| style="text-align:left;width:30%;" | 액션 버튼1
| style="text-align:left;width:30%;" | 문자열
| style="text-align:left;width:40%;" | Say it
|- style="color:black;background-color:white;"
| style="text-align:left;width:30%;" | 액션 버튼1
| style="text-align:left;width:30%;" | Action
| style="text-align:left;width:40%;" | #sayMessage
|- style="color:black;background-color:white;"
| style="text-align:left;width:30%;" | 액션 버튼2
| style="text-align:left;width:30%;" | 문자열
| style="text-align:left;width:40%;" | Clear
|- style="color:black;background-color:white;"
| style="text-align:left;width:30%;" | 액션 버튼2
| style="text-align:left;width:30%;" | Action
| style="text-align:left;width:40%;" | #clearMessages
|- style="color:black;background-color:white;"
| style="text-align:left;width:30%;" | 라디오 버튼1
| style="text-align:left;width:30%;" | 문자열
| style="text-align:left;width:40%;" | Message Box
|- style="color:black;background-color:white;"
| style="text-align:left;width:30%;" | 라디오 버튼1
| style="text-align:left;width:30%;" | Acpect
| style="text-align:left;width:40%;" | #outputChoice
|- style="color:black;background-color:white;"
| style="text-align:left;width:30%;" | 라디오 버튼1
| style="text-align:left;width:30%;" | Select
| style="text-align:left;width:40%;" | #messageBox
|- style="color:black;background-color:white;"
| style="text-align:left;width:30%;" | 라디오 버튼2
| style="text-align:left;width:30%;" | 문자열
| style="text-align:left;width:40%;" | Screen
|- style="color:black;background-color:white;"
| style="text-align:left;width:30%;" | 라디오 버튼2
| style="text-align:left;width:30%;" | Acpect
| style="text-align:left;width:40%;" | #outputChoice
|- style="color:black;background-color:white;"
| style="text-align:left;width:30%;" | 라디오 버튼2
| style="text-align:left;width:30%;" | Select
| style="text-align:left;width:40%;" | Select
|- style="color:black;background-color:white;"
| style="text-align:left;width:30%;" | 입력 필드1
| style="text-align:left;width:30%;" | Acpect
| style="text-align:left;width:40%;" | #screen
|- style="color:black;background-color:white;"
| style="text-align:left;width:30%;" | 입력 필드2
| style="text-align:left;width:30%;" | Acpect
| style="text-align:left;width:40%;" | #messageOutput
|- style="color:black;background-color:white;"
| style="text-align:left;width:30%;" | 입력 필드2
| style="text-align:left;width:30%;" | Background
| style="text-align:left;width:40%;" | yellow (Color tab)
|}

{{CincomSmalltalkBlueFont|GUI페인터 툴 {{HighlightBold|상세 탭}}에 {{HighlightBold|읽기 전용}} 속성(입력 필드2)가 있습니다. {{HighlightBold|컬러}} 탭에서 위젯의 배경색을 설정할 수 있습니다.}}

위에 적은 속성들을 전부 설정하게 되면, 캔버스는 아래와 같이 바뀝니다.

[[image:cincom_tutorial2_fig242.png|none|245px|thumb|그림 4-2. 각 속성 설정 후의 캔버스]]

5. {{HighlightBold|GUI페인터 툴}} 좌측창 맨 위에 있는 오브젝트(메인 윈도우)를 선택(반전)하고 인스톨 버튼을 클릭해주십시오.

[[image:cincom_tutorial2_fig242a.png|none|515px|thumb|설명없음]]

VisualWorks는 이 윈도우가 속한 클래스를 묻습니다. 기존 클래스의 경우, 기존 클래스 일람을 표시하는 쌍안경 아이콘을 클릭합니다. 여기서는 새로운 클래스를 작성합니다. 첫 입력필드({{HighlightBold|다음 클래스에 인스톨:}} 아래)에 {{HighlightBold|GUI102}}를 입력하고, OK를 클릭해주십시오.

{{HighlightBold|클래스 파인더}}가 표시되었을 경우(전부 표준치로), OK를 클릭해주십시오.

6. GUI 페인터 툴의 왼쪽 창에 있는 트리 뷰의 {{HighlightBold|메인 윈도우:GUI102}}가 다시 선택된 것을 확인하고, {{HighlightBold|정의}} 버튼을 클릭해주십시오.

다이얼로그 박스에는 위젯에서 지적한 모든 메서드({{HighlightBold|Aspect}})에 체크가 붙어있습니다. 그리고, "{{HighlightBold|초기화를 추가}}" 체크 박스에도 체크되어 있습니다.

 표시된 다섯 개의 위젯(그림 4-3참조)가 표시되지 않는 경우, 메인 윈도우 캔버스가 선택되지 않았습니다.(윈도우가 아닌 다른 위젯이 GUI페인터 툴에서 선택되어 있음). 혹은, 모든 위젯의 필요한 속성 설정이 잘못되어 다이얼로그 박스에는 정의 모델로서 필욯나 컴포넌트 속성이 모자라게 표시되어 있을수도 있습니다. 이러한 경우에는 위젯의 속성을 다시 올바르게 설정해주십시오.

[[image:cincom_tutorial2_fig243.png|none|248px|thumb|그림 4-3. 모든 메서드를 표시한 정의 모델 다이얼로그 박스]]

OK를 클릭해주십시오.

{{HighlightBold|UIPainter}}(이 경우, 기술적으로는 {{HighlightBold|UIDefiner}})는 이 메서드들의 "stub"코드를 자동적으로 생성합니다.
따로 작성할 필요가 없으므로, 시간을 대폭 단축시킬 수 있습니다. 자동생성된 메서드를 바로 수정합시다.

7. {{HighlightBold|Main Window}}가 선택되어있는 상태에서 {{HighlightBold|Browser}} 버튼을 클릭합니다.

8. {{HighlightBold|System Browser}}가 표시되었을 경우, 프로토콜의 상부에 있는 {{HighlightBold|클래스}} 탭을 클릭해서, {{HighlightBold|interface specs}} 프로토콜을 선택하고, {{HighlightBold|windowSpec}} 메서드를 선택해주십시오. 아래 그림과 같이 될 것입니다.

[[image:cincom_tutorial2_fig244.png|none|658px|thumb|그림 4-4. System Browser에서 windowSpec 메서드 표시]]

이 "메서드"는 {{HighlightBold|GUI페인터 툴}}의 {{HighlightBold|인스톨 버튼}}이 클릭될 때마다 작성/수정 됩니다. 이것은 VisualWorks가 화면을 구축할 때의 스팩입니다. 비쥬얼로 작성했습니다만, VisualWorks와 다른 수단으로 화면을 인식하고 있습니다.

9. {{HighlightBold|System Browser}}에서 프로토콜 상단에 있는 {{HighlightBold|인스턴스}} 탭을 클릭하고, {{HighlightBold|actions}} 프로토콜을 선택합니다. 그리고 맨 마지막으로 {{HighlightBold|clearMessage}} 메서드를 선택합니다.

10. 코드를 아래와 같이 변경해주십시오.

<syntaxhighlight lang="smalltalk">
clearMessage
messageInput value: 'Enter your new message'.
messageOutput value: ''.
</syntaxhighlight>

{{CincomSmalltalkBlueFont|{{HighlightBold|messageInput}}과 {{HighlightBold|messageOutput}}의 "Aspect"에 의해 지정된 입력필드는, Visualworks가 {{HighlightBold|벨류 홀더}}를 호출하고 있는 것이 됩니다. 이 이름에 대해 생각해 봅시다. 입력필드는 특정 {{HighlightBold|값(value)}}을 {{HighlightBold|보유(hold)}} 합니다. 입력필드의 {{HighlightBold|값(value)}}를 설정하는 방법은 {{HighlightBold|value:}} 메서드를 사용함으로 인해 가능합니다. 입력필드의 내용(값)을 취득하는 방법으로서, {{HighlightBold|value}}메서드를 사용합니다.}}

11. 메서드 코드 창에서 {{HighlightBold|<오퍼레이트 클릭>}}후 {{HighlightBold|Accept}}를 선택해주십시오.

12. {{HighlightBold|sayMessage}} 메소드를 선택해서 아래와 같이 변경해주십시오.

<syntaxhighlight lang="smalltalk">
sayMessage
outputChoice value = #screen
ifTrue: [ messageOutput value: messageInput value]
ifFalse: [ Dialog warn: messageInput value].
</syntaxhighlight>

13. 메서드 코드 창에서 {{HighlightBold|<오퍼레이트 클릭>}}후 {{HighlightBold|Accept}}를 선택해주십시오. 그리고, {{HighlightBold|System Browser}}를 닫아주십시오.

14. {{HighlightBold|GUI페인터 툴}}에서 {{HighlightBold|Main Window}}가 선택된 상태에서 "{{HighlightBold|윈도우 열기}}"버튼을 클릭해주십시오.

{{CincomSmalltalkBlueFont|프로그램이 작동하고 있습니다. 어플리케이션을 만져봅시다. 메서드에 오탈자가 없다면 잘 작동될 것입니다.}}
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageCertifacate}}
| 축하드립니다. 입력필드의 값을 불러와 설정한 최초의 VisualWorks GUI 어플리케이션 작성에 성공하였습니다. {{HighlightBold|벨류 홀더}}의 개념은 매우 중요합니다.({{HighlightBold|벨류 홀더}}에는 여기서 설명한 것 이상으로 많은 요소가 있습니다만, 웹로그 어플리케이션을 위해서라면 이정도로 충분합니다.
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageTools}}
| Aspect 어댑터(Aspect Adaptor)

이 토픽은 "통지나 의존"으로도 파악할 수 있습니다. 개념은 매우 단순합니다. 무언가(변수, 값, 무엇이든)가 변경될 때, 이 엔티티(Entity)가 변경되었습니다라는 통지가 송신됩니다. 그 외의 엔티티는, 이 특정 엔티티가 변경되는 것에 "관심이 있는"경우, 분명 똑같이 변경되고 싶어할 것입니다.
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageDominos}}
| 입문서 : Aspect 어댑터(Aspect Adaptor)

이것은 웹로그 어플리케이션의 로그파일 이름과 관련되어 있습니다. 파일 이름을 클릭할 때는 리스트 안의 선택이 변경되었다는 것을 의미하며, Hit카운트나 페이지 카운트(양방 입력 필드)의 변경에 따라 표시될 것입니다.

이 개념을 설명하기 위해, 현재 캔버스 위에 있는 위젯의 역할을 변경하겠습니다. 아래와 같이 실행되도록 프로그램을 수정하겠습니다.

* 맨 처음 버튼이 클릭되었을 때, 아래 입력 필드를 변경합니다.
* 두 번째 버튼이 클릭되었을 때, 아래 입력 필드를 변경합니다.

사소한 수정일지도 모르겠습니다만, 중요한 부분이 들어가 있습니다. 다른 버튼이 클릭되었을 경우, 메서드는 다른 클래스의 변수만 변경합니다. "다른" 클래스는 GUI 어플리케이션에 전혀 신경쓰지 않습니다.(완전히 분할) GUI 어플리케이션에 대해 아무것도 모릅니다. 데모를 실행하기 위해서는 약간의 작업이 필요합니다. Aspect 어댑터가 어떻게 동작하는지 예를 들겠습니다.

15. 타이핑 하는 시간을 절약하기 위해서, 이미 작성된 "다른" 클래스를 파일 인 합니다. VisualWorks메인 런처 윈도우에서 {{HighlightBold|File>>File Browser}} 메뉴를 선택해주십시오.

16. {{HighlightBold|File Browser}} 다이얼로그가 표시됩니다. 상단 입력 박스에 {{HighlightBold|aa*}}를 입력하고, {{HighlightBold|리턴}}이나 {{HighlightBold|엔터}}를 눌러주십시오.

{{CincomSmalltalkBlueFont|VisualWorks는 {{HighlightBold|aa}}로 시작하는 모든 파일을 검색합니다. 파일 목록창(오른쪽 창 첫 스크롤 영역)에 {{HighlightBold|aa.st}} 파일이 표시됩니다. 이 파일이 표시되지 않는 경우, aa.st 파일을 VisualWorks "표준 디렉토리"에 복사하거나, 그 파일이 포함된 디렉토리를 이동시켜주십시오. 이 파일은 남은 튜토리얼 파일과 같은 곳에 있을 것입니다.}}

{{CincomSmalltalkBlueFont|그래도 찾지 못할 경우에는 여기서 다운로드해주십시오.}}

17. {{HighlightBold|aa.st}} 파일을 반전(선택)해서 {{HighlightBold|<오퍼레이트 클릭>}}후 {{HighlightBold|File In}}을 선택해주십시오.

18. VisualWorks {{HighlightBold|메인 런처}} 윈도우에서 {{HighlightBold|툴바}} 세 번째 버튼을 클릭하거나, {{HighlightBold|Browser>>시스템}} 메뉴를 선택해서 System Browser를 열어주십시오.

[[image:cincom_tutorial2_fig245.png|none|658px|thumb|그림 4-5. AA클래스]]

19. 그 이름에서부터, 카테고리목록의 첫 AA 카테고리가 표시됩니다. 선택해주십시오. AA 클래스를 확인합니다. 그리 많지 않습니다. 클래스에는 다섯 개의 메서드와 두 개의 인스턴스 변수({{HighlightBold|m1}}, {{HighlightBold|m2}})가 있습니다.

<syntaxhighlight lang="smalltalk">
Smalltalk defineClass: #AA
superclass: #{Core.Object}
indexedType: #none
private: false
instanceVariableNames: 'm1 m2'
classInstanceVariableNames: ''
imports: ''
category: 'AA'
</syntaxhighlight>

20. {{HighlightBold|m1:}}이나 {{HighlightBold|m2:}} 메서드중 아무거나 봐주십시오. 메서드의 맨 마지막 행은 매우 중요합니다. 그리고 양쪽의 메서드에 기술되어 있습니다.

<syntaxhighlight lang="smalltalk">
m1: anM1
m1 := anM1.
self changed: #m1.
</syntaxhighlight>

{{CincomSmalltalkBlueFont|이 메소드의 마지막 행은 앞에서 언급 한 "norifier(알림)"입니다. 기본적으로 변수가 변경된 것을 시스템 전체에 통보합니다. 그렇다고 해서 걱정할것은 없습니다. 이 메소드는 시스템에 통보하는 일 뿐입니다.}}

21. {{HighlightBold|initialize}} 메서드를 봐주십시오.

<syntaxhighlight lang="smalltalk">
Smalltalk defineClass: #GUI102
superclass: #{UI.ApplicationModel}
indexedType: #none
private: false
instanceVariableNames: 'anAA messageInput messageOutput outputChoice'
classInstanceVariableNames: ''
imports: ''
category: 'UIApplications-New'
</syntaxhighlight>

{{CincomSmalltalkBlueFont|클래스가 인스턴스화(작성)되었을 때, {{HighlightBold|m1}}변수의 내용은 그 유명한 "Hello World"로 설정됩니다. 이 클래스가 이 초기값으로 설정되는 것이 매우 중요한 부분입니다. 일단 지금은 기억해 두십시오.}}

22. {{HighlightBold|System Browser}}를 닫고 캔버스로 돌아가주십시오. 캔버스상의 아무곳이나 클릭해서 위젯이 선택되지 않은 것을 확인해주십시오. {{HighlightBold|GUI페인트 툴}}의 Browser 버튼을 클릭해주십시오.

23. System Browser가 표시되었을 때, 메서드 코드 창에 {{HighlightBold|#GUI102}}의 {{HighlightBold|defineClass}} 메서드가 표시됩니다. 인스턴스 변수를 추가합니다. anAA을 입력합니다. 새로운 {{HighlightBold|defineClass}} 메서드는 아래와 같습니다.

<syntaxhighlight lang="smalltalk">
Smalltalk defineClass: #GUI102
superclass: #{UI.ApplicationModel}
indexedType: #none
private: false
instanceVariableNames: 'anAA messageInput messageOutput outputChoice'
classInstanceVariableNames: ''
imports: ''
category: 'UIApplications-New'
</syntaxhighlight>

24. 메서드 코드 창에서 {{HighlightBold|<오퍼레이트 클릭>}}후 {{HighlightBold|Accept}}를 클릭해주십시오.

25. {{HighlightBold|actions}} 프로토콜을 클릭하고 아래의 메서드를 입력해주십시오.

<syntaxhighlight lang="smalltalk">
initialize
anAA := AA new.
messageInput := (AspectAdaptor subject: anAA sendsUpdates: true)
forAspect: #m1.
messageOutput := (AspectAdaptor subject: anAA sendsUpdates: true)
forAspect: #m2.
</syntaxhighlight>

26. 메서드 코드 창에서 {{HighlightBold|<오퍼레이트 클릭>}}후 {{HighlightBold|Accept}}를 클릭해주십시오.

{{CincomSmalltalkBlueFont|여기서 {{HighlightBold|AspectAdaptor}} 클래스를 도입합니다. 첫 행은 {{HighlightBold|AA}}클래스의 인스턴스를 작성합니다. 여기서는 아무것도 하지 않습니다. 다음 2행은 벨류 홀더에서 Aspect 어댑터에 입력 필드를 변환합니다. 이 행들은 노티파이어식의 후반부분입니다. 이 행들은 두 개의 입력 필드가 {{HighlightBold|AA}} 클래스의 {{HighlightBold|m1}}과 {{HighlightBold|m2}} 변수(각각)에 대한 값 변경에 "주의(관심)"을 가지는 시스템에 전달합니다. {{HighlightBold|m1}}과 {{HighlightBold|m2}} 변수가 변경되면 항시 {{HighlightBold|messageInput}}과 {{HighlightBold|messageOutput}}도 그렇게 됩니다.}}

27. {{HighlightBold|sayMessage}} 메서드를 클릭하고 아래 코드를 입력해주십시오.

<syntaxhighlight lang="smalltalk">
sayMessage
anAA m1: 'Hi'.
anAA m2: 'This is powerful stuff'.
</syntaxhighlight>

28. 메서드 코드 창에 {{HighlightBold|<오퍼레이트 클릭>}}후 {{HighlightBold|Accept}}를 클릭해주십시오.

29. {{HighlightBold|clearMessages}} 메서드를 클릭해서 아래와 같이 코드를 입력해주십시오.

<syntaxhighlight lang="smalltalk">
clearMessages
anAA m1: 'Goodbye'.
anAA m2: 'All too cool'.
</syntaxhighlight>

30. 메서드 코드 창에서 {{HighlightBold|<오퍼레이트 클릭>}}후 {{HighlightBold|Accept}}를 클릭해주십시오.

31. {{HighlightBold|System Browser}}를 닫고 {{HighlightBold|GUI페인터 툴}}로 돌아가주십시오. {{HighlightBold|GUI페인터 툴}}의 {{HighlightBold|"윈도우 열기"}}버튼을 클릭해주십시오.

32. 우선 "Hello World"가 입력 필드 첫부분부터 표시되는 것에 주의해주십시오. 떠올리십시오. {{HighlightBold|AA}}클래스({{HighlightBold|initialize}} 메서드)가 실행되었기 때문입니다. 두 개의 버튼을 클릭해주십시오. 이 버튼들은 간접적으로 AA 클래스의 변수 값이 변경됨으로 인해 입력필드의 내용을 변경합니다. 주의가 필요한 중요한 부분은, 다른 무언가(아마도 다른 클래스)가 {{HighlightBold|AA}} 클래스의 변수 값을 변경했다는 것이며, GUI는 항상 이것들의 변경을 반영시킵니다. 또한, 무엇인지 잘 모를 경우에는 이제부터 많은 GUI 어플리케이션을 작성함에 따라 위와 같은 중요성을 확실히 인식할 수 있게 될 것입니다.

축하드립니다. {{HighlightBold|Aspect 어댑터}}를 사용해서 입력필드의 값을 취득/설정하는 VisualWorks GUI 어플리케이션 작성에 성공하였습니다. {{HighlightBold|벨류 홀더}}와 같이, {{HighlightBold|Aspect 어댑터}}에도 여기서 설명한 것 이상으로 많은 기능이 있습니다만, 웹로그 어플리케이션에서는 이것만으로도 충분합니다.
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageCertifacate}}
| 정리

이 레슨의 목적은 {{HighlightBold|벨류 홀더}}와 {{HighlightBold|Aspect 어댑터}}의 개념을 소개하는 것이었습니다. 입력필드의 "Aspect"를 성정하면, 실제로는 벨류 홀더를 작성합니다. Aspect는 입력필드의 이름과 입력필드의 값을 포함한 이름으로서 생각해주십시오. 그리고, 입력필드는 다른 변수의 변경에 "접합"(adapt)시키는 {{HighlightBold|Aspect 어댑터}}로 변경할 수 있습니다.

{{HighlightBold|아래와 같은 내용을 학습하였습니다}}
* 캔버스에 위젯(버튼, 라디오 버튼, 입력 필드)를 배치
* 위젯과 캔버스(윈도우)의 속성을 설정
* 버튼 위젯에 메서드를 배치
* Value 메서드를 사용해서 입력필드의 값을 취득
* Value: 메서드를 사용한 입력필드 값의 설정
* Aspect 어댑터 입력필드를 변환
* Aspect 어댑터를 사용해 입력필드 값을 설정
|- style="text-align:center;font-weight:bold; font-style: normal;font-size:120%;"
| colspan="2" |<hr style="color:black;background-color:black;height:4px;"> | 목차 | 레슨3 | 레슨5 |
|}

VisualWorksTutorial2:Page05 - Revision history

Onionmixer: VisualWorksTutorial2 Page04 추가