Using the new control is similar to how you would use the same type of control in Desktop projects. For example, drag the control from the Library panel and drop it onto the Layout Editor of a Screen, where it will be added to the Tray area.

Next, you need to call the Show method on the MobileColorPicker instance to display it to the user, and implement the ColorSelected event handler to capture the selected color.

Note: This control’s functionality is available only when the app is run on devices with iOS 14 or later (the minimum recommended version for iOS projects starting with Xojo 2025r1).

Modal vs Popover

When calling the Show method without parameters on the MobileColorPicker instance, it will be displayed as a modal panel on both iPhone and iPad devices. If you provide the ParentControl parameter, the MobileColorPicker will be shown as a popover panel on iPad devices. However, on iPhone devices, it will still be displayed as a modal dialog, regardless of the ParentControl parameter.

In Summary

The addition of the MobileColorPicker control in Xojo 2025r1 simplifies color selection in iOS apps, providing a native and intuitive experience for your users. This control makes it easier than ever to implement color pickers in your iOS projects. So, give it a try in your next app, and enhance the user experience!

Javier Menendez is an engineer at Xojo and has been using Xojo since 1998. He lives in Castellón, Spain and hosts regular Xojo hangouts en español. Ask Javier questions on Twitter at @XojoES or on the Xojo Forum.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

First, add a new Module to a web project. For this tutorial we’ll name it WebTools. Next, add the following method to it with a Global scope:

• Method Name: ModalBackgroundColor
• Parameters: Extends v As WebDialog, assigns c As String
• Scope: Global

And type the following snippet of code in the associated Code Editor:

v.ExecuteJavascript("document.getElementById('" + v.ControlID + "_body').style.backgroundColor='"+c+"';")

With that done, we only need to call it from the Opening Event Handler of a WebDialog instance to set the desired background color:

Me.ModalBackgroundColor = "#f00" // Sets the background color to Red.

This leads to some interesting side effects. For example, the header on the WebListbox control and the loupe icon on the WebSearchField are transparent. That means that they look good when the background color on the WebDialog is the default white color, but not so good when we set a different background color on the WebDialog instance.

Avoid this issue by accessing the Style property on the proper div class on these objects. The tricky part here is to access the instance number whose inner header class we need to change. For that, the approach taken here may be a bit of overkill, but it works.

Such an approach is based on subclassing those WebControls we need to reference. In this case we are going to create subclasses for the WebListBox and the WebSearchField.

Add a new class to the project and name it MyWebListBox, setting its Super to WebListBox. Next, add a new shared property with the following values:

• Shared Property Name: globalInstance
• Data Type: Dictionary
• Scope: Private

And a second regular property with these values:

• Property Name: instanceNumber
• Data Type: Integer
• Scope: Public

Next, add the Constructor method to the new class. The IDE will automatically include the code calling its Super class. Then, add a couple lines of code to set the instanceNumber property to the last index of the globalInstance shared property array. The final code for the method will look like this:

Super.Constructor
If globalInstance = Nil Then globalInstance = New Dictionary
Var instances() As MyWebListBox
If Session <> Nil Then
  If globalInstance.HasKey(Session) Then
    instances = globalInstance.Value(Session)
  End If
  instances.add Me
  instanceNumber = instances.lastindex
  globalInstance.Value(Session) = instances
End If

Add next the Closed Event handler to the subclass, typing the following snippet of code in the associated Code Editor:

If Session <> Nil Then
  If globalInstance.HasKey(Session) Then
    Var instances() As MyWebListBox = globalInstance.Value(Session)
    instances.Remove(Me.instanceNumber)
    For n As Integer = Me.instanceNumber To instances.LastIndex
      instances(n).instanceNumber = instances(n).instanceNumber-1
    Next
    globalInstance.Value(Session) = instances
  End If
End If

Because we are using the Closed event handler in the subclass, we need to add it again using the Event Definition option (keeping the same name, number of parameters and returned type). This way the instances based on this subclass will be able to add that event too.

Repeat the same steps to add a new MyWebSearchField class whose Super is set to WebSearchField.

The code associated with the Constructor method for the MyWebSearchField is as follows:

Super.Constructor
If globalInstance = Nil Then globalInstance = New Dictionary
If Session <> Nil Then
  Var instances() As MyWebSearchField
  If globalInstance.HasKey(Session) Then
    instances = globalInstance.Value(Session)
  End If
  instances.add Me
  instanceNumber = instances.lastindex  
  globalInstance.Value(Session) = instances
End If

And the code associated with the Closed Event Handler should be this one:

If Session <> Nil Then
  If globalInstance.HasKey(Session) Then
    Var instances() As MyWebSearchField = globalInstance.Value(Session)
    instances.Remove(Me.instanceNumber)
    For n As Integer = Me.instanceNumber To instances.LastIndex
      instances(n).instanceNumber = instances(n).instanceNumber-1
    Next
    globalInstance.Value(Session) = instances
  End If
End If

With both both classes created, add them to a WebDialog instance (the one we named WebDialog1). Then, include the following line of code in the Shown event handler for each of these instances:

In the case of the ListBox1 instance:

Me.ExecuteJavascript("document.getElementsByClassName(""dataTables_scrollHeadInner"")["+me.instanceNumber.tostring+"].style.backgroundColor='#f00';") // This will set the listbox header background color to Red

Of course, you can improve this by accepting a variable color reference string instead of using the constant red value here (“#f00”).

And for the SearchField1 instance:

Me.ExecuteJavascript("document.getElementsByClassName(""input-group-append"")["+me.instanceNumber.toString+"].style.backgroundColor='#fff';") // This will set the "loupe" icon background color to White

Now, we need to make sure that both the WebListbox and the WebSearchField instances are reset when we are done, something we can do by calling their Close method from the Dismissed event handler added to the WebDialog1 instance in the project:

Run the example project and you’ll see how the first ListBox instance (on the WebPage1 page) keeps the header color as transparent (white, because the page background color is white), while the second one displayed by the WebDialog is set to red. Also, the SearchField control displays the loupe icon with a white background color.

Bonus Tip

Once you know the mechanics of how to access the proper ID and set the background on the WebDialog, it is easy to set an image as the background instead of a color. For example, this line of code in the Shown event of the WebDialog1 instance will load the Xojo logo as the background image:

Me.ModalBackgroundImage = "https://www.xojo.com/assets/img/logo.png"

ModalBackgroundImage is another method added to the WebTools module using the following signature:

• Method Name: ModalBackgroundImage
• Parameters: Extends v as WebDialog, Assigns url As String

Add the following associated code:

Var s As String = "document.getElementById('" + _
v.ControlID + "_body').style.backgroundImage=""url('"+url+"')"";"

v.ExecuteJavascript(s)

Now that you have the basics down, you can go even further and set other background attributes such as not repeating the image, setting the image size and more.

Questions? Ask me on Twitter @XojoES or on the Xojo Forum.

CRightColr is set up as a shared color property. And the person wanted the default value to be set from the Color.RGBA function. When you try this you get an error.

Window1.CRghtColr Declaration
Not enough arguments: got 0, expected 4.
Private Shared CRghtColr As Color = Color.RGBA(000, 061, 255, 208)

It’s confusing as it’s not clear what requires more parameters. However, the User Guide quite clearly states that Constants can be assigned only a literal value, another constant value or the result of a constant expression.

A literal is easy – it’s something like &cFF00FF00 – a color literal. A constant value would be assigning one constant to another. Say you had another constant:

 cColor as color = &cffffff00

You could then assign:

Private Shared CRghtColr As Color = cColor

And this would be fine.

A “constant expression” is a little less obvious here. It’s literally an expression made up only of constant values. This example should make it clearer:

Const constant1 as integer = 90
Const constant2 as integer = 100
Const constant3 as integer = constant1 + constant2 // constant1 + constant2 is a constant expression

Note that none of the allowable ways to set a constant include calling a function like Color.RGBA. Unfortunately while the compiler tries its best to make sense of what you’re trying to do, this one confuses it and you get this somewhat unhelpful error message.

So, if you ever happen to see this, check to see that you are following the rules about what is allowed for the default value of a constant.