Onionmixer: VisualWorksTutorial2 Page08 추가

2012-12-22T13:23:06Z

VisualWorksTutorial2 Page08 추가

New page

{{CincomTop|{{CincomSmalltalkHeadBanner|웹로그의 통계2 레슨7|입력 선택}}}}

{| style="border: none; width:100%;"
|- style="text-align:center;font-weight:bold; font-style: normal;font-size:110%;"
| colspan="2" | | 목차 | 레슨6 | 레슨8 |<hr style="color:black;background-color:black;height:4px;">
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageOpenbook}}
| 첫 튜토리얼에서는, 다이얼로그 박스에 "파일 필터"를 입력해서 프로그램이나 웹 서버 로그파일만을 읽어오게 했었습니다. 이 로그파일 위치는 프로그램에 직접 기술했습니다. 현재, 이 변수들을 격납하는 인스턴스 변수는 {{HighlightBold|WebLog}} 클래스의 메서드에서 초기화(설정)되어 있습니다. 이것은 반드시 변경해야 합니다. {{HighlightBold|WebLog}} 클래스에 이 변수들의 getter와 setter 메서드를 작성할 필요가 있습니다. 그렇게 하므로서, {{HighlightBold|WebLogGUI}} 클래스에서 그것들의 변수에 억세스할 수 있습니다.
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageCertifacate}}
| {{CincomSmalltalkGreenBigFont|이 레슨에서는 두 개의 입력 필드를 작성하겠습니다. 이 필드에는 로그파일 위치와 로그파일만을 선택하기 위해 사용되는 필터를 유저가 지정합니다.}}
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageSteps}}
| 1. {{HighlightBold|System Browser}} 윈도우가 아직 열려있을 것입니다({{HighlightBold|WebLogStats}} 패키지가 선택된 상태로). 만일 그렇지 않은 경우엔 {{HighlightBold|System Browser}}를 이용해서 {{HighlightBold|WebLogStats}} 패키지를 선택해주십시오.

2. {{HighlightBold|WebLog}} 클래스를 선택해주십시오. {{HighlightBold|인스턴스}} 탭이 선택된 것을 확인해주십시오.

3. 프로토콜 Pane에서 {{HighlightBold|<오퍼레이트 클릭>}}후 {{HighlightBold|New...}}를 선택해주십시오.

4. 표시된 다이얼로그에 {{HighlightBold|accessing}}을 입력하고 OK를 클릭해주십시오(이미 존재하는 경우에는 작성할 필요가 없습니다.).

{{CincomSmalltalkBlueFont|코드 Pane에 텍스트가 표시됩니다. 이것은 메서드를 작성하기 위해 사용하는 "템플릿"입니다.}}

5. {{HighlightBold|accessing}} 프로토콜 하위에 아래와 같이 네 개의 메서드를 작성해주십시오(이미 작성된 경우엔 아무것도 할 필요가 없습니다.).

<syntaxhighlight lang="smalltalk">
filter
^filter
</syntaxhighlight>

<syntaxhighlight lang="smalltalk">
filter: aFilter
filter := aFilter
</syntaxhighlight>

<syntaxhighlight lang="smalltalk">
logDirectory
^logDirectory
</syntaxhighlight>

<syntaxhighlight lang="smalltalk">
logDirectory: aLogDirectory
logDirectory := aLogDirectory
</syntaxhighlight>

6. {{HighlightBold|initialize}} 메서드({{HighlightBold|initialize-release}} 프로토콜)의 {{HighlightBold|logDirectory}} 변수의 값을 초기화하는 코드행을 코멘트로 만들거나, 혹은 삭제해주십시오.

7. {{HighlightBold|start}} 메서드({{HighlightBold|private}} 프로토콜) 아래 코드행을 코멘트로 만들거나 혹은 삭제해주십시오.

<syntaxhighlight lang="smalltalk">
filter := Dialog request: 'Please enter a filter ' initialAnswer: 'ws00'.
</syntaxhighlight>

8. {{HighlightBold|GUI페인터 툴}} 윈도우가 열려있는 경우, 그곳으로 되돌아가주십시오. 만일 열려있지 않은 경우, {{HighlightBold|WebLogGUI}}를 열어주십시오(이전 12-15레슨을 참조).

9. 캔버스에 라벨과 입력필드를 배치해주십시오.
* 라벨의 {{HighlightBold|문자열 속성}}에 {{HighlightBold|File Filter}}를 설정
* 입력 필드의 {{HighlightBold|Aspect 속성}}에 {{HighlightBold|filterUI}}를 설정

10. 캔버스에 별도의 라벨과 입력필드를 배치해주십시오.
* 라벨의 {{HighlightBold|문자열속성}}에 {{HighlightBold|Log File Directory}}를 설정
* 입력필드의 {{HighlightBold|Aspect 속성}}에 {{HighlightBold|logDirectoryUI}}를 설정

{{CincomSmalltalkBlueFont|입력필드에서 사용했던 이름은 전형적인 네이밍 규약을 따르고 있지 않습니다. {{HighlightBold|WebLog}} 클래스에서 이름만 단순히 취한 후, {{HighlightBold|UI}}라는 첨자를 불여, 그것에 대응하는 UI를 작성하였습니다. 이로서 변수를 쉽게 기억할 수 있습니다.}}

[[image:cincom_tutorial2_fig271.png|none|216px|thumb|그림 7-1. 완성된 캔버스]]

11. {{HighlightBold|GUI페인터}} 툴로 돌아가서, 트리 목록의 {{HighlightBold|메인 윈도우}}를 클릭(선택)합니다. {{HighlightBold|인스톨}} 버튼을 클릭하고, 표시된 다이얼로그 박스의 {{HighlightBold|OK}}를 클릭합니다.

{{CincomSmalltalkBlueFont|목록이 늘어났습니다.}}

13. 아래와 같이 편집해주십시오.
* {{HighlightBold|filterUI}}와 {{HighlightBold|logDirectoryUI}}는 체크된 채로 둠
* {{HighlightBold|startWebLog}}는 체크를 해제

<span style="font-weight:normal;color:red;font-size:100%">Note : {{HighlightBold|startWebLog}}의 체크 마크({{HighlightBold|초기화를 추가}}의 체크 마크도 동일)를 그대로 두면, {{HighlightBold|starWebLog}}에 이미 쓰여진 메서드는 {{HighlightBold|UIDefiner}}에 의해 생성된 스텁 메서드에서 덧쓰여집니다. 그러고 싶진 않군요. 입력 필드의 초기화 메서드만을 기술하기 위해 실행합니다.</span>

[[image:cincom_tutorial2_fig272.png|none|248px|thumb|그림7-2. 정의 모델 다이얼로그의 startWebLog 체크 마크 해제]]

14. {{HighlightBold|GUI페인터}} 툴에서 {{HighlightBold|Browse}} 버튼을 클릭합니다.

{{CincomSmalltalkBlueFont|{{HighlightBold|System Browser}}는 {{HighlightBold|WebLogGUI}} 클래스의 클래스 정의를 표시하고 있는 것을 확인해주십시오.}}

15. 아래와 같이 행을 변경해주십시오.

<syntaxhighlight lang="smalltalk">
instanceVariableNames: 'logDirectoryUI filterUI '
</syntaxhighlight>

이 행을

<syntaxhighlight lang="smalltalk">
instanceVariableNames: 'aWebLog logDirectoryUI filterUI '
</syntaxhighlight>

이 행으로 변경하시면 됩니다.

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

17. {{HighlightBold|System Browser}}에서 인스턴스 탭을 선택해주십시오. 프로토콜 창에서 {{HighlightBold|<오퍼레이트 클릭>}}후 {{HighlightBold|New...}}를 선택해주십시오.

18. 표시된 다이얼로그 박스에 {{HighlightBold|initialize-release}}를 입력하고 OK를 클릭해주십시오.

{{CincomSmalltalkBlueFont|코드 Pane에 텍스트가 표시됩니다. 이것은 메서드를 작성하기 위해 사용하는 "템플릿"입니다.}}

19. {{HighlightBold|initialize-release}} 프로토콜 하위에 아래와 같은 메서드를 입력해주십시오.

<syntaxhighlight lang="smalltalk">
initialize
aWebLog := WebLog new.
self filterUI value: 'ws00'.
self logDirectoryUI value: 'c:\vw7.7\image'.
</syntaxhighlight>

{{CincomSmalltalkBlueFont|Note : 코드 마지막 행은 시스템 환경에 따라서 {{HighlightBold|logDirectory}}의 값을 설정해주십시오.}}

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

21. {{HighlightBold|actions}} 프로토콜을 선택후 {{HighlightBold|startWebLog}} 메서드를 선택해주십시오. 메서드를 아래와 같이 변경해주십시오.

<syntaxhighlight lang="smalltalk">
startWebLog
aWebLog filter: filterUI value.
aWebLog logDirectory: logDirectoryUI value.
aWebLog start.
</syntaxhighlight>
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageQuestion}}
| {{HighlightBold|이 3행 코드는 단순하지만 많은 것을 실행하고 있습니다. 이 코드행은 VisualWorks에서 GUI 어플리케이션이 어떻게 동작하는지 이해하기 위해 매우 중요합니다. 1행 1행 코드를 확인하여, 각 행에서 실행되는 것들을 이해하시기 바랍니다.}}

<syntaxhighlight lang="smalltalk">
aWebLog filter: filterUI value.
</syntaxhighlight>

{{CincomSmalltalkBlueFont|{{HighlightBold|Initialize}} 메서드는 {{HighlightBold|WebLog}} 클래스의 인스턴스를 작성하고, {{HighlightBold|aWebLog}}의 인스턴스 변수는, 그 인스턴스를 보유합니다. {{HighlightBold|aWebLog}} 변수를 사용함으로서, 그 클래스 전체 속성 및 메서드와 커뮤니케이션이 가능하게 되었습니다. 실행을 통하여, GUI로부터 {{HighlightBold|filterUI}}입력 필드의 내용과 {{HighlightBold|filter}} 속성을 설정합니다. {{HighlightBold|Value}} 메서드를 사용해서 입력필드의 값을 취득합니다. 왜냐하면(물론) 입력필드는 {{HighlightBold|벨류 홀더}}이기 때문입니다.}}

<syntaxhighlight lang="smalltalk">
aWebLog logDirectory: logDirectoryUI value.
</syntaxhighlight>

{{CincomSmalltalkBlueFont|속성이 {{HighlightBold|logDirctory}}라는 것만 제외하면, 하는 일은 {{HighlightBold|filterUI}} 입력필드에서 실행한 것과 똑같습니다. 이 1행의 코드는 특정 클래스({{HighlightBold|WebLogGUI}})에서 값을 얻어서 다른 클래스({{HighlightBold|WebLog}})의 속성에 설정하였습니다.}}

<syntaxhighlight lang="smalltalk">
aWebLog start.
</syntaxhighlight>

{{CincomSmalltalkBlueFont|WebLog 클래스의 인스턴스를 지니고 있기에, 속성과 똑같이 그 메서드에 억세스 할 수 있습니다. WebLog의 인스턴스는 파일 필터의 설정과 로그 디렉토리 설정을 보유하고 있기 때문에, 실행할 준비는 완료되어 있습니다. {{HighlightBold|start}} 메시지를 {{HighlightBold|aWebLog}} 오브젝트에 송신할 뿐입니다. Workspace에서 실행할 때와 똑같습니다.}}
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageSteps}}
| 22. 코드 창에서 {{HighlightBold|<오퍼레이트 클릭>}}후 {{HighlightBold|Accept}}를 선택해주십시오.

23. {{HighlightBold|System Browser}}를 닫아주십시오.

24. {{HighlightBold|GUI페인터}} 툴 윈도우로 돌아가 트리 목록의 {{HighlightBold|메인 윈도우}}를 클릭(선택)해주십시오. 그리고, {{HighlightBold|인스톨}} 버튼을 클릭해주십시오. 표시된 다이얼로그 박스에서 {{HighlightBold|OK}}를 클릭해주십시오. 어플리케이션을 테스트합니다. 전부 동작하는지 확인해주십시오.

25. {{HighlightBold|System Browser}}로 돌아가주십시오(닫은 경우엔 열어주십시오.). 카테고리 페인(맨 좌측)에서 {{HighlightBold|WebLogStats}}카테고리까지 스크롤해주십시오.

{{CincomSmalltalkBlueFont|세 개의 클래스({{HighlightBold|WebLog}}, {{HighlightBold|WebLogGUI}}와 {{HighlightBold|WebLogAbout}})가 표시되지 않을 경우, {{HighlightBold|브라우저>>최신정보}}로 갱신을 선택해주십시오.}}

26. 카테고리 창에서 {{HighlightBold|WebLogStats}}를 클릭(선택)해주십시오. {{HighlightBold|<오퍼레이트 클릭>}}후 {{HighlightBold|Save to file}}을 선택해주십시오.

27. {{HighlightBold|weblogstats_2_stage4.st}}를 입력해주십시오.
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageCertifacate}}
| <font style="text-align:center;font-weight:bold; font-style: normal;font-size:110%;">정리</font>

상이한 클래스간의 커뮤니케이션 방법을 이해했습니다. GUI 클래스는 {{HighlightBold|WebLog}} 클래스의 인스턴스를 작성해서 입력필드에 저장한 값을 변수(직접 코드에 기술한)에 설정합니다. 다음은 어플리케이션의 진척을 나타내는 다이얼로그를, 좀 더 중요한 무언가로 치환해보겠습니다.

{{HighlightBold|아래와 같은 내용을 학습하였습니다}}
* 입력필드에서 값을 취득
* 다른 클래스의 변수로 설정
|- style="text-align:center;font-weight:bold; font-style: normal;font-size:120%;"
| colspan="2" |<hr style="color:black;background-color:black;height:4px;"> | 목차 | 레슨6 | 레슨8 |
|}

VisualWorksTutorial2:Page08 - Revision history

Onionmixer: VisualWorksTutorial2 Page08 추가