GUI, listboxes, and screen real state

Hey, how do you guys deal with this ?

Listboxes can contain 1 or many entries… so… how do you deal in the GUI with 95% empty (blank entries) listboxes ?

Do you resize it ? squeeze it ? Do you just waste the screen real state ?

Also, since we are on the subject, are there any resources online to learn how to make my app look better ?

thanks.

Usually the listbox just takes up the space that you assign to it… So if you have a listbox from the top of your window to the bottom of the window, you would just have a 95% empty list box… You can also change it to a pop-up menu if you have a short list of items to pick from (all depends on what you are using the listbox for)…

In terms of making your app “look better”, best to stick with the interface guidelines of each platform… I personally take a look at programs I like and see what about it that I like and perhaps can emulate it in Xojo… There are some sites that you can look at that have mock-ups and design tips (I lost all of bookmarks when I had my old MacBook stolen, so I don’t have anything to link to for you, sorry)…

About the listbox issue… My problem is I don’t know how many entries will the listbox show… a popup menu will not work in my case because I want to display information with columns and such… so I am still stuck with this situation where in some cases I waste a lost of screen real state

Have you tried to insert more Rows to your Listbox than the Window / ListBox can display ?

Sorry Emile, what would be the point of adding more rows than the listbox can display?

https://developer.microsoft.com/en-us/windows/apps/design

https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/OSXHIGuidelines/

Thanks Michel, I’ll take a look at that… Any suggestions on how to deal with semi empty listboxes ?

The Listbox can display all Rows, not all at the same time, but all Rows.
Filling the Listbox shows you there is a vertical scrollbar to let you display not visible Rows due to the Listbox size.
Aren’t you complaining about losing space ?

Shrink the Listbox width / height ?

I do not understand what you mean by semi empty Listboxes. If you have only 5 Rows to display, shrink the Listbox at design time. Same apply for the number of displayed columns (width).

Empty listbox I meant that if I only have 3 rows of data, most of the listbox is just plain blank box…

“shrink the Listbox at design time”… that’s what I’ve been doing until now… but there’s something I don’t like about it…

Will you ever have more than 3 rows ? How many max ?

May have 3 may have 80…

Most apps don’t shrink such lists.

So… maybe I am being silly… But I still don’t know what’s the best way to show my data (in a listbox, in columns) without sometimes wasting a lot of screen space (which remains blank as a consequence of the listbox being bigger than the total amount of rows) …

Sometimes you will waste space. I’ve been surprised at what clients will put in some lists that I figured would contain a dozen or so entries and surprised at how little they use lists that I expected hundreds of entries. Sometimes you just guess.

“Sometimes you will waste space”… coming from an experienced developer, that’s reassuring to me… I was wondering what is (if there actually is) a proper solution…

Michel has already given the primary documents on GUI and I’d suggest you start there.

Next look at popular applications from the business sector your users work in. It’s important your applications work in a similar way so they find it easy to learn and work with. For instance in payment systems in Europe, it is normal to enter the BIC and IBAN numbers one after the others. You’d annoy the hell out of people if say the BIC was on the first line of the form and the IBAN only comes at the end of the form. It can be a challenge to find these numbers on some invoices, so sending them back to find it a second time will not go down well.

Also remember that more is usually not better it’s just more! Most people can deal with about 5 to 7 bits of information at a time, so don’t clutter the screen with a lot of nice to haves!

Thanks James, I’ll keep that in mind…

Depending on your window design, one option might be to to lock controls such that you display the desired number of listbox rows by resizing the window vertically.

I do that for floating windows with ancillary information to minimize the space they take on the screen. A bit funky for a main window, but not hard to do.

BTW i also set a minimum number of rows to be displayed (usually 5) even if some are empty… For example a listbox that is sized to show only one row looks REALLY funky IMO…

I also set a maximum number of rows to show as well, and that can depend on the available screen height.

  • Karen

Theoretically, you could write code to resize and rearrange all the controls on the window so they fit the available data and still look pleasing. That would be a TON of work, though. It’s best to design the window to look good and be intuitively laid out, and just let there be blank space.

Note: if you resized only the listbox, you would still be wasting the same amount of space, but it would just be outside the listbox instead of inside. One might look better than the other depending on your specific layout.

The Listbox … sadly the only non-native Xojo control. And that’s its main failure.
I mean, it did not grow along with the new OS versions (both Windows and macOS). It is ok for creating old looking apps, unless you dig into the Cellpaintevent and customize it to your needs. That said, it is still very limited:
No groups, no layers, cell folding, no animations, no flexible cell heights, no native OS scrolling, no way to incorporate true native controls without a lot of work and tricks, …

I would be great if the non-native listbox became a native control for every desktop platform (NSTableView for macOS, Official Listbox API for Windows, … for Linux). It is possible to do this and still keeping the ‘cross platform’ feature.

It is fair to say, the listbox is the most used control, so it deserves to get some face lift (read: make it on par to modern standards).