Have an amazing solution built in RAD Studio? Let us know. Looking for discounts? Visit our Special Offers page!
DelphiTech Partner

What You Need To Know About TabOrder And Cross Platform Apps

What You Need To Know About TabOrder And Cross Platform Apps
What You Need To Know About TabOrder And Cross Platform Apps

Developers often get requests to create forms where it is crucial to pay attention to the position of a cursor after the Tab key is pressed at every point of the program execution. This can be particularly important when developing cross platform apps where following user’s expectations of how user interfaces should behave can help make your app seem professional. It can be important from different perspectives, including user experience, client’s requirements, and important things like functionality. Delphi provides wide opportunities for this thanks to the implementation of the “TabOrder” property.

In this article, we offer you to take a closer look at the TabOrder property in Delphi, to analyze how it’s supported, how it can be used and to see whether there are any limitations.

What is a taborder and what does it do?

The TabOrder property has been a part of Delphi since the release of Delphi 1. In earlier versions of Delphi, TabOrder was a part of the VCL hierarchy while in newer versions it is a part of FMX with small changes in the hierarchy.

When the Tab key is pressed, the focus moves from one control to the next one. Due to the peculiarities of their design, not all controls can receive focus (E.g. TLabel) and not all controls can participate in the tab navigation. Even controls that can receive focus must be explicitly included in the tab sequence.

In VCL, TabOrder is defined in the TWinControl class that normally unites components that are derived ultimately from the TWinControl class and will have the TabOrder property.

Below you can see a typical declaration of the TabOrder property in the TWinControl class.

property TabOrder: TTabOrder read GetTabOrder write SetTabOrder;

TTabOrder is defined as an Enumeration that can contain values from -1 to 32767.

Controls with a TabOrder value that equals -1 will be skipped during the Tab Ordering when the tab key is pressed.

How is taborder different in a cross-platform app?

In FMX, TabOrder is a part of the TControl class and is declared similar to the TWinControl class in VCL as described above.

There is one more property named TabStop which determines whether a control will receive focus or not depending on the TabStop property value. Controls with a TabStop value that is False will not receive focus regardless of their TabOrder value. This principle is similar to the cases when the TabOrder value equals -1.

As per the Embarcadero documentation, the TabOrder property is indicated as the position of the control in its parent’s tab order.

This means that each parent control will have its own list of Tab Orders. An ultimate parent form that has all controls sitting over it also contains a list of tab orders for all controls (except the ones which are children of other controls on the same form).

The control on the parent form which has a TabOrder set to 0 will have focus when the form first appears.

Initially, when you create components at the design time, the tab order is always the order in which controls were added to the form. The first control added to the form has a TabOrder value of 0, the second one’s value equals 1,  the third one has a value of 2, and so on. As we have seen above in the declaration for the TabOrder property, TabOrder is a writable property. So, you can always set a TabOrder value as per your requirements. Since TabOrder is an Integer enumeration, its value should always be somewhere in the range from -1 to 32767.

How to set the taborder for a control in cross platform apps

Each control has a unique TabOrder value within its parent. If you change the TabOrder property value of one of its controls to the same value as another control has, the TabOrder value for all other controls on the same parent form changes accordingly. For example, let’s suppose that a control is the sixth in its tab order. If you change the control’s TabOrder property value to 3 (making the control fourth in the tab order), the control that was originally the fourth in the tab order now becomes the fifth, and the control that was the fifth becomes the sixth.

Assigning a TabOrder value that will be higher than the number of controls contained in the parent control essentially moves the control to the end of the tab order. The control does not take on the assigned value of TabOrder, but instead, it gets the number that will show that the control is the last in the tab order.

To demonstrate the use of TabOrder in FMX, we’ve created an application in Delphi 10.4. It’s not a very good-looking one but you can see it below.

What You Need To Know About TabOrder And Cross Platform Apps Tab Order Form A sample application created to demonstrate different aspects of Tab Order property in Delphi

In the screenshot placed above, you can see the creation of a form with multiple controls on it.

Generally, when we create forms like this we need to ensure the right tab order from the perspective of the user experience.

Creating controls based on Tab Orders requirement

One possible way to do that is to take care of that while creating controls during the design time. In this approach, we need to create controls in such a way that their tab orders will be correct in accordance with the requirement. But it’s not always possible to follow this approach as user interfaces change a lot due to updates that can be introduced to the requirements.

Use of object Inspector to update Tab Orders

Another way to set the correct tab order is to edit a tab order for each control in the object inspector individually and to set the TabOrder property to the one we need.

In the screenshot below, you can see how we have set all TabOrder properties of controls in accordance with our requirements.

Here, the first component has the TabOrder set to 0.

What You Need To Know About TabOrder And Cross Platform Apps First component in the Tab Ordering list has Tab Order set as 0

The panel where buttons A, B, C and D are located has the TabOrder set to 1. It is shown on the screenshot below.

What You Need To Know About TabOrder And Cross Platform Apps Tab Order 1 Subsequent components in Tab Orders list have Tab order 1 2 and so on

As we’ve already explained, each parent control has its own list of tab orders. This is demonstrated in the following screenshot.

What You Need To Know About TabOrder And Cross Platform Apps What You Need To Know About TabOrder And Cross Platform Apps Each parent control on the form maintains its own Tab Orders list

Button A has the TabOrder 0 as it is a child component of the Panel but not the form. The tab orders of other buttons are demonstrated below.

What You Need To Know About TabOrder And Cross Platform Apps Subsequent controls on every parent control have tab orders 1 2 and so on
What You Need To Know About TabOrder And Cross Platform Apps Third control on a parent control have Tab Order 2
What You Need To Know About TabOrder And Cross Platform Apps Fourth control on a parent control have Tab Order 3

So, setting TabOrder properties manually from the object inspector for all controls on the form is one of the ways to ensure the correct flow of focus in the application. But this becomes quite tiresome with the introduction of more and more additional controls on a form.

How to use the Tab Orders dialog box to set tab orders in native and cross platform apps

Embarcadero seems to be well aware of all the complications that we as developers go through while setting up tab orders of controls on a Delphi form.

So, to simplify this task the company provides an option in the IDE to set tab orders of all controls on a parent control in one go. Make a Right Click on your parent component and select the option: “Tab Order…

What You Need To Know About TabOrder And Cross Platform Apps Delphi IDE provides functionality to easily set Tab Orders on form Tab Order Dialog

After clicking on it you will see a dialog box where all child controls of that parent component are listed ordered by their TabOrders.

What You Need To Know About TabOrder And Cross Platform Apps All controls on a parent controls are listed in order if their Tab Order

You can go ahead and move controls up and down as per requirements to set your Tab Order sequence.

The Tab Order dialog feature is very useful in the case of forms with multiple Tabs, panels and numerous components. This will generally help us to achieve almost all requirements that we get in terms of Tab Orders.

Using the third-party CnWizards IDE add-in components to set taborders for native and cross platform apps

Developers are not supposed to restrict their solutions by the functionalities that IDEs offer. Otherwise, they are free to explore, create and extend those functionalities to make their lives easier.

The CnPack community has followed this principle and created components that are useful for the Delphi Developers community and are open source.

One of the components which is of great use is CnWizards. We will not go through the entire functionality that it provides today. Let’s have a look at the one that is relevant in our case, and it is Tab Orders wizard.

Tab Orders wizard is a CnWizards component that provides functionalities necessary to quickly set, modify (automatically and manually & horizontally and vertically), show Tab Orders of components, and to fulfill many other tasks.

This article was written by Embarcadero Tech Partner Softacom. Softacom specialize in all sorts of software development focused on Delphi. Read more about their services on the Softacom website.

Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder.
Design. Code. Compile. Deploy.
Start Free Trial   Upgrade Today

   Free Delphi Community Edition   Free C++Builder Community Edition


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.