Lekce 2 - První okno v Qt a C++

V minulé lekci, Instalace Qt frameworku pro C++, jsme si nainstalovali Qt framework spolu s nástrojem Qt Creator a vytvořili svou první aplikaci v Qt, i když pouze konzolovou.

To napravíme hned v dnešním C++ tutoriálu, kde si již vytvoříme své první plnohodnotné okénko

První okenní aplikace v Qt a C++

Aplikace toho nebude umět moc, ale jako ukázka pro začátek postačí. Prostě vykreslíme okno a postupně jej trochu vylepšíme a ukážeme si základní techniky pro práci v Qt.

Spustíme tedy Qt Creator, kde si vytvoříme nový projekt, např. pod názvem wokno.

Vybereme si projekt, který bude používat Qt Widgety. Sice bychom si jej mohli založit i ručně modifikací projektového souboru, ale proč si věci dělat zbytečně složité:

Další krok je volba umístění projektu.

Jen musím upozornit, že adresář by měl být vytvořen již předem, nevím proč, ale Qt Creator jej vytvořit neumí.

Dále si vybereme sadu pro překlad hotového programu. Screenshot je z Linuxu. Ve Windows zvolte variantu Desktop pro MinGw a architekturu podle svého operačního systému (typicky 64-bitový).

V začátcích nebudeme designer používat. Když si člověk tvoří rozložení aplikace ručně, mnoho se toho naučí a navíc má vše pod kontrolou. Tedy vytvoření formuláře nyní odškrtneme. Jako základní třídu zvolíme QMainWindow.

Důvody této volby si vysvětlíme později.

Nyní již máme základní okenní projekt vytvořený:

Dostali jsme tři základní soubory (tyto soubory jsou již vytvořeny QtCreatorem a v následujícím textu si je trochu vysvětlíme):

• main.cpp - hlavní spustitelnou část programu,
• mainwindow.h - deklaraci pro okno (tento soubor otevřete ze složky headers/ v průzkumníku souborů v levé části okna),
• mainwindow.cpp - a posledním souborem je samotná implementace okna.

Soubor main.cpp

Náš soubor main.cpp vypadá takto:

#include "mainwindow.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();

    return a.exec();
}

Vidíme vytvoření nové instance třídy MainWindow, reprezentující hlavní okno. To je následně i zobrazeno pomocí metody show().

Naimportováním QApplication si zajistíme možnost použít smyčku událostí, která je pro okno celkem potřebná - jinak by okno nešlo ani zavřít.

mainwindow.h

Rozkliknutím složky headers/ v průzkumníku souborů vlevo a otevřením souboru mainwindow.h se přesuneme do hlavičkového souboru třídy okna. Opět se na něj jen podíváme a vysvětlíme:

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = 0);
    ~MainWindow();
};

#endif // MAINWINDOW_H

Zde stojí za zmínku hlavičkový soubor QMainWindow. Jedná se o třídu, která reprezentuje skutečné aplikační okno. Může obsahovat panel nástrojů, menu, tooltips a jiné zajímavosti.

Celkem důležité je makro Q_OBJECT. K rozjezdu však bude stačit informace, že nám umožní používat signály a sloty. Později poznáme, že je to velmi silný nástroj pro předávání informací v aplikaci.

Jinak zde máme jen konstruktor a destruktor (Destruktor bude časem užitečný. Qt5 má sice svou správu paměti, ale osobně ji příliš nedůvěřuji. Prostě "céčko" vyžaduje dávat si pozor na to, jak paměť alokujeme a jak ji uvolňujeme. Tedy vše, co vytvoříme pomocí new, musíme i sami smazat operátorem delete).

mainwindow.cpp

Můžeme se podívat i do souboru mainwindow.cpp:

#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
}

MainWindow::~MainWindow()
{

}

Zde se toho moc dít nebude. Prostě jen prázdný konstruktor a destruktor. Nyní již jen přeložit a spustit. Ve výsledku dostaneme asi takovéto okno:

Titulek a velikost okna

Jak je vidět, okénko je zcela jednoduché a malé, že by se do něj ani žádný obsah nevešel. Navíc má jméno podle názvu projektu. Pojďme to změnit, bude to snadné.

Pro změnu velikosti a titulku okna použijeme dvě metody z třídy QWidget, od níž je QMainWindow zděděné. Jsou to metody resize() pro změnu velikosti a setWindowTitle() pro změnu titulku.

Konstruktor v souboru mainwindow.cpp si upravíme takto:

#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    resize(640,480);
    setWindowTitle("Můj první program");
}

A výsledek je hned znát

Kontextová nápověda - Tooltip

Může se stát, že uživatel je poněkud zmaten a neví co má kde napsat nebo stisknout. Proto mu můžeme poskytnout velmi rychlou pomoc při najetí myší na část okna, editační pole nebo např. tlačítko. Všechny výše jmenované součásti jsou odvozeny od třídy QWidget, stejně jako hlavní okno, a tato třída obsahuje metodu setToolTip() a dokonce nám umožní nastavit dobu, po kterou bude nápověda zobrazena pomocí setToolTipDuration().

Vyzkoušejme si tedy tooltip a do konstruktoru přidáme řádek:

setToolTip("Toto okno nic nedělá");

Aplikaci si můžete zkusit spustit znovu a nechat myš chvíli bez pohybu na okně, aby se tooltip zobrazil.

Suroviny aneb resources - Ikona

Říká se, že každý pořádný program by měl mít svou ikonu, tak proč bychom to my měli jinak ? Jenže to bude trošičku složitější problém.

Předně si kdekoli vytvořte adresář (nejlépe ve složce projektu), kde budete mít potřebné obrázky, data a další zdroje... Já používám názvy res/img/, res/data/, res/files/ a podobné. Opravdu je zcela jedno, kde adresář bude. Pokud chcete sdílet stejná data mezi programy, stačí jeden univerzální adresář. Ovšem QtCreator bude stejně chtít data kopírovat do projektového adresáře.

Pokud bych dělal stejný program v Pythonu s PyQt nebo PySide, přistupoval bych k datům přímo zadáním cesty, ale v C++ existuje zajímavější postup a to soubor *.qrc.

Praxe dělá mistry. Tedy pravým tlačítkem myši klikneme na projektové soubory, přesněji na první položku názvu projektu nebo na nějaký projektový adresář:

Z nabídky zvolíme přidat nový a v dialogu si vybereme Qt a Qt Resource file:

Souboru dáme vhodný název, např. resource:

A pak už jen dokončit. Vznikne nám cosi takového:

Dále klikneme na Přidat -> Přidat předponu a výchozí předponu /new/prefix1 změníme na img. Pak znovu klikneme na Přidat, ale tentokrát přidáme soubor s ikonou. Zde již jedna předpřipravená je.

Doporučuji pro hlavní ikonu rozměry aspoň 64x64 až 512x512px a pro ostatní stačí 16x16 až 64x64px. Hodí se pak i pro dialog O programu (about) a všude jinde bude zmenšena na potřebnou velikost. Také nejlepší formát je png s průhledností. Ostatně všechny obrázky pro panel nástrojů i menu by měly být ve formátu png a průhledné. Jpg, Ico, Tiff atd raději nepoužívejte

Na obrázku níže máte jednu pokusnou ikonu připravenou a můžete ji klidně použít.

Poté si své ikoně dejte pracovní název - alias. Nad dialogem správy zdrojů je strom souborů. Stačí kliknout na název a dole alias napsat. Sám jsem použil mainIcon.

Nyní již je třeba jen přidat jeden příkaz do konstruktoru okna a máme okno i s ikonou:

setWindowIcon(QIcon(":/img/mainIcon"));

Zde stojí za pozornost další třída: QIcon a hlavně text argumentu. Předně dvojtečka označuje, že soubor se bere z qrc a navíc jako pracovní název - alias. Jméno jsme si určili sami, tedy mainIcon.

Výsledek okna vám nyní neukážu, protože v Linuxu mám okna bez ikon, ale aspoň takto:

Tak a zde je celý dnešní soubor mainwindow.cpp:

#include "mainwindow.h"

#include <QIcon>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    resize(640,480);
    setWindowTitle("Můj první program");
    setToolTip("Tohle okno nic nedělá");
    setWindowIcon(QIcon(":/img/mainIcon"));
}

MainWindow::~MainWindow()
{

}

To je pro dnešní lekci vše.

Příště, v lekci Dokončení prvního okna v Qt a C++ - Tlačítko, se podíváme na nějaké to tlačítko a takovou vyšší dívčí jako jsou signály a jejich sloty pro zpracovaní přenosu dat mezi jednotlivými widgety či chce-li komponentami uživatelského rozhraní.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.