Dynamic QML Object Creation from JavaScript



  • Hi, I have been trying to create Qml object dynamically with the following code

    main.qml

    import QtQuick 2.3
    import QtQuick.Window 2.2
    import QtQuick.Controls 1.1
    import "js/app.js" as App
    
    ApplicationWindow {
    
        Grid {
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                    columns: 4
                    spacing: 6
    
                    Repeater {
                        id : caseimobile
                        model: 16
                        Rectangle { id:rec; color: "#a39b8a";  width: 65;  height: 65;  radius : 2
                            Component.onCompleted: {
                                var compo = Qt.createComponent("Case.qml");
                                App.make(index,compo);
                                console.log(rec.children);
                            }
                        }
                    Component.onCompleted: console.log(caseimobile.itemAt(2).children)
                    }
              }
    }
    

    app.js

     function make(k,compo) {
        if (compo.status == Component.Ready){
            compo.incubateObject(caseimobile.itemAt(k));
            console.log(compo);
        }
        if (compo.status == Component.Error){
            console.log("Il y a eu une erreur dans le chargement des cases");
        }
    }
    

    When compiling I have the following message

    qml: QQmlComponent(0x7fa30c9b14c0)
    qml: [object Object]
    qml: QQmlComponent(0x7fa30ca3ff50)
    qml: [object Object]
    qml: QQmlComponent(0x7fa30ca3a230)
    qml: [object Object]
    qml: QQmlComponent(0x7fa30ca39da0)
    qml: [object Object]
    qml: QQmlComponent(0x7fa30ca01f60)
    qml: [object Object]
    ... etc
    qml: QQmlComponent(0x7fa30ca01f60)
    qml: [object Object]
    qml: [object Object]
    

    here is my qml.qrc file :

    <RCC>
        <qresource prefix="/">
            <file>main.qml</file>
            <file>Case.qml</file>
            <file>js/app.js</file>
        </qresource>
    </RCC>
    

    I have also tried this with the function createObject() instead of incubateObject() but nothing seems to work.

    Thank you for your answers



  • The problem here is that I can not see any Case.qml created in my application while the following code works perfectly

            Grid {
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
                columns: 4
                spacing: 6
    
                Repeater {
                    id : caseimobile
                    model: 16
                    Rectangle {id:rec; color: "#a39b8a"; width: 65; height: 65; radius : 2
                     Case{}
                        }
                    }
                }
            }

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.