To create a new dialogue box using QML



  • 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



  • 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



  • 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



  • 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,


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.