Common constructs of GUI programs

In this post we will go over some of the basic and common constructs that you come across while building GUI programs almost in any language or library. The following are some of the common items that I can think of

  1. Loop
  2. Widgets
  3. Events
  4. Layout

Loop

Loop or Mainloop as it is called in some GUI libraries is one of the most common element of all GUI programs. In a GUI program this is usually called at the at end of constructing the all the items (widgets) in program. When you call the mainloop, it takes over the control and keeps running until you terminate the GUI.

The main purpose of loop is to poll for user input (mouse and keyboard actions) and fire events which your program can handle in asynchronous way. Following diagram explains loop in simple terms.

GUI main loop
GUI main loop

As you can see from the above diagram the GUI loop keeps polling for user input. If there is any event via mouse or keyboard or other input devices (joysticks, game pads ) when input is available loop gives control to callback functions that are bound to input events.  Loop keeps running until the main window (also called parent window) exits. Once the main window is destroyed the loop exits and gives control back to your code. In most cases end of the mainloop would be end of many GUI programs.

Widgets

GUIs are collection of widgets. Example of widgets are button, scroll bar, check box etc. Widget is an element of user interaction. Their main purpose is to display or collect information from user. A label displays text to user. A text input widget collects text from user. One way to decide the richness of GUI tool kits is to look at how many widgets they offer. The more widgets a library offers you the better it is for you. So, that you don’t have to write extra code to implement custom widgets.  Widgets usually are sub classes of a Widget parent class. So, most of the widgets inherit properties of widget class in respective GUI libraries. In some GUI libraries main window also has properties of a widget. gui window

Events

When ever user presses a button or enters text using keyboard those actions generate events in GUI libraries. GUI libraries provide a way to hook into these events so that your program can respond to user actions. The event hooking/binding style differs from library to library. But, the aim is same across all libs, that is to provide programmer a way to respond to user input.

Layout

Layout facilities provided by GUI libs helps to make programmer’s life easier when placing widgets in main window. Layouts are simple rules you use to convey to GUI library on how you would like your widgets to be laid out on screen. Instead of manually placing widgets on screen by specifying distance units and placement pixel positions, once you construct your widgets you hand them over to certain layout scheme to let GUI library handle the placement. The benefits are, layouts will take care of expansions, size proportions and other nitty-gritty detail of placing your widgets in orderly way.

The layout features provided by libraries vary greatly. You often have to pick the one that suits your needs. These layouts can be mixed in order to achieve the placement and look you want.

 

Desktop GUI libraries in Python

If you want to build desktop GUIs, Python is right candidate to pick. It offers you plethora of GUI libraries compared to any other language. So, there are high number of chances that, some library in there fits your bill which is readily available, in whole of lot of GUI libs python has to offer. Following is a list of some of the popular GUI libs

  1. Tkinter 
  2. wxPython
  3. PyQt / PySide
  4. PyGTK

(Complete list of available libraries can be found on python wiki page.)

All of the above mentioned ones are cross-platform capable libraries. So, that you don’t have to rewrite any part of your GUI and gladly run it across all the main contenders Windows, Linux and Mac . There are other platform specific ones like win32gui , WinForms using IronPython. But, it helps to stick with cross-platform capable libs to avoid extra work when building your app for other platforms.

Over the next few posts I’ll present you with examples of simple hello world programs using above mentioned list of libraries.

Usually the best way to build your GUI application is to write compute intensive part (if there is any ) of your business logic in low level languages like C/C++ and then write GUI code using the above mentioned Python libs. This saves you lot of time and energy. As, compared to low level languages, in Python you get the benefit of automatic memory management and you only have to write less number of lines of code.

Desktop GUIs are on decline with the advent of web. More and more programs are being coded as services using web technologies ( HTML, CSS, JavaScript ). It has gotten so far, now UI/GUI by default means web UI.  Each passing day web technologies are filling up  the gap in terms of number of features (Dynamic content, Media capabilities ) . But, desktop GUIs still have their place in certain areas and there are numerous programs already written using desktop GUI technologies that needs to be managed.

How to blink browser tab

Have you ever wished to blink browser tab on certain activity to get user’s attention?

Here is a scenario: Suppose there is a chat application installed on your website. Now what if the user of your website has multiple tabs opened in his browser and there is an incoming message in your website? How will you make your user realize that there is an unread message? Of course you can play some music, but it has some limitations. For instance, user may be listening to some songs or speakers could be muted. If none of them is applicable then also he has to go through each and every single tab in his browser and find out the one which is playing that music.

Visual blinking is the best way to get user’s attention and the easiest way to achieve that is to keep blinking the title of your website until user returns.

Here’s a JavaScript function to do so:

Just execute the function like below and browser tab will start blinking: