Qt Tutorial #3: Główne okno aplikacji. Wstęp do sygnałów i slotów.

|

QMainWindow jest jedną z najważniejszych klas framework’a Qt – reprezentuje główne okno aplikacji. Klasa posiada swój własny układ, do którego możemy dodać takie elementy, jak menu (QMenuBar), pasek narzędzi (QToolBar), czy też pasek stanu (QStatusBar). QMainWindow będzie w zasadzie głównie wykorzystywaną klasą, jeśli będziemy chcieli realizować główne okno nowej aplikacji.

Poniższy rysunek przedstawia wygląd głównego okna aplikacji, wraz z typowymi elementami:

W tym miejscu należy zaznaczyć, że element centralny (Central Widget) jest wymagany i musi być ustawiony. Bez niego nie utworzymy obiektu głównego okna.

QMainWindow – główne okno aplikacji.

Utworzymy dość proste, główne okno aplikacji. Będzie ono zawierało etykietę oraz osobny przycisk, który umożliwi nam zamknięcie okna.

Zaczniemy od utworzenia nowego projektu – niezbędne czynności są opisane we wcześniejszym wpisie. Powtarzamy więc kroki tam opisane, czyli tworzenie pustego projektu, uzupełnianie pliku *.pro oraz dodanie pliku źródłowego main.cpp do projektu.

Poniżej przedstawiam kompletny kod źródłowy, który należy umieścić w pliku main.cpp:

#include <QApplication> 
#include <QPushButton>
#include <QMainWindow> 
#include <QLabel>  

int main(int argc, char *argv[]) 
{     
    QApplication program(argc, argv);
      
    QMainWindow window;  
    
    window.setGeometry(100, 100, 500, 400);     
    window.setWindowTitle("Okno Główne");    
  
    QPushButton button("Zamknij", &window);     
    button.setGeometry(200, 350, 100, 40);  
    
    QLabel label("Tekst etykiety :)", &window);     
    label.setGeometry(200, 150, 400, 50);      

    QObject::connect(&button, SIGNAL(clicked()), &program, SLOT(quit()));      

    window.show();      

    return program.exec(); 
}

W liniach 1-4 włączamy niezbędne nam pliki nagłówkowe klas z biblioteki Qt. Pierwsze dwie klasy (QApplication, QPushButton) są nam już znane. QMainWindow jest klasą głównego okna aplikacji, natomiast QLabel to klasa etykiety. W linii 8. tworzymy obiekt klasy QApplication.

W linii 10. tworzymy obiekt klasy QMainWindow o nazwie window, czyli główne okno aplikacji. Klasa QMainWindow dziedziczy po wspomnianej wcześniej klasie QWidget. W tym przykładzie korzystamy z konstruktora domyślnego, więc nie podajemy żadnych argumentów.

W linii 12. korzystamy z funkcji składowej setGeometry, której argumentami są współrzędne lewego górnego rogu okna oraz jego wysokość i szerokość. Czyli w naszym przykładzie tworzymy okno o współrzędnych (100px, 100px) oraz rozmiarach 500×400 pikseli. Punktem odniesienia dla współrzędnych jest lewy górny róg ekranu. W linii 13. ustawiamy tytuł okna, czyli tekst wyświetlany na belce tytułowej. Robimy to za pomocą funkcji składowej setWindowTitle. Jako argument podajemy dowolny tekst.

Następnie w linii 15. tworzymy przycisk z napisem Zamknij, tym razem jednak podajemy jeszcze drugi argument, który określa element nadrzędny dla przycisku – w tym przypadku naszym elementem nadrzędnym jest główne okno aplikacji. Trzeba podać wskaźnik na obiekt, więc podajemy &window. W następnej linii ustawiamy współrzędne oraz rozmiary przycisku w znany nam już sposób. Trzeba jednak pamiętać, że teraz punktem odniesienia dla współrzędnych jest nie róg ekranu, ale lewy górny róg głównego okna, czyli ogólnie rzecz biorąc – elementu nadrzędnego.

Tworzenie etykiety jest bliźniaczo podobne do tworzenia przycisku. W linii 18. tworzymy obiekt klasy QLabel – parametrami konstruktora są, tak jak wcześniej, wyświetlany tekst oraz element nadrzędny w hierarchii. Linijkę niżej ustawiamy współrzędne względem głównego okna oraz rozmiar etykiety.

Sygnały i sloty.

W tym momencie mamy kod odpowiadający za wyświetlenie okna z etykietą i klikalnym przyciskiem. Żeby program reagował na wciśnięcie przycisku, należy połączyć sygnał generowany po naciśnięciu przycisku z odpowiednim gniazdem (slotem). Gniazdo to specjalna funkcja, która jest wykonywana w odpowiedzi na jakiś sygnał. Mechanizm sygnałów i slotów jest jedną z najważniejszych funkcjonalności framework’a Qt, więc zostanie szczegółowo omówiony w jednym z kolejnych wpisów.

W linii 21. wywołujemy funkcję connect klasy QObject (klasa bazowa wszystkich obiektów w Qt), która przyjmuje 4 argumenty. Pierwsze dwa parametry to źródło sygnału oraz rodzaj sygnału. W naszym przypadku źródłem jest przycisk, a sygnałem funkcja clicked klasy QPushButton. Następne dwa argumenty to odbiorca sygnału i wywoływane gniazdo – w tym przypadku obiekt program klasy QApplication oraz funkcja quit tej samej klasy.

Na koniec w linii 23. wywołujemy funkcję show klasy QMainWindow. Wywołujemy tę funkcję tylko raz dla głównego okna – ono, jako element nadrzędny, przejmuje obowiązek wyświetlenia pozostałych elementów (przycisku, etykiety). W linii 25. standardowo wywołujemy funkcję exec na obiekcie klasy QApplication.

W wyniku otrzymujemy Okno aplikacji z etykietą i przyciskiem, za pomocą którego kończymy pracę aplikacji:

2 komentarze do “Qt Tutorial #3: Główne okno aplikacji. Wstęp do sygnałów i slotów.”

  1. Fajnie wyjaśnione – w jednym pliku tworzy się wszystkie elementy graficzne. Przydałby się tutorial o „Aplikacja Qt Widgets”, w którym się generuje plik *.ui. Elementy graficzne rysuje się w Qt Designerze i tam się generuje xml. I za cholerę nie wiem jak to się ma do main.cpp. Bo w tym tutorialu w main.cpp kod generuje elementy graficzne, a jak mamy plik *.ui z wyrysowanymi sobie elementami graficznymi, to w jaki sposób się do nich odwołać? zmienić etykietę? rozmiar? sygnały i sloty? i w jakim to pliku wtedy pisać?

    Odpowiedz
  2. Tworzenie i przetwarzanie graficznym elementów interfejsu bezpośrednio w kodzie bardzo pomaga w zrozumieniu, jak działa cała biblioteka Qt. Można oczywiście korzystać z QtDesigner’a i jest to bardzo pomocne narzędzie – sam tworzę GUI głównie w nim. Na dalszym etapie tworzenia tego tutoriala na pewno będę chciał trochę o nim poopowiadać.

    Jeśli chodzi o wykorzystywanie plików *.ui w kodzie, jest na to kilka sposobów. Tak naprawdę w czasie kompilacji, uruchamiany jest UIC (User Interface Compiler), który generuje z naszych plików *.ui standardowe pliki *.h/*.cpp, zawierające kod w C++. Ten kod opisuje cały nasz graficzny interfejs, zdefiniowany za pomocą QtDesigner’a. My po prostu importujemy gotowe klasy do naszego kodu i korzystamy z nich w dość standardowy sposób.

    Nie chcę tworzyć z komentarza całego wpisu, ale możesz zajrzeć do repozytorium na GitHubie:

    https://github.com/DevCodePL/XMoney/

    W aplikacji XMoney każde okno zawiera osobną definicję interfejsu w pliku *.ui oraz pliki *.h/*.cpp z definicją klasy. Można tam zobaczyć, w jaki sposób importowany jest obiekt interfejsu i jak z niego korzystać.

    W razie dalszych pytań zapraszam do kontaktu 🙂

    Odpowiedz

Dodaj komentarz