[Interest] Strategies to create dialog boxes dynamically in Qml

Mark Tucker mark.tucker at airborne.aero
Tue Sep 29 15:09:23 CEST 2015


Hello Nuno,

In finishUIDDialogCreation() (after your check for it being null) you can connect the signals you're emitting from your dialog to another function of your choice, for instance if you had a function named "handleOKClicked" then you can do this:

dialog.okClicked.connect(handleOKClicked)

Then in that function you can disconnect your function from the signal like so:

dialog.okClicked.disconnect(handleOKClicked)

(since you're destroying your dialog object, this part may not be required, but I like to make sure)

You can then from your function do whatever you like, including destroying your dialog object.

Mark

From: interest-bounces+mark.tucker=airborne.aero at qt-project.org [mailto:interest-bounces+mark.tucker=airborne.aero at qt-project.org] On Behalf Of Nuno Santos
Sent: 29 September 2015 12:11
To: interest <interest at qt-project.org>
Subject: [Interest] Strategies to create dialog boxes dynamically in Qml

Hi,

I’m trying to implement a custom dialog box on qml using dynamic object creation methods. I’m using the javascript approach to create the component and then the object. The object appears on the scene and it has two buttons. The question is. What are the strategies available to receive the user input and react according? I want to be able to receive the answer and then destroy the dialog.

My small test:

// main.qml
import QtQuick 2.4
import QtQuick.Window 2.2

import "ObjectManagement.js" as ObjectManagement

Window {
    id: window
    visible: true
    width: 1024
    height: 768

    MouseArea {
        anchors.fill: parent
        onClicked: ObjectManagement.createUIDialog(window)
    }
}

// ObjectManagement.js

var parent
var component;
var dialog;

function createUIDialog(p)
{
    parent = p
    component = Qt.createComponent("UIDialog.qml");

    if (component.status==Component.Ready)
        finishUIDialogCreation();
    else
        component.statusChanged.connect(finishUIDialogCreation);
}

function finishUIDialogCreation()
{
    if (component.status==Component.Ready)
    {
        dialog = component.createObject(parent, {"x": 100, "y": 100});

        if (dialog==null)
            console.log("Error creating object");
    }
    else if (component.status==Component.Error)
        console.log("Error loading component:", component.errorString());
}

// UIDialog.qml

import QtQuick 2.0

Rectangle {
    id: root
    color: "yellow"
    width: 300
    height: 100

    signal okClicked
    signal cancelClicked

    Row {
        Rectangle {
            width: 100
            height: 50
            color: "green"

            MouseArea {
                anchors.fill: parent
                onClicked: root.okClicked()
            }
        }

        Rectangle {
            width: 100
            height: 50
            color: "red"

            MouseArea {
                anchors.fill: parent
                onClicked: root.cancelClicked()
            }
        }
    }
}

Thanks

Regards,

Nuno
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20150929/e78e9ea9/attachment.html>


More information about the Interest mailing list