Tkinter - Switch Frames

[Music] i'll show you how to switch frames depending on what needs to be shown to the user we will cover how to create a settings window that shows content based on what the user selects in a treeview widget hi my name is joman and i'm an open source developer my channel is called jobinpi and it's all about python and linux welcome to jumpingpie [Music] so in this video i'm going to show you how to create this it's it's basically a window and you have a a frame on the right hand side and you have a tree view on the left hand side and it's and it's a settings dialog so i can click on audio and have things related to audio to show up on this frame and i can click on language and have things related to language settings show up in this frame so it's a very typical settings window and i'll show you how to create this with tiki enter okay to start things off i'm going to have a file called settings underscore view dot pi and i'm going to import tk enter stk and from tk enter import ttk and if name equal main root equal tk dot tk and root dot main loop so basically if we're importing this file it won't run this and if we're executing this file by itself it will run this section the first thing that we want to make is our own tree view class so i'm going to say class settings treeview and it's going to derive from ttk.treeview and we'll create the init constructor we'll take in a master and optional keywords and we'll initialize ttk.treeview here and here we're going to say self.heading number sign zero so the very first column that the tree view widget creates automatically we want to set the text of that to settings which will show up at the top of the tree view then we'll add a method called add setting and we're going to take in an image which will be a photo image and section text as a string and what this method will do is it will insert a row into our tree view and it's basically just a helper method just to make it easier so the image will be a photo image which tk enter likes to use the section text will be just a string so that's the name of the setting essentially such as language or audio and this won't return anything and here we'll just put self dot insert parent equal a blank string index equal tk dot end text equal settings and here we'll also add image equal image okay so this is a fairly basic method it's just adding a row to our tree view widget and next we need to also create another class we're going to call it settings view and it's going to derive from ttk frame and we're just going to create the constructor here and we'll initialize ttk.frame okay so here we're basically calling the init method of ttk frame and ttk frame is a super class which is why we use super to initialize ttk frame i'm going to show you an overview of what the plan is so this is going to be our window this is just an illustration so we have our root window on our root window we need to add a frame and it's basically that same class that we just made so settings view and it derives from ttk.frame this is what we're going to add it's going to cover the whole window then on this frame we're going to add another frame and it's going to be called frame underscore tree view which will also be a ttk frame and in this frame we're going to put a tree view and on the right hand side we're going to have another frame again and this frame will have the contents of the settings so from the left hand side the user will choose the setting and on the right hand side it will show the appropriate frame for that setting that the user selects okay so now that we know what the plan is we're just going to go back into our code so this is the settings view that we're working on now and here we're going to have a dictionary it's just going to be blank for now the key of this dictionary will be the setting name such as language or audio so as a as a string the value will be a page object and a page object is something that we haven't made yet it's going to derive from a ttk frame so we'll just put that in there now so ttk frame so we should work on this now so we should create a page class and our page class i want to put this into a separate python file so i have another file here called page underscore view dot pi and here i'm going to create a page class but first i'm going to write import tk enter stk from tk enter import ttk and then class page and it's going to derive from a ttk frame then we're going to initialize it or create the constructor just like the other classes that we just made then we're going to create another class that's going to derive from page so class language page and it's going to derive from the page class which we defined up here and we'll create the init constructor for this as well and we'll initialize it and this will contain the contents related to the language page or the language settings area so we're going to create our own method here so create frame content and this will return a ttk frame so i'm going to put self.frame content equal ttk frame and i'm going to put it into self so this frame is going into this language page frame which is a page and the page derives from a ttk frame then i'm going to create a label so label title equal ttk.label and we're going to put this label into self.frame content and we're going to set the text to this is the language page and we're going to pack it onto the screen and we're going to return self dot frame content and up here we can call this method self dot create frame content dot pack fill equal tk dot both expand equal true so we're calling this method which is going to return a ttk frame and when it does we're packing it onto the screen and what this method is doing is it's going to create the widgets specific to this setting related to language and it's going to return a ttk frame then we're going to have another class and i'm just going to copy and paste it the other class is going to be called audio page and it's just going gonna be related to things about audio and the label we're just gonna change it to this is the audio page like that okay so now that we have page underscore view completed we can go back into our settings view file now we can import those page classes which are essentially ttk frames that we created in the other file so these two files are actually in the same directory so they'll be easy to import so i'll say from page underscore view import language page and audio page so now we can use those two frames in our settings underscore view file okay so continuing with our settings view class here so we have our pages dictionary created and again the key will be the setting name and the value will be a page object it's going to be an instantiated page object so it's currently it's either going to be language page or audio page and next we'll say give row 0 and column 1 as much room as it needs so here we're going to put self dot grid row configure 0 row 0 weight equal 1 and self grid column configure column 1 weight equal 1. and the reason why we want to give row zero and column one as much room as it needs is because if we go back to the illustration so this is going to be row zero column one it's going to be the frame page so the audio page or the language page and we want this section to have more room allocated to it than the tree view so when we resize this settings window it'll be okay if the frame page increases in size but we don't want the tree view on the left to grow in size or at least not horizontally not not this way so that's why we're going to give this row and this column more weight than uh than than this column here okay so going back to our code we're going to create another method here create frame tree view and it's going to return a ttk frame as well and what this will do is create the frame that will hold the settings tree view widget and also instantiate the settings the tree view class okay so this will create the frame on the left of the window that will hold the settings tree view object and this will return a ttk frame so self dot frame tree view equal ttk frame and we're putting this into self now we're going to make the tree view itself or instantiate the tree view itself so treeview underscore settings equal settings treeview and we're going to put it into self.frame treeview which we just define up here and we also need a binding so self.treeview underscore settings.bind and we're going to bind treeview select to a method that we haven't created yet so essentially when the user selects a setting we want the frame to change um and this is where the binding for the change occurs okay so we should create a method for when the selection changes on the tree view widget and we're going to call this on tree view selection changed and it's going to pass in an event automatically and here we're going to switch to the frame related to the newly selected setting and it's not going to return anything so selected item equal self.tree view settings dot focus so we're going to get the selection we're going to get the selected item which will be the unique identifier so this won't contain the text it'll contain the identifier the unique identifier such as i zero zero one or i zero zero two as a string then we need to get the setting name so now we want to get the actual text of the selected item in the tree view so we'll say self dot tree view settings dot item and the item that we're interested in is the selected item and it's going to return a dictionary and from that we want to run the get method on the dictionary and get the text so now this variable should contain the text that uh that the user selected or the from from the tree view and here we need to show a page based on the setting so we need to come back here and and finish this the binding we're going to run self dot on tree view selection changed and now we're going to pack this tree view onto the screen fill equal tk dot both expand equal true and now we need to actually run this method in our init constructor so self.create frame tree view and we're going to grid this so row equal zero column equals zero sticky equal ens so we want this to stick to the east to the north and the south so this is what we're gridding so this is going to go into column zero and row zero and we want this to stick to the left to the top and to the bottom okay and that's why we have ens here next we need another method create frame page and this will also return a ttk frame and the purpose of this method is it's going to create the frame that will show the current setting page and it's going to return a ttk frame so here we're going to say self.frame underscore page equal ttk frame and we're going to put this into self and self is the settings view itself which is a ttk frame and we're going to return self.frame page and from here we're going to run this method so self dot create frame page dot grid row equals zero column equal one oh up here i forgot to put column equals zero there we go row equals zero column equal one and that's all we need for that and we should create a show page method as well in this to do section so on treeview selection changed here we need to show the frame based on the selection so we need another method show page and we're going to ask for the setting name which will be a string and the purpose of this method is it will pack forget all pages pack the given page name and the parameters the setting name is the setting slash page to show and it won't return anything and here we need to loop through the pages before page name and self.pages dot keys so we're just going to loop through the keys and the keys are the setting names such as language or audio self.pages and the page name dot pack forget and what this loop is doing is it's going through all the frames or all the page objects and the pages dictionary and it's going to run the pack underscore forget method on those frames and this will cause those frames to not show on the screen and even if they're not already packed on the screen it won't raise an error so it's okay to run this method even if a frame or if if the object isn't currently packed on the screen then we'll say self dot pages setting name dot pack fill equal tk dot both expand equal true so now we're we're packing the setting that we're interested in so this line is causing the setting that the user selected to show up on the right hand side so it's gonna show up here essentially okay so we have our show page method created we just need to call it here and we're going to call it when the tree view selection changes so we're gonna we're gonna change this to self.show page and we just need to pass the setting name like that now it's time to create our next method add page and we're going to ask for the image path as a string setting name as a string and a page which will be a page class so at this point it hasn't been instantiated yet and the purpose of this method is instantiate the page frame and add it to the pages dictionary so the image path will be a path to an image file a setting name will be just a string page will be a page class and it will return none okay so now we need to load the image and convert it to a photo image and this image is the little icon that will appear on the left hand side of the setting so it's going to show up like here it'll say setting and on the left you'll have the icon i have icons in the same folder as my project here but first i need to import the pillow library so i'll say from pill import image and image tk and the reason why we import both of them is image will load the image as a regular image object and image tk will be used to convert the image into a photo image because tk enter likes to use photo images okay and in add page we're still in the settings view class so we're still actually in here okay so load the image and convert it to a photo image so with image dot open image path as img and now convert it to a photo image so i'll say photo image equal image tk dot photo image and i'll pass an img from here and here i'll say add page to dictionary so we can show it when needed self.pages then we're gonna use the setting name as the key equal page self.frame page so here we're instantiating the page class that we provide here and this dictionary will have instantiated versions of the setting frames so that means anytime we need to show a setting frame it's already instantiated and ready to go we just have to show the frame next line is keep a reference to the image so that it doesn't get garbage collected and this one's important if we don't keep a reference to this photo image python will garbage collect the photo image and then our image won't actually appear in the tree view and the reason is we're we're loading the image in a class so this is something that has to be done so that the image stays in the tree view so self.pages setting name dot image equal photo image and we're just keeping a reference to the image by attaching it to uh to this dictionary and then on the next line insert the setting name into the settings tree view so self dot tree view settings this is the tree view that we made ourselves and dot add setting this is the method that we created image equal photo image section text equal setting underscore name and now we need to scroll to the bottom here and now we can instantiate our settings view class so first let's change the geometry a little bit so let's make give the window a width and height so 640 by 480 settings equal settings view we're putting this into root and let's just set the relief to flat so it looks a bit more modern and settings dot add page image path equal language.png i i already have this in the same folder as my project setting name equal language and the page will be the language page class next one's going to be the same thing but for audio so add page image path equal audio.png setting name equal audio and page equal audio page like that and now we need to pack this onto the screen because this this is a frame dot pack fill equal tk dot both expand equal true okay so let's just run this and see what we got oh so here we are getting an error so if we go to create frame tree view we're supposed to return a ttk frame but i don't think i did that no so return self dot frame or return self dot frame underscore tree view so i just wasn't returning this tree view here okay so let's just run that again there we go okay so for some reason it says settings here twice um let's just have a look at that oh actually the problem is the add setting method i put here text equal settings i should have put text equal section text so in add underscore setting [Music] in our settings tree view class so in this one the add setting method should actually be text equal section text which we're getting from here so let's just run this again there we go that looks better and you can see that it switches the page as we change our selection so it's definitely working but let's make this look a bit better i'm going to use ttk styles to make it look better and i'm just going to copy and paste some of the styles that i have here so and i'm going to explain what this style section here does so we're instantiating a ttk.style class and putting it into that variable i'm configuring treeview.heading by making the relief flat to give it a more modern look we're changing the background to white we're changing the row height of items and the tree view to 28 and here we're saying that whenever something gets selected whenever a row gets selected in the tree view widget then make the foreground text color dark green and change the background color to light green so this is what this section is doing and here we're saying make the font of all ttk labels the default tk font but size 18 just to make it bigger okay and let's just run this again and we can see that it already looks more modern and and the height of the row is uh is larger as well so it's a it's a bit easier to to read it's not as squished so this is how you can switch frames using tk enter it uses classes quite heavily one thing i would like to point out is in our page underscore view class you'll notice that i'm using language page and audio page and these are all essentially just frames and you might wonder well why not just derive from ttk frame and why why are we deriving from a page the benefit of having a page is that later on you could actually add option specific methods to a page for example if your user is looking at a specific setting let's say the audio page and if they haven't chosen a sound card you can have your program ask the user to to choose a sound card so you can have a method in here to say verify and here you can return true if everything in that settings page looks okay or you can return false if the user needs to do something on that settings page so that's why i think it's important to have a separate class called page or or something like page where you can do some integrity checks you know to make sure that what the user has provided or the settings that have been chosen are actually valid or not but these are the main building blocks for creating a settings window like this you can also use this technique to create a wizard where you can click on next and it goes to the next step whether it's an installer or or if you're asking the user for information so you can use this in a step-by-step wizard interface as well it's the same kind of idea you would have pages and typically you would have a dictionary to hold those pages we saw how to switch frames in a tk enter application if you enjoyed this video please hit the like button until the next tutorial thanks for watching [Music]

Channel: JobinPy

Views: 1,994

Keywords: tkinter, pythonprogramming, pythongui, python3

Id: 4hamShRNxgg

Length: 31min 19sec (1879 seconds)

Published: Mon Jul 18 2022