Interfejs użytkownika z Qt Quick. Język QML – Kurs Qt #5

W poprzednim wpisie po raz pierwszy poruszyliśmy temat tworzenia interfejsu użytkownika korzystając z frameworka Qt. Tam jednak skupiliśmy się na podejściu Qt Widgets dedykowanym aplikacjom desktopowym. Za to dzisiaj dowiemy się czym jest język QML oraz jak potężne jest to rozwiązanie.

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!

Interfejs użytkownika multiplatformowo – Qt Quick i QML

Qt Quick jest modułem obecnym we frameworku, za którym idzie zupełnie inne podejście w tworzeniu interfejsu użytkownika. Aplikacje bazujące
na nim mogą być uruchamiane na wszystkich platformach wspieranych przez Qt wliczając w to nawet przeglądarkę. Na moduł składają się zarówno klasy dostępne z poziomu C++ jak i wprowadzony właśnie na potrzeby tego modułu język QML.

Frontend aplikacji napisany z wykorzystaniem tego modułu może w prosty sposób komunikować się z backendem napisanym w C++. Dzięki temu, w wyraźny sposób, możemy odseparować sferę wizualną projektu od jego logiki, co znacznie wpływa na elastyczność całej architektury. Podczas tego kursu przekonamy się z jak robić to poprawnie.

Język QML

Język QML (Qt Modeling Language) jest deklaratywnym językiem programowania. W przypadku korzystania z języka tego typu opisujemy efekt jaki chcemy osiągnąć, a nie sam sposób jego osiągnięcia. Korzysta się z niego głównie do implementacji interfejsu użytkownika, lecz logika aplikacji również może zostać oparta na tym właśnie języku. Osobiście tego nie zalecam, ale dobrze żebyś wiedział, że tak możliwość istnieje.

Sam język jest bardzo wydajny chociażby z tego powodu, że został napisany w C++ i na docelowych urządzeniach uruchamiany jest natywnie. Dodatkowo tam gdzie jest to możliwe korzysta się z akceleracji sprzętowej, aby jeszcze bardziej zwiększyć wydajność języka co ma szczególne znaczenie tam gdzie zasobów jest po prostu mało, czyli na urządzeniach wbudowanych.  Język korzysta z dobrodziejstw kompilacji Just-In-Time i Ahead-Of-Time.

Jak zaraz sam się przekonasz język QML jest na tyle intuicyjny oraz czytelny, że edytowanie interfejsu użytkownika korzystając z niego nie powinno sprawić większej trudności nikomu wliczając w to na przykład designerów. W dodatku został on zaprojektowany tak, że bardzo łatwo osiągnąć efekt założony w projekcie graficznym. Nawet istnieje rozwiązanie pozwalające wyeksportować projekt z Photoshopa do QML właśnie.



Przy nauce QT’a może pomóc Ci ta książka

Składnia języka

Można powiedzieć, że język QML przypomina nieco format JSON i takie porównanie wydaje się mieć sens patrząc na kod. Dodatkowo właściwości typów mogą przypominać nam arkusz stylów znany z CSS. Rzućmy okiem jak wyglądałby kod prostej aplikacji napisanej w języku QML:

Z kolei tak wyglądałaby uruchomiona aplikacja:

Itemy w QML zorganizowane są z uwzględnieniem zachowania drzewiastej struktury. Przekłada się to zastosowanie mechanizmu rodzicielstwa, tak samo jak w przypadku obiektów w C++. Dlatego właśnie, w powyższym przykładzie, linia „anchors.centerIn: parent” pomogła nam odnieść się do rodzica prostokąta, czyli całego okna. Dzięki temu odniesieniu mogliśmy wyśrodkować prostokąt. W podobny sposób można odnieść się do dzieci danego Itemu poprzez odwołanie się do właściwości children tak jak w przykładzie poniżej. Odwołujemy się w nim do szerokości i wysokości tekstu, aby na jego podstawie określić wymiary otaczającego go prostokąta.

Efekt takiego zabiegu:

Większość typów dostępnych w QML bazuje na typie Item, więc w szczególności zapraszam do zapoznania się ze wszystkimi właściwościami tego typu w dokumentacji. Zanim przejdziemy dalej zwróćmy szczególną uwagę na właściwości x oraz y określające współrzędne itemu względem rodzica. Właśnie fakt, że umieszczamy itemy względem rodzica chciałbym podkreślić. Myślę, że jeden rzut oka na kod i efekt wystarczy, aby wszystko stało się jasne.

 

Koncepty języka

Język QML rozwijany jest od 2010 roku i od tego czasu namnożyło się różnego rodzaju podmodułów do wykorzystania w aplikacjach Qt Quick. Do nich i do wielu innych zamysłów obecnych w module bazowym będziemy jeszcze wracać – każdy z nich lepiej jest poruszyć oddzielnie. W tym wpisie poprzestaniemy na wymienieniu kilku mniej obszernych, ale nie mniej ważnych konceptów. Całą resztę znajdziesz w spisie treści kursu.

Pozycjonowanie elementów z Anchors

Anchors (z ang. kotwice) to koncept pozycjonowania elementów bazując na ich geometrii i siedmiu niewidocznych liniach względem, których pozycjonowanie się odbywa. Pamiętaj żeby nie bać się zaglądać do dokumentacji, a w szczególności dokumentacji tak dobrej jak ta od Qt 😉 Pod tym linkiem znajdziesz link, gdzie mechanizm jest szczegółowo opisany.

Język Qml - pozycjonowanie z Anchors

W jednym z przykładów powyżej prostokąt utworzony został z właściwością anchors.centerIn: parent, która posłużyła do wyśrodkowania obiektu względem rodzica. Zamiast rodzica może to być też id innego obiektu. Taki zabieg zaprezentowany jest poniżej:

Efekt:

Bądź ostrożny używając właściwości id. W danym pliku .qml może istnieć tylko jeden element o wskazanym id.

Własne properties

Jak już z pewnością zauważyłeś, programowanie interfejsu użytkownika w QML w dużej mierze opiera się na przypisywaniu wartości do właściwości (ang. properties) obecnych w typach. QML wprowadza możliwość definiowania własnych właściwości dla obiektów, które później mogą być używane wielokrotnie. Do tematu z pewnością wrócimy. Na ten moment poprzestaniemy na definiowaniu własnych właściwości dla konkretnych obiektów. Spójrz na poniższy przykład:

Efekt:

Język Qml - system properties

Jak widzisz nie dość, że stworzyliśmy własną właściwość to jeszcze wykorzystaliśmy ją przy definiowaniu koloru prostokątów.

Właściwości można zdefiniować na kilka sposobów:

A to tylko kilka z możliwości. Jeżeli chcesz dowiedzieć się więcej na temat definiowania właściwości to odsyłam do dokumentacji.

Jak pewnie zauważyłeś definiowane właściwości mogą mieć typ z góry narzucony przez programistę, ale również możemy użyć słowa kluczowego var tak jak w języku JavaScript. Wówczas typ właściwości zostanie wydedukowany na podstawie jej wartości. Listę dostępnych typów znajdziesz również w dokumentacji.

Sygnały i sloty w QML

Omawiany już w ramach tego kursu mechanizm sygnałów i slotów obecny jest również w języku QML. O tym jak definiować własne sygnały jeszcze sobie powiemy, ale jest to sprawa tak kluczowa, że nie mogę tego konceptu po prostu pominąć.

Mechanika stojąca za emitowaniem sygnałów w QML jest taka sama jak w C++. Coś się dzieje – emitowany jest sygnał. Jeśli istnieje zarejestrowany slot – zostaje on wywołany. Rzućmy okiem na poniższy kod i efekt jego działania:

Język Qml - mechanizm sygnałów i slotów

Obiekt typu MouseArea posiada sygnał cicked(). Aby stworzyć deklarację slotu wewnątrz utworzonego obiektu, należy skorzystać z następującego formatu „on + NazwaSygnału”. Dla sygnału clicked(), nazwa slotu będzie miała postać onClicked. Schemat ten powtarza się dla wszystkich sygnałów. Zawsze jest to nazwa sygnału z wielkiej litery poprzedzona prefiksem „on”. Wówczas możemy napisać wewnątrz własny slot w stylu JavaScript lub odwołać się do istniejącej funkcji.

Innym sposobem jest skorzystanie z elementu Connections:

Tworzenie projektu z Qt Quick

Jeżeli chcesz stworzyć swój pierwszy projekt bazując na Qt Quick, polecam skorzystać z jednego z gotowych szablonów projektów. Jeżeli korzystasz z Qt Creatora to w menu File wybierz New File or Project a następnie w zakładce Application wybierz jeden z szablonów rozpoczynających się słowami nazwą modułu, czyli Qt Quick.

Gotową aplikację z pustym oknem otrzymasz wybierając opcję podświetloną na zrzucie ekranu. Pozostałe pozwolą na stworzenie aplikacji z gotowymi sposobami organizacji zawartości. Ciekawym narzędziem dostępnym w Qt Creatorze jest QML Scene, czyli narzędzie do prototypowania interfejsu użytkownika napisanego w QML. Chcąc z niego skorzystać należy wybraż następującą opcję na pasku menu: Tools->External->Qt Quick->Qt Quick 2 Preview (qmlscene).

Narzędzie to jest przydatne w momencie, gdy chcemy podejrzeć efekt naszej pracy, bez kompilowania całego projektu.

Podsumowanie

To by było na tyle w tym wpisie dotyczącym podstaw języka QML i modułu Qt Quick. Niemniej to na pewno nie koniec wpisów na ten temat. Możesz spodziewać się kolejnych obszernych materiałów. Już w następnym wpisie wielka konfrontacja Qt Widgets versus Qt Quick i QML. Wymienimy sobie mocne i słabe strony obu rozwiązań i postaramy się wybrać jedyne słuszne o ile to w ogóle możliwe 😊
Jeżeli nie możesz doczekać się kolejnych wpisów to zajrzyj do tej darmowej książki poświęconej QML.
Nie zapomnij też zostawić komentarza i lajka na profilu binarnie.pl na FB.

You Might Also Like
Dodaj komentarz

icon