Intermediate Python Tutorial - Creating a Text Editor App

[Music] foreign I'll be walking you through a mini python project where we will create a basic text editor if you enjoy this project feel free to extend it and add more features here I'm just going to give you the basics show you how to set everything up and introduce you to a graphics Library that's built into python called tkinter This is fairly basic but for beginner or intermediate programmers this is a great project and kind of a great starting place where you can go and extend learn more and add to this project with that said if you want to learn more about python you want some more advanced projects or just to become a better software engineer check out my course programmingexpert.io there'll be a link in the description if you're interested in web3 or blockchain development I have a course for that called blockchain expert same thing Link in the description with that said let's get into the project thank you all right so we're going to get started but I quickly want to give credit to this blog where I've actually taken this idea and quite a bit of this code from I've altered it slightly just to make it a bit better for the video but if you're looking for some other python project ideas check out the blog has a bunch of them and I'm probably going to be converting a lot of the ideas they have there into full videos where I really explain everything that's going on which is kind of what's missing from that kind of basic blog post regardless let's dive into it here the first thing we need to do is import the graphics Library we're going to use which is known as tkinter so we're going to say import TK enter uh and then this is not from we're going to say as TK now TK is just the Alias that we're going to use for the tkinter library just so we don't have to continually write out T kincher now the way that tkinder works is it allows us to have a grid layout and place different widgets on a screen so we can create like a tkinter window and then within that window we can put buttons we can put like a text editing component we can put images we can put all kinds of different stuff and you can actually create some pretty interesting and complex user interfaces we're going to do a pretty basic one here but to get started I'm going to create a main function and inside of this main function is where I'm going to write a bulk of the tkinter code so the first thing that we need to do here is create a tkinter window that's where we're going to place all of our different widgets on so I'm going to say my window is equal to TK Dot and then capital t k like that now what I'm going to do is set the title of the window so I'm going to say window dot title and then we'll just call this text editor and then I'm going to go down here and say window dot main Loop now main Loop is essentially going to continually run the window and keep it alive for us until the user hits the x button on the window or Force quits it so I just want to demonstrate this to you so you can see what the window looks like then we'll start placing some widgets onto it so I've created this main function I've set my window or created the window set the title did window.main loop it's important that you have that so it keeps running and then I've called the main function and now if I run my code you see we get a little tkinter window here we can kind of change the size of it okay perfect now that we've done that what I want to do is kind of set the size of the window and explain to you what we're going to put on it so since we're going to have a text editor we're going to have a few different kind of components or what we call widgets on the screen we're going to have the text editing component and then we're going to have two buttons one button that says open and one button that says save so when you hit save it's going to allow you to save at your computer open obviously you're going to open it and then you're able to edit the text so the first widget we're going to build is the text edit widget now out to do that we're going to make a variable called text underscore edit and this is going to be equal to TK dot text text is just the text editing component widget whatever you want to call it now inside of here the first mandatory argument we have to pass is the window that we want to place this on I want to place this on my TK window so that's why I'm placing it next we have the option to pass for example a font we don't have to do this but I'm going to and then you could pass a background color foreground color border there's all kinds of different arguments I'm not going to get into all of them because that would be an entire video on its own but for now we'll do a font and then we'll set the size of this to be 18. now if you wanted it to be bold for example you would type bold afterwards you could do italic there's a lot of different options again I'm not going to get into all of them so now that we have our text edit component I want to render this onto the screen now remember I said that TK enter uses a grid system so this allows you to lay things out based on a row and column position now row 0 and column 0 is going to be the top left hand and corner of your window so if you were to place at column one then you'd be moving over to the right if you place that Row one you'd be going down by one because again column zero row zero is top left hand corner now the row and column system depends on how many elements you have inside of it but for now I'm gonna say text edit and then I have to use this method called dot grid and Dot grid is going to place this element onto the grid of the parent so I'm going to say row is equal to zero and column is equal to one and that's because I want the text edit component to be on the right hand side and then my buttons are going to be on the left hand side now there's a lot of other arguments you can pass here as well but for now we can just do row 0 column zero and just see what this looks like okay so when I open this up see that I now have my text editing component and even though I've placed this at column one it's taking up the entire screen because I don't have anything in column zero so just automatically going to fill the entire screen now if you wanted to set the size of this component what you actually would have to do is set the size of the row and column that you're placing this component into I know it seems a little bit strange but what we can do is the following we can say window dot configure and then row and then we're going to pass row 0 and then we can say the minimum size is equal to and then something like 400. if we do that now we're going to be setting the size of our row to 400 and we can do the same thing for our column we can set this to a size of say 500. so now when I run this I get an error and that's because sorry this is not configure row it is row configure and it's not configured column it is column configure okay so let's try this now and notice that everything is a little bit larger so we've manually set the size there of the column and of the row now we'll fix this layout in a second but for now you can see kind of how I've adjusted the size using this row configure and column configure and I see the issue here I need to configure column one to be this size not column zero so now if I go back and change it notice we're all good because we didn't set the size of column 0 which right now has a size of 0 because nothing's inside of it okay so now that we've done that we have the text edit component the next thing we want to do is create the buttons and then place the buttons onto the screen so how do we create the buttons well I want to have a frame and the frame is going to be just like a kind of vertical column that is going to store my different buttons so I'm going to say frame is equal to TK dot frame now inside of the frame same thing I need to specify what window I want this to be on and I'm going to pass a few other arguments so I'm going to pass relief relief is essentially the 3D appearance of the element and for this I'm going to say TK which remember is my tkinter library here Dot and then raised and that's going to raise the element up a bit so it looks three-dimensional then I'm going to do BD which stands for border and I'm going to set that to 2 so we have a 2 pixel border around our frame okay so let's just place the frame into the window so we can see what it looks like then we can place the buttons onto the frame so I'm going to say frame dot grid and remember I want the frame to be on the left side so I'm going to go row equals zero and I'm going to say column equals zero as well so now if we run we should have our frame on the left hand side of the screen and it is there but the issue is we haven't set the size of the frame so it's there but we're just not seeing it so if I want to have the frame have a size I need to put something inside of it or I need to manually set the width and the height so what we can do now is just put some things inside of our frame and then we can kind of render the frame afterwards so underneath my frame I'm going to create my buttons now to do that I'm going to say save button is equal to TK dot button again I'm going to place this actually on my frame I don't want it on the window I want it on the frame the frames that I'm going to go on the window and then I'm going to specify the text and I believe the text is just text like this we'll call this save there's a few other things we can do but for now we're just going to do that next we're going to have the open Button I'm going to say this equal to T okay dot button again this will go on the frame and the text will be equal to open now we need to render these onto the frame just like we rendered the frame onto the window so I'm going to say button dot grid and just like our window has a grid our frame has a grid as well so I'm going to say row is equal to zero column is equal to zero for my save button I want that at the top then I'm going to say open Button dot grid and then row is equal to one this is going to place it below and then column is equal to zero okay so now if I do that we should be seeing these buttons appear although it says call this needs to be column sorry so let's fix that and if we rerun we can see our two buttons now they're looking a little bit weird so if we want to fix this what we need to do is we need to make our frame be at the top right now it's kind of centered uh vertically in the middle of the screen you want to push the frame upwards and then we want to make the buttons kind of expand a bit and be a little larger so we're going to start by making our frame go to the top of the screen to do that I'm going to go to frame dot grid here I'm going to pass another argument called sticky now sticky allows us to stick the frame to a certain side of the screen so I'm going to stick this to NS now when you write NS what that actually means is we are going to expand the frame so that it sticks to the north which is the top and to the south side of whatever it's inside of so in this case just the window so if you were to do es like that or east west sorry then you'd be expanding and sticking to either side on the East and the west of the window so if I do at s then it's just the opposite we're doing this vertically hopefully that makes a bit of sense but that's going to make the frame fill the entire screen so let's have a look at that now and notice now we fill the entire screen in our buttons by defaults are going to be at the top because we haven't specified like a sticky argument for the buttons okay perfect next what we're going to do is add a little bit of padding between the frame and between our different buttons so for my save button for example when I put this in the grid I'm going to say pad underscore actually I'm not sure if it's pad underscore just pad I think it's pad X like this is going to be equal to 5 pixels so pad 5 pixels on both the right and left hand side and then I'm going to say pad and I think this is y and we'll Pat it by five pixels there as well now coming here we can just pad this one by five pixels and now we should see that it's a little bit separated from the frame so let's do that and notice now that we are separated from the frame we can press on our buttons and see how the frame is kind of elevated it's raised up a little bit that's because we specified that argument okay next what we can do is we can make our buttons be the same width so you saw there that they were smaller just because one of them has I guess larger text than the other one so the way that we can make our buttons be the same width is we can use this sticky property so I can say sticky is equal to and then I can go ew so East West again that's going to allow me to expand outwards in the east and west Direction so in the uh what do you call it horizontal direction if you just did East then you would stick to the east side if you did West you'd go to the West Side Etc there's a bunch of different arguments here okay and then for this one same thing East West and now we should see it expanding so let's run this and notice now our buttons are the same width we expand to the full size of our frame okay fantastic and if we go here we can write in our text editor so we're getting somewhere next what we need to do is make the buttons actually do something and then allow us to uh like save and open the file all right so let's go with that so for our buttons here there is an argument that we can pass which is command Now command is going to be a function that we want to call whenever we press the button so let's do a very basic one we're going to say Define test okay print run and I'm just going to show you that if I I write the name of this function here then uh what do you call it tkinter is going to call this test function anytime this button is pressed so if I go here and I click on Save notice that Ron is printing out in my terminal okay perfect so what we want to do is we want to have a function that is open file okay we want to have another function that is save file like this now in these functions what we're going to do is either open a file which means we're going to replace the current contents of our text editor with the contents of a new text file or we're going to save the existing contents to a file and then I guess we could continue editing it so we can start here in our open file function where we're going to take two parameters window and text edit these are the two things that we need from the main function to be able to kind of modify the screen and change what's showing up in our text editing what do you call it widget now before we do that we're going to say from tkinter Dot and I believe this is file dialog let me just check my cheat sheet that is correct we are going to import the ask open file name and if we spell this correctly the ask save as file name like that okay so these are two dialogues or kind of things that we can use to pop open that you know save as open as Etc okay so first open file well the first thing we need to do when we're opening a file is Select that file so to do that we're going to say the file path is equal to ask open file name and here we need to pass all of the different file types we could potentially be opening so file types are going to be like a text file a python file Etc in our case we probably just want to accept text files so to do that we're going to pass inside of here a tuple and we're going to say text files and then we're going to say the extension which is asterisks.txt so you just give a name this is like the options of things you can select and then a pattern that you want to match files against in our case we're only looking at anything that starts with whatever and ends in Dot txt okay so that's the first thing now that we have the file path we just want to make sure the user actually did select a file so I'm going to say if not file path meaning they didn't select something then return because we can't open anything if they haven't selected a file otherwise we're going to open this file and then put it inside of our kind of like text editor component so the first thing we're going to do is get rid of everything that's currently inside of our text editor so to do that we're going to say text edit dot delete and we're going to delete from 1.0 Now 1 0 here is a little bit weird but this is saying line and then position or character So when you say one you're saying line one which is the first line and then zero which is the first character so this is the very start of the file it's a little bit weird because you think it'd be 0.0 but they've done 1.0 so the first line is line one where the first character is zero I know it's a little bit backwards but that's what they have then we're going to say TK dot end and Dot end is going to represent the very end of the file however many uh like lines are in it just going to be the ending index so kind of a global variable we can use there okay now that we have that deleted we are going to open the file so we're going to say with open file path and then we're going to open this in read mode and we're going to say open this as F okay now we're going to read in the contents of the file to do that we're going to say content is equal to F dot read okay so this allows us to open the file we have the file object as F we're reading the contents of the file now we're going to take the contents and put that inside of our text editing component so we're going to say here text edit dot insert and we're going to insert at TK dot end the content now since we've deleted everything inside of the text edit component end is now going to be the very beginning of the file so at the beginning of the file insert all of the content there you go we've just placed that inside then last thing we can do is change the name of our window so that it's the name of this file like you would have in something like Microsoft Word or text edit so we're going to say window Dot and I think this is just title then we can use an F string and we're going to say this is text actually not text we're going to say file path and then we can do something like open file colon and then whatever the name of the file is you can choose what you want to put here I'm just kind of doing this so we can see that we're changing the window title all right before we go much further let's try to use this function and see if it actually works so the way that we can do that is we can go to R not save button but to our open button and we can set the command now remember that we need to write the name of the function as our Command the issue is we have to accept two arguments here in the function the window and text edit and I can't just do this I can't say command is equal to open file and then write the two arguments in if I do that I'm immediately going to call this function it's not going to be called when I press the button because what happens when you press the button is it takes the function name and then it calls it this is different this is actually calling the function right away so what we actually need to do is use something called a Lambda which essentially is like a Anonymous function it's a way to write a function in one line so we're going to write Lambda colon and then open file and we're going to pass window and then our text edit component like that so really what this means is now we have a function that calls this function with the arguments that we need so open Button will use this function it will call it which will then call this function with the required arguments a little bit Advanced syntax there but hopefully that makes a tiny bit of sense okay let's try to run this now and see if we can open a file so I'm going to go to open and I guess we need a file that I can potentially open I don't think I have any text files on here uh so let me create create a new text file story and then once we do that we can try to open it all right so let's try to open this file I just created one here on my desktop and we have test when I opened up notice it loads the contents of that file perfect okay now that we know how to open a file let's try to save a file so saving a file is going going to be very similar here same thing we want to take file path is equal to ask save as file name and then same thing we're going to take our file types here we can just copy this and paste it inside of here okay next we're going to say if not file path then return and now we are going to open a new file and then take the content of our text edit component or widget and put it inside of that file so to do this we're going to say with open file path this time we're going to open in W mode which stands for write mode keep in mind this will override a file if it already exists I'm then going to say as F then I'm going to say my content is equal to and now we need to take our window and text edit as parameters again so let's paste those in here I'm going to say text edit dot get and I'm going to get from the beginning of the file to the end of the file okay so similar to deleting this is just going to give us whatever text is in these positions and now I can say F dot right and I can write my content and then same thing I can change my title here so I say window.title and then this is the file path feel free to change that if you want but that's what I'll have it for now okay so now that we have that let's do the same thing to call our save file so I'm going to copy this command and paste it here and just change this to say save file so let's try this out I'm going to go run save actually let's go hello world okay save this as helloworld.txt we'll just save this onto my desktop okay now let's shut this down rerun it open and if I go here to hello world and open it up I get Hello World perfect so our text editor is now functional the very last thing I want to show you how to do is add keyboard shortcuts so now you can hit Ctrl s and Ctrl o uh to run those same commands Okay so to do that we're going to go down to the bottom of our program here and we're going to bind a command to a key press so the way to do this is Type window dot bind now the command for control s is control dash s like this so make sure you type it exactly as I have it with the kind of angle brackets control fully typed out dash s and then you combine this to the same command you have here so just copy it and paste it but very important make sure you put an X here or some parameter because for this it actually passes one argument I know it seems a bit weird but essentially calls whatever function you have here with a single argument so you need to make sure you have an argument here otherwise it's going to fail if you haven't kind of figured out how this works this is a function essentially the same as saying Define function whatever and then X is an argument that you can pass to the function you could have multiple arguments like that in our case we're just going to have one okay now I'm going to copy the same thing and we're going to do control o for open and then we're going to go here to open file and again just make sure you have at least one argument here or that you have one argument here otherwise it's not going to work so now if I re-run and I use my keyboard I can do control o and Ctrl s and I can toggle those commands all right so let me zoom out here just so you can read all of the code at once or most of the code at once and with that I think I'm going to wrap up the video here so this was just a mini python project wanted to give you a quick introduction to tkinter show you how you can do things like open files save files and just get you know a cool kind of text editor under your belt obviously this is very very basic there's a lot more stuff you would want to do like setting something to bold maybe italicizing having headers all kinds of different stuff you can go out and create using tkinter hopefully this gave you a bit of inspiration and you enjoyed the video so with that said I'm going to wrap it up here remember to check out programming expert and blockchain expert from the link in the description I look forward to seeing you in another mini python project tutorial foreign [Music]

Channel: Tech With Tim

Views: 35,261

Keywords: tech with tim, python, python tutorial, python projects, learn python, python for beginners, python programming, python tutorial for beginners, python projects for beginners, python project ideas, python course, beginner python project, python automation projects, python project tech with tim, python (programming language), python projects for intermediate, python project, mini python projects, python programming tutorial, python tutorial project, mini python project

Id: A_Sfru99QNA

Length: 23min 59sec (1439 seconds)

Published: Thu Jan 04 2024