[Qt-qml] Loaders, Components and ListViews

[Bartosh Wroblevksy]

Thanks you guys are awesome.

From: jyrki.yli-nokari at nokia.com
To: christopher.ham at nokia.com; qt-qml at qt.nokia.com
Date: Thu, 16 Dec 2010 08:39:18 +0000
Subject: Re: [Qt-qml] Loaders, Components and ListViews




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>Date:  Thu, 16 Dec 2010 11:26:54 +1000
To:  <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.comhttp://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
http://lists.qt.nokia.com/mailman/listinfo/qt-qml


_______________________________________________
Qt-qml mailing list
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/1aa03f15/attachment-0001.html