| by Kenneth Chase | 3 comments

Introduction to Qt / QML (Part 04) – Understanding properties in detail


Hi, I’m Jespe Pedersen from KDAB. If you
just joined this series it might be a good idea to subscribe already now. In this
episode we’re gonna talk about property bindings and if you just joined us
there’s a pretty good chance that you were googling property binding and found
this place here. Property bindings is a vital thing to understand in QML. If you
don’t understand property bindings you will be programming QML like if it was
an imperative programming language just like C or C++ and then your code will
end up being total spaghetti in no time. So please do stay with me throughout
this video. The code that you’re looking at now is from our regular training. If
you were in one of my trainings chances are that I would ask you to come up to
the front desk or in front of the projector and present this to your
co-workers. You would like to come up here you have no previous understanding
of QML it’s like hmm can I do this and then you come up say okay let me let me
try and do it you say: we imports a Qt Quick version 2.0. okay so
far the outermost we have an item. That item has a size of 400 by 200 – yeah.
inside there we have a rectangle at position 100, 50 and at this time
you will feel pretty comfortable say: hey I can do this! And then the next part
that’s where your evil instructor has set you up for disaster not for his
own pleasure but for your learning experience. At this point you’ll say okay
so the width is twice the height and the height is
100 and the colors like blue. Can I go sit down now again please? Of course I
would let you sit down at this stage. I would like, the height the widths
that is twice the height which height we’re talking about? and you coming from
a imperative programming background you say: hmm that must be well height isn’t defined until after so here we see height define so hmm
it must be this height up here… and no, that’s not true this code is exactly the same code as what we saw in the previous video where I already did two like for
this for you. I just changed the height and or the position of the height of the
width but it’s the the position here doesn’t matter in QML. Now there’s a
even more important thing to understand here the key thing is that the width is
twice the height whatever the height is at any given point in time. I’ll say that
again: the width is tries to the height whatever the height is at any given
point in time so that means that if you change the height of the element then
the width will also change. I’ve got another example for you that’s
your shoe size. Let me just get the other example over here so make this one the
current project here. here is the other example. just read through it real
quick. I import Qt Quick 2.0 we understand that by now
I got an item and the item is just this container that can have two other
elements in it. I got a text that says Qt quick, it has a fund and a pixel
size and whatnot and it has position. that’s cool and it has a rectangle the
rectangle the key thing to understand here it says the width of the rectangle
is text element of width and text element you can see by me just clicking
the text element here it is referring to this element up here. so that’s your
pointers in QML. The way that you can refer to other elements in QML. Text
element of width given that this one has an ID then width text element.width down
here. Let me run this one here for you and you can see now that we have text
Qt Quick. it’s at a given position all that stuff and we
have a green line that sits underneath the Qt Quick text and the width of
that is exactly the same as it width of the text. But wait there’s more. Do I
sound like a salesperson here? There really is more. I’ll show you.
Let me change text to be text input and run again. Text input is your line edit in QML. It’s where you can type in text and it says Qt Quick here now
but I could change this to Qt Quick 2 Did you see that? The green line changed
with the size of the text. Why is that? Remove the window here just but okay I
was definitely moving it… the width of that rectangle it’s the width of the
text element whatever value the width of the text element have.
So whenever the text elements change due to these property bindings
the width of the rectangle will change with it. This is not magic. If you come
from a Qt Widget background let’s just do that for just a sec if you come
from a Qt Widget background you could have done this yourself. you could
have created a signal slot connection and the signal would go off whenever the
the text was changing and then you were going to a slot that would change the
size up to the rectangle. If you come from a motive or an MFC or any other
background you would be able to do something similar to that.
It’s not magic. The magic part is how it’s built into the language. Inside QML
what you will see is that you have these property bindings exactly as we saw here.
And it’s just it’s not just one property binding. I can have this width be
depended on by another element and that other element
has a property that’s dependent on by yet another element and that way I can
have a whole tree of properties that depend on each other and whenever I’m
changing one of them you’re gonna have this explosion throughout the whole tree
of all the other property is being changed. I’m sure that if you googled “what is QML?” you would very fast end up on a page that tells you QML is a
declarative programming language and what does that mean? declarative? Well you know other declarative programming languages
I’m sure you you met SQL. in SQL you say: I want elements from my tables that
fulfill this requirement. that I can I can go to that say one you need to match
this one to that. you don’t tell it: hey could you please go to the database and
run through the b-trees that is sorted and do this whatever. that is the
implementation detail behind the scene. Exactly the same way that this property
binding I’ll bet you there is a signal slot connection in there somewhere. but
that signal slot connection is not something for you to write you just set
up this property binding. You declare. Remember? declarative programming. You declare what your user interface should look like.
I would like my user interface to look in a way where my rectangle has exactly
the same width as the text input. That’s the clarity. That’s it for this
video. Thank you for watching! In the description below the video you will
find links to the examples that you’ve seen here and other examples in this
series. Next time I will show you an example coded highly from scratch
so you can get an idea of how easy or how difficult is to develop using QML.

3 Comments

Gare Mcgarry

Nov 11, 2019, 1:03 am Reply

Nice vid, looking forward to more uploads! Take a look at FollowSM”.”com to promote your channel!

Krzysztof Wie

Jan 1, 2020, 1:22 pm Reply

Jesper has awesome approach for teaching. Quality videos!

Developer Neal

Jan 1, 2020, 5:38 pm Reply

These r simply awesome vids.. 😵😵👍👍
love the very human presentation style..
Have seen many other qt vids..
Being more of a java developer where one cld use many frontends for a single backend(angular react vue jsf jsp swing javafx et al) I wldve paid more attn had the other ppl told me in the first vid itself that qt was the front end and c++ made the backend.. a point you reiterated over and over.
Also didn’t know cld leverage JavaScript within qml.

Btw can qt be made a front end to say a springboot backend for a desktop app? If so wld like to know. Probably a stupid qn

Leave a Reply