QML

QML

Pojawienie się	2009
Paradygmat	wieloparadygmatowy, deklaratywny, skryptowy
Typowanie	dynamiczne, silne
Implementacje	Qt Declarative
Aktualna wersja stabilna	5.14.0 / 12 grudnia 2019; ponad 4 lata temu
Twórca	Nokia
Platforma sprzętowa	wieloplatformowy
Platforma systemowa	wieloplatformowy
Strona internetowa

QML

Rozszerzenia pliku	.qml
Typ	język skryptowy
Strona internetowa

QML (Qt Meta Language, Qt Modeling Language) – oparty na JavaScript deklaratywny język programowania służący do projektowania aplikacji silnie związanych z interfejsem graficznym. Jest częścią Qt Quick, komponencie Qt służącym do tworzenia interfejsów graficznych. QML jest używany głównie do tworzenia aplikacji mobilnych, w których płynny ruch (około 60 FPS) i interakcja z użytkownikiem są kluczowe.

Dokumenty QML opisują drzewo obiektów. Elementy QML (ang. QML Elements) dostarczane wraz z Qt są złożonym zestawem tworzenia bloków, grafiki (np. prostokątów, obrazów) i zachowań (np. stanu, przejścia, animacji). Te elementy mogą tworzyć kombinacje od prostych przycisków i suwaków aż do pełnych aplikacji z obsługą sieci.

Elementy QML mogą być rozszerzane za pomocą JavaScript umieszczonego bezpośrednio w kodzie lub pliku .js. Mogą też być płynnie włączane i rozszerzane za pomocą komponentów C++ przy użyciu Qt.

Składnia QML

Podstawowa składnia

import QtQuick 1.0

 Rectangle {
     id: canvas
     width: 200
     height: 200
     color: "blue"

     Image {
         id: logo
         source: "pics/logo.png"
         anchors.centerIn: parent
         x: canvas.height / 5
     }
 }

Obiekty są identyfikowane za pomocą typów, po których występują pary nawiasów, a obiekty zawsze muszą być pisane wielką literą. W powyższym przykładzie występują dwa obiekty: Rectangle i jego potomek Image. Pomiędzy nawiasami klamrowymi umieszcza się informacje o obiekcie i właściwości obiektu. Właściwości obiektu są przypisywane jako właściwość: wartość. W powyższym przykładzie obiekt Image ma właściwość source o przypisanej wartości "pics/logo.png". Właściwości i wartości są oddzielone od siebie dwukropkiem.

Identyfikatory (id)

Każdy obiekt może mieć nadaną niepowtarzalną etykietę zwaną identyfikatorem i oznaczaną przez „id”. Przypisanie identyfikatora umożliwia odnoszenie się do danego obiektu przez referencje do innych obiektów i skryptów. Pierwszy z niżej opisanych w QML prostokątów ma id „myRect”, a w drugim długość jest ustalana przez referencję do myRect.width, co oznacza, że będzie mieć taką samą długość jak wcześniej opisany prostokąt.

 Item {
     Rectangle {
         id: myRect
         width: 100
         height: 100
     }
     Rectangle {
         width: myRect.width
         height: 200
     }
 }

Należy pamiętać o tym, że wartość parametru „id” musi zaczynać się małą literą lub znaki podkreślenia (_) i może zawierać wyłącznie litery, cyfry i znaki podkreślenia

Właściwości zdefiniowane przez referencję

Właściwości zdefiniowane przez referencję określają wartości właściwości w sposób deklaratywny. Wartości właściwości zdefiniowanych przez referencje są zmieniane wtedy, kiedy inne właściwości lub wartości danych zmieniają się.

Tworzone są wtedy, kiedy właściwości to przypisane instrukcje JavaScript. Poniższy przykład używa dwóch referencji do powiązania rozmiaru prostokąta z rozmiarem otherItem.

 Rectangle {
     width: otherItem.width
     height: otherItem.height
 }

QML rozszerza standardowy interpreter JavaScript, dlatego każda instrukcja JavaScript może zostać użyta jako właściwość definiowana przez referencję. Mają one dostęp do właściwości obiektów, wywoływania funkcji oraz używania wbudowanych obiektów JavaScript, takich jak Date i Math.

Przykład:

 Rectangle {
     function calculateMyHeight() {
         return Math.max(otherItem.height, thirdItem.height);
     }
     anchors.centerIn: parent
     width: Math.min(otherItem.width, 10)
     height: calculateMyHeight()
     color: { if (width > 10) "blue"; else "red" }
 }

Stany

Stany są mechanizmem łączenia zmian właściwości w jednostkę semantyczną, np. przycisk ma dwa stany: „wciśnięty” i „nie wciśnięty”, aplikacja książki adresowej może być dostępna „tylko do odczytu” lub „do edycji” wpisów. Każdy element ma swój własny stan podstawowy. Każdy inny stan jest opisywany przez listę właściwości i wartości tych elementów, które różnią się od stanu podstawowego.

Przykład: W domyślnym stanie myRect jest na pozycji (0,0). W stanie „przeniesiony” (ang. moved) zostaje przeniesiony do punktu (50,50). Kliknięcie myszą wewnątrz obszaru MouseArea zmienia stan z domyślnego na „moved” i przenosi prostokąt.

 import QtQuick 1.0

 Item {
     id: myItem
     width: 200; height: 200

     Rectangle {
         id: myRect
         width: 100; height: 100
         color: "red"
     }
     states: [
         State {
             name: "moved"
             PropertyChanges {
                 target: myRect
                 x: 50
                 y: 50
             }
         }
     ]
     MouseArea {
         anchors.fill: parent
         onClicked: myItem.state = 'moved'
     }
 }

Zmiany stanów mogą być animowane z użyciem przejść (Transitions).

Na przykład dodanie tego fragmentu do powyższego elementu Item wykonuje animację przejścia do stanu „moved”.

 transitions: [
     Transition {
         NumberAnimation { properties: "x,y"; duration: 500 }
     }
  ]

Animacja

Animacje w QML są wykonywane przez animowane właściwości obiektów. Można animować wszystkie właściwości typu real, int, color, rect, point, size, i vector3d.

QML wspiera trzy rodzaje animacji: zwykłą animację własności, przejścia, i zachowania właściwości.

Najprostszą formą animacji jest PropertyAnimation, która pozwala na animację wszystkich wyżej wymienionych typów właściwości. Animacja właściwości może być określona jako wartość źródłowa przy użyciu Animation w składni właściwości, co jest przydatne w programowaniu powtarzających się animacji.

Następujący przykład opisuje efekt odbijania się:

 Rectangle {
     id: rect
     width: 120; height: 200

     Image {
         id: img
         source: "pics/qt.png"
         x: 60 - img.width/2
         y: 0

         SequentialAnimation on y {
             loops: Animation.Infinite
             NumberAnimation { to: 200 - img.height; easing.type: Easing.OutBounce; duration: 2000 }
             PauseAnimation { duration: 1000 }
             NumberAnimation { to: 0; easing.type: Easing.OutQuad; duration: 1000 }
         }
     }
 }

Integracja QML z Qt i C++

Programowanie w QML nie wymaga wcześniejszej znajomości Qt i C++, ale może być rozszerzone dzięki Qt.

Podobne założenia

QML udostępnia bezpośredni dostęp do następujących metod Qt

• QAction – typ akcji
• QObject signals and slots – dostępne jako funkcje wywoływane przez JavaScript
• QObject properties – dostępne jako zmienne w JavaScript
• QWidget – QDeclarativeView to widżet wyświetlający QML
• Q*Model – używany bezpośrednio w referencjach do danych, np. QAbstractItemModel

Przechwytywanie sygnałów Qt

Przechwytywanie sygnałów Qt pozwala na wykonanie akcji w odpowiedzi na zdefiniowane zdarzenia, na przykład element MouseArea może przechwytywać kliknięcie myszy, zwolnienie i wciśnięcie przycisku myszy:

 MouseArea {
     onPressed: console.log("mouse button pressed")
 }

Wszystkie widżety odpowiedzialne za przechwytywanie sygnałów mają nazwę rozpoczynającą się na „on”.

Narzędzia programistyczne

Z powodu dużego podobieństwa QML i JavaScriptu niemal wszystkie edytory wspierające JavaScript spełniają swoje zadanie, jednakże pełne wsparcie obejmujące kolorowanie składni, uzupełnianie kodu, dokumentację oraz podgląd programu jest zawarte w IDE Qt Creator 2.1.

Linki zewnętrzne

• Dokumentacja QML
• Wprowadzenie do QML
• Przykłady użycia QML
• Wpisy na blogu Qt Labs dotyczące QML. blog.qt.digia.com. [zarchiwizowane z tego adresu (2013-08-19)].
• Poradnik QML