Loading QML Components in a ListModel

[andre]

I think you misunderstand the idea of models and views.
A model supplies data to a view. The view will create a delegate to display each piece of data. There is no need for you to that yourself. If you just need a load of the same QML items, then simply create them and put them in a Row, Column, Grid or Flow.

Having said that, something like this may work:
@
ListView {
id: view
model: 3
delegate: WidgetLarge
}
@

[kyleplattner]

That goes in my model file or in the file where the gridview is implemented.

[xsacha]

You are thinking about this the wrong way.
Instead, you should have:
@ListModel {
id: myModel
ListElement {
element: "WidgetLarge.qml"
}
ListElement {
element: "WidgetSmall.qml"
}
ListElement {
element: "WidgetMedium.qml"
}
}@

Then inside the Delegate (you must have a delegate for this anyway):
@
Component {
id: myDelegate
Item {
Loader { source: element }
}
}
@

Then you have your main View (you must also have this) that refers to the delegate and model:
@
ListView {
model: myModel
delegate: myDelegate
}
@

Makes sense? :)

[andre]

[quote author="kyleplattner" date="1292425419"]That goes in my model file or in the file where the gridview is implemented. [/quote]

It seems you don't need a model. At least, you're not showing anything that would require one. If you just replace the ListView in my example with a GridView, you should be done (though you may need to set the size for the items in the grid view).

Perhaps you should explain a bit better what you want to achieve exactly?

[kyleplattner]

Got this working, thanks!

[kyleplattner]

Just one last problem, when I have 3 qml elements positioned vertically one on top of another, things seemed to get messed up after the first move. For instance I can only move the top item once. If anyone knows the answer I would appreciate your help. Thanks. Code Below:

@import Qt 4.7

Rectangle {
width: 186
height: 288
color: "#222222"

Component {
        id: widgetdelegate
    Item {
        width: grid.cellWidth; height: grid.cellHeight
       Loader { source: element
            id: im
            state: "inactive"

            anchors.centerIn: parent
            width: grid.cellWidth; height: grid.cellHeight
            smooth: true
           //fillMode: Image.PreserveAspectFit
            SequentialAnimation on rotation {
                NumberAnimation { to:  2; duration: 50 }
                NumberAnimation { to: -2; duration: 100 }
                NumberAnimation { to:   0; duration: 50 }
                running: im.state == "squiggle"
                loops: Animation.Infinite
            }
            Rectangle {
                id: imRect
                anchors.fill: parent; radius: 5
                anchors.centerIn: parent
                border.color: "#ffffff"; color: "transparent"; border.width: 6;
                opacity: 0
            }
            states: [
                State {
                    name: "squiggle";
                    when: (grid.firstIndexDrag != -1) && (grid.firstIndexDrag != index)
                },
                State {
                    name: "inactive";
                    when: (grid.firstIndexDrag == -1) || (grid.firstIndexDrag == index)
                    PropertyChanges { target: im; rotation: 0}
                }
            ]
        }
      
        Rectangle {
            id: backgroundcircle
            width: 20; height: 20; radius: 20
            smooth: true
            anchors.centerIn: parent
            color: "#222222";
            opacity: 0

        }
        states: [
            State {
                name: "inDrag"
                when: index == grid.firstIndexDrag
                PropertyChanges { target: backgroundcircle; opacity: 1 }
                PropertyChanges { target: imRect; opacity: 1 }
                PropertyChanges { target: im; parent: container }
                PropertyChanges { target: im; width: (grid.cellWidth - 10) / 1 }
                PropertyChanges { target: im; height: (grid.cellHeight - 10) / 1 }
                PropertyChanges { target: im; anchors.centerIn: undefined }
                PropertyChanges { target: im; x: coords.mouseX - im.width / 2 }
                PropertyChanges { target: im; y: coords.mouseY - im.height / 2 }
            }
        ]
        transitions: [
            Transition { NumberAnimation { properties: "width, height, opacity"; duration: 300; easing.type: Easing.InOutQuad } }
        ]
    }
}





 GridView {
         property int firstIndexDrag: -1

         id: grid
         x: 0; y: 0
         interactive: false


         anchors.fill: parent
         cellWidth: 186; cellHeight: 96;

         model: WidgetModelLarge { id: widgetmodel }
         delegate: widgetdelegate
         Item {
             id: container
             anchors.fill: parent


         }
         MouseArea {
             id: coords
             anchors.fill: parent
             onReleased: {
                 if (grid.firstIndexDrag != -1)
                     widgetmodel.move(grid.firstIndexDrag,grid.indexAt(mouseX, mouseY),1)
                 grid.firstIndexDrag = -1
             }
             onPressAndHold: {
                 grid.firstIndexDrag=grid.indexAt(mouseX, mouseY)
             }
         }
     }




 }

@

[xsacha]

It's working fine here.

I did notice that I had issues if I had more than 3 objects (I had 9 at first). Of course, with your chosen sizes, only 3 objects fit in the view. It screws up if you have more.

When I had 3 objects, I could move them correctly.

Perhaps the code in 'element' is important?

[kyleplattner]

9 works great for me and 3 messes up. I cannot move the upper most item more than once.

[xsacha]

But in the above code, do you have 3 elements defined in your model or still 9?
I know only 3 are visible. I'm trying to confirm how many are in your model.

Also, what's in the element filename?

[kyleplattner]

I only have 3,

@ListModel {
id: widgetdelegate
ListElement {
element: "WidgetLargeYield.qml"
}
ListElement {
element: "WidgetLargeMoisture.qml"
}
ListElement {
element: "WidgetLargeWeight.qml"
}
}
@

[xsacha]

Perhaps it is to do with the new element loaders.

Because I can tell you without doubt, the original code (with 9 pictures, but changed to 3) works flawlessly.

Have you tested these new 'element' models with 3 and with 9?

I think it has nothing to do with having 3 or 9. It's just the Widget QML files.

[kyleplattner]

Do you mean using the element property within my list model?

I also have a similar setup with two items and it works flawlessly.

Could it be because they are arranged vertically?

[kyleplattner]

With more testing it seems like the index shifts to be one off after the first move. So in other words, the first move works flawlessly and then the index is off by one. Any ideas?

[xsacha]

Like I said, it works flawlessly here. I have moved the three items several times in random positions and tried all sorts of combinations.

I don't care about the element property. I care about the code it passes (through the Loader type). That is, the code in 'WidgetLargeWeight.qml' and so on. This is the only area that I can't test. Hence, it could be the area causing trouble. Especially since it is directly related to the delegates that you are having trouble with.

[kyleplattner]

There is nothing special about the widgets that would cause a problem to my knowledge. Here is the code behind one:

@import Qt 4.7

Rectangle {
    id: button
    x: 0
    y: 0
    width: 186
    height: 96
    gradient: Gradient {
        GradientStop {
            id: gradientstop1
            position: 0
            color: "#ffffff"
        }

        GradientStop {
            id: gradientstop2
            position: 0.22
            color: "#00ff36"
        }
    }
    clip: true

    property alias title: titleText.text
    property alias value: valueText.text
    property alias small: smallText.text

    property alias textEnabled: textBox.visible








    Rectangle {
        id: rectangle1
        x: -1
        y: -1
        width: 188
        height: 98
        color: "#00000000"
        radius: 7
        border.color: "#000000"
        border.width: 5
        opacity: 1
    }

    Rectangle {
        id: rectangle2
        x: -11
        y: -46
        width: 210
        height: 100
        color: "#ffffff"
        radius: 27
        opacity: 0.3
    }

    MouseArea {
        id: mouse_area1
        x: 0
        y: 0
        width: 186
        height: 96
        onPressed: button.state = "State1"
        onReleased: button.state = "base state"
    }

    // Put all text elements in a rectangle to control visibility
    Rectangle {
        id: textBox

        visible: true

        Text {
            id: titleText
            width: button.width
            y: 8
            text: "Yield"
            horizontalAlignment: Text.AlignHCenter
            font.pixelSize: 20
            font.family: "Arial"
            font.bold: true
        }

        Text {
            id: valueText
            x: 0
            width: button.width
            y: 31
            text: "00"
            horizontalAlignment: Text.AlignHCenter
            font.pixelSize: 40
            font.family: "Arial"
            font.bold: true
        }

        Text {
            id: smallText
            width: button.width
            y: 72
            text: "bu/acre (dry) instant"
            horizontalAlignment: Text.AlignHCenter
            font.family: "Arial"
            font.pixelSize: 14
            font.bold: true
        }
    }

    states: [
        State {
            name: "State1"

            PropertyChanges {
                target: gradientstop1
                position: 0
                color: "#77e68d"
            }

            PropertyChanges {
                target: gradientstop2
                position: 0.22
                color: "#00ff36"
            }

            PropertyChanges {
                target: rectangle2
                x: -12
                y: 46
            }
        },
        State {
            name: "Yellow"
            when: yieldIndicator > 100

            PropertyChanges {
                target: gradientstop1
                position: 0
                color: "#ffffff"
            }

            PropertyChanges {
                target: gradientstop2
                position: 0.22
                color: "#fff23a"
            }
        },
        State {
            name: "Red"
            when: yieldIndicator > 110
            PropertyChanges {
                target: gradientstop1
                position: 0
                color: "#ffffff"
            }

            PropertyChanges {
                target: gradientstop2
                position: 0.22
                color: "#d5292b"
            }
        }
    ]



}

@

[kyleplattner]

And you are sure there is no difference between the code you are testing with and what I am using?

[xsacha]

Yes, exactly no difference except for the element's that I don't have code for.

Edit: Just tried it with your loader code (posted above) and I get the same glitch as when I had 9 objects (instead of 3). I will investigate further.

Edit: I can reproduce without the loader code now!

Edit: Found issue!

[xsacha]

Ok, I have fixed the issue. It's in the Main.qml:

@onReleased: {
if (grid.firstIndexDrag != -1)
{
var moveTo = grid.indexAt(mouseX, mouseY)
if (moveTo > grid.firstIndexDrag)
widgetModel.move(moveTo,grid.firstIndexDrag,1)
else
widgetModel.move(grid.firstIndexDrag,moveTo,1)
grid.firstIndexDrag = -1
}
}@
Works with 9 objects, 3 objects and your loader code now. It was just the method I was using to test it that was flawed. Dragging items up rather than down ;).

If the location being moved to is larger, the position of the previous item has its index change before the action can be performed. Delayed movement would remove this issue.

The above code works too, though.

[kyleplattner]

You're incredible. Works perfectly.

[kyleplattner]

Here is one more stretch:

If my QML items are being loaded into my Gridview from a model:

@ListModel {
id: widgetdelegate
ListElement {
element: "WidgetLargeYield.qml"
value: "test"
}
ListElement {
element: "WidgetLargeMoisture.qml"
}
ListElement {
element: "WidgetLargeWeight.qml"
}
}
@

Each one of those .qml elements has a text property alias. How do I pass on the value? Through the model or through the page with the gridview?