Elemi alkalmazások fejlesztése III Egyablakos alkalmazás készítése I. Qt/X11 felhasználásával Kdevelop környezetben készítette: Steingart Ferenc Szabóné Nacsa Rozália
Ajánlott irodalom Qt dokumentáció online: www.trolltech.com lokális változat: Kdevelop help vagy /usr/share/doc... Nyomtatható változat: www.trolltech.com-ról PDF formátumban KDevelop dokumentáció
A Qt assistant elindítása Alt F2-vel behívjuk a parancsablakot, majd kiadjuk az assistant parancsot.
A Qt assistant nyitó ablaka
A callback mechanizmus és a signal/slot mechanizmus összehasonlítása Feladat: Jelenítsük meg a csúszka (slider) aktuális értékét egy számkijelz ő n. Visual C++ / MFC Kdevelop / Qt
// Generated message map functions SliderDlg.h //{{AFX_MSG(CSliderDlg)... afx_msg void OnReleasedcaptureSlider(NMHDR* pnmhdr, LRESULT* presult); //}}AFX_MSG DECLARE_MESSAGE_MAP() SliderDlg.cpp BEGIN_MESSAGE_MAP(CSliderDlg, CDialog) //{{AFX_MSG_MAP(CSliderDlg) ON_WM_SYSCOMMAND() ON_WM_PAINT() ON_WM_QUERYDRAGICON() ON_NOTIFY(NM_RELEASEDCAPTURE, IDC_SLIDER, OnReleasedcaptureSlider) //}}AFX_MSG_MAP END_MESSAGE_MAP() SliderDlg.cpp Void CSliderDlg::OnReleasedcaptureSlider(NMHDR* pnmhdr, LRESULT* presult) { // TODO: Add your control notification handler code here m_lcd = m_slider.getpos(); UpdateData(FALSE); *presult = 0; }
Callback mechanizmus SliderDlg Üzenet Metódus Releasedcapture OnReleasedcaptureSlider Üzenet tábla Void CsliderDlg::OnReleasedcaptureS lider(...) Üzenetkezel ő metódus Slider mozgatás 1
Callback mechanizmus SliderDlg Üzenet Metódus Releasedcapture OnReleasedcaptureSlider Üzenet tábla Void CsliderDlg::OnReleasedcaptureSlider(...) Üzenetkezelő metódus 2 Üzenet Slider mozgatás 1
Callback mechanizmus SliderDlg Üzenet Metódus Releasedcapture OnReleasedcaptureSlider Üzenet tábla 3 Üzenetkezel ő behívása Void CsliderDlg::OnReleasedcaptureSlider(...) Üzenetkezelő metódus 2 Üzenet Slider mozgatás 1
Callback mechanizmus SliderDlg Üzenet Metódus Releasedcapture OnReleasedcaptureSlider Üzenet tábla 3 Üzenetkezel ő behívása 4 Void CsliderDlg::OnReleasedcaptureSlider(...) Érték lekérdezése Üzenetkezelő metódus 2 Üzenet Slider mozgatás 1
Callback mechanizmus SliderDlg Üzenet Metódus Releasedcapture OnReleasedcaptureSlider Üzenet tábla 3 Üzenetkezel ő behívása Void CsliderDlg::OnReleasedcaptureSlider(...) Üzenetkezelő metódus 4 Érték lekérdezése Kijelz ő beállítása 5 2 Üzenet Slider mozgatás 1
Signal / slot mechanizmus Slotok Signálok Slotok Signálok ValueChanged(int) Display(int) A slider ØrtØkvÆltozÆs esetøn valuechanged(int) szignælt k ld. Ezt a szignælt hozzæk tj k a szæmkijelz ő display (int) slotjæhoz (speciælisan kezelt m ű veletøhez).
Signal / slot mechanizmus Slotok Signálok Slotok Signálok ValueChanged(int) Display(int) connect( ansgroup, SIGNAL( clicked(int) ), this, SLOT( checkanswer(int) ) );
A grafikus tervez ő eszköz szerepe Programfejlesztő Grafikus tervező (Kdevelop) Qt Program Kinek a módosítása érvényes?
A.ui fájl és a generált kód Qt designer form.ui UIC form.h Írás, olvasás Olvasás Generálás #includes Eszköz (tool) Generált forráskód Felhasználó forráskódja form.cpp main.cpp
A.ui fájl és a generált kód származtatás Qt designer formbase.ui UIC formbase.h Örökl ő dés form.h Írás, olvasás Olvasás Generálás #includes Eszköz (tool) Generált forráskód Felhasználó forráskódja formbase.cpp Névkonvenció form.cpp main.cpp
Kdevelop / Qt alkalmazás Legyen Ön is milliomos! Gomb + kép Szerkeszthet ő szöveg LCD kijelző Gomb csoport Gomb + szöveg Radio Button
Új projekt létrehozása Project / New 1 2
Kdevelop projekt elkészítése Qt SDI 1 2
Az alkalmazás adatai 1 Mill 2 3
Projekt generálása A generálás normál üzenetet Figyelmeztetések, hibák
Bug kiszedése Módosítani kell az acinclude.m4.in fájlt.
Módosítani kell az acinclude.m4.in fájlt. Törölni kell a [ és ] zárójeleket. [m4_define([$1], [mm_car($2)])$3[]_mm_foreach([$1], [m4_define([$1], mm_car($2))$3[]_mm_foreach([$1],
Grafikus elem hozzáadása A Switch to Qt's designer gommbal váltsunk át Qt-re.
Qt designer - a képerny ő felépítése Fájlok Forrásszöveg, widget Tulajdonságok Beállítás:Window/View/... Vezérlőelemek
PushButton RadioButton CheckBox Qt Toolbar ButtonGroup Frame TextLabel LCDNumber LineEdit TextEdit ComboBox
Új widget létrehozása: File/New/Widget Ez a párbeszédablak behívható a Kdevelop-ból is közvetlenül a File/New paranccsal.
Párbeszédablak name, caption
File/Save as... Fogadjuk el a widget nevéből származtatott file nevet.
Szövegdoboz elhelyezése A Qt eszköztárából válasszuk ki a TextEdit eszközt 1 2 Kattintsunk a szövegdoboz tervezett helyére.
1 PushButton Pixmap gomb elhelyezése 3 2 Kattintsunk a vezérl ő elem tervezett helyére. 4 Válaszunk képet a gomb felirata helyett.
1 LCDNumber Számkijelz ő elhelyezése 2
Távtartó (spacer) elhelyezése Spacer Az endbutton és az LCD kijelz ő közé elhelyezhetünk egy távtartót.
Elrendezés szabályozása 2 Kattintsunk a Lay Out Vertically gombra. Jelöljük ki egyszerre mindhárom elemet. 1
Layout toolbar Ezzel a gombbal lehet megszüntetni a csoportot. A piros keret jelzi az elemek összetartozását
TextLabel Kérdés elhelyezése
ButtonGroup Válasz keret elhelyezése
Radio Button Válaszok elhelyezése 1
Válaszok elhelyezése 2
A Következő gomb elhelyezése
Grid Layout A szabályos elrendezéshez kattintson a Lay Out in a Grid gombra Ne legyen elem kiválasztva.
? Viselkedés tesztelése Ctrl T Itt léphet ki a tesztelésb ő l. A szövegek elrendezése változik az ablak méretével.
A.ui file mentése
A.ui file beillesztése a Kdevelop projektbe
.ui -> XML
main.cpp program hozzáadása
Kdevelop main.cpp Gépeljük be a forrásprogramot.
main.cpp #include <qapplication.h> #include "millmainbase.h" 1 int main( int argc, char ** argv ) { QApplication a( argc, argv ); 2 MillMainBase *w = new MillMainBase; 3 w->show(); 4 5 a.connect( &a, SIGNAL( lastwindowclosed() ), &a, SLOT( quit() ) ); } return a.exec(); 6
Fordítás Futtatás
Következ ő kérdés feladása - nextquestion() Válasz ellen ő rzése - checkanswer() Kilépés - endbutton()
!!!!!!!! Következ ő kérdés feladása - nextquestion() Válasz ellen ő rzése - checkanswer() Kilépés - endbutton() connect( nextbutton, SIGNAL( clicked() ), this, SLOT( newquestion() ) ); connect( ansgroup, SIGNAL( clicked(int) ), this, SLOT( checkanswer(int) ) ); connect( endbutton, SIGNAL( clicked() ), this, SLOT( endgame() ) );
Connect Signal/Slots (F3) Kapcsolatépítés Qt-ben 3. Elenged 2. Húz 1. Kattint
21 2 3 4 5 6
Edit Connection Beépített slot Felhasználói slot Ezt az ablakot el ő hívhatjuk az Edit/Connection menüponttal is.
Edit/Connections... connect( nextbutton, SIGNAL( clicked() ), this, SLOT( newquestion() ) ); connect( ansgroup, SIGNAL( clicked(int) ), this, SLOT( checkanswer(int) ) ); connect( endbutton, SIGNAL( clicked() ), this, SLOT( endgame() ) );
Generált header connections public slots: virtual void endgame(); virtual void newquestion(); virtual void checkanswer(int); Millmainbase.h
Generált forráskód connections... void MillMainBase::endGame() { qwarning( "MillMainBase::endGame(): Not implemented yet!" ); } void MillMainBase::newQuestion() { qwarning( "MillMainBase::newQuestion(): Not implemented yet!" ); } void MillMainBase::checkAnswer(int) { qwarning( "MillMainBase::checkAnswer(int): Not implemented yet!" ); } #include "millmainbase.moc"
Fordítás/ Futtatás
Projektkészítés kézzel mill könyvtár main.cpp millmain.h millmain.cpp qmake -project qmake mill.pro make./mill
Kézi programozás: main.cpp #include <qapplication.h> #include "millmain.h" int main( int argc, char ** argv ) { QApplication a( argc, argv ); MillMain *w = new MillMain; w->show(); a.connect( &a, SIGNAL( lastwindowclosed() ), &a, SLOT( quit() ) ); return a.exec(); }
Caption A widget megtervezése mainlayout toprightlayout QTextEdit QPushButton QLCDNumber toplayout QLabel QRadioButton QRadioButton QRadioButton QRadioButton ansgrouplayout QPushButton bottomlayout
A widget megtervezése Caption text endbutton moneyvalue questionlabel ans1 ans3 ans2 ans4 nextbutton
#ifndef MILLMAIN_H #define MILLMAIN_H #include <qwidget.h> Kézi programozás: millmain.h main.h class QTextEdit; class QPushButton; class QButtonGroup; class QLabel; class QLCDNumber; class QRadioButton; class MillMain : public QWidget { Q_OBJECT public: MillMain( QWidget* parent = 0, const char* name = 0);...... public slots: virtual void newquestion(); virtual void checkanswer(int); virtual void endgame(); protected: QTextEdit* text; QPushButton* endbutton; QLCDNumber* moneyvalue; QLabel* questionlabel; QPushButton* nextbutton; QButtonGroup* ansgroup; QRadioButton* ans1; QRadioButton* ans2; QRadioButton* ans3; QRadioButton* ans4; }; #endif
Kézi programozás: millmain.cpp main.cpp #include "millmain.h" #include <qvariant.h> #include <qbuttongroup.h> #include <qlabel.h> #include <qlcdnumber.h> #include <qpushbutton.h> #include <qradiobutton.h> #include <qtextedit.h> #include <qlayout.h>... MillMain::MillMain( QWidget* parent, const char* name ) : QWidget( parent, name ) { if (!name ) setname( "MillMain" ); setcaption( "Legyen Ön is milliomos" ); // Vezérlőelemek megadása Következ ő lap // signals and slots connections connect( nextbutton, SIGNAL( clicked() ), this, SLOT( newquestion() ) ); connect( ansgroup, SIGNAL( clicked(int) ), this, SLOT( checkanswer(int) ) ); connect( endbutton, SIGNAL( clicked() ), this, SLOT( endgame() ) ); }
Kézi programozás: millmain.cpp main.cpp... text = new QTextEdit( this, "text" ); endbutton = new QPushButton( "Vege", this, "endbutton" ); nextbutton = new QPushButton( "Kovetkezo", this); moneyvalue = new QLCDNumber( this, "moneyvalue" ); questionlabel = new QLabel( this, "questionlabel" ); questionlabel->setframeshape( QLabel::Box ); questionlabel->setframeshadow( QLabel::Sunken ); questionlabel->setalignment( int( QLabel::AlignCenter ) ); questionlabel->settext("kerdes helye"); ansgroup = new QButtonGroup( this, "ansgroup" ); ansgroup->setcolumnlayout(0, Qt::Vertical ); ansgroup->layout()->setspacing( 6 ); ansgroup->layout()->setmargin( 11 ); ansgroup->settitle( tr("kattintson a megfelelo valaszra!")); Vezérl ő elemek megadása ans1 = new QRadioButton( ansgroup, "ans1" ); ans2 = new QRadioButton( ansgroup, "ans2" ); ans3 = new QRadioButton( ansgroup, "ans3" ); ans4 = new QRadioButton( ansgroup, "ans4" );...
Kézi programozás: millmain.cpp main.cpp... QGridLayout *ansgrouplayout = new QGridLayout( ansgroup->layout() ); ansgrouplayout->addwidget( ans1, 0, 0 ); ansgrouplayout->addwidget( ans2, 0, 1 ); ansgrouplayout->addwidget( ans3, 1, 0 ); ansgrouplayout->addwidget( ans4, 1, 1 ); QVBoxLayout *toprightlayout = new QVBoxLayout; toprightlayout->addwidget(endbutton); toprightlayout->addstretch(1); toprightlayout->addwidget(moneyvalue); QHBoxLayout *toplayout = new QHBoxLayout; toplayout->addwidget(text); toplayout->addlayout(toprightlayout); Vezérl ő elemek elrendezése QHBoxLayout *bottomlayout = new QHBoxLayout; bottomlayout->addstretch(1); bottomlayout->addwidget(nextbutton);...
Kézi programozás: millmain.cpp main.cpp... QVBoxLayout *mainlayout = new QVBoxLayout(this); mainlayout->setmargin(11); mainlayout->setspacing(6); mainlayout->addlayout(toplayout); mainlayout->addwidget(questionlabel); mainlayout->addwidget(ansgroup); mainlayout->addlayout(bottomlayout);... F ő vezérl ő elem összeállítása
Kézi programozás: millmain.cpp main.cpp... //Slots void MillMain::newQuestion() { qwarning( "MillMain::newQuestion(): Not implemented yet" ); } void MillMain::checkAnswer(int) { qwarning( "MillMain::checkAnswer(int): Not implemented yet" ); } void MillMain::endGame() { qwarning( "MillMain::endGame(): Not implemented yet" ); }... Eseménykezel ő k el ő készítése
Alkalmazás készítés Qt Designerben Qt designer elindítása Új Qt projekt létrehozása Párbeszédablak (form) hozzáadása a projekthez Vezérlőelemek ( slider, lcd) megadása main.cpp hozzávétele a projekthez Fordítás/Futtatás (parancs módban)
mill.pro SOURCES+= main.cpp unix { UI_DIR =.ui MOC_DIR =.moc OBJECTS_DIR =.obj } FORMS = millmainbase.ui TEMPLATE =app CONFIG += qt warn_on release LANGUAGE = C++
mill.pro ###################################################################### # Automatically generated by qmake (1.04a) Sun Feb 29 18:33:02 2004 ###################################################################### TEMPLATE = app CONFIG -= moc INCLUDEPATH +=. # Input INTERFACES += millmainbase.ui SOURCES += main.cpp
Vége, de... Folyt. köv.