Wednesday 1 January 2014

Handle qml event

Qt Qml introduce concept "Signal" for event system. The event talked by us usually is named signal here, and the event handler is called signal handler too.
The official doc is located at below:
http://qt-project.org/doc/qt-5/qtqml-syntax-signals.html

Below is my simple example for this. A qml file which contains a input text and a button. Qt allows us to use JavaScript code for handling received signal.
import QtQuick 2.0
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1
import QtQuick.Dialogs 1.1
Rectangle {
    Rectangle {
        id: inr
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.leftMargin: 5
        anchors.topMargin: 10
        width: parent.width * 0.8
        height: parent.height * 0.4
        border.color: "black"
        border.width: 1
        TextInput {
            id: input_t1
            text: "FileGDB path"
            readOnly: true
            anchors.top: parent.top
            anchors.topMargin: 5
            anchors.left: parent.left
            anchors.leftMargin: 5
            cursorVisible: false
        }
        Button {
            id: input_t2
            text: "Choose"
            anchors.top: input_t1.bottom
            anchors.topMargin: 5
            anchors.left: parent.left
            anchors.leftMargin: 5
            onClicked: {
                console.log("ok");
            }
        }
    }
}
 In onClicked handler, I write one line JavaScript code: console.log("ok");
Let's test it with command:
 ~/Qt5.2.0/5.2.0/gcc_64/bin/qmlscene ./qmls/props/input/file_gdb.qml
Now click the choose button, you will see one string "ok" is printed in terminal. 
Above the the simplest demo. Now, I will popup a file dialog when clicking the button. Add below code in qml file
        FileDialog {
            id: fileDialog
            title: "Please choose a file"
            onAccepted: {
                input_t1.text = fileDialog.fileUrls[0]
            }
            onRejected: {
                console.log("Canceled")
            }
        }
Below is some screenshots for this example.






No comments:

Followers

Contributors