Loading QML Components in a ListModel

kyleplattner

I want to do this but it gives me a "cannot contain nested elements" error. Any ideas of how to accomplish the same thing in a different way?

@ ListModel {
ListElement {
Loader { source: "WidgetLarge.qml" }
}
ListElement {
Loader { source: "WidgetLarge.qml" }
}
ListElement {
Loader { source: "WidgetLarge.qml" }
}

}@

mario

This seems to work but it might not be what you wanted?!:

@
VisualItemModel {
Loader { source: "WidgetLarge.qml" }
}
@

kyleplattner

It works for you in a ListModel? I tried it and it gave me the same error:

@ListModel {
ListElement {
VisualItemModel {
Loader { source: "WidgetLarge.qml" }
}
}

ListElement {
VisualItemModel {
Loader { source: "WidgetLarge.qml" }
}
}
ListElement {
VisualItemModel {
Loader { source: "WidgetLarge.qml" }
}
}

}@

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!