[Interest] QML introspection and dynamic component creation

[gareth.stockwell at accenture.com]

Bo, Harri, thanks for your reponses.

I managed to put together a solution I'm fairly happy with:

    // Effect.qml
    ShaderEffect {
        property ListModel parameters: ListModel { }
    }

    // WobbleEffect.qml
    Effect {
        parameters: ListModel {
            ListElement {
                name: "speed"
                value: 0.5
            }
            ListElement {
                name: "amplitude"
                value: 0.5
            }
        }

        // Map parameter values to properties, so that they can be mapped
        // by ShaderEffect to shader uniforms
        property real speed: parameters.get(0).value
        property real amplitude: parameters.get(1).value
    }

    // ParameterPanel.qml
    Rectangle {
        id: root
        property ListModel model: ListModel { }

        Component {
            id: parameterDelegate

            Rectangle {
                Text {
                    id: text
                    text: name
                }

                Slider {
                    value: model.value
                    onValueChanged: view.model.setProperty(index, "value", value)
                }
            }
        }

        ListView {
            id: view
            anchors.fill: parent
            model: root.model
            delegate: parameterDelegate
        }
    }

So now, when "wobble" is selected from the list of effects, we simply do

    effectLoader.source = "Wobble.qml"
    parameterPanel.model = effectLoader.item.parameters

This solution means that I can express the set of parameters declaratively,
so I don't need any C++.  It has one drawback however, which stems from the way
data models work in QML.  Because ListElement is a collection of roles, rather
than a collection of properties, we can't refer to element values directly via a
QML name - instead we have to use the JavaScript functions ListModel.get() and
ListModel.setProperty().

I think it would be nicer if the model integration was tighter, so that the
representation of the data element was a first-class QML citizen, with roles
mapped to properties.  It seems I'm not alone - see
https://bugreports.qt.nokia.com/browse/QTBUG-7932 for more details.

Gareth



________________________________________
From: interest-bounces+gareth.stockwell=accenture.com at qt-project.org [interest-bounces+gareth.stockwell=accenture.com at qt-project.org] on behalf of Harri Pasanen [harri at mpaja.com]
Sent: 18 December 2011 22:05
To: interest at qt-project.org
Subject: Re: [Interest] QML introspection and dynamic component creation

Ok, I wasn't reading carefully enough.

I don't have that much javascript mileage under the belt, but coming
from python
I do see the value of introspection in some cases.

Might still be worthwhile to think about the design, usually explicit is
better than implicit.

Harri

On 12/18/2011 09:44 PM, Bo Thorsen wrote:
> Sorry, Harri, but that's not the problem here.
>
> The problem was to look at the list of ParameterPanel children and
> create the objects based on the introspection. The problem is how to
> figure out which objects to create, not how to create them. Dynamic
> creation itself is easy enough.
>
> There are some things that can be done with the children[i], but I don't
> think it's enough. Not unless you do evil hacks like encode stuff in the
> objectName. Maybe some other parameter stuff could be used as a sort of
> homegrown introspection.
>
> Bo.
>
> Den 17-12-2011 11:04, Harri Pasanen skrev:
>> On 12/17/2011 10:15 AM, Bo Thorsen wrote:
>>>> When the user selects Wobble from the list of effects, a Loader is used
>>>> to create a WobbleEffect item, and the id of this item is assigned to
>>>> the effect property of the ParameterPanel. What I then want to happen is
>>>> for sliders to be created and connected [...]
>>> As you say, this is pretty easy to do with C++ introspection. So why not
>>> use that? Export a C++ function to QML that does this.
>>>
>>> I don't know of a way to do this in QML, but I'd be happy to know. So
>>> anyone with this knowledge, please step up and describe it.
>> You can probably do it trough javascript as well.
>>
>> For instance, I have a Piece.qml that acts  as kind of "class header" to
>> create instances of Piece qml objects.
>>
>>    From javascript I the do:
>>
>>     var component = Qt.createComponent("Piece.qml");
>>
>> pieces.push(component.createObject(gameBoard, {"x": xpos, "y": ypos,
>> "width": pw, "height": pw}
>>
>> to setup a gaming board.
>>
>> To connect the signals, at the end of Piece.qml I have something like:
>>
>>        Component.onCompleted: {
>>          mouse.swipe.connect(Ui.movePlayer)
>>
>> Where mouse.swipe is a signal I created for MouseArea {id: mouse ...} and
>> where Ui is my javascript, movePlayer being a function in there.
>>
>> Then to clear the board and remove the objects from screen I do:
>>
>>        for (var i in pieces)
>>            pieces[i].destroy()
>>
>>
>> So to lookup in docs is Qt.createComponent, createObject, connect, destroy.
>>
>> quickhit example is QtSDK is a full example to play around with.
>>
>> Hope this helps a bit,
>>
>> Harri
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>> _______________________________________________
>> Interest mailing list
>> Interest at qt-project.org
>> http://lists.qt-project.org/mailman/listinfo/interest
>
> Bo Thorsen,
> Fionia Software.
>

_______________________________________________
Interest mailing list
Interest at qt-project.org
http://lists.qt-project.org/mailman/listinfo/interest


________________________________
Subject to local law, communications with Accenture and its affiliates including telephone calls and emails (including content), may be monitored by our systems for the purposes of security and the assessment of internal compliance with Accenture policy.
______________________________________________________________________________________

www.accenture.com