VisualWorksTutorial2:Page07

From 흡혈양파의 번역工房
Revision as of 12:15, 22 December 2012 by Onionmixer (talk | contribs) (페이징 번호 수정)
Jump to navigation Jump to search
cincom_tutorial_vwlogo
cincom_tutorial_cincomlogo

웹로그의 통계2 레슨6
윈도우를 열고 닫기

cincom_tutorial_stlogo
| 목차 | 레슨5 | 레슨7 |
cincom_tutorial_openbook 대부분의 GUI 어플리케이션에는 복수의 윈도우가 있습니다. 그렇기에, 코드에 의해 윈도우를 열었다 닫았다 하는 방법을 알 필요가 있습니다.
cincom_tutorial_certificate 이 레슨에서는 새로운 윈도우(Help 화면)을 작성하고, 이 윈도우를 열거나 닫거나 하는 방법을 알아보겠습니다. 실제 어플리케이션처럼 헬프 메뉴에서 헬프 화면을 기동합니다.
cincom_tutorial_check 이 레슨은, 이전 레슨을 완료했다는 사실을 전제로 하고 있습니다. 때문에, System Browser와, WebLogGUI 캔버스, GUI페인터 툴과 팔레트가 열려있는 상태입니다. 전부 열려있는 상태여도 상관은 없습니다만, VisualWorks 런쳐를 제외한 모든 윈도우를 닫는 것을 권합니다.
cincom_tutorial_steps 1. New Canvas 버튼을 클릭해주십시오.


2. 빈(공백) 캔버스에 아래와 같은 위젯을 배치해주십시오.

  • 액션버튼 한 개
  • 라벨 한 개


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

Entity 속성 설정
Canvas 문자열 About Web Server Log Stats
Canvas 배경색 Light Green
Button 문자열 OK
Button Action #closeRequest
Button 문자열 VisualWorks Web Server Log Stats Version 1.1

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

그림 6-1. 속성 설정 후의 버전 정보 캔버스.


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

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


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

그림 6-2. About 캔버스의 클래스 파인더 다이얼로그.


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


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


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


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


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


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


10. weblogstats_2_stage2.st를 입력해주십시오.


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


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


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

그림 6-3. 리소스 파인더 다이얼로그


14. WebLogGUI를 클릭(반전)해주십시오.


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


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


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

그림 6-4. 메뉴 에디터 다이얼로그


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


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


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


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

그림 6-5. 두 개의 엔티티를 설정한 후의 메뉴 에디터


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


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


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


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



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


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


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

그림 6-6. 네 개의 엔티티를 설정한 후의 메뉴 에디터


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


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

그림 6-7. 메뉴 에디터 프리뷰


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


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

그림 6-8. WebLogGUI 클래스에 메뉴를 인스톨

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


26. 메뉴 에디터를 닫아주십시오.


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


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

그림 6-9. 캔버스에 menuBar 메뉴를 적용


29. 적용을 클릭해주십시오.


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

그림 6-10. 메뉴는 캔버스에 인스톨된 후 바로 표시됨.


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


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


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

showAboutBox 
	self open: WebLogAbout new interface: #windowSpec


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


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


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


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


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


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


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

그림6-11. 클래스를 다른 패키지로 이동(드래그)


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

그림 6-12. WebLogStats패키지에 있는 세 개의 클래스


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


41. weblogstats_2_stage3.st를 입력해주십시오.

cincom_tutorial_certificate 정리

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

아래와 같은 내용을 학습하였습니다

  • 새로운 윈도우 열기
  • 윈도우를 닫기
  • 메뉴바 작성
  • 메뉴바를 캔버스에 할당
| 목차 | 레슨5 | 레슨7 |
Retrieved from "https://trans.onionmixer.net/mediawiki/index.php?title=VisualWorksTutorial2:Page07&oldid=2815"