Qt Designer
한밭대학교
정보통신-컴퓨터공학부김영찬 교수
Hanbat National University Prof. YoungChan KIM 2
Sample Program: Hello, World!
#include <qapplication.h>#include <qpushbutton.h>
int main( int argc, char **argv ){
QApplication a( argc, argv );
QPushButton hello( "Hello world!", 0 );hello.resize( 100, 30 );
a.setMainWidget( &hello );hello.show();return a.exec();
}
• Qt를 사용하는 모든 응용 프로그램에서단 한 개의 QApplication 객체가 존재해야 함
• QApplication 객체는 디폴트 폰트나 커서와 같은응용 프로그램 리소스을 관리함
• Qt의 어떤 윈도우-시스템 코드보다먼저 생성되어야 함
• Qt용 인수들을 처리하고 argc, argv를 조정함
• QApplication 객체 이후 첫 번째 윈도우-시스템 코드임• hello 버튼이 "Hello world!"를 디스플레이 하게 함
• hello 버튼이 이 응용프로그램의 메인 위젯이 되게 함• 사용자가 메인 위젯을 닫으면,응용 프로그램이 끝남
• 부모 윈도우가 없으므로button 자신이 윈도우가 됨
• 모든 위젯은 생성될 때 항상 non-visible함
• main()함수가 Qt에게 제어권을 넘김• 응용프로그램이 끝날 때, exec()가 리턴됨
Hanbat National University Prof. YoungChan KIM 3
Event Handling: Signal and Slot
#include <qapplication.h>#include <qpushbutton.h>
int main( int argc, char **argv ){
QApplication a( argc, argv );
QPushButton quit( "Quit", 0 );quit.resize( 75, 30 );
QObject::connect( &quit, SIGNAL(clicked()),&a, SLOT(quit()) );
a.setMainWidget( &quit );quit.show();return a.exec();
}
• Qt 객체사이의 단 방향 연결을 설정함• 모든 Qt 객체는 signal과 slot을 가질 수 있음• quit 버튼이 클릭되면 응용프로그램이 빠져나감
Hanbat National University Prof. YoungChan KIM 4
Widget With Signal and Slot
class MyWidget : public QWidget{
Q_OBJECTpublic:
MyWidget() { _v = 0; }int value() const { return _v; }
public slots:void setValue( int v);
signals:void valueChanged( int v);
private:int _v;
}
void MyWidget::setValue( int v) {if ( _v != v ) {
_v = v;emit valueChanged(_v);
}}
• Signal이나 Slot을 포함하는 모든 클래스에포함해야 하는 매크로
• Slot은 정상적인 C++ 멤버 함수이기도 함
• Signal은 meta object 파일 내에서자동적으로 구현됨
• C++의 protected 액세스 룰을 따름
Hanbat National University Prof. YoungChan KIM 5
Starting and Exiting Qt Designer
StartingUnix/Linux
Windows
Exiting
% designer &
Start | Programs | Qt X.X.X | Designer
File | Exit
Hanbat National University Prof. YoungChan KIM 6
Creating Project: Metric Conversion App.
Create the new projectNew File dialog을 불러오기 위해 File|New을 클릭
C++ Project를 생성하기 위해 "C++ Project"를 선택한 후OK 버튼을 클릭
Project Settings dialog에서 "Project File:" line edit 옆의 생략부호(…) 버튼을 클릭
Save As dialog에서 "metric" 디렉토리를 생성, 이동한 후 File name으로 "metro.pro"을 입력한 후 Save 버튼을 클릭
OK 버튼을 클릭하여 Project Settings dialog을 닫음
프로젝트를 저장하기 위해 File|Save을 클릭
Hanbat National University Prof. YoungChan KIM 7
Creating the Dialog
Create the new projectNew File dialog을 불러오기 위해 File|New을 클릭
Dialog를 생성하기 위해 "Dialog"를 선택한 후OK 버튼을 클릭새로 만들어진 폼(form)의 크기를 작게 하기 위해 모서리를드래그(drag)함다음과 같이 폼의 속성을 변경함
프로젝트를 저장하기 위해 File|Save을 클릭한 후,디폴트 폼 이름(conversionform.ui)으로 저장하기 위해 Save 버튼을 클릭
Metric Conversioncaption
ConversionFormname
속성 값속성 이름
Hanbat National University Prof. YoungChan KIM 8
Creating the Dialog: Adding Text Labels
테스트 레이블 추가하기툴박스 툴바에 있는 Common Widgets 버튼을 클릭TextLabel 버튼을 두번 클릭한 후폼의 왼쪽 위 모서리 근처에서 아래로 다섯번 클릭
TextLabel 버튼의 선택을 해제하기 위해 Pointer 툴바 버튼을클릭
텍스트 레이블들의 text속성을 아래와 같이 변경함
Result:text네번째 레이블
Convert &To:text세번째 레이블
Convert &From:text두번째 레이블
text
text
속성 이름
&Decimals:다섯번째 레이블
Enter &Number:첫번째 레이블
속성 값위젯
Hanbat National University Prof. YoungChan KIM 9
Creating the Dialog: Adding Line Edits, and etc.1
Common Widgets에서LineEdit 버튼을 클릭하여"Enter Number" 레이블의 오른쪽에 위치시킨 후,아래와 같이 속성을 변경함
ComboBox를 "Convert From" 레이블과 "Convert To"레이블의 오른쪽에 위치시킨 후, 위와 같이 속성을 변경함
Falsewordwrap
AlignTopvAlign
AlignRighthAlign
name
속성 이름
numberLineEdit
속성 값
toComboBoxname
name
속성 이름
fromComboBox
속성 값
Hanbat National University Prof. YoungChan KIM 10
Creating the Dialog: Adding Line Edits, and etc. 2
LineEdit를 "Result" 레이블의 오른쪽에 위치시킨 후, 아래와 같이 속성을 변경함
SpinBox를 "Decimal" 레이블의 오른쪽에 위치시킨 후, 위와 같이 속성을 변경함
File|Save를 클릭
AlignRighthAlign
AlignVCentervAlign
Falsewordwrap
yellowpaletteBackgroundColor
TruereadOnly
name
속성 이름
resultLineEdit
속성 값
3value
6max value
name
속성 이름
decimalsSpinBox
속성 값
Hanbat National University Prof. YoungChan KIM 11
Creating the Dialog: Adding Line Edits, and etc. 3
텍스트 레이블들을 대응하는 위젯과 연결하기친구(buddies)로 연결시킴QLabel와 같이 포커스를 갖지 않는 위젯들은 그것의 친구에게 포커스를 전달하는 엑셀레이터를 가질 수 있음
Set Buddy 버튼(F12)을 클릭한 후, "Enter Number" 레이블에서 클릭-드래그하여 numberLineEdit에서 릴리스함
위와 같은 방식으로 아래의 쌍들을 친구로 연결함"Convert From" fromComboBox"Convert To" toComboBox"Decimals" decimalsSpinBox
Hanbat National University Prof. YoungChan KIM 12
Creating the Dialog: Adding Push Buttons
Common Widgets에서PushButton 버튼을 더블 클릭한후 폼의 아래에서 왼쪽에서 오른쪽으로 세번의 클릭을 한 후 선택해제를 위해 Pointer 버튼을 클릭
ComboBox를 "Convert From" 레이블과 "Convert To"레이블의 오른쪽에 위치시킨 후, 위와 같이 속성을 변경함
&Quittext
Calculatetext
&Cleartext
quitPushButtonname오른쪽 버튼
calculatePushButtonname가운데 버튼
name
속성 이름
clearPushButton왼쪽 버튼
속성 값위젯
Hanbat National University Prof. YoungChan KIM 13
Creating the Dialog: Adding Spacers
Common Widgets에서Space 버튼을 클릭한 후"Decimals" 레이블 오른쪽에서 클릭, 드래그하여 SpinBox의왼쪽에서 릴리즈함.Calculate 푸시버튼 오른쪽에서 클릭, 드래그하여 Quit 푸시버튼의 왼쪽에서 릴리즈함.SpinBox의 아래에서 클릭, 드래그하여 Calculate 푸시버튼의위에서 릴리즈함.
File|Save를 클릭
Hanbat National University Prof. YoungChan KIM 14
Creating the Dialog: Editing Widgets
fromComboBoxfromComboBox를 오른쪽 마우스 버튼으로 클릭하여 나타나는 문맥메뉴에서 Edit를 선택
Edit Listbox dialog에서 New Item버튼을 클릭하여 다음과 같이입력함
KilometersMetersCentimetersMillimeters
OK 버튼을 클릭하여 Edit Listbox dialog를 닫음
toComboBox같은 방식으로 다음과 값들을 채움
MilesYardsFeetInches
Hanbat National University Prof. YoungChan KIM 15
Creating the Dialog: Laying Out the Dialog
decimalsSpinBox를 클릭하고, 그것 옆에 있는 spacer를 shift-클릭함
Lay Out Horizontally (Ctrl+H) 툴바 버튼을 클릭폼을 클릭하여 현재 선택된 것들을 해제함
"Decimals"레이블의 왼쪽에서 클릭-드래그하여 SpinBox를 포함하여 윗쪽의 모든 위젯을 선택함
Lay Out in a Grid (Ctrl+G) 툴바 버튼을 클릭
Clear 푸시버튼을 클릭하고 Calculate, Quit 푸시 버튼들을 shift-클릭하여 추가 선택하고 버튼사이의 Spacer도 추가 선택함
Lay Out Horizontally (Ctrl+H) 툴바 버튼을 클릭폼을 클릭하여 현재 선택된 것들을 해제함
Adjust Size (Ctrl+J) 툴바 버튼을 클릭함File|Save를 클릭
Hanbat National University Prof. YoungChan KIM 16
Creating the Dialog: Tab Order
Tab Order 툴바 버튼을 클릭함포커스를 받을 수 있는 모든 위젯 상에 푸른색 원속의 숫자가나타남
원하는 순서대로 모든 위젯을 클릭
Tab Order 모드를 나가기 위해 Esc를 누름File|Save를 클릭
Hanbat National University Prof. YoungChan KIM 17
Creating the Dialog: Previewing the Dialog
Dialog를 미리보기 위해서Ctrl+T (Preview|Preview Form)를 누름모서리를 드래그하여 크기를 조정하여 봄
Hanbat National University Prof. YoungChan KIM 18
Creating the Dialog: Connecting the Widgets1
clearButton 연결View and Edit Connections dialog를 띄우기 위해서Edit|Connections를 클릭새로운 연결을 입력하기 위해 New 버튼을 클릭
quitButton같은 방식으로 연결
numberLineEdit
resultLineEdit
numberLineEdit
Receiver
clicked()
clicked()
clicked()
Singal
setFoucus()clearPushButton
clear()clearPushButton
clearPushButton
Sender
clear()
Slot
ConversionForm
Receiver
clicked()
Singal
quitPushButton
Sender
close()
Slot
Hanbat National University Prof. YoungChan KIM 19
Creating the Dialog: Connecting the Widgets2
calculateButton 연결새로운 연결을 입력하기 위해 New 버튼을 클릭
Edit Slots 버튼을 클릭Edit Functions dialog에서 New Function 버튼을 클릭
Function name: convert()OK 버튼을 클릭
ConversionForm
Receiver
clicked()
Singal
calculatePushButton
Sender Slot
ConversionForm
Receiver
clicked()
Singal
calculatePushButton
Sender
convert()
Slot
Hanbat National University Prof. YoungChan KIM 20
Creating the Dialog: Connecting the Widgets3
나머지 위젯 연결다음과 같이 연결함
File|Save를 클릭
convert()ConversionFormactivated(int)fromComboBox
convert()ConversionFormactivated(int)toComboBox
ConversionForm
Receiver
valueChanged(int)
Singal
decimalsSpinBox
Sender
convert()
Slot
Hanbat National University Prof. YoungChan KIM 21
Creating the Dialog: Coding the Dialog1
convert() 함수 구현Project Overview 윈도우에서 "conversionform.ui.h"를 클릭해서 코드 에디터를 불러옴
void ConversionForm::convert() {enum MetricUnits {
Kilometers,Meters,Centimeters,Millimeters
};
enum OldUnits { Miles,Yards,Feet,Inches
};
// Retrieve the input double input = numberLineEdit->text().toDouble();double scaledInput = input;
// internally convert the input to millimeters switch ( fromComboBox->currentItem() ) { case Kilometers:
scaledInput *= 1000000;break;
case Meters:scaledInput *= 1000;break;
case Centimeters:scaledInput *= 10;break;
}
Hanbat National University Prof. YoungChan KIM 22
Creating the Dialog: Coding the Dialog2
//convert to inchesdouble result = scaledInput * 0.0393701;
switch ( toComboBox->currentItem() ) { case Miles:
result /= 63360;break;
case Yards:result /= 36;break;
case Feet:result /= 12;break;
}
// set the resultint decimals = decimalsSpinBox->value();resultLineEdit->setText( QString::number( result, 'f', decimals ) );numberLineEdit->setText( QString::number( input, 'f', decimals ) );
}
Hanbat National University Prof. YoungChan KIM 23
Creating the Dialog: Coding the Dialog1
init() 함수 구현Dialog가 생성될때 호출됨Project Overview 윈도우에서 "conversionform.ui.h"를 클릭해서 코드 에디터를 불러옴
#include <qvalidator.h>
void ConversionForm::init() {numberLineEdit->setValidator( new QDoubleValidator( numberLineEdit ) );numberLineEdit->setText( "10" );convert();numberLineEdit->selectAll();
}
Hanbat National University Prof. YoungChan KIM 24
Creating the Dialog: Generating main.cpp
main.cpp 생성File|New를 클릭한후 main.cpp를 클릭Configure Main-File Dialog에 대한 디폴트 값을 사용프로젝트를 저장하기 위해 File|Save를 클릭
Hanbat National University Prof. YoungChan KIM 25
Creating the Dialog: Compiling and Running
xterm으로 전환
% cd ~/metric% qmake –project% qmake% make% ./metric