UI Interest Group Documents
This is a little article that I've been meaning to write for a while but I've never gotten around to it until now. I think it's fairly unique as I haven't seen anything quite like it before and I see a lot of posts (here and here) and articles about not using tab controls for UIs (or at least...not using pages on a tab control) or how to add/remove tabs at run-time.
I'm not going to post any sample code here as it's not stable/contained enough for a demo project. I am, however, going to discuss the principles used so you can use it as a starting point to create your own implementation. I hope it acts as inspiration for your own dynamic/reusable UIs!
The basic idea here is to have a series of dynamic tabs at the top of your application and then a large centre panel which displays the information contained within those tabs. If you've used any modern browser or (non-LabVIEW) IDE then you'll know what I'm talking about. Bonus points for being able to undock/dock those tabs into separate windows!
In the screenshot you can see a number of tabs and an undocked window. Closing the panel of the window docks it back into the main tab UI. Double clicking the tab undocks it.
In LabVIEW, this is normally achieved using a subpanel and some of page 'selector'. I've seen people use buttons, listboxes etc. for this but rarely tab controls because of some deficiencies of the LabVIEW tab control - the main one being that you can't dynamically add/remove tabs at runtime and each 'page' of the tab control has it's own 'pane' (a loose definition) and I don't even know what happens if you try to resize a tab control!
The closest thing I've seen that can do this is the SAPHIR XTab (https://decibel.ni.com/content/docs/DOC-21668) so you should probably check that out as well.
However...
You can create the same effect using a native tab control, a splitter and a subpanel (I use system controls as they make my application look less LabVIEW-y and more like actual Windows applications):
To be able to do this - you need to have a good knowledge of loading VIs into subpanels (and the caveats around that like making sure the front panel is closed/hidden before inserting).
What I do is create 10 (as the theoretical 'maximum' number of pages) tabs on a tab control and hide them if there is no UI associated with the tab. I use the tab caption as the label for the UI (with IndependentLabel set to True). When the UI VIs run, they register with the Tab UI via a User Event with their name and VI reference. When the UI is registered, it finds an unused Tab page, sets the caption and makes the tab visible. When the user selects a tab, I insert the VI into the subpanel.
To get the tabs to resize - I 'size all tabs to largest tab' and then set the PaneWidth property when the pane containing the tab resizes. For some reason, I can't quite get this to initialise properly (the tab doesn't resize to fit until you resize it).
When undocking a tab, I remove it from the subpanel and open it's front panel. To re-dock the tab I just re-register it with the Tab UI.
I've even added some neat little extra features like:
- Having the tab positions / dock status saved to a preferences file so they are saved on exit and loaded on launch
- Ability to customise the run-time menu - each dynamic tab can register it's own run-time menu items
- A number of pre-defined tabs can be specified to set the order of the tabs
- A loading placeholder - displays a cycling loading carousel for the tab until it has registered with the Tab UI
- Centring the UI VI in the subpanel when it resizes
Not only does this create a great UX for the users of my software, but because all of the handling of the UI elements is handled by the Tab UI VI, it makes it very easy for me to develop and add new UI tabs to my application. I only have to drop a single VI onto the UI VI to register it with the Tab UI and everything else is handled from within the Tab UI.
I hope this has been of interest and inspires you to go out and create your own dynamic (ok, 'psuedo-dynamic' as there is a limit to the number of tabs you can have) resizeable tab-based user interfaces!
Feel free to leave any comments or questions below!
