The title can also be “How do I use” some Controls…
To be clear, for me, there is two kinds of Controls:
The ones that goes directly to a Window (TextField/TextArea/Canvas/ListBox)
The ones that goes to the Navigation Pane.
I will take the DesktopContainer Control as an example. The documentation description says:
Description
Used to embed a group of controls in a Window or in another control.
Properties
So, I fired Xojo 2025r1.1, creates a New Project, search the DesktopContainer Control and double-click in it.
IT GOES TO THE NAVIGATION PANE.
That said, what do I do with it ?
What is its purpose (how do I “embed a group of Controls…” and… WHY ?)
And this is so BASIC that nobody explain its potential uses. If you do not know what to do with it / you do not use it. (Of course !).
I welcome every explanation / link to tutorial (except videos).
Then you select it in the Navigator and add stuff to it like you do it in a Window-Object.
Next you select a Window in the Navigator and then you Drag&Drop your Container from the Navigator into this Window.
You can use it for example, to build your own controls. Here’s a container with a listbox and +/- buttons below it.
Let’s stick with the container as an example: I use it, for example, to divide complex windows into less complex areas. Or to make it easier to edit pages in PagePanels by building each page in a container.
The integration of containers in Xojo has made my life a lot easier. I use them in a thousand different situations. They’re extremely flexible.
For any class or control in the navigator, you should be able to right-click and see an item called Superclass. If you select this, it will show the class’ supers in reverse order all the way up and including the internal Xojo classes which are disabled since you can’t see their internals. This is a great way to find out if the super is prefixed or not.
For example, I have a project in which I’m working with multiple PagePanels and TabPanels in one of the windows.
Editing the contents of these panels in that single window would be slow and cumbersome. Therefore, I have the panel contents in containers that I can edit quickly without being slowed down by the other elements or accidentally changing them.
Then, in the same project, I have a search control that I created in a small container from a SearchField subclass and a few other elements. I use this search control in various windows.
Containers make it easy to control layouts. I wrote an app that uses three containers with two splitters. Trying to adjust the layouts of all the controls inside the containers, without using containers would be a freaking nightmare. The containers are outlined in red below
For example, in one of my apps there is an option to automatically tag image files depending on their pathname. The controls comprising a rule are enclosed in a container:
Reusability, so you can build one control from many controls, and reuse it as needed.
Compartmentalization, to avoid spaghetti code.
Below is a screenshot of my app, which demonstrates both of these uses. The colored rectangles are each a separate container nested inside each other. This allows me to develop a separate container for each of the sections on the left, so they all exist fully independent of each other. Inside that, I’ve used more containers as the needs of that section arise. When it comes to reusability, the 4 status bars at the bottom are each a status bar container I have developed. While these ones are pretty simple, I have properties that allow it to also show left and right content, as well as a spinner or progress bar.
Every control in the entire project is private. No window or container can reference any control on any other container. Most properties are private as well. This essentially creates a whole bunch of mini programs, each responsible for its own inputs and outputs. Nothing more, nothing less.
Because the Controls draw color is too light (I do not see them - nearly), for build process, I use a background color for the window (orange here), so I can see what I am doing.
When done, I remove that color. In another window, it’s yellow (under construction).
