Grafické programy v Qt 4 - 4 (Qt Creator podruhé)

6. 4. 2009 | David Watzke

Články - Grafické programy v Qt 4 - 4 (Qt Creator podruhé)  

V dnešním díle si ukážeme, jak na vlastní widgety, signály a sloty v Qt Designeru. Kromě toho se naučíme přidat našim programům tray ikonu a používat v nich drag & drop.

Vlastní widgety v Qt Designeru

Qt Designer nabízí vložení několika základních widgetů, ale co když si vytvoříme vlastní? Řekněme, že máme objekt Button založený na QPushButton – třeba tlačítko, které má reimplementované některé chráněné virtuální metody, jak jsme si ukazovali už v prvním díle – a teď jej chceme přidat do návrhu GUI.

Klikneme pravým tlačítkem myši do navrženého okna a poté na "Promoted widgets". Vyskočí (zatím) prázdný seznam upravených widgetů. U "Base class name" zvolte ze seznamu třídu, na které je váš widget založen, v tomto případě tedy QPushButton. Do "Promoted class name" pak přijde název vašeho objektu, což je Button. Automaticky se doplnil název hlavičkového souboru, který můžete v případě potřeby upravit. Asi není třeba zdůrazňovat, že vybraný hlavičkový soubor musí existovat a obsahovat třídu se zadaným názvem. Teď už stačí zmáčknout "Add" pro přidání a dialog zavřít.

Nyní si do okna přetáhněte Push Button, klikněte na něj pravým tlačítkem myši a zvolte z nabídky "Promote to..." položku Button.

A to je vše, tímto krokem jste klasické tlačítko "povýšili" (promote) na váš objekt "Button".

Signály a sloty v Qt Designeru

Signály a sloty mezi widgety lze propojovat rovnou v Designeru a je to velmi snadné, takže se podíváme, jak na to.

Nejjednodušší případ nastane, když chceme propojit dva standardní widgety. Přidejme si do návrhu Horizontal Slider (QSlider, horizontální posuvník) a Spin Box (QSpinBox, číselník). Přepneme se pomocí F4 do režimu editace signálů/slotů.

A nyní je propojíme tak, aby se změna hodnoty na jednom widgetu projevila i na tom druhém. Chytneme posuvník a přetáhneme jej na číselník.

Poté, co jsme pustili tlačítko myši, vyskočil dialog, ve kterém nastavíme, co vlastně chceme propojit.

Stejně pak propojíme i signál číselníku se slotem posuvníku, čímž vznikne toto spojení:

Pokud byste v Designeru chtěli propojit signály a sloty vlastních widgetů, tak vězte, že mu o nich nejdřív musíte dát vědět. Například kdyby výše uvedené tlačítko Button mělo signál exploded(int,int), tak při propojování s jiným widgetem stisknete tlačítko "Edit..." a signál si do seznamu přidáte:

Drag & drop

Drag & drop (v doslovném překladu "táhni a pusť"), když je řeč o grafickém uživatelském rozhraní (GUI), odkazuje na akci, při které uživatel chytí nějaký widget kurzorem myši (například položku seznamu) a přetáhne jej na jiný widget (například jiný seznam) nebo na jiné místo ve widgetu původním. Například když v grafickém správci souborů přesouváte soubor tažením do jiného adresáře.

Nyní si ukážeme, jak pro něco takového přidat podporu do naší Qt 4 aplikace. Aby toto mohlo fungovat, je třeba mít implementovaný drag na widgetu, ze kterého se chceme přetahovat (což je v následující ukázce MyDirView) a drop na widgetu, na který tažená data pouštíme (MyListWidget).

mydirview.h

#ifndef MYDIRVIEW_H
#define MYDIRVIEW_H

#include <QTreeView>

class MyDirView : public QTreeView
{
public:
	MyDirView(QWidget* = 0);

private:
	QPoint dragStartPosition;

protected:
	void mousePressEvent(QMouseEvent*);
	void mouseMoveEvent(QMouseEvent*);
};

#endif // MYDIRVIEW_H

mydirview.cpp: Musíme widgetu implementovat drag, což obvykle obnáší minimálně 2 virtuální metody: mousePressEvent() a mouseMoveEvent().

#include "mydirview.h"

#include <QApplication>
#include <QDirModel>
#include <QDrag>
#include <QMimeData>
#include <QMouseEvent>

MyDirView::MyDirView(QWidget* parent) : QTreeView(parent)
{
	// zobrazí adresářovou strukturu
	setModel(new QDirModel(this));
}

// událost stisknutí tlačítka myši
void MyDirView::mousePressEvent(QMouseEvent* event)
{
	// nejdřív zavoláme std. implementaci této události
	QTreeView::mousePressEvent(event);

	// v případě stisknutí levého tlačítka myši
	// uloží aktuální pozici kurzoru
	if(event->button() == Qt::LeftButton)
		dragStartPosition = event->pos();

	event->accept();
}

// událost pohybu kurzoru myši
void MyDirView::mouseMoveEvent(QMouseEvent* event)
{
	// nezahájíme drag, pokud není drženo levé tlačítko
	if (!(event->buttons() & Qt::LeftButton))
		return;
	// nezahájíme drag, pokud se kurzor od stisknutí levého tlačítka
	// nepohnul alespoň o QApplication::startDragDistance()
	if ((event->pos() - dragStartPosition).manhattanLength() < QApplication::startDragDistance())
		return;

	// získáme index buňky pod kurzorem
	QModelIndex index = indexAt(event->pos());

	// nezahájíme drag, pokud pod kurzorem není buňka
	// tzn. pokud index není validní
	if(!index.isValid())
		return;

	// vytvoříme si objekt pro drag
	QDrag* drag = new QDrag(this);
	
	// a sem uložíme informace, které potřebujeme přenést
	QMimeData* mime = new QMimeData;
	// přenášíme text obsažený v přetahované buňce
	mime->setText( index.data().toString() );
	drag->setMimeData(mime);

	// zahájíme drag
	drag->exec(Qt::CopyAction);
}

mylistwidget.h

#ifndef MYLISTWIDGET_H
#define MYLISTWIDGET_H

#include <QListWidget>

class MyListWidget : public QListWidget
{
public:
	MyListWidget(QWidget* = 0);

protected:
	void dropEvent(QDropEvent*);
	void dragEnterEvent(QDragEnterEvent*);
	void dragMoveEvent(QDragMoveEvent*);
};

#endif // MYLISTWIDGET_H

mylistwidget.cpp: implementace dropu na widget spočívá v samotném povolení dropu pomocí metody setAcceptDrops(true) a v následné reimplementaci virtuálních metod dragEnterEvent() a dropEvent(). U komplexnějších widgetů je třeba reimplementovat i dragMoveEvent() – zda je to třeba poznáte celkem snadno, protože drop zkrátka nebude fungovat.

#include "mylistwidget.h"

#include <QDropEvent>

MyListWidget::MyListWidget(QWidget* parent) : QListWidget(parent)
{
	// povolíme drop na tento widget
	setAcceptDrops(true);
}

// událost: drag najede na widget
void MyListWidget::dragEnterEvent(QDragEnterEvent *event)
{
	// pouze přijmeme navrhovanou akci
	event->acceptProposedAction();
}

// událost: drag se pohnul nad widgetem
void MyListWidget::dragMoveEvent(QDragMoveEvent* event)
{
	// opět jen přijmeme navrhovanou akci
	event->acceptProposedAction();
}

// událost drop (puštění dragu na widget)
void MyListWidget::dropEvent(QDropEvent* event)
{
	// získáme text z informací o události (event)
	QString text = event->mimeData()->text();

	// pokud text není prázdný, přidáme jej jako položku do seznamu
	if(!text.isEmpty())
		addItem(event->mimeData()->text());
}

main.cpp: Do okna vložíme naše dva widgety vedle sebe.

#include <QApplication>
#include <QWidget>

#include <QHBoxLayout>

#include "mydirview.h"
#include "mylistwidget.h"

class MainWindow : public QWidget
{
public:
	MainWindow()
	{
		// vytvoříme horizontální rozložení
		QHBoxLayout* layout = new QHBoxLayout(this);
		// a vložíme do něj naše widgety
		layout->addWidget(new MyDirView);
		// 1. widget se bude roztahovat
		layout->setStretch(0, 1);
		layout->addWidget(new MyListWidget);

		setLayout(layout);
	}
};

int main(int argc, char *argv[])
{
	QApplication app(argc, argv);

	MainWindow window;
	window.show();

	return app.exec();
}

Zkuste si tuto ukázku sestavit, spustit a pozměnit události dragu a dropu. Můžete také zkusit implementovat drag & drop jiným widgetům. Přetahovat nemusíte zdaleka jen text, ale prakticky jakákoliv data.

Tray ikona

Tray ikona může být užitečná u programů, u kterých se očekává, že budou spuštěné delší dobu, jako třeba multimediální přehrávače či IM klienti. Následující widget je ukázkou toho, jak pro program vytvořit tray ikonu, jak této ikoně přiřadit kontextovou nabídku a jak volitelně skrývat okno do traye při jeho zavření.

widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QCheckBox>
#include <QSystemTrayIcon>

// widget založený na zaškrtávacím poli
class Widget : public QCheckBox
{
	Q_OBJECT

public:
	Widget();

private:
	QSystemTrayIcon* tray;

protected:
	void closeEvent(QCloseEvent*);

private slots:
	void trayClicked(QSystemTrayIcon::ActivationReason);
};

#endif // WIDGET_H

widget.cpp

#include "widget.h"

#include <QApplication>
#include <QCloseEvent>
#include <QDebug>
#include <QMenu>
#include <QStyle>

Widget::Widget()
{
	// nastaví text vedle zaškrtávacího pole
	setText(tr("Hide on close"));
	// ve výchozím stavu bude zaškrtnuté
	setChecked(true);
	// nastavíme pevnou šířku na 200px
	setFixedWidth(200);

	// vytvoříme objekt tray ikony a jako ikonu nastavíme std. ikonu
	// domovského adresáře poskytnutou aktuálním stylem
	tray = new QSystemTrayIcon(style()->standardIcon(QStyle::SP_DirHomeIcon), this);
	// propojíme aktivaci tray ikony (kliknutí) s naším handlerem
	connect(tray, SIGNAL(activated(QSystemTrayIcon::ActivationReason)),
		this, SLOT(trayClicked(QSystemTrayIcon::ActivationReason)));

	// vytvoříme menu...
	QMenu* menu = new QMenu(this);
	// s položkou "Quit" pro ukončení programu
	QAction* actionQuit = menu->addAction(tr("Quit"));
	connect(actionQuit, SIGNAL(triggered()), qApp, SLOT(quit()));
	// nastavíme vytvořené menu tray ikoně
	tray->setContextMenu(menu);
	// zobrazíme tray ikonu
	tray->setVisible(true);

	// pokud není tray oblast dostupná, vypíšeme to do konzole
	if(!QSystemTrayIcon::isSystemTrayAvailable())
		qDebug() << "System tray is not available right now";
}

// slot propojený s kliknutím na tray ikonu
void Widget::trayClicked(QSystemTrayIcon::ActivationReason reason)
{
	// kliknutí na tray ikonu aplikaci zobrazí/skryje
	if(reason == QSystemTrayIcon::Trigger)
		isHidden() ? show() : hide();
}

// událost zavření okna
void Widget::closeEvent(QCloseEvent* event)
{
	// pokud je zaškrtávací pole zaškrtnuté a tray ikona zobrazená
	if(isChecked() && tray->isVisible())
	{
		// zobrazíme na 1000 milisekund bublinu s informací, že program stále běží
		tray->showMessage(tr("Message"), tr("The application has been hidden, not closed!"),
				     QSystemTrayIcon::Information, 1000);
		// okno skryjeme a událost ignorujeme
		hide();
		event->ignore();
	}
	// jinak se provede std. akce a okno se zavře (a program se ukončí)
}

Jednoduchý program:

Tray ikona s informativní bublinou, která říká, že program nebyl ukončen.

Závěr

Tohle je pro dnešek vše. V příštím díle si mj. povíme něco o regulárních výrazech (a o kontrole vstupních polí s jejich pomocí), vláknech a ukážeme si použití ukazatele průběhu.

Seriál Qt 4 - psaní grafických programů (dílů: 12)

První díl: Grafické programy v Qt 4 - 1 (úvod, hello world), poslední díl: Grafické programy v Qt 4 – 12 (stylování GUI pomocí CSS).
Předchozí díl: Grafické programy v Qt 4 - 3 (Qt Creator a Designer)
Následující díl: Grafické programy v Qt 4 - 5 (regexpy, vlákna a ukazatel průběhu)

Diskuse k tomuto článku

[lin]

První )

[David Watzke]

Konstruktivní příspěvky k tématu vždycky vítám.

[Ondra]

Vsiml jsem si, ze tento serial ma jenom 4 dily a bohuzel neodpovedel na otazku, na niz dosud neznam odpoved :( Obracim se proto na ctenare v nadeji, ze nekdo z vas dokaze poradit:

Mam graficke uzivatelske rozhrani v QT a databazi v SQLite (pravdepodobne UTF-8). Kdyz vytahnu data z databaze, prekoduji je pomoci prikazu "fromLocal8Bit" a vypisu do pole typu PlainTextEdit, diakritika se zobrazi spravne. Kdyz vsak chci data prekodovat zpatky (pouziji prikaz toLocal8Bit), data se jiz spravne neprekoduji :(

Priklad: V databazi je ulozeno slovo "kočka", kdyz to vytahnu z databaze a vypisu, tak se vypise "koeka" (nad "e" je obracena carka), kdyz slovo prekoduji opmoci "fromLocal8Bit" a vypisu, do GUI se mne vypise "kočka". Jakmile tohle slovo opet nactu a prekoduji pomoci "toLocal8Bit", tak bych mel opet dostat "koeka" (s obracenou carkou nad "e"), ne? Ale ja ziskam slovo "ko?ka".

Poradite mne nekdo, prosim? PS: testuji to pod XPckama.

[Deleted [8409]]

Nemůžete používat UTF-8 na vstupu / výstupu? Spoléhat se na lokální kódování u databáze mi přijde šílené.

[Ondra]

Kdyz nactu text ze souboru, tak v pripade slova "kočka" se v TextEditu objevi "koeka" (s obracenou carkou nad e), pokud nepouziju "fromLocal8Bit" a az pak to nevypisu.

Kdyz mam v TextEditu napsano "koeka" (s obracenou carkou nad e) a tohle slovo nactu a predam databazi, tak se mne vyhleda v databazi jeho ekvivalent. Pokud je v TextEditu slovo spravne (kočka) a ja toto spravne zapsane slovo predam databazi, tak se jeho ekvivalent nevyhleda.

[David Watzke]

Můžeš si vytvořit vlastní text edit založenej na tom původním a připsat mu funkci která vrátí řetezec v požadovanym kódování. Ale je to nepěkný řešení.

[Ondra]

A je nekde k dispozici? Prip. nedala by se nejaka funkce pouzit uz pro existujici textEdit?

[David Watzke]

Ne, asi si to budeš muset převést sám.

[David Watzke]

Mrkni se na QTextCodec.

[Ondra]

a kdyz pouziji "fromLocal8Bit", tak do ceho se to prekoduje? Do UTF-8 nebo UTF-16 nebo do neceho jinyho? A kdyz budu chtit pouzivat i jine abecedy nez jen ceskou (napr. azbuku), tak budu muset vyuzivat UTF-16, ze?

[Deleted [8409]]

QString je string v UTF16, takže QTextCodec převádí UTF16 <-> požadované kódování

[s0]

Příloha:

• sqlencoding.tgz (1901 bytů)

Tady je opravdu zásadní vědět, v jakém kódování jsou uložené řetězce v DB. Jinak se nehneš.

V příloze máš jednoduchý prográmek, ve kterém vidíš, jak vynucenou konverzí můžeš rozdrbat data. Alespoň u mne to jede správně.

[Jardík]

Něco jako fromUtf8() a toUtf8() tam snad je ...

[mirrec]

vyborny serial

chel by so msa spytat, ci bude aj nejaky sample na jednoduchu komunikaciu s DB ci uz mysql alebo sqllite

[David Watzke]

Bude, pracuje se dílu o QtSQL Ještě nevím přesně kdy ho zařadíme. Nicméně dočkáš se.

[mirrec]

vyborne, tesim sa

 

[s0]

až opadá listí z dubu... nejspíš

[Maertien]

Ot: nevedel by nekdo, jak vytvorit tray ikonu v tcl/tk?

[YYY]

Divne. To jsem ja doufam nepsal, ale take by mne to zajimalo

[Petr Bravenec]

Díky za seriál. V QT už jsem toho sice naprogramoval dost a dost, abych mohl trpět pocitem, že seriál pro začátečníky mě nemůže oslovit, ale vidím, že i tak je pro mě seriál přínosem. Zabývat se objekty jako je systemTrayIcon mě nikdy nenapadlo, ale do programu jsem to zabudoval za čtvrt hodiny a rozhodně to té mojí aplikaci neuškodilo

Qt je skvělá knihovna a jsem rád, že se někdo věnuje její propagaci.

[mirrec]

este ma tak napadlo, nepamatam sa ci uz si to v tomto serialy nespomenul.

ladenie aplikacie, debugovanie (mozne nastroje), logging, optimalizacia (da sa niekde sledovat pamatova narocnost, pripadne odhalit memory leaks ? )

doplnujuca otazka este (mozno bude fakt blba ale kdyz jsem blbej tak se zeptam ), naco vlastne dve verzie kazdek kniznice (release a debug) ?

[David Watzke]

gdb, valgrind... nic moc Qt specifickýho. Je tady modul QtTest pro benchmarkování, a tak. Možná o tom někdy napíšu, ale zatím to nemám v plánu.

naco vlastne dve verzie kazdek kniznice (release a debug) ?

To si vybereš který verze chceš stavět. Debug má debugovací symboly (binárka se nestripne) + zahrne debug kód, tzn. různý asserty a takhle. Když debuguješ, tak to použij. Release je rychlejší, ale když to pustíš v gdb, dozvíš se celkem prd.

[mirrec]

a ten logging ?

[David Watzke]

Nevím, co přesně si pod tím představuješ. Asi si musíš do programu přidat výpisy pomocí qDebug().

[mirrec]

logovanie (zapisovanie napriklad do suboru, db... alebo co), co sa deje v aplikacii

priklad pokazi sa nieco, napriklad kdesi vyskoci exception, tak ju "zaloggujes", aby si vedel ze sa nieco posralo

[David Watzke]

Tak jak říkám, to si asi budeš muset pořešit sám.

[s0]

existuje např. Log4Qt ale já to vždycky řešil vlastní cestou - buď přes qDebug nebo výpisem do vlastního widgetu apod.

[pou]

Přílohy:

• mybutton.h (166 bytů)
• mybutton.h (166 bytů)

Dobrý den, mám problém s vytvořením vlastního widgetu v Qt Designeru. Pokud vezmu priklad z 1.dilu (mybutton.cpp + mybutton.h) pridam ho do slozky kterou vytvoril Designer, a udělám přesně to co je popsáno v návodu, tak se mi to nepodari přeložit. Jedeny z eroru jsou: ui_widget.h:33: error: invalid conversion from ‘QWidget*’ to ‘QPushButton*’ /home/pou/Desktop/programovani_QT/2/rovnice/zk2/ui_widget.h:33: error: initializing argument 1 of ‘MyButton::MyButton(QPushButton*)’ /usr/include/qt4/QtGui/qpushbutton.h:113: error: ‘QPushButton::QPushButton(const QPushButton&)’ is private Projekt v Designeru vytvarim táké podle návodu, který tu byl.
Děkuji za pomoc!

[Pavel]

Neumím odpovědět, ale mám podobnej problém :) Nevíš už náhodou po dvou letech odpověď? Díky Pavel

[JuroW]

Vies uz odpoved? Mam rovnaky problem. Juro

[jezevec]

Příloha:

• subarea.zip (30661 bytů)

Nevím, jestli je to ještě aktuální, třeba se to bude někomu hodit.

V příloze je kompletní projekt, který fungoval (ještě před chvílí [ ]).

Předpokládám, že nebude problém zpětně dešifrovat, jak se nahradila odvozená třída za původní (via položka v menu promote_to...), na Inetu návodů JakNATO je docela dost.

Hodně úspěchů.

J.