Hi I'm Jepser Pedersen from KDAB. This is a moment you've all been waiting for! Now we'll finally stop. We'll unmount the
ctrl-c and ctrl-v from our keyboard. We'll not do cut and paste and just have a
block here, copy there, copy there so we have three times the same thing with minor adjustments. We will do as we do in C++. We'll create classes. In QML it's
elements. We'll create our own elements. I've dedicated three videos for
this. After that in this module here we'll talk about local variables. It's
not anything new really compared to what you've seen so far. But it's worth wise
to just put our fingers on and say: what should you be aware of, if you create
local variables. If you created a user interface already... or let me just put
this way: In KDAB we help a lot of customers with their user interfaces.
Everything works, the animations look good and everything. But the QML
application takes a lot of memory and it takes a lot of time to start up. And the
problem that people have when they see these things, is that they do
not use the loader element. Just imagine that you are creating a widgets
application with 100 different dialogues. Would you instantiate all those
dialogues upfront? Of course you wouldn't. And in QML you shouldn't do that
either. But without the loader element that is
exactly what you do. So the fifth video in this module here: the loader element.
Do not drop that one, do not skip that one, because that is super important. And
finally I will come through on a promise earlier on in this serious where I
promised you that I will talk about FocusScope. FocusScope is something that you need when you have keyboard focus in different places. But first let's talk
about how do we create own applications. Or how do we create our own elements. That's really what we want. There's two different ways of using or creating
components in QML. We can do that using the component element. We'll see
that many times when we talk about especially the ListView element but also
when we talk about loaders. Or you can do the other way that you can do it namely
using a file with a name that matches exactly what your components should be
called. Let's see the second one right away. Here's a line edit that we've created up
here remember our text input is not decorated at all. So if you have a text
input somewhere in user interface the user will not be able to see there's
anything you would like to have just as we have here a small green rectangle
around your text. And that's what we do in this example. You create a file that
we call lineEdit.qml. Please read ahead on the slide the last line on this
slide is super important. It says that the file must start with a capital
letter. Personally at least I created a lot of elements of upfront in my career.
It took me a while to realize hmm they only load if it's a capital letter.
You've seen Rectangle it's a capital R and Rectangle. You've seen TextInput
capital T and so on. And it's not just a good convention. It's required when you
create your own element this way. So I take this stuff here I'll put it into a
LineEdit.qml and if we look at what's happening here I got a Rectangle it has
the green border that's a green pixels that you see here. It has a radius
of 4. If you look really close here you'll notice that the rectangle isn't
sharp on the edges that's the radius 4. Inside it we got a text input
that's the thing that that we type the text into it anchors.fill: parent. I
don't need to tell you how important that is anymore I hope. And it has some
text. When it's focus it's black.
Otherwise it's green. That's our LineEdit. We store that in LineEdit.qml. And now we can use our line edit just as we use any other element in QML. That's it! Don't
need to talk about anything else... What? Wait! Oh you want to be able to
actually read the text out of the liner edit. Oh yeah I can see why you would want to
do that. Okay for that we need properties. Let's see the example here. So this is
a pretty simple example. That is exactly what we have seen before. That's our line edit. Now the next slide here tells you to be able to access the values of that line edit we created or the element in general you need to create properties. We could
already if we wanted to- we just go back here - we could in our line edit element
here, we could from the outside access the color the radius and the clip. But
you can only access properties one level in so it's not possible for us to access
the text of that text input and that's what we really want. For that we need to
create our own properties we've seen that a few times in the previous video
that we can create our own properties and we simply do that with a syntax that
looks like this: property that's the keywords of calls that we are creating a
property, the name or the type of the property and then optionally a default value for that property. These properties are no special
compared to all the other properties in QML. The right side of that colon is a
property binding. So it doesn't need to be just a number as we see in this
example here. Actually on the last one we do have a property binding
width x height. And when you have a property binding what you often want to
do is to avoid that we override that property binding. We have an example a
few videos ago the one with three boxes where I could
move in and out of one of them and I could click on the other one and when I
clicked I overrode that property binding that we had with a moving in and out. Had I just marked this property as being read only that would have been impossible. So our slightly more advanced example is
working like this. Again I got my rectangle. Let's see the outer one, let's
just start it here. I got my light blue rectangle around everything here, I
have my line edit element that's the one we have with the green arrow, I got
text at the bottom summary : insert text and I got an image and that image is
this one we have over here and the idea is that whenever I press this cross I
will delete the content of my line edit. I cannot make that inside of the line edit
component but I'm trying to show you some problem that we can have with this.
Let's look at what the line edit element itself look like. Just put your
cursor on it and press f2 and it will jump us right to the line edit and the only
line that is different from what we had before is that we now have property
string text : textInput.text. Remember you cannot dot your way into an element
and only access the properties at the topmost level so therefore I simply have
this new text property here that is the text of this element. If I
run it you can see whatever I typed abc it the text property that this is a
binding for let's just see the code here again my text element the way my text
element here says text : summary : and then lineedit.text So it reads the
line edit property here. And also my my image there has a mouse area, the mouse
area says on clicked line edit text equal to nothing, I will click it here
and you can see that the... Well the text at least vanished down
here it didn't vanish up here and now this doesn't work anymore. why is that?
Well remember those three boxes when I clicked on the I think it was black when
I clicked on that box it over growl over whatever it overwrite my property
binding that we had in there. And that's exactly what we have here. Whenever I say or whenever I do the click here unclick lineedit.text - line that it is this
one up here - so let's see what that's us whenever I press the button line I did
six equals who the empty string it basically goes like this. So now there's
no property binding down to the element anymore so I guess we just need to go to
the other way around enter text and then down here I'll have a property binding
going up one so it will say: parent now let's run this and you can see now when
I click it it works. Almost... Now it doesn't work the other way around!
And why is that? Well whenever I type text in here then basically the
implementation of text input basically does this now or whatever it takes as I
typed in. For that I actually need to have it "enter text..." I need to have
another way of doing properties namely with alias. Property
alias text should be my text input now fingers crossed!
Yes this worked and yes that worked. Jesper, can you tell me when would you
ever want to not have an alias. Well whenever you have something where you
are inventing a new property. So in this example here it could be that I wanted
to be able to specify a diameter for the for the the rounding of my edges rather
than the radius so I could write the propriety int diameter... I am sure
and let's make that 2 and then yes we need to be compatible with the other one
is you and diameter divided by 2. Jesper, doesn't that mean now that users
could both access the new diameter and the old radius and it would be
confusing. Can you get rid of that old radius? Well see when you have an element you can dot your way in on any of the properties of that topmost element. So in
this situation I cannot get rid of it unless of course that I create an item
outside. I create an item outside of the whole thing. And then that item of course doesn't have any properties up front so my
alias property would move up there I'd better have my rectangle fill its parent
so that it's it has a size there and so on. That was it for this video. What we
are missing in the discussion of our new element is how do we access signals and
slots well I will create signals on our elements and how can we create methods on those elements? And I deliberately took them into another video because,
remember, I said it many times by now when you're programming QML you should program declaratively, not program imperatively. Signals and methods are
imperative programming. Sometimes it's useful to do those but if
you want to skip any of these during this whole thing
maybe you just give the next one because that's a that will teach you bad things.
Well it will give you the building blocks for doing bad things That's it
for this time. Thank you very much for listening in and
if you haven't done so already hey how about subscribing to our YouTube channel and you will be notified as the first person in this world whenever
we put out new videos here.
