View source for VisualWorksTutorial2:Page12

{{CincomTop|{{CincomSmalltalkHeadBanner|웹로그의 통계2 레슨11|출력 선택 고르기}}}}

{| style="border: none; width:100%;"
|- style="text-align:center;font-weight:bold; font-style: normal;font-size:110%;"
| colspan="2" | | 목차 | 레슨10 | 레슨12 |<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;" | {{HeadImageCertifacate}}
| {{CincomSmalltalkGreenBigFont|VisualWorks는 두 개의 드롭다운(선택) 박스가 있습니다. 이 레슨에서는, 유저가 Web로그 통계치 출력 장소를 맘대로 고를 수 있도록, 드롭다운 박스(중 한가지)를 사용하겠습니다(화면, 외부 파일, 양쪽에 출력).}}
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageDesign}}
| 화면이나 파일에만 출력하는 거라면 라디오 버튼만으로도 충분했습니다. 하지만, 양쪽 모두의 경우도 필요합니다. 실제로 세 개를 사용하면 됩니다만(화면, 파일, 양쪽), 이 튜토리얼(라디오 버튼은 레슨 4에서 사용법을 학습했습니다)에서는, 선택(드롭 다운) 박스를 사용합니다.


VisualWorks에는 두 가지의 다른 드롭다운(선택) 박스가 있습니다.
* 메뉴 버튼
* 콤보 박스


메뉴 버튼은 선택지가 정적이거나 혹은 고정된 경우에 주로 사용합니다. 콤보 박스는 실행시 데이터에 의해 선택지를 변경할 경우 사용합니다. 콤보 박스의 예는 UIPainter 입력 필드의 {{HighlightBold|속성}} 다이얼로그에 있습니다. {{HighlightBold|타입}}의 위젯은 메뉴버튼입니다만, {{HighlightBold|포맷}}의 위젯 버튼은 콤보 박스입니다. {{HighlightBold|다른 타입}}이 선택될 경우, 포맷(위젯) 내의 일람이 어떻게 변화하는지 주목해주십시오.


이미 일람의 항목은 알고 있으니, 이 레슨에서는 메뉴 버튼을 사용합니다. 메뉴 바 이외에 메뉴 에디터를 사용하는 경우에 대한 좋은 연습이 될것입니다.
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageSteps}}
| 1. {{HighlightBold|System Browser}} 윈도우가 열려있는 경우엔 닫아주십시오. {{HighlightBold|GUI페인터}} 툴이 열려있는 경우엔 그곳으로 되돌아가주십시오. 만일 닫혀있는 경우엔 {{HighlightBold|WebLogGUI}}를 열어주십시오.(레슨 6의 스텝 12-15를 참조)



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



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



4. {{HighlightBold|문자열}} 입력 필드에 {{HighlightBold|외부 파일}}을 입력해주십시오. 탭 키를 눌러주십시오. 값 필드에 #file을 입력해주십시오.

[[image:cincom_tutorial2_fig2111.png|none|496px|thumb|그림 11-1. 첫 메뉴 선택지]]



5. {{HighlightBold|메뉴 에디터}}에서 {{HighlightBold|편집}} 메뉴를 선택하고, 다시 {{HighlightBold|신규항목}}을 선택하거나 툴바 두 번째 버튼을 클릭해주십시오.



6. {{HighlightBold|문자열}} 입력 필드에 {{HighlightBold|화면}}을 입력해주십시오. 탭 키를 눌러주십시오. {{HighlightBold|value}} 필드에 {{HighlightBold|#screen}}을 입력해주십시오.

[[image:cincom_tutorial2_fig2112.png|none|496px|thumb|그림 11-2. 두 번째 메뉴 선택지]]



7. {{HighlightBold|메뉴 에디터}}에서 {{HighlightBold|편집}} 메뉴를 선택해서 다시 {{HighlightBold|신규항목}}을 선택하거나, 툴바 두 번째 버튼을 클릭해주십시오(이미 이 조작에 익숙해졌을 겁니다).



8. {{HighlightBold|문자열}} 입력 필드에 {{HighlightBold|양쪽}}을 입력해주십시오. 캡 키를 눌러주십시오. {{HighlightBold|value}} 필드에 {{HighlightBold|#both}}를 입력해주십시오.

[[image:cincom_tutorial2_fig2113.png|none|496px|thumb|그림 11-3. 세 번째 메뉴 선택지]]



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



10. 다음 다이얼로그 박스에서 {{HighlightBold|다음 클래스에 인스톨}}에 표준으로 표시되는 {{HighlightBold|WebLogGUI}}은 그대로 두어도 됩니다. 마지막 입력 필드(혹은 {{HighlightBold|신규 셀렉터를 입력:}})에 {{HighlightBold|outputChoices}}를 입력하고 OK를 클릭해주십시오.

[[image:cincom_tutorial2_fig2114.png|none|248px|thumb|그림 11-4. WebLogGUI 클래스에 outputChoices메뉴를 인스톨]]



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



12. 캔버스의 {{HighlightBold|logList}} 위젯 위에 메뉴버튼 위젯(상단 8번째)를 배치하고, 메뉴 버튼 위에 라벨을 배치합니다.



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

{| 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%;"  | 라벨
| style="text-align:left;width:30%;"  | 문자열
| style="text-align:left;width:40%;"  | Results
|- style="color:black;background-color:white;"
| style="text-align:left;width:30%;"  | 메뉴 버튼
| style="text-align:left;width:30%;"  | 문자열
| style="text-align:left;width:40%;"  | 공백 그대로
|- style="color:black;background-color:white;"
| style="text-align:left;width:30%;"  | 메뉴 버튼
| style="text-align:left;width:30%;"  | Aspect
| style="text-align:left;width:40%;"  | #outputChoiceUI
|- style="color:black;background-color:white;"
| style="text-align:left;width:30%;"  | 메뉴 버튼
| style="text-align:left;width:30%;"  | 메뉴
| style="text-align:left;width:40%;"  | #outputChoices
|}

[[image:cincom_tutorial2_fig2115.png|none|506px|thumb|그림 11-5. 메뉴 버튼의 속성]]

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



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



16. {{HighlightBold|메뉴 버튼}}을 선택하고, {{HighlightBold|지정}} 버튼을 클릭해 부십시오. 메뉴 버튼({{HighlightBold|outputChoiceUI}})만 표시되어 있을 것입니다. 



17. {{HighlightBold|outputChoicesUI}}와 {{HighlightBold|초기화를 추가}} 박스에 체크가 되어있는 것을 확인해주십시오. OK를 클릭해주십시오.



18. {{HighlightBold|메인 윈도우}}를 클릭(선택)하고 {{HighlightBold|인스톨}} 버튼을 클릭해주십시오.

{{CincomSmalltalkBlueFont|{{HighlightBold|outputChoicesUI}}가 인스턴스 변수 일람에 자동적으로 추가됩니다.}}



19. {{HighlightBold|GUI페인터}} 툴의 {{HighlightBold|Browse}} 버튼을 클릭해주십시오. {{HighlightBold|인스턴스}} 탭이 선택된 것을 확인해주십시오. {{HighlightBold|startWebLog}} 메서드를 아래와 같이 수정해주십시오.

<syntaxhighlight lang="smalltalk">
startWebLog 
	aWebLog initialize. 
	aWebLog filter: filterUI value. 
	aWebLog logDirectory: logDirectoryUI value. 
	aWebLog maxPages: maxPagesUI value. 
	Cursor wait showWhile: [aWebLog start]. 
	(outputChoiceUI value = #file) | (outputChoiceUI value = #both) 
		ifTrue: [aWebLog outputStats.]. 
	(outputChoiceUI value = #screen) | (outputChoiceUI value = #both) 
		ifTrue: [logList list: aWebLog stats].
</syntaxhighlight>

{{CincomSmalltalkBlueFont|드롭다운의 선택을 조작하는 이 메서드에 대한 로직을 추가하면 모두 완료입니다. 세로줄(pipe)은 "논리OR" 을 의미합니다. 어느 한쪽의 조건이 참이면 문 전체가 참이 됩니다.}}



20. {{HighlightBold|System Browser}}를 닫아주십시오. {{HighlightBold|GUI페인터}} 툴의 {{HighlightBold|윈도우 열기}} 버튼을 클릭해주십시오. 어플리케이션을 테스트합니다. 전부 동작하는 것을 확인해주십시오.

[[image:cincom_tutorial2_fig2116.png|none|479px|thumb|그림 11-6. 드롭다운으로 선택(메뉴 버튼)]]



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



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



23. {{HighlightBold|weblogstats_2_stage8.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에서 리스트 선택과 드롭다운으로 선택(메뉴버튼)을 추가하는 방법을 학습하였습니다. 이것으로 어플리케이션에 대한 기능은 완성입니다. 남은 것은 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;"> | 목차 | 레슨10 | 레슨12 |
|}