2. diel - Prvé okno v Qt a C ++

V minulej lekcii, Inštalácia Qt frameworku pre C ++ , sme si nainštalovali Qt framework spolu s nástrojom Qt Creator a vytvorili svoju prvú aplikáciu v Qt, aj keď iba konzolovú. To napravíme hneď v dnešnom C ++ tutoriálu, kde si už vytvoríme svoje prvé plnohodnotné okienko:)

Prvý okenné aplikácie v Qt a C ++

Aplikácia toho nebude vedieť moc, ale ako ukážka pre začiatok postačí. Proste vykreslíme okno a postupne ho trochu vylepšíme a ukážeme si základné techniky pre prácu v Qt.

Spustíme teda Qt Creator, kde si vytvoríme nový projekt, napr. Pod názvom wokno.

Vyberieme si projekt, ktorý bude používať Qt Widgety. Síce by sme si ho mohli založiť aj ručne modifikácií projektového súboru, ale prečo si veci robiť zbytočne zložité:

Ďalší krok je voľba umiestnenia projektu.

Len musím upozorniť, že adresár by mal byť vytvorený už vopred, neviem prečo, ale Qt Creator ho vytvoriť nevie.

Ďalej si vyberieme sadu pre preklad hotového programu. Screenshot je z Linuxu. Vo Windows vyberte variantu Desktop pre MinGW a architektúru podľa svojho operačného systému (typicky 64-bitový).

V začiatkoch nebudeme designer používať. Keď si človek tvorí rozloženie aplikácie ručne, veľa sa toho naučia a navyše má všetko pod kontrolou. Teda vytvorenie formulára teraz odškrtnite. Ako základný triedu zvolíme QMainWindow.

Dôvody tejto voľby si vysvetlíme neskôr.

Teraz už máme základné okenné projekt vytvorený:

Dostali sme tri základné súbory (tieto súbory sú už vytvorené QtCreatorem a v nasledujúcom texte si ich trochu vysvetlíme):

• main.cpp - hlavná spustiteľnú časť programu,
• mainwindow.h - deklaráciu pre okno (tento súbor otvorte z priečinka headers/ v prieskumníkovi súborov v ľavej časti okna),
• mainwindow.cpp - a posledným súborom je samotná implementácia okna.

Súbor main.cpp

Náš súbor main.cpp vyzerá 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 vytvorenie novej inštancie triedy MainWindow, reprezentujúci hlavné okno. To je následne aj zobrazené pomocou metódy show().

Naimportováním QApplication si zaistíme možnosť použiť slučku udalosťou, ktorá je pre okno celkom potrebná - inak by okno nešlo ani zavrieť.

Mainwindow.h

Rozkliknutím zložky headers/ v prieskumníkovi súborov vľavo a otvorením súboru mainwindow.h sa presunieme do hlavičkového súboru triedy okna. Opäť sa na neho len pozrieme a vysvetlíme:

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

class MainWindow : public QMainWindow
{
    Q_OBJECT

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

#endif // MAINWINDOW_H

Tu stojí za zmienku hlavičkový súbor QMainWindow. Jedná sa o triedu, ktorá reprezentuje skutočné aplikačné okno. Môže obsahovať panel nástrojov, menu, tooltips a iné zaujímavosti.

Celkom dôležité je makro Q_OBJECT. K rozjazdu však bude stačiť informácia, že nám umožní používať signály a sloty. Neskôr spoznáme, že je to veľmi silný nástroj pre odovzdávanie informácií v aplikácii.

Inak tu máme len konštruktor a deštruktor (destruktor bude časom užitočný. Qt5 má síce svoju správu pamäte, ale osobne ju príliš nedôverujem. Proste "céčko" vyžaduje dávať si pozor na to, ako pamäť alokuje a ako ju uvoľňujeme. Teda všetko, čo vytvoríme pomocou new, musíme aj sami zmazať operátorom delete).

Mainwindow.cpp

Môžeme sa pozrieť aj do súboru mainwindow.cpp:

#include "mainwindow.h"

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

MainWindow::~MainWindow()
{

}

Tu sa toho veľa diať nebude. Jednoducho len prázdny konštruktor a deštruktor. Teraz už len preložiť a spustiť. Vo výsledku dostaneme asi takéto okno:

Titulok a veľkosť okna

Ako je vidieť, okienko je úplne jednoduché a malé, že by sa do neho ani žiadny obsah nevošiel. Naviac má meno podľa názvu projektu. Poďme to zmeniť, bude to ľahké.

Pre zmenu veľkosti a titulku okna použijeme dve metódy z triedy QWidget, od ktorej je QMainWindow zdedené. Sú to metódy resize() pre zmenu veľkosti a setWindowTitle() pre zmenu titulku.

Konštruktor v súbore 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ýsledok je hneď poznať:)

Kontextová pomoc - Tooltip

Môže sa stať, že používateľ je trochu zmätený a nevie čo má kde napísať alebo stlačiť. Preto mu môžeme poskytnúť veľmi rýchlu pomoc pri nabehnutí myšou na časť okna, editačné polia alebo napr. Tlačidlo. Všetky vyššie menované súčasti sú odvodené od triedy QWidget, rovnako ako hlavné okno, a táto trieda obsahuje metódu setToolTip() a dokonca nám umožní nastaviť dobu, po ktorú bude nápoveda zobrazená pomocou setToolTipDuration().

Vyskúšajme si teda tooltip a do konstruktoru pridáme riadok:

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

Aplikáciu si môžete skúsiť spustiť znova a nechať myš chvíľu bez pohybu na okne, aby sa tooltip zobrazil.

Suroviny aneb resources - Ikona

Hovorí sa, že každý poriadny program by mal mať svoju ikonu, tak prečo by sme to my mali inak?:-) Lenže to bude trošičku zložitejšie problém.

Predovšetkým si kdekoľvek vytvorte adresár (najlepšie v zložke projektu), kde budete mať potrebné obrázky, dáta a ďalšie zdroje ... Ja používam názvy res/img/, res/data/, res/files/ a podobné. Naozaj je úplne jedno, kde adresár bude. Ak chcete zdieľať rovnaké dáta medzi programami, stačí jeden univerzálny adresár. Ovšem QtCreator bude rovnako chcieť dáta kopírovať do projektového adresára.

Ak by som robil rovnaký program v Pythone s PyQt alebo PySide, pristupoval by som k dátam priamo zadaním cesty, ale v C ++ existuje zaujímavejšie postup a to súbor *.qrc.

Prax robí majstrami. Teda pravým tlačidlom myši klikneme na projektové súbory, presnejšie na prvú položku názvu projektu alebo na nejaký projektový adresár:

Z ponuky zvolíme pridať nový a v dialógu si vyberieme Qt a Qt Resource file:

Súboru dáme vhodný názov, napr. resource:

A potom už len dokončiť. Vznikne nám čosi takého:

Ďalej klikneme na Pridať -> Pridať predponu a východiskové predponu /new/prefix1 zmeníme na img. Potom znova klikneme na Pridať, ale tentoraz pridáme súbor s ikonou. Tu už jedna predpripravená je.

Odporúčam pre hlavné ikonu rozmery aspon 64x64 až 512x512px a pre ostatné stačí 16x16 až 64x64px. Hodí sa potom aj pre dialóg O programe (about) a všade inde bude zmenšená na potrebnú veľkosť. Tiež najlepšie formát je png s priehľadnosťou. Ostatne všetky obrázky pre panel nástrojov i menu by mali byť vo formáte png a priehľadné. Jpg, Ico, Tiff atď radšej nepoužívajte

Na obrázku nižšie máte jednu pokusnú ikonu pripravenú a môžete ju pokojne použiť.

Potom si svoje ikone dajte pracovný názov - alias. Nad dialógom správy zdrojov je strom súborov. Stačí kliknúť na názov a dole alias napísať. Sám som použil mainIcon.

Teraz už je potrebné len pridať jeden príkaz do konstruktoru okná a máme okno is ikonou:

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

Tu stojí za pozornosť ďalšie trieda: QIcon a hlavne text argumentu. Predovšetkým dvojbodka označuje, že súbor sa berie z qrc a navyše ako pracovný názov - alias. Meno sme si určili sami, teda mainIcon.

Výsledok okná vám teraz neukážem, pretože v Linuxe mám okná bez ikon, ale aspoň takto:

Tak a tu je celý dnešný súbor 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 pre dnešné lekciu všetko. Nabudúce, v lekcii Dokončenie prvého okna v Qt a C ++ - Tlačidlo , sa pozrieme na nejaké to tlačidlo a takú vyššiu dievčenské ako sú signály a ich sloty pre spracovanie prenosu dát medzi jednotlivými widgety či chce chcete komponentmi používateľského rozhrania.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.