QML nextItemInFocusChain() not working, always refers to self - qt

Calling nextItemInFocusChain() from a child QML component seems to always return the current component. Understandably, calling forceActiveFocus() on that next item does nothing. Note that navigation via the tab key still works as expected.
Minimally Reproducible Example:
qml.qrc
<RCC>
<qresource prefix="/qml">
<file>main.qml</file>
<file>Child.qml</file>
</qresource>
</RCC>
main.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
int main(int argc, char *argv[])
{
#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
const QUrl url(QStringLiteral("qrc:/qml/main.qml"));
QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
&app, [url](QObject *obj, const QUrl &objUrl) {
if (!obj && url == objUrl)
QCoreApplication::exit(-1);
}, Qt::QueuedConnection);
engine.load(url);
return app.exec();
} // main
main.qml
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.12
ApplicationWindow {
width: 800
height: 600
visible: true
visibility: "FullScreen"
title: "HelloWorld"
RowLayout {
spacing: 30
width: 600
Child {
Layout.fillWidth: true
id: test1
}
Child {
Layout.fillWidth: true
id: test2
}
Child {
Layout.fillWidth: true
id: tes3
}
}
onActiveFocusItemChanged: print("activeFocusItem: ", activeFocusItem)
}
child.qml
import QtQuick 2.12
import QtQuick.Controls 2.15
Item {
function focusNext()
{
console.log("focusing next...")
nextItemInFocusChain().forceActiveFocus()
}
Keys.onReturnPressed: focusNext()
TextField {
text: "TEST"
}
}

Putting the logic directly in the TextField results in the correct behavior:
TextField {
...
Keys.onReturnPressed: nextItemInFocusChain().forceActiveFocus()
}
It's unclear to me why the parent item cannot redirect focus in this way.

Related

QtLocation test app freezes of startup using the open streetmap provider?

I'm trying to get qtlocation running with the osm provider but for some reason when the application starts up it just hangs. Cannot even close it.
When I change it to use the "mapboxgl" provider it works fine. I've been using it for many years on ubuntu 20.04 but since I've switched to Ubuntu 22.04 (qt 5.15.3) I'm having issues. Am I missing parameters?
using gcc 11.3.0
Any help would be appreciated
I'm running Qt's test/example app qt's example code
main.cpp:
#include <QGuiApplication>
#include <QQmlApplicationEngine>
int main(int argc, char *argv[])
{
#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
const QUrl url(QStringLiteral("qrc:/main.qml"));
QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
&app, [url](QObject *obj, const QUrl &objUrl) {
if (!obj && url == objUrl)
QCoreApplication::exit(-1);
}, Qt::QueuedConnection);
engine.load(url);
return app.exec();
}
main.qml:
import QtQuick 2.12
import QtQuick.Window 2.12
import QtLocation 5.12
import QtPositioning 5.12
Window {
width: 512
height: 512
visible: true
Plugin {
id: osmPlugin
name: "osm"
// specify plugin parameters if necessary
// PluginParameter {
// name:
// value:
// }
}
Map {
anchors.fill: parent
plugin: osmPlugin
center: QtPositioning.coordinate(59.91, 10.75) // Oslo
zoomLevel: 10
}
}
Then I also tried with qt 5.15.10. same result
Also noted that it stops as soon as it loads 1 tile. every time you run it again you see an extra tile showing(probably cached tiles).

Is it possible to add a Uv cube mapping to a CuboidMesh in QML?

I am developping a 3D cube with 6 different textures and I wanted to know if it's possible to use a cube Uv mapping for a CuboidMesh in QML.
If it's possible, how can I do it ?
I try it but I have the following result :
Here is my code for all the scene including the cube :
import Qt3D.Core 2.12
import Qt3D.Render 2.12
import Qt3D.Extras 2.12
import Qt3D.Input 2.12
import QtQuick 2.12
import QtQuick.Scene3D 2.12
import QtQuick.Window 2.12
import QtQuick 2.15
Entity {
id: root
Entity {
id: cubeEntity
Texture2D {
id: cubeTexture
TextureImage {
source: "qrc:/texture.png"
}
}
CuboidMesh {
id: cubeMesh
xExtent: 1
yExtent: 1
zExtent: 1
}
Transform {
id: cubeTransform
}
ObjectPicker {
id: cubePicker
}
NormalDiffuseMapMaterial{
id: cubeMaterial
diffuse: cubeTexture
normal: cubeTexture
specular: "black"
shininess: 50
}
components: [cubeMesh, cubeTransform, cubeMaterial, cubePicker]
}
}
It works with the Mesh type but I want to use that mapping with a CuboidMesh.
My texture.png is the following image :

Communication between 2 different objects in 2 different QML files

I have one main.qml file and I have other "example.qml" file. When I push a button from "example.qml" file I want to change a text in "main.qml" file. I tried defining the source of the text. I tried send signal. I tried using loader but always came to a dead end.
import QtQuick 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Imagine 2.12
import QtQuick.Window 2.0
//main.qml
Window {
visible: true
width: 1080
height: 720
color: "black"
title: qsTr("MY GUI")
Text {
id: deneme
x: 100
y: 400
color: "white"
text: "Trial"
}
}
//example.qml
Item {
id: difflock
Rectangle{
id: diffLockRect
width: 1080
height: 720
color: "red"
signal mySignal
Button{.
onClicked: main.deneme.text = "Finally"
}
}
}
Create a new qml named by Example.qml(first letter should be capital)
Define in main.qml
Example.qml can access the objects in main.qml
main.qml
import QtQuick 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Imagine 2.12
import QtQuick.Window 2.0
Window {
visible: true
width: 1080
height: 720
color: "black"
title: qsTr("MY GUI")
Example{id:rfrnc} // You can also reach the other qml objects by using this id
Text {
id: deneme
x: 100
y: 400
color: "white"
text: "Trial"
}
}
Example.qml
import QtQuick 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Imagine 2.12
import QtQuick.Window 2.0
Item {
id: difflock
Rectangle{
id: diffLockRect
width: 1080
height: 720
color: "red"
signal mySignal
Button{
onClicked: deneme.text = "Finally"
}
}
}

Declare specific global objects in QML

I am trying to follow this answer, but for more complicated objects:
https://stackoverflow.com/a/25123824/1036082
My files are:
qml.qrc:
<RCC>
<qresource prefix="/">
<file>main.qml</file>
<file>Uconsts.qml</file>
<file>Ucolors.qml</file>
<file>qmldir</file>
</qresource>
</RCC>
main.qml:
import QtQuick 2.9
import QtQuick.Window 2.2
import "."
Window
{
width: 600
height: 400
visible: true
color: Uconsts.colDay.canvas;
}
qmldir:
# qmldir
singleton Uconsts Uconsts.qml
Ucolors.qml:
import QtQuick 2.0
Item
{
property color canvas: "#FFFFFF";
}
Uconsts.qml:
pragma Singleton
import QtQuick 2.9
QtObject
{
property Ucolors colDay:
{
canvas: "#eaedf1";
}
}
When running the program, in runtime I get the following errors from the QML side:
qrc:/main.qml:10: TypeError: Cannot read property 'canvas' of null
qrc:/Uconsts.qml:6:2: Unable to assign QString to Ucolors_QMLTYPE_0*
What am I doing wrong here?
QML does not deduct the type when you use {}, you must create the item explicitly
pragma Singleton
import QtQuick 2.9
QtObject
{
property Ucolors colDay: Ucolors{ canvas: "#eaedf1";}
}

Material-ui error (Missing class properties transform.)

I have been trying to set the material-ui theme in Meteor with react-mounter to mount the components.
I was having issues setting it then I extended the component so that I could set the theme using the examples on the material-ui site.
I now get the following error message.
client/components/navbar.jsx:14:4: /client/components/navbar.jsx: Missing
class properties transform.
Here is the navbar sample code
import React from 'react';
import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import Navigationclose from 'material-ui/svg-icons/navigation/close';
import IconMenu from 'material-ui/IconMenu';
import NavigationMoreVert from 'material-ui/svg-icons/navigation/more-vert';
import MenuItem from 'material-ui/MenuItem';
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
class Navbar extends React.Component {
childContextTypes: {
muiTheme: React.PropTypes.object.isRequired
}
getChildContext() {
return {muiTheme: getMuiTheme(baseTheme)};
}
render() {
return (<AppBar
title="Title"
iconElementLeft={<IconButton><Navigationclose /></IconButton>}
iconElementRight={
<IconMenu
iconButtonElement={
<IconButton><NavigationMoreVert /></IconButton>
}
targetOrigin={{horizontal: 'right', vertical: 'top'}}
anchorOrigin={{horizontal: 'right', vertical: 'top'}}
>
<MenuItem primaryText="Refresh"/>
<MenuItem primaryText="Help"/>
<MenuItem primaryText="Sign out"/>
</IconMenu>
}
/>);
}
}
export default Navbar;
Here is the router.jsx
import React from 'react';
import {mount} from 'react-mounter';
import {MainLayout} from '/client/layouts/mainLayout.jsx';
import Content from '/client/components/content.jsx';
import Navbar from '/client/components/navbar.jsx';
import Footer from '/client/components/footer.jsx';
FlowRouter.route("/", {
action () {
mount(MainLayout, {
navbar: <Navbar/>,
content: <Content/>,
footer: <Footer/>
});
}
});
You need a Babel transform. Meteor 1.3.3+ supports additional plugins and presets via .babelrc
Install the static transform:
npm install babel-plugin-transform-class-properties
# .babelrc
{
"presets": [
"meteor",
"es2015",
"stage-1"
],
"plugins": [
"transform-class-properties"
]
}
Support in Meteor 1.3.3
The transform
I changed it from extending the class too React.createClass and it now works.
import React from 'react';
import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import Navigationclose from 'material-ui/svg-icons/navigation/close';
import IconMenu from 'material-ui/IconMenu';
import NavigationMoreVert from 'material-ui/svg-icons/navigation/more-vert';
import MenuItem from 'material-ui/MenuItem';
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
var Navbar = React.createClass({
childContextTypes: {muiTheme: React.PropTypes.object},
getChildContext() {
return {muiTheme: getMuiTheme(baseTheme)};
},
navigate(event, index, item) {
console.log('navigate', item);
FlowRouter.go(item.route);
},
getMenuItems() {
console.log('navigate1');
return [
{ route: '/', text: 'Home' },
{ route: '/table', text: 'Table' }
];
},
render() {
console.log('Render');
return (<AppBar
title="Title"
iconElementLeft={<IconButton><Navigationclose /></IconButton>}
iconElementRight={
<IconMenu
iconButtonElement={
<IconButton><NavigationMoreVert /></IconButton>
}
targetOrigin={{horizontal: 'right', vertical: 'top'}}
anchorOrigin={{horizontal: 'right', vertical: 'top'}}
>
<MenuItem primaryText="Refresh"/>
<MenuItem primaryText="Help"/>
<MenuItem primaryText="Sign out"/>
</IconMenu>
}
/>);
}
});
export default Navbar;

Resources