Tkinter (ttk) graphical user interface for Python

This document shows how to program a Python Tkinter Themed Tk (ttk) graphical user interface (GUI) for both text and numerical data entry. Tkinter ttk provides enhanced widgets that can simplify creating GUI windows.

Note: Before you can program and run ttk data-entry widgets, you need to download and install Python 3 and IDLE for Python 3. IDLE is the Python integrated development environment (IDE). For details, see Getting Started with Python Programming.

Creating a ttk planning grid
Before you start programming your ttk GUI window, you should create a planning grid that helps you organize your Entry, Label and Button widgets into rows and columns. To create your ttk grid, you can either make a pencil sketch or use a word-processor table similar to Figure 1.

Figure 1 - You can use a word-processor table to create your ttk planning grid.

Note: Compare Figure 1 with Figures 2 and 3. Figure 2 shows the initial example window. Figure 3 shows the results of entering data into that window.

Figure 2 - Example ttk GUI window prior to data entry.

Figure 3 - Example ttk GUI window after data entry.

Programming a ttk GUI window
The example Python program in Figures 4 and 5 contain Python code that defines the example ttk GUI window in Figures 2 and 3. Note: A # character precedes each comment.

Figure 4 includes code that:

• Imports both tkinter and ttk.
• Defines callable GUI functions using the get() and set() control-variable  methods:
• The texter() function gets input data for variable 'textin,' and sets the output data for variable 'textout.'
• The adder() function gets input data for variables 'a' and 'b,' and sets the output data for the variable 'total.

Figure 4 - This ttk example code includes function definitions.

Figure 5 includes code that:

• Sets up a self-sizing GUI window based on the example ttk planning grid in Figure 1.
• Defines two ttk.Button widgets:
• According to planning grid row 3, column 3, 'command=texter'  calls the texter() function in Figure 4.
• According to planning grid row 7, column 3, 'command=adder'  calls the adder() function in Figure 4.

Figure 5 - This ttk example code sets up the GUI window
and defines two button widgets.

Running the ttk example
Before you can run the ttk example Python program, you need to either download (or type) it into into a new file.

Downloading and running the ttk example - To download and then run the example ttk, do the following:

1. In a new browser window or tab, go to Tkinter ttk Data Entry.
2. Select the entire program, and then press Ctrl+C to copy the code.
3. Start Python 3 and open a new window in IDLE.
4. Click File, click New File, and then press Ctrl+V to paste your copied code into your new file.
5. Save your new file with an appropriate file name, such as TtkExample.py, and then click Run Module.
6. Test the ttk example by entering text and numerical values. See Figures 2 and 3.

Typing and running the ttk example
If you are new to Python, you might wish to type the example ttk as extra practice. To type and run the example GUI, do the following:

1. Start Python 3 and open a new window in IDLE.
2. Click File, click New File, and then type the code from Figures 4 and 5 into your new file. 
3. Save your new file with an appropriate file name, such as TtkExample.py, and then click Run Module.
4. Test the ttk example by entering text and numerical values. See Figures 2 and 3.