ReferenceError: ueUserInfoListView is not defined

Question

I am working on QML/Qt app and I have following ListView, names ueUserInfoListView:

    ListView
    {
        id: ueUserInfoListView

        antialiasing: true

        Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter
        Layout.fillWidth: true
        Layout.fillHeight: true
        Layout.margins: 8

        clip: true

        spacing: 64

        orientation: ListView.Horizontal

        highlightFollowsCurrentItem: true

        delegate: Image
        {
            id: ueUserInfoListViewDelegate

            source: "image://uePeopleModel/"+model.ueRoleImage

            opacity: 0.3

            fillMode: Image.PreserveAspectFit

            function ueDoOpacity()
            {
                if(ueUserInfoListViewDelegate===ueUserInfoListView.currentItem)
                    opacity=1.0
                else
                    opacity=0.3
            }

            Behavior on opacity
            {
                NumberAnimation
                {
                    duration: 300
                }   // NumberAnimation
            }   // Behavior

            Component.onCompleted:
            {
                ueUserInfoListViewDelegate.focusChanged.connect(ueDoOpacity)
            }   // Component.onCompleted
        }   // delegate

        Component.onCompleted:
        {
            model=uePeopleModel
        }   // Component.onCompleted

        preferredHighlightBegin: width/2-70
        preferredHighlightEnd: width/2+70
        highlightRangeMode: ListView.StrictlyEnforceRange
        currentIndex: count/2
    }   // ListView

I am tryigin to call ueUserInfoListView from another separated (in terms of file) Item, named ueProductSelector:

import QtQuick 2.5
import QtQuick.Layouts 1.2

import si.mikroelektronika 1.0

Item
{
    id: ueProductSelector

    antialiasing: true

    clip: true

    Rectangle
    {
        id: ueProductSelectorWrapper

        radius: 16
        gradient: Gradient
        {
            GradientStop
            {
                position: 0
                color: "#ffffff"
            }   // GradientStop

            GradientStop
            {
                position: 1
                color: "#000000"
            }   // GradientStop
        }   // Gradient

        border.color: "#4682b4"
        border.width: 1

        antialiasing: true

        anchors.centerIn: parent
        anchors.fill: parent

        ColumnLayout
        {
            anchors.margins: parent.radius/2

            spacing: 0
            antialiasing: true

            anchors.fill: parent
            anchors.centerIn: parent

            GridView
            {
                id: ueProductGridView

                antialiasing: true

                clip: true

                Layout.fillWidth: true
                Layout.fillHeight: true

                cellWidth: 144
                cellHeight: 144

                model: ueProductsModel

                delegate: Rectangle
                {
                    radius: 16

                    clip: true

                    width: ueProductGridView.cellWidth-8
                    height: ueProductGridView.cellHeight-8

                    border.color: "#4682b4"

                    antialiasing: true

                    gradient: Gradient
                    {
                        GradientStop
                        {
                            position: 0
                            color: "#000000"

                            ParallelAnimation on color
                            {
                                id: ueProductSelectorDelegateMouseAreaAnimation

                                loops: 1
                                running: false//ueDelegateMouseArea.pressed

                                ColorAnimation
                                {
                                    from: "#4682b4"
                                    to: "#000000"
                                    duration: 100
                                }   // ColorAnimation
                            }   // ParallelAnimation
                        }   // GradientStop

                        GradientStop
                        {
                            position: 1
                            color: "#ffffff"
                        }   // GradientStop
                    }   // Gradient

                    MouseArea
                    {
                        id: ueDelegateMouseArea

                        anchors.fill: parent

                        onClicked:
                        {
                            var selectedIndex=ueProductGridView.currentIndex=index;

                            ueProductSelectorDelegateMouseAreaAnimation.running=true;
                            ueProductGridView.currentIndex=index;

                             ueOrdersModel.ueSetRecordValues(ueUserInfoListView.model.get(ueUserInfoListView.currentIndex).ueRoleId,
                                                             uePlacesListView.model.get(uePlacesListView.currentIndex).ueRoleId,
                                                             ueProductGridView.model.get(selectedIndex).ueRoleProductId,
                                                             1);
                        }   // onClicked
                    }   // MouseArea

                    ColumnLayout
                    {
                        anchors.centerIn: parent
                        anchors.fill: parent

                        antialiasing: true

                        spacing: 8

                        Image
                        {
                            Layout.fillWidth: true
                            Layout.fillHeight: false
                            Layout.alignment: Qt.AlignCenter|Qt.AlignTop
                            Layout.topMargin: ueProductSelectorWrapper.radius+4

                            fillMode: Image.PreserveAspectFit

                            horizontalAlignment: Image.AlignHCenter
                            verticalAlignment: Image.AlignVCenter

                            antialiasing: true
                            source: "image://ueProductsModel/"+model.ueRoleImage
                        }   // Image

                        Text
                        {
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            Layout.alignment: Qt.AlignCenter|Qt.AlignBottom
                            Layout.bottomMargin: ueProductSelectorWrapper.radius+4

                            color: "#000000"

                            text: model.ueRoleProductName
                            wrapMode: Text.WordWrap
                            font.family: "Courier"
                            textFormat: Text.RichText

                            font.bold: true
                            font.pointSize: 10

                            verticalAlignment: Text.AlignVCenter
                            horizontalAlignment: Text.AlignHCenter
                        }   // Text
                    }   // ColumnLayout
                }   // delegate

                Component.onCompleted:
                {
                    ueProductSelectorOpacityAnimator.running=true
                }
            }   // GridView
        }   // ColumnLayot
    }   // Rectangle
}   // Item

and I get following error:

qrc:/gui/items/UeProductSelector.qml:126: ReferenceError: ueUserInfoListView is not defined Why?

Answer 1

Well, you should not do this. Using an ID of another component in a seperate QML component file is evil!

Try to avoid this at all costs. It will couple your QML components and they are not really reuseable.

So, to solve your problem you should pass the ListView component as a property to your ueProductSelector component:

    import QtQuick 2.5
    import QtQuick.Layouts 1.2

    import si.mikroelektronika 1.0

    Item
    {
        id: ueProductSelector

        antialiasing: true

        clip: true

        property ListView ueUserInfoListView

        // [...]
    }

Then you should be able to call

ueOrdersModel.ueSetRecordValues(ueUserInfoListView.model.get(ueUserInfoListView.currentIndex).ueRoleId,
                                                             uePlacesListView.model.get(uePlacesListView.currentIndex).ueRoleId,
                                                             ueProductGridView.model.get(selectedIndex).ueRoleProductId,
                                                             1);

in your second component.

The ListView component is passed as a reference of (QObject*) and should not be performance critical.

Answer 2

If the MouseArea was declared in UeDelegate.qml, and UeListView.qml (imaginary file names for the sake of the example) contained a ListView that specifies a UeDelegate as its delegate, this would work. With the information you've given us, we can only assume that the ListView is not an ancestor of the MouseArea.

To elaborate on this concept:

The component instance scope hierarchy extends to out-of-line components, too. In the following example, the TitlePage.qml component creates two TitleText instances. Even though the TitleText type is in a separate file, it still has access to the title property when it is used from within the TitlePage. QML is a dynamically scoped language - depending on where it is used, the title property may resolve differently.

// TitlePage.qml
import QtQuick 2.0
Item {
    property string title

    TitleText {
        size: 22
        anchors.top: parent.top
    }

    TitleText {
        size: 18
        anchors.bottom: parent.bottom
    }
}

// TitleText.qml
import QtQuick 2.0
Text {
    property int size
    text: "<b>" + title + "</b>"
    font.pixelSize: size
}