Microsoft PowerPoint - 02-GUI Basics.pptx

Development of Fashion CAD System 2. GUI Basics Sungmin Kim SEOUL NATIONAL UNIVERSITY GUI GUI (Graphical User Interface) Definition 화면상의 물체, 틀, 색상과 같은 그래픽 요소들을 사용한 컴퓨터 인터페이스 2차원이나 3차원 가상 공간에서 기능을 은유적/대표적으로 나타내는 그래픽으로 구성 X자와 같은 형태의 그래픽 요소는 삭제나 취소를 의미 파일을 나타내는 아이콘을 이동하면 복사 CUI (Command line User Interface) 에 비해 직관적 2

GUI GUI (Graphical User Interface) History 1963 이반서덜랜드스케치패드 CAD 소프트웨어의조상최초로완전한 GUI 를구현 1973 제록스알토컴퓨터 GUI 를사용하는최초의컴퓨터 ( 마우스, 키보드를사용 ) 1983 애플 LISA 제록스의 GUI 기반, 상업적으로실패 1984 애플매킨토시상업적인성공 1984 IBM/MIT/DEC X-Window Unix, Linux 용 GUI 1995 마이크로소프트 Windows 95 본격적인그래픽사용자인터페이스의대중화 3 GUI Document-View Structure Components Document View Advantages Types 프로그램에서사용하는데이터를관리하고처리하는작업을담당하는객체 파일입출력및자료정의, 처리등을수행 Document 의자료를출력해사용자가볼수있도록하는객체 사용자로부터자료나명령을받아문서의내용을편집 자료와표현의분리로모듈화가능 개발프로세스의단순화 SDI (Single Document Interface) MDI (Multiple Document Interface) 4

SDI SDI Application Document-View Type C++ Builder Application 의전형적인구조 Form Unit Form Unit Project Dialog Unit Dialog Unit Document Unit Document Unit 5 SDI SDI Application SDI Project 만들기 C++ Builder 6를열고 File-Close All 메뉴로열려있는프로젝트를닫음 File-New-Application 메뉴로새프로젝트를시작 File-Save Project As 메뉴로프로젝트를저장 파일저장시 C++ Builder project 를저장하는폴더를따로만드는것이바람직함 목표로하는실행파일 (exe) 이름과동일한폴더를만들기» 실행파일이 SDITest.exe 인경우 D:\C++ Builder Projects\SDITest 와같이만듦 첫번째저장다이얼로그는 unit 의저장» SDI 의 main form 이될유닛이므로 TMainForm.cpp 라는이름으로저장 두번째저장다이얼로그는 project 의저장» 실행파일의이름이될것이므로 SDITest.bpr 이라는이름으로저장 F9 를눌러실행 View-Project Manager 6

SDI SDI Application SDI Project 만들기 전체환경설정 Tools-Environment options 메뉴로환경설정창을연다 Autosave options 의 Editor Files 와 Project desktop 에체크한다 Project 속성설정 Project-Options 메뉴로 project option 설정창을연다 Linker tab 에서 Use Dynamic RTL 의체크를해제한다 Package tab 에서 Build with runtime packages 의체크를해제 Application tab 에서 title 을 SDI Test 로입력한다 7 SDI SDI Application SDI Project 만들기 Unit 수정하기 Project Manager 에서 TMainForm.cpp 를더블클릭해서창을불러옴 F12 키를눌러디자인과소스코드사이를오갈수있음 소스코드창의아래쪽탭에서소스파일과헤더파일을선택할수있음 F12 Source Header 8

SDI SDI Application SDI Project 만들기 Form 의속성변경 F11 키를눌러 form 의속성 (property) 설정창 (object inspector) 을연다 Properties 탭에서 Name-Value 로정의된값을수정하면 form 의속성을바꿀수있다 Caption SDI Application Test Name MainForm WindowState wsmaximized 9 SDI SDI Application SDI Project 만들기 프로그램종료설정 프로그램종료이벤트를받았을때동작설정 Object inspector 의 Event 탭에서 OnClose 를더블클릭 TChildForm.cpp 에 event handler 소스코드가자동생성 다음코드를추가 User Interaction O/S Event Notification App App Event Notification 10

MDI MDI Project 만들기 File-Close All 메뉴로열려있는프로젝트를닫음 File-New-Application 메뉴로새프로젝트를시작 File-Save Project As 메뉴로프로젝트를저장 폴더는 D:\C++ Builder Projects\MDITest 와같이만듦 MDI 의 main form 이될유닛은 TMainForm.cpp 라는이름으로저장 프로젝트는 MDI Test.bpr 로저장 프로젝트속성설정 SDI 와동일하게 linker, packages 탭등의속성을설정 Application tab 의 title 은 MDI Test로 11 MDI MDI Project 만들기 TMainForm 의속성설정 Caption Test Color clappworkspace FormStyle fsmdiform Name MainForm WindowState wsmaximized TChildForm 의추가 File-New-Form 메뉴로새로운폼을작성 TChildForm의속성설정» Caption ( 공백 )» FormStyle fsmdichild» Name ChildForm TChildForm.cpp 로저장 12

MDI Child Form 설정 Project-Options 메뉴로설정창을불러옴 Forms 탭에서 Auto-create forms의 ChildForm 을오른쪽 Available forms 로이동 TChildForm.cpp 와 TChildForm.h 에서각각다음라인을삭제 OnClose 이벤트핸들러작성 (SDI 와동일 ) 13 MDI Main Form 수정 TMainForm.h 에다음행을추가 Standard component 에서메뉴 component 를 MainForm 위에올려놓고더블클릭해서편집 14

MDI Child Form 추가메뉴설정 New Window 를더블클릭 TMainForm.cpp 에메뉴클릭이벤트핸들러소스가생성됨 다음과같이 child form 을여는코드를추가 15 MDI MainForm 의 OnClose Event 작성 SDI 와동일하게작성 FormClose 이벤트핸들러에 Action=caFree; 작성 16

MDI Window 관리메뉴추가 MainForm 의메뉴를더블클릭해서열고우측과같이수정 이때각메뉴아이템의 GroupIndex 를 10 정도로설정 각각의메뉴아이템을선택하고다음코드를추가 17 MDI Window 관리메뉴추가 MainForm 의 object inspector 에서 WindowMenu 를 Window1로설정 ChildForm 의메뉴설정 ChildForm 에 standard component 의 Menu component를올려놓고다음과같이수정 이때 Edit 메뉴의 GroupIndex 는 1로설정 18

MDI 19 Project Group Project Group Management 여러개의프로젝트를그룹으로묶어서관리가능 Project Manager 창에서 Project Group 을오른쪽클릭 Add Existing Project 메뉴를선택한다음 SDITest.bpr 을추가 File-Save All 메뉴로 Group 을저장 (TestApps 등의이름으로 ) 20

VCL VCL (Visual Component Library) 개요 Borland ( 현 Embarcadero) 에서 Delphi와 C++ Builder 를위해개발 RAD (Rapid Application Development) 도구 Property 와 Event Handler 로구성 Component 의조합만으로복잡한 GUI 구성이가능 구성요소 윈도우창 (TForm class) 표준컨트롤 (TButton, TCheckBox, TLabel, TComboBox 등 ) 데이터베이스액세스 (ADO, Active Database Object) 인터넷연결 (Indy) 기타무수한 third-party components JEDI, TMS, TurboPower, IOComp, SDL, DA-SOFT... 21 VCL VCL 의기본적인사용법 SDI Test 프로젝트를활용 MainForm 의 WindowState property 를 wsnormal 로설정 MainForm 위에 TLable, TEdit, TButton, TListBox 컨트롤을올려놓고 property 를수정 TLabel Caption=Text TButton Caption=Add TEdit Name=TEXT Text=empty TListBox Name=LIST TButton Caption=Clear 22

VCL VCL 의기본적인사용법 구현목표 Edit box 에내용을입력하고 Add 버튼을누르면 List box 에추가됨 Clear 버튼을누르면 List box 의내용이지워짐 구현방법 'Add' 버튼을선택하고 object inspector 의 event 에서 OnClick 을더블클릭» 사용자가버튼을클릭했을때발생하는 event 의 handler 가자동으로생성됨» Event handler 내부에다음코드를추가 void fastcall TMainForm::Button1Click(TObject *Sender) { LIST->Items->Add(TEXT->Text);» '->' 연산자는객체의 property 나 method 를참조 (refer) 하기위해사용» Items 는 TListBox 객체의 property 중하나 (List 에표시할문자열들의모음 )» Add 는 TListBox 객체의 method 중하나 ( 리스트박스에주어진문자열을더하는 method)» Text 는 TEdit 객체의 property 중하나 (Edit 칸에입력한문자열의내용 ) 23 VCL VCL 의기본적인사용법 구현방법 'Clear' 버튼을선택하고 object inspector 의 event 에서 OnClick 을더블클릭 Event handler 내부에다음코드를추가 void fastcall TMainForm::Button2Click(TObject *Sender) { LIST->Items->Clear();» Clear 는 List Box 의 Items property 의 method» Items 는 List Box 의 Property 이면서객체이므로또다시 property 와 method 를가질수있음 24

VCL VCL 의기본적인사용법 TCheckBox, TRadioButton Checked property 값이 true/false 로변화 TRadioGroup Radio button 으로설정할옵션이여러종류인경우사용 TComboBox Edit 와 ListBox 를결합한형태 (Drop down list box) 일관된사용방법을따름 VCL Object 는 Property 와 Method 를가짐 Event Handler 를가지는 VCL 이있음 버튼클릭 내용변경 타이머설정 25 VCL Custom Dialog Box 만들기 목표 Edit, Check Box, Radio Group 을가지는 dialog box 를만들기 사용자입력을받아서화면에표시 구현방법 File-New-Form 으로 Form 을추가 다음과같이 property 를변경» BorderIcons bisystemmenu, biminimize, bimaximize, bihelp 모두 false» BorderStyle bsdialog» Caption User Input» Name UserInputDialog» Position poscreencenter 26

VCL Custom Dialog Box 만들기 다음과같이 control 을배치하고 property 를수정 Name=NAME Name=MEMBER Name=Interest Items=Music, History, Science, Literature ItemIndex=0 27 VCL Custom Dialog Box 만들기 'Ok' 와 'Cancel' 버튼을더블클릭해서각각 event handler 를만들고다음코드를입력 void fastcall TUserInputDialog::Button1Click(TObject *Sender) { Result=1; Close(); void fastcall TUserInputDialog::Button2Click(TObject *Sender) { Result=0; Close(); TUserInputDialog.h 파일에다음코드를추가 public: // User declarations fastcall TUserInputDialog(TComponent* Owner); ; int Result; 28

VCL Custom Dialog Box 만들기 TMainForm.cpp 파일에 header 파일을추가 Main Form 에 'Open' 버튼을하나추가 Open 버튼의 OnClik event handler 를작성 #pragma hdrstop #include "TMainForm.h" #include "TUserInputDialog.h" void fastcall TMainForm::Button3Click(TObject *Sender) { UserInputDialog->ShowModal(); if (UserInputDialog->Result==1){ LIST->Items->Add(UserInputDialog->NAME->Text); if (UserInputDialog->MEMBER->Checked==true){ LIST->Items->Add("Member"); else{ LIST->Items->Add("None Member"); int n=userinputdialog->interest->itemindex; LIST->Items->Add(UserInputDialog->INTEREST->Items->Strings[n]); LIST->Items->Add("-----"); 29 VCL Custom Dialog Box 만들기 Open 을눌러서 dialog 를열고입력테스트 30