기존에도 서술했습니다만, 이 튜토리얼의 목적은 기존의 Smalltalk 코드를 "사용해서" GUI를 작성하는 방법을 해설하는 것입니다. 기존의 코드는 Web서버에서 생성되는 로그파일을 해석합니다. 첫 VisualWorks 튜토리얼을 끝내지 않으셨다면 먼저 끝내주십시오.
이 프로그램은 VisualWorks 개발환경 안에서만 동작하며, 입출력에 관해서는 다이얼로그 박스나 외부 파일만을 사용합니다. 이 튜토리얼에서는 GUI로서 기대되는 내용을 추가하여, GUI에 적합한 구조로 변환합니다. 이것을 실행하게 되면 Web 어플리케이션으로서 동작하는 GUI 어플리케이션이 얼마만큼 간단하게 작성할 수 있는가를 체험할 수 있습니다.
레슨 타이틀은 종합적인 토픽을 기술하고 있을 뿐, 그 외 많은 개념이 레슨에 포함되어 있습니다. 토픽의 내용에서 더욱 상세한 정보가 필요할 경우를 상정하여, 관련 레슨에 입문서를 준비해 두었습니다.
1
튜토리얼 1 복습
이 레슨에서는 첫 튜토리얼에서 코드를 다시 로드해서 적절히 동작하는 것을 확인합니다. 그래피컬 유저 인터페이즈(GUI)에서 지금까지 작성한 많은 프로그램을 변환하는 방법에 대한 개요를 설명합니다.
2
GUI의 설계
이 레슨에서는 그래피컬 유저 인터페이스의 설계를 완성시켜, GUI를 구축하는 스텝을 확인합니다. 설계 토론을 시작할 때, 기존 코드중 몇 가지를 변경해야할 필요가 있음을 확인합니다.
3
UIPainter의 사용법
UIPainter는 그래피컥 유저 인터페이스를 작성하는 VisualWorks의 툴입니다. 이 레슨에서는 잠시기존에 쓰던 코드를 잊고, 이 툴에 익숙해지기 위해서 툴에 있는 위젯을 사용해봅시다. 하지만 이것은 시작에 불과합니다. 우선 자신의 코드를 적용하기 전에, GUI에 관한 지식이 좀 더 필요로 합니다.
4
VisualWorks에서의 GUI의 동작
VisualWorks는 GUI에 "레이어드 어프로치(계층적 접근방법)"를 사용합니다. "그 하위계층"에서 일어나는 일을 가능한한 알리지 않도록 합니다. 그러기 위해, 절연된 레이어(독립된 레이어?)(층)를 통한 통신(커뮤니케이션)을 고려하기 위해, 구조(메커니즘)를 적소에 배치할 필요가 있습니다. 이것들의 구조(벨류 홀더와 애스팩트 어댑터)는 이해되었기에, GUI와 기존 코드를 접착시키는 준비작업입니다.
5
시작에 앞서
이 레슨에서는 기존 코드에 매우 작은 수정을 하겠습니다. 이 레슨에서는 작업공간에서 코드를 실행하는 대신, 버튼을 클릭해서 어플리케이션을 개시합니다.
6
윈도우를 열고 닫기.
GUI 어플리케이션은 통상, 종료나 헬프를 선택할 수 있는 메뉴 바가 있습니다. 이 레슨에서는 About Box(새로운 윈도우)를 생성해서 File>>Exit메뉴에서 프로그램에서 닫을 수 있게 됩니다.
7
입력 선택
첫 튜토리얼에서는, 프로그램이 Web서버 로그파일을 불러올때만 "파일 필터"를 입력하는 다이얼로그 박스를 사용했었습니다. 이 파일들의 위치는 프로그램 안에 있는 코드를 직접기술하고 있습니다. 이 기능들을 입력필드에 변환할 필요가 있습니다.
8
입력지시 변환
첫 튜토리얼에서는 다이얼로그 박스를 어플리케이션의 진척을 표시하기 위해 사용했었습니다. 이 레슨에서는 GUI에서 표시하는 메시지로 변환합니다. 혹은, 코드에 기술했던(인기 페이지 수)를 스핀 버튼 위젯으로 변환합니다.