For the most part, writing drawing code will just work because you use Xojo’s Graphics class for Android, Desktop and iOS projects. Web projects, however, don’t use the Graphics class. The WebCanvas control’s Paint event is passed a WebGraphics object. While the Graphics and WebGraphics classes have a lot in common, sharing many of the same methods with the same parameters, they are two distinctly different classes from the perspective of the Xojo compiler. That means that while the code you write will look almost identical, you still have to use a Graphics object for Android, Desktop and iOS projects and a WebGraphics object for Web projects.

Your instinct might be to simply write the code for one and then copy it to the other projects, changing Graphics to WebGraphics for Web projects. This will of course work, but then you have to remember to do this copy/paste/change operation every time you update your code. That’s not ideal.

Graphics vs. WebGraphics

With Xojo, the code can be written in such a way as to automatically handle the difference between Graphics/WebGraphics. Most often your graphics methods will be called from something that provides a Graphics or WebGraphics object for you to draw into such as a Canvas control’s Paint event. From there your code will call your methods that do the drawing. The problem is that your methods can’t use a Graphics or a WebGraphics type as a parameter because Graphics is not going to work for your Web projects and WebGraphics doesn’t exist in any framework except the Web framework. Thus using it anywhere else will result in a compiler error.

Using a Variant

Getting around this limitation is, fortunately, quite easy. Instead of using Graphics or WebGraphics as a parameter type, you use Variant. A Variant can hold any type of data from Strings to Integers, to Graphics to WebGraphics and more.

Once your drawing method gets the Variant though, it can’t use it to draw. It can only use a Graphics or WebGraphics objects. The trick is to then copy it into a Graphics or WebGraphics class variable:

Var g As Graphics = context

or

Var g As WebGraphics = context

The problem you now face, as mentioned earlier, is that WebGraphics only exists in Web projects. That means you have to write your code in such a way that you will declare the variable g as a Graphics object in Android, Desktop and iOS projects and as a WebGraphics object in Web projects. This can be achieved via conditional compilation. This is a simple technique that tells the Xojo compiler to only compile code into your app if conditions you specify are met. In this case, if you’re targeting Desktop or Mobile, it should compile in the line that uses the Graphics type, and if you are targeting a Web app, the line that uses WebGraphics. To conditionally compile, you just need to add that conditional code around these two lines:

#If TargetDesktop Or TargetMobile Then
   Var g As Graphics = context
#EndIf

#If TargetWeb Then
   Var g As WebGraphics = context
#EndIf

Since a project must be only one of the above types, when you run or build your project, the appropriate line of code will be compiled in. From there, you now have a variable (g) of the right type can use this to draw whatever you like. For example, there are four identical example projects (one for each project type) that show off this technique. They can be found in the Xojo IDE by choosing File > New Project, clicking on Examples, choosing the Graphics folder in the list and then the Cross-Platform Drawing folder. The examples all draw a checkerboard that looks like this:

They all contain the an identical Checkerboard class that handles the drawing. This class has DrawBorder and DrawCheckers methods that both take a Variant as a parameter. In each project is a Canvas control whose Paint event calls these methods:

Var cb As New Checkerboard
cb.DrawBoard(g)
cb.DrawCheckers(g)

The full DrawBoard method looks like this:

#If TargetDesktop Or TargetMobile Then
  Var g As Graphics = context
#EndIf

#If TargetWeb Then
  Var g As WebGraphics = context
#EndIf 

Var boxSize As Integer = Min(g.Width/8, g.Height/8) 'The size of the box
'Draw the rows
For y As Integer = 0 To 7
  For x As Integer = 0 To 7
    'Switch colors for each box in the row
    If g.DrawingColor = Color.Black Then
      g.DrawingColor = Color.White
    Else
      g.DrawingColor = Color.Black
    End If
    'Draw a box
    g.FillRectangle(x * boxSize, y * boxSize, boxSize, boxSize)
  Next
  'Switch colors again for the beginning of the next row
  If g.DrawingColor = Color.Black Then
    g.DrawingColor = Color.White
  Else
    g.DrawingColor = Color.Black
  End If
Next

In the example projects, check out the DrawCheckers method as well. It uses the same technique. What is great about this is that this class can be copied into any Android, Desktop, iOS or Web project and it will indeed just work.

Checking Out the Examples

There are four example projects (one for each project type – Android, Desktop, iOS and Web) that demonstrate the technique explained here. You can find them in the Xojo IDE by choosing File > New Project, clicking on Examples, choosing the Graphics folder in the list and then the Cross-Platform Drawing folder.

Geoff Perlman is the Founder and CEO of Xojo. When he’s not leading the Xojo team he can be found playing drums in Austin, Texas and spending time with his family.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

For more detailed information, you can refer to the official Xojo documentation on Variants.

What are Variants?

A Variant in Xojo is a data type that can store any type of data. This means that a variable of type Variant can take on different data types without needing to be explicitly converted. This can be very useful when you want to be flexible, but it can also lead to unexpected problems if not handled correctly.

Basic Example

Var dynamicValue As Variant

dynamicValue = 42                              // Integer
dynamicValue = "Hello"                         // String
dynamicValue = 3.14                            // Double
dynamicValue = True                            // Boolean
dynamicValue = Color.RGB(255, 0, 0)            // Color
dynamicValue = New Dictionary("key" : "value") // Dictionary

In the example above, you can see that dynamicValue can take on different data types without the need to explicitly change the type.

Implicit Conversions

Implicit Conversions are automatic type conversions performed by Xojo when using Variants. This means that Xojo tries to interpret the data in a Variant so that it fits the context in which it is used.

Example of an Implicit Conversion

Var dynamicValue As Variant = "123"

Var myInteger As Integer
myInteger = dynamicValue  // Implicit conversion from String to Integer

In this example, the string “123” is automatically converted to an integer when assigned to the integer variable myInteger.

Another Example with Data Types

Var dynamicValue As Variant = "3.14159"

Var myDouble As Double
myDouble = dynamicValue  // Implicit conversion from String to Double

Here, the string “3.14159” is automatically converted to a double. This demonstrates the flexibility of Variants and Xojo’s ability to handle different data types.

Conversion of Floating-Point Numbers

In Xojo, assigning a floating-point number to a Variant will always produce a Double. However, there are other floating-point data types such as Single, Currency, and CGFloat.

Var dynamicValue As Variant = 3.14

Var myDouble As Double
Var mySingle As Single
Var myCurrency As Currency
Var myCGFloat As CGFloat

myDouble = dynamicValue   // Double: 3.14
mySingle = dynamicValue   // Single 3.14 (implicitly converted)
myCurrency = dynamicValue // Currency: 3.14 (implicitly converted)
myCGFloat = dynamicValue  // CGFloat: 3.14 (implicitly converted)

In this example, you can see that assigning dynamicValue (which contains a floating-point number) to different floating-point data types always works, with the implicit conversion performed by Xojo.

Advantages of Implicit Conversions

Flexibility

The biggest advantage of Variants is their flexibility. You can write functions that can work with different data types without requiring explicit type conversion.

Example of a Flexible Function

Function AddValues(value1 As Variant, value2 As Variant) As Variant
  Return value1 + value2
End Function

// Using the function with different data types
Var result As Variant
result = AddValues(10, 20)             // Integer addition
result = AddValues("Hello", " World")  // String concatenation
result = AddValues(3.14, 2.71)         // Double addition

This function can work with integers, strings, and doubles without requiring changes to the code.

Rapid Prototyping

During rapid prototyping, Variants can be useful because they reduce the need to worry about type conversions.

Example of a Quick Prototype

Var quickData As Variant = "42"

If quickData > 10 Then
  MessageBox("Greater than 10")
End If

In this example, the string “42” is automatically converted to an integer to perform the comparison.

Disadvantages of Implicit Conversions

Debugging

It can be difficult to debug errors caused by incorrect type conversions. Since the conversion happens automatically, it is sometimes not obvious why a particular error occurs.

Performance Issues

Implicit conversions can lead to performance issues, especially when large amounts of data need to be converted.

Example of Performance Issues

Var dynamicValue As Variant = "9999999999"
Var myDouble As Double

For i As Integer = 1 To 1000000
  myDouble = dynamicValue  // Performance hit due to repeated conversions
Next

In this example, the conversion is performed during each iteration of the loop, which can impact performance.

Loss of Type Safety

Another risk is the loss of type safety, which can lead to unexpected runtime errors.

Type Property

The Type property is a useful tool to determine the data type of a Variant value. This property returns an integer that corresponds to the type of the value. This can be helpful to ensure that you are handling the correct data type.

Example of Using the Type Property

Var dynamicValue As Variant = "Hello"

Select Case dynamicValue.Type
Case Variant.TypeString
  MessageBox("The variant is a String.")
Case Variant.TypeInt32, _
     Variant.TypeInt64
  MessageBox("The variant is an Integer.")
Case Variant.TypeDouble
  MessageBox("The variant is a Double.")
Case Variant.TypeBoolean
  MessageBox("The variant is a Boolean.")
Else
  MessageBox("The variant is of another type.")
End Select

In this example, dynamicValue.Type is used to determine the type of the Variant value and perform corresponding actions.

When Should You Use Variants?

Suitable Use Cases

Generic Functions

If you are writing functions that need to work with different data types, Variants can be very useful.

Function CompareValues(value1 As Variant, value2 As Variant) As Boolean
  Return value1 = value2
End Function

// Using the function with different data types
Var isEqual As Boolean
isEqual = CompareValues(10, 10)          // True
isEqual = CompareValues("Hello", "Hello")  // True
isEqual = CompareValues(3.14, 2.71)      // False

Interoperability with External APIs

When working with APIs or interfaces that return different data types, Variants can provide an easy way to handle this data.

// Example API response that can return different data types
Function GetApiResponse() As Variant
  // Simulated API response
  Return "42"  // Could also be an Integer or a JSON object
End Function

Var apiResponse As Variant = GetApiResponse

If apiResponse.Type = Variant.TypeString Then
  MessageBox("Response is a string: " + apiResponse)
ElseIf apiResponse.Type = Variant.TypeInt32 Or _
       apiResponse.Type = Variant.TypeInt64 Then
  MessageBox("Response is an integer: " + apiResponse)
End If

Data Structures

In situations where you need data structures that contain different data types (e.g., an array that can contain both strings and numbers), Variants are a good choice.

Var dataList() As Variant
dataList.Add("Xojo")
dataList.Add(2024)
dataList.Add(True)

// Accessing different data types in the array
For Each item As Variant In dataList
  Select Case item.Type
  Case Variant.TypeString
    MessageBox("String: " + item) 
  Case Variant.TypeInt32, _
       Variant.TypeInt64
    MessageBox("Integer: " + item) 
  Case Variant.TypeBoolean
    MessageBox("Boolean: " + item)
  End Select
Next

Situations to Avoid Using Variants

Performance-Critical Applications

When performance is critical, you should avoid Variants because automatic type conversion introduces additional overhead.

Var dynamicValue As Variant = "9999999999"
Var myDouble As Double

For i As Integer = 1 To 1000000
  myDouble = dynamicValue  // Performance hit due to repeated conversions
Next

Code Clarity and Maintainability

When code readability and maintainability are paramount, you should use explicit data types to ensure that the code is understandable to other developers.

Var myString As String = "Hello"
Var myInteger As Integer = 123

Function ConcatenateStrings(s1 As String, s2 As String) As String
  Return s1 + s2
End Function

Var result As String
result = ConcatenateStrings(myString, myInteger.ToString)  // Clear and understandable

The use of Variants in Xojo offers both advantages and disadvantages. While flexibility and rapid prototyping capabilities are compelling arguments, you should be aware of the potential problems that can arise from implicit conversions. Variants are best suited for scenarios where flexibility and generic programming are required. In performance-critical applications or projects that require high maintainability, it is advisable to use explicit data types such as String, Integer, Double, Boolean, Color etc. or, if you decide to use Variant, you can also have the explicit data type of the Variant delivered. To do this, use the Variant …Value properties (for example StringValue, IntegerValue, BooleanValue etc.).

By taking a conscious and deliberate approach to using Variants, you can leverage their advantages while avoiding potential pitfalls.

For more detailed information, you can refer to the official Xojo documentation on https://documentation.xojo.com/api/data_types/variant.html.

Martin T. is a Xojo MVP and has been very involved in testing Android support.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube