Can I create object in QML?

[chong_kimkeang]

I want my program to create a new rectangle whenever I click on a button. So if I click it five times, it will create five Rectangles. How can I do this in QML?

[wysota]

You need to have a component and create an object from it every time a click occurs on a mouse area.

[chong_kimkeang]

Now I can create the object but the problem is the objects that I create are standing on the same x,y whenever I zoom the image that is the background. How can the objects go to the right position whenever i zoom the background? Ex:
I have an image that is the background then I create some rectangles by click a button. When I want this app to be bigger or expend its height or width, how can I make all the objects of rectangle to be zoom in their position? because when I change the side of the background, all the width and height have change but the rectangle's x and y are not change. Can you help me?

[wysota]

How can the objects go to the right position whenever i zoom the background?

You can move each item you create anywhere you want e.g. by settings its x and y properties.

[chong_kimkeang]

it not the thing easy like this. it like you are using StickyNote to stick it on the background and while the background is zooming, all the stickyNote will zoom according to the parent and they are at the correct location. But I can't get the right location of all the stickyNote when zoom.

In my app, i create the rectangle as the component that i use it as the stickyNote and I call it using function createObject(parent,{x,y}) in onClicked event. of course I can create them but when I zoom the background they are not change their position to the correct location(x,y) but they still remember their old position(x,y) that is not fit with the background that have been zoomed. What can I do that?

[wysota]

How do you "zoom" the background?

[chong_kimkeang]

Press the Maximize button or zoom by the width or height that we have these functionality from the form.

[wysota]

So that's not zooming, that's resizing. In this case setting absolute values for x and y will not work because they will still be at the same place when the item is resized. You need to specify the position in fractions of the position of the resized item (e.g. by putting the items you create in a layout or making a property bind between the width/height of the parent item and x/y of the created item.

[chong_kimkeang]

It sound complex, how can I bind the width/ height of the parent item and x/y of the created item if the x/y of the item are not change while I resize the background? could you give me example of code because I have never use binding?

[wysota]

could you give me example of code because I have never use binding?

Of course you have, here is a simple binding between two items:

Rectangle {
  id: root
  Rectangle {
    x: root.width/3
    y: 10+root.height/4
    width: 100
    height: 100
  }
}

Rectangle {
  id: root
  Rectangle {
    x: root.width/3
    y: 10+root.height/4
    width: 100
    height: 100
  }
}

To copy to clipboard, switch view to plain text mode 

[chong_kimkeang]

This is not the dynamic re-locate that stickyNote. If I create many stickyNote then when I resize they will go to the same place and all my sticky note can be moved over the background. So how can they catch their new location(x,y) when I resize the background?

[wysota]

Create a binding for the dynamic objects you create. You'll have to lookup in the docs, how to do that as I have never done that before. I know it is possible from within C++, possibly from JavaScript you can do that too. If not then recalculate all the positions yourself after you resize the parent item.

[chong_kimkeang]

I have calculate to find the distance between each stickyNote and the background in percentage. I think it can work because after that I can multiply it with the width and height of the background. Unfortunately, when I resize, the percentage is also changed to lower than before that cause the stickyNote location unchangeable. The problem only that the component's location don't change while resizing. How can I change them?

Is there any property or function for controlling resize?

[wysota]

The problem only that the component's location don't change while resizing. How can I change them?

You set it by changing the "x" and "y" properties of the object. Here is a basic example:

import QtQuick 1.0
 
Rectangle {
  width: 500
  height: 500
 
  Rectangle {
    id: obj
    x: 0
    y: 0
    width: 20
    height: 20
    color: "red"
  }
 
  Timer {
    property bool reverse: false
    interval: 10
    running: true
    repeat: true
    triggeredOnStart: true
    onTriggered: { obj.x += reverse ? -1 : 1; obj.y += reverse ? -1 : 1; if(obj.x == 0 || obj.x == parent.width) reverse = !reverse; }
  }
}

import QtQuick 1.0

Rectangle {
  width: 500
  height: 500
  
  Rectangle {
    id: obj
    x: 0
    y: 0
    width: 20
    height: 20
    color: "red"
  }

  Timer {
    property bool reverse: false
    interval: 10
    running: true
    repeat: true
    triggeredOnStart: true
    onTriggered: { obj.x += reverse ? -1 : 1; obj.y += reverse ? -1 : 1; if(obj.x == 0 || obj.x == parent.width) reverse = !reverse; }
  }
}

To copy to clipboard, switch view to plain text mode 

Just remember that's an imperative approach in a declarative world.

[chong_kimkeang]

When create the object of rectangle or others that is in main.qml, the coordination(x,y) are correctly change according to their parent whenever we zoom or what but my problem is that the object that I create is not in the same file, in ButtonStickyNote.qml file that when I press on a button, the stickyNote is created with the code

createStickyNote.qml

function createObjectStickyNote()
    {
        var component=Qt.createComponent("ButtonStickyNote.qml")
        if(component.status == Component.Ready)
        {
            component.createObject(imageInside,{"x":10,"y":10}) //imageInside is its parent
        }
    }

function createObjectStickyNote()
    {
        var component=Qt.createComponent("ButtonStickyNote.qml")
        if(component.status == Component.Ready)
        {
            component.createObject(imageInside,{"x":10,"y":10}) //imageInside is its parent
        }
    }

To copy to clipboard, switch view to plain text mode 

So when I move the stickyNote, its x,y changed Ex: 100,138 to 200,400 but when I resize it, still it is 200 and 400. I t must change to other x and y to be suitable for the whole background. So how can I change it correctly?

Capture.jpg

[wysota]

How many times do I have to repeat it? Change the "x" and "y" properties of the object you created earlier.

[chong_kimkeang]

Only whenever the user resize the background because when I resize the background, it seems the app refresh. all the item and object in my app have refresh to the correct location but only stickyNote is not at the correct location, it stand on the same location. Like when u resize Ms Power point , the slide in Ms Power point must be smaller or bigger and change is x,y to fit with the whole App. So I just want to know how can I make my stickyNote get the correct x,y when I resize it?