Onionmixer: 일람 to 목록 으로 수정

2012-12-22T13:26:39Z

일람 to 목록 으로 수정

← Older revision		Revision as of 13:26, 22 December 2012
Line 106:		Line 106:


	13. {{HighlightBold\|리소스 파인더}} 다이얼로그에서 클래스 일람(좌측)을 아래로 스크롤해주십시오. 방금 작성한 두 개의 클래스, {{HighlightBold\|WebLogGUI}}와 {{HighlightBold\|WebLogAbout}}가 보일것입니다.		13. {{HighlightBold\|리소스 파인더}} 다이얼로그에서 클래스 목록(좌측)을 아래로 스크롤해주십시오. 방금 작성한 두 개의 클래스, {{HighlightBold\|WebLogGUI}}와 {{HighlightBold\|WebLogAbout}}가 보일것입니다.

	[[image:cincom_tutorial2_fig263.png\|none\|458px\|thumb\|그림 6-3. 리소스 파인더 다이얼로그]]		[[image:cincom_tutorial2_fig263.png\|none\|458px\|thumb\|그림 6-3. 리소스 파인더 다이얼로그]]
Line 116:		Line 116:


	15. 우측 Pane(리소스 일람)에서 {{HighlightBold\|windowsSpec}}을 선택하고 상단에 있는 {{HighlightBold\|편집}} 버튼을 클릭해주십시오.		15. 우측 Pane(리소스 목록)에서 {{HighlightBold\|windowsSpec}}을 선택하고 상단에 있는 {{HighlightBold\|편집}} 버튼을 클릭해주십시오.


Line 198:		Line 198:


	27. {{HighlightBold\|GUI페인터 툴}} 윈도우로 돌아와 트리 ~~일람에서~~ {{HighlightBold\|메인 윈도우}}를 클릭(선택)해주십시오.		27. {{HighlightBold\|GUI페인터 툴}} 윈도우로 돌아와 트리 목록에서 {{HighlightBold\|메인 윈도우}}를 클릭(선택)해주십시오.


Line 247:		Line 247:


	37. VisualWorks {{HighlightBold\|런쳐}}로부터 System Browser를 기동시켜주십시오. 패키지 Pane(맨 왼쪽)에서 패키지 ~~일람을~~ 맨 아래까지 스크롤해서 {{HighlightBold\|(none)}}을 반전(선택)해주십시오.		37. VisualWorks {{HighlightBold\|런쳐}}로부터 System Browser를 기동시켜주십시오. 패키지 Pane(맨 왼쪽)에서 패키지 목록을 맨 아래까지 스크롤해서 {{HighlightBold\|(none)}}을 반전(선택)해주십시오.

Onionmixer: 페이징 번호 수정

2012-12-22T12:15:59Z

페이징 번호 수정

← Older revision		Revision as of 12:15, 22 December 2012
Line 3:		Line 3:
	{\| style="border: none; width:100%;"		{\| style="border: none; width:100%;"
	\|- style="text-align:center;font-weight:bold; font-style: normal;font-size:110%;"		\|- 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;">		\| colspan="2" \| \| 목차 \| 레슨5 \| 레슨7 \|<hr style="color:black;background-color:black;height:4px;">
	\|-		\|-
	\| style="text-align:right;width:60px;float:left;" \| {{HeadImageOpenbook}}		\| style="text-align:right;width:60px;float:left;" \| {{HeadImageOpenbook}}
Line 286:		Line 286:
	* 메뉴바를 캔버스에 할당		* 메뉴바를 캔버스에 할당
	\|- style="text-align:center;font-weight:bold; font-style: normal;font-size:120%;"		\|- 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~~ \|		\| colspan="2" \|<hr style="color:black;background-color:black;height:4px;"> \| 목차 \| 레슨5 \| 레슨7 \|
	\|}		\|}

Onionmixer: VisualWorksTutorial2 Page07 추가

2012-12-22T12:15:14Z

VisualWorksTutorial2 Page07 추가

New page

{{CincomTop|{{CincomSmalltalkHeadBanner|웹로그의 통계2 레슨6|윈도우를 열고 닫기}}}}

{| 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}}
| 대부분의 GUI 어플리케이션에는 복수의 윈도우가 있습니다. 그렇기에, 코드에 의해 윈도우를 열었다 닫았다 하는 방법을 알 필요가 있습니다.
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageCertifacate}}
| {{CincomSmalltalkGreenBigFont|이 레슨에서는 새로운 윈도우(Help 화면)을 작성하고, 이 윈도우를 열거나 닫거나 하는 방법을 알아보겠습니다. 실제 어플리케이션처럼 헬프 메뉴에서 헬프 화면을 기동합니다.}}
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageCheck}}
| 이 레슨은, 이전 레슨을 완료했다는 사실을 전제로 하고 있습니다. 때문에, {{HighlightBold|System Browser}}와, {{HighlightBold|WebLogGUI}} 캔버스, {{HighlightBold|GUI페인터 툴}}과 팔레트가 열려있는 상태입니다. 전부 열려있는 상태여도 상관은 없습니다만, VisualWorks 런쳐를 제외한 모든 윈도우를 닫는 것을 권합니다.
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageSteps}}
| 1. {{HighlightBold|New Canvas}} 버튼을 클릭해주십시오.

2. 빈(공백) 캔버스에 아래와 같은 위젯을 배치해주십시오.
* 액션버튼 한 개
* 라벨 한 개

3. 아래 표에 따라 속성을 설정해주십시오.

{| 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%;" | Canvas
| style="text-align:left;width:30%;" | 문자열
| style="text-align:left;width:40%;" | About Web Server Log Stats
|- style="color:black;background-color:white;"
| style="text-align:left;width:30%;" | Canvas
| style="text-align:left;width:30%;" | 배경색
| style="text-align:left;width:40%;" | Light Green
|- style="color:black;background-color:white;"
| style="text-align:left;width:30%;" | Button
| style="text-align:left;width:30%;" | 문자열
| style="text-align:left;width:40%;" | OK
|- style="color:black;background-color:white;"
| style="text-align:left;width:30%;" | Button
| style="text-align:left;width:30%;" | Action
| style="text-align:left;width:40%;" | #closeRequest
|- style="color:black;background-color:white;"
| style="text-align:left;width:30%;" | Button
| style="text-align:left;width:30%;" | 문자열
| style="text-align:left;width:40%;" | VisualWorks Web Server Log Stats Version 1.1
|}

프로퍼티 설정이 끝나면 캔버스는 아래와 같이 될 것입니다.

[[image:cincom_tutorial2_fig261.png|none|340px|thumb|그림 6-1. 속성 설정 후의 버전 정보 캔버스.]]

4. {{HighlightBold|GUI페인터 툴}} 윈도우에서 {{HighlightBold|인스톨}} 버튼을 클릭해주십시오.

VisualWorks는 이 윈도우가 속하는 클래스를 묻습니다. 상단 필드(다음 클래스에 인스톨:의 아래)에 WebLogAbout를 입력하고 OK를 클릭해주십시오.

5. {{HighlightBold|클래스 파인더}} 다이얼로그가 표시되면, 카테고리에 {{HighlightBold|WebLogStats}}를 입력하고 OK를 클릭해주십시오.

[[image:cincom_tutorial2_fig262.png|none|493px|thumb|그림 6-2. About 캔버스의 클래스 파인더 다이얼로그.]]

6. {{HighlightBold|GUI페인터 툴}} 윈도우에서 {{HighlightBold|정의}} 버튼을 클릭해주십시오.

다음 다이얼로그 박스에는 액션 버튼({{HighlightBold|#closeRequest}})으로 지정한 메서드(Aspect)에 체크마크가 되어있을 것입니다. {{HighlightBold|closeRequest}} 메서드에 있는 체크마크는 그대로 두고, {{HighlightBold|"초기화 추가"}}에 있는 체크마크는 해제합니다.({{HighlightBold|#closeRequest}}는 {{HighlightBold|ApplicationModel}} 슈퍼 클래스에서 메서드를 계승합니다.) 이것이 윈도우를 닫기위해 필요한 코드입니다.

7. {{HighlightBold|GUI페인터 툴}} 윈도우에서 {{HighlightBold|윈도우 열기}} 버튼을 클릭해주십시오. OK 버튼을 클릭하기 전에, 윈도우를 지금 있는 위치에서 조금 멀리 이동시켜주십시오. 규정위치에 윈도우가 있으면 OK버튼을 눌러 윈도우를 닫아도 아무 일도 일어나지 않은 것 처럼 여기기 때문입니다. OK 버튼을 클릭해주십시오.

8. {{HighlightBold|System Browser}} 윈도우를 기동시켜주십시오. 카테고리 창(맨 왼쪽)에서 {{HighlightBold|WebLogStats}} 카테고리까지 스크롤 다운한 후 선택(반전)해주십시오.

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

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

10. {{HighlightBold|weblogstats_2_stage2.st}}를 입력해주십시오.

11. VisualWorks {{HighlightBold|메인 런쳐}} 윈도우를 제외한 모든 VisualWorks 윈도우를 닫아주십시오.

12. {{HighlightBold|리소스 편집 버튼}}({{HighlightBold|신규 캔버스 버튼}} 옆)을 클릭하거나, {{HighlightBold|Painter>>Resource Finder}} 메뉴를 선택해주십시오.

13. {{HighlightBold|리소스 파인더}} 다이얼로그에서 클래스 일람(좌측)을 아래로 스크롤해주십시오. 방금 작성한 두 개의 클래스, {{HighlightBold|WebLogGUI}}와 {{HighlightBold|WebLogAbout}}가 보일것입니다.

[[image:cincom_tutorial2_fig263.png|none|458px|thumb|그림 6-3. 리소스 파인더 다이얼로그]]

14. {{HighlightBold|WebLogGUI}}를 클릭(반전)해주십시오.

15. 우측 Pane(리소스 일람)에서 {{HighlightBold|windowsSpec}}을 선택하고 상단에 있는 {{HighlightBold|편집}} 버튼을 클릭해주십시오.

{{CincomSmalltalkBlueFont|방금 전에 작성한 UI 윈도우를 검색합니다. Start버튼을 작성한 최초의 UI로 되돌아갑니다.}}

16. {{HighlightBold|GUI페인터}} 툴에서 {{HighlightBold|Tool>>Menu}} 에디터 메뉴를 선택해주십시오.

[[image:cincom_tutorial2_menueditor1.png|none|499px|thumb|그림 6-4. 메뉴 에디터 다이얼로그]]

17. {{HighlightBold|메뉴 에디터}} 윈도우에서 {{HighlightBold|편집}} 메뉴를 선택하고, {{HighlightBold|신규항목}}을 선택하거나, 툴바에 있는 두 번째 버튼(활성화 되어있는 단 한 개의 버튼)을 클릭해주십시오.

18. 문자열: {{HighlightBold|<신규항목>}}을 {{HighlightBold|File(&F)}}로 변경합니다. 탭 키를 눌러주십시오.

{{CincomSmalltalkBlueFont|메뉴에 항목(파일(F))이 작성됩니다.}}

19. {{HighlightBold|메뉴 에디터}} 윈도우에서 {{HighlightBold|편집}} 메뉴를 선택하고, {{HighlightBold|신규 서브 메뉴}} 항목을 선택하거나, 툴바에서 네 번째 버튼을 클릭해주십시오. {{HighlightBold|문자열:<신규항목>}}을 {{HighlightBold|Quit(&E)}}로 변경합니다. 탭 키를 눌러주십시오. {{HighlightBold|값:입력}} 필드에 {{HighlightBold|closeRequest}}를 입력합니다.

[[image:cincom_tutorial2_fig265.png|none|500px|thumb|그림 6-5. 두 개의 엔티티를 설정한 후의 메뉴 에디터]]

20. 유명한 {{HighlightBold|Help>>Version}} 정보 메뉴 구성을 작성하겠습니다. {{HighlightBold|Help}} 메뉴는 {{HighlightBold|File}}과 같은 층에 위치하며, {{HighlightBold|Version}} 정보는 {{HighlightBold|Quit}}와 같은 층에 위치합니다. 종료항목이 반전되어있는 상태에서 툴바의 두 번째 버튼을 클릭해주십시오.(항목의 삽입)

{{CincomSmalltalkBlueFont|올바르지 않은 위치에 항목이 작성됩니다.({{HighlightBold|File}}의 아래, {{HighlightBold|Quit}} 뒤 – {{HighlightBold|Quit}}와 같은 층)}}

툴바의 맨 마지막 버튼을 클릭합니다.(왼쪽으로 이동)

{{CincomSmalltalkBlueFont|올바른 위치인, {{HighlightBold|File}}과 같은 층으로 항목을 이동합니다.}}

21. 문자열:{{HighlightBold|<신규항목>}}을 {{HighlightBold|Help(&H)}}로 변경합니다.

22. {{HighlightBold|메뉴 에디터}} 윈도우에서 {{HighlightBold|편집}} 메뉴를 선택하고, {{HighlightBold|신규 서브 메뉴}} 항목을 선택하거나, 툴바에서 네 번째 버튼을 클릭해주십시오. 문자열:{{HighlightBold|<신규항목>}}을 {{HighlightBold|Version Information(&A)}}로 변경합니다. {{HighlightBold|값:입력}} 필드에 {{HighlightBold|showAboutBox}}를 입력합니다. {{HighlightBold|리턴}} 혹은 {{HighlightBold|엔터키}}를 누릅니다.

{{CincomSmalltalkBlueFont|{{HighlightBold|값}}:필드에 입력한 텍스트는 메서드 이름입니다. 이 메서드는 아직 존재하지 않습니다. 뒤에 작성할 것입니다. 하지만 {{HighlightBold|메뉴 에디터}}는 메서드의 존재 유무를 신경쓰지 않기 때문에, 그 존재를 확인하지 않습니다. 따라서, 문제 없이 컴파일을 할 수 있도록 심벌({{HighlightBold|#showAboutBox}})로 변경합니다. 이것이 일반적입니다. 윈도우를 기동시켜서 {{HighlightBold|Help>>Version Information}}를 선택하였을 때, 이 심벌을 취득하여, 같은 이름의 "메서드 룩업"으로서 그 심벌을 사용합니다.(실행시에 메서드 이름을 해결합니다.)}}

[[image:cincom_tutorial2_fig266.png|none|500px|thumb|그림 6-6. 네 개의 엔티티를 설정한 후의 메뉴 에디터]]

23. {{HighlightBold|메뉴 에디터}} 윈도우에서 {{HighlightBold|표시}} 메뉴를 선택 후, {{HighlightBold|샘플 메뉴 바}}를 선택해주십시오.

{{CincomSmalltalkBlueFont|메뉴가 실제 어플리케이션에 들어가 표시됩니다.}}

[[image:cincom_tutorial2_fig267.png|none|335px|thumb|그림 6-7. 메뉴 에디터 프리뷰]]

24. 메뉴 에디터에서 {{HighlightBold|Menu>>Install}}을 선택하거나, 툴바에서 첫번째 버튼을 클릭해주십시오.

25. 다음 다이얼로그 박스에서 {{HighlightBold|"Install to Next Class"}}에 {{HighlightBold|WebLogGUI}}를 올바르게 설정해주십시오. 마지막 입력 필드({{HighlightBold|혹은 신규 셀렉터를 입력 :}} )에 {{HighlightBold|menuBar}}를 입력하고 OK를 클릭해주십시오.

[[image:cincom_tutorial2_fig268.png|none|248px|thumb|그림 6-8. WebLogGUI 클래스에 메뉴를 인스톨]]

{{CincomSmalltalkBlueFont|{{HighlightBold|셀렉터}}는 무엇일까요? {{HighlightBold|menuBar}}를 왜 그곳에 입력했을까요? VisualWorks의 메뉴는 매우 유연하며 강력합니다. 오른쪽 마우스 버튼을 ({{HighlightBold|<오퍼레이트 클릭>}})클릭했을 때 표시되는 메뉴가 좋은 예입니다. VisualWorks는 작성된 메뉴가 어떤식으로 참조되는지, 언제 사용되는지 알 필요가 있습니다. "셀렉터"는 그 메뉴(참조된 쪽) "이름"의 별명과도 같은 것입니다. 즉, {{HighlightBold|menuBar}}를 호출할 뿐입니다. {{HighlightBold|WebLogGUI}} 클래스에 인스톨했기 때문에, 그 가운데서 사용됩니다.}}

26. {{HighlightBold|메뉴 에디터}}를 닫아주십시오.

27. {{HighlightBold|GUI페인터 툴}} 윈도우로 돌아와 트리 일람에서 {{HighlightBold|메인 윈도우}}를 클릭(선택)해주십시오.

28. {{HighlightBold|메뉴바}} 그룹(영역, 박스, 그룹 등, 자유롭게 부르십시오)을 {{HighlightBold|"Bar를 설정"}}에 체크해주십시오. {{HighlightBold|메뉴:필드}}에 {{HighlightBold|menubar}}를 입력해주십시오.

[[image:cincom_tutorial2_fig269.png|none|463px|thumb|그림 6-9. 캔버스에 menuBar 메뉴를 적용]]

29. {{HighlightBold|적용}}을 클릭해주십시오.

30. {{HighlightBold|인스톨}} 버튼을 클릭하고, 다음 윈도우에서 {{HighlightBold|OK}}를 클릭해주십시오. 전부 표준값으로 하시면 됩니다.

[[image:cincom_tutorial2_fig26a.png|none|216px|thumb|그림 6-10. 메뉴는 캔버스에 인스톨된 후 바로 표시됨.]]

31. {{HighlightBold|GUI페인터}} 툴에서 {{HighlightBold|Browse}} 버튼을 클릭해주십시오.

32. {{HighlightBold|System Browser}}가 {{HighlightBold|WebLogGUI}} 클래스를 표시해서 나타냅니다. {{HighlightBold|action}} 프로토콜(인스턴스 탭이 선택된 것을 확인)을 클릭(선택)해주십시오. {{HighlightBold|startWebLog}} 메서드를 클릭(선택)해주십시오. 메서드 코드를 확인해주십시오.

33. 모든 코드를 아래와 같이 전부 바꿔주십시오.

<syntaxhighlight lang="smalltalk">
showAboutBox
self open: WebLogAbout new interface: #windowSpec
</syntaxhighlight>

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

35. {{HighlightBold|GUI페인터 툴}}에서 {{HighlightBold|윈도우 열기}} 버튼을 클릭해주십시오.

36. 어플리케이션을 {{HighlightBold|테스트}}합니다. {{HighlightBold|File>>Quit}}로 윈도우가 닫히는 것을 확인해주십시오. {{HighlightBold|Help>>Version Information}}에서 버전정보 윈도우가 기동되는 것을 확인해주십시오. {{HighlightBold|Start}}로 어플리케이션이 실행되는 것을 확인해주십시오.

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

앞서 작성했던 헬프 윈도우를 가진 {{HighlightBold|WebLogAbout}} 클래스가 있습니다. 아직 소속 패키지를 지정하지 않은 경우엔 이곳에 속합니다. 그러면 {{HighlightBold|WebLog}}와 같이 {{HighlightBold|WebLogStats}} 패키지에 소속시킵시다.

38. 여기선 {{HighlightBold|WebLogAbout}} 클래스를 {{HighlightBold|(none)}}으로부터 드래그 & 드롭으로 {{HighlightBold|WebLogStats}} 패키지로 이동합니다.

{{HighlightBold|WebLogAbout}} 클래스를 좌클릭한 상태(버튼이 눌린 상태)로 그대로 {{HighlightBold|WebLogStats}} 패키지 이름 위까지 드래그합니다. 아래 그림과 같이 아이콘이 변합니다. 그리고, 마우스 버튼을 놓아주십시오.(드롭)

[[image:cincom_tutorial2_fig257_a.png|none|676px|thumb|그림6-11. 클래스를 다른 패키지로 이동(드래그)]]

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

[[image:cincom_tutorial2_fig26b.png|none|676px|thumb|그림 6-12. WebLogStats패키지에 있는 세 개의 클래스]]

40. Package Pane에서 {{HighlightBold|WebLogStats}}를 클릭(선택)해주십시오. {{HighlightBold|<오퍼레이트 클릭>}}후 {{HighlightBold|Save to File...}} 을 선택해주십시오.

41. {{HighlightBold|weblogstats_2_stage3.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>

프로그램에서 윈도우를 열고 닫는 방법을 학습했습니다. 실행하는 코드는 메뉴구조에 "내장"되어 있습니다. 파일 필터나 로그 디렉토리 값을 지정하는 다이얼로그를 입력필드로 변경합니다.

{{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:Page07 - Revision history

Onionmixer: 일람 to 목록 으로 수정

Onionmixer: 페이징 번호 수정

Onionmixer: VisualWorksTutorial2 Page07 추가