Implementing tabs in a UI

User Interface and Graphics
1

I implement a UI with six tabs. Following the existing help material on the Internet and this Forum, I use 6 buttons in a horizontal layout. Each button has a unique panel with UI tools. The active tab has a different colour from those that are not selected.

My question is: How can one efficiently implement the change from one tab to another? At the moment, each time a new tab is selected, the appropriate panel needs to be made visible and all other panels are made invisible. In addition, The colour of the new active tab is changed appropriately and the colour of all other tabs are changed to the inactive colour. This setup is highly inefficient since, upon selecting a new tab, the visibility of 6 panels needs to be set and the colours of six tabs need to be set.

I would like to create the equivalent of a pointer to the last tab that was selected. When a tab is selected, a pointer to it is set. When a different tab is selected, only the panel visibility and tab colour of the tab pointed to by the pointer need change since the setups for all other non-selected tabs have not changed. I have not come accross a way to create pointers in AI2. The declaration of variables using the blocks UI appears not to allow this. If I do set global variable "pointer1" to button1, AI2 accepts the assignment. But then I do not have access to a colour attribute of variable "pointer1".

I would really appreciate any comments.

2

Does this help ?

https://groups.google.com/d/msg/mitappinventortest/K-zAr2X3nio/qzrDox_pBgAJ

1 Like
3

Thank you for your time! I like that example code because of its brevity. But it cycles through all tabs, making their screens invisible and tab colours grey. Then it activates the appropriate screen and changes the colour of the appropriate tab to active. I therefore sets the screen and colour of the selected tab to inactive (as part of the overall de-select of all tabs) and then stes the screen and tab colour of the selected tab. Again, extremely inefficient since the attributes of most tabs are "non-selected" anyway and are again set to "non-selected". I hope my argument makes sense. Actually, only the attributes of the previously-selected tab need to change, NOT those of the other non-selected tabs. There should be a way in AI2 to do this?

4

After posting the above, I realised that, by serializing the tabs in an array and making them individually addressable, one can actually do better and only change the attributes of selected tabs. That should solve my problem. You link is therefore pretty valuable. Thank you!

5

and you gain, at most, 200ms :wink:

6

Using tab components in a stack (list) allows use of a Back button to backtrack previously opened tabs, if you want that as a feature in your app.