 Hey everybody, this is Brian and welcome back. It's been a while since I recorded. I have been well very sick I don't think it was COVID-19, but I just don't feel fully recovered yet. I don't know This one's different. This is like cold flu things just not going away. I can't quite figure it out anyways, so forgive any coughing sneezing ramblings, I think I'm rambling right now, but anyways Point being in this video what we're going to cover is introduction to QML Now before you get super excited this video is going to show you how to enable the designer and some of the features of the designer There's a reason for that Out on udemy.com. I am Rerecording all my old courses. You see I have like a QML or beginners with Qt 5 Well, obviously we're now navigating towards Qt 6. You see I've got the core already upgraded to 6 But I've got a QML and a widgets and a design pattern I really want to get those upgraded to Qt 6. So we're going to be navigating through the designer and figuring this out This is going to be essential not just for the udemy courses, but also this YouTube series QML is well constantly changing and Sometimes Qt as a company will throw you a curveball and that's what we're going to talk about in this video Let's dive in and take a look Okay, the very first thing we need to do is enable the designer. Now, what am I talking about enable a designer? We're going to go here and your operating system is going to be different. Obviously I'm on Linux But I'm just going to go ahead and I'm going to open up Qt Creator This part right here should look similar on just about every operating system Mac users note You'll have that little Mac icon up in the corner that you used to that's where you'll need to go for this But you notice this little design is grayed out. Let's demonstrate what I'm talking about here If I say new and we're going to go to a Qt quick application Next and we're just going to leave whatever random name it puts in there Next make sure it's C make next Whatever kit we got next and just next next next All right. This is really cool But yeah, all we can do is code. There's no designer like in widgets how you could drag and drop controls Well, that just won't do that's not cool So how do you fix this? Well, it's simple you go to help and you go to about plugins Now remember Mac users gonna have that little Mac icon up in the corner that used to you'll have to go over there but you're gonna go to about plugins and And these are all the things that load up when cute creator Loads and this is why it may take a while on older systems and you're gonna either Search or scroll down for QML designer and you see this little red Line here that means it's not loading. So we're going to check that and it says restart required So we're gonna close we're gonna go ahead and restart now And once it restarts. Voila, the design button is magically enabled now. Why did cute do that? I I don't know I Have my thoughts and reasonings, but I I don't know for sure So when you click this you can see well, it takes a second on slower machines I'm on a virtual machine and it can get kind of like jumbled up here So what we're gonna do next is we're going to walk through the various parts of the designer Okay, now that we have the designer enabled. Let's go ahead and walk through the various parts here I'm just gonna go ahead and create a new application You can actually just open up an existing one if you want, but I'm gonna make a new one cute quick application Whatever name it gives me and we're just gonna say see make Our required version next next next next And this is usually the first question I get is hey, I have a project open I selected my file, but the designer is still not opening. I don't understand Well, the file is not open. This is one of the caveats here. So you got to double click it make sure it's open Then you can go into the designer This is typically what you're gonna see right off the bat here You'll notice there are various components, but it's minimal like there's no buttons or anything like that So you're gonna get kind of confused and we're gonna walk through this but at a high level There's things like the library. These are your actual components You're only going to get the default components at startup You can add in assets And then you have things like your project file system open documents your navigator You can tell what's selected Because it's highlighted in blue. We're going to touch on that quite a bit in this video The form editor and the text editor Now the form editor and the text editor these two actually work hand in hand So for example, this white area is our form, but it's actually bigger than our display. So I'm going to just go 400 by 400 and as I'm typing you can see what I've changed because it highlights it in red here. That's not saved And in real time it's automatically changed it even though it's not saved Pretty cool, huh? Then you have your properties and this is the properties of whatever is highlighted Which again is in blue down in our navigator. I want to really touch on that Right now. This is not abundantly helpful. For example, if I look for a button All other components, you notice that's in red Not abundantly helpful here Really, whenever it's in red, it means it matched the pattern we typed, but it's in all other components. I want specific components So we're going to go here And we're going to go to components and hit that little plus sign Select a module to add And this can get a little overwhelming But usually what you're going to want is like cute quick controls And it will add it in there for us and then we get what we really expect things like dials and buttons and all sorts of fun stuff Now remember QML runs anywhere, so it's going to be different than widgets So you're not going to find things like tree views They exist out there on the internet, but you'll have to really hunt for them Because this could be running on a mobile device and a tree view doesn't make a whole lot of sense on say a small screen cell phone or something So let's just plop some controls on here. I'm going to take a button And we can either drag and drop it right onto the form Or we can take a button and drag and drop it right into the navigator Now you may be wondering where is it? So here's the top button Where's our other button? Where is it? It's just gone This is what I mean by it can get a little confusing. It's actually there But you don't see it because it doesn't have an x y position Oh, that can get super frustrating So we're going to get rid of this button and we can either delete it in the code like this and you notice it disappears from the navigator I'm going to control z that Or we can highlight in the navigator right click and go to edit and delete So which is the appropriate way? Well, it depends on what you're trying to do You notice how when I drag and dropped it right onto the form editor, it gave it the x y position This goes into positioning your components and in QML Typically you use what's called a layout and an alignment. You can see it over here When you look at whoops my mouse got a little crazy on me there When you look at your highlighted component and you're in the properties You can see there are things like the type the id which is unique to every widget The name state and so on now you're wondering what state is you'll see it down here Think of it like a stop light red yellow or green that determines the state of the component But then you can switch and I actually don't like this you can switch between the properties of the component For example, this is a button Or the positioning or the layout And this can get really complex. You have tons and tons of options But this is what i'm talking about here So you can Say button Change some things or layout and we want to move this to the center. So i'm gonna say bang bang So we are aligning that vertically center and aligning it horizontally center That gets really cool, but back to the problem at hand this guy right here Where is he? Button one's just gone Notice if we select him in the navigator We got the id we can see because we're switching between button and button one So let's go back to our button and let's break this little guy here And go to button one which is off the screen somewhere Simply sending it to the center We'll actually snap it onto the form and give it a position But when you look instead of an x y it has an anchor. We are anchoring this vertically center And horizontally center. This is something we'll really drill in when we start talking about qml code in depth But I really wanted to put that out there Now I'm not a fan of positioning like this typically what I'll do is I'll put something inside of a row or a column So I'm going to say column And we're just going to drag and drop that right under our window And you notice how all of these are children of the window. We want to put the buttons inside the column There's a couple different ways we can do that. We can go into the text editor and cut and paste Or we could try to do this for a while We could try to do this form designer, which is just a lesson in futility trying to get it in there But what really works is if you just grab it down in the navigator Click and drag and highlight the column and drop it in You'll notice one thing that happens right off the bat though is it gets really confused about what it's supposed to be doing But it snaps it to its parent Remember button one we have aligned horizontally. I should say vertically and horizontally in its parent, which is now this column What i'm really trying to drive home here is in the designer there are multiple ways to do the same thing And it will just be maddening trying to figure them all out And sometimes the designer will do things and you're like wait, what just happened when in doubt Undo redo is your friend. So for example, if I grab this And I try to do something with it that I really shouldn't like That it now takes up the whole thing Control z And you can undo and redo a little too far like you see I have actually Snapped it a little too far out and button one is no longer a child But you can go, you know up here undo redo. So we're going to Redo it and put it right back in way we wanted it This is pretty awesome. Now some other things I wanted to touch on For example buttons are not really useful unless you can click on them So how do we make it click a bull? Well, we can either go into the designer and the text editor here and we could say something like on Click now everything's going to start with the word on and then you get all of the Slots for that component or what you can do instead of typing it out Is you can simply highlight it and down here in the connections Hit the plus Button on click and then you can actually edit this right in place Really really cool and it puts the code in there for you button on click console law click You can help the connection editor you connect signal to an event You can do all sorts of really cool things you can even do property bindings So for example, if we change the text of a button It also changes the text of the other button Why you'd want to do the I don't know but and you can set custom properties and data backends and things of that nature It's actually really really cool the way this works So this was a very high level overview of the designer I would recommend you go in with a couple junk projects just play around with them See how it works see what works for you get it the way you want it, but one special note You see green and red whenever you see red that means it's not saved So I'm going to hit control s on the keyboard to save it and watch that red go away Always make sure you save your projects And if you have an oopsie for example, if you click off and you go, oh no Where's my text editor? I closed it. Oh no, where's my form editor? I've closed it Well 99% of the time you can go into view Views and here you go form and text. So we're just going to check those So if you accidentally close something don't panic. There's a very easy way to bring it right back I hope you enjoyed this video. You can find the source code out on github.com If you need additional help myself and thousands of other developers are hanging out in the void realms facebook group This is a large group with lots of developers and we talk about everything technology related Not just the technology that you just watched and if you want official training I do develop courses out on udemy.com. This is official classroom style training If you go out there and the course you're looking for is just simply not there drop me a note I'm either working on it or I will actually develop it I will put a link down below for all three of those and as always Help me help you smash that like and subscribe button The more popular these videos become the more I'll create and publish out on youtube. Thank you for watching