[Qt-qml] Loaders, Components and ListViews

[jyrki.yli-nokari at nokia.com]

Well, instead of switch, I would just map the name in the listmodel to an id with a javascript object

function getComponent(name) {
   var components = {
     redRectangle: redRectangle,
     brownRectangle: brownRectangle,
     yellowRectangle: yellowRectangle,
  }
  return components[name];
}
…
sourceComponent: getComponent(name)


Or if you are looking for a general solution, you need to group the Components as real properties of a QtObject and the index it with the id:


import Qt 4.7

ListView {

    id: top

    model: ListModel {

        id: aModel

        ListElement {

            name: "Bill Smith"

            componentID: "redRectangle"

            number: "555 3264"

        }

        ListElement {

            name: "John Brown"

            componentID:"brownRectangle"

            number: "555 8426"

        }

        ListElement {

            name: "Sam Wise"

            componentID: "yellowRectangle"

            number: "555 0473"

        }

    }

    property QtObject components: QtObject {

        property Component redRectangle: Component {

            Rectangle{

                width: 180; height: 200

                color:"red"

            }

        }

        property Component brownRectangle: Component {

            Rectangle{

                width: 180; height: 200

                color:"brown"

            }

        }

        property Component yellowRectangle: Component {

            Rectangle{

                width: 180; height: 200

                color:"yellow"

            }

        }

    }

    width: 180; height: 600

    delegate: Loader{

        id:myLoader

        sourceComponent: components[componentID];

    }

}

From: ext Christoper Ham <christopher.ham at nokia.com<mailto:christopher.ham at nokia.com>>
Date: Thu, 16 Dec 2010 11:26:54 +1000
To: <qt-qml at qt.nokia.com<mailto:qt-qml at qt.nokia.com>>
Subject: Re: [Qt-qml] Loaders, Components and ListViews

On 12/16/2010 11:11 AM, ext Bartosh Wroblevksy wrote:





 So I have this little example where data of a ListElement determines what component to load in a list view something like this




ListView {

ListModel {
    id: aModel
    ListElement {
        name: "Bill Smith"
        componentID: "redRectangle"
        number: "555 3264"
    }
    ListElement {
        name: "John Brown"
        componentID:"brownRectangle"
        number: "555 8426"
    }
    ListElement {
        name: "Sam Wise"
        componentID: "yellowRectangle"
        number: "555 0473"
    }
}

    Component{
        id: redRectangle
        Rectangle{
        width: 180; height: 200
        color:"red"
        }
    }

    Component{
        id: brownRectangle
        Rectangle{
        width: 180; height: 200
        color:"brown"
        }
    }

    Component{
        id: yellowRectangle
        Rectangle{
        width: 180; height: 200
        color:"yellow"
        }
    }

    width: 180; height: 600
    model: aModel
    delegate:Loader{
        id:myLoader
        sourceComponent: (componentID == "redRectangle")? redRectangle
        : (componentID == "yellowRectangle"? yellowRectangle
        : brownRectangle)
    }
}
This all works fine and nice. But I was wondering if
        sourceComponent: (componentID == "redRectangle")? redRectangle        : (componentID == "yellowRectangle"? yellowRectangle        : brownRectangle)
could perhaps be more generic without all the nested stuff. Something that would ideally look like this
        sourceComponent: componentID
Any input would be great. Otherwise QML is fun, fun, fun.

Thanks,Bartosh







_______________________________________________
Qt-qml mailing list
Qt-qml at qt.nokia.com<mailto:Qt-qml at qt.nokia.com>http://lists.qt.nokia.com/mailman/listinfo/qt-qml


Hi Bartosh,

It wouldn't compress the express to a single line, but to do it without nesting you can use:

sourceComponent: {
    switch (componentID) {
    case "redRectangle":
        redRectangle;
        break;
    case "yellowRectangle":
        yellowRectangle;
        break;
    ...

etc.

If you created a function that would lighten up the code a bit.

Br, Christopher
_______________________________________________ Qt-qml mailing list Qt-qml at qt.nokia.com<mailto:Qt-qml at qt.nokia.com> http://lists.qt.nokia.com/mailman/listinfo/qt-qml
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.qt.nokia.com/pipermail/qt-qml/attachments/20101216/8f267e38/attachment-0001.html