Onionmixer: VisualWorksTutorial2 Page04 추가

2012-12-21T09:10:23Z

VisualWorksTutorial2 Page04 추가

New page

{{CincomTop|{{CincomSmalltalkHeadBanner|웹로그의 통계2 레슨3|UIPainter 사용법}}}}

{| style="border: none; width:100%;"
|- style="text-align:center;font-weight:bold; font-style: normal;font-size:110%;"
| colspan="2" | | 목차 | 레슨2 | 레슨4 |<hr style="color:black;background-color:black;height:4px;">
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageOpenbook}}
| 이 레슨에서는 웹서버 로그의 통계 및 다른 어플리케이션도 작성하지 않습니다. {{HighlightBold|UIPainter의 기초강좌}}입니다. 그리고 VisualWorks에서 GUI를 작성하는 툴을 간단히 소개하겠습니다. 이후에 등장하는 튜토리얼에서 간간히 사용되는 툴이나 각 다이얼로그 박스의 기능에 익숙해지기 위함입니다.
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageCertifacate}}
| 이 레슨에서는 버튼이 붙은 간단한 윈도우를 작성하겠습니다. 버튼을 클릭하면 메시지 박스가 나타나 "Hello World"라고 표시됩니다. UIPainter의 기본기능을 학습하겠습니다.
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageDesign}}
| 이 레슨을 끝마치면 아래에 적은것 들이 가능하게 됩니다.

* 캔버스에 버튼을 배치
* 버튼 위젯과 캔버스(윈도우)의 속성설정
* 버튼 윈도우에 메서드를 할당
* Smalltalk GUI 어플리케이션의 실행
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageSteps}}
| 1. VisualWorks를 실행하지 않았다면 실행시켜주십시오. 이미 Parcel(컴포넌트)이 로드된 경우엔 툴바에 "캔버스"아이콘이 표시되어있습니다.

[[image:cincom_tutorial2_uipainter1d.png|none|595px|thumb|그림 3-1. VisualWorks 런처 윈도우 툴바에 있는 UIPainter 아이콘.]]

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

[[image:cincom_tutorial2_uipainter1a.png|none|533px|thumb|그림 3-2. Parcel 관리 메뉴]]

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

[[image:cincom_tutorial2_uipainter1b.png|none|561px|thumb|그림 3-3. UIPainter Parcel 선택]]

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

[[image:cincom_tutorial2_uipainter1c.png|none|567px|thumb|그림 3-4. Parcel관리를 사용한 표준적인 Parcel 로드]]
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageDominos}}
| 입문서 : Parcel 입문

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

[[image:cincom_tutorial2_uipainter1d.png|none|595px|thumb|그림 3-5. VisualWorks 런처 윈도우 툴바에 있는 UIPainter 아이콘.(3-1과 동일)]]

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

[[image:cincom_tutorial2_uipainter2.png|none|599px|thumb|그림 3-6. 새 캔버스 버튼]]

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

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

[[image:cincom_tutorial2_canvas1.png|none|463px|thumb|그림 3-7. GUI 페인터 툴 윈도우]]

[[image:cincom_tutorial2_canvas2.png|none|464px|thumb|그림 3-8. 팔레트 윈도우]]

[[image:cincom_tutorial2_canvas3.png|none|216px|thumb|그림 3-9. 이름 없는 캔버스 윈도우]]

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

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

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

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

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

[[image:cincom_tutorial2_palette1.png|none|456px|thumb|그림 3-10. 빈 캔버스에 액션 버튼을 배치]]

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

[[image:cincom_tutorial2_properties1.png|none|463px|thumb|그림 3-11. 액션버튼의 속성]]

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

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

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

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

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

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

[[image:cincom_tutorial2_canvasorder.png|none|365px|thumb|그림 3-12. GUI 페인터 툴의 작업순서]]

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

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

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

[[image:cincom_tutorial2_uiinstall1.png|none|248px|thumb|그림 3-13. 인스톨… 다이얼로그 박스]]

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

[[image:cincom_tutorial2_uiinstall2.png|none|493px|thumb|그림 3-14. 클래스 파인더 다이얼로그]]

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

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

[[image:cincom_tutorial2_uidefine1.png|none|247px|thumb|그림 3-15. 정의 모델 다이얼로그]]

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

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

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

[[image:cincom_tutorial2_uihbrowse1.png|none|619px|thumb|그림 3-16. sayHi 메서드를 표시한 시스템 브라우저]]

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

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

<syntaxhighlight lang="smalltalk">
sayHi
Dialog warn: 'Hello World'.
</syntaxhighlight>

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

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

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

18. 축하합니다!! VisualWorks GUI 어플리케이션 작성을 최초로 성공하였습니다.
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageCertifacate}}
| <font style="text-align:center;font-weight:bold; font-style: normal;font-size:110%;">정리</font>

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

{{HighlightBold|아래와 같은 내용을 학습하였습니다}}
* {{HighlightBold|UIPainter}} Parcel의 로드
* 캔버스상의 위젯(버튼)의 배치
* 버튼 위젯과 캔버스(윈도우)의 속성 설정
* 버튼 위젯에 메서드를 배치
|- style="text-align:center;font-weight:bold; font-style: normal;font-size:120%;"
| colspan="2" |<hr style="color:black;background-color:black;height:4px;"> | 목차 | 레슨2 | 레슨4 |
|}

VisualWorksTutorial2:Page04 - Revision history

Onionmixer: VisualWorksTutorial2 Page04 추가