Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Design Rectangle/Button in QML using XML
Forum Updated to NodeBB v4.3 + New Features

Design Rectangle/Button in QML using XML

Scheduled Pinned Locked Moved Solved QML and Qt Quick
13 Posts 4 Posters 1.8k Views 1 Watching
  • 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.
  • J Offline
    J Offline
    JasmineSethi
    wrote on last edited by JasmineSethi
    #1

    I want to design a rectangle/button using QML and XML. What all information i can keep in QML and what i can keep in XML?
    If it is possible please suggest some example.

    ODБOïO 1 Reply Last reply
    0
    • J JasmineSethi

      I want to design a rectangle/button using QML and XML. What all information i can keep in QML and what i can keep in XML?
      If it is possible please suggest some example.

      ODБOïO Offline
      ODБOïO Offline
      ODБOï
      wrote on last edited by
      #2

      hi @JasmineSethi
      i'm not sure i understand your question very well but this is a simple example where i create rectangle in my QML code using properties read from XML file

      recs.xml

      <?xml version="1.0" encoding="UTF-8"?>
      <table name="rectangle">
          <column name="x">150</column>
          <column name="y">150</column>
          <column name="height">60</column>
          <column name="width">60</column>
          <column name="color">red</column>
          <column name="radius">10</column>
      </table>
      

      Rec.qml

      import QtQuick 2.0
      
      Rectangle {
      }
      

      main.qml

      import QtQuick 2.9
      import QtQuick.Window 2.2
      import QtQuick.Controls 2.0
      import QtQuick.Layouts 1.0
      import QtQuick.XmlListModel 2.0
      
      ApplicationWindow {
          visible: true
          width: 640
          height: 480
          id: appWindow
      
          XmlListModel {
              id: imodel
              source: "qrc:/recs.xml"
              query: "/table/column"
              XmlRole { name: "placeholderTxt"; query: "string(@name)" }
              XmlRole { name: "val"; query: "string()" }
      
          }
      
          Button{
              anchors.top:parent.top
              anchors.horizontalCenter: parent.horizontalCenter
              onClicked: createSpriteObjects()
              text:"construct rectangle"
          }
      
          // JS functions to create Component dynamically see : http://doc.qt.io/qt-5/qtqml-javascript-dynamicobjectcreation.html
          property variant component;
          property variant sprite;
      
          function createSpriteObjects() {
              component = Qt.createComponent("Rec.qml");
              if (component.status === Component.Ready)
                  finishCreation();
              else
                  component.statusChanged.connect(finishCreation);
          }
      
          function finishCreation() {
              if (component.status === Component.Ready) {
                  // reading property values from XmlListModel object
                  var x = imodel.get(0).val
                  var y = imodel.get(1).val
                  var ht = imodel.get(2).val
                  var wh = imodel.get(3).val
                  var clr = imodel.get(4).val
                  var rds = imodel.get(5).val
      
                  sprite = component.createObject(appWindow, {
                                                      "x": x,
                                                      "y": y,
                                                      "height" :ht,
                                                      "width" : wh,
                                                      "color" : clr,
                                                      "radius" : rds
                                                  });
                  if (sprite === null) {
                      // Error Handling
                      console.log("Error creating object");
                  }
              } else if (component.status === Component.Error) {
                  // Error Handling
                  console.log("Error loading component:", component.errorString());
              }
          }
      
      }
      
      
      J Bhushan_SureB 3 Replies Last reply
      5
      • ODБOïO ODБOï

        hi @JasmineSethi
        i'm not sure i understand your question very well but this is a simple example where i create rectangle in my QML code using properties read from XML file

        recs.xml

        <?xml version="1.0" encoding="UTF-8"?>
        <table name="rectangle">
            <column name="x">150</column>
            <column name="y">150</column>
            <column name="height">60</column>
            <column name="width">60</column>
            <column name="color">red</column>
            <column name="radius">10</column>
        </table>
        

        Rec.qml

        import QtQuick 2.0
        
        Rectangle {
        }
        

        main.qml

        import QtQuick 2.9
        import QtQuick.Window 2.2
        import QtQuick.Controls 2.0
        import QtQuick.Layouts 1.0
        import QtQuick.XmlListModel 2.0
        
        ApplicationWindow {
            visible: true
            width: 640
            height: 480
            id: appWindow
        
            XmlListModel {
                id: imodel
                source: "qrc:/recs.xml"
                query: "/table/column"
                XmlRole { name: "placeholderTxt"; query: "string(@name)" }
                XmlRole { name: "val"; query: "string()" }
        
            }
        
            Button{
                anchors.top:parent.top
                anchors.horizontalCenter: parent.horizontalCenter
                onClicked: createSpriteObjects()
                text:"construct rectangle"
            }
        
            // JS functions to create Component dynamically see : http://doc.qt.io/qt-5/qtqml-javascript-dynamicobjectcreation.html
            property variant component;
            property variant sprite;
        
            function createSpriteObjects() {
                component = Qt.createComponent("Rec.qml");
                if (component.status === Component.Ready)
                    finishCreation();
                else
                    component.statusChanged.connect(finishCreation);
            }
        
            function finishCreation() {
                if (component.status === Component.Ready) {
                    // reading property values from XmlListModel object
                    var x = imodel.get(0).val
                    var y = imodel.get(1).val
                    var ht = imodel.get(2).val
                    var wh = imodel.get(3).val
                    var clr = imodel.get(4).val
                    var rds = imodel.get(5).val
        
                    sprite = component.createObject(appWindow, {
                                                        "x": x,
                                                        "y": y,
                                                        "height" :ht,
                                                        "width" : wh,
                                                        "color" : clr,
                                                        "radius" : rds
                                                    });
                    if (sprite === null) {
                        // Error Handling
                        console.log("Error creating object");
                    }
                } else if (component.status === Component.Error) {
                    // Error Handling
                    console.log("Error loading component:", component.errorString());
                }
            }
        
        }
        
        
        J Offline
        J Offline
        JasmineSethi
        wrote on last edited by
        #3

        @LeLev Thanks a lot. Your solution is helpful.

        1 Reply Last reply
        0
        • ODБOïO ODБOï

          hi @JasmineSethi
          i'm not sure i understand your question very well but this is a simple example where i create rectangle in my QML code using properties read from XML file

          recs.xml

          <?xml version="1.0" encoding="UTF-8"?>
          <table name="rectangle">
              <column name="x">150</column>
              <column name="y">150</column>
              <column name="height">60</column>
              <column name="width">60</column>
              <column name="color">red</column>
              <column name="radius">10</column>
          </table>
          

          Rec.qml

          import QtQuick 2.0
          
          Rectangle {
          }
          

          main.qml

          import QtQuick 2.9
          import QtQuick.Window 2.2
          import QtQuick.Controls 2.0
          import QtQuick.Layouts 1.0
          import QtQuick.XmlListModel 2.0
          
          ApplicationWindow {
              visible: true
              width: 640
              height: 480
              id: appWindow
          
              XmlListModel {
                  id: imodel
                  source: "qrc:/recs.xml"
                  query: "/table/column"
                  XmlRole { name: "placeholderTxt"; query: "string(@name)" }
                  XmlRole { name: "val"; query: "string()" }
          
              }
          
              Button{
                  anchors.top:parent.top
                  anchors.horizontalCenter: parent.horizontalCenter
                  onClicked: createSpriteObjects()
                  text:"construct rectangle"
              }
          
              // JS functions to create Component dynamically see : http://doc.qt.io/qt-5/qtqml-javascript-dynamicobjectcreation.html
              property variant component;
              property variant sprite;
          
              function createSpriteObjects() {
                  component = Qt.createComponent("Rec.qml");
                  if (component.status === Component.Ready)
                      finishCreation();
                  else
                      component.statusChanged.connect(finishCreation);
              }
          
              function finishCreation() {
                  if (component.status === Component.Ready) {
                      // reading property values from XmlListModel object
                      var x = imodel.get(0).val
                      var y = imodel.get(1).val
                      var ht = imodel.get(2).val
                      var wh = imodel.get(3).val
                      var clr = imodel.get(4).val
                      var rds = imodel.get(5).val
          
                      sprite = component.createObject(appWindow, {
                                                          "x": x,
                                                          "y": y,
                                                          "height" :ht,
                                                          "width" : wh,
                                                          "color" : clr,
                                                          "radius" : rds
                                                      });
                      if (sprite === null) {
                          // Error Handling
                          console.log("Error creating object");
                      }
                  } else if (component.status === Component.Error) {
                      // Error Handling
                      console.log("Error loading component:", component.errorString());
                  }
              }
          
          }
          
          
          J Offline
          J Offline
          JasmineSethi
          wrote on last edited by
          #4

          @LeLev
          0_1548313213839_07f70e12-c33a-44d9-81ed-38c1ae8de4c5-image.png

          I want to design something like this using XML and QML. How to add more than one rectangle in xml?

          1 Reply Last reply
          0
          • dheerendraD Offline
            dheerendraD Offline
            dheerendra
            Qt Champions 2022
            wrote on last edited by
            #5

            Did you try copy-pasting the same rectangle information again in xml, try getting the values ? Try to get the values like this. Once you get the values, you can create the rectangle object like component.createObject(..) & set the values.

            Dheerendra
            @Community Service
            Certified Qt Specialist
            http://www.pthinks.com

            J 1 Reply Last reply
            2
            • ODБOïO ODБOï

              hi @JasmineSethi
              i'm not sure i understand your question very well but this is a simple example where i create rectangle in my QML code using properties read from XML file

              recs.xml

              <?xml version="1.0" encoding="UTF-8"?>
              <table name="rectangle">
                  <column name="x">150</column>
                  <column name="y">150</column>
                  <column name="height">60</column>
                  <column name="width">60</column>
                  <column name="color">red</column>
                  <column name="radius">10</column>
              </table>
              

              Rec.qml

              import QtQuick 2.0
              
              Rectangle {
              }
              

              main.qml

              import QtQuick 2.9
              import QtQuick.Window 2.2
              import QtQuick.Controls 2.0
              import QtQuick.Layouts 1.0
              import QtQuick.XmlListModel 2.0
              
              ApplicationWindow {
                  visible: true
                  width: 640
                  height: 480
                  id: appWindow
              
                  XmlListModel {
                      id: imodel
                      source: "qrc:/recs.xml"
                      query: "/table/column"
                      XmlRole { name: "placeholderTxt"; query: "string(@name)" }
                      XmlRole { name: "val"; query: "string()" }
              
                  }
              
                  Button{
                      anchors.top:parent.top
                      anchors.horizontalCenter: parent.horizontalCenter
                      onClicked: createSpriteObjects()
                      text:"construct rectangle"
                  }
              
                  // JS functions to create Component dynamically see : http://doc.qt.io/qt-5/qtqml-javascript-dynamicobjectcreation.html
                  property variant component;
                  property variant sprite;
              
                  function createSpriteObjects() {
                      component = Qt.createComponent("Rec.qml");
                      if (component.status === Component.Ready)
                          finishCreation();
                      else
                          component.statusChanged.connect(finishCreation);
                  }
              
                  function finishCreation() {
                      if (component.status === Component.Ready) {
                          // reading property values from XmlListModel object
                          var x = imodel.get(0).val
                          var y = imodel.get(1).val
                          var ht = imodel.get(2).val
                          var wh = imodel.get(3).val
                          var clr = imodel.get(4).val
                          var rds = imodel.get(5).val
              
                          sprite = component.createObject(appWindow, {
                                                              "x": x,
                                                              "y": y,
                                                              "height" :ht,
                                                              "width" : wh,
                                                              "color" : clr,
                                                              "radius" : rds
                                                          });
                          if (sprite === null) {
                              // Error Handling
                              console.log("Error creating object");
                          }
                      } else if (component.status === Component.Error) {
                          // Error Handling
                          console.log("Error loading component:", component.errorString());
                      }
                  }
              
              }
              
              
              Bhushan_SureB Offline
              Bhushan_SureB Offline
              Bhushan_Sure
              wrote on last edited by
              #6

              @LeLev Awesome

              ODБOïO 1 Reply Last reply
              0
              • Bhushan_SureB Bhushan_Sure

                @LeLev Awesome

                ODБOïO Offline
                ODБOïO Offline
                ODБOï
                wrote on last edited by
                #7

                @Bhushan_Sure yes Qt is

                1 Reply Last reply
                0
                • dheerendraD dheerendra

                  Did you try copy-pasting the same rectangle information again in xml, try getting the values ? Try to get the values like this. Once you get the values, you can create the rectangle object like component.createObject(..) & set the values.

                  J Offline
                  J Offline
                  JasmineSethi
                  wrote on last edited by JasmineSethi
                  #8

                  @dheerendra , @LeLev

                  i wrote the code like this. But output is blank. Not getting what mistake i am doing?

                  recs.xml

                  <?xml version="1.0" encoding="UTF-8"?>
                  <table name="rectangle">
                  <!--<column name="x1">150</column>
                  <column name="y1">150</column>
                  <column name="height1">60</column>
                  <column name="width1">60</column>
                  <column name="color1">red</column>
                  <column name="radius1">10</column>-->

                  <column name="x2">200</column>
                  <column name="y2">200</column>
                  <column name="height2">60</column>
                  <column name="width2">60</column>
                  <column name="color2">pink</column>
                  <column name="radius2">10</column>
                  </table>

                  main.qml

                  import QtQuick 2.9
                  import QtQuick.Window 2.2
                  import QtQuick.Controls 2.0
                  import QtQuick.Layouts 1.0
                  import QtQuick.XmlListModel 2.0

                  ApplicationWindow {
                  visible: true
                  width: Screen.width
                  height: Screen.height
                  id: appWindow

                  XmlListModel {
                      id: imodel
                      source: "/recs.xml"
                      query: "/table/column"
                      XmlRole { name: "placeholderTxt"; query: "string(@name)" }
                      XmlRole { name: "val"; query: "string()" }
                  
                  }
                  
                  Button{
                      anchors.top:parent.top
                      anchors.horizontalCenter: parent.horizontalCenter
                      onClicked: createSpriteObjects()
                      text:"construct rectangle"
                  }
                  
                  
                  property variant component;
                  property variant sprite;
                  
                  function createSpriteObjects() {
                      component = Qt.createComponent("Rec.qml");
                      if (component.status === Component.Ready)
                          finishCreation();
                      else
                          component.statusChanged.connect(finishCreation);
                  }
                  
                  function finishCreation() {
                      if (component.status === Component.Ready) {
                          // reading property values from XmlListModel object
                  

                  // var x1 = imodel.get(0).val
                  // var y1 = imodel.get(1).val
                  // var ht1 = imodel.get(2).val
                  // var wh1 = imodel.get(3).val
                  // var clr1 = imodel.get(4).val
                  // var rds1 = imodel.get(5).val

                          var x2 = imodel.get(0).val
                          var y2 = imodel.get(1).val
                          var ht2 = imodel.get(2).val
                          var wh2 = imodel.get(3).val
                          var clr2 = imodel.get(4).val
                          var rds2 = imodel.get(5).val
                  
                          sprite = component.createObject(appWindow, {
                  

                  // "x1": x1,
                  // "y1": y1,
                  // "height1" :ht1,
                  // "width1" : wh1,
                  // "color1" : clr1,
                  // "radius1" : rds1,

                                                              "x2": x2,
                                                              "y2": y2,
                                                              "height2" :ht2,
                                                              "width2" : wh2,
                                                              "color2" : clr2,
                                                              "radius2" : rds2
                                                          });
                          if (sprite === null) {
                              // Error Handling
                              console.log("Error creating object");
                          }
                      } else if (component.status === Component.Error) {
                          // Error Handling
                          console.log("Error loading component:", component.errorString());
                      }
                  }
                  

                  }

                  ODБOïO 1 Reply Last reply
                  0
                  • dheerendraD Offline
                    dheerendraD Offline
                    dheerendra
                    Qt Champions 2022
                    wrote on last edited by
                    #9

                    Did you try to read the contents of the model & print it ? Did you look at how XmlListModel works ?

                    Dheerendra
                    @Community Service
                    Certified Qt Specialist
                    http://www.pthinks.com

                    1 Reply Last reply
                    0
                    • J JasmineSethi

                      @dheerendra , @LeLev

                      i wrote the code like this. But output is blank. Not getting what mistake i am doing?

                      recs.xml

                      <?xml version="1.0" encoding="UTF-8"?>
                      <table name="rectangle">
                      <!--<column name="x1">150</column>
                      <column name="y1">150</column>
                      <column name="height1">60</column>
                      <column name="width1">60</column>
                      <column name="color1">red</column>
                      <column name="radius1">10</column>-->

                      <column name="x2">200</column>
                      <column name="y2">200</column>
                      <column name="height2">60</column>
                      <column name="width2">60</column>
                      <column name="color2">pink</column>
                      <column name="radius2">10</column>
                      </table>

                      main.qml

                      import QtQuick 2.9
                      import QtQuick.Window 2.2
                      import QtQuick.Controls 2.0
                      import QtQuick.Layouts 1.0
                      import QtQuick.XmlListModel 2.0

                      ApplicationWindow {
                      visible: true
                      width: Screen.width
                      height: Screen.height
                      id: appWindow

                      XmlListModel {
                          id: imodel
                          source: "/recs.xml"
                          query: "/table/column"
                          XmlRole { name: "placeholderTxt"; query: "string(@name)" }
                          XmlRole { name: "val"; query: "string()" }
                      
                      }
                      
                      Button{
                          anchors.top:parent.top
                          anchors.horizontalCenter: parent.horizontalCenter
                          onClicked: createSpriteObjects()
                          text:"construct rectangle"
                      }
                      
                      
                      property variant component;
                      property variant sprite;
                      
                      function createSpriteObjects() {
                          component = Qt.createComponent("Rec.qml");
                          if (component.status === Component.Ready)
                              finishCreation();
                          else
                              component.statusChanged.connect(finishCreation);
                      }
                      
                      function finishCreation() {
                          if (component.status === Component.Ready) {
                              // reading property values from XmlListModel object
                      

                      // var x1 = imodel.get(0).val
                      // var y1 = imodel.get(1).val
                      // var ht1 = imodel.get(2).val
                      // var wh1 = imodel.get(3).val
                      // var clr1 = imodel.get(4).val
                      // var rds1 = imodel.get(5).val

                              var x2 = imodel.get(0).val
                              var y2 = imodel.get(1).val
                              var ht2 = imodel.get(2).val
                              var wh2 = imodel.get(3).val
                              var clr2 = imodel.get(4).val
                              var rds2 = imodel.get(5).val
                      
                              sprite = component.createObject(appWindow, {
                      

                      // "x1": x1,
                      // "y1": y1,
                      // "height1" :ht1,
                      // "width1" : wh1,
                      // "color1" : clr1,
                      // "radius1" : rds1,

                                                                  "x2": x2,
                                                                  "y2": y2,
                                                                  "height2" :ht2,
                                                                  "width2" : wh2,
                                                                  "color2" : clr2,
                                                                  "radius2" : rds2
                                                              });
                              if (sprite === null) {
                                  // Error Handling
                                  console.log("Error creating object");
                              }
                          } else if (component.status === Component.Error) {
                              // Error Handling
                              console.log("Error loading component:", component.errorString());
                          }
                      }
                      

                      }

                      ODБOïO Offline
                      ODБOïO Offline
                      ODБOï
                      wrote on last edited by
                      #10

                      @JasmineSethi
                      Rectangle has no properties called : x2 ,y2, height2 ...

                      component.createObject(appWindow, {
                      
                      
                                                                  "x2": x2,  //sould be "x" not "x2"
                                                                  "y2": y2, // "y " not "y2"
                                                                  "height2" :ht2, // "height" 
                                                                  "width2" : wh2,
                                                                  "color2" : clr2,
                                                                  "radius2" : rds2
                                                              });
                      
                      J 1 Reply Last reply
                      0
                      • ODБOïO ODБOï

                        @JasmineSethi
                        Rectangle has no properties called : x2 ,y2, height2 ...

                        component.createObject(appWindow, {
                        
                        
                                                                    "x2": x2,  //sould be "x" not "x2"
                                                                    "y2": y2, // "y " not "y2"
                                                                    "height2" :ht2, // "height" 
                                                                    "width2" : wh2,
                                                                    "color2" : clr2,
                                                                    "radius2" : rds2
                                                                });
                        
                        J Offline
                        J Offline
                        JasmineSethi
                        wrote on last edited by
                        #11

                        @LeLev i tried the way u said but still m not able to display two rectangles "red" and "pink" at the same time.

                        J 1 Reply Last reply
                        0
                        • J JasmineSethi

                          @LeLev i tried the way u said but still m not able to display two rectangles "red" and "pink" at the same time.

                          J Offline
                          J Offline
                          JasmineSethi
                          wrote on last edited by
                          #12

                          @LeLev
                          recs.xml looks like this
                          <?xml version="1.0" encoding="UTF-8"?>
                          <table name="rectangle">
                          <column name="x">150</column>
                          <column name="y">150</column>
                          <column name="height">60</column>
                          <column name="width">60</column>
                          <column name="color">red</column>
                          <column name="radius">10</column>

                          <column name="x">300</column>
                          <column name="y">300</column>
                          <column name="height">60</column>
                          <column name="width">60</column>
                          <column name="color">pink</column>
                          <column name="radius">10</column>
                          </table>

                          main. qml looks like this
                          import QtQuick 2.9
                          import QtQuick.Window 2.2
                          import QtQuick.Controls 2.0
                          import QtQuick.Layouts 1.0
                          import QtQuick.XmlListModel 2.0

                          ApplicationWindow {
                          visible: true
                          width: Screen.width
                          height: Screen.height
                          id: appWindow

                          XmlListModel {
                              id: imodel
                              source: "/recs.xml"
                              query: "/table/column"
                              XmlRole { name: "placeholderTxt"; query: "string(@name)" }
                              XmlRole { name: "val"; query: "string()" }
                          
                          }
                          
                          Button{
                              anchors.top:parent.top
                              anchors.horizontalCenter: parent.horizontalCenter
                              onClicked: createSpriteObjects()
                              text:"construct rectangle"
                          }
                          
                          // JS functions to create Component dynamically see : http://doc.qt.io/qt-5/qtqml-javascript-dynamicobjectcreation.html
                          property variant component;
                          property variant sprite;
                          
                          function createSpriteObjects() {
                              component = Qt.createComponent("Rec.qml");
                              if (component.status === Component.Ready)
                                  finishCreation();
                              else
                                  component.statusChanged.connect(finishCreation);
                          }
                          
                          function finishCreation() {
                              if (component.status === Component.Ready) {
                                  // reading property values from XmlListModel object
                                  var x1 = imodel.get(0).val
                                  var y1 = imodel.get(1).val
                                  var ht1 = imodel.get(2).val
                                  var wh1 = imodel.get(3).val
                                  var clr1 = imodel.get(4).val
                                  var rds1 = imodel.get(5).val
                          
                                  var x2 = imodel.get(6).val
                                  var y2 = imodel.get(7).val
                                  var ht2 = imodel.get(8).val
                                  var wh2 = imodel.get(9).val
                                  var clr2 = imodel.get(10).val
                                  var rds2 = imodel.get(11).val
                          
                                  sprite = component.createObject(appWindow, {
                                                                      "x": x1,
                                                                      "y": y1,
                                                                      "height" :ht1,
                                                                      "width" : wh1,
                                                                      "color" : clr1,
                                                                      "radius" : rds1,
                          
                                                                      "x": x2,
                                                                      "y": y2,
                                                                      "height" :ht2,
                                                                      "width" : wh2,
                                                                      "color" : clr2,
                                                                      "radius" : rds2
                                                                  });
                                  if (sprite === null) {
                                      // Error Handling
                                      console.log("Error creating object");
                                  }
                              } else if (component.status === Component.Error) {
                                  // Error Handling
                                  console.log("Error loading component:", component.errorString());
                              }
                          }
                          

                          }

                          ODБOïO 1 Reply Last reply
                          0
                          • J JasmineSethi

                            @LeLev
                            recs.xml looks like this
                            <?xml version="1.0" encoding="UTF-8"?>
                            <table name="rectangle">
                            <column name="x">150</column>
                            <column name="y">150</column>
                            <column name="height">60</column>
                            <column name="width">60</column>
                            <column name="color">red</column>
                            <column name="radius">10</column>

                            <column name="x">300</column>
                            <column name="y">300</column>
                            <column name="height">60</column>
                            <column name="width">60</column>
                            <column name="color">pink</column>
                            <column name="radius">10</column>
                            </table>

                            main. qml looks like this
                            import QtQuick 2.9
                            import QtQuick.Window 2.2
                            import QtQuick.Controls 2.0
                            import QtQuick.Layouts 1.0
                            import QtQuick.XmlListModel 2.0

                            ApplicationWindow {
                            visible: true
                            width: Screen.width
                            height: Screen.height
                            id: appWindow

                            XmlListModel {
                                id: imodel
                                source: "/recs.xml"
                                query: "/table/column"
                                XmlRole { name: "placeholderTxt"; query: "string(@name)" }
                                XmlRole { name: "val"; query: "string()" }
                            
                            }
                            
                            Button{
                                anchors.top:parent.top
                                anchors.horizontalCenter: parent.horizontalCenter
                                onClicked: createSpriteObjects()
                                text:"construct rectangle"
                            }
                            
                            // JS functions to create Component dynamically see : http://doc.qt.io/qt-5/qtqml-javascript-dynamicobjectcreation.html
                            property variant component;
                            property variant sprite;
                            
                            function createSpriteObjects() {
                                component = Qt.createComponent("Rec.qml");
                                if (component.status === Component.Ready)
                                    finishCreation();
                                else
                                    component.statusChanged.connect(finishCreation);
                            }
                            
                            function finishCreation() {
                                if (component.status === Component.Ready) {
                                    // reading property values from XmlListModel object
                                    var x1 = imodel.get(0).val
                                    var y1 = imodel.get(1).val
                                    var ht1 = imodel.get(2).val
                                    var wh1 = imodel.get(3).val
                                    var clr1 = imodel.get(4).val
                                    var rds1 = imodel.get(5).val
                            
                                    var x2 = imodel.get(6).val
                                    var y2 = imodel.get(7).val
                                    var ht2 = imodel.get(8).val
                                    var wh2 = imodel.get(9).val
                                    var clr2 = imodel.get(10).val
                                    var rds2 = imodel.get(11).val
                            
                                    sprite = component.createObject(appWindow, {
                                                                        "x": x1,
                                                                        "y": y1,
                                                                        "height" :ht1,
                                                                        "width" : wh1,
                                                                        "color" : clr1,
                                                                        "radius" : rds1,
                            
                                                                        "x": x2,
                                                                        "y": y2,
                                                                        "height" :ht2,
                                                                        "width" : wh2,
                                                                        "color" : clr2,
                                                                        "radius" : rds2
                                                                    });
                                    if (sprite === null) {
                                        // Error Handling
                                        console.log("Error creating object");
                                    }
                                } else if (component.status === Component.Error) {
                                    // Error Handling
                                    console.log("Error loading component:", component.errorString());
                                }
                            }
                            

                            }

                            ODБOïO Offline
                            ODБOïO Offline
                            ODБOï
                            wrote on last edited by
                            #13

                            @JasmineSethi

                               sprite = component.createObject(appWindow, {
                                                                        "x": x1,
                                                                        "y": y1,
                                                                        "height" :ht1,
                                                                        "width" : wh1,
                                                                        "color" : clr1,
                                                                        "radius" : rds1,
                            
                                                                        "x": x2,
                                                                        "y": y2,
                                                                        "height" :ht2,
                                                                        "width" : wh2,
                                                                        "color" : clr2,
                                                                        "radius" : rds2
                                                                    });
                            

                            you are creating only one object here,
                            you set x,y,height,width properties and then you are re-setting them on the same object. Please create 2 objects

                            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