Switching between Frames Using the Frame tkraise() Method

Created with Sketch.
New Python tutorial

Switching between Frames Using the Frame tkraise() Method

Summary: in this tutorial, you’ll learn how to use the Frame tkraise() method to switch between frames in a Tkinter application.

Introduction to the Frame tkraise() method

Typically, a Tkinter application consists of multiple frames. And you often need to switch between frames to display the one that is relevant to the user’s choice.

Tkinter allows you to stack frames on top of each other. To show a particular frame, you can simply raise one above the other in the stacking order. The top frame will be visible.

To bring a frame to the top, you use the tkraise() method of the Frame widget like this:

frame.tkraise()

Code language: Python (python)

The Frame tkraise() method example

In this example, you’ll extend the temperature converter application by adding the conversion of a temperature from Celsius to Fahrenheit:

By default, the application converts a temperature from Fahrenheit to Celsius.

If you select the C to F radio button, the application shows a new frame that allows you to convert a temperature from Celsius to Fahrenheit:

To build this application, you’ll need to have three main widgets:

  • A root window.
  • The ConverterFrame that shows the form fields.
  • And the ControlFrame that shows the radio buttons.

The ConverterFrame will have two instances, one that converts a temperature from Fahrenheit to Celsius and the other that converts a temperature from Celsius to Fahrenheit:

First, define a TemperatureConverter class that has two static methods: fahrenheit_to_celsius and celsius_to_fahrenheit.

class TemperatureConverter:
@staticmethod
def fahrenheit_to_celsius(f, format=True):
result = (f - 32) * 5/9
if format:
return f'{f} Fahrenheit = {result:.2f} Celsius'
return result

@staticmethod
def celsius_to_fahrenheit(c, format=True):
result = c * 9/5 + 32
if format:
return f'{c} Celsius = {result:.2f} Fahrenheit'
return result

Code language: Python (python)

The fahrenheit_to_celsius and celsius_to_fahrenheit methods return a formatted string if you ignore the second argument or pass True to them. Otherwise, they’ll return the result as a number.

Second, define the ConverterFrame that will show the UI for converting temperature from Fahrenheit to Celsius and vice versa.

To do it, you’ll need to make the ConverterFrame more flexible by adding the following parameters to the __init__() method:

  • A string that will be displayed as Fahrenheit and Celsius
  • A callback function for converting the temperature.

The following shows a complete ConverterFrame class:

class ConverterFrame(ttk.Frame):
def __init__(self, container, unit_from, converter):
super().__init__(container)

self.unit_from = unit_from
self.converter = converter

# field options
options = {'padx': 5, 'pady': 0}

# temperature label
self.temperature_label = ttk.Label(self, text=self.unit_from)
self.temperature_label.grid(column=0, row=0, sticky='w', **options)

# temperature entry
self.temperature = tk.StringVar()
self.temperature_entry = ttk.Entry(self, textvariable=self.temperature)
self.temperature_entry.grid(column=1, row=0, sticky='w', **options)
self.temperature_entry.focus()

# button
self.convert_button = ttk.Button(self, text='Convert')
self.convert_button.grid(column=2, row=0, sticky='w', **options)
self.convert_button.configure(command=self.convert)

# result label
self.result_label = ttk.Label(self)
self.result_label.grid(row=1, columnspan=3, **options)

# add padding to the frame and show it
self.grid(column=0, row=0, padx=5, pady=5, sticky="nsew")

def convert(self, event=None):
""" Handle button click event
"""
try:
input_value = float(self.temperature.get())
result = self.converter(input_value)
self.result_label.config(text=result)
except ValueError as error:
showerror(title='Error', message=error)

def reset(self):
self.temperature_entry.delete(0, "end")
self.result_label.text = ''

Code language: Python (python)

How it works.

  • Use the unit_from argument to show the label for the temperature.
  • Call the self.convert callback in the convert() method to convert a temperature from one unit to another.
  • Define the reset() method to clear the entry widget and the result label when the frame is switched from one to another.

Third, define a ControlFrame class that shows the radio buttons for selecting a frame to show. The ControFrame class inherits from the ttk.LabelFrame.

class ControlFrame(ttk.LabelFrame):
def __init__(self, container):

super().__init__(container)
self['text'] = 'Options'

# radio buttons
self.selected_value = tk.IntVar()

ttk.Radiobutton(
self,
text='F to C',
value=0,
variable=self.selected_value,
command=self.change_frame).grid(column=0, row=0, padx=5, pady=5)

ttk.Radiobutton(
self,
text='C to F',
value=1,
variable=self.selected_value,
command=self.change_frame).grid(column=1, row=0, padx=5, pady=5)

self.grid(column=0, row=1, padx=5, pady=5, sticky='ew')

# initialize frames
self.frames = {}
self.frames[0] = ConverterFrame(
container,
'Fahrenheit',
TemperatureConverter.fahrenheit_to_celsius)
self.frames[1] = ConverterFrame(
container,
'Celsius',
TemperatureConverter.celsius_to_fahrenheit)

self.change_frame()

def change_frame(self):
frame = self.frames[self.selected_value.get()]
frame.reset()
frame.tkraise()

Code language: Python (python)

How it works.

  • Each radio button holds a value 0 or 1.
  • Create two instances of the ConverterFrame class, one is in charge of converting a temperature from Fahrenheit to Celsius, and the other converts a temperature from Celsius to Fahrenheit. Also, define a dictionary to store these frames. The keys of frames are the same as the values of the radio buttons.
  • When a radio button is clicked, the change_frame() method is called to select the corresponding frame from the dictionary based on the value of the selected button.
  • Call the reset() method of the frame to reset the entry field and result label. And also invoke the tkraise() method to display the frame.

Fourth, define the App class that subclasses from the tk.Tk class:

class App(tk.Tk):
def __init__(self):
super().__init__()

self.title('Temperature Converter')
self.geometry('300x120')
self.resizable(False, False)

Code language: Python (python)

Finally, bootstrap the application from the if __name__ == "__main__" block:

if __name__ == "__main__":
app = App()
ControlFrame(app)
app.mainloop()

Code language: Python (python)

Put it all together.

import tkinter as tk
from tkinter import ttk
from tkinter.messagebox import showerror

class TemperatureConverter:
@staticmethod
def fahrenheit_to_celsius(f, format=True):
result = (f - 32) * 5/9
if format:
return f'{f} Fahrenheit = {result:.2f} Celsius'
return result

@staticmethod
def celsius_to_fahrenheit(c, format=True):
result = c * 9/5 + 32
if format:
return f'{c} Celsius = {result:.2f} Fahrenheit'
return result

class ConverterFrame(ttk.Frame):
def __init__(self, container, unit_from, converter):
super().__init__(container)

self.unit_from = unit_from
self.converter = converter

# field options
options = {'padx': 5, 'pady': 0}

# temperature label
self.temperature_label = ttk.Label(self, text=self.unit_from)
self.temperature_label.grid(column=0, row=0, sticky='w', **options)

# temperature entry
self.temperature = tk.StringVar()
self.temperature_entry = ttk.Entry(self, textvariable=self.temperature)
self.temperature_entry.grid(column=1, row=0, sticky='w', **options)
self.temperature_entry.focus()

# button
self.convert_button = ttk.Button(self, text='Convert')
self.convert_button.grid(column=2, row=0, sticky='w', **options)
self.convert_button.configure(command=self.convert)

# result label
self.result_label = ttk.Label(self)
self.result_label.grid(row=1, columnspan=3, **options)

# add padding to the frame and show it
self.grid(column=0, row=0, padx=5, pady=5, sticky="nsew")

def convert(self, event=None):
""" Handle button click event
"""
try:
input_value = float(self.temperature.get())
result = self.converter(input_value)
self.result_label.config(text=result)
except ValueError as error:
showerror(title='Error', message=error)

def reset(self):
self.temperature_entry.delete(0, "end")
self.result_label.text = ''

class ControlFrame(ttk.LabelFrame):
def __init__(self, container):

super().__init__(container)
self['text'] = 'Options'

# radio buttons
self.selected_value = tk.IntVar()

ttk.Radiobutton(
self,
text='F to C',
value=0,
variable=self.selected_value,
command=self.change_frame).grid(column=0, row=0, padx=5, pady=5)

ttk.Radiobutton(
self,
text='C to F',
value=1,
variable=self.selected_value,
command=self.change_frame).grid(column=1, row=0, padx=5, pady=5)

self.grid(column=0, row=1, padx=5, pady=5, sticky='ew')

# initialize frames
self.frames = {}
self.frames[0] = ConverterFrame(
container,
'Fahrenheit',
TemperatureConverter.fahrenheit_to_celsius)
self.frames[1] = ConverterFrame(
container,
'Celsius',
TemperatureConverter.celsius_to_fahrenheit)

self.change_frame()

def change_frame(self):
frame = self.frames[self.selected_value.get()]
frame.reset()
frame.tkraise()

class App(tk.Tk):
def __init__(self):
super().__init__()

self.title('Temperature Converter')
self.geometry('300x120')
self.resizable(False, False)

if __name__ == "__main__":
app = App()
ControlFrame(app)
app.mainloop()

Code language: Python (python)

Summary

  • Use tkraise() method to bring a frame on top a list of frames.
0

Leave a Reply

Your email address will not be published. Required fields are marked *

Getting Started with Python Programming

Python Fundamentals

Control Flow

Functions

Python List

Python Dictionary

Python Set

Exception Handling

Python Loop with Else Clause

More on Functions

Modules

File I/O

Directory

Strings

Classes and objects

Section 2. Special methods

Section 3. Property

Section 4. Single inheritance

Section 5. Enumeration

Section 6. SOLID principles

Section 7. Multiple inheritances

Section 8. Descriptors

Section 9. Metaprogramming

Section 10. Exceptions







©  2024 python tutorials.  python-tutorials.in