Embed Size (px)
Citation preview
1
Elemi alkalmazások fejlesztése IIIElemi alkalmazások fejlesztése III
Egy ablakos alkalmazás készítése I. Egy ablakos alkalmazás készítése I. C++ / Qt felhasználásával C++ / Qt felhasználásával
készítette: Szabóné Nacsa Rozália
2
Qt dokumentáció Qt dokumentáció
online: www.trolltech.comwww.trolltech.comlokális változat: Kdevelop help vagy /usr/share/doc.../usr/share/doc...Nyomtatható változat: www.trolltech.comwww.trolltech.comról PDF formátumban
Ajánlott irodalomAjánlott irodalom
3
Alt F2vel behívjuk a parancsablakot, majd kiadjuk az assistant parancsot.
A Qt assistant elindításaA Qt assistant elindítása
4
A Qt assistant nyitó ablakaA Qt assistant nyitó ablaka
5
6
GUI alkalmazás Qt osztályokkalGUI alkalmazás Qt osztályokkal
7
““Hello Qt” alkalmazásHello Qt” alkalmazás
#include <qapplication.h>#include <qlabel.h>
int main(int argc,char *argv[]){
QApplication app(argc,argv);
QLabel *label = new QLabel("Hello Qt!",0);
app.setMainWidget(label);label>show();return app.exec();
}
QObject
QLabel QApplication
hello.cpp
8
Fordítás/futtatás parancs sorból LinuxFordítás/futtatás parancs sorból Linux
1. qmake –project2. qmake hello.pro3. make4. ./hello
9
Fordítás/futtatás parancs sorból WindowsFordítás/futtatás parancs sorból Windows
1. qmake –project2. qmake hello.pro3. nmake4. hello
10
““Quit” alkalmazásQuit” alkalmazás
#include <qapplication.h>#include <qpushbutton.h>
int main(int argc, char *argv[]){
QApplication app(argc,argv);QPushButton *button = new QPushButton("Quit",0);
QObject::connect(button,SIGNAL(clicked()),&app,SLOT(quit()));
app.setMainWidget(button);button>show();return app.exec();
}
QObject
QPushButton QApplication
quit.cpp
11
button app
Slotok SignálokSlotokSignálok
clicked() quit()
Signal / slot mechanizmusSignal / slot mechanizmus
connect( button, SIGNAL( clicked() ), &app, SLOT( quit() ) );
A gomb clicked() szignált küld. Ezt a szignált hozzákötjük az alkalmazás quit() slotjához (speciálisan kezelt
műveletéhez).
12
Fordítás/futtatás parancs sorból LinuxFordítás/futtatás parancs sorból Linux
1. qmake –project2. qmake quit.pro3. make4. ./quit
13
““Numbers” alkalmazásNumbers” alkalmazás
form.h
form.cpp main.cpp
Form: főablakot reprezentáló osztály
14
Form ablak látvány terveForm ablak látvány terve
Caption
QSpinBox QSlider
QHBox
QVBox
QLineEdit
15
Form osztály – definícióForm osztály – definíció
#ifndef FORM_H#define FORM_H#include <qwidget.h>#include <qvbox.h>
class QHBox;class QSpinBox;class QSlider;class QLineEdit;
class Form: public QVBox{public:
Form(QWidget *parent=0, const char *name=0);private:
QHBox *hbox;QSpinBox *spinBox;QSlider *slider;QLineEdit *lineEdit;
};#endif
Caption
QSpinBox QSlider
QHBox
QVBox
QLineEdit
form.h
16
Form osztály – implementáció 1Form osztály – implementáció 1#include <qhbox.h>#include <qspinbox.h>#include <qslider.h>#include <qlineedit.h>
#include "form.h". . .
Caption
QSpinBox QSlider
QHBox
QVBox
QLineEdit
form.cpp
17
Form osztály – implementáció 2Form osztály – implementáció 2. . .Form::Form(QWidget *parent, const char *name) :QVBox(parent,name){
setMargin(6);setSpacing(6);
hbox = new QHBox(this);lineEdit = new QLineEdit(this);hbox>setMargin(6);hbox>setSpacing(6);
spinBox = new QSpinBox(hbox);slider = new QSlider(Qt::Horizontal,hbox);slider>setRange(0,10);spinBox>setRange(0,10);
spinBox>setValue(5);
connect(slider,SIGNAL(valueChanged(int)),spinBox,SLOT(setValue(int)));connect(spinBox,SIGNAL(valueChanged(int)),slider,SLOT(setValue(int)));
}
Caption
QSpinBox QSlider
QHBox
QVBox
QLineEdit
form.cpp
18
slider spinBox
Slotok SignálokSlotokSignálok
valueChanged(int) setValue(int)
Signal / slot mechanizmusSignal / slot mechanizmus
connect(slider,SIGNAL(valueChanged(int)),spinBox,SLOT(setValue(int)));
A csúszka értékváltozás esetén valueChanged(int) szignált küld. Ezt a szignált hozzákötjük a számkijelző setValue(int) slotjához (speciálisan
kezelt műveletéhez).
19
Saját slot kezelése definícióSaját slot kezelése definíció. . .class Form: public QVBox{
Q_OBJECT
public:Form(QWidget *parent=0, const char *name=0);
private:QHBox *hbox;QSpinBox *spinBox;QSlider *slider;QLineEdit *lineEdit;
QString words[11];void initWords();
public slots:void sayAsWord(int i);
};. . .
form.h
Nem szabványos C++ elem.A moc készíti el a szabványos C++ kódot.
A Q_OBJECT makróban vannak a moc számára a függvénydeklarációk.
moc: meta object compiler
20
Saját slot kezelése – implementáció 1Saját slot kezelése – implementáció 1
. . .Form::Form(QWidget *parent, const char *name) :QVBox(parent,name){
setMargin(6);setSpacing(6);
. . .
connect(slider,SIGNAL(valueChanged(int)),spinBox,SLOT(setValue(int)));connect(spinBox,SIGNAL(valueChanged(int)),slider,SLOT(setValue(int)));
connect(slider,SIGNAL(valueChanged(int)),this,SLOT(sayAsWord(int)));
initWords();
spinBox>setValue(5);}
form.cpp
“Saját” slot
A kezdőértéket a kapcsolat kiépítése után kell beállítani
21
Saját slot kezelése – implementáció 2Saját slot kezelése – implementáció 2
. . .void Form::sayAsWord(int i){
lineEdit>setText(words[i]);}
void Form::initWords(){
words[0] = "null";words[1] = "one";. . .words[10] = "ten";
}
form.cpp
22
““Numbers” projekt fájlNumbers” projekt fájl
TEMPLATE = appINCLUDEPATH += .# InputHEADERS += form.hSOURCES += form.cpp main.cpp
1. qmake –project2. qmake numbers.pro3. make4. ./numbers
23
Memória gazdálkodás (widget)Memória gazdálkodás (widget)
Caption
QSpinBox QSlider
QHBox
QVBox
QLineEdit
Form(QVBOX)
QHBox(hbox)
QLineEdit(lineEdit)
QSpinBox(spinBox)
QSilder(slider)
„gyerek” lista
Csak azokat a widgeteket kell törölni, amelyeket new operátorral hozunk létre és „nincs szülője”.
24
Widget Layout ManagerWidget Layout Manager
Caption
QSpinBox QSliderQHBox
QVBox
QLineEdit
Caption
QSpinBox QSlider
QLineEdit
mainLayout
topLayout
25
Memória gazdálkodás (layout)Memória gazdálkodás (layout)
Csak azokat a widgeteket kell törölni, amelyeket new operátorral hozunk létre és „nincs szülője”.
Caption
QSpinBox QSlider
QLineEdit
mainLayout
topLayout
Form
QSpinBox(spinBox)
QSlider(slider)
QLineEdit(lineEdit)
QVBoxLayout(mainLayout)
QVBoxLayout(topLayout)
26
Form osztály – definícióForm osztály – definíció
#include <qwidget.h>
class QSpinBox;class QSlider;class QLineEdit;
class Form: public QWidget{
Q_OBJECTpublic:
Form(QWidget *parent=0, const char *name=0);private:
QSpinBox *spinBox;QSlider *slider;QLineEdit *lineEdit;QString words[11];void initWords();
public slots:void sayAsWord(int i);
};
form.h
Caption
QSpinBox QSlider
QLineEdit
27
Form osztály – implementáció 1Form osztály – implementáció 1
#include <qlayout.h>#include <qspinbox.h>#include <qslider.h>#include <qlineedit.h>#include "form.h". . .
form.cpp
Caption
QSpinBox QSlider
QLineEdit
28
Form osztály – implementáció 2Form osztály – implementáció 2. . .Form::Form(QWidget *parent, const char *name):QWidget(parent,name){ spinBox = new QSpinBox(this); slider = new QSlider(Qt::Horizontal,this); slider>setRange(0,10); spinBox>setRange(0,10); lineEdit = new QLineEdit(this);
QHBoxLayout *topLayout = new QHBoxLayout; topLayout>addWidget(spinBox); topLayout>addWidget(slider);
QVBoxLayout *mainLayout = new QVBoxLayout(this);
mainLayout>addLayout(topLayout); mainLayout>addWidget(lineEdit); mainLayout>setMargin(11); mainLayout>setSpacing(6);
connect(slider,SIGNAL(valueChanged(int)),spinBox,SLOT(setValue(int))); connect(spinBox,SIGNAL(valueChanged(int)),slider,SLOT(setValue(int))); connect(spinBox,SIGNAL(valueChanged(int)),this,SLOT(sayAsWord(int)));
initWords(); spinBox>setValue(5); }
form.cpp
Caption
QSpinBox QSlider
QLineEdit
29
““Layout” projekt fájlLayout” projekt fájl
TEMPLATE = appINCLUDEPATH += .# InputHEADERS += form.hSOURCES += form.cpp main.cpp
1. qmake –project2. qmake layout.pro3. make4. ./layout
form.h
form.cpp main.cpp
30
GUI alkalmazás Qt DesignerrelGUI alkalmazás Qt Designerrel
31
Qt designer
UIC form.h
form.cpp main.cpp
form.ui
Írás, olvasásOlvasásGenerálás#includesEszköz (tool)Generált forráskódFelhasználó forráskódja
A .ui fájl és a generált kódA .ui fájl és a generált kód
32
““Származtatásos” modulszerkezetSzármaztatásos” modulszerkezet
Qt designer
UIC form.h
formbase.cpp main.cpp
form.ui
Írás, olvasásOlvasásGenerálás#includesEszköz (tool)Generált forráskódFelhasználó forráskódja
formbase.h
form.cpp
Örö
klőd
és
A A formbase.hformbase.h és a és a formbase.cppformbase.cpp minden módosításnál újra generálódik. minden módosításnál újra generálódik. Az alkalmazás specifikus funkciókat a Az alkalmazás specifikus funkciókat a származtatott osztályban adjuk meg.származtatott osztályban adjuk meg.
33
““ui.h”s modulszerkezetui.h”s modulszerkezet
Qt designer
UIC
form.cpp main.cpp
form.ui
Írás, olvasásOlvasásGenerálás#includesEszköz (tool)Generált forráskódFelhasználó forráskódja
form.h
form.ui
form.ui.h
Az alkalmazásspecifius Az alkalmazásspecifius funkciókat a funkciókat a form.ui.hform.ui.h implementációs fájlban implementációs fájlban
adjuk meg.adjuk meg.
34
Qt Designer indításaQt Designer indítása
35
A QtDesigner ablakai A QtDesigner ablakai
ToolboxToolbox
ProjectOverviewProjectOverview
ObjectExplorerObjectExplorer Properties Editor/Properties Editor/Signal HandlersSignal Handlers
36
File/New/C++ ProjectFile/New/C++ Project
37
File/New/C++ ProjectFile/New/C++ Project
38
39
ElrendezésElrendezés
40
Edit/ConnectionsEdit/Connections
<connections> <connection> <sender>slider</sender> <signal>valueChanged(int)</signal> <receiver>spinBox</receiver> <slot>setValue(int)</slot> </connection> <connection> <sender>spinBox</sender> <signal>valueChanged(int)</signal> <receiver>slider</receiver> <slot>setValue(int)</slot> </connection></connections>
form.ui
41
Változó deklarálásaVáltozó deklarálása
42
Saját slot létrehozásaSaját slot létrehozása
Edit/Slots ... /New Function
Edit/Connections
43
void Form::sayAsWord( int i){ lineEdit>setText(words[i]);}
44
Saját függvény és “konstruktor” létrehozásaSaját függvény és “konstruktor” létrehozása
Edit/Slots ... /New Function
void Form::init(){ spinBox>setMaxValue(10); slider>setMaxValue(10); initWords(); spinBox>setValue(5);}
void Form::initWords(){
words[0] = "null";. . .words[10] = "ten";
}
A Form konstruktora után automatikusan végrehajtódik
az init() metódus.
45
main függvény beillesztésemain függvény beillesztése
Edit/Slots ... /C++ Main file
46
Generált main.cpp programGenerált main.cpp program#include <qapplication.h>#include "form.h"
int main( int argc, char ** argv ){ QApplication a( argc, argv ); Form w; w.show(); a.connect( &a, SIGNAL( lastWindowClosed() ), &a, SLOT( quit() ) ); return a.exec();}
47
Fordítás/futtatásFordítás/futtatás
1. qmake –project2. qmake words.pro3. make
48
““Words” projekt fájlWords” projekt fájl
TEMPLATE = appINCLUDEPATH += .
# InputHEADERS += form.ui.hINTERFACES += form.uiSOURCES += main.cpp
1. qmake –project2. qmake o Makefile words.pro3. make4. ./words
49
Gyakorló feladatGyakorló feladat
Feladat:Egészítse ki a projektet úgy, hogy a szám szöveges begépelésére, ha van az adott szöveghez szám, akkor a SpinBox és a Slider automatikusan álljon be a megadott értékre.
Gépelés
50
Saját slot deklarációjaSaját slot deklarációja
51
Saját slot implementálásaSaját slot implementálása
void Form::slotTextChanged_( const QString & s ){bool l=false;
for (int i=0; i< (int) sizeof(words)/sizeof(words[0]) && !l;i++){
if(words[i]==s){
l=true;slider>setValue(i);
}}
}
52
Saját slot összekapcsolása eseménnyelSaját slot összekapcsolása eseménnyel
53
““Legyen Ön is milliomos” példaLegyen Ön is milliomos” példa
Gomb + Gomb + képkép
Szerkeszthető Szerkeszthető szövegszöveg
LCD kijelzőLCD kijelző
Gomb csoportGomb csoport
Radio ButtonRadio Button
Gomb + szövegGomb + szöveg
54
Szövegdoboz elhelyezéseSzövegdoboz elhelyezése A Qt eszköztárából válasszuk ki A Qt eszköztárából válasszuk ki a a TextEdit TextEdit eszközteszközt
Kattintsunk a szövegdoboz Kattintsunk a szövegdoboz tervezett helyére.tervezett helyére.
1
2
3
55
Pixmap gomb elhelyezésePixmap gomb elhelyezésePushButtonPushButton
Kattintsunk a vezérlőelem Kattintsunk a vezérlőelem tervezett helyére.tervezett helyére.
Válaszunk képet a gomb felirata
helyett.
1
2
4
3
56
Számkijelző elhelyezéseSzámkijelző elhelyezéseLCDNumberLCDNumber
1
2
57
Távtartó (spacer) elhelyezéseTávtartó (spacer) elhelyezése SpacerSpacer
Az endButton és az LCD kijelző Az endButton és az LCD kijelző közé elhelyezhetünk egy közé elhelyezhetünk egy
“távtartót”.“távtartót”.
58
Elrendezés szabályozásaElrendezés szabályozása
Jelöljük ki egyszerre Jelöljük ki egyszerre mindhárom elemet.mindhárom elemet.
Kattintsunk a “Lay Out Kattintsunk a “Lay Out Vertically” gombra. Vertically” gombra.
1
2
59
A piros keret jelzi az A piros keret jelzi az elemek összetartozásátelemek összetartozását
Ezzel a gombbal lehet Ezzel a gombbal lehet megszüntetni a csoportot. megszüntetni a csoportot.
Layout toolbarLayout toolbar
60
Kérdés elhelyezéseKérdés elhelyezéseTextLabelTextLabel
61
Válasz keret elhelyezéseVálasz keret elhelyezéseButtonGroupButtonGroup
62
Válaszok elhelyezése – 1Válaszok elhelyezése – 1Radio ButtonRadio Button
63
Válaszok elhelyezése – 2Válaszok elhelyezése – 2
64
A A KövetkezőKövetkező gomb elhelyezése gomb elhelyezése
65
66
Grid LayoutGrid Layout
Ne legyen elem Ne legyen elem kiválasztva.kiválasztva.
A szabályos elrendezéshez kattintson a A szabályos elrendezéshez kattintson a “Lay Out in a Grid” gombra “Lay Out in a Grid” gombra
67
Főprogram beillesztéseFőprogram beillesztése
68
#include <qapplication.h>#include "millmain.h"
int main( int argc, char ** argv ){ QApplication a( argc, argv ); MillMain w; w.show(); a.connect( &a, SIGNAL( lastWindowClosed() ), &a, SLOT( quit() ) ); return a.exec();}
69
““Viselkedés” tesztelése – Ctrl TViselkedés” tesztelése – Ctrl T
Itt léphet ki a Itt léphet ki a tesztelésből.tesztelésből.
A szövegek elrendezése A szövegek elrendezése változik az ablak méretével. változik az ablak méretével.
70
Tennivalók az alkalmazásunkbanTennivalók az alkalmazásunkban
Következő kérdés feladása nextQuestion()
Válasz ellenőrzése checkAnswer()
Kilépés endButton()
71
Tennivalók az alkalmazásunkbanTennivalók az alkalmazásunkban
Következő kérdés feladása nextQuestion()
Válasz ellenőrzése checkAnswer()
Kilépés endButton()
connect( nextButton, SIGNAL( clicked() ), this, SLOT( nextQuestion() ) ); connect( ansGroup, SIGNAL( clicked(int) ), this, SLOT( checkAnswer(int) ) ); connect( endButton, SIGNAL( clicked() ), this, SLOT( endGame() ) );
72
Saját slotok beillesztése Edit/SlotsSaját slotok beillesztése Edit/Slots
void MillMain::nextQuestion( ){ qWarning( tr("MillMain::nextQuestion(): Not implemented yet" ));}
millmain.ui.h
void MillMain::checkAnswer(int ){ qWarning( tr("MillMain::nextQuestion(): Not implemented yet" ));}
millmain.ui.h
73
Edit/ConnectionsEdit/Connections
connect( nextButton, SIGNAL( clicked() ), this, SLOT( nextQuestion() ) ); connect( ansGroup, SIGNAL( clicked(int) ), this, SLOT( checkAnswer(int) ) ); connect( endButton, SIGNAL( clicked() ), this, SLOT( endGame() ) );
74
Qt designer
UIC
millmain.cpp main.cpp
form.ui
Írás, olvasásOlvasásGenerálás#includesEszköz (tool)Generált forráskódFelhasználó forráskódja
millmain.h
millmain.ui
millmain.ui.h
75
millmain.ui.hmillmain.ui.h
void MillMain::nextQuestion(){ qWarning( tr("MillMain::nextQuestion(): Not implemented yet" ));}
void MillMain::checkAnswer( int ){ qWarning( tr("MillMain::nextQuestion(): Not implemented yet" ));}
void MillMain::endGame(){ qWarning( tr("MillMain::nextQuestion(): Not implemented yet" ));}
76
Fordítás/futtatásFordítás/futtatás
77
Vége, de ...Vége, de ...A munkafüzet programjai letölthetők a people.inf.elte.hu/nacsa/eaf3/projects
címről.
