This is an old revision of the document!

Components

It’s a good idea to recycle your code and create components for elements that can be reused.
To create a component, place a tree of elements in a file with a .qml extension.
- The tree is then available as a reusable component with the same name as the file but without the .qml extension.
Example:

import QtQuick 1.0
 
Image {
    id: button
    source: "images/button.png"
 
    Text {
        id: label
        text: "Push me!"
        color: "white"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 6
    }
 
    MouseArea {
       anchors.fill: parent
       onClicked: {
           label.text = "Thanks!";
       }
   }
}

reusing-buttonsimple.qml

import QtQuick 1.0
 
Item {
    id: myItem
    width: 400
    height: 400
 
    ButtonSimple {
        id: myButton
        anchors.horizontalCenter: myItem.horizontalCenter
        anchors.bottom: myItem.bottom
        anchors.bottomMargin: 20
    }
}

ButtonSimple.qml and reusing-buttonsimple.qml must be in the same directory.