QML accessing your qml component

Question

I am using QML for developing a front end and I have an issue accessing a component from my main QML Window. So, my main QML window is something as:

ApplicationWindow {
    id: rootWindow
    objectName: "window"

    property Component mainScreen: MainScreen {} // my component

    // This is a slot that gets called from C++ side.
    // The function gets called fine.
    function videoDone() {
        mainScreen.doVideo()
    }
}

The MainScreen component is written in MainScreen.qml file as:

ControlView {
    id: mainScreenView
    objectName: "MainScreenView"


    function doVideo() {
        console.log("Called")
    }
}

However, this does not work as expected and I get the error:

TypeError: Property 'doVideo' of object QQmlComponent is not a function

I think the issue is that the full definition of MainScreen is not being seen at the ApplicationWindow level. I tried to see if I can cast it but no success.

Also mainScreen.objectName returns a null string rather than MainScreenView

Answer 1

I think the right way to use the MainScreen component is doing something like this:

main.qml

import QtQuick 2.5
import QtQuick.Controls 1.4

ApplicationWindow {
    id: rootWindow
    objectName: "window"
    visible: true

    MainScreen { id: mainScreen } // my component

    Component.onCompleted: {
        mainScreen.doVideo()
    }
}

MainScreen.qml (same code than you, but I've used Item instead of ControlView just to check the compilation)

import QtQuick 2.5

Item {
    id: mainScreenView
    objectName: "MainScreenView"

    function doVideo() {
        console.log("Called")
    }
}

Another option would be to create the component dynamically.

Answer 2

Instead of

Property Component mainscreen: MainScreen { }

Use

Property var mainscreen: MainScreen { }

Here is sample code

main.qml

import QtQuick 2.6
import QtQuick.Controls 1.5

ApplicationWindow {
    id: rootWindow
    objectName: "window"
    visible: true

    property var mainScreen: MainScreen {  }

    Component.onCompleted: {
        mainScreen.doVideo()
    }
}

MainScreen.qml

import QtQuick 2.6

Item {
    id: mainScreenView
    objectName: "MainScreenView"

    function doVideo() {
        console.log("Called")
    }
}

Answer 3

I guess you just want something like this:

ApplicationWindow {
    // if you really need a property of your Item uncomment the following line:
    // property alias mainScreen : mainScreen

    MainScreen {
        id: mainScreen
    }
    function videoDone() {
        mainScreen.doSomething()
    }
}

and in the MainScreen.qml:

import QtQuick 2.0
Item {
    function doSomething()
    {
        console.debug("Test")
    }
}

Answer 4

You should assign id to your component.

ApplicationWindow {

id: rootWindow
objectName: "window"

property Component mainScreen: MainScreen {
    id: myMainScreenCmp
 } // my component

function videoDone() {
    myMainScreenCmp.doVideo()
}

}

Answer 5

You have to import your component and your component name and filename must be the same.

MainScreen.qml

MainScreen {
    id: mainScreenView
    objectName: "MainScreenView"

    function doVideo() {
        console.log("Called")
    }
}