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:

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:

 

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.