Onionmixer: VisualWorksTutorial2 Page09 추가

2012-12-26T09:45:58Z

VisualWorksTutorial2 Page09 추가

New page

{{CincomTop|{{CincomSmalltalkHeadBanner|웹로그의 통계2 레슨8|입력지시의 치환}}}}

{| style="border: none; width:100%;"
|- style="text-align:center;font-weight:bold; font-style: normal;font-size:110%;"
| colspan="2" | | 목차 | 레슨7 | 레슨9 |<hr style="color:black;background-color:black;height:4px;">
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageOpenbook}}
| 첫 튜토리얼에서는 다이얼로그 박스를 어플리케이션의 진척을 나타내기 위해 사용했었습니다. GUI 제외한 다른곳에서 사용할 수 있는 것은 그 뿐이었습니다(다이얼로그는 매우 단순한 GUI라 하기보다는, GUI의 요소입니다.). 지금 다이얼로그 박스에 표시된 것을 GUI에서는 읽어오기 전용 입력필드를 사용해서 표시합니다. 또한, 로그파일에서 취득하는 "인기 페이지"의 수는 {{HighlightBold|WebLog}} 클래스 안의 코드에 10을 직접 기술했었습니다. 인기페이지의 최대수를 표시하는 "스핀 버튼" 위젯을 캔버스에 배치하겠습니다. 지금까지 사용했던 위젯과 같이, 개념 자체는 매우 단순명쾌합니다. 스핀버튼은 입력필드와 닮았습니다. {{HighlightBold|WebLog}} 클래스에 값을 넘기기 위해 사용합니다. {{HighlightBold|WebLog}} 클래스는 입력 필드에 연결된, 모든 (갱신된)변수를 유지하고 있습니다. 이것은 Aspect 어댑터의 예가 될 것입니다.
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageCertifacate}}
| {{CincomSmalltalkGreenBigFont|이 레슨에서는, 다이얼로그 박스에 의한 입력지시를 입력필드에 치환하겠습니다. 이 입력필드는 다이얼로그 박스로 표시하기 위해 사용한 "status" 메시지를 포함하고 있습니다. 유저에게 인기페이지 카운트(Top 10, Top 3, etc)를 선택할 수 있도록하는 스핀버튼을 삽입하겠습니다.}}
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageSteps}}
| 1. {{HighlightBold|System Browser}}윈도우는 열려있을 것입니다({{HighlightBold|WeblogStats}} 패키지가 선택된 상태로.). 만일 열려있지 않은 경우엔, {{HighlightBold|System Browser}}를 기동하고 {{HighlightBold|WebLogStats}} 패키지를 선택해주십시오.

2. {{HighlightBold|WebLog}} 클래스를 입력해주십시오.

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

<syntaxhighlight lang="smalltalk">
instanceVariableNames: 'filter logDirectory'
</syntaxhighlight>

<syntaxhighlight lang="smalltalk">
instanceVariableNames: 'filter logDirectory status maxPages'
</syntaxhighlight>

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

5. {{HighlightBold|인스턴스 탭}}이 선택된 것을 확인해주십시오. {{HighlightBold|accessing}} 프로토콜 하위에 아래와 같은 메서드를 작성해주십시오.

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

<syntaxhighlight lang="smalltalk">
maxPages: aCount
maxPages := aCount.
</syntaxhighlight>

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

<syntaxhighlight lang="smalltalk">
status: aStatus
status := aStatus.
self changed: #status.
</syntaxhighlight>

{{CincomSmalltalkBlueFont|{{HighlightBold|status:}}메서드의 맨 마지막 행에 대해서 잠시 설명하겠습니다. {{HighlightBold|changed:}}메서드는 "브로드 캐스트" 혹은 "노티파이어(통지)"메서드라 불립니다. {{HighlightBold|status}}속성 값이 변경된 것을 시스템에 통지합니다. {{HighlightBold|changed:}}의 인수는 자기 자신의 변수의 심벌입니다. 이 변수가 변경될때마다, "이 변경점에 관심이 있는 여러분, 이 값은 변경되었습니다."라는 통지를 시스템에 "브로드 캐스트"하는 것을 의미합니다. 나중에, {{HighlightBold|WebLogGUI}}클래스에 이 변수 변경에 관심이 있다는 것을 시스템에 전달합니다. 어플리케이션의 진척을 나타내기 위해서 {{HighlightBold|ststus}} 변수를 사용합니다.}}

6. {{HighlightBold|start}} 메서드({{HighlightBold|private}} 프로토콜)의 코드를 아래와 같이 치환합니다.

<syntaxhighlight lang="smalltalk">
Dialog warn: 'All Statistics Done'
</syntaxhighlight>

이 행을

<syntaxhighlight lang="smalltalk">
self status: 'All Statistics Done'
</syntaxhighlight>

이런 내용으로 변경해주세요.

7. {{HighlightBold|startHits}} 메서드에서 아래와 같은 코드 행을 삭제합니다.

<syntaxhighlight lang="smalltalk">
Dialog warn: 'Site hits complete'
</syntaxhighlight>

임시변수 선언 바로 밑에 아래와 같은 행을 추가해주십시오.

<syntaxhighlight lang="smalltalk">
self status: 'Starting hits analysis ...'.
</syntaxhighlight>

8. {{HighlightBold|startPageCount}} 메서드에서 아래와 같은 코드 행을 삭제합니다.

<syntaxhighlight lang="smalltalk">
Dialog warn: 'Page Counts Complete'
</syntaxhighlight>

임시변수 선언 바로 밑에 아래와 같은 행을 추가해주십시오.

<syntaxhighlight lang="smalltalk">
self status: 'Starting page count analysis ...'.
</syntaxhighlight>

아래 행을 치환해주십시오.

<syntaxhighlight lang="smalltalk">
1 to: 10 do: [:xx | out cr; nextPutAll: (count at: xx) printString].
</syntaxhighlight>

위의 행을

<syntaxhighlight lang="smalltalk">
1 to: (self maxPages) do: [:xx | out cr; nextPutAll: (count at: xx) printString].
</syntaxhighlight>

이런 내용으로 변경해주시기 바랍니다.

9. {{HighlightBold|GUI페인터 툴}}이 열려있는 경우엔 그곳으로 돌아가주십시오. 만일 닫혀있는 경우엔 {{HighlightBold|WebLogGUI}}를 열어주십시오.(레슨 6의 스텝 12-15를 참조)

10. 추가할 위젯을 위해, 캔버스 사이즈를 변경합니다. 캔버스의 공백부분(캔버스를 선택, 어떠한 위젯도 선택하지 않음)을 클릭해서 캔버스의 우측 하단 모서리로 이동합니다. 커서가 화살표로 바뀌면 우측 하단쪽으로 모서리를 드래그합니다. 캔버스의 높이가 두 배가 된 것을 확인해주십시오.

11. 캔버스에 라벨과 입력필드를 배치해주십시오. 속성을 아래와 같이 설정해주십시오.
* 레이블 {{HighlightBold|문자열 속성}}을 {{HighlightBold|Status}}로 설정.
* 입력 필드 {{HighlightBold|화면 특성}}을 {{HighlightBold|statusUI}} 변경.
* {{HighlightBold|적용}}을 클릭

12. 캔버스에 레이블과 스핀 버튼을 배치합니다. 스핀 버튼은 팔레트의 레이블 왼쪽에 있습니다. 속성을 다음과 같이 설정하십시오.
* 라벨의 {{HighlightBold|문자열 속성}}을 {{HighlightBold|Maximum Pages}}로 설정
* 스핀 버튼의 {{HighlightBold|Aspect 속성}}을 {{HighlightBold|maxPagesUI}}로 설정
* 스핀 버튼의 {{HighlightBold|타입 속성}}을 {{HighlightBold|수(Nember)}}로 설정
* 스핀 버튼의 {{HighlightBold|포맷 속성}}을 0으로 설정
* 스핀 버튼의 {{HighlightBold|값-아래 속성}}을 1로 설정
* 스핀 버튼의 {{HighlightBold|값-위 속성}}을 20으로 설정
* 스핀버튼의 {{HighlightBold|인터벌 속성}}을 1로 설정
* {{HighlightBold|적용}}을 클릭

13. 캔버스를 가장 적절한 사이즈로 변경해주십시오. 캔버스는 아래 그림과 같이 될것입니다.

[[image:cincom_tutorial2_fig281.png|none|216px|thumb|그림 8-1. 사이즈를 변경한 캔버스]]

14. {{HighlightBold|GUI페인터}} 툴에서 인스톨 버튼을 클릭하고, 그 다음 OK를 클릭해주십시오.

15. 캔버스 윈도우로 돌아가서, {{HighlightBold|statusUI}} 입력 필드를 클릭(선택)해주십시오. {{HighlightBold|GUI페인터}} 툴의 정의 버튼을 클릭해주십시오.

{{CincomSmalltalkBlueFont|과거에 실행했던 것과 비교해 무언가 다르다는 점에 주의해주십시오. 전형적인 개발 사이클에서는, 맨 처음 캔버스 위에 필요한 위젯을 전부 배치하지 않기에(사실 그것이 목적이지만, 왠만해선 실제로 그럴 수 없음.), 이런 부분에 익숙해져야 합니다. 이 방법에서 VisualWorks는 {{HighlightBold|statusUI}}입력 필드 만이 일람되어 다이얼로그 박스를 표시됩니다. 캔버스 위에 있는 한 가지 위젯만 선택되었을 때에 이렇게 됩니다. 앞으로, 캔버스 위에 더 많은 위젯을 배치하기 때문에, 연습할 수 있는 좋은 기회입니다. 이유는 매우 단순합니다. 더 많은 위젯을 추가하면 코드도 추가하게 되겠죠. 만일 캔버스 위에 모든 위젯을 가져와 모조리 체크한 상태로 두면, 이 위젯에 대해 기존에 기술했던 메서드는 전부 덮어쓰여지게 됩니다!!}}

16. {{HighlightBold|statusUI}}와 {{HighlightBold|"초기화를 추가"}}의 체크마크를 그대로 두고 OK를 클릭해주십시오.

17. {{HighlightBold|maxPagesUI}}입력 필드를 클릭(선택)해주십시오. GUI페인터 툴의 정의 버튼을 클릭해주십시오.

{{CincomSmalltalkBlueFont|아직 선택하지 않은 경우엔, 캔버스에서 위젯을 선택하는 것과 같이, {{HighlightBold|GUI페인터 툴}}에서 위젯을 선택할 수도 있습니다. {{HighlightBold|GUI페인터 툴}}은 위젯의 {{HighlightBold|ID}} 필드를 사용해서 일람을 표시하고 있습니다. 여기서, {{HighlightBold|Aspect}} 필드의 값과 같은 이름을 위젯의 {{HighlightBold|ID}} 필드에 설정하는 습관을 들이시기 바랍니다.}}

[[image:cincom_tutorial2_fig282.png|none|514px|thumb|그림 8-2. Aspect 필드와 같은 값(이름)을 ID 필드에 설정]]

18. {{HighlightBold|maxPagesUI}}와 {{HighlightBold|"초기화를 추가"}}의 체크 마크를 그대로 둡니다. OK를 클릭해주십시오.

19. {{HighlightBold|메인 윈도우}}를 클릭(선택)하고 {{HighlightBold|Browse}} 버튼을 클릭해주십시오. {{HighlightBold|WebLogGUI}} 클래스의 인스턴스 정의가 표시되어 있는 것을 확인해주십시오.

20. {{HighlightBold|initialize}} 메서드에 아래의 행을 추가해주십시오.({{HighlightBold|WebLog}}의 새로운 인스턴스를 작성한 이후시점)

<syntaxhighlight lang="smalltalk">
statusUI := AspectAdaptor subject: aWebLog sendsUpdates: true.
statusUI forAspect: #status.
self maxPagesUI value: 10.
</syntaxhighlight>

21. {{HighlightBold|startWebLog}} 메서드의 {{HighlightBold|aWebLog start}}앞에 아래의 행을 추가해주십시오.

<syntaxhighlight lang="smalltalk">
aWebLog maxPages: maxPagesUI value.
</syntaxhighlight>

22. 마지막으로, 이 메서드에 대한 변경을 Accept하기 전에, GUI에 마지막 수정을 합니다. 시스템은 로그파일의 해석에 시간이 걸릴지도 모르니, 시스템이 사용중이라는 것을 유저에게 알려주는 그래피컬한 커서(모래시계)로 변경합니다.

{{HighlightBold|startWebLog}} 메서드를 아래와 같이 변경해주십시오.

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

위의 문장을

<syntaxhighlight lang="smalltalk">
Cursor wait showWhile: [aWebLog start].
</syntaxhighlight>

이 문장으로 변경해 주시기 바랍니다.

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

24. {{HighlightBold|GUI 페인터 툴}}로 돌아가주십시오. {{HighlightBold|메인 윈도우}}(위젯 일람의 첫 엔티티)를 선택해주십시오. {{HighlightBold|배치/사이즈}} 탭을 클릭해서 아래와 같이 설정해주십시오.
* {{HighlightBold|어드밴스}} 라디오 버튼을 클릭해주십시오
* {{HighlightBold|배치}} 아래 있는 첫 라디오 버튼({{HighlightBold|시스템 표준}})을 클릭해주십시오.
* {{HighlightBold|사이즈}} 아래에 두 번째에 위치한 라디오 버튼({{HighlightBold|지정 사이즈}})를 클릭하고 지정 버튼을 클릭해주십시오.

[[image:cincom_tutorial2_fig283.png|none|516px|thumb|그림 8-3. 캔버스 사이즈 파라메터를 변경]]

{{CincomSmalltalkBlueFont|이 스텝에 대해서 간단히 설명하겠습니다. 마지막에 캔버스를 "인스톨"한 후에 사이즈 변경을 했습니다. 위 스탭을 실행함으로인해, 캔버스가 새로운 사이즈를 보유하기 위해서 VisualWorks에 전달해야만 합니다. 만일 그러지 않으면, 캔버스를 열어도 새 사이즈로 변경되지 않습니다.}}

25. {{HighlightBold|인스톨}} 버튼을 클릭해서 다음에 표시되는 다이얼로그 박스에서 {{HighlightBold|OK}}를 클릭해주십시오. {{HighlightBold|윈도우}} 열기 버튼을 클릭해주십시오. 어플리케이션의 테스트를 합니다. 모두 동작하는지 확인해주십시오.

[[image:cincom_tutorial2_fig284.png|none|216px|thumb|그림 8-4. 어플리케이션 실행에 성공]]

26. {{HighlightBold|System Browser}} 윈도우로 돌아가주십시오. 카테고리 Pane(맨 좌측)에서 {{HighlightBold|WebLogStats}} 카테고리까지 스크롤해주십시오.

27. 패키지 Pane에서 {{HighlightBold|WebLogStats}}를 클릭(선택)해주십시오. {{HighlightBold|<오퍼레이트 클릭>}}후 {{HighlightBold|Save to File}}을 선택합니다.

28. {{HighlightBold|weblogstats_2_stage5.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|WebLog}} 클래스는 커다란 변경을 필요로 하게 됩니다.

{{HighlightBold|아래와 같은 내용을 학습하였습니다}}
* {{HighlightBold|Aspect 어댑터}}를 입력필드로 사용
* {{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;"> | 목차 | 레슨7 | 레슨9 |
|}

VisualWorksTutorial2:Page09 - Revision history

Onionmixer: VisualWorksTutorial2 Page09 추가