qml-old/examples/examples.org

QML Examples

• Hello World
• Signals and Slots

Hello World

This is a simple "Hello World" program, opening a window and displaying a text.

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15

Window {
    id: window
    visible: true
    width: 800
    height: 600

    Rectangle {
        color: "lightgray"
        width: 800
        height: 600
        x: 0
        y: 0
        Text {
            text: qt("Hello World!")
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            font.pointSize: 24
            font.bold: true
        }
    }
}

(import (chicken base)
        srfi-18
        (qml core)
        coops)

(gui-application-create)
(define engine (make <QQmlApplicationEngine>))

(load-url engine (new-QUrl "helloworld.qml"))
(do ((loop #t))
    ((not loop) #t)
  (thread-sleep! (seconds->time (+ 0.05 (time->seconds (current-time)))))
  (process-events-timed (qevent-loop-process-event-flag process-all-events:) 50))

Signals and Slots

Adapted from https://raymii.org/s/snippets/Cpp_QT_QML_Signals_and_Slots.html

import QtQuick 2.11
import QtQuick.Window 2.11
import QtQuick.Controls 2.11

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("QML Signals and slots example - Raymii.org")

    MenuBar {
        width: parent.width
        Menu {
            title: qsTr("File")
            MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit();
            }
        }
    }

    Column {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        spacing: 20

        Text {
            id: info
            width: parent.width * 0.9
            wrapMode: Text.WordWrap
            text: "QML / C++ binding via signals and slots example program, by Raymii.org. License: GNU GPLv3"
        }


        Text {
            id: labelCount
            // C++ method Counter::value(). Bound via Q_PROPERTY, updates automatically on change
            text: "Counter: " + MyCounter.value + "."
        }

        Text {
            property int changeCount: 0
            id: labelChanged
            text: "Count has changed " + changeCount + " times."
            // Receive the valueChanged NOTIFY
            Connections {
                target: MyCounter
                onValueChanged: {
                    ++labelChanged.changeCount
                }
            }
        }

        Row {
            spacing: 20
            Button {
                text: qsTr("Increase Counter")
                onClicked: ++MyCounter.value
            }

            Button {
                text: qsTr("Set counter to 10")
                // C++ method Counter::setValue(long long), bound via Q_PROPERTY
                onClicked: MyCounter.setValue(10)
            }

            Button {
                text: qsTr("Reset")
                onClicked: {
                    // C++ method Counter::setValue(long long), bound via Q_PROPERTY
                    MyCounter.setValue(0)
                }
            }
        }

        Row {
            spacing: 20

            Text {
                id: setText
                text: qsTr("Enter counter value: ")
            }
            Rectangle {
                width: setText.width
                height: setText.height
                border.width: 1
                border.color: "black"

                TextInput {
                    id: counterInput
                    focus: true
                    text: MyCounter.value
                }
            }
            // Bi-directional binding, entering a number in the textarea updates the
            // C++ class, if the C++ class is updated, the textarea is updated as well.
            Binding {
                target: MyCounter
                property: "value"
                value: counterInput.text
            }
        }
    }
}

(import (chicken base)
        srfi-18
        (qml core)
        coops
        coops-primitive-objects)

(gui-application-create)
(define engine (make <QQmlApplicationEngine>))

;; Create counter object

(define (callback self slotName argv)
  (print self " == " slotName " == " argv))
;; See https://doc.qt.io/qt-5/qmetatype.html for the meta types
(define counter (make-QObject #f "Counter" #f callback
                              (new-Signals (list (new-Signal "valueChanged" '(int))))
                              (new-Slots (list (new-Slot "setValue" 43 '(int))
                                               (new-Slot "value" 2 '(void))))
                              (new-Properties (list (new-Property "value" 2 "value" "setValue" "valueChanged")))))

(set-property root-context "MyCounter" counter)

(load engine (new-QUrl "signals-slots.qml"))

(do ((loop #t))
    ((not loop) #t)
  (thread-sleep! (seconds->time (+ 0.05 (time->seconds (current-time)))))
  (process-events-timed (qevent-loop-process-event-flag process-all-events:) 50))