[solved]Modifying text value inside qml

grandtom75

Hello all,
I am starting a very simple application that aims at displaying in a window the letter that has been typed on the keyboard.
For the moment the code look like this :
@
import QtQuick 2.0

Rectangle
{
width: 360
height: 360
Text
{
id: texte
text: qsTr("Hello World")
Keys.onPressed: {text=qsTr(Keys.text);}

    anchors.centerIn: parent
}
MouseArea
{
    anchors.fill: parent
    onClicked:
    {
        Qt.quit();
    }
}

}
@

This code is not working, it looks like the value of Text is not modificable.

So, my question is :
How to modify the value of a text during runtime.

I am new to QtQuick so I would be pleased to have detailed answers.

Cheers,

Thomas

onek24

Hello and welcome to devnet,

you'll need a focus so the keyboard-event can be received:

@import QtQuick 2.0

Rectangle{
width: 360
height: 360
Text {
id: texte
text: "Hello World"
anchors.centerIn: parent
Keys.onPressed: text = event.text
focus: true
}
MouseArea {
anchors.centerIn: parent
onClicked: Qt.quit()
}
}@

Also Keys.text is wrong. As you can see in the documentation it provides the KeyEvent event parameter ...

bq. onPressed(KeyEvent event)
This handler is called when a key has been pressed. The event parameter provides information about the event.

... so we have to use event.text in that case.
For further informations please read:

"Keyboard Focus in QML":http://qt-project.org/doc/qt-4.8/qdeclarativefocus.html
"QML KeyEvent Element":http://qt-project.org/doc/qt-4.8/qml-keyevent.html

grandtom75

Waow!!!What an answer!This is perfect!

Thanks

Thomas

onek24

You're welcome, i'm glad that i could help you. Please add [solved] to the topic so everyone can see that this problem is solved. You can do that by editing your first post.

Happy coding and have fun with QML, it's really great for front-end design.

grandtom75

A small question by the way...what is event.text...is 'event' a property of the item?

onek24

[quote author="grandtom75" date="1395171329"]A small question by the way...what is event.text...is 'event' a property of the item?[/quote]

event is the parameter which is passed with the Keys.onPressed: notification.
If you are familiar with QT-Signals and Slots: Keys.onPressed is basically just the slot of the signal Keys.pressed(KeyEvent event). That means this notification/slot basically looks like that:
@void Keys.onPressed(KeyEvent event){
text = event.text
}@

It is possible to create own signals and slots in QML. Let me provide you an example for easier understanding:
@Rectangle {
width: 100; height: 100
signal theButtonWasClicked(var firstParameter, var oneMore);
onTheButtonWasClicked: console.log("Clicked " + firstParameter + " and i also passed the number" + oneMore)
MouseArea {
anchors.fill: parent
onClicked: theButtonWasClicked("by me", 10)
}
} @

Let me explain:
@signal theButtonWasClicked(var firstParameter, var oneMore);@

Basically we define our signal, name it theButtonWasClicked and add the parameters we want of the type var.

@onTheButtonWasClicked: console.log("Clicked " + firstParameter + " and i also passed the number" + oneMore)@

This is the slot of our signal. It begins with on and the first letter of our signal is a capital letter so it should look like: onTheButtonWasClicked. The console.log() just prints something in the console/output, in our example both parameters and some text.

@onClicked: theButtonWasClicked("by me", 10)@

We trigger the signal on the onClicked notification/event/slot of our MouseArea and pass 2 parameters, in that case one string and one int.
For further informations please read:

"QML Signal and Handler":http://qt-project.org/doc/qt-4.8/qmlevents.html

Also feel free to ask if you have more questions, i look forward to help you.

onek24

Oh i almost forgot: it's not necessary to use qsTr(), this function is just for internationalization, that way you can translate text using a translation source file, basically it's enough to write quotation marks in front and after the string, just like in Cpp.

@ Text{
text: "This will work, too"
}@

For further informations please read:

"QML Internationalization":http://qt-project.org/doc/qt-4.8/qdeclarativei18n.html

grandtom75

Thanks again, your answers are so clear, this is so delightful and I am so eager to learn.

So if i understand well, there is a keyboard handler somewhere hidden that triggers a signal as soon as a key is pressed and there is a slot by default that is onPressed that receive the signal and that triggers an action...
So my question is a little bit tricky? Where is the Pressed() signal? is it by default in QtQuick? Is there no possibility of confusion?

Thanks again for your explanations

onek24

bq. Thanks again, your answers are so clear, this is so delightful and I am so eager to learn.

You're welcome, thank you. I'm glad that i can help you with your questions and encourage you.

bq. So if i understand well, there is a keyboard handler somewhere hidden

Well, yes. Keys is also just a Component like Rectangle and MouseArea. You can also try to write it like that ...
@Keys {

}@
... but your console/output will write: Keys is only available via attached properties. That means this Component can not be standalone and has to be written like a property in any Component you want.

bq. that triggers a signal as soon as a key is pressed and there is a slot by default that is onPressed that receive the signal and that triggers an action

Yes, it detects the key press as soon as we press a key and emits a signal based on which key it was. As you can see in the "Keys":http://qt-project.org/doc/qt-4.8/qml-keys.html Documentation, there are several signals handlers. A signal handler is just the slot/notificator i explained in a post above. Let's take the "onDigit9Pressed":http://qt-project.org/doc/qt-4.8/qml-keys.html#onDigit9Pressed-signal slot/nofiticator as our example.

We press the Key 9

Our Keys Component receives the event and checks which signals it can emit: onDigit9Pressed and onPressed (Remind! This are just the slots of the signals, the signals it would emit would be: digit9Pressed(KeyEvent event) and pressed(KeyEvent event))

It sees that we have got a slot connected to the signal, that would be the onPressed slot(I took your Application as an example for that because we have got a onPressed: slot there).

The signal emits the slot and everything after the colon would be the code to execute.

bq. So my question is a little bit tricky? Where is the Pressed() signal?

The pressed(KeyEvent event) signal is hidden in the Keys Component. Kind of like we created our signal.

bq. is it by default in QtQuick? Is there no possibility of confusion?

It is by default part of a Component. And there is no confusion because each Component handles it's intern stuff by itself. You could create a pressed() signal in each Component. But the onPressed: slot would also be just part of the Component where the signal is, that means you can also have a onPressed event in each Component where the signal pressed() is and they wouldn't conflict. An exeption would be the top-level Component, the properties and signals defined in the top-level component are accessable from everywhere. The top-level Component is the first Component you have got:

@Rectangle { // Our top-level Component, there can be only one.
Text { // Children
...
}
MouseArea{ // Children
Text { // Children
...
}
...
}
...
}@