learning python » tkinter

Using Menus in Tkinter

selsine — Tue, 28 Mar 2006 03:59:53 +0000

This is a quick post on how to use menu’s in Tkinter, if you are unfamiliar with Tkinter you might want to check out some of my other Tkinter related posts.

We are going to start of with a basic python Tkinter app:

#! /usr/bin/env python
from Tkinter import *

class App(Frame):

	def __init__(self, master):
		
		"""Initialise the base class"""
        	Frame.__init__(self,master)
        
        	"""Set the Window Title"""
        	self.master.title("TkInter Menus")
		self.configure(height=200,width=200)
        	"""Display the main window
        	with a little bit of padding"""
        	self.grid(padx=15, pady=15,sticky=N+S+E+W)

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

What this gives us is basically a plain old blank Tkinter window, not too exciting. The next thing we are going to do is add create our root menu, before going any further you might want to read the excellent information about menu widgets in PythonWare’s Tkinter introduction. You don’t have to but it’s an excellent source of information.

To create the root menu we simply add the following command to our __init__ function:

#Create the Menu base
self.menu = Menu(self)
#Add the Menu
self.master.config(menu=self.menu)

No we are greeted with, well a blank window with a blank menu, the reason for this is because we haven’t added anything to it. What we are going to add to it is a menu, but not just any menu, a menu who’s parent is our menu base:

#Create our Python menu
self.tkMenu = Menu(self.menu)
#Add our Menu to the Base Menu
self.menu.add_cascade(label="TkMenu", menu=self.tkMenu)

Now we’re getting somewhere at least we have a menu now! The next step is to add items to our TkMenu:

#Add items to the menu
self.tkMenu.add_command(label="Simple", command=self.Simple)
self.tkMenu.add_separator()
self.tkMenu.add_command(label="Menu", command=self.Menu)

That’s basically it! Adding the menu item’s is pretty simple, we specify it’s text and then tell it what function to call when the user clicks on the menu item. The two functions that I used don’t really do anything besides show a message box:

def Simple(self):
		tkMessageBox.showinfo("Simple", "Simple")
def Menu(self):
		tkMessageBox.showinfo("Menu", "Menu")

Well that’s it for this post, here is the code in its entirety:

#! /usr/bin/env python
from Tkinter import *

import tkMessageBox

class App(Frame):


	def __init__(self, master):
		
		"""Initialise the base class"""
        	Frame.__init__(self,master)
        
        	"""Set the Window Title"""
        	self.master.title("TkInter Menus")
		self.configure(height=200,width=200)
        	"""Display the main window
        	with a little bit of padding"""
        	self.grid(padx=15, pady=15,sticky=N+S+E+W)       
 
       		#Create the Menu base
        	self.menu = Menu(self)
        	#Add the Menu
        	self.master.config(menu=self.menu)
        	
		#Create our Python menu
		self.tkMenu = Menu(self.menu)
		#Add our Menu to the Base Menu
        	self.menu.add_cascade(label="TkMenu", menu=self.tkMenu)

		#Add items to the menu
		self.tkMenu.add_command(label="Simple", command=self.Simple)
		self.tkMenu.add_separator()
		self.tkMenu.add_command(label="Menu", command=self.Menu)
	
	def Simple(self):
		tkMessageBox.showinfo("Simple", "Simple")
	def Menu(self):
		tkMessageBox.showinfo("Menu", "Menu")        	


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

RSS reader – Part Four – Integrating with the GUI

selsine — Sun, 05 Mar 2006 19:25:50 +0000

So far our RSS reader has been completely command-line, which is functional but not as nice as we’d really like to have it. So what we are going to do is integrate the GUI that I created in my two Tkinter GUI tutorials into our RSS application.

If you look at our GUI application you can see that at this point it actually has the basic look that we’ll want, what it doesn’t have is the functionality attached to to GUI. So the first thing that we are going to do is let the user add an RSS site when the press the Add button. We are going to pop up a dialog and let them enter the name of the RSS site and the address of the RSS feed.

In order to do that we are going to have to create a simple dialog. Fortunately Tkinter has a nice simple dialog interface that makes creating simple pop-up dialogs quite easy. It’s not as robust as you might like, but if you really wanted to do something very complicated you could simply create another window in the same way that we created our main window. Since we don’t need anything fancy we”ll use the Simple dialog.

To start we must import the simple dialog into our program, so the following will have to be added to the top of the code:

import tkSimpleDialog

Now we could create create our dialog class in a totally new python file but since it’s going to be pretty simple I decided to keep all together in our one GUI file. The first step in understanding the simple dialog is to read PythonWare’s introduction to the dialog window it will explain all that you need to know to create a simple dialog.

Basically what you need to do is create a class whose parent is the simple dialog:

class RSSItemDialog(tkSimpleDialog.Dialog):

Then you have to create a body function, this is the function that the tkSimpleDialog assumes will be used to create the body of the dialog. The definition of the body function is as follows:

def body(self, master):

Pretty simple so far right? There are a few other important functions that you need to know about to create a simple dialog, like when to process the data after the Ok button is pressed:

def apply(self):

When the cancel or Ok button is pressed:

def cancel(self, event):
def ok(self, event):

You can read this documentation on sourceforge is you need to know more. For our simple dialog we only care about the body and apply functions. The only other feature that I wanted to add to this dialog was a simple way to set the default values of the RSS name and RSS Feed URL.

That way it would be easy to use this dialog to add and edit RSS sites. To do so you have add and __init__ function to the class, it is defined as:

def __init__(self, parent, title=None, RSSName="", RSSUrl=""):

Where self, parent, and title are the parameters expected by tkSimpleDialog, title being the dialogs title, and RSSName and RSSUrl our new parameters. So here is the RSSDialog’s code in it’s entirety, if you are familiar with tkInter at all it should be pretty simple, if you have any questions ask them and I will try to answer them:

class RSSItemDialog(tkSimpleDialog.Dialog):

    def __init__(self, parent, title=None, RSSName="", RSSUrl=""):
        """Init, override default for default params"""
        self.RSSName = RSSName
        self.RSSUrl = RSSUrl
        self.Result = False #Default = Cancel
        tkSimpleDialog.Dialog.__init__(self, parent,title)
        
    def body(self, master):
        """This is where you create the Body of the dlg"""
 
        lbText = Label(master, text="Name")
        lbText.grid(row=0, padx=5, pady=10,sticky=W)
        lbText = Label(master, text="URL:")
        lbText.grid(row=1, padx=5,sticky=W)

        self.eRSSName = Entry(master)
        self.eRSSName.insert(0,self.RSSName)
        self.eRSSUrl = Entry(master)
        self.eRSSUrl.insert(0,self.RSSUrl)

        self.eRSSName.grid(row=0, column=1)
        self.eRSSUrl.grid(row=1, column=1)
        
        """Return the widget that will get focus"""
        return self.eRSSName

    def apply(self):
        """They have selected OK"""
        self.Result = True
        self.RSSName = (self.eRSSName.get())
        self.RSSUrl = (self.eRSSUrl.get())

Now we need to do a few things, we need to save a list of RSS sites in our GUIFramework class, this will correspond to the list of items in the Listbox. To do so we add the following code to the __init__ function:

self.lstSites = []

This is a list of RSS sites that the user has added to our application. We will also need a new class to contain all of the RSSSite information, the class is pretty simple:

class RSSSite:
    """An RSS Site"""
    def __init__(self, Name="", Url=""):
        self.Name = Name
        self.Url = Url

Then we have to create a function that will correspond to when the Add button is pressed. This dialog will show the RSSItemDialog and then if Ok is press add the resulting RSSSite to the RSS Site Listbox (lbSites) and store the site in the lstSites list. The code to accomplish this is as follows:

def AddRSSItem(self):
    """Add an RSSItem"""
    
    RSSDlg = RSSItemDialog(self.master,"Add new Item")
    if (RSSDlg.Result):
        newSite = RSSSite(RSSDlg.RSSName
                           , RSSDlg.RSSUrl)
        self.lbSites.insert(END, RSSDlg.RSSName)
        self.lbSites.select_clear(0,END)
        self.lbSites.select_set(END)
        self.lstSites.append(newSite)

So we create the new dialog, and then if the user clicks Ok (Result == True) we create a new site. Then we add the sites name to the end of the lbSites listbox, clear any current selection, and then select what we just added. After that we simply add the RSS site to our site list. So the position of the RSS Sites name in the lbSites ListBox corresponds to the RSSSite’s position in the lstSites list. It’s basically like a simple mapping, I would rather store all of the information in the Listbox but I couldn’t find anyway to do that.

We will use that same basic formula to create the EditRSSItem function, but instead of creating a new RSSSite we need to edit the selected RSSSite:

def EditRSSItem(self):
    """Edit an RSSItem"""  
    """Get the Current selection"""
    lstCurrSel = self.lbSites.curselection();
               
    if (len(lstCurrSel)>0):
        selected_site = self.lstSites[int(lstCurrSel[0])]
        RSSDlg = RSSItemDialog(self
                                ,"Edit"
                                , selected_site.Name
                                , selected_site.Url)
        if (RSSDlg.Result):
            """Update the ListBox"""
            self.lbSites.delete(lstCurrSel)
            self.lbSites.insert(lstCurrSel, RSSDlg.RSSName)
            self.lbSites.select_clear(0,END)
            self.lbSites.select_set(lstCurrSel)
            
            """Save the values in the list"""
            self.lstSites[int(lstCurrSel[0])] =  RSSSite(RSSDlg.RSSName
                           , RSSDlg.RSSUrl)

The only confusing code that you might see is this int(lstCurrSel[0]), which is basically converting the first value in the selection list to an integer. We need to do this because list in python expect integers for indices. So we get the current selected index in the ListBox and then use that to get the RSSSite from our list. Then the rest of the process is almost identical to the AddRSSItem function.

Now we need to hook the two functions up to our buttons:

self.btnAdd = Button(self, text="Add", command=self.AddRSSItem)
self.btnEdit = Button(self, text="Edit", command=self.EditRSSItem)

You can probably guess what the next step in the equation is, we need to make it so that our View button displays all of the RSS items in the lbRSSItems ListBox. To do this we are going to need to bring in the RSSGenerator.py code that we created in part three. Instead of taking all the code from that file and then adding it to our current file (which we could do) we are simple going to move that file into the same directory as our current python file (mine is called GUI.py) then we have to import or include the RSSGenerator.py classes:

from RSSGenerator import *

Then we have to create a ViewRSSItems function, which is very similar to our EditRSSItem function except that it will fill the lbRSSItems ListBox with all of the current RSS items available on the feed:

def ViewRSSItems(self):
    """Get the Current selection"""
    lstCurrSel = self.lbSites.curselection();
               
    if (len(lstCurrSel)>0):
        selected_site = self.lstSites[int(lstCurrSel[0])]
        """Empty the ListBox"""
        self.lbRSSItems.delete(0, END)
        rss_reader = RSSReader(selected_site.Url)
        for rss_item in rss_reader.GetItems():
            if (rss_item):
                self.lbRSSItems.insert(END,rss_item.title)
                self.lstItems.append(rss_item)

So we get the current selection, then we create our RSSReader based upon the RSSSites Url. Then we loop through the RSSItems adding each to our ListBox and to our list of the items (lstItems) that we have added in out GUIFramework’s __init__ function:

self.lstItems = []

As you can see the RSS Reader is actually starting to take shape, now all we have to do is show the RSS Items description in the text widget when we click the Set Text button. Given all the ListBox processing that we have done recently the way that this works should come as no surprise:

def SetStoryText(self):
    """Set the Story text, called form the btnSetText""" 
    """Get the Current selection"""
    lstCurrSel = self.lbRSSItems.curselection();
               
    if (len(lstCurrSel)>0):
        rss_item = self.lstItems[int(lstCurrSel[0])]
        """Set the Text Widgets text"""
        self.txtItem.config(state=NORMAL)
        self.txtItem.delete(1.0,END)
        self.txtItem.insert(INSERT, rss_item.description + "\r\n\r\n")
        self.txtItem.insert(INSERT, rss_item.link, "a")
        self.txtItem.config(state=DISABLED)

Whew that’s a lot of code this time, but none of it is really that new or that difficult if you have been following along with the RSS Reader so far. You might notice that I have not gone into great detail describing all of the code. The reason for that is because for the most part I’ve already gone over the code in detail in a previous post, or the code is sufficiently similar to code I have gone over that I don’t think that it needs a great deal of description. But if you have any questions about any of the code that I have shown above feel free to ask a question and I will be happy to explain it in more detail.

The next step in the RSS Read will be to save and load the RSSSites into a file so that we don’t have to waste our time typing them in every time we start the program, but I’ll leave that for another day.

You can download all the code used in this post here: RSSPart4.zip

Creating a GUI in Python using Tkinter – Part 2

selsine — Sun, 19 Feb 2006 22:18:40 +0000

This post is going to build off of Creating a GUI in Python using Tkinter which introduces the basic elements needed to create a GUI using TKinter. This post will take that introduction a bit further and build a more complex GUI application and use some more widgets.

The GUI that we are going to start creating is the GUI that we will eventually use for the RSS reader that I am creating.

Not much having to do with the RSS reader will happen in this post since we will just be creating the GUI shell, but it will help to explain some of the variable names.

We are going to start off with a simple shell that will hopefully resemble the following layout. We will have RSS sites on the left, then the selected sites RSS story titles on the right, and finally the selected stories text on the bottom.

To create this GUI we will be using the following widgets:

The first thing that we are going to do is start off with a blank GUIFramework based on what we did on part one:

#! /usr/bin/env python
from Tkinter import *
import tkMessageBox

class GUIFramework(Frame):
    """This is the GUI"""
    
    def __init__(self,master=None):
        """Initialize yourself"""
        
        """Initialise the base class"""
        Frame.__init__(self,master)
        
        """Set the Window Title"""
        self.master.title("RSS Reader - Eventually")
        """Display the main window
        with a little bit of padding"""
        self.grid(padx=15, pady=15,sticky=N+S+E+W)
        self.CreateWidgets()
       
    def CreateWidgets(self):
        """Create all the widgets that we need"""
                
if __name__ == "__main__":
    guiFrame = GUIFramework()
    guiFrame.mainloop()

Running this code will simply create a blank window with nothing in it, not very interesting. So what we need to do is add our first ListBox. We’ll also add a label to our listbox so that we know what it is:

"""Create the Text"""
self.lbRSSSiteText = Label(self, text="Select Site:")
self.lbRSSSiteText.grid(row=0, column=0, sticky=W)

"""Create the ListBox"""
self.lbSites = Listbox(self, selectmode=BROWSE
                        , relief=SUNKEN)
self.lbSites.grid(row=1, column=0)

You’ll notice that we are setting a few properties for the ListBox and Label widgets. The first is that we are making the Label widget sticky to the West (sticky=W) this simply aligns the order to the left of the ListBox. The other settings are applied to the ListBox and they are: selectmode=BROWSE and relief=SUNKEN .

The selectmode option controls how the user will be able to interact with the ListBox, there are for available options:

SINGLE – The user can select one item
BROWSE – Just like single, except the user can switch the selection using the mouse
MULTIPLE – Multiple items can be selected. The user can select an item by simply clicking on it.
EXTENDED – Just like multiple, except that in order to select multiple items, the used must use the SHIFT or CTRL button. If they simply select items using the mouse this setting will function like the BROWSE setting

The other setting that we apply is the relief=SUNKEN , this gives the listbox a sunken border, I just think that it looks nice.

Now in order to interact with the RSS Site ListBox we are going to let the user Add, Edit, Remove, and View the sites. We are going to use buttons in order to let the user perform these tasks. The code to create the buttons is pretty simple:

"""Create the Add, Remove, Edit, and View Buttons"""
self.btnAdd = Button(self, text="Add")
self.btnAdd.grid(column=0, row=2, stick=E, pady=5)
self.btnRemove = Button(self, text="Remove")
self.btnRemove.grid(column=1, row=2, stick=E, pady=5)
self.btnEdit = Button(self, text="Edit")
self.btnEdit.grid(column=2, row=2, stick=E, pady=5)
self.btnView = Button(self, text="View")
self.btnView.grid(column=3, row=2, stick=E, pady=5)

We also have to make a few changes to the way that the ListBox displays itself:

self.lbSites.grid(row=1, column=0, columnspan=4, sticky=N+W+S+E)

The columnspan=4 setting just makes the ListBox span 4 columns so that it is in line with the four buttons that will interact with it. The sticky=N+W+S+E makes the ListBox fill the entire grid container instead of being centered in the middle.

I also added a little bit code to populate the ListBox with 40 numbers so that we can play with it a bit more:

"""Just fill up the listbox with some numbers"""
for i in range(40):
    self.lbSites.insert(END, i)

Now that’s starting to look a little better but why don’t we have any scrollbars on the ListBox? We can scroll it but there are no scroll-bars? The interesting thing about TKinter is that widgets like the ListBox are scrollable by default, but they do not display a scrollbar unless you create one yourself. So in order to have a fully functioning GUI application we are going to start having to add some ScrollBar widgets.

So right before we create the ListBox we need to create the scrollbars that we will use, this code is pretty self explanatory, the only interesting portion is that we do not make the scrollbars members of self. The reason for that is that for right now we won’t be interacting with them at all:

scrollbarV = Scrollbar(self, orient=VERTICAL)
scrollbarH = Scrollbar(self, orient=HORIZONTAL)

Then when we create the ListBox we need to tell it that scrollbarV and scrollbarH will be used to control the scrolling:

self.lbSites = Listbox(self, selectmode=BROWSE
                        , yscrollcommand=scrollbarV.set
                        , xscrollcommand=scrollbarH.set
                        , relief=SUNKEN)

The yscrollcommand=scrollbarV.set connects the yscrollcommand callback (fired when the ListBox is scrolled in the vertical direction) with the scrollbarV.set method. So when we scroll the ListBox, the scrollbar will follow.

The next thing we need to do is make the connection in the reverse, make it so that when the scrollbar is scrolled the ListBox follows. We also have to display the ScrollBars in the correct grid positions, namely the positions directly to the right and bottom of the ListBox. Doing this means that we will also have to move the Buttons down one more row to row 3. We also have to make the horizontal ScrollBar span 4 columns so that it is always aligned with the ListBox.

scrollbarV.grid(row=1, column=4, sticky=N+S)
scrollbarV.config(command=self.lbSites.yview)
scrollbarH.grid(row=2, column=0, columnspan=4, sticky=E+W)
scrollbarH.config(command=self.lbSites.xview)

Now we have two functioning scrollbars, the horizontal one doesn’t do much since none of the numbers are long enough, but you can see that the vertical one is working properly.

So the next thing to do is add the next ListBox, I won’t go over this code since it’s basically a duplication of the above code. The only thing I will point out is that when you look at the final code you’ll see that I added a Frame widget between the two ListBox Widgets, this is to simple add some space between them. I also added a Read button under the second ListBox.

Now we need to add the Text Widget below the buttons, the code should feel familiar to you now that you are used to adding scrollbars to items, the only difference are a few of the text settings:

"""Create the Text Widget"""
scrollbarV = Scrollbar(self, orient=VERTICAL)
scrollbarH = Scrollbar(self, orient=HORIZONTAL)
self.txtItem = Text(self, wrap=WORD
                     , yscrollcommand=scrollbarV.set
                     , xscrollcommand=scrollbarH.set
                     , relief=SUNKEN
                     , takefocus=0
                     , borderwidth=1
                     , state=NORMAL
                     , cursor="arrow")                    
self.txtItem.grid(row=5, column=0
                   , columnspan=7, sticky=N+W+S+E)
"""Show the scrollbars and attach them"""
scrollbarV.grid(row=5, column=7, sticky=N+S)
scrollbarV.config(command=self.txtItem.yview)
scrollbarH.grid(row=6, column=0, columnspan=7, sticky=E+W)
scrollbarH.config(command=self.txtItem.xview)

You’ll notice that we set the Text widgets cursor to be an arrow, we do this because the Text isn’t supposed to be editable, it’s read-only. If we don’t set the cursor the Text widget will use the default “i-beam” or text-editor cursor.

The takefocus=0 settings tells the Text widget not to take the focus, or allow the user to tab to the Text widget.

So that’s about it for this this GUI, it’s pretty simple when you look at each part one by one, but creating a large GUI does get to be a bit complicated when having to pay attention to the grid positions and scrollbars. Here is the full code of the GUI, you’ll notice that there are a few additions to the code, like the resizing and some functions, but I’ll let you try to figure out how those work. If you have any questions or comments feel free to post them.

Download the code as a text file here.

#! /usr/bin/env python
from Tkinter import *
import tkMessageBox

class GUIFramework(Frame):
    """This is the GUI"""
    
    def __init__(self,master=None):
        """Initialize yourself"""
        
        """Initialise the base class"""
        Frame.__init__(self,master)
        
        """Set the Window Title"""
        self.master.title("RSS Reader - Eventually")
        top=self.winfo_toplevel()
        """Display the main window"
        with a little bit of padding"""
        self.grid(padx=15, pady=15,sticky=N+S+E+W)
        self.InitResizing()
        self.CreateWidgets()
        
    def InitResizing(self):
        """Initialize the Resizing of the Window"""
        top=self.winfo_toplevel()
        top.rowconfigure(0, weight=1)
        top.columnconfigure(0, weight=1)
        top.columnconfigure(0, weight=1)
        self.rowconfigure(1, weight=1)
        self.columnconfigure(0, weight=1)
        self.columnconfigure(6, weight=1)
       
    def CreateWidgets(self):
        """Create all the widgests that we need"""
                       
        """Create the Text"""
        self.lbRSSSiteText = Label(self, text="Select Site:")
        self.lbRSSSiteText.grid(row=0, column=0, sticky=W)
        self.lbRSSItemText = Label(self, text="Select RSS Item:")
        self.lbRSSItemText.grid(row=0, column=6, sticky=W)
        
        """Create the First ListBox"""
        scrollbarV = Scrollbar(self, orient=VERTICAL)
        scrollbarH = Scrollbar(self, orient=HORIZONTAL)
        
        self.lbSites = Listbox(self, selectmode=BROWSE
                                , yscrollcommand=scrollbarV.set
                                , xscrollcommand=scrollbarH.set
                                , relief=SUNKEN)
        self.lbSites.grid(row=1, column=0, columnspan=4, sticky=N+W+S+E)
        """Show the scrollbars and attatch them"""
        scrollbarV.grid(row=1, column=4, sticky=N+S)
        scrollbarV.config(command=self.lbSites.yview)
        scrollbarH.grid(row=2, column=0, columnspan=4, sticky=E+W)
        scrollbarH.config(command=self.lbSites.xview)
        """Set the command"""
        self.lbSites.bind("", self.DblCLickSites)
        
        """Create the Add, Remove, Edit, and View Buttons"""
        self.btnAdd = Button(self, text="Add", command=self.Display)
        self.btnAdd.grid(column=0, row=3, stick=E, pady=5)
        self.btnRemove = Button(self, text="Remove", command=self.Display)
        self.btnRemove.grid(column=1, row=3, stick=E, pady=5)
        self.btnEdit = Button(self, text="Edit", command=self.Display)
        self.btnEdit.grid(column=2, row=3, stick=E, pady=5)
        self.btnView = Button(self, text="View", command=self.Display)
        self.btnView.grid(column=3, row=3, stick=E, pady=5)
        
        """Create a frame for space between the two items"""
        spaceframe = Frame(self, width=15)
        spaceframe.grid(row=3,column=5)
        
        """Create the Second ListBox"""
        scrollbarV = Scrollbar(self, orient=VERTICAL)
        scrollbarH = Scrollbar(self, orient=HORIZONTAL)
        
        self.lbRSSItems = Listbox(self, selectmode=BROWSE
                                , yscrollcommand=scrollbarV.set
                                , xscrollcommand=scrollbarH.set
                                , relief=SUNKEN)
        self.lbRSSItems.grid(row=1, column=6, sticky=N+W+S+E)
        """Show the scrollbars and attatch them"""
        scrollbarV.grid(row=1, column=7, sticky=N+S)
        scrollbarV.config(command=self.lbRSSItems.yview)
        scrollbarH.grid(row=2, column=6, sticky=E+W)
        scrollbarH.config(command=self.lbRSSItems.xview)
        
        """Create the Frame for space between the ListBoxes and
        the Text"""
        spaceframe = Frame(self, height=5)
        spaceframe.grid(row=4,column=1)
        
        """Create the Text Widget"""
        scrollbarV = Scrollbar(self, orient=VERTICAL)
        scrollbarH = Scrollbar(self, orient=HORIZONTAL)
        self.txtItem = Text(self, wrap=WORD
                             , yscrollcommand=scrollbarV.set
                             , xscrollcommand=scrollbarH.set
                             , relief=SUNKEN
                             , takefocus=0
                             , borderwidth=1
                             , state=NORMAL
                             , cursor="arrow")
        self.txtItem.grid(row=5, column=0
                           , columnspan=7, sticky=N+W+S+E)
        """Show the scrollbars and attatch them"""
        scrollbarV.grid(row=5, column=7, sticky=N+S)
        scrollbarV.config(command=self.txtItem.yview)
        scrollbarH.grid(row=6, column=0, columnspan=7, sticky=E+W)
        scrollbarH.config(command=self.txtItem.xview)
        
        self.txtItem.tag_config("a", foreground="blue", underline=1)
        self.txtItem.tag_bind("a", "", self.show_hand_cursor)
        self.txtItem.tag_bind("a", "", self.show_arrow_cursor)
        self.txtItem.tag_bind("a", '

Links that helped me get through this post:

If you like this post remember to digg it.

Creating a GUI in Python using Tkinter

selsine — Wed, 08 Feb 2006 05:42:53 +0000

Up until now we’ve focused on python applications that only run in the command line. For a lot of tasks this is great, but in order to be really impressive we’re going to want to create a GUI for some of our python applications.

There are a lot of python GUI toolkits out there, but for our first application we are going to use Tkinter, which is considered somewhat of a standard right now and is installed when pyhon is installed. Another nice thing about the Tkinter GUI is that it is cross platform and offers a native look and feel on *nix, Windows, and OS X.

Tkinter Example One

So lets start off with a simply “Hello World” GUI app:

#! /usr/bin/env python
from Tkinter import *

class GUIFramework(Frame):
    """This is the GUI"""
    
    def __init__(self,master=None):
        """Initialize"""
        
        """Initialize the base class"""
        Frame.__init__(self,master)
        
        """Display the main window"""
        self.grid()
        
        """Create the Text"""
        self.HelloLabel = Label(master, text="Hello World!")
        self.HelloLabel.grid()
                
if __name__ == "__main__":
    guiFrame = GUIFramework()
    guiFrame.mainloop()

Running this on OS X results in the following:

And running it in Windows Xp gives you:

As you can see the code used to create the GUI is pretty simple and easy to understand, but it is actually more complicated then need be because it uses classes. But since I’ll be using classes whenever building a GUI I thought that this was the best starting point. We start off by importing the Tkinter library into our program using this following:

from Tkinter import *

After that we create a class called GUIFramework, which is the class that will be used to great the GUI elements in Tkinter and uses the Tkinter frame class as its base. For now all the work that we do is done in the __init__ function.

There we first initialize the base class (which will initialize Tkinter) and then tell ourselves to be visible:

"""Initialise the base class"""
Frame.__init__(self,master)

"""Display the main window"""
self.grid()

To display ourselves we use the grid geometry manager, the grid geometry manager is a straight forward way to display widgets and position them. Since we have no other widgets in this example the defaults are fine, take a look at example two for for information on widget placement using the grid function.

Next is the process of creating the HelloWorld label widget, which is a member of the GUIFramework class, and setting it to be visible. It’s a good idea to make your widgets members of the class in case you need to access them later, but if you’re sure that you’ll never have to access them later, you can just create them locally.

self.HelloLabel = Label(master, text="Hello World!")
self.HelloLabel.grid()

After that all the other processing is done in the “main” section of our code where we initialize our class and tell it to enter the “mainloop”. The “mainloop” is basically the application responding to events:

if __name__ == "__main__":
    guiFrame = GUIFramework()
    guiFrame.mainloop()

Tkinter Example Two

Next I’ll show you a more complicated example, I won’t go into specifics with this one since it’s still pretty simple. But if you have any questions about the following code feel free to ask via a comment.

#! /usr/bin/env python
from Tkinter import *
import tkMessageBox

class GUIFramework(Frame):
    """This is the GUI"""
    
    def __init__(self,master=None):
        """Initialize yourself"""
        
        """Initialise the base class"""
        Frame.__init__(self,master)
        
        """Set the Window Title"""
        self.master.title("Type Some Text")
        
        """Display the main window"
        with a little bit of padding"""
        self.grid(padx=10,pady=10)
        self.CreateWidgets()
       
    def CreateWidgets(self):
        """Create all the widgets that we need"""
                
        """Create the Text"""
        self.lbText = Label(self, text="Enter Text:")
        self.lbText.grid(row=0, column=0)
        
        """Create the Entry, set it to be a bit wider"""
        self.enText = Entry(self)
        self.enText.grid(row=0, column=1, columnspan=3)
        
        """Create the Button, set the text and the 
        command that will be called when the button is clicked"""
        self.btnDisplay = Button(self, text="Display!", command=self.Display)
        self.btnDisplay.grid(row=0, column=4)
        
    def Display(self):
        """Called when btnDisplay is clicked, displays the contents of self.enText"""
        tkMessageBox.showinfo("Text", "You typed: %s" % self.enText.get())    
                
if __name__ == "__main__":
    guiFrame = GUIFramework()
    guiFrame.mainloop()

This creates the following window:

That shows this dialog when the button is pressed:

Links that helped me get through this post:

If you like this post remember to digg it.