First Xojo question is on controls

Okay, here is my first Xojo questions. I am trying to move a Windows program to Xojo and ran into a problem with the user interface. Xojo does’t show me a spinner object that can be used to increment/decrement a value.

I wanted to attach a picture of what I am trying to do, but I don’t see a way to attach an image that is on my iMac. Images appear only to be available via url.

I wanted to give you an answer, but I do not know what is a spinner and I do not understand the question.

To ”attach“ an image, upload it into a web sharing site, get its URL there and click here in the image icon (above), then paste the url. That is all. (ask for more if unclear).

by spinner do you mean a stepper?
look at LABEL and UP/DOWN arrows, and combine them together

Remember… Xojo is NOT VB, as VB is not Xojo… they are both tools to create an end result… but they are not, will not and should not be “the same”

In the following image you can see the UI I was developing in Netbeans. The “Zone Duration” selectors are what I am talking about. In Netbeans they are called spinners, in they are called Numeric UP Down counters. Dave understood what I am looking for.
Apparently in Xojo They are called steppers.

Now to figure out how to combine a numeric field/textbox and a steppper so that I can have numeric values that step up or down with a lower limit of zero and an upper limit of 60 and a step of 1.

They don’t come already made, but you can create your own fairly easily with a TextField, and an up/Down Arrow.

Using a ContainerControl, you can actually create the control to be used anywhere else and in as many instances as needed.

Okay, I placed a label in the window and then placed an up/down arrow to the left of it. I added event handlers for the up and down events that increment and decrement the label value. I also had to add a check for numeric and implement limits for the low and the high permitted values. I now have to duplicate that work 6 times for the other zone controls. I also have to be careful to position them as a pair to avoid fudging the appearance. The biggest problem is that copying the two controls does not update the event handlers so all the copied handlers update the first value and must be individually edited to point to the correct value.

While this works okay, this is all very tedious. A combined up down numeric counter would be a nice addition to the picker control set. A numeric up down counter is a very common UI element and it would avoid a number of problems:
1: You could place the control and the text field in one step
2: The arrows and text field would already be perfectly aligned and positioning would not disrupt the alignment.
3: The arrows would automatically update the control’s text field without having to code the updates.
4: The numeric check could be built in.
5: There would be no need for the up or down event handlers as those would be built-in
6: The limits, the default starting value, as well as the step amount could be set in the control properties or programatically.
6: Placing dozens of numeric step controls would be a breeze with no coding work

  • Add a containercontrol to the project (menu Insert/Container Control)
  • It will look like a window.
  • Drag a Textfield over, place it in the upper left corner of the CC
  • Drag a set of up/down arrows next to the right of the textfield
  • Make the ContainerControl the size of your two controls

That is the base for your custom control. Now you can drag that to a window like you would for a normal control.

Now put all the logic into it, and off you go. Since you can place as many instances of that custom control as you want on the window, no more tedious repeat.

Add properties to taste.

Thanks Michel, that helps with alignment of the arrows and label value, but all the other concerns remain. You still need to go in and manually update the value being modified on each copy and the numeric value check as well. Any simplification of that work?

add properties or methods to your ContainerControl as needed. You can set these up to be editable in the IDE just like built-in controls. See

You need to add the logic in the container control.

For instance, in updownArrow1 Up event, something like that will make the update automatic :

Texfield1.Text = Str(val(TextField1.Text)+1)

And in the Down event :

Texfield1.Text = Str(val(TextField1.Text)-1)

You may want to have min as Integer and max as integer properties added to the container control, so you can limit the span of the value in your control :

If val(TextField1.Text) < max then Texfield1.Text = Str(val(TextField1.Text)+1) end if

And in the Down event :

if val(TextField1.Text) > min then Texfield1.Text = Str(val(TextField1.Text)-1) end if

Then you can set min and max in the Open event of the instance of the container control.

I already added all that in a slightly different way. But there is still a lot of editing required for each copy.

what “kind” of editting? if created properly, you should have a “write-once/use many” control

I think what is going on here is the original control that is created should be a class. Then each instance would not require any editing.

The way I am currently doing this is to create the original control in the designer with a label, an up/down arrow, and a group. I set up the events and then once it is working, I simply copy it in the design window. Doing it that way requires me to edit all the actions in the copies.

How should I be doing this?

That is correct, it should be a class , based on a container control (with two internal controls, label, up/down arrow), it should have a few public properties (min, max, etc)

The events (which are mostly internal) are part of the class… you might have one event definitiion so the parent of an instance knows something has happened.

I’m bored… .would you like me to write it for you, and you can use it as a learning experience, and a template for future endeavors? Won’t take me too terribly long

Dave, that is a generous offer, thank you. The problem I have is not so much how to write it, but how to do it in Xojo’s environment. I am clearly lost as to where things go and how this is all organized. It is clear this cannot be done in the GUI design window and then copied from there, so where should it be written (what file)? Where should it be instantiated? Are you talking about somehow creating a a custom control that becomes part of the available controls in the picker group or something else?

Many thanks for your help.

but yes it can… and yes that is how you do it[quote=384007:@Mike Gauthier]Are you talking about somehow creating a a custom control that becomes part of the available controls in the picker group [/quote]
that is exactly right, you can then drag as many instances or as few as are required… they act just like any other control that comes pre-installed with Xojo

As a matter of fact I have it already complete… but seem to have run across an anomoly with the Label control…

Thanks for that. How did you make it a part of the Project controls?

Nothing special… better to find the Xojo documents and read those…
but it starts with “INSERT CLASS”, changing the SUPER and going from there

It is actually MUCH easier to create “User Defined Controls” in Xojo than it ever was in VB

I watched a video on how to make a new control that only included 1 control and adding actions. They were a URL label and a Calendar. I successfully made both of them.

There is nothing I could find on how to combine controls so I simply tried what is in the attached image. And that doesn’t work. Whatever way I try, I end up with 3 separate controls, not a combined control.

The steps I took are in the image and the result is in the left column.

I can combine the controls okay in the window, but I still don’t see how to combine these into one subclassed control.

This should be a lot easier.