Qt Tutorial #2: Pierwszy program z graficznym interfejsem użytkownika (GUI).

|

Stało się – jesteśmy szczęśliwymi posiadaczami frameworka Qt, zainstalowanego w naszym systemie operacyjnym (Jak to zrobić ?). Przyszedł więc czas na naszą pierwszą aplikację, która będzie korzystać z biblioteki Qt i posiadać graficzny interfejs użytkownika (ang. GUI, Graphical User Interface).

W tym miejscu krótka informacja – będziemy korzystać z QtCreator’a, zintegrowanego środowiska programistycznego, dostarczanego razem z biblioteką Qt. Qt Creator to świetne narzędzie – intuicyjne i zintegrowane ze wszystkimi funkcjonalnościami, dostarczanymi z framework’iem. Jednym słowem to najlepszy wybór, jeżeli piszemy aplikację wykorzystującą bibliotekę Qt.

Od czego zaczynamy ?

Pierwszym programem będzie tradycyjne Hello World z prostym GUI – wyświetlimy okno z przyciskiem. Uruchamiamy QtCreator’a i wybieramy File->New file or project->Other Project->Empty qmake Project i klikamy na przycisk Choose…. Następnie nadajemy nazwę naszemu projektowi, wybieramy dla niego lokalizację i klikamy Next >.

W następnym oknie mamy możliwość wyboru wersji bibliotek Qt, których będziemy używać w projekcie. Jeśli nie instalowaliśmy kilku wersji biblioteki, będziemy mieli prosty wybór. Wybieramy też rodzaje build’ów, z których będziemy korzystać – najczęściej chcemy mieć wersję debug do rozwijania oprogramowania i testów oraz wersję release, przeznaczoną do budowy finalnej aplikacji, która będzie udostępniana innym osobom. I po raz kolejny klikamy na Next > oraz Finish.

W ten sposób utworzyliśmy pusty projekt, który będzie używał narzędzia qmake (Czym jest qmake ?) do budowania naszej aplikacji.

Projekt w QtCreator.

W prawej górnej części okna QtCreator’a mamy widok projektu – w tej chwili nasz projekt zawiera jedynie plik *.pro. Jest to plik, który będzie zawierał wszystkie informacje na temat projektu, niezbędne do jego zbudowania na określoną platformę. Plikom projektu poświęcę jeden z kolejnych wpisów z cyklu Qt Tutorial.

Ponieważ stworzyliśmy pusty projekt, musimy na początku uzupełnić plik projektu o niezbędne wpisy (które często są dodawane automatycznie przy wyborze innych typów projektów). Dodajemy więc do pliku *.pro następujące 3 linijki:

QT += core gui widgets 

TARGET = NAZWA_NASZEGO_PROJEKTU 
TEMPLATE = app

Oczywiście tekst NAZWA_NASZEGO_PROJEKTU należy uzupełnić wg uznania (będzie to domyślna nazwa pliku wykonywalnego aplikacji).

Żeby dodać plik do projektu, klikamy prawym przyciskiem myszy na nazwę projektu i wybieramy z listy Add New…->C++->C++ Source File i klikamy Choose…. Następnie podajemy nazwę pliku – w naszym przypadku będzie to main.cpp – i klikamy na Next > oraz Finish.

W ten sposób dodaliśmy niezbędny plik źródłowy do naszego projektu. Wartym zauważenia faktem jest automatyczne uzupełnienie pliku projektu przez QtCreator’a.

Kod źródłowy programu.

Poniżej przedstawiam kompletny kod źródłowy, który należy umieścić w pliku main.cpp – jego wyjaśnieniem zajmiemy się w dalszej części wpisu:

#include <QApplication> 
#include <QPushButton>  

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

    QPushButton button("Hello World");     
    button.resize(250, 100);     
    button.show();      

    return program.exec(); 
}

W linii 1. i 2. włączamy pliki nagłówkowe, zawierające definicje klas QApplication i QPushButton. Pierwsza z nich zarządza każdą aplikacją, która korzysta z biblioteki Qt. Do jej głównych zadań należy inicjalizacja aplikacji, przetwarzanie pętli zdarzeń w połączeniu z graficznymi elementami interfejsu oraz zakończenie programu. Natomiast klasa QPushButton reprezentuje przycisk.

W linii 6. tworzymy obiekt klasy QApplication. Parametry konstruktora tej klasy odpowiadają argumentom funkcji main.

W linii 8. tworzymy przycisk – jako parametr konstruktora podajemy napis Hello World – podany tekst będzie etykietą przycisku. Natomiast metoda resize zmienia rozmiary przycisku, jako argumenty przyjmując szerokość i wysokość. Następnie w linii 10. wywołujemy metodę show, która wyświetla przycisk na ekranie.

Na końcu, w linii 12., wywołujemy metodę exec na utworzonym wcześniej obiekcie klasy QApplication – metoda ta przekazuje obsługę pętli zdarzeń do biblioteki Qt i wyświetlany jest interfejs aplikacji.

Efekt tego krótkiego kodu jest zdumiewający, ponieważ otrzymujemy funkcjonalne okno aplikacji z przyciskiem, choć definiowaliśmy tak naprawdę jedynie przycisk. Co jest tego powodem ? Otóż klasą bazową wszystkich wizualnych elementów interfejsu jest klasa QWidget. Każdy element, który dziedziczy pośrednio lub bezpośrednio po klasie QWidget, dziedziczy też jej funkcjonalność (np. metody resize oraz show). Dlatego taki element może pracować zarówno jako samodzielne okno aplikacji, jak również być częścią podrzędną innego okna. Dodam jeszcze, że każdy obiekt klasy dziedziczącej po klasie QWidget posiada zdolność pełnej obsługi zdarzeń generowanych przez użytkownika.

Aby zbudować i uruchomić aplikację, klikamy w zielony trójkąt w prawym dolnym rogu QtCreator’a (lub Ctrl+R z klawiatury). Oto, jak wygląda nasz program po uruchomieniu (oczywiście wygląd zależy od systemu operacyjnego i domyślnie ustawionego stylu okien):

Podsumowanie.

Każdy przyzna, że kod odpowiedzialny za wykonanie naszego pierwszego programu jest prosty i krótki, a tworzenie i manipulowanie elementami GUI nie sprawia żadnych trudności. W tych paru linijkach stworzyliśmy program z graficznym interfejsem użytkownika – okno z przyciskiem. To pokazuje, jakie możliwości ma biblioteka Qt i jak łatwo można za jej pomocą tworzyć nawet bardzo złożone aplikacje.

11 komentarzy do “Qt Tutorial #2: Pierwszy program z graficznym interfejsem użytkownika (GUI).”

  1. W końcu jakiś pomocny tutorial pod Qt5. Wszystko fajnie wyjaśnione chociaż :
    Co to są za argumenty : int argc, char *argv[]? Nie jest wyjaśnione, a mnie intryguje

    Odpowiedz
  2. argc i argv to argumenty przekazywane do programu podczas uruchamiania go z linii poleceń. Taki zapis funkcji main() wywodzi się bezpośrednio z języka C oraz C++:

    int main(int argc, char *argv[])

    argc oznacza liczbę argumentów, natomiast argv to tablica c-stringów, które są podanymi parametrami.

    Ponieważ konstruktor klasy QApplication wygląda następująco:

    QApplication(int &argc, char **argv)

    , funkcja main() powinna wyglądać tak, jak powyżej, żeby móc poprawnie przekazać parametry dalej do klasy QApplication.

    Odpowiedz
  3. Aha dzięki za info.. Czyli bym musiał najpierw trochę poznać język C++. Programuję w PHP, JS znam Pythona. myślałem, że przejście na C++ to tylko inne nazwy funkcji, i da radę bez większego zagłębiania

    Odpowiedz
  4. Jeśli programujesz w innych językach to oczywiście będzie ci o wiele łatwiej. Z drugiej strony C++ jest trochę bardziej złożonym językiem – głównie ze względów historycznych i zaszłości języka C. Największymi różnicami w porównaniu z wymienionymi przez Ciebie technologiami są statyczne typowanie oraz wskaźniki i ręczne zarządzanie pamięcią (tutaj akurat wykonał się duży postęp w ostatnim czasie).

    Sam framework Qt wiele rzeczy upraszcza i ma się wrażenie, że programuje się w trochę innym języku, choć to wciąż jest C++. Pamiętaj też, że ja opisuję tutaj tylko jedną stronę medalu, czyli tzw. Widgety. W Qt GUI można też definiować za pomocą języka QML, a logikę oprogramować np Javascriptem.

    Odpowiedz
  5. Jako doświadczony programista, poleciłbyś mi samą naukę C++, czy najpierw C, a później C++? Mam do zrobienia aplikację terminarza (kalendarz +kontakty + zadania + notatki), który napisałem już w wersji webowej. Usłyszałem o Qt, że jest wieloplatformowy i dobrze się pisze w nim aplikacje okienkowe, ale chciałbym aby ktoś mi doradził najlepszą (nie najkrótszą) drogę do osiągnięcia tego celu

    Odpowiedz
  6. Nie wiem, dlaczego miałbyś najpierw uczyć się C (czego, jak rozumiem, nie potrzebujesz), a potem C++. To naprawdę są dwa różne języki i różne podejścia. Wiem, że C++ ma z C wiele wspólnego, ale język C nie nie jest wstępem do C++ 🙂

    Co do aplikacji – skoro masz już interfejs webowy, który z definicji jest wieloplatformowy i najbardziej uniwersalny – w jakim celu chcesz tworzyć aplikację desktopową ?

    To prawda, że Qt jest bardzo przyjemny – jest obecnie de facto standardem, jeśli chodzi o programowanie graficznych interfejsów użytkownika w C++. Nie da się jednak ukryć, że np. Java jest o wiele popularniejszym językiem do takich zastosowań. Wszystko zależy od twojej motywacji i celów. Jeśli musisz stworzyć aplikację desktopową i na pewno w C++, to Qt jest w tej chwili najlepszym wyborem.

    Odpowiedz
  7. Sory, ale zawsze myślałem, że C++ to język pochodny od C.

    Głównie, chcę stworzyć aplikację desktopową, aby skorzystać z systemowego przypominania (tak żeby użytkownikowi na desktopie pojawiały się dymki z przypomnieniem o zadaniu). Inne powody to : nauka innego języka i stworzenie aplikacji okienkowej na desktop – ogólnie swój własny rozwój 😉

    W sumie to nie wiem czy to musi być w C++… Słyszałem, że Java to jakaś zmora jeśli chodzi o programowaniem.. Ale dowiedziałem się o Qt i C++ to tak mi zostało..

    Odpowiedz
  8. Uczyłem się w ostatnim czasie C++ i szukałem jakiś kroków, aby rozwijać się dalej. Zwróciłem uwagę na Qt i trafiłem na tę stronę. Po dwóch pierwszych wpisach z którymi się zapoznałem wydaje mi się że to będzie dobry wstęp do kolejnych etapów nauki.

    Dzięki za poświęcony czas!

    Odpowiedz

Dodaj komentarz