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

Be First to Comment

Leave a Reply

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