app development in python Tkinter (How to) (blog python)

 Python UI with Tkinter

Hey guys, today I'm going to be doing a pretty cool how-to blog. It's gonna be on Tkinter and app development! We won't be making anything too crazy but regardless you should be able to get some valuable knowledge out of this. But before we get Into the blog I need to announce something big, Sunday was the official launch of my second bog. It's about indie games and is called IGB check it out here

IGB blog: https://indie-game-blog.blogspot.com

And with that out of the way, let's get right into the rest of the blog! Enjoy

The code explanation!

Ok so by the end of this tutorial blog you should have a desktop app that looks like this! The green box is an entery the orange one is a label and the top text is also a label. The bottom two buttons do what they say they do!

Not the cleanest looking thing but you will learn a lot from creating it. Now let me explain how I'm creating this. For this project, will be using the built-in python library Tkinter it's used for creating UI in desktop and mobile apps with python. And it's also very easy to get started with! In the code for this project, you will learn about and use objects. Objects are just things like buttons, text boxes, etc, and in this blog, we will cover the following objects (buttons, labels, entery's, frames, and canvases) So let's hop into it!

The code how to!

First of just like most programs we need to import our necessary libraries. In this case, we need the Tkinter library for UI and the random library in order to choose random colors for the new color button (if you did not catch on yet the new color button will change the background color!) so just add in this code!

Great! Now let's define some variables. We need to tell Tkinter how big we want our app's window to be so let's define height and width variables. I'm going with 500x600 but you can change this as you like. Also, don't forget to add in the list of colors! So just add this code to the script

Ok, now we need to create some functions! We won't add anything to them right now but don't worry we'll get to that soon. So just add this to the code.

Great now let's get into the actual creation of UI in our app. So first off we need to create the main window for our app! We will call it root because that's what it usually defaults to in most programs. So just add this code. 

Cool, now we have a window! But it has no size and is not very practical in use. So instead we need to make a canvas and frame to add our widgets too. We don't really need the frame but I just added it in for the sake of learning. We give the height and frame variables we defined for earlier to the canvas and the bg attribute in the frame object stands for background color. So add this code in.

You also may have noticed the pack and place functions. The pack function just puts the object in the next open spot. And the place one puts it in a specific spot using the two (relx and rely/ relwidth and relheight) float's

Now let's add our tile, entry, and label! I'll explain them one by one so don't worry about the complexity it's not too hard anyway. let's start with the title. It's just some text in a label! Simple as that.

so just add this code

Ok now let's move on to the entery! It's A textbox for the user to enter text. let's add it inside the frame and make it green! so just add in this code.

Now our label. Every time the user clicks the submit button whatever that was in the entery will be shown in the label! So let's add it in! Add in this code. It won't be doing anything yet but don't worry that's what the functions are for and we'll be getting to them soon!

 Great, we can now add both our buttons! One for submitting the text and moving it to the label and one for changing background colors. We need to add a command attribute to the button to make it call a function on click! so just add in this code! Read the comments in the code too! they will help you understand

Now this time when we pack the buttons we add a side attribute instead of an x and y value. This just makes it be on one side or the other.

Ok now let's get back into the functions form earlier. Let's start with the getInfo function. It takes two arguments entery and label. entery is what it sounds like, it's the entery form a bit ago we need it to be able to get whatever text is in it. And the label is also just the same we need it in order to add whatever was in the entery into our label. So add this code to the function. 

We first destroy the label then remake it with the text in the entery inside it this time!

  Ok, now the next new color function. It looks like a whole lot. But trust me it's not. So let's break it down!

TBH there is nothing to really break down... with the first line we make root global so we can edit it. Then we just destroy it because we need to remake everything but with a new random color!

So add this code to the function.

Now at the very end, we just add this code to initiate Tkinter and tell it to get started! So just add this code real fast and you are done!

Final thoughts

And that's it for this tutorial! Hope you enjoyed it. But before I go I need to tell you guys about my new IBG blog! (again) IGB is a weekly blog about indie games! If you have a game or like indie games then you should check it out link is just below! Thank you and make sure to drop a follow if you enjoyed! And per schedule, if you have any thoughts or questions id be happy to answer them. And with that keep on creating and exploring and ill be heading off for now! 

Git and socials

git: https://github.com/powplowdevs/Powplow-Create

IBG BLOG: https://indie-game-blog.blogspot.com

Twitter: https://twitter.com/powplowdevs

buy me a coffee: https://www.buymeacoffee.com/powplowdevs

youtube: https://www.youtube.com/channel/UC5NRegu6NkOuaVfVVcrNBhg

thank you.