Aplikacje okienkowe w C++ z Qt Widgets – Kurs Qt #4

To już piąty wpis w ramach naszej serii, więc mam nadzieję, że tak samo jak ja nie możecie doczekać się kiedy zaczniemy pisać pierwsze aplikacje okienkowe w C++. Masz szczęście, bo właśnie w tej części rozpoczynamy realną pracę z graficznym interfejsem użytkownika. Zaczniemy od wprowadzenia nas w kuluary modułu Qt Widgets.

Zanim zaczniesz

W ramach tego kursu Qt w pierwszej kolejności skupiamy się na tworzeniu interfejsu graficznego korzystając właśnie z tej technologii. Następnie to czytelnicy będą mogli zdecydować, w którą stronę pójdzie kurs. Dołożę wszelkich starań, aby nowe wpisy ukazywały się co czwartek. Jeżeli ten wpis jest pierwszym z tego kursu na jaki trafiasz to sugeruję, abyś zajrzał również do poprzednich. Miłej lektury!

Aplikacje okienkowe w C++ – czym jest moduł Qt Widgets?

Ujmę to w możliwie najprostszy sposób. Moduł Qt Widgets to zestaw klas i elementów UI do tworzenia klasycznego, graficznego interfejsu użytkownika w stylu znanym nam z desktopów. Podkreślmy fakt, że popularne widżety służą właśnie do tworzenia aplikacji na platformy desktopowe, więc jeżeli framework Qt przyciągnął Cię ze względu na możliwość tworzenia aplikacji mobilnych lub UI dla systemów wbudowanych to zapraszam do kolejnego wpisu w ramach tego kursu gdzie poruszymy temat tworzenia interfejsu użytkownika właśnie na tych platformach.

Widżety są elementami interfejsu zaprojektowanymi tak, aby w sposób natywny prezentowały się na uruchomionej platformie, tzn., że ich wygląd może się różnić na Windowsie, Linuxie czy Macu, ale za to zachowanie pozostaje to samo i aplikacje utworzone z ich użyciem mogą być z powodzeniem uruchamiane na wymienionych systemach.

Dojrzałość modułu Qt Widgets

Niepodważalną zaletą modułu Qt Widgets jest jego dojrzałość. W końcu rozwijany on jest od bardzo dawna, ponieważ właśnie desktopowe aplikacje okienkowe w C++ były pierwszym celem, do którego dążyli twórcy. Widżety zostały zaplanowane w ten sposób, aby obsługiwać działania użytkownika wyposażonego w myszkę i klawiaturę, więc niekoniecznie nadadzą się do urządzeń z dotykowym ekranem. Ponadto pomimo możliwości stylizacji to nie ma co liczyć na łatwą implementację nowoczesnego design z płynnymi animacjami.

Zatem aplikacje okienkowe w C++ warto pisać korzystając z modułu Qt Widgets pod warunkiem, że projekt nie zakłada posiadania zaawansowanego interfejsu graficznego, ale za to kluczowa jest funkcjonalność i stabilność UI napisanego w ten sposób. Będzie to trafny wybór w przypadku, gdy pracujemy nad desktopową aplikacją biurową, magazynową czy innym narzędziem, gdzie UI nie jest tak bardzo istotne.

Pierwsza aplikacja okienkowa w Qt Widgets

Do utworzenia naszego pierwszego programu okienkowego w C++ skorzystamy z kreatora obecnego w środowisku Qt Creator. Wybieramy File -> New File or Project, a następnie spośród dostępnych szablonów wybieramy Applications -> Qt Widgets Application.

Qt Widgets - tworzenie projektu z szablonu

W następnym kroku będziesz mieć możliwość zmiany nazwy projektu i wskazania jego lokalizacji na dysku. W jednym z następnych kroków trafisz na informacje dotyczące nazwy klasy będącej trzonem naszej aplikacji. Jako klasę bazową możemy wskazać QMainWindow, QDialog oraz QWidget.

Klasa QWidget jest atomem w środowisku interfejsu graficznego. Słowem każdy wykorzystany element UI pośrednio lub bezpośrednio dziedziczy właśnie po tej klasie.
Tworząc klasy pochodne do klasy QDialog otrzymamy obiekt pełniący rolę systemowego okienka wykorzystywanego do szybkiego wprowadzenia danych lub szybkiej komunikacji z użytkownikiem. Przykładem takiego dialogu może być okienko wyskakujące w WinRARze nawołujące do zakupu licencji 😉.

My zdecydujemy się na klasę QMainWindow, będącą niejako centrum wokół, którego buduje się aplikację. Nazwijmy ją po prostu MainWindow. Plik nagłówkowy, źródłowy i plik .ui powinny nazywać się tak samo jak klasa.

Teraz wystarczy wybrać zestaw (kompilator, wersja Qt), z którego chcemy skorzystać i ewentualnie skonfigurować system kontroli wersji. Kod funkcji main() aplikacji utworzonej generycznie w ten sposób wygląda jak poniżej:

Po jego uruchomieniu naszym oczom ukaże się puste okienko.

Qt Widgets - przykładowa aplikacja

Tworzenie menu aplikacji

Qt dostarcza nam klasę QMenu odpowiadającą za tworzenie znanych z aplikacji okienkowych menu zlokalizowanych na pasku menu. Z reguły menu zlokalizowane jest pod paskiem tytułowym okienka.

W tym przykładzie stworzymy menu App zawierające dwie akcje do zamknięcia i zminimalizowania okna. Dodatkowo akcje będą miały odpowiadające sobie ikony. W celu ich stworzenia stworzymy dwie instancje klasy QIcon. Jako parametr konstruktora przekazujemy ścieżkę do pliku z ikonami. Korzystamy z wewnętrznego systemu zasobów dostępnego w Qt żeby uniknąć konieczności podawania absolutnej/relatywnej ścieżki do plików, ale to jeszcze sobie wyjaśnimy w kolejnych wpisach.

Następnie tworzymy wskaźnik na zmienną typu QAction, której w konstruktorze przekazujemy kolejno wykorzystywaną ikonę, nazwę akcji (tr() służy w celu tłumaczenia tekstu na inne języki) i wskaźnik na rodzica. Dzięki temu ostatniemu nie musimy martwić się zarządzaniem pamięcią. Mechanizm ten tłumaczyłem we wpisie o Meta-Object Compiler i właściwościach obiektów klasy QObject.

Łączenie utworzonych akcji z realnymi działaniami

Metoda setStatusTip() wykorzystywana jest do dodania wskazówki wyświetlanej na pasku statusu okna w momencie, gdy najedziemy myszką na jedną z akcji. Następnie sygnał triggered() emitowany po naciśnięciu na akcję w menu łączymy ze slotem close(). Podane kroki powtarzamy dla kolejnej akcji, którą połączymy do slotu showMinimized().

Domyśle okno aplikacji posiada składową menuBar na rzecz, której wywołujemy metodę addMenu() wraz z przekazanym parametrem tekstowym będącym zarazem nazwą naszego menu. Wynik tej metody zapisujemy w zmiennej menu jako wskaźnik na utworzone menu. Później wystarczy jedynie wywołać na rzecz tej zmiennej metodę addAction() ze wskazaniem na utworzone wcześniej akcje. Całość zamkniemy w zgrabnej metodzie wywoływanej z konstruktora.

A oto efekt:

Korzystanie z Qt Designera

Qt Designer to narzędzie, które pozwala nam nieco odseparować się od kodu dostarczając nam środowisko służące za pomocą, którego mamy możliwość edycji plików .ui. Formatowane na XML pliki .ui służą do definiowania interfejsu graficznego widżetów bez ingerencji w kod. Na bazie tych plików uruchamiany jest User Interface Compiler, czyli wbudowane narzędzie generujące kod ich podstawie. W naszym przykładzie na podstawie pliku MainWindow.h w folderze build projektu wygenerowany zostanie plik ui_MainWindow.h, który jest zresztą załączony do pliku źródłowego klasy MainWindow dyrektywą #include „ui_MainWindow.h”. Klasy posiadające część layoutu zdefiniowaną w formie plików *.ui posiadają składową *ui będącą wskaźnikiem właśnie na obiekt klasy utworzony w ten sposób.

Przejdźmy zatem do pracy z Designerem. W drzewie projektu znajdź MainWindow.ui i kliknij na niego dwa razy, aby przejść do Designera.

Qt Widgets używając Designera

Z tego poziomu możemy dodawać gotowe komponenty z listy po lewej stronie oraz edytować właściwości tych już obecnych po prawej stronie.

Załóżmy, że chcemy zrobić pole do wpisania adresu url strony oraz przycisk, który otworzy przeglądarkę na tej właśnie stronie po naciśnięciu na niego. W tym celu z listy po lewej stronie wybieramy elementy Line Edit, Push Button oraz Vertical Spacer. Ten ostatni posłuży do wypełnienia nieużywanej przez pozostałe widżety przestrzeni. Następnie gdziekolwiek na wolnym obszarze okna i wybieramy opcję Lay out -> Lay Out Vertically. Dzięki temu widżety ułożone zostaną jeden pod drugim.

Po kliknięciu lewym przyciskiem myszy na przycisku lub na jego nazwie w liście widżetów po prawej stronie, uzyskamy dostęp do jego właściwości. Możesz poszukać właściwości text i zmienić ją na np. Visit Page.

Efekt powinien wyglądać w powyższy sposób. Teraz kliknij prawym przyciskiem myszy na przycisku i z menu kontekstowego wybierz opcję Go to Slot. Pojawi się okno dialogowe z listą sygnałów emitowanych przez przycisk. Wybierz clicked(). Kreator przeniesie Cię do pliku źródłowego klasy (MainWindow.cpp), gdzie będziesz mieć możliwość zdefiniowania instrukcji uruchamianych po wywołaniu slotu. Zróbmy to w ten sposób:

W efekcie okno naszego programu będzie wyglądać tak jak zrzucie poniżej i po wprowadzeniu prawidłowo sformatowanego adresu i po naciśnięciu przycisku otworzy nam się przeglądarka na żądanej stronie.

Podsumowanie

To by były na tyle jeżeli chodzi o wprowadzenie w temat tworzenia okienek korzystając z frameworka Qt. Jak pewnie sam zauważyłeś wiele rzeczy jest robionych za nas jak chociażby generowanie kodu z pliku .ui. Tak jak już wspominałem Qt Widgets to w pełni dojrzały i względnie prosty sposób tworzenia aplikacji okienkowych, więc mam nadzieję, że przez opisany przykład przejdziesz bez problemu. Kod stworzonej aplikacji udostępniam na GitHubie pod tym linkiem. [Link]. Jeżeli masz jakieś pytania lub sugestie to zapraszam do sekcji komentarzy i już z tego miejsca zapraszam na kolejny wpis w ramach tego kursu Qt.

You Might Also Like
Dodaj komentarz

Odwiedź Binarnie.pl na FB

Cześć, jeżeli publikowane treści okażą się dla Ciebie pomocne to zapraszam Cię do polubienia Binarnie.pl na Facebook'u 👍 Bądź pewien, że nic nowego Cię nie ominie 👨🏻‍💻


This will close in 20 seconds