QML構文の基礎

QMLは、オブジェクトをその属性、および他のオブジェクトとの関係や変化への反応という観点から定義できる、マルチパラダイム言語です。 属性や動作の変更が、段階的に処理される一連の文によって表現される純粋な命令型コードとは対照的に、QML の宣言型構文では、属性や動作の変更が個々のオブジェクトの定義に直接組み込まれています。また、複雑なカスタムアプリケーションの動作が必要な場合には、これらの属性定義に命令型コードを含めることもできます。

QMLソースコードは、通常、QMLドキュメント（QMLコードの独立したドキュメント）を通じてエンジンによって読み込まれます。これらを使用してQMLオブジェクト型を定義し、アプリケーション全体で再利用することができます。なお、QMLファイル内でQMLオブジェクト型として宣言するには、型名は大文字で始まる必要があります。

インポート文

QMLドキュメントでは、ファイルの先頭に1つ以上のインポートを記述することができます。インポートには、以下のいずれかを指定できます。

• QMLモジュール
• QMLドキュメントとして型定義を含む相対ディレクトリ
• JavaScriptファイル

JavaScript ファイルをインポートする際は、そのファイルが提供するプロパティやメソッドにアクセスできるよう、修飾名を指定してインポートする必要があります。

各種インポートの一般的な形式は以下の通りです：

• import <ModuleIdentifier> [<Version.Number>] [as <Qualifier>]
• import "<Directory>"
• import "<JavaScriptFile>" [as <ScriptIdentifier>]

例：

• import QtQuick 2.0
• import QtQuick.LocalStorage 2.0 as Database
• import "../privateComponents"
• import "somefile.js" as Script

QMLのインポートに関する詳細については、「QML構文 - インポート文」のドキュメントを参照してください。

オブジェクトの宣言

構文的には、QMLコードのブロックは、作成されるQMLオブジェクトのツリーを定義します。オブジェクトは、作成されるオブジェクトの型およびそのオブジェクトに付与される属性を記述するオブジェクト宣言を使用して定義されます。また、各オブジェクトは、ネストされたオブジェクト宣言を使用して子オブジェクトを宣言することもできます。

オブジェクト宣言は、オブジェクト型の名前と、その後に続く中括弧のセットで構成されます。すべての属性および子オブジェクトは、これらの中括弧の内に宣言されます。

以下に、簡単なオブジェクト宣言の例を示します。

Rectangle {
    width: 100
    height: 100
    color: "red"
}

これは、Rectangle 型のオブジェクトを宣言し、その後に、そのオブジェクトに対して定義された属性を囲む中括弧が続きます。Rectangle 型は、QtQuick モジュールによって提供される型であり、この例で定義されている属性は、矩形のwidth 、height 、color プロパティの値です。（これらは、Rectangle のドキュメントで説明されているように、Rectangle 型によって提供されるプロパティです。）

上記のオブジェクトは、QMLドキュメントの一部である場合、エンジンによって読み込まれることができます。つまり、以下のように、QtQuick モジュールをインポートするimport文（Rectangle 型を利用可能にするため）をソースコードに追加すればよいのです：

import QtQuick 2.0

Rectangle {
    width: 100
    height: 100
    color: "red"
}

上記のコードを.qml ファイルに記述し、QMLエンジンによって読み込まれると、QtQuick モジュールが提供するRectangle 型を使用して、Rectangle オブジェクトが作成されます：

Rectangle { width: 100; height: 100; color: "red" }

当然のことながら、この例で宣言されているRectangle オブジェクトは、いくつかのプロパティ値を定義しているに過ぎないため、実に単純なものです。より有用なオブジェクトを作成するには、オブジェクト宣言で他の多くの種類の属性を定義することができます。これらについては、QMLオブジェクト属性のドキュメントで説明されています。さらに、オブジェクト宣言では、後述するように子オブジェクトを定義することもできます。

子オブジェクト

どのオブジェクト宣言でも、ネストされたオブジェクト宣言を通じて子オブジェクトを定義できます。このようにして、どのオブジェクト宣言も、任意の数の子オブジェクトを含む可能性のあるオブジェクトツリーを暗黙的に宣言することになります。

たとえば、以下のRectangle オブジェクト宣言には、Gradient オブジェクト宣言が含まれており、その オブジェクト宣言には、さらに2つのGradientStop 宣言が含まれています。

import QtQuick 2.0

Rectangle {
    width: 100
    height: 100

    gradient: Gradient {
        GradientStop { position: 0.0; color: "yellow" }
        GradientStop { position: 1.0; color: "green" }
    }
}

このコードがエンジンによって読み込まれると、ルートにRectangle オブジェクトを持つオブジェクトツリーが作成されます。このオブジェクトにはGradient という子オブジェクトがあり、その子オブジェクトにはさらに2つのGradientStop という子オブジェクトがあります。

ただし、これはQMLオブジェクトツリーの文脈における親子関係であり、ビジュアルシーンの文脈におけるものではない点に注意してください。ビジュアルシーンにおける親子関係の概念は、QtQuick モジュールのItem 型によって提供されます。これは、ほとんどのQMLオブジェクトが視覚的にレンダリングされることを意図しているため、ほとんどのQML型の基底型となっています。 たとえば、Rectangle とText はどちらもItem を基底とする型であり、以下の例では、Text オブジェクトがRectangle オブジェクトの視覚的な子として宣言されています：

import QtQuick 2.0

Rectangle {
    width: 200
    height: 200
    color: "red"

    Text {
        anchors.centerIn: parent
        text: "Hello, QML!"
    }
}

上記のコードで、Text オブジェクトがそのparent 値を参照する場合、それはオブジェクトツリー上の親ではなく、ビジュアル上の親を指しています。 この場合、両者は同一です。つまり、Rectangle オブジェクトは、QMLオブジェクトツリーのコンテキストにおいても、視覚的なシーンのコンテキストにおいても、Text オブジェクトの親となります。ただし、parent プロパティを変更することで視覚的な親を変更することは可能ですが、オブジェクトツリーのコンテキストにおけるオブジェクトの親をQMLから変更することはできません。

(さらに、以前の例ではGradient オブジェクトを矩形のgradient プロパティに割り当てていましたが、今回の例では、Text オブジェクトがRectangle のプロパティに割り当てられることなく宣言されている点に注意してください。これは、Item のchildren プロパティが、このより便利な構文を可能にするために、その型のデフォルトプロパティとして設定されているためです。)

Item 型を用いたビジュアル・ペアレントの概念に関する詳細については、ビジュアル・ペアレントのドキュメントを参照してください。

コメント

QMLでのコメントの構文は、JavaScriptのそれと同様です：

• 1行コメントは // で始まり、その行の末尾で終わります。
• 複数行のコメントは /* で始まり、*/ で終わります。

Text {
    text: "Hello world!"    //a basic greeting
    /*
        We want this text to stand out from the rest so
        we give it a large size and different font.
     */
    font.family: "Helvetica"
    font.pointSize: 24
}

QMLコードの処理時、コメントはエンジンによって無視されます。コメントは、コードの特定の部分が何を実行しているかを説明するために役立ちます。これは、将来参照するためでも、他の人に実装内容を説明するためでも同様です。

また、コメントを使用してコードの実行を阻止することもでき、これは問題の追跡に役立つ場合があります。

Text {
    text: "Hello world!"
    //opacity: 0.5
}

上記の例では、`opacity: 0.5` という行がコメントに変換されているため、Text オブジェクトの不透明度は通常のままになります。