===== Eigenschaften benutzen =====
In QML können wir ein Element gestalten indem wir seine Eigenschaften benutzen. Wir legen die Farbe, seine Breite und Länge und alle anderen Eigenschaften fest. Es gibt verschiedene Methoden sie festzulegen. Im Element selbst, aus einem anderen Element wenn wir das Element in eine Datei auslagern. Was wäre wenn wir im Element ein anderes Element hätten und wir es von Draußen ansprechen wollten. Über die Eigenschaft __//id//__ können wir andere Elemente in der gleichen Datei ansprechen. Betrachten wir das folgende Beispiel:

<code qml>
import QtQuick 2.7
import QtQuick.Window 2.2
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Rectangle {
        id: rechteck1
        color: rechteck2.color
        width: 100
        height: 100
    }
    Rectangle {
        id: rechteck2
        color: "blue"
        width: rechteck1.width
        height: rechteck1.height
        x: 100
    }
}
</code>

Hier haben wir zwei Rechtecke neben einander liegen. Rechteck 1 hat die Farbe von Rechteck 2 übernommen, wobei Rechteck 2 die Breite und die Länge von Rechteck 2 übernommen hat.
Genauso können Kind-Elemente die Werte der Eltern-Elemente übernehmen und umgekehrt.

<code qml>
import QtQuick 2.7
import QtQuick.Window 2.2
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Rectangle {
        id: rechteck1
        color: "red"
        width: 100
        height: 100
        border.color: inneresRechteck.border.color
        Rectangle {
            id: inneresRechteck
            color: parent.color
            height: 50
            width: 50
            border.color: Qt.lighter(parent.color)
        }
    }
}
</code>

Hier sehen wir, wenn wir die Eigenschaften von dem Eltern-Element übernehmen wollen können wir die __//parent//__ Bezeichnung verwenden. Wenn aber das Eltern-Element die Eigenschaftswerte vom Kind-Element übernehmen möchte, muss man die über die __//id//__ ansprechen, weil ein Eltern-Element mehrere Kind-Elemente haben könnte. Umgekehrt gilt das nicht.

===== Variablen deklarieren =====

Anders als auf die vorhandenen Eigenschaften zuzugreifen können wir auch Variable definieren. Das ist sinnvoll, wenn wir globale Eigenschaften definieren worauf mehrere Elemente Zugriff haben oder Kind-Elemente auf Eltern-Element zugreifen.
So müssen wir die Variablen deklarieren:

**//property <typ> <name>[:wert]//**

Der Wert ist optional anzugeben, bei Nichtzuweisung wird ein Standardwert genommen, bei __//int//__ wäre es die 0, bei __//string//__ ein leerer Text.
Für Variablen stehen folgende Typen zu Verfügung: __//int//__, __//double//__, __//string//__, __//color//__ und weitere.

Es gibt in Qml auch die Möglichkeit eine Art Referenz auf eine andere Variable zu deklarieren.

**//property alias <name>: <referenz>//**

Referenziert kann eigentlich alles, sogar Elemente und deren Eigenschaften. Es muss immer die __//id//__ angegeben werden.

Dafür wollen wir eine neue Qml Datei mit dem Namen **Button.qml** anlegen. Wir definieren den Namen des Buttons und seine Farbe. Die Eigenschaften die wir definiert haben werden dann von den Kind-Elementen übernommen.

<code qml>
//Button.qml
import QtQuick 2.7
Rectangle {
    id: button
    property string name: "button"
    property alias backgroundColor: button.color
    border.color: Qt.darker(backgroundColor)
    radius: 5
    width: 200
    height: 100
    Text {
        id: buttonText
        anchors.centerIn: parent
        text: parent.name
    }
}
</code>

<code qml>
//main.qml
import QtQuick 2.7
import QtQuick.Window 2.2
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Button {
        backgroundColor: "lightsteelblue"
        name: "unser Button"
    }
}
</code>

{{:frameworks:qt:qml:qmlt03:button.png?300|}}