Onionmixer: VisualWorksTutorial2 Page03 추가

2012-12-21T07:54:38Z

VisualWorksTutorial2 Page03 추가

New page

{{CincomTop|{{CincomSmalltalkHeadBanner|웹로그의 통계2 레슨2|GUI 설계}}}}

{| style="border: none; width:100%;"
|- style="text-align:center;font-weight:bold; font-style: normal;font-size:110%;"
| colspan="2" | | 목차 | 레슨1 | 레슨3 |<hr style="color:black;background-color:black;height:4px;">
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageOpenbook}}
| 지금까지 작성한 프로그램은 여러가지의 작업을 하고 있습니다. 이전에 작업한것 프로그램은 Web 서버 로그파일에서 통계치를 모아, 입력에 대해서 피드백을 행하는 대화형입니다. 당연히, 유저 인터페이스를 그다지 생각하지 않았으며, 그 당시에는 전체 설계의 일부분에 지나지 않았습니다. 이번에는 제대로 설계를 할 것이므로, 기존 입출력 메서드를 그래피컬 유저 인터페이스, 혹은 GUI라 불리우는, 좀 더 보기 편한 무언가로 변환합시다.
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageCertifacate}}
| {{CincomSmalltalkGreenBigFont|이 레슨에서는 GUI 설계를 완성시키고, GUI를 구축하는 스텝을 확인하겠습니다. 설계 논의를 시작하게 되면, 기존 코드중 몇 가지를 변경할 필요가 있음을 확인합니다.}}
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageDesign}}
| 이 레슨을 끝마치면 아래 기술한 것들이 가능하게 됩니다.
* 최종적으로 작성하는 유저 인터페이스 확인
* 복수의 윈도우({{HighlightBold|캔버스}}) 사용법
* 캔버스 상의 {{HighlightBold|위젯}}(입력박스, 버튼, 콤보 박스, 그 외)를 이해
* {{HighlightBold|메뉴}}의 이해
* 기존 코드를 변경하는 유저 인터페이스가 어떠한 구조인가를 이해
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageTools}}
| {{HighlightBold|완성한 GUI}}

[[image:cincom_tutorial_guidesign.png|none|479px|thumb|그림 2-1. 어플리케이션으로서 완성한 GUI]]

{{HighlightBold|GUI에는 아래와 같은 위젯을 배치합니다.}}

* Menu item
* Input Field
* Action Button
* List Box
* Group Box
* Label
* Spin Box
* Progress Bar
* Combo Box

이 위젯들은 GUI 어플리케이션에서 사용되는 매우 일반적인 타입입니다. 어플리케이션이 완성되었을 때, 위젯이 동작에 대응하는 참조나 동작을 행하는 소스 코드를 입수하게 됩니다.

메뉴 아이템

GUI에는 두 가지 항목이 있습니다 : {{HighlightBold|File}}과 {{HighlightBold|Help}}
* File 메뉴의 서브 메뉴에는 한 가지 메뉴 항목이 있습니다. - {{HighlightBold|Exit}}. 이 항목이 선택되면 어플리케이션은 종료됩니다
* Help 메뉴의 서브 메뉴에는 한 가지 메뉴 항목이 있습니다. - {{HighlightBold|About}}. 이 항목이 선택되면 다른 윈도우가 열립니다. 이 윈도우에는 텍스트와 OK 버튼이 표시됩니다.

Input Criteria

Group Box는 유저에게서 입력을 요구하는 세 개의 라벨을 포함한 여섯개의 위젯이 있습니다. 라벨 이외의 세 가지 위젯은 아래와 같습니다.
* {{HighlightBold|File Filter}} - 모든 Web 서버 로그파일을 필터하기 위해 사용하는 입력 필드. 이것은 첫 튜토리얼에서 사용된 프롬프트가 변환된 것입니다.
* {{HighlightBold|Log Directory}} - 결과를 파일로 출력하는 장소를 지정하는 입력 필드. 첫 튜토리얼에서 갑을 직접 코드에 썼던 부분을 변환한 것입니다.
* {{HighlightBold|Number of Popular Pages}} - "인기 컨테스트"를 몇위까지 나타낼지를 결정하는 스핀 버튼(상위 10? 상위 5? 상위 3? 등등)첫 튜토리얼에서는 10을 직접 코드에 썼었습니다.

Status

그룹 박스에 두 개의 위젯이 포함됩니다.
* {{HighlightBold|Input Field}} - 판독 전용으로 지정된 입력필드는 프로그램이 현재 억세스하고 있는 로그파일 이름을 표시하기 위해 사용합니다. 첫 튜토리얼에서는 없던 기능입니다.
* {{HighlightBold|Progress Bar}} - "Progress" Bar는 어플리케이션의 진행을 표시하기 위해 사용됩니다. 프로그램이 어느정도 작업했는지를 퍼센트로 표시합니다. 첫 튜토리얼에는 없던 기능입니다.

Output of Results

이 그룹 박스에는 세 개의 라벨, 프로그램에서 어떻게 출력하는지를 결정하는 등의 일곱가지 위젯이 포함되어 있습니다. 라벨 이외의 네 가지 위젯은 아래와 같습니다.

* {{HighlightBold|Menu button}} - 드롭다운 콤보 박스는 유저가 결과출력을 외부 파일, 화면, 혹은 양쪽 모두로 결정하기 위해 사용됩니다. 첫 튜토리얼에서는 결과를 외부 파일로만 출력했습니다.
* {{HighlightBold|Hits}} – 판독전용으로 지정된 입력필드는, 로그파일의 Hit수를 표시하기 위해 사용합니다.
* {{HighlightBold|Log files}} - 리스트는 프로그램에서 해석한 웹서버 로그파일의 이름을 표시하기 위해 사용합니다. 유저가 로그파일을 선택한 경우, Hit수가 Hit 입력 필드에 표시되어, 인기 페이지 일람이 Most popular Pages 위젯에 표시됩니다.
* {{HighlightBold|Most popular Pages}} - 텍스트 에디트 위젯은 웹서버 로그파일의 인기 페이지 일람을 표시하기 위해 사용됩니다. 위 일람에서 로그파일이 선택될 경우, 인기 페이지 일람이 이곳에 표시됩니다. 첫 튜토리얼에서는 없던 기능입니다.

Start Analysis

이 Action Button은 전체의 처리를 작동시킵니다. 첫 튜토리얼에서는 Workspace을 열고 프로그램을 작동시키는 코드를 입력했었습니다.
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageDesign}}
| 이 GUI는 이 튜토리얼을 통해 점점 발전해갑니다. 이 튜토리얼을 해냈을 경우에만, 위 그림과 같은 GUI를 볼 수 있습니다. 위젯(사이즈, 위치, 색, 그 외)을 손봐야 할 부분이 잔뜩 있습니다. 그러니, 전체 개발 과정도 마음껏 즐길 수 있습니다.
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageCertifacate}}
| 정리
어플리케이션 전체 GUI와 각 위젯의 역할을 알게 되었습니다. 오리지널 프로그램이 어떻게 기본적인 그래피컬 유저 인터페이스로 변환되는지에 대한 모델이 될 것입니다.

우선 시작하기 전에 할 일은, GUI를 작성하기 위해 필요한 툴을 아는 것입니다. 그것은 UIPainter입니다.
|- style="text-align:center;font-weight:bold; font-style: normal;font-size:120%;"
| colspan="2" |<hr style="color:black;background-color:black;height:4px;"> | 목차 | 레슨1 | 레슨3 |
|}

VisualWorksTutorial2:Page03 - Revision history

Onionmixer: VisualWorksTutorial2 Page03 추가