.Portál AbcLinuxu, 25. dubna 2024 04:16
Vytvoření aplikace pomocí Qt Designeru aneb Trollové pomáhají.
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ť".
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.
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 :
#include <klineedit.h>...KLineEdit *lineEdit;...lineEdit = new KLineEdit("",this);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.
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).
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 .
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:
#include <kapp.h>#include <qwidget.h>#include "serial1dlg.h"#include <qcombobox.h>#include <kcombobox.h>#include <klistview.h>#include <klineedit.h>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:
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:
public slots:virtual void slotAddData();A do serial1.cpp pridajte novú metódu:
void Serial1::slotAddData(){QListViewItem *element;element = new
QListViewItem(KListView1, KLineEdit1->text(),
KComboBox1->currentText());}Program môžete skompilovať. Po spustení by mal vyzerať takto:
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.
ISSN 1214-1267, (c) 1999-2007 Stickfish s.r.o.