Re: [Interest] Strategies to create dialog boxes dynamically in Qml

[Mark Tucker]

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.a...@qt-project.org 
[mailto:interest-bounces+mark.tucker=airborne.a...@qt-project.org] On Behalf Of 
Nuno Santos
Sent: 29 September 2015 12:11
To: interest <interest@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

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