Introduction to Qt / QML (Part 18) - Methods and Signals + Declarative Programming

Hi I'm Jesper Pedersen from KDAB. You just joined perhaps the series on programming with QML. If not, in the previous video you saw how we could create our own elements simply by putting some elements into a file, name that file something like LineEdit.qml, capital first letter and we added property to that. There's two things that we can do in addition to those two things. We can add methods on our new elements and we can add signals to that new element. At the end of this video I hopefully have convinced you that both is not that terrible good idea but if we skip this video entirely you would learn it from YouTube or Stack Overflow or whatever and then you might not come to the same realization. Let's see how we do it. So first of all adding a method is super simple. At the top of the element we'll just create a function. So "function clear" or whatever here and now I can do myItem.clear. there is really no more to say about that it needs to be at the top of the element. But besides there's not more. Adding signals on the other hand. We do that also on the top of the element. There I'll be creating my signal. I'll use the keyword "signal" so "signal clicked". That's it. Now I have a click signal in my element or "signal checked bool checkValue". Now I have a checked signal that brings out a boolean. Let me show you the code here. That will hopefully make you realize why signals is not necessarily all that good of an idea. So let's run it first. I got two checkboxes both of them look exactly the same. They almost is the same identical implementation but one is using signal the other is declarative. Click the check box. The surrounding of check box changes color to red. Same thing down here. main.qml looks like this. I got this Rectangle around, well I got the item around the whole thing with a given size. I got a Rectangle that's my first check box here. The check box has onChecked. checkValue ? parents.color = "red" otherwise turns a color "lightblue". So the parents color that's a rectangle's color will either be red or light blue depending on whether well depending on whether the check box is checked and it knows by a signal being emitted. Let's look at the check box here. This is as you see up here checkbox.qml. Now so it's in the file checkbox.qml. It's an item at the topmost level. It got an image, it got a text. Again I can run this example. You can see the image that is this this check mark that's just an image that we have there. And then the text. The image is anchored as usual. The source is either checked.svg or unchecked.svg depending on whether my toggleArea.__checked is true or false. And my toggleArea that's when my ops area down here it has a private property so property bool __checked that is false and whenever the checkbox or the mouse area is emitting its clicked signal it will toggle this __checked. See I don't like this. That's the reason I don't like it is twofold. First of all I go back here. My code now wherever I look at the color of this rectangle: what is the color? come on Jesper, are you stupid or something? The color is obviously... I'm just checking my screen: light blue, right? Hmm... well it's light blue unless that the checkedValues checked functionor the check boxes checked signal got admitted. Then it will turn red. But it's not very declarative that I need to go and read it in two different places. The other problem is even worse. Had I had a time machine I would of course not do any of the major things that you do if you have a time machine because who knows what would happen in history if we did that. But if I had a time machine I would make a small adjustment to the history. I would go back I would invite the guy from Nokia that invented these signals inside QML. I would invite him out for a beer and I would convince him to change his syntax just slightly. And here's the problem. checkValue. Okay let me see... checkValue. That must be a property that I have somewhere... checkValue, checkValue, no... oh yeah, I remember. It doesn't matter where in the file things are. So let me just look down... checkValue, checkValue... Fortunately this file is only 48 lines long. Imagine it was 200 lines long. It would be a lot of looking for that checkValue. But the checkValue actually comes out as one of the parametres with this signal. So if we go back to the check box you'll see here my checkbox has signal checked(bool checkValue) and it's this name it's a checkValue name that we have there that dictates that I'm all of a sudden all of a sudden I have access to a variable over in my JavaScript code here that was called checkValue. Just imagine that I've misspelled his checkValue. I likely had written it like this checkValeu. I'm sure that's French or something. It would hit all the clients of this check box. Let me run it again. Different starting up here and my check box doesn't work anymore. Fortunate for you I was running this in Qt Creator. So I could see here reference error. checkValeu is not defined. It's not defined because it's now called checkValeu. And we have that fix that spelling error here and run it it no I did fix it... now when I run it again it works. So had I had that time machine I was talking about I would have gone back and say hey can we please modify the syntax to look something like this I know and it's likely gonna trigger your ocd or something that and we all of a sudden how syntax is not just property : value but hey you're a pretty clever guy you can definitely fix that. Unfortunately I don't have that time machine so you have to live with this. I spend quite a bit of time I even went out of my way to invent us a stupid time machine but that's just to give your brain focus on this issue because it will hit you one time or the other. Let's see how I would like it to to look if we look further down I got another rectangle here CheckBoxBetter a name indicate here. I have a property pool checked at the top of my element here and my mouse areas clicked, it's simply toggling this check property and now what does the client look like? It says let me just find the code here... Rectangle the color is CheckBoxBetter.checked. Then it's either red or it's light blue. I know it can be slightly controversial here but please can you just taste this a bit. Which one do you think is more easy to maintain? The one that says color : CheckBoxBetter .checked ? bla, bla, bla well you can read the line. This line here or this line up here where first the color is light blue and then I need to go down there and read. My money is on that the second version. The one where I'm programming as the programming language was intended namely declarative. My money is on the one that is easier to maintain. Okay that's it for this video here. In the next video we're going to look on one of the really big really difficult issues with with your own component namely: what size should they have and how does that work together with their surroundings? We are going to talk much more about that implicit width an implicit height that we already saw a bit in one of the previous videos. So stay tuned and until then have a great day!

Channel: KDAB

Views: 7,475

Keywords: KDAB, Qt, QML, User Interface, UI Development, UI Programming, C++

Id: krMxE_ar55g

Length: 9min 5sec (545 seconds)

Published: Mon Apr 06 2020