VisualWorksTutorial2:Page03

From 흡혈양파의 번역工房
Revision as of 07:54, 21 December 2012 by Onionmixer (talk | contribs) (VisualWorksTutorial2 Page03 추가)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search
cincom_tutorial_vwlogo
cincom_tutorial_cincomlogo

웹로그의 통계2 레슨2
GUI 설계

cincom_tutorial_stlogo
| 목차 | 레슨1 | 레슨3 |
cincom_tutorial_openbook 지금까지 작성한 프로그램은 여러가지의 작업을 하고 있습니다. 이전에 작업한것 프로그램은 Web 서버 로그파일에서 통계치를 모아, 입력에 대해서 피드백을 행하는 대화형입니다. 당연히, 유저 인터페이스를 그다지 생각하지 않았으며, 그 당시에는 전체 설계의 일부분에 지나지 않았습니다. 이번에는 제대로 설계를 할 것이므로, 기존 입출력 메서드를 그래피컬 유저 인터페이스, 혹은 GUI라 불리우는, 좀 더 보기 편한 무언가로 변환합시다.
cincom_tutorial_certificate 이 레슨에서는 GUI 설계를 완성시키고, GUI를 구축하는 스텝을 확인하겠습니다. 설계 논의를 시작하게 되면, 기존 코드중 몇 가지를 변경할 필요가 있음을 확인합니다.
cincom_tutorial_design 이 레슨을 끝마치면 아래 기술한 것들이 가능하게 됩니다.
  • 최종적으로 작성하는 유저 인터페이스 확인
  • 복수의 윈도우(캔버스) 사용법
  • 캔버스 상의 위젯(입력박스, 버튼, 콤보 박스, 그 외)를 이해
  • 메뉴의 이해
  • 기존 코드를 변경하는 유저 인터페이스가 어떠한 구조인가를 이해
cincom_tutorial_tools 완성한 GUI
그림 2-1. 어플리케이션으로서 완성한 GUI


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

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


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

메뉴 아이템

GUI에는 두 가지 항목이 있습니다 : File과 Help

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


Input Criteria

Group Box는 유저에게서 입력을 요구하는 세 개의 라벨을 포함한 여섯개의 위젯이 있습니다. 라벨 이외의 세 가지 위젯은 아래와 같습니다.

  • File Filter - 모든 Web 서버 로그파일을 필터하기 위해 사용하는 입력 필드. 이것은 첫 튜토리얼에서 사용된 프롬프트가 변환된 것입니다.
  • Log Directory - 결과를 파일로 출력하는 장소를 지정하는 입력 필드. 첫 튜토리얼에서 갑을 직접 코드에 썼던 부분을 변환한 것입니다.
  • Number of Popular Pages - "인기 컨테스트"를 몇위까지 나타낼지를 결정하는 스핀 버튼(상위 10? 상위 5? 상위 3? 등등)첫 튜토리얼에서는 10을 직접 코드에 썼었습니다.


Status

그룹 박스에 두 개의 위젯이 포함됩니다.

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


Output of Results

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

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


Start Analysis

이 Action Button은 전체의 처리를 작동시킵니다. 첫 튜토리얼에서는 Workspace을 열고 프로그램을 작동시키는 코드를 입력했었습니다.

cincom_tutorial_design 이 GUI는 이 튜토리얼을 통해 점점 발전해갑니다. 이 튜토리얼을 해냈을 경우에만, 위 그림과 같은 GUI를 볼 수 있습니다. 위젯(사이즈, 위치, 색, 그 외)을 손봐야 할 부분이 잔뜩 있습니다. 그러니, 전체 개발 과정도 마음껏 즐길 수 있습니다.
cincom_tutorial_certificate 정리

어플리케이션 전체 GUI와 각 위젯의 역할을 알게 되었습니다. 오리지널 프로그램이 어떻게 기본적인 그래피컬 유저 인터페이스로 변환되는지에 대한 모델이 될 것입니다.


우선 시작하기 전에 할 일은, GUI를 작성하기 위해 필요한 툴을 아는 것입니다. 그것은 UIPainter입니다.

| 목차 | 레슨1 | 레슨3 |
Retrieved from "https://trans.onionmixer.net/mediawiki/index.php?title=VisualWorksTutorial2:Page03&oldid=2766"