qt designer - hanbatartoa.hanbat.ac.kr › lecture_data › embedded_sw › 10_old.pdf ·...

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()가 리턴됨


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 버튼이 클릭되면 응용프로그램이 빠져나감


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 액세스 룰을 따름


Starting and Exiting Qt Designer

StartingUnix/Linux

Windows

Exiting

% designer &

Start | Programs | Qt X.X.X | Designer

File | Exit


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을 클릭


Creating the Dialog

Create the new projectNew File dialog을 불러오기 위해 File|New을 클릭

Dialog를 생성하기 위해 "Dialog"를 선택한 후OK 버튼을 클릭새로 만들어진 폼(form)의 크기를 작게 하기 위해 모서리를드래그(drag)함다음과 같이 폼의 속성을 변경함

프로젝트를 저장하기 위해 File|Save을 클릭한 후,디폴트 폼 이름(conversionform.ui)으로 저장하기 위해 Save 버튼을 클릭

Metric Conversioncaption

ConversionFormname

속성 값속성 이름


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:첫번째 레이블

속성 값위젯


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

속성 값


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

속성 값


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


Creating the Dialog: Adding Push Buttons

Common Widgets에서PushButton 버튼을 더블 클릭한후 폼의 아래에서 왼쪽에서 오른쪽으로 세번의 클릭을 한 후 선택해제를 위해 Pointer 버튼을 클릭

ComboBox를 "Convert From" 레이블과 "Convert To"레이블의 오른쪽에 위치시킨 후, 위와 같이 속성을 변경함

&Quittext

Calculatetext

&Cleartext

quitPushButtonname오른쪽 버튼

calculatePushButtonname가운데 버튼

name

속성 이름

clearPushButton왼쪽 버튼

속성 값위젯


Creating the Dialog: Adding Spacers

Common Widgets에서Space 버튼을 클릭한 후"Decimals" 레이블 오른쪽에서 클릭, 드래그하여 SpinBox의왼쪽에서 릴리즈함.Calculate 푸시버튼 오른쪽에서 클릭, 드래그하여 Quit 푸시버튼의 왼쪽에서 릴리즈함.SpinBox의 아래에서 클릭, 드래그하여 Calculate 푸시버튼의위에서 릴리즈함.

File|Save를 클릭


Creating the Dialog: Editing Widgets

fromComboBoxfromComboBox를 오른쪽 마우스 버튼으로 클릭하여 나타나는 문맥메뉴에서 Edit를 선택

Edit Listbox dialog에서 New Item버튼을 클릭하여 다음과 같이입력함

KilometersMetersCentimetersMillimeters

OK 버튼을 클릭하여 Edit Listbox dialog를 닫음

toComboBox같은 방식으로 다음과 값들을 채움

MilesYardsFeetInches


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를 클릭


Creating the Dialog: Tab Order

Tab Order 툴바 버튼을 클릭함포커스를 받을 수 있는 모든 위젯 상에 푸른색 원속의 숫자가나타남

원하는 순서대로 모든 위젯을 클릭

Tab Order 모드를 나가기 위해 Esc를 누름File|Save를 클릭


Creating the Dialog: Previewing the Dialog

Dialog를 미리보기 위해서Ctrl+T (Preview|Preview Form)를 누름모서리를 드래그하여 크기를 조정하여 봄


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



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



나머지 위젯 연결다음과 같이 연결함

File|Save를 클릭

convert()ConversionFormactivated(int)fromComboBox

convert()ConversionFormactivated(int)toComboBox

ConversionForm

Receiver

valueChanged(int)

Singal

decimalsSpinBox

Sender

convert()

Slot


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;

}



//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 ) );

}



init() 함수 구현Dialog가 생성될때 호출됨Project Overview 윈도우에서 "conversionform.ui.h"를 클릭해서 코드 에디터를 불러옴

#include <qvalidator.h>

void ConversionForm::init() {numberLineEdit->setValidator( new QDoubleValidator( numberLineEdit ) );numberLineEdit->setText( "10" );convert();numberLineEdit->selectAll();

}


Creating the Dialog: Generating main.cpp

main.cpp 생성File|New를 클릭한후 main.cpp를 클릭Configure Main-File Dialog에 대한 디폴트 값을 사용프로젝트를 저장하기 위해 File|Save를 클릭


Creating the Dialog: Compiling and Running

xterm으로 전환

% cd ~/metric% qmake –project% qmake% make% ./metric

qt designer - hanbatartoa.hanbat.ac.kr › lecture_data › embedded_sw › 10_old.pdf ·...

Documents