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 to 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 ability to accept keyboard input) is assigned to the individual widgets in a form. The user can then, for example, enter text in a text- entry field, use the Tab key to move the focus to a combo box, select an entry here, use the Tab key to move to a push button, and press the Spacebar to emulate a mouse click on this button. It is also possible to go backward in the so-called tab chain by using Shift-Tab.

A well-designed tab order is thus instrumental in making a form 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 is. Also, since the widgets in a form should usually be arranged in an order that allows 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 that 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 Designer is done with the tab order tool.

Before we explain how to use the tab order tool, we need to discuss which tab order is the correct one. This is not always obvious. Of course, users should not have to move their 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 that 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 it would be best to ask them, if you can. Or, even better, implement one solution, let them try it, and look over their shoulder. Does the order feel natural to 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 these preliminaries, let's see the tab order tool in action. Open a form, such as one 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 in 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 labeled 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 first in the tab order), then on the 3. The 3 will become the new 2, and the old 2 will move down one place, 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 playing a game for small children, but there is no way around this.

When you are done changing the tab order, press the Esc key to leave tab order mode. There is no way to back 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.


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