Prerequisites:Python GUI – tkinter

Sometimes it happens that we need to create an application with several pops up dialog boxes, i.e Page Frames. Here is a step by step process to create multiple Tkinter Page Frames and link them! This can be used as a boilerplate for more complex python GUI applications like creating interfaces for Virtual Laboratories for experiments, classrooms, etc.

Here are the steps: 

• Create three different pages. Here we have three different pages, The start page as the home page, page one, and page two. 
• Create a container for each page frame. 
• We have four classes. First is the tkinterApp class, where we have initialized the three frames and defined a function show_frame which is called every time the user clicks on a button. 
• The StartPage is simple with two buttons to go to Page 1 and Page 2. 
• Page 1 has two buttons, One for Page 2 and another to return to Start Page. 
• Page 2 also has two buttons, one for Page 1 and others to return to StartPage. 
• This is a simplistic application of navigating between Tkinter frames. 
• This can be used as a boilerplate for more complex applications and several features can be added. 

The App starts with the StartPage as the first page, as shown in class tkinterApp. Here in StartApp, there are two buttons. Clicking on a button takes you to the respective Page. You can add images and graphs to these pages and add complex functionality. The pages have two buttons as well. Every time a button is pressed show_frame is called, which displays the respective Page.

Below is the implementation: 

importtkinterastkfromtkinterimportttkLARGEFONT=("Verdana",35)classtkinterApp(tk.Tk):# __init__ function for class tkinterAppdef__init__(self,*args,**kwargs):# __init__ function for class Tktk.Tk.__init__(self,*args,**kwargs)# creating a containercontainer=tk.Frame(self)container.pack(side="top",fill="both",expand=True)container.grid_rowconfigure(0,weight=1)container.grid_columnconfigure(0,weight=1)# initializing frames to an empty arrayself.frames={}# iterating through a tuple consisting# of the different page layoutsforFin(StartPage,Page1,Page2):frame=F(container,self)# initializing frame of that object from# startpage, page1, page2 respectively with# for loopself.frames[F]=frameframe.grid(row=0,column=0,sticky="nsew")self.show_frame(StartPage)# to display the current frame passed as# parameterdefshow_frame(self,cont):frame=self.frames[cont]frame.tkraise()# first window frame startpageclassStartPage(tk.Frame):def__init__(self,parent,controller):tk.Frame.__init__(self,parent)# label of frame Layout 2label=ttk.Label(self,text="Startpage",font=LARGEFONT)# putting the grid in its place by using# gridlabel.grid(row=0,column=4,padx=10,pady=10)button1=ttk.Button(self,text="Page 1",command=lambda:controller.show_frame(Page1))# putting the button in its place by# using gridbutton1.grid(row=1,column=1,padx=10,pady=10)## button to show frame 2 with text layout2button2=ttk.Button(self,text="Page 2",command=lambda:controller.show_frame(Page2))# putting the button in its place by# using gridbutton2.grid(row=2,column=1,padx=10,pady=10)# second window frame page1classPage1(tk.Frame):def__init__(self,parent,controller):tk.Frame.__init__(self,parent)label=ttk.Label(self,text="Page 1",font=LARGEFONT)label.grid(row=0,column=4,padx=10,pady=10)# button to show frame 2 with text# layout2button1=ttk.Button(self,text="StartPage",command=lambda:controller.show_frame(StartPage))# putting the button in its place# by using gridbutton1.grid(row=1,column=1,padx=10,pady=10)# button to show frame 2 with text# layout2button2=ttk.Button(self,text="Page 2",command=lambda:controller.show_frame(Page2))# putting the button in its place by# using gridbutton2.grid(row=2,column=1,padx=10,pady=10)# third window frame page2classPage2(tk.Frame):def__init__(self,parent,controller):tk.Frame.__init__(self,parent)label=ttk.Label(self,text="Page 2",font=LARGEFONT)label.grid(row=0,column=4,padx=10,pady=10)# button to show frame 2 with text# layout2button1=ttk.Button(self,text="Page 1",command=lambda:controller.show_frame(Page1))# putting the button in its place by# using gridbutton1.grid(row=1,column=1,padx=10,pady=10)# button to show frame 3 with text# layout3button2=ttk.Button(self,text="Startpage",command=lambda:controller.show_frame(StartPage))# putting the button in its place by# using gridbutton2.grid(row=2,column=1,padx=10,pady=10)# Driver Codeapp=tkinterApp()app.mainloop()

Output:

 Code Explanation:

1. The code starts by creating a class, tkinterApp.
2. This class has two main functions: _init_ and show_frame.
3. The _init_ function is used to initialize the objects in the application.
4. The first function, _init_ for the class Tk, is used to initialize the object tkinterApp.
5. It takes two arguments: *args and **kwargs.
6. The first argument is an empty list of strings, while the second argument is a dictionary of key-value pairs that are passed to various methods in Tkinter.
7. Next, the code creates a container object called container and packs it into a frame onscreen with side set to "top" and fill set to "both".
8. The expand property of container is set to True so that it will automatically be expanded when displayed onscreen.
9. Finally, grid_rowconfigure() and grid_columnconfigure() are used to configure the rows and columns of container respectively.
10. Now that everything is setup, the code starts iterating through different page layouts using for loop.
11. For each layout (StartPage, Page1, Page2), a new frame instance (F) is created and initialized with values from startpage (the first layout), page
12. The code creates a Tkinter application and defines three frames, StartPage, Page1, and Page2.
13. The _init_ function for the class tkinterApp is used to initialize the frames and container.
14. The container is then packed into a Frame object and displayed on-screen.
15. The code first iterates through a tuple consisting of the different page layouts.
16. For each layout, a Frame object is created and initialized with the appropriate parameters.
17. The Frame objects are then placed in respective containers and displayed on-screen.
18. When the user clicks on one of the buttons, the show_frame function is called which invokes the controller's show_frame function for that particular page layout.

Similar Reads