QML

Z Wikipedii, wolnej encyklopedii
Skocz do: nawigacja, szukaj
QML
Pojawienie się 2009
Paradygmat wieloparadygmatowy, deklaratywny, skryptowy
Typowanie dynamiczne, silne
Implementacje Qt Declarative
Pochodne {{{pochodne}}}
Aktualna wersja stabilna 4.8.2[1]
Aktualna wersja testowa {{{wersja testowa}}}
Twórca Nokia
Licencja {{{licencja}}}
Platforma sprzętowa wieloplatformowy
Platforma systemowa wieloplatformowy
Strona internetowa dla programistów
QML
Rozszerzenia pliku .qml
Typ język skryptowy

QML (Qt Meta Language, Qt Modeling Language[2]) – 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)[3] 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[edytuj | edytuj kod]

Podstawowa składnia[edytuj | edytuj kod]

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)[edytuj | edytuj kod]

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ę[edytuj | edytuj kod]

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[edytuj | edytuj kod]

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[edytuj | edytuj kod]

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++[edytuj | edytuj kod]

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

Podobne założenia[edytuj | edytuj kod]

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[edytuj | edytuj kod]

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[edytuj | edytuj kod]

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.

Przypisy

  1. Qt 4.8.2 Released (ang.). 22 maja 2012.
  2. Henrik Hartz (Product Manager for Qt Software at Nokia) comment on the name (ang.). 24 sierpnia 2009. [dostęp 2011-06-14].
  3. Qt 4.7: QML Elements (ang.). W: Doc.qt.nokia.com [on-line]. [dostęp 2010-09-22].

Linki zewnętrzne[edytuj | edytuj kod]