 Let's take a look at the push button. It's one of the simplest widgets out there, but it's got a lot of properties We really need to understand So we're going to call this cute widgets for beginners 3 1 Next next of course going to set this to Q dialog Don't worry. We are going to cover Q main window and Q widget is basically the foundation of everything that we're already talking about here Okay, first things first. We need to build up our actual interface Let's just through the magic of copy and paste throw some buttons out here, and let's go ahead and fill these out So we're gonna say checkable Well, let's call this BTN auto repeat In case you're wondering what's going on here. We're just simply building out this interface We're gonna set the properties on each one of these and then these are gonna be verification buttons So for example, this button's gonna be checkable. This one's gonna auto repeat We're gonna go into each one of these. This one's going to be the default button And this is going to simply quit the app call this BTN toggle auto Repeat and let's call this one BTN toggle default. Let's go ahead and put those into a grid And let's drop that down there Beautiful little interface here All right, so first things first. We need to actually set these attributes We can do it via code or we can do it using the property editor for this specific video We're gonna do it the property editor, but you'll see me do it via code in the future as well So checkable. Let's just search for checkable here Sure enough. It's under Q abstract button. I want to really dive into this. I'm gonna clear that filter You can see the actual inheritance tree Q object is inherited by Q widget Q abstract button and then Q push button So you have your entire inheritance tree here. It's actually very elegant the way this works If we expand push button, you can see there's the auto default default flat Abstract button has a little bit more and then more and more so Let's go ahead and look at abstract button. You can see this checkable Now what is checkable really mean notice how I have this property here checkable selected I'm gonna hit F1 on the keyboard and it takes me right to the help file This property holds whether the button is checkable by default the button is not checkable Thanks help file not very helpful. So let's jump back here. Let's play around with this figure out what's going on So we're gonna make that checkable and we can also say whether or not it is checked Those are two separate properties Checkable determines whether or not it could be checked Checked is whether or not it is checked. So if we set that to check, you notice how graphically it changes on the screen And unchecked. It's really all it is it acts like a checkbox on a to-do list Autor repeat, you notice it's right here same thing we can F1 read the help file if we really wanted to This is a little more helpful. It actually details out that hey when you auto repeat it will repeat itself every time at an interval Boy, that's confusing, isn't it? So what does this really do? Really when you hold the button down is just gonna keep firing that signal off over and over again at a set interval That's really all it does So for example, you see there's auto repeat auto exclusive auto repeat delay and interval So if we say auto repeat and we click and hold that button down After every 100 milliseconds and after a initial delay of 300 milliseconds It will fire off that signal that we're holding that button down and then default Defaults a little bit interesting. You see how we have this auto default and if we look all of these are auto default So auto default means the button could automatically become the default We're gonna force this button specifically to be the default Notice how graphically it's changed a little bit might be a little hard to see in this video Different operating systems are gonna handle this differently For example on my MacBook Pro this button now turns bright bright blue Windows it has a slightly different color and then there's also very flavors of Linux and different desktops and things of that nature I'm on Linux Mint so the graphic changes very subtle, but what does this really do here? when you have it as default if you were to just bring up this This dialogue and let's just run this and you just press enter on the keyboard that button is clicked by default You don't have to do anything That's typical if you have like an okay or a cancel you want that to be default and then we have this little guy here His sole mission in life is simply going to be to quit the application These buttons we're going to toggle and check status and let's just fire that off right now So we're gonna go in here. We're gonna go to slot on each one of these And I'm gonna try and show you how to navigate around the editor a little bit So I may do things a little differently here. So for example that when I double clicked This one I will also double click just to show that you don't have to go all the way down here to the okay You can just double click But however this one I will actually make sure it's selected and I'll go to okay So if you see me kind of doing erratic behavior, I'm just showing you different ways of moving around the editor For example, we can just scroll down or we can actually use this property selector I should say this function finder here and we could say oh, I want the toggle auto repeat and it takes you right to it Pretty simple much more helpful in larger files. This thing pretty much fits on the entire screen So let's jump over to our header and let's add some includes that I know we're going to use We're going to use the cue message box a cue string and Let's use cue debug I'm gonna put some debug messages out there. Our header file is extremely simple We're not going to make any other changes all these slots were automatically generated for us by the editor And let's just jump right into the code here now When you're first starting off with graphics programming if you don't have a solid naming convention It might be a little bit confusing Trying to figure out where this goes because you don't have the connect code. So you're trying to figure it out You can always go right back in here And you can just say go to slot It doesn't Recreate a function or anything. It just takes you right where you need to go So it makes it super simple to get there And here we're just going to say btn checkable And we want the is checked property There we go Now we could also start this off by checking that so we could say ui btn checkable dot Set checked And notice it takes a boolean. So we're just going to set that to true Save and run see what this looks like Video maybe I should have used a different operating system But you can probably see that graphically looks a little bit different. I can still click on it And it automatically toggles its state see True false true false Make that a little more helpful So checkable comes in handy if you want to have certain properties or you want to Fire off some slot or run some function But you also want to track whether or not the user wants that option enabled Let's jump back over to our form is checked and It puts us right down here Is checked is going to be a little bit different basically what we're going to say is hey Is this thing actually checked? So we're going to say q string So we're going to just simply display a message based on whether or not it's checked So we're going to display a message box. We're going to use the information In case you're wondering what that is. There's different flavors of that. You can have questions critical notifications Warnings things like that information is just you guessed it information. We're displaying on the screen It needs a parent it needs a title And the actual message in this case is just going to be that q string that we're going to build right now Save this run it and let's test this out. Yes, it is checked Click it. You see checked faults No, it is not checked Click it again. You can see it's now checked Pretty simple pretty easy to understand And that way we're not screaming at people. Let's go to our auto repeat And let's go to clicked And let's just say Hmm, how do I want to do this? Let's go q info. We're just going to Put some info out on the console. Let's go here. Let's toggle this Let's actually flip this around and we're going to say, hey, do we want to repeat this? Yes or no I'm just going to make a value here. We're going to make this the opposite of A repeat there we go. Notice how that's turning a boolean Pretty simple pretty easy So this is the behavior of auto repeat. You hold it down. It's just going to keep printing clicked over and over again Let's clear that out. Go back here. We're going to toggle that Now notice i'm holding it down and it only does it when I release But if I toggle that Auto repeat will automatically click at a certain interval every time That interval fires off. There's a timer in the background And when you release the mouse it stops repeating Let's actually Q debug some info out here That way we can get some nice feedback on the screen and we know what we're actually doing. So repeat faults repeat true Pretty self-explanatory. I think you get it at this point And Let's work with our default here. We're just going to say default button clicked And let's go ahead and toggle this and let's actually go up here. Where do I have it? Let's grab this code Big fan of copy and paste. You'll hear me say that often. I'm a huge fan of the magic of copy and paste is default And we're going to grab this Do a little surgery here Now one thing I wanted to point out is that the cute api is usually very consistent when you're getting a property Usually it starts with is For example is default. You can see right away auto repeat doesn't follow that. That's one of the little godges here. So If you're looking for consistency 99 of the time it's there, but sometimes it's just not And then for our quit button, we're just going to simply accept the dialogue and move on in life Save and run Now i'm just going to press enter on the keyboard And you can see the default button is clicked. My mouse is way over here. I'm just hitting enter on the keyboard That's how the default button works I'm going to clear this out Move back here and we're going to toggle that default Now hit enter You can see how it's still there and that's because you can tab around If I move tabbed over to Let's say is checked and hit enter That's the button. It's going to click Meaning that's now the default because I've tabbed off Pretty simple pretty easy to understand defaults handy when you have things like let's say you want this quit to be the default So as soon as this pops up if they hit enter on the keyboard, it'll quit the application I hope you enjoyed this video. It's part of a larger project out of a new to me called cute widgets for beginners with c++ This is a large course with 73 lectures and 17 hours of video footage This course covers everything from what is a widget all the way down to complete example applications Using the skills you've learned in this course Sorry, there's no qml in this course. This is strictly cute widgets I will make a qml course later on but this just focus on widgets from a beginner's perspective Even those as a beginner's course, you do need to have some fundamental information available You need to know c++ and the cute core libs I do have some courses available out on you to me cute core beginners intermediate advance It's not necessary. You take these courses, but it is highly recommended And as always i'm available out on the void realms facebook group along with 3 000 other programmers. See you there