GUI - Which controls are these?

Hi Everyone, I’m new to XoJo. I’m an experienced VB programmer. I’m finding the language pretty easy but I find the controls limited. I’ve seen the forums that say you can make your own controls and I’ve come across places like MBS, Jeremie Leroy, Eighur and SimCar Software so I can see that there’s some decent options out there.

I’ve also been looking around for the nicest looking XoJo apps I can find - mainly to see what’s possible with GUI development in XoJo.

I came across SQLiteManager & CubeSQL - both XoJo apps and they look really nice.

I particularly like the “bottom toolbar” and the nice window splitter with selection handles shown in the screen shots.

Does anyone know which 3rd party controls this app might have used or if they did it with XoJo natively?

https://www.dropbox.com/s/c09azggb3vb8j0x/one.png?dl=0
https://www.dropbox.com/s/6923y8k5ifw8ks7/two.png?dl=0
https://www.dropbox.com/s/m1xej8ev2y0r73y/threee.png?dl=0

Thanks for any advice…

Rob

listbox with custom painting of the text.

listbox (again) with custom painting.

The handle on the window splitter can be a canvas where you draw three lines in its paint event handler.

Or it is the Einhugur window splitter plugin, where you can define such handle.

All of them are Custom controls based on a Canvas

You can do a lot with a customized ListBox. Several examples are described here:

https://documentation.xojo.com/topics/user_interface/desktop/desktop_controls/list_box.html

The bottom toolbar thing is often called an ActionBar. I believe GraffitiSuite includes one:

ListBox is a really versatile control and most Xojo devs use it extensively.

Server Ranger 2 uses it on the left hand side, for the list of servers it is monitoring, as well as for the logs on the right hand side. It’s also Dark Mode compatible.

There are more screenshots at https://www.serverranger.com for it and for File Toolkit, another app that uses Listboxes. I hope they give you some ideas of what can be done with the built-in Xojo ListBox.

@Gavin Smith Hey Gavin. All the left pane is one ordinary listbox? If then, how do you get to draw some rows with different height than others ?

Just an ordinary ListBox. They’re all the same height. Each row has a dark header and a light body.

For example, offline servers are drawn with a dark red header containing server name and address, and below that is drawn a light red “body” with status info. Together, they make up one row.

ah… so you are doing all the drawing in the cell text/background paint by yourself… right ?

@Roman Varas : mostly yes.

Remember that this is visual ‘trickery’
When done this way, the text is not selectable and copiable in the way you might expect a ‘normal’ listbox to behave.
You can consider what you are seeing to be a series of ‘images’ which are scrollable and selectable.

Is there a technique to make it selectable — I need to create a chat list and want users to be able to select the text? Would you use a canvas with an array of variable-height containers (with text/graphics) floating on it — this is my current idea?

Possibly you could make the default height larger.
Use normal text
Draw something during the cellbackgroundpaint which is colorful and not selectable, but still allow normal text above it.
It would be one line only though.

You might look into this:
http://www.katkosoft.com/Mergeable%20Listbox%20Page/MergeableCellListbox.html

Some work has been done by forum members on ‘merged cells’

Yes, you could create a container control with an array of textedit fields which scroll up and down based on a scrollbar

Or, if your CellTag is unused, you may store the text there and at select time copy it in the Clipboard (an idea to fine tune with code, eventually).

The problem with Listbox (and some other things) is… nowhere this is (was ?) explained in the documentation: once someone says it is possible to insert a column in code while running the application, I searched and found. Prior that, I do not even had the idea that it is possible… :frowning:

If you are open to considering a third party replacement for the Listbox, consider piDog’s DataView . It is built from the ground up (not subclassed from Listbox) so can support variable row height, row and column spans, and tons of other stuff out of the box. But as noted in this thread, the look and feel out of the box is slightly different. For a chat, you already don’t want a standard listbox look. Plus DataView is EXTREMELY customizable, offering events including paint events that don’t exist in a standard Listbox.

Just trying to save you from designing yourself on a canvas, if you are open to third party solutions.

Of course, Paul’s Good Guy Listbox video is a great introduction

[quote=422823:@Paul Lefebvre]You can do a lot with a customized ListBox. Several examples are described here:

https://documentation.xojo.com/topics/user_interface/desktop/desktop_controls/list_box.html

The bottom toolbar thing is often called an ActionBar. I believe GraffitiSuite includes one:

https://graffitisuite.com/features/desktop-edition/[/quote]

I’m just starting to realize this. Thanks.
It’s funny, I just came across ServerRanger today. It’s a nice looking product. I had no idea ListBox was so versatile.

As I write the majority of my applications for the web, I would love to see a lot of this power move to that platform as well. :slight_smile:

Web is very easily extendable, create custom controls. They’ll be faster, behave better, and are more native than a bunch of drawing.