To create a new dialogue box using QML

actionking

Dear guys,
I'm a beginner in QT.Just before 5 days i have started to work on it.Now i was working in QML...In that,my task is to create a new dialogue box by disabling the parent control..That is,if we click any button or any item,a new small dialgoue box should be overlayed on the big rectangle,control should be in new dialogue box and at that time if we clicked in big rectangle region means,it should not be obeyed (i.e;control should be in new dialogue box untill we cancel it ).But both big rectangle and new small dialogue box should be visible(i.e;new dialogue should be overlayed on the big rectangle and the big rectangle should be visible as a partial.Is there any property ,if means please explain it with a example.
with regards,
mohanakannan

JapieKrekel

I'm also not working that long on QML but this is how I do it.

I make the dialog as a new .qml file. This will be created dynamically and added on top of the parent.
You could also use the QML Loader component to load a QML file if you want.

The dialog component qml file contains a overlay that will cover the 'parent control' as you call it. That overlay has a MouseArea with no handler to disable clicking outside of the dialog.

I prepared a simple demo consisting of the main screen that will popup the dialog and the dialog qml file itself.
MainWindow.qml
@
// This is the main window that will show a dialog as a popup
// It simple contains a rectangle that acts as a button
// The dialog will be created dynamically (i.s.o. using a Loader)
// The dialog is destroyed in the Dialog.qml itself
import QtQuick 2.0

// We start with a Rectangle so that we can set color etc
Rectangle {
id: mainWindow
width: 360
height: 360

// This rectangle acts as the button
// It has no states, so no pressed states, etc
// Added rounded corners (radius) for button appearance
Rectangle {
    id: myButton
    x: 125
    y: 84
    width: 100
    height: 30
    color: "#000000"
    Text {
        anchors.centerIn: parent
        color: "#FFFFFF"
        text: "dialog"
    }
    // This mouse area fills the complete myButton
    // when clicked it will create Dialog.qml dynamically
    // adding it to the rectangle with the id=mainWindow
    MouseArea {
        anchors.fill: parent
        onClicked: {
            // now we create a dialog QML object dynamically
            // we do not pass any properties to the dialog so we use {}
            Qt.createComponent("Dialog.qml").createObject(mainWindow, {});
        }
    }
}

}
@

Now we need a QML file for the dialog itself. Create a file called Dialog.qml
@
// This QML file (called Dialog.qml) is used to create a simple popup
// It will show an overlay on top of the parent and a small white area
// that is the dialog itself. For demo purposes no fancy stuff in the popup
import QtQuick 2.0

// Use an item as container to group both the overlay and the dialog
// I do this because the overlay itself has an opacity set, and otherwise
// also the dialog would have been semi-transparent.
// I use an Item instead of an Rectangle. Always use an 'Item' if it does not
// display stuff itself, this is better performance wise.
Item {
id: dialogComponent
anchors.fill: parent

// Add a simple animation to fade in the popup
// let the opacity go from 0 to 1 in 400ms
PropertyAnimation { target: dialogComponent; property: "opacity"; 
                              duration: 400; from: 0; to: 1; 
                              easing.type: Easing.InOutQuad ; running: true }

// This rectange is the a overlay to partially show the parent through it
// and clicking outside of the 'dialog' popup will do 'nothing'
Rectangle {
    anchors.fill: parent
    id: overlay
    color: "#000000"
    opacity: 0.6
    // add a mouse area so that clicks outside
    // the dialog window will not do anything
    MouseArea {
        anchors.fill: parent
    }
}

// This rectangle is the actual popup
Rectangle {
    id: dialogWindow
    width: 100
    height: 62
    radius: 10
    anchors.centerIn: parent
    
    Text {
        anchors.centerIn: parent
        text: "This is the popup"
    }
    
    // For demo I do not put any buttons, or other fancy stuff on the popup
    // clicking the whole dialogWindow will dismiss it
    MouseArea{
        anchors.fill: parent
        onClicked: {
            // destroy object is needed when you dynamically create it
            dialogComponent.destroy()
        }
    }
}

}
@

I hope this is what you're looking for.

Happy coding

actionking

Hi JapieKrekel,
Thanks for your reply,sir....It's worked.....I have gone through your codings for three times and then i got it out,what you are coming to say...Now i need to integrate this in my coding...Thanks a lot.Now i'm feeling better..
With regards,
K.V.Mohanakannan

nathan

Hi JapieKrekel,
Thanks for your post it helped me a lot.
I am facing a problem though. The screen where the popup shows up is scrollable. When the popup is visible (the object is created) the user can still scroll behind the popup.
Do you know how to avoid this?
Best,