VisualWorksTutorial2:Page05
 |
 웹로그의 통계2 레슨4 |
 |
| | 목차 | 레슨3 | 레슨5 | | ||||||||||||||||||||||||||||||||||||||||||||||
|
앞 레슨에서는 UIPainter를 소개하고, "Hello World"라고 나타내는 간단한 어플리케이션을 작성했습니다. 하지만 어플리케이션에 더 정중하게 인사시켰어야 했던 게 아닐까요. 그러기 위해서는 그 외에 UIPainter 위젯이 어떻게 작동하는지 잘 이해할 필요가 있습니다. 앞 레슨과 같이, 이번 레슨에서는 웹서버 로그 통계나 그 외 어플리케이션을 실행하지 않습니다. 웹로그 통계 어플리케이션 작성을 시험해보기 전에, GUI 위젯이 어떤식으로 서로 커뮤니케이션하고 있는지, 두 가지 매우 중요한 개념을 이해할 필요가 있습니다. 전 레슨을 끝냈다는 것을 전제로 설명하겠습니다. 이 레슨은 UIPainter 기초강좌 2입니다. | |||||||||||||||||||||||||||||||||||||||||||||
|
이 레슨에서는 빈 캔버스에 위젯을 배치하여, 위젯끼리의 커뮤니케이션을 학습하겠습니다. 이것은 벨류 홀더(Value Holder)와 Aspect 어댑터(Aspect Adaptor)를 통해 실행됩니다. 이 개념을 습득함으로 인해, 웹서버 로그 어플리케이션 작성의 준비작업이 갖춰지게 됩니다. | |||||||||||||||||||||||||||||||||||||||||||||
|
이 레슨을 끝마치면 아래 기술한 것들이 가능하게 됩니다.
| |||||||||||||||||||||||||||||||||||||||||||||
|
밸류 홀더(Value Holder)
2. VisualWorks메인 런처 윈도우에서 새로운 캔버스 버튼을 선택해주십시오.
3. 빈 캔버스에 아래 위젯들을 배치해주십시오.
아래 그림과 같이 위젯을 배치해주십시오.
4. 아래의 목록과 같이 속성을 설정해주십시오.
5. GUI페인터 툴 좌측창 맨 위에 있는 오브젝트(메인 윈도우)를 선택(반전)하고 인스톨 버튼을 클릭해주십시오. VisualWorks는 이 윈도우가 속한 클래스를 묻습니다. 기존 클래스의 경우, 기존 클래스 일람을 표시하는 쌍안경 아이콘을 클릭합니다. 여기서는 새로운 클래스를 작성합니다. 첫 입력필드(다음 클래스에 인스톨: 아래)에 GUI102를 입력하고, OK를 클릭해주십시오.
6. GUI 페인터 툴의 왼쪽 창에 있는 트리 뷰의 메인 윈도우:GUI102가 다시 선택된 것을 확인하고, 정의 버튼을 클릭해주십시오.
OK를 클릭해주십시오. UIPainter(이 경우, 기술적으로는 UIDefiner)는 이 메서드들의 "stub"코드를 자동적으로 생성합니다. 따로 작성할 필요가 없으므로, 시간을 대폭 단축시킬 수 있습니다. 자동생성된 메서드를 바로 수정합시다.
7. Main Window가 선택되어있는 상태에서 Browser 버튼을 클릭합니다.
8. System Browser가 표시되었을 경우, 프로토콜의 상부에 있는 클래스 탭을 클릭해서, interface specs 프로토콜을 선택하고, windowSpec 메서드를 선택해주십시오. 아래 그림과 같이 될 것입니다. 이 "메서드"는 GUI페인터 툴의 인스톨 버튼이 클릭될 때마다 작성/수정 됩니다. 이것은 VisualWorks가 화면을 구축할 때의 스팩입니다. 비쥬얼로 작성했습니다만, VisualWorks와 다른 수단으로 화면을 인식하고 있습니다.
9. System Browser에서 프로토콜 상단에 있는 인스턴스 탭을 클릭하고, actions 프로토콜을 선택합니다. 그리고 맨 마지막으로 clearMessage 메서드를 선택합니다.
10. 코드를 아래와 같이 변경해주십시오. clearMessage
messageInput value: 'Enter your new message'.
messageOutput value: ''.
messageInput과 messageOutput의 "Aspect"에 의해 지정된 입력필드는, Visualworks가 벨류 홀더를 호출하고 있는 것이 됩니다. 이 이름에 대해 생각해 봅시다. 입력필드는 특정 값(value)을 보유(hold) 합니다. 입력필드의 값(value)를 설정하는 방법은 value: 메서드를 사용함으로 인해 가능합니다. 입력필드의 내용(값)을 취득하는 방법으로서, value메서드를 사용합니다.
11. 메서드 코드 창에서 <오퍼레이트 클릭>후 Accept를 선택해주십시오.
12. sayMessage 메소드를 선택해서 아래와 같이 변경해주십시오. sayMessage
outputChoice value = #screen
ifTrue: [ messageOutput value: messageInput value]
ifFalse: [ Dialog warn: messageInput value].
13. 메서드 코드 창에서 <오퍼레이트 클릭>후 Accept를 선택해주십시오. 그리고, System Browser를 닫아주십시오.
14. GUI페인터 툴에서 Main Window가 선택된 상태에서 "윈도우 열기"버튼을 클릭해주십시오. 프로그램이 작동하고 있습니다. 어플리케이션을 만져봅시다. 메서드에 오탈자가 없다면 잘 작동될 것입니다. | |||||||||||||||||||||||||||||||||||||||||||||
|
|
축하드립니다. 입력필드의 값을 불러와 설정한 최초의 VisualWorks GUI 어플리케이션 작성에 성공하였습니다. 벨류 홀더의 개념은 매우 중요합니다.(벨류 홀더에는 여기서 설명한 것 이상으로 많은 요소가 있습니다만, 웹로그 어플리케이션을 위해서라면 이정도로 충분합니다. | |||||||||||||||||||||||||||||||||||||||||||||
|
|
Aspect 어댑터(Aspect Adaptor)
| |||||||||||||||||||||||||||||||||||||||||||||
|
입문서 : Aspect 어댑터(Aspect Adaptor)
15. 타이핑 하는 시간을 절약하기 위해서, 이미 작성된 "다른" 클래스를 파일 인 합니다. VisualWorks메인 런처 윈도우에서 File>>File Browser 메뉴를 선택해주십시오.
16. File Browser 다이얼로그가 표시됩니다. 상단 입력 박스에 aa*를 입력하고, 리턴이나 엔터를 눌러주십시오.
17. aa.st 파일을 반전(선택)해서 <오퍼레이트 클릭>후 File In을 선택해주십시오.
18. VisualWorks 메인 런처 윈도우에서 툴바 세 번째 버튼을 클릭하거나, Browser>>시스템 메뉴를 선택해서 System Browser를 열어주십시오.
19. 그 이름에서부터, 카테고리목록의 첫 AA 카테고리가 표시됩니다. 선택해주십시오. AA 클래스를 확인합니다. 그리 많지 않습니다. 클래스에는 다섯 개의 메서드와 두 개의 인스턴스 변수(m1, m2)가 있습니다. Smalltalk defineClass: #AA
superclass: #{Core.Object}
indexedType: #none
private: false
instanceVariableNames: 'm1 m2'
classInstanceVariableNames: ''
imports: ''
category: 'AA'
20. m1:이나 m2: 메서드중 아무거나 봐주십시오. 메서드의 맨 마지막 행은 매우 중요합니다. 그리고 양쪽의 메서드에 기술되어 있습니다. m1: anM1
m1 := anM1.
self changed: #m1.
이 메소드의 마지막 행은 앞에서 언급 한 "norifier(알림)"입니다. 기본적으로 변수가 변경된 것을 시스템 전체에 통보합니다. 그렇다고 해서 걱정할것은 없습니다. 이 메소드는 시스템에 통보하는 일 뿐입니다.
21. initialize 메서드를 봐주십시오. Smalltalk defineClass: #GUI102
superclass: #{UI.ApplicationModel}
indexedType: #none
private: false
instanceVariableNames: 'anAA messageInput messageOutput outputChoice'
classInstanceVariableNames: ''
imports: ''
category: 'UIApplications-New'
클래스가 인스턴스화(작성)되었을 때, m1변수의 내용은 그 유명한 "Hello World"로 설정됩니다. 이 클래스가 이 초기값으로 설정되는 것이 매우 중요한 부분입니다. 일단 지금은 기억해 두십시오.
22. System Browser를 닫고 캔버스로 돌아가주십시오. 캔버스상의 아무곳이나 클릭해서 위젯이 선택되지 않은 것을 확인해주십시오. GUI페인트 툴의 Browser 버튼을 클릭해주십시오.
23. System Browser가 표시되었을 때, 메서드 코드 창에 #GUI102의 defineClass 메서드가 표시됩니다. 인스턴스 변수를 추가합니다. anAA을 입력합니다. 새로운 defineClass 메서드는 아래와 같습니다. Smalltalk defineClass: #GUI102
superclass: #{UI.ApplicationModel}
indexedType: #none
private: false
instanceVariableNames: 'anAA messageInput messageOutput outputChoice'
classInstanceVariableNames: ''
imports: ''
category: 'UIApplications-New'
24. 메서드 코드 창에서 <오퍼레이트 클릭>후 Accept를 클릭해주십시오.
25. actions 프로토콜을 클릭하고 아래의 메서드를 입력해주십시오. initialize
anAA := AA new.
messageInput := (AspectAdaptor subject: anAA sendsUpdates: true)
forAspect: #m1.
messageOutput := (AspectAdaptor subject: anAA sendsUpdates: true)
forAspect: #m2.
26. 메서드 코드 창에서 <오퍼레이트 클릭>후 Accept를 클릭해주십시오.
27. sayMessage 메서드를 클릭하고 아래 코드를 입력해주십시오. sayMessage
anAA m1: 'Hi'.
anAA m2: 'This is powerful stuff'.
28. 메서드 코드 창에 <오퍼레이트 클릭>후 Accept를 클릭해주십시오.
29. clearMessages 메서드를 클릭해서 아래와 같이 코드를 입력해주십시오. clearMessages
anAA m1: 'Goodbye'.
anAA m2: 'All too cool'.
30. 메서드 코드 창에서 <오퍼레이트 클릭>후 Accept를 클릭해주십시오.
31. System Browser를 닫고 GUI페인터 툴로 돌아가주십시오. GUI페인터 툴의 "윈도우 열기"버튼을 클릭해주십시오.
32. 우선 "Hello World"가 입력 필드 첫부분부터 표시되는 것에 주의해주십시오. 떠올리십시오. AA클래스(initialize 메서드)가 실행되었기 때문입니다. 두 개의 버튼을 클릭해주십시오. 이 버튼들은 간접적으로 AA 클래스의 변수 값이 변경됨으로 인해 입력필드의 내용을 변경합니다. 주의가 필요한 중요한 부분은, 다른 무언가(아마도 다른 클래스)가 AA 클래스의 변수 값을 변경했다는 것이며, GUI는 항상 이것들의 변경을 반영시킵니다. 또한, 무엇인지 잘 모를 경우에는 이제부터 많은 GUI 어플리케이션을 작성함에 따라 위와 같은 중요성을 확실히 인식할 수 있게 될 것입니다.
| |||||||||||||||||||||||||||||||||||||||||||||
|
|
정리
이 레슨의 목적은 벨류 홀더와 Aspect 어댑터의 개념을 소개하는 것이었습니다. 입력필드의 "Aspect"를 성정하면, 실제로는 벨류 홀더를 작성합니다. Aspect는 입력필드의 이름과 입력필드의 값을 포함한 이름으로서 생각해주십시오. 그리고, 입력필드는 다른 변수의 변경에 "접합"(adapt)시키는 Aspect 어댑터로 변경할 수 있습니다.
| |||||||||||||||||||||||||||||||||||||||||||||
| 목차 | 레슨3 | 레슨5 | | ||||||||||||||||||||||||||||||||||||||||||||||
