Passing key focus from a component to a sub component - qt

Problem: How do I change the focus from the cornerButton once it is active? Once I navigate up from messageButton to the cornerButton I am not able to navigate back down from there to messageButton.
I thought about creating a property attributes for messageButton in simplePop.qml.... Any thoughts? I think my main issue is that I don't fully understand focus and focuscope
simplePop.qml
Popup {
id: root
property alias cornerButton: cornerButton
property var messageButton
Button {
id: cornerButton
visible: true
focus: true
onClicked: root.closeButtonClicked()
Keys.onReturnPressed: {
clicked()
}
Keys.onEscapePressed: {
hide()
}
Keys.onDownPressed: {
cornerButtonExited()
}
KeyNavigation.down: messageButton
}
This is just a snippet of code to convey my issue. I cannot produce a working example from the larger project. I hope this helps with understanding my issue.
This is simplePop.qml
Popup {
id: root
property alias cornerButton: cornerButton
Button {
id: cornerButton
visible: true
onClicked: root.closeButtonClicked()
Keys.onReturnPressed: {
clicked()
}
Keys.onEscapePressed: {
hide()
}
Keys.onDownPressed: {
cornerButtonExited()
}
}
}
This is main.qml
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
simplePop {
Row {
id: buttonsRow
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
UniButton {
id: messageButton
anchors.top: parent.top
onClicked: {
hide();
}
Keys.onReturnPressed: clicked()
KeyNavigation.up: cornerButton
KeyNavigation.down: callButton.enabled ? callButton : null
KeyNavigation.left: cornerButton
KeyNavigation.right: callButton.enabled ? callButton : null
Keys.onPressed: {
if (event.key === Qt.Key_F2 && callButton.enabled) {
callButton.focus = true
}
}
}
UniButton {
id: callButton
anchors.top: parent.top
onClicked: {
hide();
}
Keys.onReturnPressed: clicked()
KeyNavigation.up: messageButton : null
KeyNavigation.left: messageButton
Keys.onPressed: {
if (event.key === Qt.Key_F1) {
messageButton.focus = true
}
}
}
}
}
}

Related

How to use Qt MediaDevices type to switch AudioOutput device

I think I'm missing something here, but I can't figure out how to set a AudioOutput device from MediaDevices audioOutputs list with the QML Components
audioOutput: AudioOutput {
id: playerOutput
device: mediaDevices.defaultAudioOutput
onDeviceChanged: {
console.log("Output device changed " + device)
}
Component.onCompleted: {
console.log(mediaDevices.audioOutputs)
}
}
MediaDevices {
id: mediaDevices
}
The 2 devices are showing:
QAudioDevice(2, Built in earpiece (IN2023), false, Output),
QAudioDevice(3, Built in speaker (IN2023), false, Output)
but I don't understand how to change it, I've tried playerOutput.setDevice() description and id but it wants a QAudioDevice (it only provides description, id and mode, the documentation for both is very vague:
This property can be used to select an output device from the
QtMultimedia::MediaDevices::audioOutputs() list.
https://doc.qt.io/qt-6/qml-qtmultimedia-mediadevices.html
https://doc.qt.io/qt-6/qml-qtmultimedia-audiooutput.html#device-prop
Any help would be appreciated!
Thanks
You can assign an object from mediaDevices.audioOutputs to the devices property of your AudioOutput.
playerOutput.device = mediaDevices.audioOutputs[index]
where index is a valid index in the audioOutputs list.
import QtQuick
import QtQuick.Window
import QtMultimedia
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello AudioOutput")
MediaDevices {
id: mediaDevices
}
MediaPlayer {
id: mediaPlayer
source: "qrc:/Test_ogg_mp3_48kbps.wav"
audioOutput: AudioOutput {
id: playerOutput
device: mediaDevices.defaultAudioOutput
onDeviceChanged: { console.log("Output device changed " + device) }
Component.onCompleted: { console.log(mediaDevices.audioOutputs) }
}
}
component MediaPlayerButton : Rectangle {
id: button
property alias text: label.text
property bool active: false
signal clicked
width: 100; height: 40; radius: 10
color: button.active ? "tomato" : "ghostwhite"
border.color: "gainsboro"
border.width: buttonMouseArea.containsMouse ? 4 : 2
Text {
id: label
anchors.centerIn: parent
font.pointSize: 18
}
MouseArea {
id: buttonMouseArea
anchors.fill: parent
hoverEnabled: true
onClicked: button.clicked()
}
}
Column {
spacing: 10
anchors.centerIn: parent
Row {
spacing: 10
MediaPlayerButton {
text: qsTr("Play")
active: mediaPlayer.playbackState === MediaPlayer.PlayingState
onClicked: { mediaPlayer.play() }
}
MediaPlayerButton {
text: qsTr("Pause")
active: mediaPlayer.playbackState === MediaPlayer.PausedState
onClicked: { mediaPlayer.pause() }
}
MediaPlayerButton {
text: qsTr("Stop")
active: mediaPlayer.playbackState === MediaPlayer.StoppedState
onClicked: { mediaPlayer.stop() }
}
}
Repeater {
model: mediaDevices.audioOutputs
Row {
spacing: 10
Rectangle {
id: r
width: 40; height: 40; radius: 20
color: mediaPlayer.audioOutput.device === mediaDevices.audioOutputs[index] ? "tomato" : "ghostwhite"
border.color: "gainsboro"
border.width: jackMouseArea.containsMouse ? 4 : 1
MouseArea {
id: jackMouseArea
anchors.fill: parent
hoverEnabled: true
onClicked: playerOutput.device = mediaDevices.audioOutputs[index]
}
}
Text {
anchors.verticalCenter: r.verticalCenter
font.pointSize: 12
text: mediaDevices.audioOutputs[index].description
}
}
}
}
}

qml: Rectangle animation not working

I have an application, where I want to apply an animation to a button/ rectangle and after this executes the animation, it should display a dialog. The problem is that when the dialog.visible: true is called on onClicked, the animation is not executed. I have created a test application here are the two qml files:
main.qml
import QtQuick 2.3
import QtQuick.Window 2.2
Window {
visible: true
FileDialogs
{
id:fileDialog
visible:false
width:800
height:800
//modality: Qt.WindowModal
z:10
}
Rectangle
{
id:rect
width:200
height:200
color:"blue"
Text
{
id:simpleText
text:"This is a button"
font.pixelSize: 20
color:"white"
width:200
height:200
}
states: [
State {
name: "PRESSED"
},
State {
name: "RELEASED"
}
]
transitions: [
Transition {
from: "PRESSED"
to: "RELEASED"
PropertyAnimation { id: selectAnim; target: rect; properties: "scale"; easing.type: Easing.OutBack; easing.amplitude: 3.0; easing.period: 1.5; from: 0; to: 1; duration: 400 }
}
]
MouseArea {
anchors.fill: parent
onPressed:
{
parent.state = "PRESSED"
}
onReleased:
{
parent.state = "RELEASED"
}
onClicked: {
fileDialog.visible=true;
}
}
}
}
FileDialogs.qml, from Qt examples
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Dialogs 1.1
import QtQuick.Layouts 1.1
import QtQuick.Window 2.0
Item {
width: 580
height: 400
SystemPalette { id: palette }
clip: true
//! [filedialog]
FileDialog {
id: fileDialog
visible: fileDialogVisible.checked
modality: Qt.WindowModal
title: fileDialogSelectFolder.checked ? "Choose a folder" :
(fileDialogSelectMultiple.checked ? "Choose some files" : "Choose a file")
selectExisting: fileDialogSelectExisting.checked
selectMultiple: fileDialogSelectMultiple.checked
selectFolder: fileDialogSelectFolder.checked
nameFilters: [ "Image files (*.png *.jpg)", "All files (*)" ]
selectedNameFilter: "All files (*)"
sidebarVisible: fileDialogSidebarVisible.checked
onAccepted: {
console.log("Accepted: " + fileUrls)
if (fileDialogOpenFiles.checked)
for (var i = 0; i < fileUrls.length; ++i)
Qt.openUrlExternally(fileUrls[i])
}
onRejected: { console.log("Rejected") }
}
//! [filedialog]
ScrollView {
id: scrollView
anchors {
left: parent.left
right: parent.right
top: parent.top
bottom: bottomBar.top
leftMargin: 12
}
ColumnLayout {
spacing: 8
Item { Layout.preferredHeight: 4 } // padding
Label {
font.bold: true
text: "File dialog properties:"
}
CheckBox {
id: fileDialogModal
text: "Modal"
checked: true
Binding on checked { value: fileDialog.modality != Qt.NonModal }
}
CheckBox {
id: fileDialogSelectFolder
text: "Select Folder"
Binding on checked { value: fileDialog.selectFolder }
}
CheckBox {
id: fileDialogSelectExisting
text: "Select Existing Files"
checked: true
Binding on checked { value: fileDialog.selectExisting }
}
CheckBox {
id: fileDialogSelectMultiple
text: "Select Multiple Files"
Binding on checked { value: fileDialog.selectMultiple }
}
CheckBox {
id: fileDialogOpenFiles
text: "Open Files After Accepting"
}
CheckBox {
id: fileDialogSidebarVisible
text: "Show Sidebar"
checked: fileDialog.sidebarVisible
Binding on checked { value: fileDialog.sidebarVisible }
}
CheckBox {
id: fileDialogVisible
text: "Visible"
Binding on checked { value: fileDialog.visible }
}
Label {
text: "<b>current view folder:</b> " + fileDialog.folder
}
Label {
text: "<b>name filters:</b> {" + fileDialog.nameFilters + "}"
}
Label {
text: "<b>current filter:</b>" + fileDialog.selectedNameFilter
}
Label {
text: "<b>chosen files:</b> " + fileDialog.fileUrls
}
Label {
text: "<b>chosen single path:</b> " + fileDialog.fileUrl
}
}
}
Rectangle {
id: bottomBar
anchors {
left: parent.left
right: parent.right
bottom: parent.bottom
}
height: buttonRow.height * 1.2
color: Qt.darker(palette.window, 1.1)
border.color: Qt.darker(palette.window, 1.3)
Row {
id: buttonRow
spacing: 6
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 12
height: implicitHeight
width: parent.width
Button {
text: "Open"
anchors.verticalCenter: parent.verticalCenter
onClicked: fileDialog.open()
}
Button {
text: "Pictures"
tooltip: "go to my Pictures directory"
anchors.verticalCenter: parent.verticalCenter
enabled: fileDialog.shortcuts.hasOwnProperty("pictures")
onClicked: fileDialog.folder = fileDialog.shortcuts.pictures
}
Button {
text: "Home"
tooltip: "go to my home directory"
anchors.verticalCenter: parent.verticalCenter
enabled: fileDialog.shortcuts.hasOwnProperty("home")
onClicked: fileDialog.folder = fileDialog.shortcuts.home
}
}
}
}
The animation is happening. It's just the FileDialog is covering the button before you can see it animate. Release the mouse click outside the button area and you'll see the animation (this way onClicked is not triggered).
A way to show the dialog after the animation:
states: [
State {
name: "PRESSED"
},
State {
name: "RELEASED"
}
]
transitions: [
Transition {
from: "PRESSED"
to: "RELEASED"
PropertyAnimation { id: selectAnim; target: rect; properties: "scale"; easing.type: Easing.OutBack; easing.amplitude: 3.0; easing.period: 1.5; from: 0; to: 1; duration: 400 }
onRunningChanged: {
if (!running) {
fileDialog.visible = true
}
}
}
]
MouseArea {
anchors.fill: parent
onPressed:
{
parent.state = "PRESSED"
}
onClicked: {
parent.state = "RELEASED"
}
}

How to disable drag&drop for first Item of a ListView in QML

I have a QML project where I am able to drag & drop rectangles that are in a ListView.
I want to disable the drag&drop feature for the first Item (rectangle) of the ListView.
Here is an example:
Rectangle {
visible: true
width: 1000; height: 1000
ListView {
id: root
width: parent.width; height: parent.height
model: DelegateModel {
id: visualModel
model: myModel
model: ListModel {
id: colorModel
ListElement { someData }
...
}
delegate: MouseArea {
property int visualIndex: DelegateModel.itemsIndex
id: delegateRoot
cursorShape: Qt.PointingHandCursor
width: root.width; height: 100
drag.target: icon
drag.axis: Drag.YAxis
drag.minimumY: 0
property bool current: false
Rectangle {
blablaData
//Something like : if firstItem, disable drag&drop
}
onClicked: {
delegateRoot.current = !delegateRoot.current;
if(current) {
delegateRoot.height = 300
}
else {
delegateRoot.height = 100
}
}
Rectangle {
id: container
anchors.top: icon.bottom
width: root.width-5
height: delegateRoot.height - icon.height
clip: true
border.color: "#81BEF7"
Behavior on implicitHeight {
PropertyAnimation { duration: 100 }
}
Text {
anchors.fill: parent
anchors.margins: 10
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
text: size
}
}
DropArea {
anchors { fill: parent; margins: 15 }
onEntered: {
visualModel.items.move(drag.source.visualIndex, delegateRoot.visualIndex)
}
}
}
}
}
}
Do you have any idea of how to do it ?
Thanks a lot !
EDIT: Added some features to my example
In the delegate root item, try:
enabled: index ? true : false
I found an easy way to do it, and you can use it for the item you want (not only the first one).
I need to change drag.target and drag.axis in delegateRoot by using and setting a boolean like isDraggable to true or false on each item and then use it like this:
drag.target: isDraggable ? content : undefined
drag.axis: isDraggable ? Drag.YAxis : Drag.None

How to propertly connect signal in Loader's item?

I want connect one signal from QObject to various pages, loaded by the "Loader" qml element. My problem similar Dead QML elements receiving signals? but loaded items destroyed before calling the "onDestruction" method.
For example below, if switch from page1 to page2 in console writed:
"QML: Loading status: 1 Item: QDeclarativeRectangle(0x8dcd408, "page2")
QML Item: Loaded QDeclarativeRectangle(0x8dcd408, "page2") 1
qrc:/page1.qml:12: TypeError: Result of expression 'parent' [null] is not an object.
qrc:/page1.qml:15: ReferenceError: Can't find variable: page1text"
every second. So there can't disconnect from signal because parent object is destroyed.
How to handle signals from QObject (root) in loaded items? or How to disconnect signal from unloaded page?
main.qml
import QtQuick 1.1
Rectangle {
id: root
objectName: "root"
width: 360
height: 360
state: "page1"
color: "white"
Item {
width: parent.width
height: parent.height/2
anchors.top: parent.top
Loader {
id: pageLoader
objectName: "pageLoader"
anchors.fill: parent
anchors.centerIn: parent
signal textMsg(variant params)
onStatusChanged: console.log("QML: Loading status: ", status, " Item: ", item)
onLoaded: { console.log("QML Item: Loaded",item,status); }
}
}
states: [
State {
name: "page1"
PropertyChanges { target: pageLoader; source: "qrc:/page1.qml"}
}
,State {
name: "page2"
PropertyChanges { target: pageLoader; source: "qrc:/page2.qml"}
}
]
Timer {
// simulate signals from QObject
interval: 1000; running: true; repeat: true
onTriggered: pageLoader.textMsg({"msg2page1":"test","msg2page2":"test"})
}
Rectangle {
anchors.left: parent.left
anchors.bottom: parent.bottom
width: parent.width/2
height: parent.height/2
border {
color: "black"
width: 1
}
color: "yellow"
Text{
anchors.fill: parent
anchors.centerIn: parent
text: "Set Page 1"
}
MouseArea {
anchors.fill: parent
onClicked: {
root.state = "page1";
}
}
}
Rectangle {
anchors.right: parent.right
anchors.bottom: parent.bottom
width: parent.width/2
height: parent.height/2
border {
color: "black"
width: 1
}
color: "red"
Text{
anchors.fill: parent
anchors.centerIn: parent
text: "Set Page 2"
}
MouseArea {
anchors.fill: parent
onClicked: {
root.state = "page2";
}
}
}
}
page1.qml
import QtQuick 1.1
Rectangle {
id: page1
objectName: "page1"
color: "yellow"
Component.onCompleted: {
parent.textMsg.connect(msgHandler);
}
Component.onDestruction: {
parent.textMsg.disconnect(msgHandler);
}
function msgHandler(params) {
page1text.text += " "+params.msg2page1;
}
Text {
id: page1text
anchors.fill: parent
wrapMode: Text.WordWrap
text: "page1"
}
}
page2.qml
import QtQuick 1.1
Rectangle {
id: page2
objectName: "page2"
color: "red"
}
That's nicely described in Loader documenation. It reads:
Any signals emitted from the loaded item can be received using the Connections element.
There is also an example, I copy it below for the sake of clarity:
// Application.qml
import QtQuick 1.0
Item {
width: 100; height: 100
Loader {
id: myLoader
source: "MyItem.qml"
}
Connections {
target: myLoader.item
onMessage: console.log(msg)
}
}
// MyItem.qml
import QtQuick 1.0
Rectangle {
id: myItem
signal message(string msg)
width: 100; height: 100
MouseArea {
anchors.fill: parent
onClicked: myItem.message("clicked!")
}
}
Clearly, if item is destroyed, any signal handlers are ignored until the target is recreated again.
My answer is: Don't use the "Loader", create child object by JS and destroy it as no needed, for example:
main.qml
import QtQuick 1.1
import "qrc:/pageloader.js" as Pageloader
Rectangle {
id: root
objectName: "root"
width: 360
height: 360
state: "page1"
color: "white"
signal textMsg (variant params)
states: [
State {
name: "page1"
StateChangeScript{ script: Pageloader.createPageObject("qrc:/page1.qml");}
}
,State {
name: "page2"
StateChangeScript{ script: Pageloader.createPageObject("qrc:/page2.qml");}
}
]
Timer {
// simulate signals from QObject
interval: 1000; running: true; repeat: true
onTriggered: textMsg({"msg2page1":"test","msg2page2":"test"})
}
Rectangle {
anchors.left: parent.left
anchors.bottom: parent.bottom
width: parent.width/2
height: parent.height/2
border {
color: "black"
width: 1
}
color: "yellow"
Text{
anchors.fill: parent
anchors.centerIn: parent
text: "Set Page 1"
}
MouseArea {
anchors.fill: parent
onClicked: {
root.state = "page1";
}
}
}
Rectangle {
anchors.right: parent.right
anchors.bottom: parent.bottom
width: parent.width/2
height: parent.height/2
border {
color: "black"
width: 1
}
color: "red"
Text{
anchors.fill: parent
anchors.centerIn: parent
text: "Set Page 2"
}
MouseArea {
anchors.fill: parent
onClicked: {
root.state = "page2";
}
}
}
}
pageloader.js
var component;
var sprite;
function createPageObject(path) {
if(sprite){
console.log("sprite.destroy() ",typeof sprite);
sprite.destroy();
console.log("component.destroy() ",typeof component);
component.destroy();
}
component = Qt.createComponent(path);
if (component.status === Component.Ready)
finishCreation();
else
component.statusChanged.connect(finishCreation);
}
function finishCreation() {
if (component.status == Component.Ready) {
sprite = component.createObject(root);
if (sprite == null) {
// Error Handling
console.log("Error creating object");
}
} else{
if (component.status === Component.Error) {
// Error Handling
console.log("Error loading component:", component.errorString());
}else{
console.log("Component status changed:", component.status);
}
}
}
page1.qml and page2.qml not changed.
I got it. My setup:
qml file to display ListViews
Several qml files defining Listviews, each takes a different column of different SQL tables. The model comes from C++
So here is the shortened code:
Dialog {
id: dialog
width: 1000; height: 400
property Component listViewItem
signal newDatabaseEntry( string text ) [1]
contentItem: Rectangle {
[...]
TextInputWithButton { [3]
id: newRecords
onInputAccepted: { newDatabaseEntry( text ) } [1]
}
}
[...]
Loader {
id: listViewPlaceholder
anchors.fill: parent
sourceComponent: dialog.listViewItem
onLoaded: {
if( typeof listViewPlaceholder.item.insertRecord === "function" )
// newRecords.inputAccepted.connect( listViewPlaceholder.item.insertRecord ) [1]
dialog.newDatabaseEntry.connect( listViewPlaceholder.item.insertRecord ) [2]
}
The above code is the general view of ListViews. The signal roundtrip [1] is necessary, otherwise no data is passed. How to chain signals is described here:
http://doc.qt.io/qt-5/qtqml-syntax-signals.html#connecting-signals-to-methods-and-signals
The input button [3] delivers the confirmed data to be inserted into the db.
A ListView passed to the above function looks like this:
DialogSqlSingleColumnEdit {
listViewItem: ListView {
function insertRecord( text ) {
console.log( "done:" + text )
sqlModel.insertRecord( text )
}
[...]
The insertRecord is called forwards the text to the sql-C++ model.

How to show a context menu on right click in TableView rowDelegate

I want to show a context menu when right-clicking on TableView rows. I tried this code:
import QtQuick 2.0
import QtQuick.Controls 1.0
TableView { id: tableView
width: 300
height: 200
TableViewColumn { role: 'a'; title: 'a'; width: 50 }
TableViewColumn { role: 'b'; title: 'b'; width: 50 }
model: ListModel {
ListElement { a: 1; b: 2 }
ListElement { a: 3; b: 4 }
ListElement { a: 5; b: 6 }
ListElement { a: 7; b: 8 }
ListElement { a: 9; b: 10 }
ListElement { a: 11; b: 12 }
}
Menu { id: contextMenu
MenuItem {
text: qsTr('Delete')
}
}
rowDelegate: Item {
Rectangle {
anchors {
left: parent.left
right: parent.right
verticalCenter: parent.verticalCenter
}
height: parent.height
color: styleData.selected ? 'lightblue' : 'white'
MouseArea {
anchors.fill: parent
propagateComposedEvents: true
onReleased: {
if (typeof styleData.row === 'number') {
tableView.currentRow = styleData.row
if (mouse.button === Qt.RightButton) { // never true
contextMenu.popup()
}
}
mouse.accepted = false
}
}
}
}
}
The context menu is not shown because the onReleased handler is not called for right-clicks.
I used propagateComposedEvents and mouse.accepted = false as suggested in the documentation here but it doesn't work anyway and I don't think that onReleased is a composed event.
I need help to make the code above work as expected.
Thank you.
Looks like this can be done easier:
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: {
console.log("Click")
if (mouse.button == Qt.LeftButton)
{
console.log("Left")
}
else if (mouse.button == Qt.RightButton)
{
console.log("Right")
}
}
}

Resources