2.05

Handlers (P0 | 3h)

Explanation of the contents of a topic page @ Topic reference page

Back to Week 2

Objective: Handling multiple touch events in a single item

Comment: Handling multiple touches in a single item (adding a MouseArea and PinchArea on the top of an item does not work. Using handlers we can solve this problem)

Beginner

• Can you use a MouseArea and a PinchArea on the top of the same Rectangle?

Intermediate

• How do you handle multiple touch events in one item?
• How are handlers beneficial to MultiPointTouchArea?

Expert

Omitted

---

Course material content

K: this needs to be introduced better I think...

Tino: The key message is clear in my opinion.

Qt Quick has multiple types that can handle touch events:

• MouseArea: the basic mouse interaction handler
• PinchArea: handles two-finger scaling, rotation and dragging
• MultiPointTouchArea: declared touchpoints can be bound to items
• Flickable: surface that can be moved with a fast stroke

Tino: Flickable?

These items have some issues due to architectural decisions in Qt and Qt Quick. The issue with MouseArea is that Qt assumes there is only one mouse, "core pointer" and QMouseEvent and QTouchEvents are considered the same events inside Qt Quick. The result is that you cannot interact with two MouseAreas or Flickables at the same time. With our previous MouseArea usecases this means that you cannot press two Buttons at the same time or drag two Sliders a the same time, for example. This also means that you cannot use PinchArea and MouseArea together, as when PinchArea is active it wont pass the events to the MouseArea.

To fix the issue, Qt introduced the new Pointer Handler types in Qt 5.10 technology preview! Pointer Handlers can be declared inside any Item type and they can handle events from any pointing devices on behalf of the parent. They are very lightweight types, they are intended to be declared as a handler for each interaction type there might exist. Each Item can have unlimited Handler types, so you wont run out of them.

You can declare constraints on what kind of interaction the handler is going to react on, whether it is a touch event, mouse button or a modifier key is active. This is done with the properties acceptedButtons and acceptedDevices where one can select the accepted Qt::MouseButtons or the accepted pointer devices like PointerDevice.Mouse, PointerDevice.Stylus or PointerDevice.TouchScreen.

To use these new experimental handlers, we need to import from Qt.labs.handlers 1.0. There are multiple handlers implemented in Qt 5.10, we are going to go through a few of them here.

TapHandler is comparable to MouseArea with a few key differences:

import Qt.labs.handlers 1.0

Item {
    TapHandler {
        acceptedDevices: PointerDevice.Mouse | PointerDevice.Stylus
        onTapped: console.log("left clicked")
    }
    
    TapHandler {
        acceptedDevices: PointerDevice.TouchScreen
        onTapped: console.log("tapped")
    }
    
    TapHandler {
        acceptedButtons: Qt.RightButton
        onTapped: console.log("right clicked")
    }
}

We can now accept events from specific devices and react accordingly. As mentioned, there can be also multiple TapHandlers active inside the same Item.

DragHandler is similar to the MouseArea drag property, but more straightforward to use. It has the similar xAxis and yAxis property groups as the MouseArea:

import Qt.labs.handlers 1.0

Rectangle {
    width: 50
    height: 50
    color: "green"
    
    DragHandler {
        yAxis.enabled: false
    }
}

There is also a PointHandler which can be used to track a touch point:

import Qt.labs.handlers 1.0

Item {
    id: root

    PointHandler {
        id: handler
        acceptedDevices: PointerDevice.Mouse | PointerDevice.Stylus
        target: Rectangle {
            parent: root
            color: "blue"
            visible: handler.active
            x: handler.point.position.x - width / 2
            y: handler.point.position.y - height / 2
            width: 20
            height: width
            radius: width / 2
        }
    }

}

When a press event occurs, the handler will choose a point that has not been bound to any other handlers. It will check if the constraints given (acceptedDevices etc.) are satisfied and it is eligible for the point. It will then track the point with the property active as true until release. Like other handlers, it has the target property where we have placed an Rectangle and bound the handler properties.

Instructions and description for the exercise of the topic

---

Exhaustive reference material mentioned in this topic

Further reading topics/links: