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
Forum Updated to NodeBB v4.3 + New Features

Dynamic QML Object Creation from JavaScript

Scheduled Pinned Locked Moved Unsolved General and Desktop
2 Posts 1 Posters 522 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