 Hey everybody, welcome back. This is Brian. So this video, we're going to start down programming with a graphical interface. Notice I didn't say widgets. There's a reason for that. I'll cover that in just a second. But this specific video is going to be this widgets application. And don't panic if you're on Windows or Mac. Yes, this program will run on Windows, Mac or Linux. I'm currently on Linux. It doesn't matter where you compile and run this. It'll just work. We're going to cover some core concepts in this video. First, the basics of, well, you guessed it, a widget application. And you notice how all these elements are nice and neat on the screen. This is called a layout. So when we resize our application, it automatically resizes with us. And we've got some interaction. For example, I can key in an age here, calculate boom, and we can calculate an age in cat ears. Or I can select say dog, or mice. You notice how the multiplier is changing as I select a different animal. So we've got some instant feedback based off what the user is clicking here. While this is a very simple application, I do consider this kind of like the hello world to cute widgets. Now, a few key things before we dive in, I am going to unapologetically create QML applications, console applications, and so on through this course. So the next video may actually be this same program button QML. And I always get the question out on udemy.com where I have some courses. Everyone says, Well, you have the cute six core done, but you don't have the cute six widgets or QML done. Is it safe to take the cute five? Absolutely. Widgets and QML are pretty backwards compatible between five and six. There are some caveats. And I've covered that in previous videos out on YouTube, but it's absolutely safe to take those courses and then upgrade later on. Let's dive in and take a look at how to make this application. Okay, because this is our first real widgets application, I'm going to do this from scratch. So you're going to see every single step of the process future videos, though, I'm probably going to skip this and you're just going to start with a blank project. So I'm going to go to projects and new. And in case you're wondering, you don't have to do that, you can go to file new file or project, but I just like clicking this little button, you're going to get a ton of projects. And remember what I said in the intro, which is unapologetically in the future, I may skip around meaning we may do a console application, we may do widgets, we may do a cute quick slash QML. I'm just going to jump around just have fun. But for this video, we want application cute, cute widgets application. Notice it says supported platforms desktop. That's right. So this will run on Mac Linux windows pretty much anywhere cute or run. So we're going to choose give it a name and hit next and you know, some going kind of slow here build system. I'm going to use CMake. You can still use Q make. But remember, Q makes going to go the way of the dinosaur. So I'm switching to CMake as is cute six. Get next. This is where things get confusing. You'll see this Q main window widget or dialogue. Well, basically, let's talk about these real quick. So a main window would be like, well, cute creator in the background, a giant main window where a widget widget is pretty much anything like these individual little buttons down here. We don't want any of that. We want a simple dialogue, which is well, this little dialogue you see on the screen actually is under the hood. So we want to go with Q dialogue. It's going to generate a header and a source file. We want to make sure we generate that form as well. It's going to be dialogue dot UI. And this is an XML file. Hit next. Don't care about translating this app. And then choose the kit that's right for you. You may have multiple kits and you can even select multiple kits. I'm just going to go with what works for me. Just make sure it's a modern version of cute. And hit finish. Alright, now, when you get to this point, I would highly recommend you build and then you run. And if you have a problem running this thing, usually it's because you don't have OpenGL installed. So make sure OpenGL is installed, but you're going to get this giant dialogue. We're going to fix that. You also see you got this terminal in the background. To do that, I should say to fix that, you can go to projects run and then run in terminal uncheck that and you will no longer get that annoying little dialogue in the background or that should say that command line. If you want the output, you can definitely have it. But I'm just going to uncheck it just for the sake of this video. Alright, so let's look at our project here. We've got an interesting structure. We've got our main file with our main function, and we're just going to make our application which is going to do its event loop, something we've talked about in console land. But now we're doing a dialogue show. That's actually showing this dialogue. Tada. It looks pretty big. So let's scale this down. And then let's figure out how this thing works. So I'm going to scale that down. This is the what you see is what you get editor or the cute design editor. Let's go back to edit and you can see how it is a XML file under the hood. Now we also have this header and this implementation file. What's going on here? When we look at our main file, we're making a dialogue from dialogue H. Tada. This guy and under the hood what's really going on here is cute smart enough to realize that this XML file equates to this header file and the source file. So those three files come together to make our application beautiful. So let's go ahead and let's set up our interface. We're going to explain the coding in the next part here, but right now let's just focus on this interface. Now we have all these little widgets that we can choose from. There's a lot of them and if you don't want to like hunt and peck through here because it can get just kind of confusing, you can actually type from. So let's go ahead and I'm going to look for a label and I'm just going to drag a label on. Just drag and drop. Now I'm going to look for what's called a line edit. If you're coming from like .NET or something, this is like a text box. See, very simple, very easy to work with. You can just drag it around. Now I want a few of these so I can either continue dragging or dropping or I can just do what I call the old copy and paste. So I've got a few of these and let's go ahead and fill in this label. Let's call this value. If you're wondering, you just double click on it and then you can start typing. Multiplier and double click and let's call this result. If you don't like the whole double click thing, you can just select it and then go down over here to our properties and then you can just either hunt and peck, which I don't like, or you can actually filter it. Text is what's going on so we could say, text. See how it makes it nice and easy to find. I actually love doing that. But you can see each widget has a ton and I mean a ton of properties. So this little inspector here gives you a lot of information and of course it's depending on what you have selected and you have this guy over here which tells you, hey, this is what you have selected. So just a simple way of navigating here. So we're going to grab all of those. You know how it highlights them all here. We could have done the same thing. Just press shift and click and now we've got them. And I'm going to copy and paste that. Using ctrl-c, ctrl-v and we want type. Now remember we want a drop down or what's called a combo box and you can absolutely hunt and peck for it in here. I don't like the hunt and peck method so I'll just say combo box, drag and drop and you can scale that out. Pretty neat, pretty easy to work with. I'm going to move this down and we're going to just take a push button and put it here. Now I'm going to name these. So I'm going to highlight each widget and name it appropriately. So this is going to be a CMB and let's call this type and you can name them whatever you want. It doesn't really matter. You can even leave it, line it at 1, 2 and 3. But I'm going to say le and let's call this the value and then le multiplier and then le result. Again the object name is really whatever you want it to be but this is how you're going to access that widget. Push button I'm going to call this btn calc elate. Now if you're an accountant I'll give you a stupid accounting joke it's I will calc you later. Anyways I won't quit my day job. So let's look at how we would set this into a layout because right now if we were to expand and contract this you know move it around nothing really happens and we can actually do what's called clipping which is really bad. We don't want to do that so we're going to highlight what we want or we could have done the you know shift click method over here and we're going to put it into a layout and that's where this little toolbar up here comes in handy. The icons are pretty self-descripted but we have the horizontal vertical splitters we'll talk about in another video and then the grid so I'm just going to go ahead and go to the grid and when you click it it automatically puts it in there and as that layout resizes it resizes all the widgets inside of it pretty cool huh. Now you notice how I have the dialogue itself selected you can tell by these little handles off the edge I'm going to select that and I'm going to do the vertical so it's going to take it and just put it vertically pretty neat huh. Now I don't like that button taking the entire space so we're going to put a spacer in here and I'm going to show you how to break a layout so if we take the spacer and we try to put it in here that blue line shows us where it's going to go and it doesn't really work the way you'd expect so we're going to select a dialogue and we're going to click this little break layout which just does exactly that it breaks the layout we can then just drag and drop move those around highlight these guys and we're going to put these next to each other horizontally now we can select our form and do vertical and it works the way we expect it to from here everything just works it's actually pretty stinking cool I love this so let's go ahead and save this and it's called a what you see is what you get editor because well what you see is what you're going to get when you run this you can see here is our little application with no code behind it whatsoever and we can you know scale it resize it pretty cool huh let's flip into code land and let's start banging out the code if you're intimidated don't worry the code for this is actually fairly minimal we're going to include one thing we're going to use a map and if you skip my previous videos I highly suggest you go back and watch but what is a map it is a key value pair so we're going to say qmap and this is a template class so we have to give it a template let's say string and int so this is going to line up with the name of the animal like dog cat fish with the multiplier you know five seven whatever and let's go ahead and call this m types again there's a million different ways to do this whatever coding convention you use make sure you use it but don't modify any of this other stuff you know she got this ui dialogue pointer what is this thing well it's pretty much under the hood cute is going to load that xml file and create a bunch of objects so when you get to this point i would highly recommend you give it a good build because if you don't you're going to have a hard time later and i'll explain once we get there but i'm going to give that a good build so what's happening in the background is cute is actually building all the little things it needs to actually allow us to access things inside the user interface remember i said that because there'll be a time where it won't work and you're going to go why is it not working all right so let's go into our layout here and we want to do two things we need signals and slots now we could type these out i hate typing it out or we could just go in here and find our widget our combo box for example right click and go to slot we get a whole bunch of things to choose from here but the main takeaway is what we want to do is when the current index changes meaning when the user selects something we want to know so i'm going to go down to current index change notice there's two of these we want the int version not the queue string the int i found this one isn't really reliable for what i work on and this one always fires off you can double click or hit okay and boom there is our slot to get that annoying out of line definition just save and then it'll kind of go away on its own and in here you see we have this private slots on cmb type current index change notice this is a special special way of doing it this is what's called an auto connection so cute in the background knows that the on underscore so you have whenever this widget does something then this slot's called it's kind of screwy the way that works but it's actually pretty pretty interesting and easy once you get it down we're going to do the same thing for button right click go to slot and we want clicked now you'll notice you have a hierarchy of controls here you have the i'm just gonna do this our base is a queue object which is a queue widget which is a queue abstract button so everything is a queue object but everything on the screen is a queue widget which of course inherits queue object and we're working with a button so if you're ever confused about that what we're going to do clicked hit okay and we get the same thing on the button clicked so it's pretty intuitive right especially if you're coming from like dotnet java something like that you can see whenever this combo box current index change or whenever the button is actually clicked we can do something again give it a good build just to make sure you don't have any little gremlins and once you get to that point you are actually good to go with the rest so we're in the implementation file and this is where we're going to start working with that map but you'll notice right here ui setup ui what is this thing this if you flip back is a pointer to the dialogue that's right it's a pointer back to this guy basically let's go ahead and demonstrate what i mean here if you type ui notice boom there are all of our widgets that we put into our user interface pretty neat huh select there's our button and then we've got our layouts that we did automatically through the designer we've got our labels and then we've got our line edits this is just really cool now if you did that and this is blank or nothing pops up this is what i mean by remember this moment because this is what i'm talking about if you didn't build that mean cute doesn't know all of the stuff exists so if you do this and like it comes up blank simply save build and then once the build is complete then magically it will start working again like that all right one thing you should know is this needs to come first if you try doing it something backwards you're going to probably crash your app so if you're trying to work with your application and it's crashing on startup usually this is the reason why so if we f1 on that display the help file it's not very helpful but basically it says sets up the user interface for the specified widget so basically this is going to set up this entire dialogue for us to use that's got to happen first all right let's close that and let's just go ahead and fill in our combo box again i did say the code is going to be minimal so don't worry so we're going to say our map we're going to go ahead and insert and we want to insert a fish and the fish is going to be a multiplier of two meaning basically every human year is like two fish years kind of thing and we're just going to do the old copy paste we're going to say cats and i'm just winging this i didn't actually go out and google i have no idea what the ratio to dog years to human years is or anything like that but we're just going to say fish or two cat or seven dog is five and let's just add one more let's say mice and i have no idea i'm just gonna say 15 i don't think mice live that long somebody out there got a comment i have no idea but now what we're going to do is we're going to tie our map that we just filled in with our user interface so whenever you think you're going to do something with user interface literally type ui and you can hit period on the keyboard and it's going to automatically convert that to the point that's going to point to the widgets and you notice these are all pointers we're working with here so we need our combo box and then we want to add items now you can do add item individual but we're going to do items multiple because we don't want to waste our time and we want to add in you guessed it the keys and that should take care of the casting force automatically spoiler alert this is a queue list of strings which under the hood should be cast automatically to a queue string list but you may have to cast those manually if you're having problems with this part now we're going to say ui.cmb type and we want to go ahead and set the current index the current index is what's currently selected and under the hood this is an array zero based array so we're going to get the item or the number in there automatically but we're going to set it to zero meaning the first item in our array let's go ahead and save and let's run this and see what this looks like all right there we go it's already got this list here and if we click our list nothing happens we're going to fix that right now but i want to demonstrate something we're going to take this and move it here let's go ahead and build that and see what happens we get a good build let's see if it runs oh no program has unexpectedly finished you wouldn't believe how many emails i get on why does my program crash on startup get a magic marker and write it on the back of your hand you have to set up the user interface before you modify the user interface all right so if we rebuild this and run it again it should work just fine but i'm just going to demonstrate rebuild and run and tada magically it's not crashing anymore all right so let's go ahead and flesh in the code for our index change and our button click so first things first we're not going to use this guy right here so i want to get rid of that warning i'm going to say q unused and it just simply gets rid of that warning now what we want to do is get the multiplier here and so i'm just going to say int m equals from our maps we want the value which is going to take that key value pair and get the value from the key so now that we got that we want to get whatever key we have so i'm going to say ui it's going to be type our combo box we want to just get the current text so it's just going to be catfish dog whatever's displayed on the screen right and then we want to say ui we multiply that almost sounds french the multiplier anyways we're going to go ahead and to set text forgive my horrible french accent i don't know much french at all i think i know how to say like l'addition on civu play and a few other things like mamoiselle and monsieur and things like that but my accent is probably atrocious so if you're french speaking please forgive me so what we're doing here is we're basically saying in the user interface we're going to grab our multiplier that line edit and we're going to set the text to the string representation of whatever the multiplier is so let's walk through this super super quick here notice how period on the keyboard has betrayed us so we have to actually type that in there we go so we're saying when the current index changes or when the user clicks that combo box we're going to ignore that index using q unused then we want to get the integer from our key value pair based off the current text cat dog fish whatever and then we're going to say user interface lim multiplier we're going to set the text meaning we're going to actually set the text value to the string representation of that integer you have to use q string number so we're converting from an int to a q string let's go ahead and test that we're going to run this real quick now you notice how it's there automatically because in our constructor we are setting the current index which is firing off that signal slot connection right here so it's automatically doing it and if i click this you see it goes 15 to five and so on pretty cool huh now we're going to get this calculate button working you notice how when i click it nothing happens go ahead and get that running and clean up a little screen real estate here all right so first things first we're going to say boom we're just going to assume everything is not okay but what we're going to do is we're going to convert from a text to a number and that does not always succeed and that's why we got to be a little bit careful so i'm going to show you how to test that so we're going to say int and we're going to say v for value equals our user interface and we want line edit value remember your naming convention really doesn't matter you could just do whatever and we want the text and that's going to return a q string and we want to do a two int now this is going to take a pointer to a bool and you can give it a base we're going to just stay with base 10 but i want to just say okay here's our bool and i want a truer false so what happens here is it's going to evaluate this and say can we convert it to an int if so this goes to the integer value if not it's going to set it to zero you can actually look this up in the help file just highlight that enough one however if it fails it's going to be a zero either way we're going to get a true false on our bool so we can actually evaluate and see what happened so i want to say if everything is not okay we want to do something with our user interface so we're going to say le value we're gonna go ahead set that text to zero so if they didn't enter a number if they just didn't enter anything we want to be able to put a number there to let the user know hey we know you forgot to do something i'm going to do the old copy and paste we're going to do the same thing with the multiplier and i'm going to say le multiplier so why are we doing this well i'm gonna live with you users cannot be trusted you should know that by now but especially when you get into graphical programming most users don't understand computers and they just have a tendency to click buttons and cause all sorts of errors so you want to do some sort of defensive programming and make sure there's at least some value or it's a value that you can work with then we're going to say int r for our return value equals our value times our multiplier and then we just simply update the ui so i'm say ui dot le return i should say le result set text and this is going to be a string representation of that number so i'm going to say q string number and voila all right let's give this a good build and make sure we didn't goof anything up okay are you excited this is that glorious moment where we see if our first program actually works so we're going to hit run all right first thing i want to do is i want to see if we can break this notice i have not entered anything in here i'm just going to hit calculate boom this is our zeros right here where we're saying hey it did not convert to an int so we're just going to set that to zero and we can just enter some other value and it just works doesn't crash or application or anything so let's enter a valid value let's say you are hmm say you're 34 years old and let's just select dogs so the multipliers of five hit calculate boom you are a 170 dog years or let's say fish 68 cat 238 or mice you are an extremely old mouse i would dare say in mice years you are immortal so this video really hammered home some core concepts first off how to interact with the user interface how to play around with some layouts and how to do a bit of defensive programming here 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