[Interest] QML Loader sourceComponent Dynamic selection (not source property)

[Kristoffersen, Even (NO14)]

Hello Mark.

Seems like the access of values in the listview does not work as you would expect from what is written in the documentation.
The instanciated delegate is not treated as an actual child object and as such does not have access to the references it would have if it was instanciated from a file.

If you use the Loader as a delegate directly and define the components as child objects in the Loader it works:

    ListView {
        id: glistview
        anchors.margins: 0
        anchors.fill: parent
        delegate: Loader {
            function getComp(gidx)
            {
                switch (gidx)
                {
                    case 1: return gflavorone
                    case 2: return gflavortwo
                }
               //Default case
                return gflavorthree
            }
            sourceComponent: getComp(index)

            Component {
                id: gflavorone
                Column {
                    width: glistview.width
                    height: 40
                    Text
                    {
                        text: 'Name:' + name
                    }
                    Text
                    {
                        text: 'Mood:' + mood
                    }
                }
            }

            Component {
                id: gflavortwo
                Column {
                    width: glistview.width
                    height: 40
                    Text
                    {
                        text: 'Name:' + name
                    }
                    Text
                    {
                        text: 'Eyes:' + eyes
                    }
                }
            }

            Component {
                id: gflavorthree
                Column {
                    width: glistview.width
                    height: 40
                    Text
                    {
                        text: 'Name:' + name
                    }
                    Text
                    {
                        text: 'cell:' + cell
                    }
                }
            }
        }

        model: glistdata
    }

-Even

From: mark diener [mailto:rpzrpzrpz at gmail.com]
Sent: 17. november 2014 04:18
To: Kristoffersen, Even (NO14)
Cc: interest at qt-project.org
Subject: QML Loader sourceComponent Dynamic selection (not source property)

Even:

A couple months back you gave an intelligent answer from a interest list query about
creating complex list views.

I was a little tied up with things and could not get around to actually create a working example of a complex list view.  Now is that time.

Maybe you could get me past some implementation uncertainties

Attached below is a copy of the original message.

I am having trouble defining a loader that does not need a separate QML file for its definition, but a javascript function that is away of which row index of the model it is currently drawing and can pass that to a javacript function that will return a Component value directly instead of a reference to an QML file.

I have included a small snippet QML file below:


ListModel {

 id: glistdata

  {

   type: 1

   name : "Joe Perra"

   cell: "555-1212"

   eyes: "blue"

   mood: "sad"

    }

  ListElement

  {

    type: 2

    name : "Mary Tyler"

    cell: "555-1213"

    eyes: "brown"

    mood: "happy"

    }

   ListElement

   {

    type: 3

    name : "Peter Gabriel"

    cell: "555-1214"

    eyes: "blue"

    mood: "bitter"

   }

}

Component {
  id: gflavorone
  Item
  {
     Text
     {
        text: 'Name:' + name
     }
     Text
     {
        text: 'Mood:' + mood
     }
 }

Component {
  id: gflavortwo
  Item
  {
     Text
     {
        text: 'Name:' + name
     }
     Text
     {
        text: 'Eyes:' + eyes
     }
 }

Component {
  id: gflavorthree
  Item
  {
     Text
     {
        text: 'Name:' + name
     }
     Text
     {
        text: 'cell:' + cell
     }
 }

Loader {
  id: gloader

  function getComp(gidx)
  {
    switch (gidx)
    {
     case 1: return gflavorone
     case 2: return gflavortwo
    }
    //Default case
    return gflavorthree
   }
 }
 sourceComponent: getComp(index)
}

ListView {
        id: glistview
        anchors.margins: 0
        anchors.fill: parent
        delegate: gloader
        model: glistdata

}


Maybe you or anybody else has some ideas on how to specifically code the  Loader written to
a dynamic Component instead of referring to an external QML file to generate the Component value.

And on top of that, how does the loader getComp( ) function access the index of the row or maybe it must just only refer to the model fields

So yes, I would like the Loader to intelligently select the sourceComponent using a dynamic function attached to the loader.

This is an area that needs maybe a long experience QT veteran  to comment on this.


Cheers,

md

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
> Subject: [Interest] Qt Quick 2.x Complex ListView
>
> Hello QTers:

> Does anybody have an idea on how to create each row of the listview with a delegate that allows for each row > to be rendered with separate logic instead of the standard delegate which renders each row with the same or > very similar logic.

> Any comments or tips would be useful and I am sure more people would like this option

Not sure if it covers what you need, but I believe the common way to
solve this is through using a Loader element as the delegate and
changing the source depending on your criteria for which row delegate to
use on the fly.

ListView {
        id: example
        delegate: Loader {
                function getDelegate() { ... }
                source: getDelegate()
        }
}

Use the getDelegate() function to return the url for the delegate to use.

You can use a similar trick inside the delegate item itself instead (or
in addition) if you create separate elements for the different type of
columns that you need to render, then you can use a Row with Loaders for
example.


-Ev
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20141117/8c1cc1e0/attachment.html>