Advanced Resizable UIs: Multicolumn Listboxes

[GrahamB]

In my previous post, "Resizable UI’s in LabVIEW", I went through the basics of creating a flexible and professional user interface that scales to any screen resolution. If you’re new to creating resizable user interfaces in LabVIEW, I recommend you start with that post.

Introduction

Equipped with an understanding of splitter bars, panes, and fitting controls/indicators it’s easy to imagine how we can create nice looking UIs. So off I go, creating a UI for a new configuration utility. I drop a multicolumn listbox down in my largest pane, fit it to the pane, and set up my columns exactly as I want them.

Looks good so far – I’ve followed all of the rules about making my UI resize, so let’s maximize this window and watch the resizing glory.

Not quite what I had in mind. I only need 3 columns, now I have 10. Your natural LabVIEW instinct will tell you start wading through the various property node options but unfortunately you won’t find a quick fix here. This requires code.

When creating complex applications, you will quickly find that the items you want to scale easily, rarely cooperate. In my previous post, I mentioned a few items that require a little more effort and some code to make them work.

Some of these items include:

• Multicolumn Listboxes
• XControls
• Subpanels

In this post, I will only be focusing on Multicolumn listboxes but will be covering XControls and Subpanels in the future.

Multicolumn Listbox Resizing

Multicolumn listboxes tend to resize best vertically. The problem (as demonstrated) is when we expand horizontally we end up with extra columns or fewer columns. The extra columns make the UI appear cluttered and difficult to read. They tend to make your UI look like you’re working in Excel, and the higher the screen resolution – the worse it gets. Now the question is what behavior do I want my multicolumn listbox to take? Here are a few of the most commonly used options:

1. I want the columns to grow proportionally and distribute across the screen.
2. I want the columns to hold their width, but have my final column extend to infinity to reduce the amount of clutter.

To capture a screen resize event, we can use the event structure and the event for “Panel Resize”. The three properties we can make use of in this event are; VIRef, OldBnds and NewBnds corresponding to the VI reference, the previous screen size, and the new screen size respectively. To complete the process, we need to create a code module to do some multicolumn listbox resizing.

Proportional Distribution

This is the most commonly used type of multicolumn listbox resizing. We can determine the percentage of the listbox that each column consumes and maintain the proportions as the screen grows or shrinks. This is illustrated below:

The downside to this method is that data becomes sparse on a large screen resolution. For multicolumn listboxes, which do not occupy the entire screen, proportional distribution is the ideal method. For large listboxes that occupy the entire screen, we may be better off using last column only growth to maintain the look and feel of the application.

Last Column Only

This is another common method for resizing, where only the final column grows. This allows you to maintain the defined column layout, while reducing the clutter introduced by the extra columns typically generated by growing the window.

This method is nice for listboxes which occupy the entire screen. It maintains your layout and does not space data out or alter the appearance of the application.This is all great, but how is it done? Let’s take a look.

The Code

In order to make this function reusable for many listboxes, we will create a generic subVI. This subVI will be dropped into our event structure for screen resize events.

The code accepts a VI reference in order to Defer Panel updates; a listbox reference; the old panel size; the new panel size; and a resizing mode.

For the proportional method on the block diagram, we perform the following steps:

1. Determine how many pixels the screen has grown by.
2. Determine if the new bounds are different from the old bounds, if not don’t do anything.
3. Defer Panel Updates so that the columns resizing happens faster.
4. Count the number of columns and filter blanks.
5. Determine the width of each column.
6. Find the original proportion of the column in relation to the previous screen size.
7. Adjust each column width proportion multiplied by the new screen size.
8. Turn off Defer Panel Updates.

For the last only method on the block diagram, we perform the following steps:

1. Determine how many pixels the screen has grown by.
2. Determine if the new bounds are different from the old bounds, if not don’t do anything.
3. Defer Panel Updates so that the columns resizing happens faster.
4. Count the number of columns and filter blanks.
5. Determine the width of the last column.
6. Find the original proportion of the last column in relation to the previous screen size.
7. Adjust the last column width proportion multiplied by the new screen size.
8. Turn off Defer Panel Updates.

Conclusions and Next Steps

These are two simple methods for resizing multicolumn listboxes. You could always adapt your own methods for more complex resizing, such as making specific columns grow and others remain fixed. Using my last post "Resizable UI’s in LabVIEW" and the code presented in this post, more complex resizable user interfaces are now possible. In the future, I will give instructions on creating resizable subpanels and XControls which takes resizing all the way to complex architectures and reusable plugins.

Graham Beauregard

http://www.prolucid.ca