Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Dynamic QML Object Creation from JavaScript

Dynamic QML Object Creation from JavaScript

Scheduled Pinned Locked Moved Unsolved General and Desktop
2 Posts 1 Posters 569 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • LeDanL Offline
    LeDanL Offline
    LeDan
    wrote on last edited by
    #1

    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

    1 Reply Last reply
    0
    • LeDanL Offline
      LeDanL Offline
      LeDan
      wrote on last edited by LeDan
      #2

      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{}
                          }
                      }
                  }
              }
      
      1 Reply Last reply
      0

      • Login

      • Login or register to search.
      • First post
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved