Unable to access custom property

Hi everyone!
I'm experimenting with QtQuick and started with 1.0 because that's what my distro ships by default.
I made a couple of custom objects and am trying to create some reusable object with them, but I can't access one of the custom properties.
Would someone please point me to the right direction on this? Thank you!

-- Information and code below --

The errors I get are:

Code:

---

app.qml:17:18: Cannot assign to non-existent property "name"
//or 
app.qml:17:13: Invalid grouped property access

---

Here's my directory structure:

Code:

---

app/
├── Components
│** ├── Button.qml
│** ├── fa-glyphs.js
│** └── FAicon.qml
├── app.kdev4
├── app.qml
└── Resources
    └── fonts
        └── fontawesome.ttf

---

Here's the scripts:

FAicon.qml

Code:

---

import QtQuick 1.0
import "fa-glyphs.js" as FontAwesome
 
Item {
    property alias color: textContent.color
    property alias size: textContent.font.pointSize
    property variant iconSet: FontAwesome.Icons
    property variant name: "none"
    FontLoader {
        source: "../Resources/fonts/fontawesome.ttf"
    }
 
    Text {
        id: textContent
        font.family: "FontAwesome"
        text: parent.iconSet[parent.name]
    }
}

---

Button.qml

Code:

---

import QtQuick 1.0
 
Rectangle {
    property alias text: buttonText.text
    property alias icon: icon // Also tried with property variant icon: icon, but got the second error.
 
    FAicon {
        id: icon
        name: "none"
    }
 
    Text {
        id: buttonText
        anchors.centerIn: parent
    }
}

---

And app.qml

Code:

---

import QtQuick 1.0
import "Components"
 
Rectangle {
    id: mainwindow
    width: 800
    height: 500
    color: "#cecece"
 
    Rectangle {
        id: sidebar
        width: parent.width * 0.2
        height: parent.height
        color: "#272727"
 
        Button {
            icon.name: "envelope" // This line throws errors
            text: "New message!"
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }
 
    Rectangle {
        id: messageView
        width: parent.width * 0.3
        height: parent.height
        color: "darkred"
        anchors.left: sidebar.right
    }
}

---

Entities defined within an element are not visible outside an element. You cannot access "icon" or "buttonText" from outside of a Button instance.

You can do this though:

Code:

---

import QtQuick 1.0
 
Rectangle {
    property alias text: buttonText.text
    property alias icon: icon.name
 
    FAicon {
        id: icon
        name: "none"
    }
 
    Text {
        id: buttonText
        anchors.centerIn: parent
    }
}

---

And then use it like you did with button text:

Code:

---

Button {
            icon: "envelope"
            text: "New message!"
            anchors.horizontalCenter: parent.horizontalCenter
}

---

Alternatively you can let the user provide a component for an icon:

Code:

---

import QtQuick 1.0
 
Rectangle {
    property alias text: buttonText.text
    property alias icon: icon // Also tried with property variant icon: icon, but got the second error.
 
    property Component icon
 
    Loader {
        component: icon
    }
 
    Text {
        id: buttonText
        anchors.centerIn: parent
    }
}

---

And then:

Code:

---

Button {
            icon: FAicon { ... }
            text: "New message!"
            anchors.horizontalCenter: parent.horizontalCenter
}

---

BTW. I really advise you use Qt5 and QtQuick 2.x instead of QtQuick 1. It has much more capabilities.