 Hey everybody, this is Brian and welcome to the 139th C++ Qt GUI tutorial. Alright, so we are going to begin our path along the Qt Quick QML programming. Now is it Qt Quick or is it QML? Qt Quick is actually the name of the libraries. You can see Qt Quick importing. QML is the language we'll be working with just to kind of clarify that. And if you kind of look there's a lot, a lot to this. Well, I mean a lot. So wow, yeah. So we'll probably be doing quite a bit of tutorials on this. I don't know if we'll cover all of that but we'll get through a good chunk of it. So the first thing you need to understand is in Qt, we're used to working with C++ Qt, is that everything is a Q object. I mean a base object. Well in QML they have this base object called an item where like Qt, almost everything inherits from it. It's not everything but as you can see it's a good chunk of stuff. And it has a lot of properties. And you notice how most of these deal with, you know, anchors like positioning, anti-lazing, offset, whether it has children, the children rectangle, clipping. If you're familiar with these terms, you know like opacity, you know that a lot of these are very visual. So basically what I'm trying to get to here is Qt Quick was built from the ground up to be the visual representation. Now can you still build applications using the quote-unquote old-fashioned Qt windows forms, et cetera, et cetera? Yes, absolutely. This is just something different. The reason why this exists is some operating systems such as iOS and Android do not have a concept of a windowing system. So we have to build our own windows. So we are going to start off with the most basic of shapes called a rectangle. You can see it imports items so it has all of the properties of the item like anchors, opacity, anti-lazing, et cetera, et cetera. And it has a few of its own such as a border, border width, border color, color gradient, radiance. Probably not going to cover gradient in this one. We'll cover that in a future one. So as you can see, well, you know, shocker, rectangle is, well, rectangle. So what you need to understand about the rectangle is it is the most basic shape. If you're thinking that you're going to be drawing all of your graphics dynamically, you're wrong. They have another class called the image, which ironically loads images that we'll be discussing in a future tutorial. But you should understand the rectangle is kind of like your foundation building block here. And here's a good example. Import Qt Quick rectangle and then we've got the properties. Now you'll see a lot of these examples out on the internet. And putting a rectangle as your base object, I have actually never gotten that to work, like ever. I always have to put it inside of a window. So if we go in here, let's just create a new project here. Call this quick one. And you see how automatically it even puts it in a window for us. So if we just actually change this from window to rectangle, save this and try and run it. It says QML debugging is enabled. Only use this in a safe environment. Well, that's not very helpful now, is it? But if we change this back to window, it runs just fine. So just be aware of that when you're working with things out on the internet. Alright, so I'm going to get rid of that example stuff. And I'm going to just say my window is now width of 500, height of 500. Because I want a nice big area to work with here. Now, the window is our parent. What I mean by parent is everything that we put in here will be a child of the window. So we'll say rectangle. And we're just going to say width. And I'll say 50 height. If you're wondering how I'm getting that to appear, when you start typing, if you hit control and hold it down and hit space, it'll autocomplete it if there's just one. Or if there's more than one, you'll get a nice little pop up for it's called IntelliSense. And we're going to say color. See how it's doing that. And with color, you can either write in the word or you can write in the HTML hex color code, which if you have one mouse over it, you'll see, oh, I actually screwed up. It'll show me it's blue and I actually wanted red. So we're going to change that to red. And there is our beautiful rectangle. I know probably the coolest application on the planet. I could make millions selling this. So we're going to close that. And we're going to give it a, we'll say color. No, let's not do that. Let's go border.color. And we are going to say, I want to give it black. Actually, we could just go. I personally, you know, I don't like writing in the color names, but sometimes they're easier. And because now we have a border, we've given a border with, and we're going to say this is now four pixels. And we run that, you can see we now have this four pixel black border around our red rectangle. Now we want to get this kind of out of the way here. My other computer just kind of made a noise. I have a calendar reminder. It can wait. So what we want to do here is we want to say, whoops, lost my train of thought on totally what I was going to do with that. So we're going to grab this rectangle. See, that's what happens when you get interrupted. And we're just going to make a couple more of these little rectangles here. And you see how it only shows one because they're all stacked up on top of each other. So we're going to say position here, right? I'm going to say X, we'll say 100, Y, 100. Get rid of this little guy here. And we'll say he's at 200, 200. And now you can see we have our three rectangles. Now, would it be nice if we could position this without having to actually type in the number? Well, that's where this concept of anchors comes in, which we will talk about in a future tutorial, but I just want to introduce it in this one. This is really just to get you comfortable with the rectangle shape here. So we're going to say anchor. And let's make this one, why not center in parent. Now remember our parent is this window, so it's going to center it right in there. And let's make it much bigger. Make it 200 by 200. And we're now going to take this little guy and we're going to make him a child of this one. See how it's now nestled in here? And we can actually collapse these so you can expand and collapse inside the editor. Coming from the old school days where we didn't have these new fangle technology, such as coat collapsing, this is just like voodoo magic for me sometimes. And I'm going to actually change the color of this to green. And we'll say the border is going to be dark green. Let's see what happens here. It's kind of interesting how it did that. So we've got 00 center in parent and then this guy off to the side here. Did we screw that up? I think we probably did. Wonder why it's done. Let's do this. I think I herped it up there. Let's do this anchor center in. There we go. We had to anchor it in there. It was positioning it off because we had the X and the Y. We didn't have an anchor in there. What's going on here? If we take this anchor out, you see how it says X, Y, 200? It's because even though it's parent is this, it can go outside of the parent. I hope that's abundantly clear. So the minute we anchor, we are now effectively negating the X and the Y. See how it's nice and beautifully centered in there. We can say anchor dot left parent and we'll say anchors bottom parent. So we want to anchor that left bottom. That didn't work out as well as I wanted it to. Probably because I needed to do this bottom and left. There we go. Sorry for the confusion there. The concepts we're really trying to drive home here is that you can make a rectangle and you can control the properties just by very easily typing this in. If this looks like a mixture of Java and cascading style sheets, it's because personally I feel it really is more leaning heavily towards Java. You can have multiple objects and you can have them as children of parents and you can position them in or out of the parent. It doesn't really matter. So one question that I know I'm going to get asked here is when we look at the types, you'll see there's a rectangle but there's no ellipse. There's no circle. None. So how do you make a circle? Well, let's play around with this a little bit. Let's say this is... I should probably make this a little bit bigger and we can even just do this parent dot width divided by 2 and we'll say parent. We're just going to play around here a little bit. I'm totally going off script. I kind of have been this whole tutorial which is why we've been having little issues. So we're going to say it's going to be 100, 100 parent width because we can dynamically resize that. And now we want to do what's called a radius. And we'll say the radius is 5. Now let's run this. And I don't know if you can pick that up but that corner is rounded. I'm going to actually make it a little bit better. Let's say 15. Yeah, it should be more clear that that green is rounded here. And let's actually change that around here. You can probably pick it up now much better because it's in white. So the radius defines the corner radius. And what we can really do here is we can play around with this. You can see that 100 makes it well, you know, this nice circle shape. So how would we do this? Well, we would just say width times 0.5. So we're going to times it by basically half. And it's pretty much the same thing. That's how you make an ellipse. Now I want to kind of explain that really rectangles are meant for dynamically drawing user elements. If you want any sort of complex shape or animation, it's really recommended that you do an image. The reason being is it takes less power and less time to load a file and render it than it does to tell the processor to draw a line here and then draw the line there and then fill in the shading, then do this, do that. It's just easier if the bits are already stored on the disk and then you load them and display them. So that's it for this tutorial. As you can see, rectangles are actually pretty simple but they're really actually kind of fun to play around with here. We will be deep diving a little bit more into anchors and gradients and positioning and things of that nature in future tutorials. Thank you for watching. I hope you found this educational and entertaining. And as always, visit my website, voidrumbs.com. If you go to Contact, you can see there's a link to our Voidrumbs Facebook group. There's like 400 of us out there that are working on stuff. Feel free to jump in. People are willing to help out. And I put the source code for this in all other tutorials. Whoops, in the tutorials tab. Under the tutorials tab under acute. So you can find all the stuff out there.