Cant access alias from Item

[guidupas]

Hello!

I am trying to access an alias from an Item and it is not working. Can anyone help me?

In main.qml, when I try DelegateLancamentos.removeMouseArea: it returns this message:
qrc:/DelegateLancamentos.qml:10 Invalid alias reference. Unable to find id "removeMouseArea"

Code below:

MainForm.ui.qml

Rectangle {
    id: mainContainer
 
    property alias lancamentosListView: lancamentosListView
 
    width: 360
    height: 640
 
    ListView {
        id: lancamentosListView
 
        anchors.fill: parent
 
        clip: true
 
        spacing: 10
    }
}

Rectangle {
    id: mainContainer

    property alias lancamentosListView: lancamentosListView

    width: 360
    height: 640

    ListView {
        id: lancamentosListView

        anchors.fill: parent

        clip: true

        spacing: 10
    }
}

To copy to clipboard, switch view to plain text mode 

ModeloLancamentos.qml

ListModel {
    ListElement {
        valor: "25.000,00"
        tipo: "Investimento"
    }
}

ListModel {
    ListElement {
        valor: "25.000,00"
        tipo: "Investimento"
    }
}

To copy to clipboard, switch view to plain text mode 

DelegateLancamentos.qml

Item {
    id: delegateItem
 
    property Component delegateComponent: delegateComponent
    property alias removeMouseArea: removeMouseArea
 
    Component {
        id: delegateComponent
 
        Row {
            Column {
                width: 360 * 0.96 / 8 * 6
                //width: Screen.width * 0.96 / 8 * 6
 
                Text {
                    text: "<strong>" + "Valor: " + valor + "</strong>"
                    font.pixelSize: 16
                }
                Text {
                    text: "Tipo: " + tipo
                    font.pixelSize: 16
                }
            }
 
            Column {
                width: 360 * 0.96 / 8
                //width: Screen.width * 0.96 / 8
 
                Image {
                    id: removeImage
                    source: "Imagens/remove.png"
 
                    width: 35
 
                    fillMode: Image.PreserveAspectFit
 
                    MouseArea {
                        id: removeMouseArea
 
                        anchors.fill: parent
                    }
                }
            }
        }
    }
}

Item {
    id: delegateItem

    property Component delegateComponent: delegateComponent
    property alias removeMouseArea: removeMouseArea

    Component {
        id: delegateComponent

        Row {
            Column {
                width: 360 * 0.96 / 8 * 6
                //width: Screen.width * 0.96 / 8 * 6

                Text {
                    text: "<strong>" + "Valor: " + valor + "</strong>"
                    font.pixelSize: 16
                }
                Text {
                    text: "Tipo: " + tipo
                    font.pixelSize: 16
                }
            }

            Column {
                width: 360 * 0.96 / 8
                //width: Screen.width * 0.96 / 8

                Image {
                    id: removeImage
                    source: "Imagens/remove.png"

                    width: 35

                    fillMode: Image.PreserveAspectFit

                    MouseArea {
                        id: removeMouseArea

                        anchors.fill: parent
                    }
                }
            }
        }
    }
}

To copy to clipboard, switch view to plain text mode 

main.qml

Window {
    visible: true
 
    width: 360
    height: 640
 
    maximumHeight: 640
    minimumHeight: 640
 
    maximumWidth: 360
    minimumWidth: 360
 
    title: "InvestmentC-Mobile"
 
    MainForm {
        anchors.fill: parent
 
        mainContainer.width: parent.width
        mainContainer.height: parent.height
 
        lancamentosListView.model: modeloLancamentos
        lancamentosListView.delegate: delegateLancamentos.delegateComponent
 
        DelegateLancamentos.removeMouseArea:
        {
            modeloLancamentos.remove(index);
        }
    }
 
    ModeloLancamentos{
        id: modeloLancamentos
    }
 
    DelegateLancamentos {
        id: delegateLancamentos
    }
}

Window {
    visible: true

    width: 360
    height: 640

    maximumHeight: 640
    minimumHeight: 640

    maximumWidth: 360
    minimumWidth: 360

    title: "InvestmentC-Mobile"

    MainForm {
        anchors.fill: parent

        mainContainer.width: parent.width
        mainContainer.height: parent.height

        lancamentosListView.model: modeloLancamentos
        lancamentosListView.delegate: delegateLancamentos.delegateComponent

        DelegateLancamentos.removeMouseArea:
        {
            modeloLancamentos.remove(index);
        }
    }
    
    ModeloLancamentos{
        id: modeloLancamentos
    }

    DelegateLancamentos {
        id: delegateLancamentos
    }
}

To copy to clipboard, switch view to plain text mode 

[wysota]

Line 24 of main.qml doesn't seem to be valid. What is it supposed to do?

[guidupas]

Hello wysota!

Thanks for the reply

What I really need is that:

In MainForm.ui.qml I have two rectangle. I need when i click the mouse area from a delegate component set rec1.visible = false and rec2.visible = true (files below)

How can I do that?

MainForm.ui.qml
 
Rectangle {
    id: mainContainer
 
    property alias lancamentosListView: lancamentosListView
    property alias rc1: rec1
    property alias rc2: rec2
 
    width: 360
    height: 640
 
    ListView {
        id: lancamentosListView
 
        anchors.fill: parent
 
        clip: true
 
        spacing: 10
    }
 
    Rectangle {
        id: rec1
    }
 
    Rectangle {
        id: rec2
    }
}

MainForm.ui.qml

Rectangle {
    id: mainContainer

    property alias lancamentosListView: lancamentosListView
    property alias rc1: rec1
    property alias rc2: rec2

    width: 360
    height: 640

    ListView {
        id: lancamentosListView

        anchors.fill: parent

        clip: true

        spacing: 10
    }

    Rectangle {
        id: rec1
    }

    Rectangle {
        id: rec2
    }
}

To copy to clipboard, switch view to plain text mode 

ModeloLancamentos.qml
 
ListModel {
    ListElement {
        valor: "25.000,00"
        tipo: "Investimento"
    }
}

ModeloLancamentos.qml

ListModel {
    ListElement {
        valor: "25.000,00"
        tipo: "Investimento"
    }
}

To copy to clipboard, switch view to plain text mode 

DelegateLancamentos.qml
 
Item {
    id: delegateItem
 
    property Component delegateComponent: delegateComponent
    property alias removeMouseArea: removeMouseArea
 
    Component {
        id: delegateComponent
 
        Row {
            Column {
                width: 360 * 0.96 / 8 * 6
                //width: Screen.width * 0.96 / 8 * 6
 
                Text {
                    text: "<strong>" + "Valor: " + valor + "</strong>"
                    font.pixelSize: 16
                }
                Text {
                    text: "Tipo: " + tipo
                    font.pixelSize: 16
                }
            }
 
            Column {
                width: 360 * 0.96 / 8
                //width: Screen.width * 0.96 / 8
 
                Image {
                    id: removeImage
                    source: "Imagens/remove.png"
 
                    width: 35
 
                    fillMode: Image.PreserveAspectFit
 
                    MouseArea {
                        id: removeMouseArea
 
                        anchors.fill: parent
                    }
                }
            }
        }
    }
}

DelegateLancamentos.qml

Item {
    id: delegateItem

    property Component delegateComponent: delegateComponent
    property alias removeMouseArea: removeMouseArea

    Component {
        id: delegateComponent

        Row {
            Column {
                width: 360 * 0.96 / 8 * 6
                //width: Screen.width * 0.96 / 8 * 6

                Text {
                    text: "<strong>" + "Valor: " + valor + "</strong>"
                    font.pixelSize: 16
                }
                Text {
                    text: "Tipo: " + tipo
                    font.pixelSize: 16
                }
            }

            Column {
                width: 360 * 0.96 / 8
                //width: Screen.width * 0.96 / 8

                Image {
                    id: removeImage
                    source: "Imagens/remove.png"

                    width: 35

                    fillMode: Image.PreserveAspectFit

                    MouseArea {
                        id: removeMouseArea

                        anchors.fill: parent
                    }
                }
            }
        }
    }
}

To copy to clipboard, switch view to plain text mode 

main.qml
 
Window {
    visible: true
 
    width: 360
    height: 640
 
    maximumHeight: 640
    minimumHeight: 640
 
    maximumWidth: 360
    minimumWidth: 360
 
    title: "InvestmentC-Mobile"
 
    MainForm {
        anchors.fill: parent
 
        mainContainer.width: parent.width
        mainContainer.height: parent.height
 
        lancamentosListView.model: modeloLancamentos
        lancamentosListView.delegate: delegateLancamentos.delegateComponent
 
        DelegateLancamentos.removeMouseArea:
        {
            modeloLancamentos.remove(index);
        }
    }
 
    ModeloLancamentos{
        id: modeloLancamentos
    }
 
    DelegateLancamentos {
        id: delegateLancamentos
    }
}

main.qml

Window {
    visible: true

    width: 360
    height: 640

    maximumHeight: 640
    minimumHeight: 640

    maximumWidth: 360
    minimumWidth: 360

    title: "InvestmentC-Mobile"

    MainForm {
        anchors.fill: parent

        mainContainer.width: parent.width
        mainContainer.height: parent.height

        lancamentosListView.model: modeloLancamentos
        lancamentosListView.delegate: delegateLancamentos.delegateComponent

        DelegateLancamentos.removeMouseArea:
        {
            modeloLancamentos.remove(index);
        }
    }
    
    ModeloLancamentos{
        id: modeloLancamentos
    }

    DelegateLancamentos {
        id: delegateLancamentos
    }
}

To copy to clipboard, switch view to plain text mode 

[wysota]

Declare a signal in DelegateLancamentos and have it emitted when the area is clicked. Then provide a handler for that signal wherever you use that element. If you need, you can expose a property in main element of MainForm.ui.qml that tells which of the two rectangles should be visible so that it is easier to perform the task you want from within main.qml.

I have a feeling that your thinking is too much imperative. You are working within a declarative environment so try making your code more declarative. E.g. don't think what happens if you click on the mouse area but rather think when should each of the rectangles be visible.

Consider the following imperative code:

Item {
  Rectangle { id: r1: visible: true }
  Rectangle { id: r2: visible: false }
 
  MouseArea {
    anchors.fill: parent
    onClicked: { r1.visible = false; r2.visible = true }
  }
}

Item {
  Rectangle { id: r1: visible: true }
  Rectangle { id: r2: visible: false }

  MouseArea {
    anchors.fill: parent
    onClicked: { r1.visible = false; r2.visible = true }
  }
}

To copy to clipboard, switch view to plain text mode 

And its possible declarative counterpart:

Item {
  property bool r2Visible: false
 
  Rectangle { id: r1: visible: !r2.visible /* or !r2Visible */ }
  Rectangle { id: r2: visible: r2Visible }
 
  MouseArea {
    anchors.fill: parent
    onClicked: { r2Visible = true }
  }
}

Item {
  property bool r2Visible: false

  Rectangle { id: r1: visible: !r2.visible /* or !r2Visible */ }
  Rectangle { id: r2: visible: r2Visible }

  MouseArea {
    anchors.fill: parent
    onClicked: { r2Visible = true }
  }
}

To copy to clipboard, switch view to plain text mode 

Alternatively a state machine can be used to achieve a similar result without "r2Visible" property.

[guidupas]

Hey wysota

But where I declare the property. I tried to declare inside MainForm.ui.qml, inside MainForm at main.qml and inside DelegateLancamentos.qml. In neither of them I could access the property from the MouseArea inside the delegate component.

[wysota]

In neither of them I could access the property from the MouseArea inside the delegate component.

Look at my second code snippet. Line #2 contains the property and line #9 contains a reference to it. Based on that you can see the property should be placed in delegateItem.

[guidupas]

wysota, thank you very much for the help. It worked.

I am posting here a minimal example just to exemplify for who needs.

MainForm.ui.qml

import QtQuick 2.4
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
 
Rectangle {
    id: mainContainer
 
    property alias mainContainerA: mainContainer
    property alias buttonA: button
    property alias listviewA: listView
    property alias rect1A: rect1
    property alias rect2A: rect2
 
    width: 600
    height: 600
 
    Button {
        id: button
 
        anchors.top: parent.top
 
        text: "Insert value"
 
        height: parent.height * 0.1
        width: parent.width
    }
 
    ListView {
        id: listView
 
        anchors.top: button.bottom
 
        clip: true
 
        height: parent.height * 0.5
        width: parent.width
    }
 
    Rectangle {
        id: rect1
 
        visible: true
 
        anchors.top: listView.bottom
 
        width: parent.width
        height: parent.height * 0.4
 
        color: "blue"
    }
 
    Rectangle {
        id: rect2
 
        visible: false
 
        anchors.top: listView.bottom
 
        width: parent.width
        height: parent.height * 0.4
 
        color: "red"
    }
}

import QtQuick 2.4
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1

Rectangle {
    id: mainContainer

    property alias mainContainerA: mainContainer
    property alias buttonA: button
    property alias listviewA: listView
    property alias rect1A: rect1
    property alias rect2A: rect2

    width: 600
    height: 600

    Button {
        id: button

        anchors.top: parent.top

        text: "Insert value"

        height: parent.height * 0.1
        width: parent.width
    }

    ListView {
        id: listView

        anchors.top: button.bottom

        clip: true

        height: parent.height * 0.5
        width: parent.width
    }

    Rectangle {
        id: rect1

        visible: true

        anchors.top: listView.bottom

        width: parent.width
        height: parent.height * 0.4

        color: "blue"
    }

    Rectangle {
        id: rect2

        visible: false

        anchors.top: listView.bottom

        width: parent.width
        height: parent.height * 0.4

        color: "red"
    }
}

To copy to clipboard, switch view to plain text mode 

main.qml

import QtQuick 2.4
import QtQuick.Window 2.2
 
Window {
    visible: true
 
    width: 600
    height: 600
 
    MainForm {
        anchors.fill: parent
 
        listviewA.model: modelM
        listviewA.delegate: delegateM.delegateComponent
 
        buttonA.onClicked: {
            modelM.append({valor: 100, tipo: 2, tipoIndex: 3});
        }
 
        rect1A.visible: delegateM.rect1Visible
        rect2A.visible: delegateM.rect2Visible
    }
 
    Delegate {
        id: delegateM
    }
 
    Model {
        id: modelM
    }
}

import QtQuick 2.4
import QtQuick.Window 2.2

Window {
    visible: true

    width: 600
    height: 600

    MainForm {
        anchors.fill: parent

        listviewA.model: modelM
        listviewA.delegate: delegateM.delegateComponent

        buttonA.onClicked: {
            modelM.append({valor: 100, tipo: 2, tipoIndex: 3});
        }

        rect1A.visible: delegateM.rect1Visible
        rect2A.visible: delegateM.rect2Visible
    }

    Delegate {
        id: delegateM
    }

    Model {
        id: modelM
    }
}

To copy to clipboard, switch view to plain text mode 

Delegate.qml

import QtQuick 2.4
import QtQuick.Controls 1.2
import QtQuick.Window 2.2
 
Item {
    id: delegateItem
 
    property Component delegateComponent: delegateComponent
    property bool rect1Visible: true
    property bool rect2Visible: false
 
    Component {
        id: delegateComponent
 
        Row {
            height: 53
 
            Column {
                width: 600 * 0.96 / 8 * 6
                //width: Screen.width * 0.96 / 8 * 6
 
 
                Text {
                    text: "<strong>" + "Valor: " + valor + "</strong>"
                    font.pixelSize: 16
                }
                Text {
                    text: "Tipo: " + tipo
                    font.pixelSize: 16
                }
            }
 
            Column {
                width: 600 * 0.96 / 8
                //width: Screen.width * 0.96 / 8
 
                Rectangle {
                    color: "grey"
                    width: 50
                    height: 50
                    MouseArea {
                        id: editMouseArea
 
                        anchors.fill: parent
 
                        onClicked:
                        {
                            rect1Visible = true;
                            rect2Visible = false;
                        }
                    }
                }
 
            }
 
            Column {
                width: 600 * 0.96 / 8
                //width: Screen.width * 0.96 / 8
 
                Rectangle {
                    color: "darkred"
                    width: 50
                    height: 50
                    MouseArea {
                        id: removeMouseArea
 
                        anchors.fill: parent
 
                        onClicked:
                        {
                            rect1Visible = false;
                            rect2Visible = true;
                        }
                    }
                }
            }
        }
    }
}

import QtQuick 2.4
import QtQuick.Controls 1.2
import QtQuick.Window 2.2

Item {
    id: delegateItem

    property Component delegateComponent: delegateComponent
    property bool rect1Visible: true
    property bool rect2Visible: false

    Component {
        id: delegateComponent

        Row {
            height: 53

            Column {
                width: 600 * 0.96 / 8 * 6
                //width: Screen.width * 0.96 / 8 * 6


                Text {
                    text: "<strong>" + "Valor: " + valor + "</strong>"
                    font.pixelSize: 16
                }
                Text {
                    text: "Tipo: " + tipo
                    font.pixelSize: 16
                }
            }

            Column {
                width: 600 * 0.96 / 8
                //width: Screen.width * 0.96 / 8

                Rectangle {
                    color: "grey"
                    width: 50
                    height: 50
                    MouseArea {
                        id: editMouseArea

                        anchors.fill: parent

                        onClicked:
                        {
                            rect1Visible = true;
                            rect2Visible = false;
                        }
                    }
                }

            }

            Column {
                width: 600 * 0.96 / 8
                //width: Screen.width * 0.96 / 8

                Rectangle {
                    color: "darkred"
                    width: 50
                    height: 50
                    MouseArea {
                        id: removeMouseArea

                        anchors.fill: parent

                        onClicked:
                        {
                            rect1Visible = false;
                            rect2Visible = true;
                        }
                    }
                }
            }
        }
    }
}

To copy to clipboard, switch view to plain text mode 

Model.qml

import QtQuick 2.0
 
ListModel {
 
}

import QtQuick 2.0

ListModel {
    
}

To copy to clipboard, switch view to plain text mode 

[wysota]

Sorry to criticise your code but you should really avoid exposing all those items as aliases.

[guidupas]

No problem. I am new in QML and thats is the best way to learn more. Your criticals and suggestions are welcome.

[wysota]

Exposing those items means you want to be able to access any property of each of them from anywhere. In that case you should probably either put all the code in one document or decide which set of properties to expose from each object and alias just that. Alternatively use components to decide about an internal item from outside of its parent item, just like views do with delegates.

Something along the lines of:

Item {
  id: root
 
  property Component rect1Component: Rectangle { /* default rec1 */ ... }
 
  Loader {
    id: rect1
    sourceComponent: rect1Component
  }
}

Item {
  id: root

  property Component rect1Component: Rectangle { /* default rec1 */ ... }

  Loader {
    id: rect1
    sourceComponent: rect1Component
  }
}

To copy to clipboard, switch view to plain text mode 

Then you can program that item from a document which instantiates it by assigning a different component to rect1Component.