Coding Education STEM

Dynamic Listbox GUI demo using tkinter (Python)

I have been tinkering with the GUI library for Python called tkinter. There are some interesting features in it although I’m not thoroughly impressed by the API designs. It feels to me a little clunky and at times, work-in-progress or subject -to-change type of work. Nevertheless, I’m always curious and I had to explore. Specifically, I was appalled by the lack of useful documentation or a complete program on how to use a Listbox! You would think it’d be a simple task with example codes everywhere, right? Yes, there are tons of examples out there, all are copy/paste jobs! They show how to create the listbox in the UI and but don’t adequately show you how to read what’s user-selected, and how to dynamically modify it, and other elementary tasks. Another disturbing trend is the abuse of pack() function specifically for labels. If the UI job is that terrible, why create an app with UI???

With some digging in, exploration/experimentation, I put together here several fundamentals in this demo, namely how to:

  • Create a listbox
  • Add/del item(s) from it dynamically
  • Get list stats at any time after modification
  • Detect what’s chosen by user
  • Attach a vertical scroll bar to the listbox
  • Properly use the label widget
  • How to name your application title, attaching your custom icon, and basic window geometry as bonus.

Explanation

The full source code is below. I will assume general knowledge of Python here as I won’t go line by line for the basic instructions, rather highlight the specifics around Listbox widget of tkinter library.

First, import all from tkinter library. The instance is called root in my example. Using that object we can set title, icon (needs to be a real ico file).

Listbox() method creates a new listbox object. There are many more options in the instantiation parameters you can use…you can find those easily by a simple search.

Wherever you see object.pack() that’s a quick-and-easy way to display a widget on screen or canvas.

We also create a scrollbar widget…it’s a standalone thing until we bind it to the listbox…which makes the listbox scrollable. This is done in lines 16, 17 (creation), and 48, 49 (binding).

My custom functions delit() shows how to detect if something is user-selected (vs. programmatically selected…this is a little hokey as the UI doesn’t update in sync with programmatic selections as you’d expect in Windows and HTML5 coding), how delete an item based on index.

delall() shows how to empty the list.

addtolist() shows how to dynamically populate the listbox from an array or list.

showsel() demonstrates how to show information on number of items in list, and what’s selected or not.

This is all you need to know to write a fully-functional listbox that single selection (for multi-selection, it’s very similar. You’d change selectmode=SINGLE attribute to selectmode=MULTIPLE in Listbox() call. We didn’t have to add selectmode attribute in this code because SINGLE is default, which is what we wanted. If multi-select, you’d just have to read the right number of items in a loop…the selections are returned in tuples.

A few button widgets are added tied to the above functions.

Finally, a label widget is shown as a confirmation/status of what’s going on as buttons are pressed to affect the listbox.

The intial UI will look like this (added arrows to call attention to a few elements):

See it in Action

Full Source Code

 


If you like more info or actual source file to learn/use, contact me via this form  or directly by emailing me at trseattle at outlook dot com. To support this voluntary work, you can also donate via the Home page.

Leave a Reply

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

Back To Top