Creating Tabbed Interface- Using PySimpleGUI

Tabbed interface is a very useful element in GUI programming to organize your input elements and reduce the size of interface. If you have groups of related data to be entered by the user, then use tab and tab group to create a clean and an intuitive interface. In this tutorial you will learn how to create a tabbed interface using pySimpleGUI package in Python. So let’s begin.

Tabbed Interface- Tabs and Tab Group

If you have ever used those options in an application where you need to input data for multiple aspects of it, then you surely have used a tabbed interface. It displays a container area and button like options at the top. On selecting one of the options from this group, you are presented with the entry elements available for that option. The whole set of such tabs is called a Tab Group to group related sections in one GUI interface rather than making different data entry forms and invoking them individually.

If you want to create such tabbed interface in your Python Application you can use the Tab and TabGroup elements of pySimpleGUI package.

Tab

Tab Element is a container element which uses a string as its tab title and a layout to fill with the input elements like Text, Input, Check Boxes, Radio Buttons and so on. It does not have individual existence in a Python GUI interface. It can only be added in a TabGroup to make more than one Tab interfaces for different sub-tasks of a bigger tasks. The syntax of creating a tab is

Tab( tab-title, tab-layout, [other optional parameters])

The following are the other important attributes to be passed as arguments to define a tab

Title– String,  is the text of the tab that you wish to assign, reflecting the purpose of the elements of the container tab

Layout-List of elements, is the list of elements defined to create the interface required to get the input from user

background_color– String, set a color name from the allowed Python colors to paint the color to the title of the Tab

Font– String, set the font family for the text on a specific tab

Disabled-Boolean, set the value to enable or disable the tab so that you can allow the user to interact or not in the specific tab

Key/K –String, is the key by which a specific tab will be identified in the code, like it can be used to disable or enable it

Tooltip-String, is the text you wish the user to read in form of a tooltip appearing with a resting mouse arrow

Visible– Boolean,  to make a tab visible or invisible for the user

Element_justification– String, set to “left”,”right” or “center” to justify the elements in the  tab

TabGroup

A tabgroup is a group of tabs collected as a single unit with a single task to be done in multiple tasks. A tab contains only tabs and tabs contain the elements.  Syntax for creating a TabGroup is as following-

TabGroup(layout,[other parameters])

The following are the other important attributes to be passed as arguments to define a TabGroup

Layout-List of tabs, is the list of tabs already created to define the interface for the user

tab_location– String, To define where the tabs must be defined. The options are left, right, top, bottom, lefttop, leftbottom, righttop, rightbottom, bottomleft, bottomright, topleft, topright

title_color– String, set a color name from the allowed Python colors to paint the color to the title text of the TabGroup

tab_background_color– String, choose a name from the allowed Python colors that paints the color to the background of the Tabs in TabGroup

selected_title_color– String, set a color name from the allowed Python colors to give color to the title text of the selected tab in a TabGroup

selected_background_color– String, name from the allowed Python colors that paints the color of the background of the title text of selected tab in a TabGroup

background_color– String, a name from the allowed Python colors that paints the color of the background of a TabGroup

Font– String, set the font family name for the text on a specific TabGroup

border_width– Integer, define the border of the TabGroup

Key/K –String, is the key by which as specific tabgroup will be identified in the code. Using the key you can control appearance or visibility of the TabGroup

Tooltip-String, is the text you wish the user to read in form of a tooltip

Visible– Boolean, to make a tab visible or invisible for the user

Example of Tabbed Interface using Tab and TabGroup

import PySimpleGUI as sg

#define layout
layout1 = [[sg.Text('Name', size=(10,1)),sg.Input('',key='eName')],
           [sg.Text('Date of Birth', size=(10,1)),sg.Input('',key='eDob')],
           [sg.Text('Phone No', size=(10,1)),sg.Input('',key='ePhone')],
           [sg.Text('Email ID', size=(10,1)),sg.Input('',key='eEmail')],
           [sg.Button('Save Personal Details')]]
layout2=[[sg.Text('Highest Qualfication', size=(15,1)),sg.Input('',key='eQual')],
           [sg.Text('Year of Qualifying', size=(15,1)),sg.Input('',key='eYoq')],
           [sg.Text('Grade', size=(15,1)),sg.Input('',key='eGrade')],
           [sg.Text('University/College', size=(15,1)),sg.Input('',key='eQUniv')],
         [sg.Button('Save Education Details')]]
layout3= [[sg.Text('Last Job', size=(10,1)),sg.Input('',key='eLastJ')],
           [sg.Text('From Date', size=(10,1)),sg.Input('',key='eJFdt')],
           [sg.Text('To Date', size=(10,1)),sg.Input('',key='eJTdt')],
           [sg.Text('Company Name', size=(10,1)),sg.Input('',key='eLJcmpy')],
          [sg.Button('Save Experience Details')]]
#Define Layout with Tabs         
tabgrp = [[sg.TabGroup([[sg.Tab('Personal Details', layout1, title_color='Red',border_width =10, background_color='Green',
                                tooltip='Personal details', element_justification= 'center'),
                    sg.Tab('Education', layout2,title_color='Blue',background_color='Yellow'),
                    sg.Tab('Experience', layout3,title_color='Black',background_color='Pink',
                           tooltip='Enter  your Lsst job experience')]], tab_location='centertop',
                       title_color='Red', tab_background_color='Purple',selected_title_color='Green',
                       selected_background_color='Gray', border_width=5), sg.Button('Close')]]  
        
#Define Window
window =sg.Window("Tabs",tabgrp)
#Read  values entered by user
event,values=window.read()
#access all the values and if selected add them to a string
window.close()    

Output

Tabbed Interface
Interface tab 2
Tab 3

One Comment

  1. mike said:

    Hi there

    A few, maybe helpful, comments

    First, thank you for using the coding guidelines published by the PySimpleGUI project. It’s really appreciated as it propagates consistency across the entire internet. The result is that anyone can pick up someone else’s PySimpleGUI program and very quickly understand it.

    These 2 suggestions are not critically important.

    1. The Input element’s default value doesn’t need to be set. The Demo Programs don’t set it anywhere that I know of. Removing the ‘;’ means less code, less to understand, and simpler.
    2. Sizes for Text Elements and Input elements can be a single int. If you’ve got a Text Element that normally has size=(15,1), you can use size=15 now. Or, to make it even shorter, s=15. Same with the input elements.
    3. The new Push element removes the need to put any sizes in some situations. Here is how I changed your first row:
    sg.Text(‘Name’), sg.Push(background_color=’green’), sg.Input(key=’eName’)
    I had to hardcode the background color because the tab’s background color is hard coded. Makes me wonder if I should consider some kind of background color inheritance for container elements.

    Changing your layout 1 to this:
    “`python
    layout1 = [[sg.Text(‘Name’), sg.Push(background_color=’green’), sg.Input(key=’eName’)],
    [sg.Text(‘Date of Birth’), sg.Push(background_color=’green’), sg.Input(key=’eDob’)],
    [sg.Text(‘Phone No’), sg.Push(background_color=’green’), sg.Input(key=’ePhone’)],
    [sg.Text(‘Email ID’), sg.Push(background_color=’green’), sg.Input(key=’eEmail’)],
    [sg.Button(‘Save Personal Details’)]]
    “`
    Produced similar / the same results as the hard coded sizes. Experiment with it and see what you think. Push is really great for centering things. You put a push on each side of the thin(s) you want to center.

    December 1, 2021
    Reply

Leave a Reply

Your email address will not be published.