Changing The Tab Order

In this section, we will cover a new topic that does not interest mouse enthusiasts at all, but is very important for those who prefer to use the keyboard. Since you as the application developer should cater for both groups of people, it is important that you know about this topic: the tab order.

The tab order is the order in which focus (i.e., the possibility to accept keyboard input) is assigned to the individual widgets in a form. The user can then e.g. enter text in a text entry field, use the Tab key to move the focus to e.g. a combo box, select an entry here, use the Tab key to move to a push button and press the Space bar to emulate a mouse click on this button. It is also possible to go backwards in the so-called tab chain by using Shift-Tab.

A well-designed tab order is thus instrumental for a form that is user-friendly to keyboard users. If the focus is jumping from the top of the dialog to the bottom and back while the tab chain is traversed, the user always has to search for where the focus now is. Also, since the widgets in a form should usually be arranged in an order that allows for a natural sequence of data entry, such an ill-formed tab chain would force the user to either enter the data in a non-natural order or use the mouse again to select another widget — which was exactly what should have been avoided by using the Tab key in the first place.

The default tab order is the one in which the widgets are inserted in the form, and if you design your dialog from top to bottom and in the order which is most natural for data entry, then you do not need to change anything. But rare are the cases where these conditions are really true, often you need to add a widget later, but not necessarily at the bottom and at the end of the logical data entry sequence which would break the whole tab order. So, it is very likely that you need to change the tab order which in Qt GUI Designer is done with the Tab Order tool.

Before we explain how to use the tab order tool some words about which tab order is the correct one. Not always is this an obvious question. Of course, the user should not have to move his eyes up and down, and the order in which the widgets are traversed should be natural with respect to the type of data entered. But imagine you have a number of more or less independent entry fields which are arranged in two columns. Is it better to traverse the fields column by column or row by row? This depends on your users, and if you have the possibility it would be best to ask them, or, even better, implement one solution, let them try it, and look them over the shoulder. Does the order feel natural for them? Is the focus always where they expect it to be? Or do they have to shift their attention at each press of the Tab key?

After the preliminaries, let's see the Tab Order tool in action. Open a form, e.g. one of them you implemented in the tutorial sections, or another one you have available.[1] Now click on the Tab Order icon (see Figure 5-2), select Tools/Tab Order from the menu or simply hit the F4 key. Suddenly, your form will be decorated with blue circles with white numbers in them (see Figure 5-3).

Figure 5-2. The Tab Order icon

Figure 5-3. A Form in Tab Order Mode

To change the tab order, you click on the blue circles in the order you want the tab order to be from now on. The numbers in the circles will change accordingly. This is rather easy and intuitive, but note that you always need to start from 1. If, for example, you want to change the order of the widgets labelled 2 and 3, it is not possible to click on the 3 to make it the 2, it will become the 1 instead. So, to achieve this, you first have to click on the 1 (which will change nothing, because the widget here is already the first in the tab order), then on the 3. The 3 will become the new 2, and the old 2 will move one place down, thus becoming the 3, exactly what you wanted. This also means that in order to change the order of the 11 and the 12, you have to click on the numbers 1 through 10 in their already existing order. This might feel like in a game for small children, but there is no way around this.

If you are done changing the tab order, press the Esc key to leave the tab order mode. There is no way backing out of your changes once you have started to make them short of the general undo feature that you reach via Edit/Undo, Ctrl-Z or the undo icon.

Notes

[1]

If you have the source code for the Qt GUI Designer available, the .ui files included there are very good examples for Designer-created dialogs. Just make sure you make a copy before you start experimenting with them.