C++ Qt 91 - Simple Application - NotePad

everybody is Brian welcome to the 91st cute tutorial with C++ enjoy programming we're just going to select GUI application and today we're going to make a notepad we're just going to call it Q pad I've been getting a ton of email more than I can really keep up with and a lot of them have been saying hey can you kind of make tutorials that just glue everything we've learned so far together into simple little projects so today we're going to build a notepad style application you notice how I did aq main window first thing we want to do is bring up our main window here and throw a text edit on there now if you've tried doing this before and you try to use the layouts you've had pretty pretty bad results here like let's actually do that you know so there's this little little space around this let's actually save and run this you see what I mean here we want this widget to take the entire frame and yet you've got this funky extra space well what we need to do is call set central widget so it takes up all that real estate so let's actually go in here let's break the layout because we really don't need it save it open this up and we can say this set central widget UI TextEdit now remember UI is a reference to the main window to I so now when we run this it takes up the entire real estate of the central widget you also notice how we have this toolbar that we can kind of move around there's no buttons on it but we can move it around do whatever and there's believe it or not a menu you don't see it see where it says type here that's where the menus are going to be so we're just going to set up a very simple toolbar and very simple menu items so let's just say file and let's get rid of this down here so we can see a little bit of what's going on and we want an edit menu too so in the file menu we want just the standard new open and let's just add a separator here just double click let's say save save as and then edit we just want the standard you know copy cut paste and then add a separator let's just say undo and redo did I miss paste I sure did and we just take paste and drag it right up there now you notice how every time you made a menu item it created an action these actions can of course be moved on to the toolbar so like you can take action new and just drag drop it right up there and see how it says new well that's fine and all but we really want an icon so we kind of need to add a resource file something we've done before and new and this may take me a second to find it here you have cute resource file and let's just call this app resources I'm going to add it to our project then we want to add a prefix remember how this works we're just going to say images now we want to add some files to this resource and it's always good to kind of have some picked out in advanced I've already picked some of them out I just got the standard ones if you're wondering where I got these I think these are out of the fam fam silk icons I think I don't know I found them out on the internet I just I googled application icons and I found this free library with a bunch of icons in it so first thing you need to do here is go file add files so go add files go to where your resources are I've already got them pulled out here I'm just going to select them all to add them it says don't remember is not a subdirectory and we want to copy basically what this is saying is it has to be in a subdirectory of our application for this worked correctly so we're just going to choose copy and it's going to choose copy location and you notice how it's bringing up a different one each time gets kind of annoying that it does this kind of like my little pet peeve about cute that's much cute more cute creator and notice how it adds them all in there and they are under the images and then the image name bring up our UI again and then let's just go new and you see icon normal off well we don't want that what we want is our images so we want the new icon and notice how when you do that the text bug goes away and is just an icon and it shows the icon next to it so let's just go ahead and flush all these out real quick here that was open then we want to save whoops hit the wrong button there save as now try and fly through this here I don't want to take a bunch of time just filling in icons what was that copy and there's cut what was this undo there's undo lost it for a second there I'm kind of scatterbrained today now you've been studying for vmware training for my job and it's been it's been interesting it's a lot of information to take in though especially on a beautiful Sunday afternoon where the last thing you really want to do is study okay now you should notice that all of your actions because these are actually actions have the icons next to them now we're just going to drag and drop some of the icons up here so we want open and we'll say save save as let's just throw copy cut paste let's move this over here real quick that's how you can add a separator in there and then we want undo and redo so now we've got just a very basic you know kind of standardized standardized tool bar here where some separators looks nice and neat let's go ahead and give this a good run make sure it builds correctly and there is our window and we've got our file menu or edit menu complete with toolbar and actions now what we need to do is what I affectionately call the plumbing code it's called plumbing because well it connects one thing to another with some languages you'd have to do an event for the new and event for that button about for this button you know etc etc etc because these are actions you only have to do a signal slot for the action let me kind of demonstrate here so you select new right click go to slot triggered is what we want so when that is when that action is triggered either via the toolbar or by the menu it's going to call this code pretty neat huh so what I'm going to do here is I'm going to go through each one of these and do the where you right click go to slot triggered and I'm just going to keep doing this but I'm going to pause the video real quick because I really don't want to chew up a bunch of your time with meaningless drudge work of course and while I'm working on this I found a better way you can just select multiple go to slot triggered and shame on me for not knowing that in advance so now we have our actions here new open save copy/paste mmm courts save as go might be that I missed a couple of these alright so we have some things we need to do here what is the basic functionality of a notepad what you need to be able to create a new document save a document open a document so what we're going to do here is we're going to add some variables here we're just going to say cue string filename let's add some includes while we're in here it mind you this is going to be a very very basic notepad here so now we've got a reference to a string or I should say reference to we have a string that we're going to use to store the file name let's go in here and so when we create a new one we want to blank out that file name we don't want it to have anything in it when we open it well we want to set the file name etc etc let's go back in here new so here's I know we just want to say finally meet equals nothing and then we want to say UI text edit set plain text and we just give it nothing that will blank out the text then we want to fill the rest of these in here so before we really get started on the file functionality let's fill in some of these easier ones first for example copy we just want say UI whoops text edit copy UI text edit paste mmm did I add one-in-four cut I don't think I did maybe I was wrong about selecting multiple ones there it is you I texted it cut so now we've got some just very very simple things okay copy cut paste and let's jump back out here let's go undo will say UI text edit undo you notice how there's an undo and undo available and you've probably seen that with the other ones too and what that does is it really really allows you to flesh out the functionality of your editor you can actually consume this undo available and read the boolean value and then enable and disable the button we're not going to get that complex we just want to show the basic functionality here I know some of you're probably going to all come on but I've got to keep it simple I get a little little pressed for time here so so now let's just save and run this maybe if it builds come on there we go and then we can just you know test the functionality out here let's do undo let's just go copy and let's just paste it there we go see if it cut works just it does paste it again let's do undo redo undo redo so we've got the base functionality here and we've done very little programming because it's all provided by the cute libraries now we want to fill in the open I'm sorry the new open save and save as the basic you know file functionality here so we've got our new and now we want open so what we need to do here is we need to actually open a file dialog so we'll say queue filed out file dialog there we go and what we want to do next is we want to say oh sorry I got a little ahead of myself here want a cue string we'll just call this file equals and we're going to say queue file dialog and we want get open file name and then wow look we got a bunch of stuff we can do here well we want the parent and then we want the caption so we'll just say open a file and we're just going to leave the rest of this blank because well we really don't want to modify it too much now what we need to do is test to see if the user actually select the file so we'll say if file is empty whoops sorry forgot the not if not file is empty then we're going to actually read this in and do something with it so you guess it this comes our next part where we have to actually open up that file and do something with it so we want a queue file and actually let's call this some s file because this is our stream here and then we want to say if let's file open and we want to do this in read-only mode because we're going to read this so we'll say cue file read-only and we want to order this with cue file plain text so sorry not plain text just text that way it doesn't try to do any processing to it so if we can open this up then we want to make a cue text stream and I'm sure there's probably an easier way of doing this but I'm just going to do it my way just because well I'm making the video alright so we'll say give it a reference to our cue file object and then we're just going to read this in and we're just going to a cue string and we'll just say text equal in read all now that we've got the text well we want to of course close and then we want to put this into our editor so say UI text edit set plain text and we give it a cue string which in this case is of course the text now I'm sure there is a much more streamlined better elegant solution but we're just trying to keep this very simple very easy to understand I'm sure you could probably combine a bunch of these into one giant line of code but we really don't want to mess with that right now we just want to see if it works Oh expected expression before token hmm what did we do oh yes that's why you keep things simple just see if they work now when we open this let's just randomly give it a file and see sure enough it opens it and if we select new well it blanks it out now one thing we forgot to do here was set our file name remember we've got this file name variable so what we're going to do is we're just going to say if it opens successfully then we're going to say and file equal file there we go now you may be wondering why we even have this M file variable well we want to be able to click the Save button and just automatically save the original file but to do that we need to know what file we had opened in the first place which brings us down here now we also have a save as this is where it gets a little tricky save as let's the user save it as a different file we're save we'll save it to a specific file so what I typically do is I put a dialog in save as set the file name and then call save because well you're going to do the same function so just pretty much take this code that we did split this up into two different functions here so let's just write the save code and verify that that works so we're going to make a q file and just call this s file for that and we want em a file name and I know some of your probably screaming at my variable names I'm just very tired right now so bear with me here whoops there we go open and we want Q file and we want write only we want to or that with Q file text now some of you have written to me in the past and say well why do you do the text well you just do write only because we don't want Q to take that text and as it's reading through it do any sort of actions with it that could really mess your file up if you're working with it we just want them to know that this is plain text process line breaks things like that but leave everything else kind of intact so now that we have our open file we need to do aq text stream and we'll just call this out give it a reference here maybe if I can find the ampersand there we go to s file and we also want to make sure that we of course close it what we're done ah maybe if I can type I'm having the hardest time type in that geez clothes okay alright now what we need to do is output the text from our TextEdit into the file and we do that by saying out TextEdit to plain text there we go what that does is it takes the contents and outputs it to plain text now if you back up here for a second and say to you notice how there's two HTML also that's because it can have HTML styling in there to give like bold italics underlying things of that nature but for this tutorial I know a million size just happened we're just going to do two plain text now you notice how this entire function hinges on this M file name well that's what we're going to set in the save as the first thing we need to do here of course is actually verify that this is working correctly so let's just give this a good run here and let me pause this real quick I want to make a junk file we just don't care about alright I made a dummy file I just don't care about here let's just go test a cue pad where's a test file there we go so this is a test don't panic and I'm just going to make some explanations behind here and when I click Save it saves a file we can verify this by going new open and then reopening the file and there's our exclamations now what we want is the ability to save as say we don't want to save the original file we don't want to overwrite it so we're going to make an entirely new file so what we can do is actually cannibalize some of this code up here from our open function instead of get open we're going to say get save give it the same parameters and then we're going to if not file empty then we're going to call this the first thing we want to do of course is set the EM file name so quick review what we're doing here is we're saying okay if the user selects a new file to save then set our variable m file name to file then call that save action which triggers the code which writes it out to the disk click Save and a build and we can test this thing and see if it's working so let's go open there's a test file wanting to save as and we'll say let's call this test2 dot txt now open and let me drag it into the video here as you can see it so now we have our test2 and our original text so let's open test2 and sure enough there it is so that's all for this tutorial um this is Brian thank you for watching I hope you found this educational entertaining and as always drop me feedback any time I really like hear from you guys now I should add a disclaimer here before you go using this for a professional program there are some horrendous bugs in this thing for example if you go new which blanks out the file and then hit save what's going to happen well let's look here let's see real quick when you go new it sets it to nothing so if you were to hit save it's going to try and open a blank file name and you're going to get an error so what you should really do here is test for filename and I'm just going to put a comment there in case you guys download the code that way if the filename is empty you know raise an error and call the save as etc etc I could do that right now for you in this tutorial but I really want you guys just to get the basics here and don't focus too much on the code just focus how everything kind of ties together quick review before we really you know close the video here what have we covered well we have covered resources we've covered the central widget the Q main window we've covered how actions tie together so you don't have to make a billion you know functions for one thing we've shown how to tie resources into the actions we've shown how to trigger them and when we go back into the code we've shown just the you know bare-bones basics of how to make a text editor so pretty simple pretty easy tutorial um I say simple and easy but I'm sure this thing is pushing well over 10 minutes if you have any other ideas for simple easy tutorials that we can slap together in 10 minutes or less let me know anyways I'm running short on time gotta go bye

Channel: VoidRealms

Views: 61,277

Keywords: Qt, 91, Simple, Application, NotePad

Id: x858_WCtl_Y

Length: 24min 44sec (1484 seconds)

Published: Sun Aug 21 2011