Drodzy, dziś mam dla Was wpis rozpoczynający naszą zabawę z Qt. Opiszę Wam jak zainstalować i stworzyć pierwszy projekt w tym właśnie środowisku.

Dlaczego mówię o Qt Creatorze? Moim zdaniem jest to najlepsze IDE, wprost stworzone do rzeźbienia interfejsów okienkowych, pisania aplikacji w języku C/C++. Pracowałem z kodem w:

Apple: XCode(Objective-C)

Borland: Delphi (Pascal), Turbo Pascalu (Pascal), JBuilder (Java), Turbo Assembler (Asembler)

Microsoft: VisualBasic, Visual Studio (C, C++, C#, Python[#]), Notatnik [?], Edit.exe (DOS)

SUN/Oracle: NetBeans (Java/JSP/Android/PHP/C/C++)

OpenSource: FreePacal (Pascal), Eclipse (Java/Android), MonoDevelop (C#/Mono), KDevelop (Qt), KDesigner (Qt), CodeBlocks (C, C++, D, SDL, OpenGL), Nano, Pico, MCEdit, KWrite i Kate (Różne języki)

Inne: DarkBasic, PSPad

…i do tej pory Qt Creator wywarł na mnie najbardziej pozytywne wrażenie. Nie ma zbyt wielu rzeczy, których nie wykorzystacie ale z kolei nie brakuje tutaj też niczego. Wszystko jest w miarę intuicyjne.

 

Jeśli nie wiecie, dlaczego poruszam temat programowania w języku C++ zapraszam do wpisu: Write in C, stupid!

 

Do samego wielgachnego wpisu – bo temat jest długi – znajdziecie VideoTutorial poniżej. Jeśli więc nie chce Wam się czytać tego wszystkiego, zapraszam do filmu:

 

Zaczynamy

Na początek potrzebny Wam będzie dowolny Linux a dokładniej jego manager pakietów. Ponieważ jak wiecie jestem zapalonym fanem Gentoo swój tutorial oprę właśnie o Portage.

 

Instalacja

Jeśli wcześniej nie instalowaliście KDE, wydanie polecenia:

# emerge -va qtcreator

spowoduje instalację QtCreatora oraz tysiąca (przesada) dodatkowych pakietów. Pakiety zostaną automatycznie pociągnięte przez Portage aby spełnić zależności, na których bazuje Qt oraz jego omawiane IDE.

Jeśli nie instalowaliście wcześniej Qt lub KDE prawdopodobnie poczekacie dłuższą chwilę – w zależności od wydajności Waszej maszynki – na kompilację pakietów oraz ich osadzenie w drzewie systemu.

Instalacja QtCreatora to straight forward – jedno polecenie i otrzymujemy gotowe, skonfigurowane środowisko.Uwaga – inne dystrybucje: możliwe, że w trakcie instalacji Qt na innych dystrybucjach jak Ubuntu, czysty Debian, SUSE, Fedora, Mint oraz Unix/BSD pociągnięte do instalacji mogą zostać elementy kompilatora oraz pakiety zupełnie niezwiązane z samym GNU Compiler Collection (GCC), ale uznane za opcjonalne. Zalecam Wam zainstalowanie tych rozszerzeń, mogą przydać się w Waszych dalszych zmaganiach z programowaniem.

 

Pierwsze uruchomienie

Jeśli korzystacie z KDE 4 w Gentoo, możecie zauważyć, że bezpośrednio po instalacji nowego oprogramowania za pomocą Portage jest ono niewidoczne w K-menu. W moim KDE tworzony jest odpowiedni folder w menu aplikacji o nazwie „Niedawno instalowane” lub „Ostatnio zainstalowane”. Jeśli w Waszym K-menu wstępuje taki folder, tam znajdziecie skrót do QtCreatora. W przeciwnym wypadku musicie posiłkować się polem wyszukiwania KDE wpisując „qtcreator”:

Qt, QtCreator, Creator, C++, Gentoo, KDE, Tutorial, Programowanie

Po chwili otwarty zostanie, skonfigurowany już IDE (Good Work Gentoo!).

 

Qt, QtCreator, Creator, C++, Gentoo, KDE, Tutorial, Programowanie

 

Elementy interfejsu Qt Creatora

Qt Creator – podobnie jak wszystkie aplikacje KDE – posiada menu główne aplikacji, które – jeśli nie znamy odpowiednich skrótów klawiszowych – służy do odnajdywania prawie wszystkich funkcji IDE i edytorów.

Qt, QtCreator, Creator, C++, Gentoo, KDE, Tutorial, Programowanie

Dodatkowo z lewej strony znajdziemy toolbar zawierający podstawowe moduły IDE, jak:

  • Strona startowa (?)
  • Edytory plików tekstowych
  • Designer interfejsu (QML)
  • Debuger
  • Folder projektów
  • Analizę aplikacji
  • Pomoc

Poniżej w toolbarze znajdziecie także wybór profilu kompilacji, uruchomienie (i zbudowanie, o ile nie zostało to wcześniej wykonane) aplikacji, uruchomienie w trybie debugowania oraz przebudowanie wszystkich elementów (plików) aplikacji.

 

Pierwszy projekt

Aby przedstawić większość funkcji Qt Creatora musimy stworzyć pierwszy projekt. Z przyzwyczajenia mój system ustawiony jest na język angielski, Wy jednak możecie mieć Qt Creatora w języku polskim, co znacznie usprawni pracę tym z Was, którzy angielskiego nie znają (są tacy programiści?).

Aby utworzyć nowy projekt klikamy: File > New file or project.

Qt, QtCreator, Creator, C++, Gentoo, KDE, Tutorial, Programowanie

Jak widzicie, mamy tutaj do dyspozycji pełen wachlarz możliwości – być może w Waszym przypadku lista możliwych do stworzenia projektów będzie różna od przedstawionej na obrazku – możemy więc stworzyć nie tylko aplikację Qt ale np. GLSL – GL Shader Language, Program Pythonowy, czysty C++ lub… aplikację w HTML5 i aplikację konsolową.

Nas interesuje w tym tutorialu wyłącznie Qt oraz C++. Klikamy więc w sekcji „Projects” na „Applications” a następnie „Qt Gui Application”. Po dokonaniu wyboru wciskamy przycisk „Choose”.

Qt, QtCreator, Creator, C++, Gentoo, KDE, Tutorial, Programowanie

Otworzy nam się kreator konfiguracji nowego projektu, w którym musimy zdefiniować jego podstawowe parametry, jak katalog, w którym projekt jest przechowywany oraz nazwa itd.

Nazwa projektu powinna zawierać znaki ASCII, bez spacji. Projekt zostanie utworzony w wybranym katalogu. Dla celów tutorialu ustalam ten projekt na /tmp/, który zostanie opróżniony po ponownym uruchomieniu komputera! Zachęcam więc Was do zmiany katalogu na inny, np /home/<nazwa_uzytkownika>/ProjektyQt/.

Kreator automatycznie utworzy we wskazanym katalogu folder o nazwie identycznej z nazwą projektu – stąd istotne jest aby nie zawierała ona polskich znaków diakrytycznych (ogonków).

Po zakończeniu konfiguracji tej strony klikamy NEXT.

Qt, QtCreator, Creator, C++, Gentoo, KDE, Tutorial, Programowanie

Pojawi się nam dodatkowe okienko mówiące o tzw. profilach kompilacji. Na załączonym obrazku stworzone zostały 4 profile – po 2 dla każdej platformy.

Platformy grupowane są ze sobą. W tym wypadku do dyspozycji mamy platformę Android oraz Desktop. Każda z platform posiada 2 profile – debug (śledzenie błędów/bugów aplikacji) oraz release (kompilacja finalna, dla końcowego użytkownika).

Jak widzicie, każdy z profili posiada osobną ścieżkę dla swoich plików wynikowych. Z jednej strony jest to udogodnienie, które sprawia, że poszczególne kompilacje nie są połączone w jednym folderze wyjściowym. Z drugiej strony powoduje to problem z kopiowaniem plików dodatkowych, shipowanych wraz z aplikacją do klienta końcowego, które w trybie debug również mogą być potrzebne – podpowiedź: wykorzystajcie symlinki / dowiązania symboliczne.

Po zweryfikowaniu ścieżek i wybraniu odpowiednich platform klikamy przycisk „Next”.

Qt, QtCreator, Creator, C++, Gentoo, KDE, Tutorial, Programowanie

Przed naszymi oczami pojawi się dodatkowe okienko, które mówi o bardzo istotnych elementach – klasach projektu.

Właśnie w tym miejscu możemy zdefiniować nazwę głównej klasy – w tym wypadku MainWindow. Dodatkowo ustawiamy tutaj także dziedziczenie/typ klasy. Na załączonym obrazie jako klasa bazowa została ustawiona QMainWindow (okno główne), jednakże do wyboru mamy także QDialog (okna dialogowe) oraz QWidget (elementy osadzane w innych elementach Qt).

Czym różnią się poszczególne klasy bazowe? Np. klasa QMainWindow wyposażona jest standardowo w elementy, jak: pasek menu, pasek statusu itp. Klasa bazowa QDialog służy do budowania okien dialogowych a klasa bazowa QWidget jest najprostszą formą elementu Qt, który możemy dowolnie modyfikować i osadzać.

Qt, QtCreator, Creator, C++, Gentoo, KDE, Tutorial, Programowanie

Dodatkowo na tej planszy możemy zdefiniować nazwy pliku nagłówkowego oraz źródłowego projektu. Dobrym nawykiem, który Qt wymusza jest tworzenie dwóch plików. Plik nagłówkowy służy do definicji klasy (interfejsu), natomiast źródło służy do implementacji funkcji zdefiniowanych w nagłówku klasy (interfejsie).

Takie rozwiązanie świetnie porządkuje kod w imię motta „dziel i rządź”.

Jednocześnie Qt pyta nas, czy chcemy utworzyć formę (design) aplikacji i jaką nadać jej nazwę. Zwróćcie uwagę na to, że design posiada osobne rozszerzenie – .ui. Pliki z tym rozszerzeniem napisane są w QML (XML w wydaniu Qt) i opisują formularz/okienko, które za pomocą polecenia UIC (wykonywanego automatycznie przez Qt Creator) zostaną przerobione na odpowiednie pliki nagłówkowe i źródłowe.

Po zakończeniu konfiguracji tego panelu, klikamy przycisk Next.

Qt, QtCreator, Creator, C++, Gentoo, KDE, Tutorial, Programowanie

Na koniec mamy możliwość dodania naszego nowego projektu do systemu kontroli wersji jak Subversion, Git czy CVS.

Wyświetlane jest także podsumowanie tworzonego projektu. Na liście znajdziecie jeszcze dodatkowe dwa pliki stworzone przez kreator – main.cpp, inicjujący aplikację Qt oraz NazwaProjektu.pro – plik odpowiadający za konfigurację całego projektu.

Klikamy „Finish”. Projekt jest gotowy.

Qt, QtCreator, Creator, C++, Gentoo, KDE, Tutorial, Programowanie

Jak widzimy, zmienił się nieco interfejs automatycznie przechodząc do projektu i wyświetlając jego drzewo. Możemy teraz kliknąć plik UI w folderze Forms – w moim przypadku mainwindow.ui – aby otworzyć design.

 

Design aplikacji

Qt, QtCreator, Creator, C++, Gentoo, KDE, Tutorial, Programowanie

Po kliknięciu w plik UI otworzył nam się design aplikacji a kod, który widzieliśmy na ekranie zniknął. Aby wrócić do edycji kodu, klikamy przycisk „Edit” w panelu po lewej stronie.

Designer wygląda zdecydowanie inaczej niż edytor kodu. Po lewej widoczne są kontrolki/elementy. Na środku widzimy podgląd naszego okienka. Prawa strona zajęta jest wyświetlaniem Object Inspectora (informującego o umieszczonych kontrolkach, layoutach czyli obiektach Qt). Poniżej, także z prawej strony widoczne jest okienko właściwości obiektu. Jest to standardowy element IDE opartego o klikacze, które zawarte już było w 1998 roku w Borland Delphi 1.0 czy JBuilderze. Jest to przydatny element IDE, który zmniejszy ilość „wklepywanych z palca” linii kodu.

Przygotowany projekt możecie teraz skompilować i odpalić klikając zieloną strzałkę w lewym panelu. Powinno się Wam pojawić mniej więcej takie okno:

Qt, QtCreator, Creator, C++, Gentoo, KDE, Tutorial, Programowanie

 

Więcej informacji o Qt Creatorze znajdziecie w kolejnych wpisach dotyczących poszczególnych zagadnień z dziedziny Qt :).

 

Pozdrawiam,

M.M.