 Hey everybody, this is Brian and welcome to the 140th Qt tutorial with C++ and GUI programming. We're going to continue our conversation with QML and we're looking at the item type here. And remember this is kind of the base object if you will and it actually inherits Qt object. So actually let's talk about that super quick because I did actually have a question already. Somebody asked me, can you use QML and C++ at the same time? Actually, yes, that's exactly what this is designed for. You see how the QML item type inherits the Qt object? Well actually what this happens is under the hood, these are all C++ classes that are built into the Qt libraries. And you can actually mix and match C++ at will. Meaning you can actually create a variable in QML that points to, because you understand the concept of pointers, that points to a C++ class in memory. So you can literally separate your display if you will from your business logic. So all the things that you've learned so far in the 140 some odd tutorials that we've made still apply. You can still use all your current Qt knowledge, you just have a different graphics layer that we're working with now. Whew, that was mouthful. So what we're going to be exploring today is the concept of anchoring. It seems simple until you get into some of the details. I'm not going to use notes for this, we're just going to kind of freestyle this, so bear with me. That's one thing I actually do love about Qt Quick is that it's so flexible you can actually freestyle. Where if I would try to do a tutorial with C++, I've tried it in the past and I've had mixed results. Where sometimes I do the video like four and five times before I just throw my hands in the air and say forget it. So I'm going to say width, I'm going to go with 500, height 500, give us a big area to work with here. And we're going to just get rid of this for now because we're going to still work with our good old friend, the rectangle. And what we're going to do here is we're going to say, let's say width equal parent width divided by two. Why not height? We're going to do parent height divided by two. And it's kind of amazing to me because I've had just a ton of feedback since I've started these. Wow, I cannot type either. I've had like a really crappy day so I'm just like waiting for the day to end. Alright, so color and we're going to say green. Now we know what happens if we create this thing. We're just going to save and run this. It'll be in the top left corner of course. So there it is, top left corner. And we've seen from the previous one where we could say anchor and then we have all these anchor options. This is IntelliSense. If you don't have this, press control space on the keyboard and it'll bring this up. You can see we have all these little options here. Now, whenever it starts with on, that's actually not an anchor. That's an event. So yes, QML has events just like Qt does. I should say signals and slots because that's really what they are under the hood. But you can see how you have like baseline, center-end, fill, et cetera, et cetera, et cetera. So we're going to play around with some of these. We're going to say center-end, parent, and sure enough, nothing fancy so far. We've seen this before. And we're going to make a couple different rectangles here. So we're going to call this one root. Now, why are we calling this root? It's good practice when you have a parent that you want to be your main display. Like think of it as the backdrop or the background. Like you're watching a movie and it's the canvas on which the movie is being projected. That is your root. Now, it doesn't change the behavior of this, but we have now effectively named this. We could call it fuzzy bunny slippers or, you know, chicken McNuggets or whatever, but calling it root is just kind of like the de facto way of working with QML. So we're going to make another rectangle. And we're going to say with, let's say 25 height, 25. Actually, 25 is kind of small. Let's make it 50. With height, my cat's doing something crazy again. This cat, I'm telling you. And we'll make these red just because it's a very, very much a contrasting color here. Now, how, because this is not a child of this rectangle that's called root, how would we actually work with this? How would we position it around this thing? I mean, if we do anchors.centerIn, we can't say parent minus one, but we can say root. See how it magically appears now. So when we run this, even though it's not a child of that rectangle, we can center it in there. Now we can play around with the positioning a little bit. So let's actually make a few of these. And let's say anchors.top. And we'll say root.top. And we'll say anchors.left equal root.left. And run this and see what happens. And you see, sure enough, it does it in the top left right here. So let's make another one. And let's actually make this one yellow because why not? And we're going to say root.right and root.bottom. Notice how it's not really working the way we wanted it to. Why is that? Because we are mixing and matching. We're saying root.top. Sorry, anchors.top.root.right. Those two aren't compatible. They're two totally different things. So instead of crashing our program like a buffer overflow or anything that would have happened in C++, it just defaults to 0, 0. So let's close this and let's actually fix this here. Let's flip this around. And we can see that now, well, maybe yellow wasn't the best color, but you can see it down here. Let me change that to blue just because blue. Now we can see that it is actually anchored there. It is anchored.top is on the bottom. And then anchor.right is on the left. So that is how you would do positioning around an object. Now one thing you should really understand about this is if we did not name this, we would have no way of accessing this. So let's give one of these a name. Like let's call this id big red. Why not? We'll make this a little bit bigger. Now we're going to say big red bottom and then big red right. Let's see what happens here. And you can see now, here's our big red and it's now positioned right here, which just as luck would have it, it's just over this guy, which is kind of weird. So here's our big red rectangle. And here's our blue one and it's positioned around using anchors, the big red. Now what happens if, and let's take the center one here and let's say radius. Let's say width times 0.5. We're going to make the center one a circle now. And then we're going to anchor this blue one around this guy. We need a good name. Like a really good, awesome name. Looking at my cat and of course he's not giving me any ideas so I will name this cat. So we're now going to position this around cat because that little monster won't give me any ideas here. We'll run this. And you can see how now, it doesn't actually line up. But it really does. Remember, this is a rectangle. So why is it not lining up with this? Because it's lining up with the borders here. If you were to draw a straight line, you'll see that it's touching right on that edge. And that's because you have this rectangle around it. So just bear in mind, especially if you're going to do graphics, sometimes you may need to use what's called an offset. Or you may need to, you know, tell it, you know, bottom, let's say. Let's do right minus 5 just because, let's see what happens here. Yeah, see, it died. Gonna freestyle this there a little bit. So let's see what happens if I do this. Yeah, I may just give up on that. Let's see what we got here. We've got fill, object on base. I swear there was an offset. I'll find it for a future tutorial. Mark my words. I will find this. Alright, so let's actually look at margin because that's the other thing I wanted to talk about here. Margins, and we're going to just put this back to a square. I'm going to give it a margin of 10 and see what happens here. Notice how it is no longer lined up. What a margin does is it puts like a little buffer or margin. When you're printing something, you have that page margin around. That's exactly what this thing does is it adds that little bit of buffer here. So let's try sticking a negative number in here and see what happens. You can see how now it kind of bumps into it. That's kind of what I was talking about with offsets and margins and things of that nature. So understand that you have top, left, right, bottom. You can align it to the top left, top right, left, etc. You can put it pretty much anywhere you want in here. What happens when you have a child object? This may be getting a little too small here, but we will do it anyways. I'll make this 100 and 100 just to make it a little bit bigger. We're going to make this guy 50 and 50. I'm going to make this yellow because I want it to stand out here. Notice how this guy, and let's give this a name, blue box. Let's call this yellow box. Uh-oh. I didn't like that. It's because we're missing something here. There we go. Notice how when we made our yellow box, which is a child of this blue box, and we didn't give it any positioning, it defaults to 00. Not the 00 of the window, not the 00 of the parents of the parents of the parents, but of its current parent. So just know that your 00 point will start off at the parent itself. So if we put a bit of a margin in here, I was going to do copy and paste, and let's say let's give it a 5 pixel margin and see what happens here. Yeah, it didn't really do anything. I think it's because we have to actually, let's say parent, let's try this. Yeah, there we go. Because we've actually used the the anchor left, we're now going to use the anchor's margin. See how we got this little 5 pixel left? So if we did the top here, so that, albeit a little bit confusing, is how margins work. You can add that little space, a little buffer. It's really good for positioning when you've got a couple objects and you just want to spread them out a little bit. So what happens, this yellow box is kind of a child of a child of a child, if we now take this and we say root. Remember our little root object that we made way, way, way up here? The big rectangle. What happens if we do that? Well, not much. So let's get that out of there. Run this again. So questions, comments, concerns. I look forward to your feedback. That in a nutshell is anchoring. There's more to it, but I really wanted to just kind of, you know, wet your appetite a little bit and cover the basics. I do apologize for some of the little quirks. I totally did not write an example program and then follow my notes. This was completely off the cuff here. But it shows really how easy it is to to work with Qt Quick and to kind of learn from your mistakes and see what's going on here. So like, we can actually just play around with this more. I'm going to play around with this a lot more, but I'm going to stop the video because I don't want to waste your time. Alright, for the source code for this and other tutorials, visit my website, voidromes.com. Also, join the Voidromes Facebook group. If you're wondering why I keep pushing that, I like tons and tons of you guys. So rather than, you know, emailing me or messaging me and waiting months on in for me to get back to you, you can just join the group and usually, like literally within five minutes, somebody in the group will have an answer. A lot of times the answer is actually better than what I could give you. So feel free to join that group.