How to call data from elsewhere when I click a button in QML - qt

When I click a button in QML, I want the data from another place that I created before to come to the textfields in my table, how can I do it? Can I do this in QML or do I need to create a separate backend cpp file? Can you help me please?
For example this below code is one row of my table
Rectangle{
border.width: 2
border.color: "black"
id:rectangle_mov_mean_nokta_sayisi
Layout.alignment: Qt.AlignCenter
Layout.preferredWidth: mainWindow.width/8
Layout.preferredHeight: mainWindow.height/22
Layout.margins: -3
Layout.fillWidth: true
color: row_even
Text{
color:normal_text
id:text_rectangle_mov_mean_nokta_sayisi
text:"Mov Mean Nokta Sayısı"
anchors.centerIn: parent
}
}
Rectangle{
border.width: 2
border.color: "black"
id:rectangle_mov_mean_nokta_sayisi_deger
Layout.alignment: Qt.AlignCenter
Layout.preferredWidth: mainWindow.width/8
Layout.preferredHeight: mainWindow.height/22
Layout.margins: -3
Layout.fillWidth: true
color:row_even
TextField {
id:textfield_rectangle_mov_mean_nokta_sayisi_deger
anchors.centerIn: parent
placeholderText: qsTr("")
color:normal_text
}
}
There are 20 of these rectangles. When I click a button, a separate value will be displayed for each text field. I need to create these values elsewhere.

you should read Signal and Slots in QML.
For example :
If you have 3 separate QML files:
In main.qml:
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
visible: true
width: 640
height: 480
title: qsTr("External Components with signals and slots")
Notifier{
id : notifierId
rectColor: "yellowgreen"
target: receiverId
}
Receiver {
id : receiverId
rectColor: "dodgerblue"
anchors.right: parent.right
}
Component.onCompleted: {
notifierId.notify.connect(receiverId.receiveInfo)//Connect signal to slot
}
}
and in Receiver.qml :
import QtQuick 2.12
Item {
property alias rectColor: receiverRectId.color
width: receiverRectId.width
height: receiverRectId.height
function receiveInfo( count){
receiverDisplayTextId.text = count
console.log("Receiver received number : "+ count)
}
Rectangle {
id : receiverRectId
width: 200
height: 200
color: "red"
Text {
id : receiverDisplayTextId
anchors.centerIn: parent
font.pointSize: 20
text : "0"
}
}
}
and in Notifier.qml:
import QtQuick 2.12
Item {
property alias rectColor: notifierRectId.color
width: notifierRectId.width
height: notifierRectId.height
property int count: 0
signal notify( string count)//Declare signal
property Receiver target : null
onTargetChanged: {
notify.connect(target.receiveInfo)
}
Rectangle {
id : notifierRectId
width: 200
height: 200
color: "red"
Text {
id : displayTextId
anchors.centerIn: parent
font.pointSize: 20
text : count
}
MouseArea{
anchors.fill: parent
onClicked: {
count++
notify(count)
}
}
}
}
you can see that by using signals and slots you can send data from Notifier.qml to Receiver.qml.

Related

How can I read listmodel role property in main.qml?

In main.qml, I am updating listModel dynamically on every function addItem() call. Herein, I am setting two role; buttonTypeRole and source. OneText.qml file has a Text field. Actually, after inserting buttonTypeRole and source into listModel, I want to know whether source is being truncated or not.
IS ANY WAY TO READ OneText.qml TEXT TRUNCATED PROPERTY IN main.qml FILE?
main.qml
function additem()
{
listModel.insert(tlist.listModel.count , {"buttonTypeRole":"OneText.qml", "source":editText})
console.log("model-- "+tlist.listModel.get(sourceIndex).t)
}
listModel and ListView snapshot:
Item
{
property alias listModel: listModel
ListModel
{
id:listModel
}
Rectangle
{
id:listHolder
border.color: "transparent"
border.width: 3
color:"transparent"
height:560
width:600
focus:true
ListView
{
//id:listview
x:5
y:5
spacing:10
width:700
height:listHolder.height - 20
id:list
boundsBehavior: ListView.StopAtBounds
model:listModel
delegate:listComponent
clip: true
snapMode:ListView.SnapToItem
}
}
Component
{
id:listComponent
Rectangle
{
//color:"grey"
width:obj.width
height:obj.height
border.color: "red"
Loader
{
id:itemDisplay
source:buttonTypeRole
}
}
}
}
buttonTypeRole :OneText.qml snapshot
import QtQuick 2.0
import QtQuick.Controls 2.0
Item
{
id:one
height:obj.height
width:obj.width
Text
{
id:textOne
height:obj.height
width:obj.width
anchors.verticalCenter: parent.verticalCenter
verticalAlignment: "AlignVCenter"
anchors.leftMargin: 10
font.family: obj.fontFamily
font.bold: obj.fontBoldStyle == "true" ? true : false
font.pixelSize: obj.fontSize
text:source
elide: Text.ElideRight
}
}

qml: How to format column of a listview

I have a list view but all text elements start printing at x position 0.
Is it possible to format the column width? I can set the text element x position by simply
x: 100
But that seems to be the wrong way. How can I set the row width to see the content like a table?
What I currently have prints all elements in the first row.
import QtQuick 2.9
import QtQuick.Controls 1.4
import MyTypes 1.0
ListView {
id: listView
implicitWidth: contentItem.childrenRect.width
anchors.fill: parent
//model: mymodel
model: ExportedListModel {}
delegate: Item {
implicitHeight: text1.height
TextEdit {
id: text1
text: model.heading
Keys.onReturnPressed: model.heading = text
}
TextEdit {
id: text2
text: model.description
Keys.onReturnPressed: model.description = text
}
TextEdit {
id: text3
text: model.quantity
Keys.onReturnPressed: model.quantity = text
}
TextEdit {
id: text4
text: model.someEnum
Keys.onReturnPressed: model.someEnum = text
}
}
}
I think you should specify the width property in your List View and not the implicitWidth. The latter is just a hint.
Besides, what is referenced by your "contentItem" ?
You can specify your delegate's item width as it is done in the second example here :
https://doc.qt.io/qt-5/qml-qtquick-listview.html
EDIT :
Whether it is "width" or "implicitWidth" properties, the example will work.
To use the column, it is important to provide a sufficient height value to your delegate's root item in order to be able to display all the rows in your column.
Here is a working example inspired by yours, you can copy paste it in an empty QtQuick project :
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
ListModel {
id: mymodel
ListElement {
TEXT: "text_1"
ID: 1
COMMENT: "Comment1"
}
ListElement {
TEXT: "text_2"
ID: 2
COMMENT: "Comment2"
}
ListElement {
TEXT: "text_3"
ID: 3
COMMENT: "Comment3"
}
ListElement {
TEXT: "text_4"
ID: 4
COMMENT: "Comment4"
}
}
ListView {
id: listView
anchors.fill: parent
model: mymodel
delegate:
Rectangle
{
implicitWidth: contentItem.childrenRect.width
implicitHeight: textEdit.height*2
border.color: "black"
border.width: 1
color: "red"
Column{
TextEdit {
id: textEdit
color: "white"
text: TEXT + " number is " + ID
}
TextEdit {
id: textEdit2
color: "white"
text: COMMENT
}
}
}
}
}
Here is a picture of the result :
https://imgur.com/4yoj5gU

How to have a numerical model start at 1 in a combobox from QML

In the combobox from qml we can give them a model with a numerical value.
The options of the combobox then start from 0 to the model value minus 1.
What i want is to show the values on the combobox plus 1.
But still, if i try to access, with qml javascript, the value that is selected in that combobox is the original value, what i mean is, if it's the first option it's the value 0. The numbers shall only start from 1 in the display part of combobox.
I'm going to give an example (with a model=32):
display of the combobox
the options:
what i want is them to start at one, like this:
The code used was the following:
import QtQuick 2.9
import QtQuick.Controls 2.0
ApplicationWindow {
id: window
title: "Stack"
visible: true
height: 200
width: 400
Item {
id: page
anchors.fill: parent
width:parent.width
height: parent.height
Column{
width:parent.width
spacing:10
ComboBox {
id:comboBox
model: 32
objectName: "test"
implicitHeight: 30
displayText: currentText
// delegate:
// Button {
// id:buttonCombo
// width: parent.width
// text: index+1
// height:40
// contentItem: Text {
// text: buttonCombo.text
// font: comboBoxCustom.font
// leftPadding: 5
// horizontalAlignment: Text.AlignLeft
// verticalAlignment: Text.AlignVCenter
// elide: Text.ElideRight
// }
// background: Rectangle {
// color: buttonCombo.hovered ? (buttonCombo.pressed ? "#d8d8d8" : "#e8e8e8" ) : "#fff"
// }
// }
anchors.topMargin: 10
}
}
}
}
Maybe this could be done:
displayText: Number(currentText)+1
but i don't know if its the best solution...

Qt 5.12 TextArea focus is lost forever

When TextArea is a child of ApplicationWindow with flag set to Qt.Popup, it is not possible to set focus neither by mouse clicking not by calling forceActiveFocus(). Here is the code :
import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQuick.Controls.Material 2.3
ApplicationWindow {
id : mainWin
visible: true
width: 640
height: 480
title: qsTr("Bug reproduction scenario")
Material.theme: Material.Dark
TextArea {
anchors.centerIn: parent
placeholderText: qsTr("parent text")
}
Button {
id : closeAppBtn
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
text : qsTr("Close app")
onClicked: {
Qt.quit();
}
}
ApplicationWindow {
id : childWin
width : mainWin.width/2
height: mainWin.height/2
visible: false
Material.theme: Material.Dark
x : mainWin.x + width/4
y : mainWin.y + height/4
flags : Qt.Popup
TextArea {
id : childTextArea
anchors.centerIn: parent
placeholderText: qsTr("child text")
}
Button {
id : closeParentWinBtn
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
text : qsTr("Close child win")
onClicked: {
childWin.close();
}
}
}
Button {
text : qsTr("show another window")
anchors.left : closeAppBtn.right
anchors.leftMargin: closeAppBtn.width/2
anchors.top : closeAppBtn.top
onClicked: {
if ( !childWin.visible ) {
childWin.visible = true;
}
}
}
}
It's not possible to set focus to childTextArea neither by mouse clicking nor by setting forceActiveFocus().
The same component is placed on the first window and it's ok to set focus to it. And if you comment out setting flag to Qt.Popup evertyhing is ok.
Is it a known behaviour? What should I do to use TextArea inside ApplicationWindow with PopUp flag?

Qt - change property from a component in a different qml file

Update 1
The idea is to be able to change the front and back of CardForm from main.qml because i want to be able to use multiple CardForm instances. I tried to do what they did here but it doesnt work.
Here is the code:
CardForm.qml
import QtQuick 2.0
Flipable {
id: sCard
width: 75
height: 200
property bool flipped: false
property string front: "Front"
property string back: "Back"
property alias callFront : front
property alias callBack : back
front: Rectangle{
id: front
anchors.fill: sCard
border.width: 2
border.color: "black"
radius: 5
Text{
anchors.centerIn: parent
text: sCard.front
}
}
back: Column{
Rectangle{
id: back
anchors.fill: sCard
radius: 5
border.width: 2
border.color: "black"
Text{
anchors.centerIn: parent
text: sCard.front
}
Text{
anchors.centerIn: parent
text: sCard.front
}
}
}
transform: Rotation{
id: flip
origin.x: sCard.width
origin.y: sCard.height/2
axis.x: 0; axis.y: 1; axis.z: 0 // set axis.y to 1 to rotate around y-axis
angle: 0 // the default angle
}
states: State {
name: "back"
PropertyChanges {
target: flip
angle: 180
}
when: sCard.flipped
}
transitions: Transition{
NumberAnimation {
target: flip
property: "angle"
duration: 200
}
}
MouseArea{
anchors.fill: parent
onClicked: sCard.flipped = !sCard.flipped
}
}
main.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Neuro Seed")
SwipeView {
id: swipeView
anchors.fill: parent
currentIndex: tabBar.currentIndex
Column {
CardForm{
id: test
anchors.centerIn: parent
test.callFront: "Hello World!"
test.callBack: "Bonjour le Monde!
}
}
}
}
Here are the error messages:
SHGetSpecialFolderPath() failed for standard location "Shared Configuration", clsid=0x1c. ()
qrc:/main.qml:17:13: QML CardForm: back is a write-once property
qrc:/main.qml:17:13: QML CardForm: front is a write-once property
qrc:/main.qml:16:9: QML Column: Cannot specify top, bottom, verticalCenter, fill or centerIn anchors for items inside Column. Column will not function.
the c1.getFront() and getBack() were from a C++ class that I made. I changed these to "Hello World!" and "Bonjour le Monde!"
So after many hours of struggling I figured out that to create a property which is accessible by other .qml files you must create a property alias name: id.property. The id must point towards an existing instance of a object in your code and the property of this instance that you wish to be able to change from the outside. So in my case it would be like so:
CardForm.qml
Flipable {
id: sCard
width: 75
height: 200
property bool flipped: false
property alias frontText : front.text
front: Rectangle{
id: front
anchors.fill: sCard
border.width: 2
border.color: "black"
radius: 5
Text{
anchors.centerIn: parent
text: frontText
}
}
}
and in the main.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Neuro Seed")
Rectangle {
anchors.fill: parent
CardForm{
id: test
anchors.centerIn: parent
frontText: "Hello World!"
}
}
}
}

Resources