Creating QML element dynamically on runtime

Often while working with QML we need to create QML element dynamically on runtime depending upon some event like button click or something else.

Following code described how we can create QML element at runtime dynamically. In following code I am trying to create Rect QML element on runtime, set some property on element and also connecting signal from Rect element.

  function createRect(num)
  {       
        var component = Qt.createComponent("Rect.qml");               
        var rect = component.createObject(main,{"x":50,"y":10});
        if(rect != null ) {
            rect.name = "Test";      
            rect.x =  Math.floor(Math.random() * 300 );
            rect.y = Math.floor(Math.random() * 100 );
            rect.dropped.connect(dropped);
      }
  }

 function dropped(x,y,name)
 {
    console.log("################## Dropped:"+name+"::"+ x +":"+ y);
 }

In above code "dropped" is signal defined in Rect element. And I am calling connect method of signal to connect "dropped" signal to my slot "dropped".

Following is code from "Rect.qml" that define Rect element.

Rectangle {
    width:100
    height:50
    color:"lightblue"
    property string name: "";
    signal dropped(int x,int y,string name);
}

That's all, Hope this helps.