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 na nim bazujące 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 czemu w wyraźny sposób możemy odseparować sferę wizualną projektu od jego logiki co znacznie wpływa na elastyczność całej architektury. W ramach tego kursu przekonamy się z czasem jak robić to poprawnie.

Język Qml

Język Qml jest deklaratywnym językiem programowania co wyjaśnia się tak, że opisujemy efekt jaki chcemy osiągnąć a nie sam sposób jego osiągnięcia. Wskazuje się używanie go do implementacji interfejsu użytkownika, ale w dalszym ciągu można oprzeć logikę aplikacji właśnie na tym języku. Osobiście tego nie popieram, 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.

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 ich struktury co przekłada się na to, że tak samo jak w przypadku obiektów w C++ zastosowano mechanizm rodzicielstwa. Dlatego na przykład w powyższym przykładzie „anchors.centerIn: parent” pomógł nam odnieść się do rodzica prostokąta, czyli całego okna, aby go w nim wyśrodkować. 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, gdzie odwołujemy się 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, ale do nich i do wielu innych konceptów obecnych w module bazowym będziemy jeszcze wracać. Po prostu lepiej jest każdy z nich poruszyć oddzielnie. W tym wpisie poprzestaniemy na wymienienie kilku mniej obszernych ale nie mniej ważnych konceptów. Całą resztę znajdziesz w spisie treści kursu (pod warunkiem, że zdążyłem je opisać).

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. Tak jak 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ł i w przypadku, gdy zarejestrowany jest również slot to 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 zarejestrować slot należy wewnątrz utworzonego obiektu napisać 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 to najlepiej zrobisz korzystając 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.

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

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