Arrays and structures in QML

[p3c0]

@Alper QML has in-built support for Javascript. And then with Javascript objects you can simulate c like structures or array of structures.
For eg:

// A Js struct
var person = { 
       firstName : "John", 
       age : 50, 
       male : true
};

// Array of struct
var array = [
      { firstName : "John", age: 50, male: true },
      { firstName : "Jenny", age: 25, male: false },
];

[Alper]

@p3c0 Thank you
sorry for my bad English
I am working on a project that needs an application like windows explorer (win8 large icons style), the application window contains small windows inside(like file icons in windows explorer), i used Grid and scrollView. Icons,/small windows /components in main window can dragged by mouse, its working but my problem is on positioning the components, it can be dragged on another component and cover it (it must not be covered.)

I think that i can use an array of structures and using of dragging event to positioning the components and sorting, grouping, arranging etc.
Also the components are dynamic. (separate qml files load when need)
Is there another/better way to do that?

Thanks in advance

[p3c0]

@Alper Ok. But what do you intend to store in array of structures ?

[Alper]

@p3c0
The width of container rectangle divides into width of component (number of columns : C) and height of container divides into height of container(number of rows: R).
So i get a table width C columns and R rows, each Row covers y coordinate from y1 to y2 and each Column from x1 to x2.
When a component dragged, its x,y coordinate will be checked to position in suitable place.

for (i = 0 ; i<elementsOfTable;i++)
if(component.x in array[i].x and component.y in array[i].y)
{
setComponentPosition in position i (position i x,y coordinates is in table)
}

i don't want do that in C++.
Another thing i need is a scroll bar in thish manner. i don't know how to add it in this manner. because the Flickable and Grid will be removed.

[p3c0]

@Alper Perhaps an array of point's ?

Another thing i need is a scroll bar in thish manner. i don't know how to add it in this manner. because the Flickable and Grid will be removed.

What type is the container then ?

[Alper]

@p3c0 rectange

an array of ranges of points.

[p3c0]

@Alper Well how do you intend to scroll a rectangle ? Why not Flickable then ?

[p3c0]

@Alper Array of points

var arr = [
            Qt.point(0,30),
            Qt.point(40,32),
            Qt.point(4,3),
            Qt.point(5,6)
        ];

[Alper]

@p3c0 said:

intend

:) i intend to use every thing that does it!
But i don't know HOW!
I tried it but not worked:

    function createComponent(){ //the app calls this function several times when running
        {
            yCoord += 100;    //i used it to check scrolling
            var component = Qt.createComponent("qrc:/MyQML.qml");
            var obj  = component.createObject(flickableContainer, {"x": 0, "y": yCoord });
        }
    }



    Flickable {
        id:flickableContainer
        anchors.fill: parent // parent is a rectangle
        anchors.margins: 5
    }
    ScrollView {
        contentItem :flickableContainer
        width: parent.width
        height: parent.height
        x:flickableContainer.x
        y:flickableContainer.y
    }

[p3c0]

@Alper
Flickable should be inside ScrollView.
For eg:

ScrollView {
    width: 200; height: 200
    Flickable {
        anchors.fill: parent
        contentWidth: image.width; contentHeight: image.height
        Image { id: image; source: "http://placehold.it/650x650&text=\"Qt\"" }
    }
}

And set ScrollView as a parent to dynamic component.
Btw. You can completely replace Flickable with ScrollView.

[Alper]

@p3c0 Thanks for your reply
It works for image as static object/element, how to use it for dynamic component?

[p3c0]

@Alper It seems the scrollbars are not enabled when a component is added to it dynamically. Might be a bug or we are missing something? Will find it out.

[p3c0]

Hi @Alper,
Here is what works.
Use ScrollView instead of Flickable for scrollbars. Then as per this we need to explicitly set the contentItem as this newly created component.
A very minimal example:

import QtQuick 2.6
import QtQuick.Controls 1.4

Item {
    id: root
    width: 200
    height: 200

    ScrollView {
        id: scroll
        anchors.fill: parent
    }

    Button {
        text: "Load"
        onClicked: {
            var component = Qt.createComponent("Dummy.qml");
            var obj  = component.createObject(scroll);
            scroll.contentItem = obj
        }
    }
}

//Dummy.qml

import QtQuick 2.6

Image {
    id: image;
    source: "http://placehold.it/650x650&text=\"Qt\""
}