VisualWorksTutorial2:Page04

From 흡혈양파의 번역工房
Jump to navigation Jump to search
cincom_tutorial_vwlogo
cincom_tutorial_cincomlogo

웹로그의 통계2 레슨3
UIPainter 사용법

cincom_tutorial_stlogo
| 목차 | 레슨2 | 레슨4 |
cincom_tutorial_openbook 이 레슨에서는 웹서버 로그의 통계 및 다른 어플리케이션도 작성하지 않습니다. UIPainter의 기초강좌입니다. 그리고 VisualWorks에서 GUI를 작성하는 툴을 간단히 소개하겠습니다. 이후에 등장하는 튜토리얼에서 간간히 사용되는 툴이나 각 다이얼로그 박스의 기능에 익숙해지기 위함입니다.
cincom_tutorial_certificate 이 레슨에서는 버튼이 붙은 간단한 윈도우를 작성하겠습니다. 버튼을 클릭하면 메시지 박스가 나타나 "Hello World"라고 표시됩니다. UIPainter의 기본기능을 학습하겠습니다.
cincom_tutorial_design 이 레슨을 끝마치면 아래에 적은것 들이 가능하게 됩니다.
  • 캔버스에 버튼을 배치
  • 버튼 위젯과 캔버스(윈도우)의 속성설정
  • 버튼 윈도우에 메서드를 할당
  • Smalltalk GUI 어플리케이션의 실행
cincom_tutorial_steps 1. VisualWorks를 실행하지 않았다면 실행시켜주십시오. 이미 Parcel(컴포넌트)이 로드된 경우엔 툴바에 "캔버스"아이콘이 표시되어있습니다.
그림 3-1. VisualWorks 런처 윈도우 툴바에 있는 UIPainter 아이콘.


2. 툴바에 아이콘이 없을 경우에는 아래와 같이 실행시켜주십시오. VisualWorks 메인런처 윈도우에서 System>>Parcel관리 메뉴를 선택합니다

그림 3-2. Parcel 관리 메뉴


3. 오른쪽 창에서 UIPainter Parcel을 선택합니다.

그림 3-3. UIPainter Parcel 선택


4. UIPainter를 선택(반전)하고 우클릭해서 로드를 선택합니다.

그림 3-4. Parcel관리를 사용한 표준적인 Parcel 로드
cincom_tutorial_dominoes.gif 입문서 : Parcel 입문

5. 로드가 완료된 경우, 툴바에 새로운 버튼이 추가됩니다. UIPainter Parcel 로드를 완료하였다는 메시지가 Transcript에 표시됩니다.

그림 3-5. VisualWorks 런처 윈도우 툴바에 있는 UIPainter 아이콘.(3-1과 동일)

추가된 버튼은 새로운 캔버스 버튼입니다. 새로운 캔버스 버튼은 메뉴, 혹은 화면을 작성하기 위해서도 사용할 수 있습니다. 새로운 윈도우(캔버스), 메뉴나 화면을 작성하고 싶은 때에는 이 버튼을 클릭합시다.

그림 3-6. 새 캔버스 버튼


6. 새로운 캔버스 버튼을 클릭해주세요.

기본적으로 3 개의 창이 나타납니다. 가장 왼쪽의 창은 GUI 페인터 도구, 가운데창은 팔레트, 그 아래의 창은 빈 캔버스입니다. VisualWorks 메인 런처 툴바에 캔버스 버튼을 배치하고있는 데는 이유가 있습니다. 주로 새로운(비어있는) 캔버스를 만들기 위해 이 버튼을 사용하기 때문입니다.

그림 3-7. GUI 페인터 툴 윈도우
그림 3-8. 팔레트 윈도우
그림 3-9. 이름 없는 캔버스 윈도우


7. GUI페인터 툴 윈도우는 캔버스 위에 배치한 아이템(위젯)의 속성을 설정하기 위해 사용합니다. 캔버스의 속성 설정도 가능합니다. 예를 들어, Noname 캔버스를 Hello World로 변환하여 적용버튼을 클릭해주십시오.

캔버스의 제목이 Noname 캔버스에서 Hello World로 바뀐 것을 확인해주십시오.


8. 팔레트 윈도우에는 다양한 아이콘이 포함되어 있습니다. 이 아이콘들은 항상 사용하는 전형적인 GUI 어플리케이션의 컴포넌트인 "위젯"입니다. 이 윈도우에는 버튼, 입력필드, 콤보 박스 등, 가장 일반적인 위젯이 있습니다. 액션 버튼 아이콘을 클릭해주십시오.(좌상단) 팔레트 윈도우에서 아이콘을 클릭하면, 팔레트 윈도우 아래에 위젯 이름이 표시됩니다.



9. 빈 캔버스의 적당한 곳에 클릭해주십시오. Action이라는 단어를 지닌 버튼이 배치됩니다.

마우스를 이동하면 버튼도 이동합니다. 다시 클릭해주십시오. 버튼은 모서리에 네 개의 "핸들"이 표시되며 그 장소에 배치됩니다. 하나의 핸들을 클릭해서 마우스를 드래그하면 버튼 사이즈를 변경할 수 있습니다.

그림 3-10. 빈 캔버스에 액션 버튼을 배치


10. GUI페인터 툴 윈도우의 변화에 주목해주십시오. 몇 가지를 변경해 봅시다.

그림 3-11. 액션버튼의 속성

a. Action 문자열을 Say Hello to the World로 변경해주십시오. b. Action: 필드로 이동해서 sayHi를 입력해주십시오. c. 적용을 클릭해주십시오.


Action: 필드에 입력한 텍스트는 메서드 이름입니다. 이 메서드(sayHi)는 아직 존재하지 않습니다. 뒤에 작성하도록 하겠습니다. 그런데 UIPainter는 메서드가 존재유무를 신경쓰지 않기에, 그 존재를 확인하지 않습니다. 그러므로, 문제없이 컴파일 할 수 있도록 심볼(#sayHi)로 변경합니다. 이것이 일반적입니다. 윈도우가 작동되어 버튼이 눌리게 될 경우, 이 심볼을 취득해서 같은 이름의 메서드를 찾아보기 위해 그 심볼을 사용합니다.(실행시에 메서드 이름을 해결합니다.)


하단에 있는 적용과 캔슬 버튼은 property 윈도우에서 임의의 필드를 변경한 경우에 사용할 수 있습니다.


캔버스를 봐주십시오. "Say Hello to the World"라는 문자가 버튼에서 삐져나와(일부는 지워져)있는 것을 알 수 있습니다. 이것을 수정하기 위해 버튼 위젯의 검은 사각 "핸들"중 한 부분을 클릭(마우스 버튼)해서 적당히 옆으로 드래그합니다.


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


11. 맨 왼쪽 윈도우(GUI 페인터 툴)의 툴바 버튼은 특정 순서대로 배열되어 있습니다.

그림 3-12. GUI 페인터 툴의 작업순서

VisualWorks에서 이 캔버스의 기초구조를 작성하기 위해서, 특정하게 정해진 순서대로 명확히 작업할 필요가 있습니다. 그 순서는 툴바의 맨 처음 버튼열 기준으로 좌에서 우로 표시되어 있습니다.


12. GUI페인터 툴을 사용해서 왼쪽창의 맨 위에 있는 오브젝트(메인 윈도우 : Hello World)를 클릭(선택)해주십시오. 그리고 Install...버튼을 클릭해주십시오.

VisualWorks는 이 윈도우를 인스톨할 대상 클래스를 묻습니다. 기존 클래스에 인스톨하는 경우, 기존의 클래스 일람을 표시하는 확대경(쌍안경) 아이콘을 클릭합니다. 여기서는 새로운 클래스를 작성합니다. 최초 입력 필드(다음 클래스에 Install:의 아래)에 JustPlaying를 입력하고 OK를 클릭해주십시오.

그림 3-13. 인스톨… 다이얼로그 박스


13. VisualWorks는 새롭게 작성하는 클래스가 속한 네임 스페이스를 묻습니다. 여기서는 모든 것을 표준대로 놔두고 OK를 클릭합니다. 나중에 튜토리얼에서 변경을 필요로 할 때, 이 필드들에 대해서 자세히 설명하겠습니다.

그림 3-14. 클래스 파인더 다이얼로그


14. 지금 GUI페인터 툴에 남은 세 가지 버튼이 사용 가능한 상태가 되었습니다. 정의 버튼을 클릭해주십시오.

a. 다이얼로그 박스에는 sayHi 메서드에 체크마크가 붙으며, 초기화를 추가 에도 체크가 되어 있습니다.

그림 3-15. 정의 모델 다이얼로그

b. OK를 클릭해주십시오.

UIPainter(이 경우, 정확히는 UIDefiner)는 sayHi 메서드의 "스텁(stub)" 메서드(버튼 위젯과 제휴(규정의 역할)하는 메서드를 자동적으로 작성하였습니다. 이로서, 별도로 작성을 안해도 되기 때문에 시간을 절약할 수 있습니다.


15.Browser 버튼을 클릭해주십시오.

그림 3-16. sayHi 메서드를 표시한 시스템 브라우저

a. JustPlaying 클래스를 브라우저하기 위해 System Browser가 표시됩니다. b. sayHi 메서드를 선택해주십시오. UIDefiner에서 생성된 메서드(코드)를 확인할 수 있습니다.


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

sayHi 
Dialog warn: 'Hello World'.

a. <오퍼레이트 클릭>후 Accept를 선택해주십시오. b. System Browser를 닫아주십시오.


17. 윈도우를 열고 버튼을 클릭해주십시오.

프로그램이 실행되어 있습니다. 버튼을 클릭합니다. sayHi메서드에 오탈자가 없다면 'Hello World'라는 단어가 표시된 메시지 박스가 나타납니다.


18. 축하합니다!! VisualWorks GUI 어플리케이션 작성을 최초로 성공하였습니다.

cincom_tutorial_certificate 정리

VisualWorks에서 그래피컬 유저 인터페이스를 작성하는 툴인 UIPainter에 대해 설명하였습니다.


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

  • UIPainter Parcel의 로드
  • 캔버스상의 위젯(버튼)의 배치
  • 버튼 위젯과 캔버스(윈도우)의 속성 설정
  • 버튼 위젯에 메서드를 배치
| 목차 | 레슨2 | 레슨4 |
Retrieved from "https://trans.onionmixer.net/mediawiki/index.php?title=VisualWorksTutorial2:Page04&oldid=2782"