Qt 6 - Episode 28 - Widgets age calculator

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 widget's 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 hit calculate boom and we can calculate an age in cat years 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 but in 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 uh 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 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 acute 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 will run so we're going to choose give it a name and hit next and you know i'm going kind of slow here build system i'm going to use cmake you can still use qmake but remember cue makes gonna go the way the dinosaur so i'm switching to cmake as is cute six hit 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 a widget is pretty much anything like these individual little buttons down here we don't want any of that we want a simple dialog which is well this little dialogue you see on the screen actually is under the hood so we want to go with cue dialog 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 dialog 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 gonna go with what works for me just make sure it's a modern version of cute and hit finish all right 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 all right 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 ta-da 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 dialog from dialog h ta-da 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 them so let's go ahead and i'm going to look for a label and i'm just going to drag a label on it's 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 highlight 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 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 one two and three but i'm going to say l e and let's call this a value and then l e 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 calculate 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 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-descriptive 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 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 dialog 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 our dialog 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 codeland 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 we say string and int so this is going to line up with the name of the animal like dog catfish 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 dialog 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 q string the int i've found this one isn't really reliable for what i work on and this one always fires off you can double click or hit ok and boom there is our slot if you 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 and exchange 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 is 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 cue object which is a q widget which is a q abstract button so everything is a cue object but everything on the screen is a cue widget which of course inherits queue object and we're working with a button so if you're ever confused about that we're gonna 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.net 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 dialog 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 so like 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 alright one thing you should know is this needs to come first if you try doing 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 dialog 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 cat and i'm just winging this i didn't actually go out and google i'd have no idea what the ratio to dog years to human use is or anything like that but we're just going to say fisher 2 catter 7 dog is 5 and let's just add one more let's say mice and i have no idea i'm just going to say 15. i don't think mice lived that long somebody out there drop 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 automatic convert that to the point it'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 cue list of strings which under the hood should be cast automatically to accuse string list but you may have to cast those manually if you're having problems with this part then we're going to say ui dot 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 gonna 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 i'm 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 nope 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 alright so if we rebuild this and run it again it should work just fine i'm just going to demonstrate rebuild and run and ta-da magically it's not crashing anymore all right so let's go ahead and flush 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 cue unused and 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 ant 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 cmd 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 the multiple that almost sounds french le multiplier anyways we're gonna 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 ledicious evil play and a few other things like mam wazell 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 at line edit 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 dogfish whatever and then we're going to say user interface the 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 2 5 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 i'm just going to 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've 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 2 int now this is going to take a pointer to a bowl 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 true or 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 now it's going to set it to zero you can actually look this up in the help file just highlight that in f1 however if it fails it's going to be a zero either way we're going to get a true false on our bowl 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 going to go ahead and 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 going to 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 val equals our value times our multiplier and then we just simply update the ui so 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 gonna 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 inch 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 our application or anything so let's enter a valid value let's say you are say you're 34 years old and let's just select dogs so the multiplier is a five hit calculate boom you are a hundred seventy 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

Channel: VoidRealms

Views: 1,176

Keywords: Qt, Qt 6, Widgets, GUI, UI

Id: 2y0wJ2Nlys8

Length: 28min 10sec (1690 seconds)

Published: Tue Nov 30 2021