people.inf.elte.hu munkafuzet.pdfElemi alkalmazÆsok fejlesztØse III. Egyablakos Qt alkalmazÆs...

20
Elemi alkalmazások fejlesztése III. Egyablakos Qt alkalmazás készítése I. Egyablakos alkalmazás készítése I................................................................................................................................2 Qt Designer ...............................................................................................................................................................2 MFC és a Qt összehasonlítása .................................................................................................................................3 SliderDlg.h ................................................................................................................................................................3 SliderDlg.cpp ............................................................................................................................................................3 Callback mechanizmus..............................................................................................................................................4 A Signal/Slot mechanizmus .....................................................................................................................................4 A Qt beállításai .........................................................................................................................................................5 Egyablakos grafikus alkalmazás készítése ..............................................................................................................5 KDevelop projekt elkészítése...................................................................................................................................6 Grafikus felület megtervezése .................................................................................................................................6 Qt Designer behívása...........................................................................................................................................6 MillMainBase párbeszédablak (form) létrehozása ...........................................................................................6 Szövegdoboz (Text Edit) ráhelyezése a párbeszédablakra ...............................................................................6 Vége gomb (Push Button) ráhelyezése a párbeszédablakra .............................................................................6 LCD kijelző (LCD number) ráhelyezése a párbeszédablakra ..........................................................................7 A grafikus felület megjelenésének szabályozása (Layout)................................................................................7 Kérdés (Text Label) helyének kijelölése a párbeszédablakon .........................................................................7 A választ körbehatároló keret (Button Group)...................................................................................................7 Lehetséges válaszok(Radio Button)....................................................................................................................8 Elrendezés (layout): ............................................................................................................................................8 A “Következő” gomb ráhelyezése a párbeszédablakra ....................................................................................8 Az elemek szép elrendezése a párbeszédablakon .............................................................................................8 A párbeszédablak küllemének tesztelése ................................................................................................................8 Az .ui fájl mentése ....................................................................................................................................................8 A grafikus elemek (millmainbase.ui) beillesztése a projektbe ..............................................................................9 A main.cpp program..................................................................................................................................................9 Fordítás/Futtatás......................................................................................................................................................10 Eddigi munkánk megfigyelése/tesztelése .............................................................................................................10 Tennivalók az alkalmazásunkban...........................................................................................................................11 Sorról sorra - millmainbase.h ................................................................................................................................14 Sorról sorra - millmainbase.cpp ............................................................................................................................15 Projekt készítés “kézzel”.........................................................................................................................................17 Forrásprogramok az alkamazás “kézi” elkészítéséhez..........................................................................................18 main.cpp..............................................................................................................................................................18 millmain.h...........................................................................................................................................................18 millmain.cpp.......................................................................................................................................................19 Letöltési cím ...........................................................................................................................................................20 ELTE Informatikai Kar 1. oldal

Transcript of people.inf.elte.hu munkafuzet.pdfElemi alkalmazÆsok fejlesztØse III. Egyablakos Qt alkalmazÆs...

Page 1: people.inf.elte.hu munkafuzet.pdfElemi alkalmazÆsok fejlesztØse III. Egyablakos Qt alkalmazÆs kØszítØse I. MON3P-QSROTVUXW*YAR0R[Z]\]^*T RA_*`%acb6W d R0T NØzzük meg, hogyan

Elemi alkalmazások fejlesztése III. Egyablakos Qt alkalmazás készítése I.

����������� ���������������

Egyablakos alkalmazás készítése I................................................................................................................................2Qt Designer ...............................................................................................................................................................2MFC és a Qt összehasonlítása .................................................................................................................................3SliderDlg.h ................................................................................................................................................................3SliderDlg.cpp ............................................................................................................................................................3Callback mechanizmus..............................................................................................................................................4A Signal/Slot mechanizmus .....................................................................................................................................4A Qt beállításai .........................................................................................................................................................5Egyablakos grafikus alkalmazás készítése ..............................................................................................................5KDevelop projekt elkészítése...................................................................................................................................6Grafikus felület megtervezése .................................................................................................................................6

Qt Designer behívása...........................................................................................................................................6MillMainBase párbeszédablak (form) létrehozása ...........................................................................................6Szövegdoboz (Text Edit) ráhelyezése a párbeszédablakra ...............................................................................6Vége gomb (Push Button) ráhelyezése a párbeszédablakra .............................................................................6LCD kijelző (LCD number) ráhelyezése a párbeszédablakra ..........................................................................7A grafikus felület megjelenésének szabályozása (Layout)................................................................................7Kérdés (Text Label) helyének kijelölése a párbeszédablakon .........................................................................7A választ körbehatároló keret (Button Group)...................................................................................................7Lehetséges válaszok(Radio Button)....................................................................................................................8Elrendezés (layout): ............................................................................................................................................8A “Következő” gomb ráhelyezése a párbeszédablakra ....................................................................................8Az elemek szép elrendezése a párbeszédablakon .............................................................................................8

A párbeszédablak küllemének tesztelése ................................................................................................................8Az .ui fájl mentése ....................................................................................................................................................8A grafikus elemek (millmainbase.ui) beillesztése a projektbe ..............................................................................9A main.cpp program..................................................................................................................................................9Fordítás/Futtatás......................................................................................................................................................10Eddigi munkánk megfigyelése/tesztelése .............................................................................................................10Tennivalók az alkalmazásunkban...........................................................................................................................11Sorról sorra - millmainbase.h ................................................................................................................................14Sorról sorra - millmainbase.cpp ............................................................................................................................15Projekt készítés “kézzel”.........................................................................................................................................17Forrásprogramok az alkamazás “kézi” elkészítéséhez..........................................................................................18

main.cpp..............................................................................................................................................................18millmain.h...........................................................................................................................................................18millmain.cpp.......................................................................................................................................................19

Letöltési cím ...........................................................................................................................................................20

ELTE Informatikai Kar 1. oldal

Page 2: people.inf.elte.hu munkafuzet.pdfElemi alkalmazÆsok fejlesztØse III. Egyablakos Qt alkalmazÆs kØszítØse I. MON3P-QSROTVUXW*YAR0R[Z]\]^*T RA_*`%acb6W d R0T NØzzük meg, hogyan

Elemi alkalmazások fejlesztése III. Egyablakos Qt alkalmazás készítése I.

������� "!���#%$'&(�!)#*��!,+-��.0/�&1#%2�&3.0465�2�&87:9<;=?>A@'BDCFEHGJIKB0L

A Qt Designer grafikus felületek tervezésére alkalmas (nem integrált) vizuális eszköz. A QtDesigner "kimenete" egy XML alapú, .ui kiterjesztésű szöveges fájl, amely a grafikus felület definíciójáttartalmazza. Amikor valamilyen fejlesztőeszközzel (pl. KDevelop) elkészítjük alkalmazásunk projektjét, akkorezt az .ui fájlt kell beillesztenünk a párbeszédablakot használó projektünkbe. Fordításnál egy ún. meta object(moc) " előfordító" az .ui fájlokból elkészíti a megfelelő .cpp és .h kiterjesztésű fájlokat, melyek beépülnekprojektünkbe. Ha változtatunk a grafikus felületen, akkor ezt a Qt segítségével tesszük meg. Ekkor lényegébenaz .ui fájlunkat módosítjuk. Fordításkor az .ui fájl is feldolgozásra kerül, és így a módosítás megjelenik azalkamazásunkban.

Megjegyzés: A Qt 3 változata már önálló projektek elkészítésére is alkalmas. Ebben az esetben a fordítás ésfuttatás parancs módban történik, és a nyomkövetés is eléggé nehézkes, ezért mi azt a megoldást választjuk,hogy a grafikus felületet a Qt-vel készítjük el, de magának az alkamazásnak az elkészitését - a Qt-ben elkészitettgrafikus elemek felhasználásával - a kényelmesebb KDeevelop fejlesztőkörnyezeteben oldjuk meg.

A Qt eszközök megtalálhatók a : www.trolltech.com weboldalon.

ELTE Informatikai Kar 2. oldal

Page 3: people.inf.elte.hu munkafuzet.pdfElemi alkalmazÆsok fejlesztØse III. Egyablakos Qt alkalmazÆs kØszítØse I. MON3P-QSROTVUXW*YAR0R[Z]\]^*T RA_*`%acb6W d R0T NØzzük meg, hogyan

Elemi alkalmazások fejlesztése III. Egyablakos Qt alkalmazás készítése I.

MON3P-QSROTVUXW*YAR0R[Z]\]^*T�RA_*`%acb6W�d�R0TNézzük meg, hogyan valósítható meg MFC-ben és Qt-ben egy olyan számkijelző, amelynek az értékét egycsúszkával (slider) lehet állítgatni.

Kdevelop - Qt Visual C++ / MFC

e acfhg8\[ikjlanmpoh^// Generated message map functions

//{{AFX_MSG(CSliderDlg) . . .

afx_msg void OnReleasedcaptureSlider(NMHDR* pNMHDR, LRESULT* pResult); //}}AFX_MSG DECLARE_MESSAGE_MAP()

e acfhg8\[ikjlanmporqtsusBEGIN_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()

. . . void CSliderDlg::OnReleasedcaptureSlider(NMHDR* pNMHDR, LRESULT* pResult)

{ // TODO: Add your control notification handler code here m_lcd = m_slider.GetPos(); UpdateData(FALSE); *pResult = 0; }

. . .

ELTE Informatikai Kar 3. oldal

Page 4: people.inf.elte.hu munkafuzet.pdfElemi alkalmazÆsok fejlesztØse III. Egyablakos Qt alkalmazÆs kØszítØse I. MON3P-QSROTVUXW*YAR0R[Z]\]^*T RA_*`%acb6W d R0T NØzzük meg, hogyan

Elemi alkalmazások fejlesztése III. Egyablakos Qt alkalmazás készítése I.

v�w�xyxyz*wA{[|O}�~[{0�*wF�%���D}��A�

1) Csúszka mozgatása2) Üzenetküldés3) Üzenetkezelő behívása4) Csúszka értékének lekérdezése5) Számkijelző értékének beállítása

��� �n�J�*w�x � � xh�K�A}�~[{0�*wF�%���D}��A�A Qt a callback technikától eltérő ún. "signal és slot" technikával oldja meg az objektumok közötti

kommunikációt.

A slider értékváltozás eseténA slider értékváltozás eseténvalueChanged(int) szignált küld. Ezt a szignáltvalueChanged(int) szignált küld. Ezt a szignálthozzákötjük a számkijelző display (int)hozzákötjük a számkijelző display (int)slotjához slotjához (speciálisan kezelt műveletéhez).(speciálisan kezelt műveletéhez).

ELTE Informatikai Kar 4. oldal

Page 5: people.inf.elte.hu munkafuzet.pdfElemi alkalmazÆsok fejlesztØse III. Egyablakos Qt alkalmazÆs kØszítØse I. MON3P-QSROTVUXW*YAR0R[Z]\]^*T RA_*`%acb6W d R0T NØzzük meg, hogyan

Elemi alkalmazások fejlesztése III. Egyablakos Qt alkalmazás készítése I.

� �?�A�8�S���y�c�6�����0���Munkánk során több ablakot is használunk, ezért néha már úgy elrontjuk a képernyő tartalmát,

hogy magunk sem igazodunk ki benne. Ilyenkor célszerű a Qt-ben kikapcsolni a "Restore last workspace onstartup" kapcsolót. Ezután a Qt indításkor alapállapotban indul. A parancs formája:

Edit/Preferences/General/General

A Qt 3 alapesetben úgy kezeli a képeket, hogy megosztja azt az egyes programok között (project

image collection), így minden képet csak egyszer kell tárolnia. Sajnos a KDev 2-t még nem készítették fel erre atechnikára, így ha a két rendszert együttesen szeretnénk használni, akkor a képet használó párbeszédablakoknáljelezni kell, hogy a képeket a forráskódban kívánjuk tárolni. A parancs formája:

Edit/Form settings ... A Pixmaps keretben jelöljük be a "Save inline" opciót.

�u�3�F���%�����F�A� ��¡¢��£,�y��¤A�O�����]����¥V�[¦§�0�¨�F©S�[¦ª�<�,©D�A�Készítsünk el egy olyan egyablakos grafikus alkalmazást, amely szimulálja a "Legyen Ön is

milliomos" játékot.

ELTE Informatikai Kar 5. oldal

Page 6: people.inf.elte.hu munkafuzet.pdfElemi alkalmazÆsok fejlesztØse III. Egyablakos Qt alkalmazÆs kØszítØse I. MON3P-QSROTVUXW*YAR0R[Z]\]^*T RA_*`%acb6W d R0T NØzzük meg, hogyan

Elemi alkalmazások fejlesztése III. Egyablakos Qt alkalmazás készítése I.

«­¬­®°¯D®]±h²0³´³¶µ·²¹¸º®]»°¼*®S±�»F½S¾[¿ªÀ<¼6½S¾A®Project/New Wizard: Qt/Qt SDI �KövetkezőGenerate source and headers : KI (kikapcsolva) GNU-Standard Files: KI User documentation: KI API dokumentation: KI Ism file - Linux software map: KI Program icon: BE (bekapcsolva) Mini ikon: BE Project name: Mill � Create � Exit

Á µ¢Â�Ã6Ä�»FÅA¾�ÃÆ®S±rÇA±r®F¼AÈ�®ÊÉ�¼,®[µË¯S®ª¿]½D¾A®Ì�Í�Î�ÏtÐÒÑÔÓ0ÕtϪÖ�×ÊϧØÚÙHÛÚܧÐ�Ý

A Qt designer párbeszédablak-szerkesztő fejlesztőeszközt elindíthatja közvetlenül a KDevelop-bólis. (A KDevelop eszközei között keresse meg az "Átváltás a Qt designer párbeszédablak-szerkesztő gombot".) Þ Ñàßnß Þ Ý§ÑàÕ]á�ݧÐ�Ï âÚÜSÖ,×ÊÏtÐäãæåÒçªÝª×ªßÔݧè�écêrëFÖ,ì'í0ßÔåºÍîÖhÏtØÊë[ã¹ÜtÐ�Ý1. Adja ki a File/New parancsot 2. A felkínált listából válassza ki a Widget elemet (a Widget olyasmi, mint az MFC-ben a vezérlőelem, csak

egy kicsit "többet tud"). 3. A Property Editor/Signal Handlers munkaablak Properties lapján állítsa be a következőket:

name: MillMainBase (ez a párbeszédablak elem azonosítója) caption: Legyen Ön is milliomos (a párbeszédablak cimkéje)

4. Mentse el a párbeszédablakot: File/Save as... (... milliomos1/mill/mill könyvtárba)file name: millmainbase.ui (elfogadva a párbeszédablak nevéből származtatott felajánlott nevet) ïAãæð§ÛÊÏÒÓDçDë�×Êë]ã¶écñ]ÏäòÚÍ�óSç[ÑôÍ�íAÖyܪØÊÏtßöõtÏÊãæåÊÐ÷ÏlÝøâÚÜSÖ6×tÏÊкãæåÒçªÝª×ªßôݪèÊÖyÝ

1. A Qt eszköztárából válassza ki a TextEdit eszközt, majd kattintson a MillMainBase párbeszédablakon aszövegdoboz tervezett helyének a környékére. (Az elemek percíz elrendezésével nem kell törődnünk, mert alegvégén a Layout technika segítségével majd szépen elrendezzük az elemeket. )

2. A Properties ablakban a Name mező értéke legyen: text ù åÒÓDÏ�ÓDë�ìú×ûé)ü0ýDÐÚØXá%ýÊÍ�Íhë0ÕÚí�Ö�ܪØÊÏtßöõtÏÚãæåtÐ÷ÏlÝøâÚÜSÖ6×ÊÏtкãæåÒçªÝª×ªßôݪèÚÖ�Ý(Common Widgets) PushButton eszközgomb, majd kattintás a a gomb várható helyére. Properties:

name: endButton pixmap: home.png (vagy akármilyen más kép)

ELTE Informatikai Kar 6. oldal

Page 7: people.inf.elte.hu munkafuzet.pdfElemi alkalmazÆsok fejlesztØse III. Egyablakos Qt alkalmazÆs kØszítØse I. MON3P-QSROTVUXW*YAR0R[Z]\]^*T RA_*`%acb6W d R0T NØzzük meg, hogyan

Elemi alkalmazások fejlesztése III. Egyablakos Qt alkalmazás készítése I.

þÚÿ������ ������ ��)þÒÿ�������������������� !�#"�$��%&'�)(+*$���,�!�&���%.-�(���/(��$��((Display) LCD number eszközgomb Properties:

name: moneyValue numDigits: 9 minimumSize: heigth - 40, fontSize: size - 28

Megjegyzés: Ha azt szeretnénk, hogy az LCD kijelzőnk ne legyen aránytalanul nagy, akkor azendButton és az LCD kijelző közé elhelyezhetünk egy "rugót, távtartót" (spacer) is .

0213��(�45�6����&748�:9�;��<=�>�.1?���;�@�!%&A%@�!�@�)&��B(@�!�C"!DE�B�&A(F�)þ�(G"DE�!<��1. A Shift billentyűt lenyomva tartva jelölje ki az endButton-t, a spacer-t és a moneyValue elemeket, majdadja ki a Layout / Lay Out Verically parancsot. A két elemet körbefoglaló piros keret jelzi az elemek"összetartozását". A Layout/ Break Layout paranccsal bármikor feloldhatja ezt a kapcsolatot. (Érdemesmegkeresni a parancsok mefelelőjét az eszköztárban is.)

2. Most pedig jelölje ki a text szövegdobozt, valamint az előzőekben létrehozott, összartozó piros keretet ésadja ki a Layout/ Lay Out Horizontally parancsot.

HI%���-�%!&J�LKM�GN$<�þ�(��!�/�= �!C"!%@�!�@�O��� ���;PE;%&'�)(+*$���,��!&���%.-�(���/(��ADQ�(Common Widgets) Text Label eszközgomb, majd kattintás a text szövegdoboz alá. Properties:

name: questionLabel text: (üres)hAlign: AlignHCenter vAlign: AlignVCenter frameShape: Box frameShadow: Sunken

0SR!�@/(@&G�B<3�TP��,�!�@ $(.<�����DQ;UV�A������<���WX�!<�<YDQ�>Z)�YDE��*$�

Válaszuk ki a (Containers) ButtonGroup eszközt, és rajzojunk vele a párbeszédablakon a kérdés alá egy, anégy választ körbefogó, hozzávetőlegesen megfelelő méretű téglalapot.

Properties: name: ansGroup title: Kattintson a mefelelő válaszra!

ELTE Informatikai Kar 7. oldal

Page 8: people.inf.elte.hu munkafuzet.pdfElemi alkalmazÆsok fejlesztØse III. Egyablakos Qt alkalmazÆs kØszítØse I. MON3P-QSROTVUXW*YAR0R[Z]\]^*T RA_*`%acb6W d R0T NØzzük meg, hogyan

Elemi alkalmazások fejlesztése III. Egyablakos Qt alkalmazás készítése I.

[$\]\G^,_'`.a�\_cb$d@e/f@_�g�hQiAj�k3f$lEm;honqp^�^YhQr$s

Kattintsunk duplán a Radio Button eszközre, majd rendre egymás után négy kattintással jelöljük ki a négyválasz helyét a keretben. Az Escape billentyűvel "engedjük el" a Radio Button eszközt.

Properties: 1. válasz

name: ans1 text: Első válasz

2. válasz name: ans2 text: Második válaz

3. válasz name: ans3 text: Harmadik válasz

4. válasz name: ans4 text: Negyedik válasz

tQevu�\@r!l�\!g�`_Jjwe/fGx!hQp!^�szy

1. A Shift billentyűt lenyomva tartva válasszuk ki rendre a négy Radio Button elemet, majd adjuk ki aLayout/Lay Out in Grid parancsot (van ilyen gomb is az eszközök között).

2. Kattintsunk a válaszokat tartalmazó keretre, majd ismét adjuk ki a Layout/Lay Out in Grid parancsot. {}|A~I�b\�^5iT\!g��E��a�hQ����u�d@]\!e#x\!g�`_A\)f+�$d�u5�!\_�g�`�l�f���e;f@i!u�f

PushButton eszköz kiválasztása, majd kattintás a válasz blokk alá. Properties:

name: nextButton text: Következő

Helyezzünk el egy vízszintes “távtartót” (spacer) a Következő gomb elé.

{�g�\e;\@�>\i)_�g�`@��\e�uY\@r!l�\!g�`!_'\)f+�$d�u5�!\_Gg�`.l�f���e/f�iAhQr

Kattintson a párbeszédablakra (csak a formra, ne valamelyik elemére), majd adja ki a Layout / Lay OutVertically parancsot, azaz rendezze a párbeszédablak elemeit vertikálisan. �����I�������Q���Q���3�X�v�����3�����Y�E� �E¡��M�£¢,���E�Q¢,���8�����

A Ctrl+T billentyűk leütésével tesztelheti a párbeszédablak "küllemét". Figyelje meg mi történikaz ablak átméretezésekor. A párbeszédablak "Bezárás" gombjával fejezheti be a tesztelést. Szükség eseténbármikor törölhet egy-egy elrendezést (Layout/ Break Layout) és új elrendezést alakíthat ki. �¤��¥w¦�§3¨w��©'�=�ª�M¡�¢,���I�

Ha elégedett a végeredménnyel, akkor mentse el a grafikus felület definícióját tartalmazómillmainbase.ui (ui: user interface) fájlt. Ha a Qt-t a KDevelop-pal együtt szeretné használni, akkor célszerű aKDevelop-pal korábban létrehozott project alá betenni ezt a fájlt. (nálam: .../projects/mill/mill).

ELTE Informatikai Kar 8. oldal

Page 9: people.inf.elte.hu munkafuzet.pdfElemi alkalmazÆsok fejlesztØse III. Egyablakos Qt alkalmazÆs kØszítØse I. MON3P-QSROTVUXW*YAR0R[Z]\]^*T RA_*`%acb6W d R0T NØzzük meg, hogyan
Page 10: people.inf.elte.hu munkafuzet.pdfElemi alkalmazÆsok fejlesztØse III. Egyablakos Qt alkalmazÆs kØszítØse I. MON3P-QSROTVUXW*YAR0R[Z]\]^*T RA_*`%acb6W d R0T NØzzük meg, hogyan

Elemi alkalmazások fejlesztése III. Egyablakos Qt alkalmazás készítése I.

×ÙØXÚÜÛqÝ,Þ�ß=à?áâ×¾ã�ÞäÞ�åqÞYßQà

Készítse el a projekt make fájlját, majd fordítsa és szerkessze össze a projektet:

1. Build/Autoconf and automake2. Build/Configure3. Build/Rebuild

Az első két lépést csak akkor kell végrehajtani, amikor új elemek kerülnek a projektbe.

(Megjegyzés: A KDevelop első verzióinak egyikében (pl. Rad Hat 9 generáló lemez) van eg yhiba.Egy lehetséges javítás: Nyissa meg a projektjéhez tartozó ainclude.m4.in fájlt, és hajtsa végre az alábbi módosítást:

[m4_define([$1], [mm_car($2)])$3[]_mm_foreach([$1] helyett[m4_define([$1], mm_car($2))$3[]_mm_foreach([$1]

)Figyelje meg a fordító/szerkesztő üzeneteit.æ�ç¾çqè�é�è3ê ëqì¾íMî�ì¾í�ê ï!é�ð,è:éòñqï�ó8ô�õ�ï÷öTø,ï�õQùEø5ï�ó8ô�õ�ï

A lefordított programot a Build/Rebuild (Forditás/Végrehajtás - F9) paranccsal futtathatjuk. Megnézhetjük amár működő felhasználói felületet (Radio Button-ok kiválasztása, írás a szövegdobozba, fókusz jelzése, stb), determészetesen más "értelmes" tevékenységet még nem produkálhat a program, hiszen még semmilyen"értelmes" feladattal sem ruháztuk fel. Megnézhetjük a millmainbase.ui forrását. Figyelmes elemzéssel felismerhetjük benne az egyes grafikuselemeket, a hozzájuk rendelt tulajdonságokat (preperties), az elemek elrendezését. Ha ezen a ponton figyelmesen megvizsgáljuk projektünk alkönyvtárában megtalálható fájlokat, akkorészrevehetjük, hogy a millmainbase.ui fájl alapján "valaki" készített egy millmainbase.cpp és egymillmainbase.h fájl is. Ezeket a fájlokat (másszóval a MillMainBase osztályt) a moc (meta object compiler)előfordító készíti, amit a main.cpp forrásban illesztünk a projektbe (main.cpp: #include "millmainbase.h").Természetesen ezt a két fájlt nekünk nem kell - sőt nem szabad - módosítani, de létezésükről jó tudni.

Megjegyzés: Gondolkozzunk el azon, mi lenne, ha módosítgatnánk ezeket a fájlokat. Hiába nyúlunk bele amillmainbase.cpp és millmainbase.h fájlokba, hiszen a projekt újraforditásakor a millmainbase.ui fájl alapjánújból elkészülnek ezek a fájlok, és a módosításnak nyoma sem marad. Ha mindenképpen változtatnunk kell aMillMainBase osztályon, akkor ennek egyik lehetséges módja, hogy ebből az osztályból származtatunk egy újosztályt, és a származtatott osztályban vezetjük be az új elemeket és tulajdonságokat. (Ebből a megfontolásbóladtuk ennek az osztálynak a MillMainBase - BASE!!! - nevet, amelyből szükség esetén származtatni lehet egy újosztályt - MillMain. )

ELTE Informatikai Kar 10. oldal

Page 11: people.inf.elte.hu munkafuzet.pdfElemi alkalmazÆsok fejlesztØse III. Egyablakos Qt alkalmazÆs kØszítØse I. MON3P-QSROTVUXW*YAR0R[Z]\]^*T RA_*`%acb6W d R0T NØzzük meg, hogyan

Elemi alkalmazások fejlesztése III. Egyablakos Qt alkalmazás készítése I.

úQûEü¾üXý5þ!ÿ������ ÿ���ÿ���Mÿ���»ÿ��� ����qü����qÿ3ü1. A Következő gombot választva adjuk fel a a következő kérdést (nextQuestion). Ez a gombot csak jó válasz

esetén lehessen kiválasztani.

2. Egy válasz bejelölése után ellenőrizzük a válasz helyességét (checkAnswer)

3. Az endButton kiválasztásakor számoljuk ki és jelenítsük meg az aktuális nyereményt.

A fentiekben vázolt működéshez a Signal/Slot mechanizmust használva három signal-slot kapcsolatot adunkmeg az alkalmazásunkban. Először megnézzük mik is ezek a kapcsolatok, majd megadjuk ezek technikaikivitelezését.1. kapcsolat:

a szignál küldője (Sender): nextButton a szignál fajtája (Signal) : clicked()

(Ezt a szignált akkor "kürtöli szét a világba" a nextButton objektum, amikor valakirákattintott. )

a szignál fogadására bejelentkező objektum (Receiver) : MillMainBase (vagy this)a szignált kezelő metódus (Slot) : newQuestion()

connect( nextButton, SIGNAL( clicked() ), this, SLOT( newQuestion() ) );

2. kapcsolat:

Sender: ansGroup Signal: clicked(int) Receiver: MillMainBase (vagy this)Slot: checkAnswer(int)

connect( ansGroup, SIGNAL( clicked(int) ), this, SLOT( checkAnswer(int) ) );

3. kapcsolat

Sender: endButton Signal: clicked() Receiver: MillMainBase (vagy this)Slot: endGame()

connect( endButton, SIGNAL( clicked() ), this, SLOT( endGame() ) );

ELTE Informatikai Kar 11. oldal

Page 12: people.inf.elte.hu munkafuzet.pdfElemi alkalmazÆsok fejlesztØse III. Egyablakos Qt alkalmazÆs kØszítØse I. MON3P-QSROTVUXW*YAR0R[Z]\]^*T RA_*`%acb6W d R0T NØzzük meg, hogyan

Elemi alkalmazások fejlesztése III. Egyablakos Qt alkalmazás készítése I.

A fenti kapcsolatok kiépítése a Qt grafikus fejlesztőeszköz alkalmazásával a következőképpen történhet.1. Váltsunk át a Qt-re.

2. A Qt eszköztárából válasszuk ki a Connect Signal/Slots (F3) eszközt.

3. Kattintsunk a Következő (nextButton) gombra, majd az egér bal fülét folyamatosan lenyomva tartva azelőbukkanó összekötő vonal másik végével mutassunk rá a (teljes) párbeszédablakunkra (MillMainBase). Haelég ügyesek voltunk, akkor megjelenik az Edit Connections párbeszédablak. Feltétlenül ellenőrizzük, hogya Signal oldalon a nextButton a Slot oldalon a MillMainBase jelenjen meg.

4. A felkínált szignálok közül válasszuk ki a clicked() szignált.

5. A felkínált slot számunkra nem megfelelő, ezért hozzá kell vennünk a MillMainBase osztályhoz egy újslotot:

Edit Slots/New Function: newQuestion()8. Mostmár ez a slot is szerepel a MillMainBase által felkinált slotok listájában. Kattintsunk a listán erre az új

slotra (newQuestion()), majd kattintsunk az OK gombra.

Ezzel deklaráltuk az első kapcsolatot:

connect( nextButton, SIGNAL( clicked() ), this, SLOT( newQuestion() ) );

Ismételjük meg az 4-8 lépéseket a 2. és a 3. kapcsolatra is. Ügyeljünk arra, hogy a válaszoknál az ansGrouplegyen a sender (ne valamelyik Radio Button). Figyeljük meg, hogy a signál/slot kapcsolat kiépítésekor a signálés a slot paramétereinek meg kell egyezniük. Ha kiadjuk az Edit/Connection parancsot, akkor a View Connection párbeszédablakban megkapjuk a meglévőkapcsolatok listáját, így ellenőrizhetjük/módosíthatjuk munkánk helyességét. (A Qt 3-ban közvetenül ebben atáblában is kiépíthetjük a signal/slot kapcsolatokat.) Ha feltesszük a képernyőre az Object Explorer munkaablakot (Windows/Views/Object Explorer), akkor itt aSource fület kiválasztva a Slots/Public címszó alatt magtaláljuk a most bevezetett slotjainkat. A File/Save all paranccsal mentsük el a módosításokat, majd váltsunk vissza a Kdevelop-ra. A Build/Rebuild paranccsal fordítsuk újra a projektünket. Ha most futtajuk a programot, és rákattintunk a "Következő" gombra, akkor a KDevelop messages ablakában a"MillMainBase::newQuestion(): Not implemented yet!" teljesen logikus üzenetet kapjuk. A rendszer ezzelhozza tudomásunkra, hogy ezt a metódust még nem implementáltuk.

ELTE Informatikai Kar 12. oldal

Page 13: people.inf.elte.hu munkafuzet.pdfElemi alkalmazÆsok fejlesztØse III. Egyablakos Qt alkalmazÆs kØszítØse I. MON3P-QSROTVUXW*YAR0R[Z]\]^*T RA_*`%acb6W d R0T NØzzük meg, hogyan

Elemi alkalmazások fejlesztése III. Egyablakos Qt alkalmazás készítése I.

Ha a kapcsolatok meghatározása után bepillantunk a millmainbase.cpp forrásba, akkor ott megtalálhatjuk akapcsolatot deklaráló connect függvényeket.

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

Természetesen a milmainbase.ui fájlunk is kibővült egy, a kapcsolatokat leiró blokkal.

<connection> itt van a kapcsolatot leíró információ </connection>

Ha megnézzük a millmainbase.h header fájlt, akkor azt látjuk, hogy a most bevezetett slotok virtuálisfüggvények. Ez lehetővé teszi számunkra, hogy a későbbiekben egy ebből származtatott osztálybanátdefiniáljuk ezeket a függvényeket.

ELTE Informatikai Kar 13. oldal

Page 14: people.inf.elte.hu munkafuzet.pdfElemi alkalmazÆsok fejlesztØse III. Egyablakos Qt alkalmazÆs kØszítØse I. MON3P-QSROTVUXW*YAR0R[Z]\]^*T RA_*`%acb6W d R0T NØzzük meg, hogyan

Elemi alkalmazások fejlesztése III. Egyablakos Qt alkalmazás készítése I.

���������������������! �"$#%����"&��#'�(�����)+*�,

#ifndef MILLMAINBASE_H #define MILLMAINBASE_H #include <qvariant.h> #include <qwidget.h>

class QVBoxLayout; class QHBoxLayout; class QGridLayout; class QButtonGroup; class QLCDNumber; class QLabel; class QPushButton; class QRadioButton; class QTextEdit; class MillMainBase : public QWidget { Q_OBJECT public: MillMainBase( QWidget* parent = 0, const char* name = 0, WFlags fl = 0 ); ~MillMainBase(); QTextEdit* text; QPushButton* endButton; QLCDNumber* moneyValue; QLabel* TextLabel1; QButtonGroup* ansGroup; QRadioButton* ans4; QRadioButton* ans3; QRadioButton* ans2; QRadioButton* ans1; QPushButton* nextButton; public slots: virtual void checkAnswer(int); virtual void newQuestion(); virtual void endGame(); protected: QVBoxLayout* MillMainBaseLayout; QHBoxLayout* Layout17; QVBoxLayout* Layout16; QGridLayout* ansGroupLayout; QGridLayout* Layout7; }; #endif // MILLMAINBASE_H

- Saját jegyzeteim

ELTE Informatikai Kar 14. oldal

Page 15: people.inf.elte.hu munkafuzet.pdfElemi alkalmazÆsok fejlesztØse III. Egyablakos Qt alkalmazÆs kØszítØse I. MON3P-QSROTVUXW*YAR0R[Z]\]^*T RA_*`%acb6W d R0T NØzzük meg, hogyan

Elemi alkalmazások fejlesztése III. Egyablakos Qt alkalmazás készítése I.

.�/�0�0�1�2�3�/�0�0�4!5�6$7%2�2�6&4�78�9�4�3�:+;=<?>�>

#include "millmainbase.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> #include <qtooltip.h> #include <qwhatsthis.h> #include <qimage.h> #include <qpixmap.h>

A forráskódból – a könnyebbáttekinthetőség kedvéért – alayout-ra vonatkozó sorokatelhagytuk.

static const char* const image0_data[] = { "40 40 15 1", . . .}

Itt volt az alkalmazásba beépítettkép kódja, de a könnyebbáttekinthetőség kedvéértelhagytuk.

MillMainBase::MillMainBase( QWidget* parent, const char* name, WFlags fl ) : QWidget( parent, name, fl ) { QPixmap image0( ( const char** ) image0_data ); if ( !name )

setName( "MillMainBase" ); resize( 342, 317 ); setCaption( trUtf8( "Legyen Ön is milliomos" ) ); MillMainBaseLayout = new QVBoxLayout( this, 11, 6, "MillMainBaseLayout"); text = new QTextEdit( this, "text" );

@ Saját jegyzeteim

ELTE Informatikai Kar 15. oldal

Page 16: people.inf.elte.hu munkafuzet.pdfElemi alkalmazÆsok fejlesztØse III. Egyablakos Qt alkalmazÆs kØszítØse I. MON3P-QSROTVUXW*YAR0R[Z]\]^*T RA_*`%acb6W d R0T NØzzük meg, hogyan

Elemi alkalmazások fejlesztése III. Egyablakos Qt alkalmazás készítése I.

endButton = new QPushButton( this, "endButton" ); endButton->setText( trUtf8( "" ) ); endButton->setPixmap( image0 ); Layout16->addWidget( endButton ); QSpacerItem* spacer = new QSpacerItem( 20, 20, QSizePolicy::Minimum, QSizePolicy::Expanding );

moneyValue = new QLCDNumber( this, "moneyValue" ); moneyValue->setMinimumSize( QSize( 0, 40 ) ); QFont moneyValue_font( moneyValue->font() ); moneyValue_font.setFamily( "Helvetica [Greek]" ); moneyValue_font.setPointSize( 28 ); moneyValue->setFont( moneyValue_font ); moneyValue->setNumDigits( 9 ); TextLabel1 = new QLabel( this, "TextLabel1" ); TextLabel1->setFrameShape( QLabel::Box ); TextLabel1->setFrameShadow( QLabel::Sunken ); TextLabel1->setText( trUtf8( "The question" ) ); TextLabel1->setAlignment( int( QLabel::AlignCenter ) );

A Saját jegyzeteim

ansGroup = new QButtonGroup( this, "ansGroup" ); ansGroup->setTitle( trUtf8( "Answers" ) );

ans4 = new QRadioButton( ansGroup, "ans4" ); ans4->setText( trUtf8( "4th answer" ) ); ans3 = new QRadioButton( ansGroup, "ans3" ); ans3->setText( trUtf8( "3rd answer" ) ); ans2 = new QRadioButton( ansGroup, "ans2" ); ans2->setText( trUtf8( "2nd answer" ) ); ans1 = new QRadioButton( ansGroup, "ans1" ); ans1->setText( trUtf8( "1st answer" ) );

B Saját jegyzeteim

nextButton = new QPushButton( this, "nextButton" ); nextButton->setText( trUtf8( "Next question" ) );

C

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

D Saját jegyzeteim

ELTE Informatikai Kar 16. oldal

Page 17: people.inf.elte.hu munkafuzet.pdfElemi alkalmazÆsok fejlesztØse III. Egyablakos Qt alkalmazÆs kØszítØse I. MON3P-QSROTVUXW*YAR0R[Z]\]^*T RA_*`%acb6W d R0T NØzzük meg, hogyan

Elemi alkalmazások fejlesztése III. Egyablakos Qt alkalmazás készítése I.

* * Destroys the object and frees any allocated resources */ MillMainBase::~MillMainBase() { // no need to delete child widgets, Qt does it all for us }

E Saját jegyzeteim

void MillMainBase::checkAnswer(int) { qWarning( "MillMainBase::checkAnswer(int): Not implemented yet!" ); } void MillMainBase::newQuestion() { qWarning( "MillMainBase::newQuestion(): Not implemented yet!" ); } void MillMainBase::endGame() { qWarning( "MillMainBase::endGame(): Not implemented yet!" ); }

Első kapcsolat

Második kapcsolat

Harmadik kapcsolat

#include "millmainbase.moc" F

GIH�JLKNMPO�QRORS+T�U�VWQWSXTZY[O�S+U\UPMX]�^A Qt3 többfélleképpen is készíthetünk alkalmazásokat. A Qt3 biztosítja azokat a parancssori ezközöket,amelyekkel egyéb fejlesztőeszköz használata nélkül, csak a Qt3-ra támaszkodva állítsuk össze projektünket.Ha Ön szeretné ezt a technikát is kipróbálni, akkor a következőt kell tennie:Hozzon létre a projekt számára egy könyvtárat. (pl. mill)Készítse el, majd helyezze el az alábbi forrásfájlokat a projekt könyvtárába.

main.cppmillmain.hmillmain.cpp

Hajtsa végre az alábbiakat:Nyisson meg egy terminálablakot, majd menjen át a projekt könyvtárábaAdja ki a “qmake -project” parancsot. (ezzel elkészíthetjük a könyvtárban található elemektfelhasználva a projektfájlt: mill.pro)Adja ki a “qmake mill.pro” parancsot.Adja ki a “make” parancsot.Javítsa ki az esetleges gépelési hibákat.Futtassa a programot: “./mill”

ELTE Informatikai Kar 17. oldal

Page 18: people.inf.elte.hu munkafuzet.pdfElemi alkalmazÆsok fejlesztØse III. Egyablakos Qt alkalmazÆs kØszítØse I. MON3P-QSROTVUXW*YAR0R[Z]\]^*T RA_*`%acb6W d R0T NØzzük meg, hogyan

Elemi alkalmazások fejlesztése III. Egyablakos Qt alkalmazás készítése I.

_a`�b�bdc�e+fgb�`�hIb�iRjk`�lmi�noi�plPiRjqi�n?c�esrtlRuvnvwyx�zPp�lRu+e�n�{W|Wu+e�uP}~z+n�������v�����+�

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

���������������+���#ifndef MILLMAIN_H#define MILLMAIN_H

#include <qwidget.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);

QTextEdit* text; QPushButton* endButton; QLCDNumber* moneyValue; QLabel* questionLabel; QPushButton* nextButton; QButtonGroup* ansGroup; QRadioButton* ans1; QRadioButton* ans2; QRadioButton* ans3; QRadioButton* ans4;

public slots: virtual void newQuestion(); virtual void checkAnswer(int); virtual void endGame();};

#endif

ELTE Informatikai Kar 18. oldal

Page 19: people.inf.elte.hu munkafuzet.pdfElemi alkalmazÆsok fejlesztØse III. Egyablakos Qt alkalmazÆs kØszítØse I. MON3P-QSROTVUXW*YAR0R[Z]\]^*T RA_*`%acb6W d R0T NØzzük meg, hogyan

Elemi alkalmazások fejlesztése III. Egyablakos Qt alkalmazás készítése I.

���������������+�����+�#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" ); setGeometry (100,100,300,200); 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 ); ans1 = new QRadioButton( ansGroup, "ans1" ); ans2 = new QRadioButton( ansGroup, "ans2" ); ans3 = new QRadioButton( ansGroup, "ans3" ); ans4 = new QRadioButton( ansGroup, "ans4" ); ansGroup->setTitle( tr("Kattintson a megfelelo valaszra!"));

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

ELTE Informatikai Kar 19. oldal

Page 20: people.inf.elte.hu munkafuzet.pdfElemi alkalmazÆsok fejlesztØse III. Egyablakos Qt alkalmazÆs kØszítØse I. MON3P-QSROTVUXW*YAR0R[Z]\]^*T RA_*`%acb6W d R0T NØzzük meg, hogyan

Elemi alkalmazások fejlesztése III. Egyablakos Qt alkalmazás készítése I.

QHBoxLayout *bottomLayout = new QHBoxLayout; bottomLayout->addStretch(1); bottomLayout->addWidget(nextButton); QVBoxLayout *mainLayout = new QVBoxLayout(this); mainLayout->setMargin(11); mainLayout->setSpacing(6); mainLayout->addLayout(topLayout); mainLayout->addWidget(questionLabel); mainLayout->addWidget(ansGroup); mainLayout->addLayout(bottomLayout);

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

}

//Slotsvoid 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" );}

Megjegyzés: Ez a kód csak a “Legyen Ön is milliomos I” - hez kapscolódó részeket tartalmazza.

�a�R�W���W�W +¡�¢�£P¤¥

A forrásprogram letölthető a http:://people.inf.elte.hu/nacsa/ címről.

ELTE Informatikai Kar 20. oldal