Onionmixer: VisualWorksTutorial2 Page05 추가

2012-12-22T04:30:02Z

VisualWorksTutorial2 Page05 추가

New page

{{CincomTop|{{CincomSmalltalkHeadBanner|웹로그의 통계2 레슨5|시작에 앞서}}}}

{| style="border: none; width:100%;"
|- style="text-align:center;font-weight:bold; font-style: normal;font-size:110%;"
| colspan="2" | | 목차 | 레슨4 | 레슨6 |<hr style="color:black;background-color:black;height:4px;">
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageOpenbook}}
| 당신이 마지막으로 "첫 VisualWorks 튜토리얼"을 본 이후로 시간이 제법 지났을지도 모릅니다. 혹은 지금 막 마쳤을지도 모릅니다. 혹시 잊어버렸다면 기억을 되살려 주시기 바랍니다.
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageCertifacate}}
| {{CincomSmalltalkGreenFont|이 레슨에서는 워크스페이스에서 코드를 실행하는 대신 버튼을 클릭해서 어플리케이션을 개시하겠습니다.}}
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageSteps}}
| 1. 튜토리얼1의 코드를 파일 인 해주십시오. 이미 코드를 로드한 경우라면 생략해도 됩니다.

2. {{HighlightBold|System Browser}}를 기동시켜주십시오. VisualWorks {{HighlightBold|메인 런쳐}} 윈도우에서 툴바의 네 번째 버튼을 클릭하거나, {{HighlightBold|Browser>>시스템}} 메뉴를 선택해주십시오.

3. Package Pane(맨 왼쪽)에서 패키지 목록을 끝까지 스크롤해서 {{HighlightBold|WebLogStats}} 패키지를 반전(선택)해주십시오.

4. 이 패키지에 존재하는 클래스는 {{HighlightBold|WebLogClass}} 뿐입니다. {{HighlightBold|WebLog}}에 클래스 이름을 변경함으로서 표준 네이밍 규약에 적합하도록 만듭시다.(기본적으로 클래스 이름에 "class"라는 문자는 넣지 않습니다.)

5. {{HighlightBold|WebLogClass}} 클래스를 클릭(선택)해서 {{HighlightBold|<오퍼레이트 클릭>}}후 {{HighlightBold|"Name Change..."}}를 선택합니다.

[[image:cincom_tutorial2_changeClassName1.png|none|585px|thumb|그림 5-1. 클래스 이름 변경 메뉴]]

6. 다이얼로그 박스에 {{HighlightBold|WebLog}}를 입력해서 OK를 클릭합니다.

[[image:cincom_tutorial2_changeClassName2.png|none|406px|thumb|그림 5-2. 클래스 이름을 WebLog로 변경]]

{{HighlightBold|노트 : 앞으로 {{HighlightBold|WebLog}} 클래스는 어플리케이션의 핵심 로직이 됩니다. 로그파일을 실제 해석작업하는 모든 메서드는 {{HighlightBold|WebLog}} 클래스에 속합니다. 이제 곧 GUI를 작성하고 {{HighlightBold|WebLogGUI}} 클래스라고 명명할 것입니다. 로직을 제어하는 메서드와 속성, GUI를 제어하는 메서드와 속성을 식별하기 쉽도록 하기 위함입니다.}}

7. System Browser를 닫아주십시오. 앞서 연습했던 {{HighlightBold|UIPainter}}가 열려있는 경우엔 이것도 닫아주십시오.

8. {{HighlightBold|New Canvas}} 버튼을 클릭해주십시오.

9. 맨 처음으로 할 일은 (Blank Canvas)윈도우의 표제를 바꾸는 것입니다. {{HighlightBold|GUI페인터 툴}} 윈도우로 이동해주십시오.(그림 5-3 참조)

[[image:cincom_tutorial2_fig251.png|none|501px|thumb|그림 5-3. 블랭크 캔버스의 속성]]

10. {{HighlightBold|Noname Canvas}} 문자열을 {{HighlightBold|Web Sever log Analysis}}로 변경해주십시오. 그리고 적용 버튼을 클릭해주십시오.

{{CincomSmalltalkBlueFont|Blank 캔버스의 창 이름이 변경된 것에 주의해주십시오.}}

11. 캔버스 버튼을 배치합니다. {{HighlightBold|팔레트}} 윈도우에서 {{HighlightBold|Action Button}} 아이콘을 클릭해주십시오. 그리고 Blank Canvas로 이동해주십시오. Action이라는 버튼이 출현합니다. 마우스를 이동시키면 버튼도 이동합니다. 클릭하게 되면, 버튼은 각 모서리에 "핸들"이 표시되어 배치됩니다. 핸들을 클릭해서 마우스를 드래그하면 버튼 사이즈를 변경할 수 있습니다.

12. 버튼에서 핸들이 표시된 상태에서 {{HighlightBold|GUI페인터 툴}} 윈도우를 봐주십시오.(그림 5-2 참조)

[[image:cincom_tutorial2_fig252.png|none|501px|thumb|그림 5-4. 액션 버튼의 속성]]

13. Action 문자열을 {{HighlightBold|Start}}로 변경합니다. Action Field 로 이동하여 {{HighlightBold|startWebLog}}를 입력해주십시오. {{HighlightBold|적용}}을 클릭합니다.

{{CincomSmalltalkBlueFont|액션 필드에 입력한 문자열은 메서드의 이름입니다. 이 메서드는 아직 존재하지 않습니다. 뒤에 기술하겠습니다. 그리고, {{HighlightBold|UIPainter}}는 메서드의 존재를 신경쓰지 않으며, 그 존재를 확인하지 않습니다. 때문에, 문자열을 심벌({{HighlightBold|#startWebLog}})로 변경합니다. 이것이 일반적입니다. 윈도우를 기동하여 버튼이 클릭되었을 경우, 이 심벌을 취득해서 같은 이름의 메서드를 조사하기 위해 그 심벌을 사용합니다.(실행시에 메서드 이름을 해결합니다.)}}

[[image:cincom_tutorial2_fig253.png|none|501px|thumb|그림 5-5. 개시 버튼의 속성]]

14. {{HighlightBold|GUI페인터 툴}} 윈도우에서 메인 윈도우를 선택해주십시오.

15. {{HighlightBold|인스톨}} 버튼을 클릭해주십시오.

16. 표시된 다이얼로그 박스의 다음 클래스에 {{HighlightBold|install label}}이 있는 입력 필드에 {{HighlightBold|WebLogGUI}}를 입력하고 OK를 클릭해주십시오.

[[image:cincom_tutorial2_fig254.png|none|248px|thumb|그림 5-6. GUI용 신규 클래스 지정]]

17. 다음 다이얼로그 박스의 {{HighlightBold|작성}} 탭 아래에 있는 카테고리를 {{HighlightBold|UIApplications-New}}에서 {{HighlightBold|WebLogStats}}로 변경해주십시오. 그리고 OK를 클릭해주십시오.

[[image:cincom_tutorial2_fig255.png|none|493px|thumb|그림 5-7. 기존 코드와 같은 카테고리를 지정]]

18. {{HighlightBold|GUI페인터 툴}}의 정의 버튼을 클릭해주십시오.

19. 다음 다이얼로그 박스에서 {{HighlightBold|startWebLog}} 메서드와 {{HighlightBold|Add to initiallize}}에 체크가 되어있는 것을 확인해주십시오. OK를 클릭해주십시오.

{{CincomSmalltalkBlueFont|Note : UIPainter(이 경우, 기술적으로는 UIDefiner)는 startWebLog 메서드의 "Stub"코드를 자동적으로 생성합니다.}}

20. {{HighlightBold|GUI페인터 툴}}의 브라우저 버튼을 클릭해주십시오. 또한, 메인 윈도우가 선택되어 있는 것을 확인해주십시오. 위젯이 선택되어있으면 그것에 대응하는 메서드가 열립니다.

{{CincomSmalltalkBlueFont|{{HighlightBold|WebLogGUI}} 클래스를 탐색 하기 위해서("계층"모드에서) System Browser가 표시됩니다.}}

21. {{HighlightBold|action}} 프로토콜을 클릭(선택)해주십시오.(인스턴스 탭이 선택되어 있는 것을 확인). {{HighlightBold|startWebLog}} 메서드를 클릭(선택)해주십시오. {{HighlightBold|UIDefiner}}에 의해 생성된 스텁 메서드(코드)가 표시됩니다.

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

<syntaxhighlight lang="smalltalk">
startWebLog
WebLog new start.
</syntaxhighlight>

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

[[image:cincom_tutorial2_fig256.png|none|648px|thumb|그림 5-8. 새로운 startWebLog 메서드]]

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

25. {{HighlightBold|GUI 페인터 툴}}에서 {{HighlightBold|윈도우 열기}}를 클릭하고, 실행된 어플리케이션의 {{HighlightBold|Start}} 버튼을 클릭해주십시오.

{{CincomSmalltalkBlueFont|Note : 프로그램은 Workspace에서 실행했을 때와 똑같이 동작할 것입니다.}}

26. VisualWorks {{HighlightBold|런쳐}}에서 System Browser를 기동시켜주십시오. 패키지 페인(가장 왼쪽)에서 패키지 일람을 맨 아래까지 스크롤 해서 {{HighlightBold|(none)}}을 반전(선택)해주십시오.

앞서 작성한 GUI를 가진 {{HighlightBold|WebLogGUI}} 클래그가 있습니다. 아직 소속 패키지 지정을 하지 않은 경우엔 이 곳에 속합니다. 그러면, {{HighlightBold|WebLog}}와 같이 {{HighlightBold|WebLogStats}} 패키지에 소속시키도록 합시다.

27. {{HighlightBold|WebLogGUI}} 클래스를 선택해서 {{HighlightBold|<오퍼레이트 클릭>}}후 {{HighlightBold|Move>>All to Pachakge}} 를 선택합니다.

[[image:cincom_tutorial2_fig257a.png|none|655px|thumb|그림 5-9. WebLogGUI 클래스를 패키지로 이동]]

28. 필터에 {{HighlightBold|WebLogStats}}를 입력하고 하단에 표시된 {{HighlightBold|WebLogStats}} 패키지를 선택합니다. 그리고 {{HighlightBold|OK}} 버튼을 클릭해주십시오.

[[image:cincom_tutorial2_fig257b.png|none|326px|thumb|그림 5-10. WebLogStats 패키지의 선택]]

29. {{HighlightBold|WebLogStats}} 패키지를 선택해주십시오. {{HighlightBold|WebLog}}와 {{HighlightBold|WebLogGUI}} 두 가지 클래스를 확인할 수 있습니다.

[[image:cincom_tutorial2_fig257c.png|none|648px|thumb|그림 5-11. WebLogStats 패키지에 있는 두 가지 클래스]]

30. 패키지 페인에서 {{HighlightBold|WebLogStats}}를 클릭(선택)하고 {{HighlightBold|<오퍼레이트 클릭>}}후 {{HighlightBold|File Out>>Package...}}를 선택해주십시오.

31. {{HighlightBold|weblogstats_2_stage1.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|아래와 같은 내용을 학습하였습니다}}
* 클래스 이름 변경
* 액션 버튼을 가진 단순한 윈도우(캔버스)를 작성
* 캔버스와 버튼 속성 설정
* 버튼 클릭으로 메서드를 동작
|- style="text-align:center;font-weight:bold; font-style: normal;font-size:120%;"
| colspan="2" |<hr style="color:black;background-color:black;height:4px;"> | 목차 | 레슨4 | 레슨6 |
|}

VisualWorksTutorial2:Page06 - Revision history

Onionmixer: VisualWorksTutorial2 Page05 추가