Začíname KProgramovať - IV

21. 2. 2003 | Ondrej Krsko | Programování | 10681×

Vytvoření aplikace pomocí Qt Designeru aneb Trollové pomáhají.

KDevelop

Predpokladám, že KDevelop a QtDesigner máte pripravený a teda môžeme rovno začať. Ja ho používam v slovenčine, používam teda aj slovenské názvy položiek v menu, atď... Môžete aspoň trénovať preklad zo slovenčiny do češtiny a následne do angličtiny .

Najprv si ukážeme ako sa dá na pár kliknutí vytvoriť základná aplikácia, ktorú sme doteraz vytvárali ručne. Spustite KDevelop, v menu vyberte "Projekt", "Nový". Zobrazí sa sprievodca vytvorením aplikácie. V prvom kroku vyberte "KDE, KDE Mini". Ďalej zadajte názov projektu (ja som ho pomenoval serial1), jeho umiestnenie a tiež aké súbory chcete automaticky vytvoriť (stačí, keď necháte všetko zaškrtnuté). Podporu pre CVS v ďalšom kroku nechajte vypnutú. Potom si vytvorte hlavičkovú šablónu pre *.h a *.cpp súbory. Nakoniec kliknite na vytvoriť. Po skončení sa zobrazí "READY" a môžete kliknúť na tlačítko "Koniec".

Sprievodca vytvoril všetky potrebné súbory (je ich toľko, že sa Vám bude zdať, že niektoré sú dokonca aj zbytočné). Nás budú zatiaľ zaujímať najmä tri súbory: main.cpp, serial1.cpp a serial1.h. Ak ste pomenovali projekt inak, názvy sa zhodovať nebudú. Vo vygenerovaných súboroch by nás už nemalo nič prekvapiť, všetkými potrebnými vecami sme sa už zaoberali v predchádzajúcich častiach. Skúste si prezrieť ich obsah.

Práca s KDevelop-om je naozaj jednoduchá a robí toho veľa za nás. Stlačením klávesu F9 sa spustí kompilácia a po nej aj náš práve vytvorený program. Ostatné dôležité funkcie súvisiace s kompiláciou a spúšťaním nájdete v menu "Kompilovať".

Trollovia pomáhajú

V menu "Súbor" vyberte "Nový". Zobrazí sa dialógové okno, kde v záložke "Všeobecné" vyberte "Súbor pre Qt Designer *.ui". Zadajte jeho meno (ja som použil serial1dlg.ui) a takisto nechajte zaškrtnutý checkbox "pridať do projektu". Potom sa Vás KDevelop opýta, či chcete otvoriť súbor ako ASCII. Kliknite na "Nie", vďaka čomu nebudete serial1dlg.ui prezerať ako zdrojový kód. Spustí sa Vám Qt Designer, kde môžete vizuálne navrhnúť správanie sa dialógu. Qt Designer je produktom firmy Trolltech (rovnako ako celá knižnica Qt).

Po spustení Qt Designera sa zobrazí dialóg. Vyberte template, ktorý bude najvhodnejší pre vytvorenie nového formulára. Ja som si zvolil Dialog. Na pracovnej ploche programu by sa mal objaviť prázdny formulár. Pravdepodobne v pravej časti nájdete nástroj nazvaný "Property Editor/Signal Handlers". Ak ste niekedy robili v Delphi, Kylixe alebo Visual Basicu, bude Vám asi veľmi známy. Môžete tu nastavovať vlastnosti/signály prvku, ktorý máte vybratý. Teda napríklad môžete nastaviť titulok okna.

Horná časť Qt Designera obsahuje ovládacie prvky, ktoré možno vložiť na formulár. V ľavej časti nájdete File Overview a Object Explorer. Tento nástroj zobrazuje vzťahy medzi ovládacími prvkami v stromovej štruktúre.

Hra na architekta

Pred návrhom formuláru by ste mali mať jasnú predstavu, ako bude formulár vyzerať. My si vytvoríme jednoduchý dialóg s pár ovládacími prvkami. Nebude o nič zložitejší ako tie, ktoré sme robili doteraz. Na obrázku nižšie môžete vidieť formulár s naukladanými ovládacími prvkami.

Na formulári nájdete viacero rôznych prvkov. Program bude reagovať na kliknutie na tlačítko, po ktorom pridá do prvku KListView obsah KLineEditu a vybraný prvok z KComboBoxu. Po kliknutí na druhé tlačítko sa dialóg zatvorí. Toto všetko by sme zvládli určite vytvoriť aj doteraz, určite nie tak pohodlne a jednoducho, ako to spravíme teraz.

Z menu "Tools", "Display" vyberte položku "QLabel" a kliknite niekde na formulár. Práve ste "napísali" takýto kód :

1. #include <klineedit.h>
2. ...
3. KLineEdit *lineEdit;
4. ...
5. lineEdit = new KLineEdit("",this);
6. lineEdit->setGeometry(10,55,170,25);

Nemusíte sa teraz zaujímať o súradnice, pracne ich "vylaďovať", ale jednoducho myšou môžete posunúť prvok tam, kam treba. Na presnejšie doladenie slúži kombinácia klávesov Ctrl+Šípka. Môžete aj zadať súradnice v Property Editore, pričom zmena sa ihneď premietne aj do výzoru dialógu.

Ďalej uložte na formulár ešte tieto ovládacie prvky: QGroupBox, KListView a dvakrát KPushButton tak, ako vidíte na obrázku. Teraz do QGroupBox vložte prvky: dvakrát QLabel, KLineEdit a KComboBox. Stromová štruktúra zobrazovaná v nástroji Object Explorer by mala vyzerať takto:

Teraz môžeme nastaviť vlastnosti ovládacích prvkov, teda zmeniť názov okna, napísať TextLabel1, TextLabel2, TextLabel3, názvy tlačítiek a pomenovanie pre GroupBox1. Vyberte ľubovoľný prvok a v Property Editore nájdete príslušnú vlastnosť. Nepomýľte si "name" a "caption". Vlastnosť "name" je názov inštancie, zatiaľčo "caption" je titulok.

Správca rozloženia

Ešte stále náš dialóg nie je dokonalý. Nevyriešil totižto problémy, ktoré som spomínal v minulom dieli. Súradnice sú zadané napevno, takže možno vyzerá dialóg normálne, v prípade iného nastavenia to už tak byť nemusí. Pozrieme sa teda, aké možnosti nám ponúka Qt Designer.

Qt ponúka špeciálne prvky nazvané "spacer". Vhodný slovenský ekvivalent mi nenapadá, preto budem používať anglický originál. Spacere sa správajú ako pružiny, ktoré tlačia alebo ťahajú okolité ovládacie prvky. Základnú vec, ktorú si treba pri používaní spacerov zapamätať je, že najprv začíname správne umiestňovať prvky v horizontálnom smere a potom vo vertikálnom.

Začnem s umiestnením prvku TextLabel1. Pretože ho chcem mať v strede okna aj v prípade, že užívateľ zmení veľkosť okna, musím okolo neho vložiť dve "pružiny". V menu "Layout" vyberte "Add Spacer". Kliknite na ľavo od TextLabel1. Objaví sa menu, kde vyberiete smer, ktorým má byť spacer orientovaný, zvoľte horizontálne. To isté urobte aj na pravej strane TextLabelu.

Potom pridajte spacer aj naľavo od tlačítka "Add". Ak ste sa stratili a neviete čo vlastne urobiť, všetko pochopíte z obrázku:

Teraz máme spacere, ktoré vyplnia prázdne miesto. Potrebujem ešte pridať správcov rozloženia. Tie zabezpečia automatické zmeny veľkosti a polohy prvkov pri zmene veľkosti okna.

Na správne umiestnenie prvku TextLabel1 použijeme horizontálneho správcu rozloženia. Správca bude obsahovať tieto prvky: Spacer, Label a Spacer. Označte všetky tri prvky naraz. (Držte Shift a kliknite na všetky tri). V menu "Layout" vyberte "Lay Out Horizontally". Objaví sa červený obdĺžnik, ktorý orámuje všetky tri objekty. Ak treba, upravte ešte veľkosť tohoto obdĺžnika. Výsledok by mal vyzerať ako na tomto obrázku. Zopakujte teraz tento postup pre TextLabel2 a TextLabel3 s použitím vertikálneho správcu rozloženia a tiež pre KLineEdit1 a KComboBox1. Na dolný spacer a tlačítka použije horizontálne rozloženie.

Na dokončenie rozloženia potrebujeme vytvoriť ešte jedného správcu rozloženia. Ten bude spravovať ostatné. Použijeme Grid Layout. Kliknite pravým tlačítkom na formulár a z menu vyberte "Lay Out in a Grid" (kliknúť musíte priamo na formulár, teda mimo akýchkoľvek ovládacích prvkov).

Opäť signály a sloty

Pýtate sa prečo sa k nim opäť vraciam? Pretože sa s nimi dá veľmi jednoducho pracovať v programe Qt Designer. Na vytvorenie spojenia signál-slot sa používa nástroj pomenovaný "Connect Signals/Slots". Nájdete ho v menu Tools alebo po stlačení klávesu F3. Poďme teraz vytvoriť reakciu na kliknutie na tlačítko "Add". Stlačte F3, kliknite na KPushButton1 a ťahajte myš nad formulár (teda mimo akéhokoľvek ovládacie prvku). Po uvolnení ľavého tlačítka myši sa zobrazí dialóg, kde možno editovať spojenia.

Spomedzi signálov vyberte clicked(). V pravej časti je ponuka existujúcich slotov. Nám ani jeden nevyhovuje a preto si musíme vytvoriť nový. Po kliknutí na tlačítko "Edit Slots" sa zobrazí ďalšie dialógové okno. V ňom kliknite na "New Slot" a vyplňte názov. Potvrďte zadané údaje.

Teraz v dialógu "Edit Connections" stačí vybrať slotAddDate() spomedzi slotov. Medzi pripojeniami sa objaví nový záznam. Potvrďte aj tieto údaje. Vytvoríme ešte spojenie medzi kliknutím na tlačítko "Close" a slotom close(). Nemusíte vytvárať nový slot, pretože close() už existuje. Ostáva nám ešte implementácia metódy slotAddDate(), inak sme už so slotmi skončili.

Teraz uložíme formulár (ako serial1dlg.ui) na to isté miesto, ako ste zadávali v KDevelop-e. A môžeme vypnúť Qt Designer a vrátiť sa konečne k programovaniu .

Konečne programovanie...

Teraz nahradíme predka hlavného okna nami vytvoreným formulárom. Ak by ste chceli vytvoriť nové okno, ktoré vyzerá tak, ako to navrhnuté, a nie upravovať už existujúce, postupovali by ste teraz trochu inak. Vytvorili by ste novú triedu (v ľavej časti programu KDevelop by ste vybrali zoznam tried a pomocou pravého tlačítka zadali "Nová trieda". Ako základnú triedu by ste uviedli názov formuláru a takisto treba zaškrtnúť políčko "Generovať potomka triedy QWidget") V závislosti od toho, ako ste formulár pomenovali musíte upraviť serial1.h a serial1.cpp. U mňa sa volá Serial1Dlg. Otvorte serial1.h a doplňte najprv potrebné hlavičkové súbory:

1. #include <kapp.h>
2. #include <qwidget.h>
3. #include "serial1dlg.h"
4. #include <qcombobox.h>
5. #include <kcombobox.h>
6. #include <klistview.h>
7. #include <klineedit.h>
8.  
9. class Serial1 : public QWidget {

Potom nahraďte v riadku číslo 7 predka QWidget za Serial1Dlg. Zameniť QWidget za naše okno musíte aj v súbore serial1.cpp v riadku:

1. Serial1::Serial1(QWidget *parent, const char *name) : Serial1Dlg(parent, name)

Po týchto úpravách by ste mali byť schopný program skompilovať a spustiť. Malo by fungovať všetko okrem tlačítka "Add". Po kliknutí na neho by sa malo na štandardnom výstupe pre chyby zobraziť Serial1Dlg::slotAddData(): Not implemented yet!. Teda musíme ešte dokončiť obsluhu kliknutia. Do serial1.h pridajte riadky:

1. public slots:
2. virtual void slotAddData();

A do serial1.cpp pridajte novú metódu:

1. void Serial1::slotAddData()
2. {
3. QListViewItem *element;
4. element = new QListViewItem(KListView1, KLineEdit1->text(), KComboBox1->currentText());
5. }

Program môžete skompilovať. Po spustení by mal vyzerať takto:

Záver

Dnes sme teda prešli postupne všetkým, čo sme sa naučili doteraz. Použili sme ale KDevelop a najmä Qt Designer, ktoré dokážu prácu veľmi uľahčiť. Možno ste sa párkrát stratili a nevedeli ste, že čo vlastne treba robiť. Buďte si ale istý, že postupne si zvyknete a bez týchto dvoch programov už nebudete chcieť robiť Ak by sa Vám niečo nepodarilo, stiahnite si celý program (677 kB) a porovnajte, čo robíte zle. V KDevelope otvoríte celý projekt pomocou súboru serial1.kdevprj.

Související články

Začíname KProgramovať - I
Začíname KProgramovať - II
Začíname KProgramovať - III

Odkazy a zdroje

KDevelop
Qt Designer

       

Komentáře

[FFirewall]

Potreboval bych kompletni dokumentaci k tridam Qt. User's guide, a dalsi guide. Na KDevelop.org je zrejme kompletni dokumentace. Ovsem v HTML formatu. Ja bych ji potreboval nejlepe v PDF ci SXW nebo v jinem "doc" formatu.

Muzete mi prosim nekdo napsat, zdali kompletni "qt" dokumentace nekde existuje, a je pristupna ke stazeni?

Taky by mi bodnul tip na knizni vydani nejake dokumentace o "qt".

Diky...

[Hlipa]

No Troll Tech prodava Kit s CD a dokumentaci, ale tusim, ze bohuzel nejde koupit samostatne bez licenete :(. Jinak help je soucasti instalace (RedHatu 7.3), kde je jednak v HTML a pak jeste primo od TT je tam prohlizec, ale nevim jestli to neni jen okno zobrazujici nakonec taky HTML.

[Jan Molic]

Dekuji za tento serial, velmi mi ulehcuje uceni se v kde Mnoho lidi (vcetne me) by rado kprogramovalo, ale nemaji cas slozite zjistovat zakladni veci. Takovahle polopaticka "nalejvarna" je skvela moznost.

[jano_666]

nazdar, tiez sa mi clanky velmi pacia... nemam rad hladanie rozhadzanych informacii z roznych zdrojov. tu je to vsetko pekne pokope a jednoducho napisane. majte sa... p.s. co tak urobit na abclinuxu nejaku sutaz v programovani pre KDE ? mozno by vznikol zaujimavy open-source projekt, ktory by niesol meno po AbcLinuxe a mali by ste fajn reklamu napriklad nejaku jednoduchu hru, alebo akukolvek iny program, pricom vytaz by vyhral nejake vase tricka... napr KAbcMines

[Jan Molic]

Jeste by me (a myslim i jine) zajimalo, jakym zpusobem lze portovat aplikace napsane v qt (ci v kde?) treba do windows. Pokud je mozne psat v linuxu aplikace pro wokna, je to obrovska moznost. P.S. pro autora: Jako jeden z dalsich ukazkovych programu by bylo zajimave propojeni se shellem - udelat jednoduche gui pro nejaky konsolovy program, ktery ze stdin reaguje na nektere klavesy, atd.

[L.Lunak]

> Portovani Qt a KDE apps do Windows. KDE aplikace jsou psane pro Unixy, a tak do Windows jen tak portovat nepujdou. Qt aplikace, pokud samy nepouzivaji neco OS-specifickeho, by AFAIK mely jit "portovat" zkratka tim, ze se znovu prelozi pro ten jiny OS. > Propojeni se shellem To IMHO neni zrovna nejlepsi napad. Jestli tohle je o programovani pro KDE, k cemu bude dobry priklad, ktery z podstatne casti bude delat veci, ktere specificky s KDE nijak zvlast nesouvisi (parsovani textu ze stdout konsolove aplikace, atd.)?

[Abraxis]

No, co se tyka tech multiplatformnich aplikaci - pouzivam treba ICQ klienta SIM, ktery je napsany v QTecku a "vypada" uplne stejne pod Xkama i Winama. A to umi takove "silene" veci, jako transparentni a/nebo ontop okna a skiny, takze asi to (s tim prekladem) nebude nic tak hroznyho => proboha at uz nekdo napise PORADNY ucto i pod Linux (komercne samozrejme - bez podpory je to na houby!) ;)

[Tomas Knaifl]

komercni ucto pro linux (cesky) jsem asi pred pul rokem nekde zahledl.. ale zaboha si nevzpomenu, kde ... ale bylo v QT :))

[Milos]

Me se clanek (clanky) taky moc libi. Ja bych se zase uvital nejaky clanek o QT + Kdevelop + databaze. Jinak ucetnictvi je tady: http://www.xtronic.net/

[FFirewall]

Taky si myslim, ze by nebylo vhodne nejak do toho plest konzoli.

Tem, kteri znaji Windows architekturu skoro nazpamet (MFC/Win32API, Doc/View architecture, COM+ a buh vi co jeste Microsoft vymysli, tedy VisualC++) tento clanek a jemu podobne chybi. Myslim, ze autor si to uvedomil, a jsem rad, ze se nam windowsakum snazi priblizit "VisualC++ resource utilities" pod Linuxem.

Jiz delsi dobu uvazuju nad "QT". Prece jen u C++ je prechod na jinou platformu hlavne zalezitosti ucit se nove knihovny (na rozdil od vyssich/omezenych programovacich jazyku jako treba Java ci VisualBasic a dalsi). V QT zacinam citit tu multiplatformni podporu. Proto by kazdeho takovehoto nadsence zajimaly hlavne zakladni veci, jako je primitivni vytvareni woken za pomoci ceho... Takze jsem rad, ze jsem takovyto clanek tady nasel.

V dnesni dobe jde nejcasteji o vyvoj tzv. aplikaci, tzn. woken (GUI). To je zaklad pro predstaveni funkcnosti nove aplikace uzivateli, ktereho musite presvedcit o kvalite vasi aplikace. Konzolim uz davno odzvonilo. Ano, Linux sice stale neco takoveho podporuje (coz nevidim jako problem), ale je to uz prezitek, kterym normalniho uzivatele nenadchnete, a uz vubec ne pod Linuxem.

Takze k tomuto clanku: diky za vysvetlovani, a hlavne dalsi pokracovani tohoto serialu.

Chtelo by to najit tu dokumentaci ke knihovnam (tedy ted Qt). Nejlepe ve formatu PDF ci SXW. Opravdu existuje jen v HTML?

[mato]

cafte, mam takyto problem: ked chcem v kdevelope vytovorit novy projekt a na konci sprievodcu novym projektom kliknem na create tak mi vypise nasledujucu hlasku: configure: error: Qt (>= Qt 3.0.2) (library qt-mt) not found. Please check your installation! For more details about this problem, look at the end of config.log. Make sure that you have compiled Qt with thread support! warning: Serial1 inherits unknown class 'QWidget' QWidget hasn't a reference. at /usr/share/kdoc/kdocHTMLutil.pm line 576, line 39. QWidget hasn't a reference. at /usr/share/kdoc/kdocHTMLutil.pm line 576, line 39. pritom som qt kniznicu aj nanovo instaloval. neviete mi poradit co to znamena. Mam Mandrake 8.2, KDE3, QT2 aj QT3. dik za radu.

[Lisak.petrik]

Dobry den pri tvorbe noveho projektu pro KDE dopadnu v KDEVELOPU takto

checking for C compiler default output file name... b.out checking whether the C compiler works... configure: error: cannot run C compiled programs. If you meant to cross compile, use `--host'. See `config.log' for more details. *** failed ***

Neporadi nekdo, uz se mi i stalo, ze to probehlo normalne a pak zas na x pokusu nic