[Qt-qml] How to display QDeclarativeComponent created from C++?

[michael.brasser at nokia.com]

Hi Charley,

On 12/10/2010, at 5:10 AM, ext Charley Bay wrote:
> For example, I previously created *many* QDeclarativeView
> instances to give the appearance of many
> "desktop-widget-type-things" within the same application.

One alternative might be to move the "multi" structure into a single QDeclarativeView. For example, rather than having:

Desktop-Widget-Canvas
    -QDeclarativeView
        - QDeclarativeItem
    -QDeclarativeView
        - QDeclarativeItem
    -QDeclarativeView
        - QDeclarativeItem

have:

QDeclarativeView
    -Desktop-Widget-Canvas
        -QDeclarativeItem
        -QDeclarativeItem
        -QDeclarativeItem

In other words, try to move as much of the application structure as possible into QML.

> If I "setParentItem()" on my QDeclarativeItem instances, and
> want them to display independently (like their own dialogs,
> or their own "desktop-widget-type-things"), then must the
> parent *always* be a QDeclarativeView?

If you do need multiple "real" dialogs (e.g. using QDialog), then you will need to have a QDeclarativeView per dialog (e.g. one QDeclarativeView inside each QDialog). If not, you could again try to incorporate the dialogs into a single QML tree. The following is a simple example of how a dialog might be done from QML (hopefully your dialog would look better than mine though:-).

import Qt 4.7
Rectangle {
    width: 640
    height: 400
    Text {
        anchors.horizontalCenter: parent.horizontalCenter
        text: "Click anywhere to show dialog..."
    }
    MouseArea {
        anchors.fill: parent
        onClicked: dialog.state = "visible"
    }

    Rectangle {
        id: dialog
        opacity: 0
        anchors.fill: parent
        color: Qt.rgba(.2,.2,.2,.7)
        Rectangle {
            id: innerDialog
            width: 200; height: 100
            radius: 20
            border.width: 2
            border.color: Qt.rgba(.2,.2,.2)
            x: -200
            y: 150
            Text {
                anchors.centerIn: parent
                horizontalAlignment: Text.Center
                text: "Warning!\n(Click dialog to close)"
            }
            MouseArea {
                anchors.fill: parent
                onClicked: dialog.state = ""
            }
        }
        states: State {
            name: "visible"
            PropertyChanges { target: dialog; opacity: 1 }
            PropertyChanges { target: innerDialog; x: 220 }
        }
        transitions: Transition {
            NumberAnimation { properties: "opacity,x"; duration: 200 }
        }
    }
}

Regards,
Michael