Rys. 1. Główne okno programu QT Creator. Na rysunku 2 oznaczone zostały cztery przyciski, odpowiadają kolejno następującym funkcjom:

Wielkość: px

Rozpocząć pokaz od strony:

Download "Rys. 1. Główne okno programu QT Creator. Na rysunku 2 oznaczone zostały cztery przyciski, odpowiadają kolejno następującym funkcjom:"

Edyta Brzozowska
6 lat temu
Przeglądów:

1. QT creator, pierwsze kroki. Qt Creator wieloplatformowe środowisko programistyczne dla języków C++, JavaScript oraz QML, będące częścią SDK dla biblioteki Qt.

1 1. QT creator, pierwsze kroki. Qt Creator wieloplatformowe środowisko programistyczne dla języków C++, JavaScript oraz QML, będące częścią SDK dla biblioteki Qt. Zawiera w sobie graficzny interfejs dla debuggera oraz narzędzie do projektowania interfejsu graficznego. Edytor kodu źródłowego obsługuje podświetlanie składni oraz autouzupełnianie. Qt Creator używa kompilatora G++ na Linuksie i OS X oraz MinGW na Windowsie [1] QT creator, to bardzo proste i intuicyjne narzędzie do tworzenia aplikacji wyposażonych w GUI. Instrukcja postara się przedstawić podstawowe sposoby obsługi kreatora i omówi jego podstawowe funkcje. Rys. 1. Główne okno programu QT Creator. Na Rysunku 1 przedstawione zostało główne okno programu QT Creator. Na pierwszy rzut oka program może wydawać się intuicyjny i tak właśnie jest w rzeczywistości. Poniżej opisane zostanie część podstawowych funkcji programu. Na rysunku 2 oznaczone zostały cztery przyciski, odpowiadają kolejno następującym funkcjom: 1 Tworzy nowy projekt; 2 Otwiera istniejący projekt; 3 Wyświetla przykłady gotowych aplikacji przygotowanych przez twórcę QT Creator 4 Wyświetla filmy szkoleniowe przygotowane przez twórcę QT Creator.

2 Rys. 2. Główne okno programu QT Creator. Czas stworzyć pierwszy projekt, w tym celu wciśnij przycisk oznaczony 1 (Rys. 2). Powinno wyświetlić się okno wyboru typu projektu (Rys. 3) Rys. 3. Okno wyboru typu projektu. Jak widać w QT creator można tworzyć różne typy projektów, w tej instrukcji skupimy się na

stworzeniu prostego GUI, dlatego więcej szczegółów na temat tych typów nie będzie podanych, w celu poszerzenia informacji na temat typów projektów proszę

W celu stworzenia aplikacji z GUI należy wybrać opcję QT Widgets Application i wcisnąć przycisk Choose Rys. 4. Okno tworzenia projektu.

3 stworzeniu prostego GUI, dlatego więcej szczegółów na temat tych typów nie będzie podanych, w celu poszerzenia informacji na temat typów projektów proszę wykorzystać tutoriale dostępne w programie, lub skorzystać z opisów dostępnych w internecie. W celu stworzenia aplikacji z GUI należy wybrać opcję QT Widgets Application i wcisnąć przycisk Choose Rys. 4. Okno tworzenia projektu. Na rysunku 4 widzimy okno, które powinno pojawić się po wybraniu typu projektu. W rubrykę Name wpisujemy nazwę naszego projektu, w rubrykę Create in ścieżkę, gdzie program ma zapisać pliki projektu. Po wypełnieniu obu rubryk wciśnij Next >. Rys. 5. Okno tworzenia projektu.

W kolejnym kroku przedstawionym na rysunku 5 zostawiamy zestaw wybrany przez program i klikamy Next >. Rys. 6. Okno tworzenia projektu. W kolejnym oknie (Rys.

4 W kolejnym kroku przedstawionym na rysunku 5 zostawiamy zestaw wybrany przez program i klikamy Next >. Rys. 6. Okno tworzenia projektu. W kolejnym oknie (Rys. 6) użytkownik ma możliwość zmiany nazewnictwa głównych plików, nazw klas i podtypu tworzonego projektu. Class name Nazwa głównej klasy. W programie tworzona jest klasa oraz formularz z nią pracujący. Base class Podstawa klasy. Od typu klasy jaki wybierzemy zależy funkcjonalność całego GUI. Do wyboru mamy QmainWindow odpowiadający głównemu oknu programu, Qwidget odpowiadający prostemu widgetowi i Qdialog odpowiadający tworzeniu okien dialogowych. Header file nazwa pliku nagłówkowego. Source file nazwa głównego pliku źródłowego. Form file nazwa pliku formularza. Generate form gdy ta opcja jest zaznaczona tworzony jest formularz. Na potrzeby tej instrukcji zalecane jest pozostawienie nazewnictwa domyślnego. By przejść dalej należy wcisnąć przycisk Next >. W kolejnym oknie powinno wyświetlić się podsumowanie z nazwami plików generowanych na cel projektu (Rys. 7), po sprawdzeniu, że wszystko się zgada, klikamy Finish.

Rys. 7. Okno tworzenia projektu. Na rysunku 8 widzimy okno programu z wygenerowanymi plikami (element 7). Rys. 8. Okno programu z wygenerowanym projektem.

5 Rys. 7. Okno tworzenia projektu. Na rysunku 8 widzimy okno programu z wygenerowanymi plikami (element 7). Rys. 8. Okno programu z wygenerowanym projektem. 1 Po kliknięciu tej opcji mamy dostęp do wygenerowanych plików w celu edycji ręcznej 2 Po kliknięciu tej opcji mamy dostęp do projektowania metodą drag&drop elementów graficznych. Jest ona dostępna po dwukrotnym kliknięciu na plik z rozszerzeniem *.ui w drzewku projektu. 3 Jak nazwa skazuje kliknięcie przełączy nas w tryb debuggera 4 Przycisk służy do rozpoczęcia procesu kompilacji

6 5 Przycisk służy do uruchomienia programu z opcją debbugera 6 Przycisk służy do uruchomienia programu 7 Drzewko projektu, z którego mamy dostęp do plików projektu 8 Okno programu, w którym wyświetlany jest kod źródłowy edytowanego pliku Rys. 9. Okno programu z uruchomionym plikiem main.cpp w trybie edycji. Na rysunku 9 przedstawiono otwarty w trybie edycji plik main.cpp. Jest to główny plik źródłowy naszego projektu. Można zaobserwować, że zawartość pliku nie różni się od standardowego pliku źródłowego dla programów pisanych w języku C++. W treści samego kodu możemy zaobserwować stworzenie dwóch obiektów klas. QApplication oraz MainWindow. Obiekt w klasy MainWindow jest to tworzone przez nas GUI. Funkcja *.show() jest elementem klasy odpowiedzialnym za jego wyświetlenie. Aby przejść do tworzenia GUI należy kliknąć dwukrotnie na mainwindow.ui w celu przejścia do okna Designera (Rys. 10).

7 Rys. 10. Okno programu z uruchomionym trybem designer. Po lewej stronie okna umiejscowiona jest lista elementów jakie możemy wykorzystać w naszym programie. W celu zaimplementowania jakiegoś elementu w naszym GUI wystarczy przeciągnąć go do obszaru roboczego (Rys.11). Rys. 11. Okno programu z uruchomionym trybem designer. Jak można zaobserwować na rysunku 11 po przeniesieniu przycisku do obszaru okna, w prawym górnym roku, w obszarze wyświetlającym elementy naszego GUI pojawił się element pushbutton. Klikając na niego prawym przyciskiem i wybierając z menu kontekstowego change name, możemy

przypisać mu nową nazwę. Proszę zauważyć, że zmiana nazwy nie zmieni tekstu wyświetlanego na przycisku. Nazwa obiektu będzie służyć do odnoszenia się do niego w kodzie źródłowym tworzonego programu.

Pierwszym jest kliknięcie prawym przyciskiem myszy na przycisku i wybranie opcji Go to slot (Rys. 12). Wyświetli się nam wówczas okno wyboru akcji (Rys. 13.). W tym miejscu należy wybrać interesującą nas akcję i wcisnąć OK.

8 przypisać mu nową nazwę. Proszę zauważyć, że zmiana nazwy nie zmieni tekstu wyświetlanego na przycisku. Nazwa obiektu będzie służyć do odnoszenia się do niego w kodzie źródłowym tworzonego programu. W celu zmiany wyświetlanego na przycisku tekstu należy kliknąć na niego dwukrotnie. Mamy nasz przycisk w polu roboczym GUI, teraz możemy przypisać mu jakąś akcję. Istnieje kilka sposobów by to zrobić. Pierwszym jest kliknięcie prawym przyciskiem myszy na przycisku i wybranie opcji Go to slot (Rys. 12). Wyświetli się nam wówczas okno wyboru akcji (Rys. 13.). W tym miejscu należy wybrać interesującą nas akcję i wcisnąć OK. Na potrzeby instrukcji poroszę wybrać opcję jak na obrazku. Po wykonaniu tej czynności zostaniemy przeniesieni do edytora kodu źródłowego (Rys. 14). Rys. 12. Rys. 13. Zostaliśmy przeniesieni do pliku mainwindow.cpp. Została również automatycznie utworzona funkcja wciśnięcia przycisku. Pomiędzy nawiasami bloku instrukcji możemy wpisać dowolną instrukcję, która zostanie wykonana po wciśnięciu przycisku.

bloku instrukcji (aby tekst został prawidłowo wyświetlony, należy dodać

9 Rys. 14. Na rysunku 15 można zaobserwować wynik dodania wyświetlenia tekstu do bloku instrukcji (aby tekst został prawidłowo wyświetlony, należy dodać bibliotekę iostream do pliku mainwindow.cpp) Rys. 15. Drugim sposobem na dodanie akcji do przycisku jest wykorzystanie możliwości designera na

10 dodawanie akcji. W tym celu należy wybrać opcję Edit Widgets z paska (Rys. 16) Rys. 16. Następnie Edit signals and slots (Rys. 17). Rys. 17. W tym momencie gdy najedziemy myszką na przycisk powinien on podświetlić się na czerwono. Kliknij na przycisk, odciągnij odrobinę kursor myszki (Rys. 18). Gdy puścisz przycisk powinno wyświetlić się menu wyboru akcji (Rys. 19).

11 Rys. 18. Wprowadź ustawienia takie jak na rysunku 19 i wciśnij przycisk OK. Rys. 19. Po skompilowaniu i uruchomieniu programu wciśnij zaprogramowany przycisk. Okno programu powinno się zamknąć, a w konsoli powinien wyświetlić się napis Hello World.

12 Czym różnią się obie metody? Zajrzyj do pliku mainwindow.cpp i znajdź funkcję z której korzystaliśmy w pierwszym przykładzie. Można zauważyć, że nic się w nim nie zmieniło, a jednak dodana została kolejna funkcja do przycisku. Metoda druga dodaje potrzebne instrukcje do pliku mainwindow.ui, który jest niczym innym jak plikiem *.xml (Rys. 20). Rys. 20. Źródła: [1]

Podobne dokumenty

I Tworzenie prezentacji za pomocą szablonu w programie Power-Point. 1. Wybieramy z górnego menu polecenie Nowy a następnie Utwórz z szablonu

I Tworzenie prezentacji za pomocą szablonu w programie Power-Point 1. Wybieramy z górnego menu polecenie Nowy a następnie Utwórz z szablonu 2. Po wybraniu szablonu ukaŝe się nam ekran jak poniŝej 3. Następnie