Elemi alkalmazások fejlesztése III

Átírás

1 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

2 Ajánlott irodalom Qt dokumentáció online: lokális változat: Kdevelop help vagy /usr/share/doc... Nyomtatható változat: PDF formátumban KDevelop dokumentáció

3 A Qt assistant elindítása Alt F2-vel behívjuk a parancsablakot, majd kiadjuk az assistant parancsot.

4 A Qt assistant nyitó ablaka

5 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

6 // 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; }

7 Callback mechanizmus SliderDlg Üzenet Metódus Releasedcapture OnReleasedcaptureSlider Üzenet tábla Void CsliderDlg::OnReleasedcaptureS lider(...) Üzenetkezel ő metódus Slider mozgatás 1

8 Callback mechanizmus SliderDlg Üzenet Metódus Releasedcapture OnReleasedcaptureSlider Üzenet tábla Void CsliderDlg::OnReleasedcaptureSlider(...) Üzenetkezelő metódus 2 Üzenet Slider mozgatás 1

9 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

10 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

11 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

12 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).

13 Signal / slot mechanizmus Slotok Signálok Slotok Signálok ValueChanged(int) Display(int) connect( ansgroup, SIGNAL( clicked(int) ), this, SLOT( checkanswer(int) ) );

14 A grafikus tervez ő eszköz szerepe Programfejlesztő Grafikus tervező (Kdevelop) Qt Program Kinek a módosítása érvényes?

15 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

16 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

17 Kdevelop / Qt alkalmazás Legyen Ön is milliomos! Gomb + kép Szerkeszthet ő szöveg LCD kijelző Gomb csoport Gomb + szöveg Radio Button

18 Új projekt létrehozása Project / New 1 2

19 Kdevelop projekt elkészítése Qt SDI 1 2

20 Az alkalmazás adatai 1 Mill 2 3

21 Projekt generálása A generálás normál üzenetet Figyelmeztetések, hibák

22 Bug kiszedése Módosítani kell az acinclude.m4.in fájlt.

23 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],

24 Grafikus elem hozzáadása A Switch to Qt's designer gommbal váltsunk át Qt-re.

25 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

26 PushButton RadioButton CheckBox Qt Toolbar ButtonGroup Frame TextLabel LCDNumber LineEdit TextEdit ComboBox

27 Ú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.

28 Párbeszédablak name, caption

29 File/Save as... Fogadjuk el a widget nevéből származtatott file nevet.

30 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.

31 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.

32 1 LCDNumber Számkijelz ő elhelyezése 2

33 Távtartó (spacer) elhelyezése Spacer Az endbutton és az LCD kijelz ő közé elhelyezhetünk egy távtartót.

34 Elrendezés szabályozása 2 Kattintsunk a Lay Out Vertically gombra. Jelöljük ki egyszerre mindhárom elemet. 1

35 Layout toolbar Ezzel a gombbal lehet megszüntetni a csoportot. A piros keret jelzi az elemek összetartozását

36 TextLabel Kérdés elhelyezése

37 ButtonGroup Válasz keret elhelyezése

38 Radio Button Válaszok elhelyezése 1

39 Válaszok elhelyezése 2

40

41 A Következő gomb elhelyezése

42 Grid Layout A szabályos elrendezéshez kattintson a Lay Out in a Grid gombra Ne legyen elem kiválasztva.

43 ? 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.

44 A.ui file mentése

45 A.ui file beillesztése a Kdevelop projektbe

46 .ui -> XML

47 main.cpp program hozzáadása

48 Kdevelop main.cpp Gépeljük be a forrásprogramot.

49 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

50 Fordítás Futtatás

51 Következ ő kérdés feladása - nextquestion() Válasz ellen ő rzése - checkanswer() Kilépés - endbutton()

52 !!!!!!!! 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() ) );

53 Connect Signal/Slots (F3) Kapcsolatépítés Qt-ben 3. Elenged 2. Húz 1. Kattint

54

55 Edit Connection Beépített slot Felhasználói slot Ezt az ablakot el ő hívhatjuk az Edit/Connection menüponttal is.

56 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() ) );

57 Generált header connections public slots: virtual void endgame(); virtual void newquestion(); virtual void checkanswer(int); Millmainbase.h

58 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"

59 Fordítás/ Futtatás

60 Projektkészítés kézzel mill könyvtár main.cpp millmain.h millmain.cpp qmake -project qmake mill.pro make./mill

61 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(); }

62 Caption A widget megtervezése mainlayout toprightlayout QTextEdit QPushButton QLCDNumber toplayout QLabel QRadioButton QRadioButton QRadioButton QRadioButton ansgrouplayout QPushButton bottomlayout

63 A widget megtervezése Caption text endbutton moneyvalue questionlabel ans1 ans3 ans2 ans4 nextbutton

64 #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

65 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() ) ); }

66 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" );...

67 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);...

68 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

69 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

70 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)

71 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++

72 mill.pro ###################################################################### # Automatically generated by qmake (1.04a) Sun Feb 29 18:33: ###################################################################### TEMPLATE = app CONFIG -= moc INCLUDEPATH +=. # Input INTERFACES += millmainbase.ui SOURCES += main.cpp

73 Vége, de... Folyt. köv.