[SOLVED ]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
    }
}

ModeloLancamentos.qml

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

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
                    }
                }
            }
        }
    }
}

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
    }
}

[p3c0]

Hi @guidupas,
alias's works with property and not with the Component itself.

[t3685]

@guidupas

Try renaming your alias to something else:

property alias myRemoveMouseArea: removeMouseArea

[guidupas]

@t3685

It did not work.

@p3c0

Could you help me to solve it?

[t3685]

@guidupas

Did read your code properly. You can't have alias to properties/elements of a Component.

[guidupas]

@t3685
First of all, thank you for the replies.

Yes, I figured that out. Bur how could I make it work. There is someway to do something that could solve this?

Thank you very much.

[t3685]

@guidupas

Hi,

You need to work top down: create the necessary properties in delegateItem your removeMouseArea can access or have it call function or signals of delegateItem as needed. Why are you putting it in a Componentin the first place?

[guidupas]

@t3685

Hey.

Because it is to delegate a model. When I put it inside an Item it behaves differently then a Component.

[guidupas]

@t3685 @p3c0

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
}

}

ModeloLancamentos.qml

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

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
                }
            }
        }
    }
}

}

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
}

}

[p3c0]

@guidupas You can keep a simple bool property, Bind this to the visible property of both the Rectangle. Then when needed update this property to true or false which in turn will modify the visible property of Rectangle.

property bool rectVisible : false

Rectangle {
    id: rec1
    visible: rectVisible
}

Rectangle {
    id: rec2
    visible: !rectVisible
}

[guidupas]

@p3c0

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.

[p3c0]

@guidupas
main.qml contains Mainform where it then loads the delegate. So declaring a property in main.qml itself will be accessible from MainForm as well as the Delegate. It should work.

Apart from that I found some other issues where in you may think its not working:

• The ListView in Mainform fills the whole container thus hiding those 2 Rectangle's. Either set z property for those Rects higher than that of ListView or reduce the ListView height.
• Provide a width and height for those 2 Rectangle's or else the wont be
  rendered.

[guidupas]

@p3c0 Thank you for all your 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"
    }
}

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
    }
}

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;
                        }
                    }
                }
            }
        }
    }
}

Model.qml

import QtQuick 2.0

ListModel {
    
}

[p3c0]

@guidupas You're Welcome :)
Use ``` (3 backticks) instead of [Code] when posting code here. It follows markdown language syntax. I'll edit it for now.