Fun – Xojo Programming Blog

Optimizing Xojo Code, Part 5: Threads and UserInterfaceUpdate

Gabriel Ludosanu — Mon, 02 Mar 2026 23:43:13 +0000

In Part 1, we learned why tight loops with DoEvents freeze your UI. Part 2 showed us Timer controls. Part 3 moved timers into code. Part 4 simplified scheduling with CallLater.

But timers have a limit: they still run on the UI thread. If your background work is genuinely heavy (database queries, file I/O, complex calculations), a timer won’t save you. You need actual background processing and that’s where threads come in.

The Core Idea: Threads

A thread is a separate execution path that runs outside the UI thread. While your thread does the heavy lifting, the UI stays responsive to clicks, typing, scrolling. When your thread finishes a chunk of work, it notifies the UI thread via UserInterfaceUpdate, and only that callback runs on the main thread.

The rule is simple: threads cannot touch UI controls directly. If you try, you get a crash. UserInterfaceUpdate is your bridge.

For a deeper dive into how Xojo’s threading model works under the hood, including cooperative vs. preemptive threading, see Cooperative to Preemptive: Weaving New Threads Into Your Apps.

Let’s Code

Prerequisites: Add a StatusLabel (DesktopLabel), a DesktopButton, and a Thread control. Also define:

kCountTo As Integer = 100

The Thread Control

Drag a Thread from the library into your window and name it BackgroundWorker.

The Button (Start the Thread)

Place this in the Pressed event of a button:

Sub Pressed()
  If BackgroundWorker.ThreadState = Thread.ThreadStates.NotRunning Then
    BackgroundWorker.Start
  End If
End Sub

This checks if the thread is already running. If not, start it. This prevents multiple threads from piling up if someone clicks fast.

The Thread.Run Method (Background Work)

Implement the Run method on your Thread:

Sub Run()
  For i As Integer = 0 To kCountTo
    
    ' Do background work here. No UI access allowed.
    ' It can be: database query, file read, API call, pretty much anything that might block "freeze" the UI of the app
    
    ' Prepare a Dictionary payload for the UI
    Var info As New Dictionary
    info.Value("progress") = i
    info.Value("message") = "working"
    Me.AddUserInterfaceUpdate(info)
    
    ' Sleep (optional)
    Thread.SleepCurrent(10)   // Sleep 10 ms
  Next
End Sub

The key line is Me.AddUserInterfaceUpdate(info). This queues data for the UI thread to process. Each call adds one item to a queue, and the UI thread drains it in UserInterfaceUpdate.

The Thread.UserInterfaceUpdate Method (UI Sync)

Implement this event to handle updates from the thread:

Sub UserInterfaceUpdate(data() As Dictionary)
  ' Runs on the main UI thread. Safe to update controls here.
  
  ' Guard against empty or malformed data
  If data = Nil Or data.Count < 0 Then Return
  
  Var d As Dictionary = data(0)
  
  ' Extract the progress value safely
  Var progress As Integer = 0
  If d.HasKey("progress") Then
    progress = d.Value("progress").IntegerValue
  End If
  
  ' Update the UI
  StatusLabel.Text = progress.ToString
  
  ' Mark completion when we hit the target
  If progress >= kCountTo Then
    StatusLabel.Text = "done"
  End If
End Sub

Important notes:

data() is an array of Dictionaries.
Always check HasKey before accessing a value to avoid runtime errors.
Use .IntegerValue (or .StringValue, etc.) to safely extract values.
This runs on the UI thread, so it is safe to update StatusLabel and any other visual controls.

How It Works

Button press: Click the button and the thread starts.
Background loop: The thread iterates from 0 to kCountTo, sleeping 10 ms each step. After each step, it queues an update.
Responsiveness: While the thread works, you can still interact with the rest of your application. No freezing.

A Note on Thread Safety

Threads are powerful but risky if misused. Here is the boundary:

Safe in Run(): Anything that doesn’t touch UI controls. File I/O, database queries, calculations, network calls.
Unsafe in Run(): Reading or writing UI control properties directly. StatusLabel.Text = ... is a no no!
Safe in UserInterfaceUpdate(): All UI control access. This runs on the main thread.

If you forget this rule and try to update a label from inside Run(), your app will crash with a ThreadAccessingUIException. Instead pass data through AddUserInterfaceUpdate.

When to Use Threads vs. Timers

Use timers for:

Short, frequent tasks (10-50 ms ticks).
Simple progress updates.
Cases where you are just deferring work a bit.

Use threads for:

Long-running operations (seconds, minutes, hours).
Genuinely blocking work (I/O, network, heavy calculations).
Multiple independent background tasks.

In this series, we moved from blocking the UI to using timers on the UI thread, then to actual background threads. Each approach solves a different problem.

Wrapping Up

Threads are the heavy artillery of responsive design. They run independent of the UI and communicate safely via UserInterfaceUpdate. Once you grasp the boundary between thread code and UI code, you can build applications that never freeze, no matter how much work is happening behind the scenes.

See the Thread documentation for more details on priority, stack size, and advanced patterns.

Until then, happy threading!

Gabriel is a digital marketing enthusiast who loves coding with Xojo to create cool software tools for any platform. He is always eager to learn and share new ideas!

Optimizing Code Series:

Optimizing Xojo Code, Part 4: Timer.CallLater

Gabriel Ludosanu — Mon, 02 Feb 2026 21:25:28 +0000

In Part 1 of this series, we looked at a common but discouraged approach using a tight loop with DoEvents to keep the UI from freezing. In Part 2, we explored a better alternative by replacing that loop with a Timer control dragged onto a Window. In Part 3, we advanced to creating Timers programmatically with AddHandler for use in classes and modules.

Now, for even simpler one-off or chained delayed tasks, Xojo offers Timer.CallLater: no Timer instance required.

The Strategy: Timer.CallLater

Timer.CallLater(milliseconds, AddressOf MethodName, arg As Variant) schedules your method to run after the specified delay on the main UI thread. Pass data via the Variant parameter. To chain calls (like our countdown), re-call it from within the method. Use Timer.CancelCallLater(AddressOf MethodName) to abort pending calls.

For full details, see the Timer documentation.

Looking at the Code

Prerequisites: Add a StatusLabel (DesktopLabel control) and a constant kCountTo As Integer = 20000.

Let’s look at how we implement this.

The Setup (Button Pressed)

Place the following code in the Pressed event handler of a button control:

Sub Pressed()
  Timer.CancelCallLater(AddressOf UpdateProgress)
  
  StatusLabel.Text = "0"
  
  Timer.CallLater(100, AddressOf UpdateProgress, 100)
End Sub

The Handler (Recursive Chain)

Create the following method that handles the recursive chain of delayed updates:

Sub UpdateProgress(elapsedMs As Variant)
  Var elapsed As Integer = elapsedMs.IntegerValue
  
  If elapsed >= kCountTo Then

    StatusLabel.Text = "done"

  Else

    StatusLabel.Text = elapsed.ToString
    Timer.CallLater(100, AddressOf UpdateProgress, elapsed + 100)

  End If
End Sub

Crucial Note: The handler method must accept a Variant parameter to receive the argument passed to CallLater. Always use type-safe extraction like .IntegerValue.

How It Works

Initial Schedule: The button cancels any pending calls and schedules the first UpdateProgress after 100ms, passing 100 as the elapsed time (just in case we like pressing a button multiple times quickly).
Recursion: Each call updates the UI and, if not finished, schedules the next one 100ms in the future with incremented elapsed time.
Automatic Management: No Timer properties or handlers to manage; Xojo handles scheduling and cleanup.
Cancellation: Ensures only one chain runs at a time.

Wrapping Up

Timer.CallLater shines for delayed UI updates or chained tasks without the overhead of Timer objects. It’s concise, safe, and powerful for responsive apps.

In Part 5, we’ll tackle true background processing with Threads and UserInterfaceUpdate.

Until then, happy coding!

Gabriel is a digital marketing enthusiast who loves coding with Xojo to create cool software tools for any platform. He is always eager to learn and share new ideas!

Optimizing Code Series:

Xojo + XAML + Goto = 🔥

William Yu — Thu, 22 Jan 2026 20:50:59 +0000

For decades, Goto has been treated as a programming faux pas—something to avoid at all costs. Like most rules though, there are exceptions. The Goto I’m talking about here is one of them… and it can quite literally light your app on fire—programmatically speaking.

One of the hidden gems in Xojo 2025r3 is support for XAML transitions, which makes it possible to add lightweight animations to your UI without writing any custom animation code in Xojo. Instead, you define visual states in XAML and let the XAML engine handle the animation for you.

At a high level, the workflow looks like this:

Define one or more VisualStates in XAML.
Attach transitions to those states (for example, moving or fading an element).
From Xojo code, switch between states using Invoke("GotoState", ...).

Pro Tip
DesktopXAMLContainer subscribes to Operator_Lookup, so you don’t have to call Invoke directly. Instead of writing XAMLContainer1.Invoke("GotoState", "WhichState"), you can simply call XAMLContainer1.GotoState("WhichState").

Visual States in XAML

A VisualState represents a named configuration of UI properties. When you transition from one state to another, XAML can automatically animate the change.

Below is a simple example that animates a fire emoji moving upward, similar to a candle flame flickering or burning upward.

Example XAML

This example uses a TextBlock to display the fire emoji and animates its vertical position with a TranslateTransform. Note that visual states must be defined on a control, so we attach them to a UserControl, allowing it to participate in GotoState transitions.


  
    
      

        
          
                          Storyboard.TargetName="FlameTransform"
              Storyboard.TargetProperty="Y"
              To="40"
              Duration="0:0:1" />
          
        

        
          
                          Storyboard.TargetName="FlameTransform"
              Storyboard.TargetProperty="Y"
              To="-100"
              Duration="0:0:1" />
          
        

      
    

          Text=""
      FontSize="32"
      HorizontalAlignment="Center"
      VerticalAlignment="Bottom">

In this XAML:

The VisualStateGroup named FlameStates contains two states:
- Bottom – moves the emoji downward.
- Top – moves the emoji upward.
The DoubleAnimation targets the Y property of a TranslateTransform.
The transition duration is handled entirely by XAML.

Triggering the Transition from Xojo

Once the visual states are defined, switching between them from Xojo is straightforward. Assuming this XAML is hosted in a XAMLContainer named XAMLContainer1, you can trigger the animation like this:

XAMLContainer1.GotoState("Top")

And to move it back down:

XAMLContainer1.GotoState("Bottom")

Why This Is Powerful

What makes this feature especially useful is that:

The animation logic stays in XAML, where it naturally belongs.
Xojo code remains clean and declarative—just tell the UI which state to go to.
More complex effects (opacity, scaling, rotation, easing functions) can be added without changing any Xojo code.

Here’s a more interesting variation, where the flames drift upward rather than moving in a straight line:

To light up the flames we’ll simply invoke the “On” state:

XAMLContainer1.GotoState("On")

For subtle UI polish—like animated indicators, highlights, or playful effects such as this candle flame—XAML transitions provide a surprisingly powerful new tool in Xojo.

William Yu grew up in Canada learning to program BASIC on a Vic-20. He is Xojo’s resident Windows and Linux engineer, among his many other skills. Some may say he has joined the dark side here in the USA, but he will always be a Canadian at heart.

Optimizing Xojo Code, Part 3: Programmatic Timers and AddHandler

Gabriel Ludosanu — Wed, 14 Jan 2026 16:27:11 +0000

In Part 1 of this Optimizing Xojo Code series, we looked at a working but discouraged approach using a tight loop with DoEvents to keep the UI from freezing. In Part 2, we explored a better alternative by replacing that loop with a Timer control dragged onto a DesktopWindow. This is a simple and effective solution that takes advantage of Xojo’s object-oriented nature.

But what if you need a timer inside a Class or a Module where you can’t drop a visual control?

The Strategy: AddHandler

When you use a Timer control from the library, you double-click it to add an Action event. When we create a Timer in code, we don’t have a “code editor” for it in the same way. Instead, we use the AddHandler command to tell Xojo: “When this timer fires its Action event, run this specific method instead.”

Looking at the Code

Let’s look at how we implement this. In our example project, we have a button that initializes our timer and a separate method to handle the “ticks.”

The Setup

First, we define a property on our window (or class) to hold our timer: mWaitTimer As Timer

Then, in the Pressed event of our button, we instantiate it:

Sub Pressed() Handles Pressed
  ' 1. Cleanup
  If mWaitTimer <> Nil Then
    mWaitTimer.RunMode = Timer.RunModes.Off
    mWaitTimer = Nil
  End If
  
  ' 2. Initialization
  mElapsedMs = 0
  StatusLabel.Text = "0"
  
  ' 3. Create the dynamic timer
  mWaitTimer = New Timer
  mWaitTimer.Period = 100 ' 100 ms tick
  mWaitTimer.RunMode = Timer.RunModes.Multiple
  
  ' 4. The Magic: Link the Action event to our WaitTick method
  AddHandler mWaitTimer.Action, AddressOf WaitTick
End Sub

The Handler (Doing the Work)

Now, let’s create the method named WaitTick. Crucial Note: When using AddHandler for a Timer, the first parameter of your receiving method must be of the type Timer so it knows which object triggered it.

Sub WaitTick(t As Timer)
  mElapsedMs = mElapsedMs + t.Period
  
  If mElapsedMs >= kCountTo Then
    ' Achievement unlocked! Stop the timer and clean up
    t.RunMode = Timer.RunModes.Off
    StatusLabel.Text = "done"
    
    ' It's good practice to remove the handler when done
    RemoveHandler t.Action, AddressOf WaitTick
  Else
    StatusLabel.Text = mElapsedMs.ToString
  End If
End Sub

How It Works

New Timer: We create a new instance of the Timer class in memory.
AddHandler: This command connects the Action event of our new timer to the WaitTick method. The AddressOf operator tells Xojo the memory location of the code we want to run.
Passing the Object: Because WaitTick receives t As Timer as a parameter, you can actually use the same handler for multiple different timers and knows exactly which one is calling for attention.

Wrapping Up

By moving your Timers into code, you take a significant step toward writing more modular Xojo applications. You’ve moved the logic from “Global UI state” into “Managed Code execution.”

In the upcoming Part 4, we’ll look at a shortcut that makes one-off background tasks a breeze: Timer.CallLater.

Until then, happy coding and don’t forget to add your own solution in the Xojo Forum!

Gabriel is a digital marketing enthusiast who loves coding with Xojo to create cool software tools for any platform. He is always eager to learn and share new ideas!

Optimizing Code Series:

Community Contributions to the Xojo Blog: Spotlight On & Guest Posts in 2025

Alyssa Foley — Thu, 18 Dec 2025 20:25:07 +0000

Besides being a great resource for everything from Xojo code tips and snippets to videos that show you cool things, plus news and announcements, the Xojo Blog also strives to build community among the wide range of people who use Xojo around the world. We welcome guest bloggers from the Xojo community and highlight the many different ways people use Xojo through our Spotlight On series.

In 2025, guest authors shared their expertise and real-world experience on the Xojo Blog. These posts bring fresh perspectives, practical solutions and deep technical insight that help other developers learn faster, solve problems more effectively and feel more connected to the Xojo community.

Guest posts in 2025 included:

Martin T., Xojo MVP: Hide the Tabs in an Android MobileTabPanel Using Declares
Martin T., Xojo MVP: Xojo for Android: A Two-Year Retrospective
Martin T., Xojo MVP: It’s here – Android Design Extensions 4.0
Anthony Cyphers, GraffitiSuite and Xojo MVP: Handling Feature Requests
Kem Tekinay, Xojo MVP: MemoryBlocks For Speed: A Case Study
Kem Tekinay, Xojo MVP: The Beauty of Binary Searches
Jürg Otter: Build a Xojo Plugin with GitHub Actions
Ezekiel Burke, Iron Elephant Solutions: Introduction to PocketBase: A Backend Alternative for Xojo Developers

We are always looking for users in the Xojo community who want to share a problem they’ve solved, a creative solution or an interesting project. If you’re interested in contributing a guest post or have an idea you’d like to explore, send it to me at alyssa@xojo.com.

In 2024, we introduced the Spotlight On series to highlight the work Xojo users do and their experiences using Xojo. Since many Xojo users don’t fit the mold of a traditional developer role, Spotlight On offers a fun and approachable way to learn how someone got started with Xojo and how they use it today. Spotlights can focus on an individual developer, a business or a specific Xojo-based project.

Spotlight On features in 2025:

If you’d like to be featured in a future Spotlight On or know someone in the Xojo community whose story would be great to share, we’d love to hear from you. Reach out with suggestions to me at alyssa@xojo.com.

The Xojo Blog is at its best when it reflects the voices, experiences and creativity of the community itself. Whether through guest posts, Spotlight On posts or shared ideas, we look forward to continuing to learn from and celebrate the people who make Xojo what it is.

Alyssa has been with Xojo for over 18 years. She loves solving problems and building community. You can reach her at alyssa@xojo.com or through any of Xojo’s social media channels. If you can’t reach her she’s probably out hiking the beautiful trails through her city of Portland, Oregon, or maybe enjoying a drink with friends by the river.

Optimizing Xojo Code, Part 2: Using a Timer to Keep the UI Responsive

Gabriel Ludosanu — Tue, 25 Nov 2025 16:00:00 +0000

Welcome back! If you missed the first part in this series, check out Optimizing Xojo Code, Part 1: Getting Started, where we dissected the blocking While loop that counted up to kCountTo, updated a label, and kept the UI responsive only by calling App.DoEvents. That code works, but it spends most of its life running on the UI thread. In this tutorial we’ll rebuild that workflow step by step and end up with the first optimized solution: a timer-driven solution that keeps the interface responsive.

Step 1: Let’s sketch the goal

We will need a button that, when pressed, starts a simulated wait that updates a label every 100 ms until a fixed duration (kCountTo, which remains 20000 ms in our example) is reached. So, the timer will fire periodically and handle the counting there. The button simply resets state and starts the timer.

Step 2: Prepare the UI components

Create a DesktopLabel named StatusLabel to display progress.
Add a DesktopButton (caption it “Method 1”) whose Pressed event will kick off the timer.
Finally, place a Timer control onto the window, name it mTimer, set its Period to 100, and set RunMode to Multiple (but leave it off until the button starts it).
Add an Integer property to the window such as mMsWaited to accumulate elapsed milliseconds, and keep kCountTo defined as 20000.

Step 3: Wire up the button

The button handler becomes very simple. Reset the tracked milliseconds, show "0" in the label, ensure the timer runs at 100 ms ticks, and let it fire repeatedly:

Sub Pressed()
  // Reset the tracked elapsed ms and start the timer at 100 ms ticks.
  mMsWaited = 0
  StatusLabel.Text = "0"
  mTimer.Period = 100
  mTimer.RunMode = Timer.RunModes.Multiple
End Sub

This code primes the state but does not block. The timer will perform the actual counting.

Step 4: Let the timer take over

Implement mTimer.Action to run on the UI thread. Each tick adds the timer’s period to mMsWaited, updates the label, and turns itself off once kCountTo has been reached:

Sub Action()
  mMsWaited = mMsWaited + Me.Period

  If mMsWaited >= kCountTo Then
    Me.RunMode = Timer.RunModes.Off
    StatusLabel.Text = "done"
  Else
    StatusLabel.Text = mMsWaited.ToString
  End If
End Sub

This keeps your UI responsive because the timer fires briefly and returns control back to the event loop instead of spinning inside a While loop.

Step 5: Test the flow

Run the app, click the button previously created and watch the label count up and stop at the target value. The timer approach lets other interface interactions remain responsive while still providing clear progress feedback.

What makes this timer driven solution a solid first step?

It shows how you can preserve the original behavior while giving the UI breathing room. It avoids App.DoEvents, reduces tight loops, and still delivers frequent updates. In the next article we’ll build on this idea and explore alternative approaches that continue to improve responsiveness and structure.

Gabriel is a digital marketing enthusiast who loves coding with Xojo to create cool software tools for any platform. He is always eager to learn and share new ideas!

Optimizing Code Series:

Optimizing Xojo Code, Part 1: Getting Started

Gabriel Ludosanu — Thu, 20 Nov 2025 15:50:38 +0000

We all write code that works. It compiles, it runs, and it accomplishes its task. But sometimes, “working” isn’t quite the same as “optimal.” Optimization is about making your applications faster, more responsive, and more efficient, leading to a better experience for the end-users.

Let’s look at a small, functional snippet of Xojo code. It does its job but it has room to grow, to become more polished.

The Code in Question

Important Disclaimer

Year of Code 2025: September Project, Games

Paul Lefebvre — Mon, 08 Sep 2025 17:57:38 +0000

I’m a bit of a retro computing and gaming guy and I enjoy making versions of retro games using Xojo. Although Xojo is not really designed for making games, its Canvas class works well for many kinds of simple games. That means our theme for the Year of Code for September is Games!

One of the first games I made using Xojo was a clone of Atari Tank (based on the version included with the Combat Atari 2600 cartridge).

The core of Tank served as the basis for the XojoWars game contest, where it was re-imagined as a space battle.

Tank is a rather simple game and really needs to be two-players, which is why I added the ability for two people to play it over the network using UDPSocket. This version, which I called NetTank, is available on GitLab.

On the mobile side, I’ve made a 2048 sliding-tiles game and Turtle, which I suppose is kind of an infinite version of Frogger.

However, I’ve had the most fun making clones of Asteroids and Space Invaders. I wrote some about Invaders in xDev Magazine last year, but at some point I’ll get it enhanced enough to share in a blog post.

With that lengthy pre-amble I can now share my game for this month’s project, which is a clone of Asteroids that I uncreatively call Space Rocks. Although an older version of this game has been included with the Xojo examples for several years, this is an updated version with some new features:

Smaller ship to better match proportions of the rocks.
Improved ‘heartbeat’ sound.
High Score is saved and restored.
Level increases as you clear all the rocks, which adds even more rocks that also move faster.
Command or Shift key now work for firing missiles.

Yes, 14340 is my high score. So far. I dare you to beat it!

The full project is on GitHub: https://github.com/paullefebvre/SpaceRocks

Keep in mind that you don’t have to make an arcade-style game. Strategy and turn-based games are a lot of fun and also great candidates for Xojo. For reference, take a look at the web-based Cosmic Trader game that Ricardo made last year. A platform-style or maze game might also be interesting. I can’t wait to see (and play) what you make!

Paul learned to program in BASIC at age 13 and has programmed in more languages than he remembers, with Xojo being an obvious favorite. When not working on Xojo, you can find him talking about retrocomputing at Goto 10 and on Mastodon @lefebvre@hachyderm.io.

Year of Code Project

How to Play:

Each month we’ll announce a new theme and share an example project of our own. Share your projects to the Xojo Forum thread for that month via GitHub (all the links you need are posted above ↑ ). Learn how to use Xojo and GitHub.

The Prizes:

Monthly winners get $100 at the Xojo store. Every month you submit a project is another chance to win the grand prize. The grand prize is $250 cash plus a Xojo Pro license and a year of GraffitiSuite and will be announce in December. Learn more about the prizes.

A XAML Driven UI

William Yu — Tue, 08 Jul 2025 18:01:00 +0000

If you’re building rich, maintainable and scalable user interfaces on Windows, XAML is a great choice. Its clean, declarative syntax and solid separation between design and code can make things easier to manage, and since it’s tightly integrated with the Windows UI system, it can really help take your app from basic to polished.

Migrating Towards XAML

We are slowly and selectively updating our Win32 UI to the more modern WinUI with the help of XAML. You’ll notice some incremental updates in 2025r2 to this effect when you’ve got the Use WinUI (Experimental) build setting selected.

For those who can’t wait for our Win32 UI updates or need more advanced XAML layouts today, the DesktopXAMLContainer provides a powerful and flexible solution with virtually unlimited possibilities.

For a quick refresher, please take a look at a blog post we did when we first introduced the DesktopXAMLContainer control.

A Deeper Dive into XAML

While previous blog posts have showcased the potential of using DesktopXAMLContainer, there’s still much more to explore when it comes to effectively using and understanding XAML within Xojo.

XAML is Asynchronous

Understanding that XAML operates asynchronously helps explain why setting or retrieving a property might not behave as expected—especially when a control hasn’t fully finished constructing. To reliably detect when a XAML control is ready, use the EventTriggered event and check if the eventName is “Loaded”. This is particularly important when working with complex layouts that include XAML controls containing embedded XAML content.

Due to the asynchronous nature of XAML control rendering, the DrawInto mechanism also needed an enhancement. For DesktopXAMLContainer, we’ve added an asynchronous variant DrawIntoAsync, which renders the control and returns a Picture via the supplied callback method.

Sub RenderXAMLPreview(container As DesktopXAMLContainer, targetCanvas As DesktopCanvas)
  // Pass the canvas as the user data so we know where to draw
  container.DrawIntoAsync(AddressOf XAMLDrawComplete, targetCanvas)
End Sub

Sub XAMLDrawComplete(image As Picture, data As Variant)
  If image <> Nil And data IsA DesktopCanvas Then
    DesktopCanvas(data).Backdrop = image
  End If
End Sub

Translating your XAML Experience

Rotating and scaling a XAML layout is as simple as applying the appropriate RenderTransform. In the following example, we rotate a XAML CheckBox within a Timer.Action event. Even though the entire XAML content is updated on each timer interval, the result remains smooth and fluid, demonstrating how well XAML handles dynamic visual changes.

Sub Timer1.Action()
  Static angle As Integer = 0

  angle = angle + 10

  If angle >= 360 Then angle = 0

  Var isChecked As Boolean = True

  If XAMLContainer1.Content <> "" Then isChecked = XAMLContainer1.Value("CheckBox.IsChecked")

  Var xaml As String = "" + _
	"" + _
	"" + _
	"" + _
	"" + _
	"" + _
	""

  XAMLContainer1.Content = xaml
End Sub

Child Controls Inherit the Parent’s Background Brush

When embedding a Transparent DesktopXAMLContainer on top of another, the child will inherit the parent’s background brush. This is useful for basic brushes, but note that it does not support acrylic brushes and won’t automatically adjust offsets for linear gradient brushes.

Layering XAML

WinUI and Win32 controls are rendered on separate layers. WinUI content is composited first, then Win32 controls are drawn on top. As a result, any Win32 control will always appear above WinUI content unless you directly parent a DesktopXAMLContainer control on a Win32 control.

Setting Focus for Embedded XAML Controls

Starting with 2025r2, you can now set focus to a specific control in your XAML layout. Here’s how this looks:

This layout uses a StackPanel with three vertically arranged buttons inside a single DesktopXAMLContainer. To set the focus to Button2, you would invoke Button2.SetFocus

XAMLContainer1.Invoke("Button2.SetFocus")

Extended XAML Features

As mentioned in a previous blog post, we’ve extended XAML with a new markup syntax unique to Xojo. The primary goal of this extension is to improve the reusability of XAML controls. For example, consider a layout that includes three different XAML buttons:

Updating the caption or changing the button’s color would require manual edits to the XAML content string. Wouldn’t it be more convenient if those properties were available directly in the Inspector? With a custom subclass, some tweaks to its Inspector behavior, and the Xojo-specific {XojoBinding} syntax, you can make that happen.

First, create a subclass of the DesktopXAMLContainer, we’ll call this our XAMLButton, and add the properties that you want to expose in the inspector.

We’ll modify the XAML content to use the new {XojoBinding} syntax, which dynamically replaces the placeholder with the corresponding property value from the Inspector based on its name.

Now you can just drag out your subclassed control and adjust its properties directly in the Inspector without needing to manually edit the XAML content.

Make sure to check out our XAML Subclasses example project to see the other possibilities.

Having Fun With XAML

With a better understanding of XAML and how it integrates with Xojo, you’re now ready to build a XAML-driven UI on Windows. In fact, our IDE already makes use of XAML in several areas, like the Splash Screen, the XAML Control Chooser dialog and the toolbar in the Documentation window. The possibilities with XAML are vast, so dive in and explore what it can do for you!

Year of Code 2025: June Project, Cross-Platform Code Class

Gabriel Ludosanu — Tue, 10 Jun 2025 18:00:00 +0000

June’s Year of Code theme is about writing code that works in any type of Xojo project. To demonstrate Xojo’s powerful multi-platform capabilities, this month I’m sharing a practical example: a single data loader and search class you can use—without modification—on Linux, Mac, Windows, Web, Console, iOS, Android or Raspberry Pi!

Introducing `dataClass`: Universal Data Fetching for Xojo

Do you ever wish you could just grab some remote JSON data, search through it, and use it in your app, no matter what kind of project you’re building? That’s exactly what this little, pure-Xojo dataClass allows!

Here’s what it does:

Loads a list of posts from a web API (using standard URLConnection and Xojo’s built-in JSONItem).
Lets you search by any term within the post’s title or body – case-insensitive.
Works unchanged in all Xojo project types – all of them!

Why is This Cool?

By using only built-in classes and avoiding platform-specific quirks, you can build business logic and utility classes that drop straight into your app, whatever the deployment target.

The Complete Source Code

You can copy the full dataClass source from this GitHub repository.

What Will You Build?

Have a favorite cross-platform Xojo technique, class or code module? Show us your own! Share in this month’s Year of Code forum thread.

Stay tuned for more Year of Code 2025 examples, and happy coding!

Gabriel is a digital marketing enthusiast who loves coding with Xojo to create cool software tools for any platform. He is always eager to learn and share new ideas!

Year of Code Project

How to Play:

The Prizes:

Year of Code 2025: May Project, Mobile Apps

Paul Lefebvre — Wed, 07 May 2025 16:00:00 +0000

One of the most common things I love to use my phone for is sharing pictures of my pets with others. We have two cats and a dog: Shawmut, Christofur and Lucy. To be honest, I’m not much a cat person as I find that cats are almost all Richards, constantly causing and getting into trouble. I’m 100% a dog person.

But even though I have my own pets, I do love looking at pet pictures. It’s a simple pleasure, but there’s not much that I find more calming.

Years ago I made a Xojo app (CatsUp) that displayed random cat pictures and it was a lot of fun. And one thing that Xojo excels at is making it fun to create software! That’s what the Year of Code is all about, after all.

Speaking of that, here is the Year of Code topic for May: Mobile Apps.

You can already find CatsUp for iOS and Android included in the Xojo examples, but why stop at just cats? Being a dog guy, I want to see some dogs. All the dogs.

Since I’m not here to start a cats vs. dogs war, I thought, why not both? It turns out I’m not the only one that thinks this as there are actually public web services that serve up pictures of cats and dogs. Web services and mobile apps go together like peanuts butter and chocolate.

The web service for cats that I’ve previously used is called TheCatAPI and is available here: https://thecatapi.com

There is an equivalent dog one called, unsurprisingly, TheDogAPI: https://www.thedogapi.com

For my mobile app this month, I’ve created an all-new app that can show pictures of cats, dogs or both! I call it Pawz.

Pawz app icon

Actually, it’s two apps since I made versions for iOS and Android. Here’s a look:

Pawz on iOS

Pawz on Android

Although they are separate projects, both use basically the same code. In fact there is only about 50 lines of code in each project! The UI itself is just a big ImageViewer that is used to show the picture and several toolbar buttons.

There are three buttons to request a cat picture, dog picture or a surprise picture that could be either. There is also an extra button that lets you share the picture, if you really like it.

You can find the source for the iOS and Android versions of Pawz on GitHub here:

https://github.com/paullefebvre/pawz

Year of Code is all about having some fun making an app. As you can see with Pawz, it doesn’t have to be anything extravagant. Even fun apps can be made quickly with very little code!

I can’t wait to see what great mobile apps you all create this month. Share your creations in the Forum topic.

One More Thing

Although phones and tablets are what we usually think of when talking about Mobile Apps, you know what else is rather mobile? A vehicle! And it just so happens that many vehicle manufacturers, such as Cadillac, Chevy, Ford, Honda, Polestar, Renault and Volvo are now using Android to run their infotainment systems. Technically it’s Android Automotive OS (AAOS), but it is very similar to regular Android.

Because Xojo builds standard Android Runtime (ART) apps, Xojo Android apps also work on Android Automotive OS as a “parked app”. You can test with this by using Android Studio to install an Android Automotive VM for the Emulator. Once you’ve added that you can run your Xojo Android projects on it just like any other device. Pawz works fine in an AAOS Emulator.

Why do I bring this up? No reason, although I believe Xojo 2025 Release 2 pre-release testing might be starting soon…

Year of Code Project

How to Play:

The Prizes:

Year of Code 2025: April Project, User Interface

Gabriel Ludosanu — Tue, 08 Apr 2025 15:30:00 +0000

April’s Year of Code theme is all about a great User Interface, I decided to focus on refining the user experience of an existing application. My project involves a user interface revamp of the familiar built-in ToDo desktop app example provided with Xojo.

The goal wasn’t to add new features but to explore how applying thoughtful UI design principles can significantly enhance the look and feel of an application, making it more visually appealing and cohesive.

Here are some of the key aspects of the UI revamp:

Design System Foundation: I started by establishing a basic design system. This involved defining core visual elements to ensure consistency across the entire application interface.
Typography Definition: Specific styles were defined for how titles and standard text should appear. This helps create a clear visual hierarchy and improves readability.
Consistent Color Palette: A specific set of colors (Light & Dark mode) was chosen and implemented throughout the project, contributing to a unified and more polished look.
Refined ListBox Appearance: The standard DesktopListBox control received some visual tweaks to better align with the overall updated aesthetic.

The aim was to demonstrate how focusing on UI details can elevate even a simple example application.

Here’s a glimpse of the revamped ToDo app:

You can find the complete source code for this UI-enhanced ToDo app project on GitHub.

Stay tuned for more exciting projects as we continue our Year of Code 2025 journey!

Gabriel is a digital marketing enthusiast who loves coding with Xojo to create cool software tools for any platform. He is always eager to learn and share new ideas!

Year of Code Project

How to Play:

The Prizes:

Year of Code 2025: March Project, Web Apps

Gabriel Ludosanu — Wed, 05 Mar 2025 15:04:00 +0000

March’s topic is Web Apps and I’m excited to introduce my project: Quiziverse, a complete quiz and trivia web application.

Quiziverse is designed to engage users with time-limited questions across various categories, making it a fun and interactive way to test knowledge. The application leverages a SQLite database as the backend for all data storage.

Here are some of the key features of Quiziverse:

Admin Area: The app includes a secure admin area, allowing administrators to manage categories and questions easily. Admins can add, edit, or delete questions and categories to keep the trivia fresh and exciting.
Scoreboard: A dynamic scoreboard keeps track of player scores in real-time, fostering a competitive spirit among users. Players can see how they stack up against others, adding an element of fun to the experience.
Time-Limited Questions: Each question comes with a timer, challenging players to think quickly and answer before time runs out. This feature adds to the intensity of the game and keeps players on their toes.
Import JSON Files: To make it easy for admins to add new content, Quiziverse includes a function to import JSON files containing new categories and questions. This feature simplifies content management and allows for quick updates.
Mobile Optimized Design: Understanding the importance of accessibility, Quiziverse is designed to be mobile-friendly. Players can join the trivia challenge from their smartphones or tablets for a seamless experience.

Here’s a sneak peek of the Quiziverse interface:

You can find the complete source code for Quiziverse on GitHub, along with detailed documentation to help you get started.

Stay tuned for more exciting projects as we continue our Year of Code 2025 journey!

Gabriel is a digital marketing enthusiast who loves coding with Xojo to create cool software tools for any platform. He is always eager to learn and share new ideas!

Year of Code Project

How to Play:

The Prizes:

Spotlight On: Offroad Portal

Alyssa Foley — Tue, 11 Feb 2025 20:01:26 +0000

Spotlight On posts focus on Xojo community members. We’ll use this space to tell the stories of people using Xojo, share amazing Xojo-made apps and spread awareness of community resources. If you have an app, a project or a person you want to see featured in Spotlight On, tell us about it!

When I started sharing Spotlight On posts last year, Alvaro Fontán was a Xojo developer that immediately came to mind as someone who should have a spotlight shone on their work. Alvaro has been to multiple Xojo Developer Conferences and is a great guy to get into a conversation with, whether about Xojo or a lot of other topics. His Offroad Portal project is a excellent example of an app that solves a problem and helps a community of people. This project continues to grow with 26 current administrators around the country distributing volunteers to all 50 states.

Mac, Windows or Linux?

I develop in a Mac environment but create applications for Windows, Mac, and Web using Xojo. I primarily use MySQL for all the apps I build and frequently integrate APIs into my projects. I also enjoy incorporating HTML and CSS into Xojo applications to enhance their functionality and user experience.

What do you wish more people would ask/talk to you about regarding programming?

I wish schools provided more opportunities for young minds to explore programming. Today, everyone carries a powerful computer in their pocket, yet most people have no idea how to create custom tools to truly harness its potential. I think Xojo would be an amazing starting point for them.

How would you explain your most recent project to a 5 year old?

Many people with little off-road experience end up getting stuck, facing technical difficulties, or breaking down. To address this, we’ve developed a web application that captures the incident location and allows users to share photos, notes, and contact information. Once a request is submitted, administrators verify the situation and forward it to local volunteers across all 50 states. Currently, we have 3 general administrators, over 26 regular administrators, and more than 13,000 dedicated volunteers. Additionally, we have the support of hundreds of thousands of extra volunteers from local off-road organizations we collaborate with. Our application enables real-time tracking of the recovery process, allowing all involved parties to communicate and coordinate effectively.

What’s next on your “Learn Next” list?

I’m exploring ways to integrate AI to streamline the work of our administrators, as much of their tasks are repetitive and time-consuming.

What is something that has surprised you about coding in the last 10 years?

Sometimes, after spending hours developing a solution and testing it for days, a user will discover a bug by doing something I never thought to try in my own app.

Xojo isn’t the only tool in your kit. What is a piece of software more people should know about?

MySQL, CSS, HTML, Python, AppleScript, JavaScript.

What is something you worked on recently that you want to talk about?

I received a request from an elderly person who had never used a computer and wanted to learn how to use a simple word processor. After searching for an option that was easy enough to simplify saving, loading, printing, and emailing, I couldn’t find anything suitable. So, in just a few hours, I designed a simple interface using Xojo, integrated it with a MySQL back end, and made it extremely user-friendly—with autosaving, non-destructive editing, and buttons to navigate through different versions. There’s one click to print and one click to send a copy by email.

It may sound simple, but the more I thought about it, the more I realized how overwhelming it must be for someone who’s never used a modern UI to complete even the most basic tasks. Xojo turned out to be the perfect tool for quickly developing solutions like this one.

When did you start using Xojo?

1998/99.

How did you find Xojo?

Can’t remember.

What did you first build with Xojo?

Small apps for helping with things around the office.

When was that?

The first apps I developed were in the early 2000s. In 2002, with my background in graphic design and while working for a sales magazine, I created the software we used to produce the magazines, utilizing Xojo and AppleScript with Quark. In 2004, I was hired as a full-time developer for the first time, where I automated the creation of brochures and booklets using Xojo and AppleScript.

By 2007, I advanced further and was hired by a large corporation that owned 25 newspapers. There, I developed a photo database that managed and shared about a million photos using Xojo and MySQL. Later, I built an editorial system that automated newspaper design and managed web content for over 200 editors, reporters, and photographers, integrating Xojo with Joomla and later with WordPress for smaller sub-sites.

When the company was sold, I continued maintaining dozens of systems I had developed, working as a contractor for the new owners.

What do you build with it now?

Our application for Offroad Portal is what consumes most of my time.

Do you earn a living with Xojo?

Yes, absolutely.

Do you use it for your hobbies?

It’s a tool I use, much like someone would use a ruler or a calculator. For me, thinking about implementing solutions with Xojo comes naturally.

What’s your biggest Xojo success?

The newspaper software was my proudest achievement. It was a massive undertaking with countless challenges, but also a lot of fun. I worked on that project for over 12 years, and I vividly remember the code reaching over 120,000 lines. I started as the sole developer, but eventually, I was able to build a small team. This allowed me to delegate parts of the code to other developers and get help with web integration.

Thank you to Alvaro Fontán for answering questions and sharing his Xojo experience with the community. Learn more about Offroad Portal.

If you have an app, a project or a person you want to see featured in Spotlight On, tell us about it!

Year of Code 2025: February Project, Database Apps

Paul Lefebvre — Tue, 11 Feb 2025 16:48:26 +0000

February’s Year of Code 2025 topic is Databases and my project is a SQLite object-relation mapping library that I call Storm.

I first created Storm in 2008 when I was working on consulting projects as a way to more rapidly create database apps for clients. It has been updated over the years and the latest version is available on GitHub:

Storm

An ORM lets you write code like this to set database column values and save them:

Var dodgers As New Team
dodgers.Name = "LA Dodgers"
dodgers.Coach = "Dave Roberts"
dodgers.Save

Team is a table in the database with a corresponding class in Xojo that inherits from Storm.DBObject.

The included demo projects shows how you can implement a simple UI for a database with Team and Player tables.

The docs for Storm are contained within its Github repository wiki.

In addition to accessing the full repository on GitHub, you can also download Storm as a ZIP.

I’ve created a forum topic for you to start sharing your Year of Code projects and I’ll also be sure to include this one as well. Remember, participants can win a $100 to use in the Xojo Store!

Year of Code Project

How to Play:

The Prizes:

Year of Code 2025: January Project, Desktop Apps

Paul Lefebvre — Wed, 15 Jan 2025 19:26:16 +0000

January’s Year of Code 2025 topic is Desktop apps and my project is XojoText.

XojoText is a simple text editor that lets you edit multiple files in one window with a list of files in the left sidebar. You can create new blank documents, documents from a selection in another document or from the clipboard.

It is based on the XojoText example that is included with Xojo, but enhanced in these ways:

Word, character, line counts shown at bottom of editing area.
Recent Items menu.
Window menu.
Saves window position.
Prompts to sae changes.
Contextual menu on files in the sidebar.
Click “x” to close files in the sidebar.

Suggestions for improvements and things to add:

Find/Replace capability.
Printing.
PDF generation.

I’ve created a forum topic for you to start sharing your Year of Code projects and I’ll also be sure to include this one as well.

You can download the XojoText project from GitHub here: https://github.com/paullefebvre/XojoText

Year of Code Project

How to Play:

The Prizes:

Year of Code 2025: Kickoff

Paul Lefebvre — Thu, 09 Jan 2025 16:30:00 +0000

Xojo is kicking off 2025 with something for everyone in the Xojo community, an event that will help new users grow their Xojo coding skills and existing users polish theirs. Back in 2018, we did a “Summer of Code” contest that challenged people to create one project a week through the summer. This was a lot of fun and many interesting apps were made that summer. For 2025, we have expanded that idea out to the entire year! However, instead of one app a week, we will make one app a month from January to November 2025. In December we will give away a grand prize!

The Idea

Early each month we will share a blog post that introduces an app “theme” and recaps the prior month. A week or so later, we will create a Forum topic and post an example project created by one of the Xojo team. To participate in the Year of Code, make a Xojo project that that demonstrates the theme in some way, share it on GitHub to make it easily accessible to everyone and then add a post about it (with your GitHub link) to the Forum topic.

If you have not used GitHub before, here is a blog post on how to share a Xojo project on GitHub.

Ideally, these will be small, focused apps that can be made in a few days. The idea is to have fun creating something that others might learn from. But I guarantee you’ll learn something as well. After all, the best way to get better at coding is to always be coding.

How To Participate

Each month Xojo will announce a new theme and share an example project. Share your own projects in the Xojo Forum thread for that month via GitHub, preferably. Projects with code shared at other sites can be eligible as long as the code is accessible to everyone. Learn how to use Xojo and GitHub.

The Prizes

And yes, there will be prizes for those that participate. Each month all participants (everyone who shares a project that month) will be entered for a chance to win a monthly prize of $100 at the Xojo Store plus a 25% off coupon for GraffitiSuite.¹ The $100 can be applied to any Xojo license purchase or Extras Store item. At the end of 2025, all participants from the year will be entered to win the grand prize of a Xojo Pro license, $250 cash and a free year of GraffitiSuite. The more months in which you participate throughout the year, the more chances you’ll have to win the grand prize.

January’s Theme

Now that it is January (Happy New Year, everyone), the 2025 Year of Code kicks off with this theme: Desktop apps. People have used Xojo to make wonderful desktop apps since its inception in 1998 so this is an ideal first theme that is broad enough to allow anyone to participate. Look for a post next week announcing this months’ project details. Once it is posted, I will start a forum topic for others to share GitHub links to their projects and apps. In early February we will do a blog post that highlights what people made this month and introduce February’s theme.

I hope you will join us for the 2025 Year of Code and I look forward to seeing what you make with Xojo!

#2025YearOfCode

Monthly winners are excluded from future monthly prizes but each monthly participant earns an additional entry into the grand prize drawing. ︎

Year of Code Project

How to Play:

The Prizes:

Brighten Up Your Workspace with New Xojo-Themed Wallpapers!

Gabriel Ludosanu — Thu, 19 Dec 2024 19:26:55 +0000

Dear Xojo Community,

We have something special to share with you! To celebrate our incredible community of developers, we’ve created a brand-new set of nine Xojo-themed desktop wallpapers just for you.

Whether you’re deep into coding your next big project or simply browsing the web, these wallpapers are designed to inspire and bring a fresh look to your workspace.

What’s Included?

A variety of designs to suit all tastes:

Sleek Minimalist Styles: For those who appreciate clean and modern aesthetics.
Xojo Logos and Graphics: Show off your Xojo pride with branded visuals.
Vibrant Abstracts: Liven up your screen with dynamic and colorful patterns.

Here are just a few of the wallpapers included:

Download Your Wallpaper Pack Now!

Ready to give your desktop a makeover? Download the complete wallpaper pack with nine wallpapers to try:

Download Xojo Wallpaper Pack

Spread the Xojo Love

We’d love to see how the wallpapers look on your screens! Share a snapshot of your new setup on social media. Don’t forget to tag us. Your setup might even get featured on our official channels!

Stay Connected

We’re always working on new ways to enhance your Xojo experience. Make sure to follow us on social media for the latest updates, tips, and community highlights.

Thank you for being a part of the Xojo community. We hope these wallpapers add a touch of inspiration to your day!

Happy Coding!

Gabriel is a digital marketing enthusiast who loves coding with Xojo to create cool software tools for any platform. He is always eager to learn and share new ideas!

Create a Tic-Tac-Toe Game in Xojo – Step-by-Step Tutorial

Gabriel Ludosanu — Thu, 05 Dec 2024 15:30:00 +0000

Tic-tac-toe, a classic two-player strategy game where players take turns marking spaces in a 3×3 grid. The objective is simple: be the first to get three of your symbols (X or O) in a row, either horizontally, vertically, or diagonally.

By the end of this tutorial, you will learn how to:

Create a desktop game application in Xojo
Use DesktopCanvas for game board rendering
Implement game logic and state management
Handle user interactions
Add visual effects and animations

Setting Up the Project

Launch Xojo and Create a New Project

Open Xojo IDE
Select “Desktop” project type
Set an Application Name (e.g., “TicTacToe”)
Click “Create”

Creating the TicTacToeGame Custom Control

To have a clear and modular code structure, the game logic and user interface will be implemented in a subclassed DesktopCanvas control.

Here are several key advantages for this approach:

Encapsulation: It neatly bundles all the game’s logic (like checking for wins or handling player turns) and visual elements (drawing the board, animating moves) into a single, self-contained unit. This makes your code cleaner, easier to understand, and simpler to maintain. You can reuse this control in other projects without rewriting everything.
Organization: A custom control promotes better code organization by separating the game’s functionality from the rest of your application’s code. This reduces complexity, especially if your application grows larger and includes other features.
Reusability: Once you’ve created the TicTacToeGame control, you can easily reuse it in other Xojo projects. Just drag and drop it onto a window!
Abstraction: The custom control provides an abstraction layer. The rest of your application doesn’t need to know the internal workings of the TicTacToe game; it only needs to interact with the control’s interface (like starting a new game or getting the current score). This makes it easier to modify or update the game logic without affecting other parts of your application.

Now, here are the steps to create this custom control based on DesktopCanvas:

Click the “Insert” menu
Select “Class”
Name the class “TicTacToeGame”
Set the “Super” to “DesktopCanvas”

TicTacToeGame Class Structure

First, we start by defining some important constants and properties that will be used by the game class.

Constants

Private Const kBoardSize as Number = 3
- Defines the grid dimensions (3×3)
- Used for iterating through board cells
- Provides flexibility for potential future grid size changes
Private Const kCellsPadding as Number = 40
- Controls spacing around X and O symbols
- Ensures symbols don’t touch cell borders
- Provides visual breathing room in cell drawings

Properties

Game State Properties

Public Property boardState(2,2) As Integer
- 2D array representing game board
- Values:
  - 0 = Empty cell
  - 1 = Player X
  - 2 = Player O
Public Property currentPlayer As Integer = 1
- Tracks current turn
- 1 = Player X
- 2 = Player O
Public Property isGameOver As Boolean = False
- Indicates game completion status
- Prevents further moves after game ends

Rendering Properties

Public Property CellHeight As Integer
Get
  Return Height / 3
End Get

Set
  
End Set
End Property

Public Property CellWidth As Integer
Get
  Return Width / 3
End Get

Set
  
End Set
End Property

CellHeight, CellWidth As Integer
- Computed properties
- Dynamically calculate cell dimensions based on canvas size
- Divide width/height by 3 for equal grid cells
ColorBoard, ColorX, ColorOAs Color
- Store color schemes for board elements
- Support dark/light mode themes

Animation Properties

Public Property animationProgress As Double
- Tracks symbol drawing animation
- Ranges from 0 to 1
- Controls symbol scaling during placement
Public Property animationTimer As Timer
- Manages animation timing
- Triggers smooth symbol rendering

Interaction Tracking

Public Property HoverCol As Integer = -1and Public Property HoverCol As Integer = -1
- Track mouse position over grid
- Enable hover effect on empty cells
- Provide visual feedback during gameplay

Scoring Properties

scoreX and scoreOAs Integer
- Track win counts for each player
- Updated after each game

The constants and properties defined above will be crucial in the next steps, allowing us to implement the key features: encapsulation of game logic and rendering, flexible customization, responsive dynamic sizing and interactions, and an enhanced user experience through animations and hover effects.

Event Definitions

To make sure our game class is complete, we will create two custom event definitions that will be used later throughout the game.

GameStatus Event

Event GameStatus(info As String, playerTurn As String = "", scoreX As Integer, scoreO As Integer)

Purpose: Tracks and communicates the current state of the game
Parameters:
1. info: A string describing the current game status
2. playerTurn: Optional parameter indicating which player’s turn it is
3. scoreX: Current score for Player X
4. scoreO: Current score for Player O

GameOver Event

Event GameOver(result As String, scoreX As Integer, scoreO As Integer)

Purpose: Signals the conclusion of the game with a winner or draw
Parameters:
1. result: A string describing the game’s final outcome (e.g., “X Wins”, “O Wins”, “Draw”)
2. scoreX: Final score for Player X
3. scoreO: Final score for Player O

Event Handlers in Tic-Tac-Toe Game

Closing Event

Sub Closing() Handles Closing
  // This event ensures that the animation timer is properly disabled and its handler is removed to prevent memory leaks or unexpected behavior.
  // Clean up the animation timer when the control is closing
  If animationTimer <> Nil Then
    animationTimer.Enabled = False
    RemoveHandler animationTimer.Action, AddressOf AnimationStep
    animationTimer = Nil
  End If
End Sub

Ensures clean resource management
Disables and removes timer to prevent memory leaks
Called when the control is being destroyed

MouseDown Event

Function MouseDown(x As Integer, y As Integer) Handles MouseDown as Boolean
  // This event handles mouse click actions on the game board.
  // It checks if the game is over; if not, it calculates the row and column of the click.
  // If the clicked cell is empty, it records the player's move, checks for a winner, and toggles the current player.
  
  // Handle mouse clicks on the game board
  If isGameOver Then
    Return True
  End If
  
  // Calculate the row and column based on the click position
  Var row As Integer = y \ CellHeight
  Var col As Integer = x \ CellWidth
  
  // If the clicked cell is empty, make a move
  If boardState(row, col) = 0 Then
    boardState(row, col) = currentPlayer
    StartAnimation(row, col)
    
    // Reset hover position after a move
    hoverRow = -1
    hoverCol = -1
    
    // Refresh only the affected cell
    Refresh(col * CellWidth, row * CellHeight, CellWidth, CellHeight)
    
    // Check for a winner or a draw
    Var winner As Integer = CheckWinner()
    If winner > 0 Then
      UpdateScore(winner)
      GameStatus("Player " + PlayerSymbol(winner) + " wins!", scoreX, scoreO)
      isGameOver = True
      GameOver("Player " + PlayerSymbol(winner) + " wins!", scoreX, scoreO)
      
      // Refresh the entire board to show the winning line
      Refresh(True)
    ElseIf Me.IsBoardFull() Then
      GameStatus("It's a draw!", scoreX, scoreO)
      isGameOver = True
      GameOver("Draw", scoreX, scoreO)
    Else
      // Switch to the other player
      currentPlayer = If(currentPlayer = 1, 2, 1)
      GameStatus("Player " + PlayerSymbol(currentPlayer) + "'s turn", PlayerSymbol(currentPlayer), scoreX, scoreO)
    End If
  End If
  
  Return True
End Function

Handles player moves
Validates move legality
Checks for win/draw conditions
Switches players

MouseExit and MouseMove Events

Sub MouseExit() Handles MouseExit
  // This event is triggered when the mouse cursor exits the game board area.
  // It clears the hover effect to avoid leaving any visual artifacts on the board when the mouse is moved away.
  
  If hoverRow >= 0 And hoverRow < kBoardSize And hoverCol >= 0 And hoverCol < kBoardSize Then
    Var oldHoverRow As Integer = hoverRow
    Var oldHoverCol As Integer = hoverCol
    
    hoverRow = -1
    hoverCol = -1
    
    // Refresh only the cell that was previously hovered
    Refresh(oldHoverCol * CellWidth, oldHoverRow * CellHeight, CellWidth, CellHeight)
  End If
End Sub

Sub MouseMove(x As Integer, y As Integer) Handles MouseMove
  // This event handles mouse movement over the game board.
  // It updates the hover effect when the mouse moves to a new cell, providing visual feedback.
  
  If Not isGameOver Then
    Var newHoverRow As Integer = y \ CellHeight
    Var newHoverCol As Integer = x \ CellWidth
    
    If newHoverRow <> hoverRow Or newHoverCol <> hoverCol Then
      Var oldHoverRow As Integer = hoverRow
      Var oldHoverCol As Integer = hoverCol
      
      hoverRow = newHoverRow
      hoverCol = newHoverCol
      
      // Refresh the old hover cell (if it was valid)
      If oldHoverRow >= 0 And oldHoverRow < 3 And oldHoverCol >= 0 And oldHoverCol < 3 Then
        Refresh(oldHoverCol * CellWidth, oldHoverRow * CellHeight, CellWidth, CellHeight)
      End If
      
      // Refresh the new hover cell
      Refresh(hoverCol * CellWidth, hoverRow * CellHeight, CellWidth, CellHeight)
    End If
  End If
End Sub

Provides visual hover feedback
Tracks mouse movement across grid
Refreshes only changed cells

Opening Event

Sub Opening() Handles Opening
  // This event initializes the board colors based on the current system theme (dark mode or light mode) and starts a new game.
  
  // Set up colors of the board lines, for the X's and O's
  If Color.IsDarkMode = True Then
    ColorBoard = Color.RGB(178, 161, 149)
    ColorX = Color.RGB(228, 182, 88)
    ColorO = Color.RGB(253, 161, 97)
  Else
    ColorBoard = Color.RGB(130, 110, 92)
    ColorX = Color.RGB(228, 182, 88)
    ColorO = Color.RGB(253, 161, 97)
  End If
  
  NewGame()
End Sub

Initializes color theme
Supports dark and light modes
Starts a new game automatically

Paint Event

Sub Paint(g As Graphics, areas() As Rect) Handles Paint
  // This event is responsible for drawing the game board, hover effects, player symbols (X's and O's), and the winning line.
  // It is called whenever the game board needs to be redrawn.
  
  // Draw the board
  g.DrawingColor = ColorBoard
  g.DrawLine(Width/3, 0, Width/3, Height)
  g.DrawLine(2*Width/3, 0, 2*Width/3, Height)
  g.DrawLine(0, Height/3, Width, Height/3)
  g.DrawLine(0, 2*Height/3, Width, 2*Height/3)
  
  // Draw hover effect
  DrawHoverEffect(g)
  
  // Draw X's and O's
  g.PenSize = 8
  For row As Integer = 0 To 2
    For col As Integer = 0 To 2
      If boardState(row, col) = 1 Then
        DrawX(g, row, col)
      ElseIf boardState(row, col) = 2 Then
        DrawO(g, row, col)
      End If
    Next
  Next
  
  // Draw winning line if the game is over
  If isGameOver Then
    DrawWinningLine(g)
  End If
End Sub

Renders game board
Draws grid lines
Manages visual game state
Supports dynamic rendering

Animation and Drawing Methods

1. AnimationStep

Public Sub AnimationStep(sender As Timer)
  // This method is called by the animation timer (animationTimer property) to progress the animation of a newly placed symbol.
  // It increments the animation progress and stops the timer once the animation is complete.
  
  // Progress the animation
  animationProgress = animationProgress + 0.1
  If animationProgress >= 1 Then
    animationTimer.Enabled = False
    animationProgress = 1
  End If
  
  // Refresh only the cell being animated
  Refresh(lastPlayedCol * CellWidth, lastPlayedRow * CellHeight, CellWidth, CellHeight)
  
  // If the animation is complete, stop the timer
  If animationProgress >= 1 Then
    animationTimer.Enabled = False
  End If
End Sub

Manages symbol placement animation
Gradually scales symbol from 0 to 1
Updates only the recently played cell

2. DrawX and DrawO

Sub MouseExit() Handles MouseExit
  // This event is triggered when the mouse cursor exits the game board area.
  // It clears the hover effect to avoid leaving any visual artifacts on the board when the mouse is moved away.
  
  If hoverRow >= 0 And hoverRow < kBoardSize And hoverCol >= 0 And hoverCol < kBoardSize Then
    Var oldHoverRow As Integer = hoverRow
    Var oldHoverCol As Integer = hoverCol
    
    hoverRow = -1
    hoverCol = -1
    
    // Refresh only the cell that was previously hovered
    Refresh(oldHoverCol * CellWidth, oldHoverRow * CellHeight, CellWidth, CellHeight)
  End If
End Sub

Sub MouseMove(x As Integer, y As Integer) Handles MouseMove
  // This event handles mouse movement over the game board.
  // It updates the hover effect when the mouse moves to a new cell, providing visual feedback.
  
  If Not isGameOver Then
    Var newHoverRow As Integer = y \ CellHeight
    Var newHoverCol As Integer = x \ CellWidth
    
    If newHoverRow <> hoverRow Or newHoverCol <> hoverCol Then
      Var oldHoverRow As Integer = hoverRow
      Var oldHoverCol As Integer = hoverCol
      
      hoverRow = newHoverRow
      hoverCol = newHoverCol
      
      // Refresh the old hover cell (if it was valid)
      If oldHoverRow >= 0 And oldHoverRow < 3 And oldHoverCol >= 0 And oldHoverCol < 3 Then
        Refresh(oldHoverCol * CellWidth, oldHoverRow * CellHeight, CellWidth, CellHeight)
      End If
      
      // Refresh the new hover cell
      Refresh(hoverCol * CellWidth, hoverRow * CellHeight, CellWidth, CellHeight)
    End If
  End If
End Sub

Draws X and O symbols with animation
Centers symbol in cell
Scales symbol based on animation progress

3. DrawHoverEffect

Public Sub DrawHoverEffect(g As Graphics)
  // This method draws a semi-transparent hover effect over the cell that the mouse is currently hovering over.
  // It only draws the effect if the game is not over and the hovered cell is empty.
  
  If Not isGameOver And hoverRow >= 0 And hoverRow < 3 And hoverCol >= 0 And hoverCol < 3 Then
    If boardState(hoverRow, hoverCol) = 0 Then
      g.DrawingColor = Color.RGB(255, 255, 255, 250) // Semi-transparent white
      g.FillRectangle(hoverCol * CellWidth, hoverRow * CellHeight, CellWidth, CellHeight)
    End If
  End If
End Sub

Provides visual feedback on hoverable cells
Applies semi-transparent white overlay
Only affects empty, unplayed cells

4. DrawWinningLine

Public Sub DrawWinningLine(g As Graphics)
  // This method draws a semi-transparent green line over the winning combination on the board if a player has won.
  
  // Draw the winning line if there is a winner
  If winningLine.Count = 6 Then
    g.DrawingColor = Color.RGB(0, 255, 0, 128) // Semi-transparent green
    g.PenSize = 2
    
    Var startX As Integer = winningLine(1) * cellWidth + cellWidth / 2
    Var startY As Integer = winningLine(0) * cellHeight + cellHeight / 2
    Var endX As Integer = winningLine(5) * cellWidth + cellWidth / 2
    Var endY As Integer = winningLine(4) * cellHeight + cellHeight / 2
    
    g.DrawLine(startX, startY, endX, endY)
  End If
End Sub

Draws a semi-transparent green line
Highlights the winning combination

Game Logic Methods

1. CheckWinner

Public Function CheckWinner() As Integer
  // This method checks the board for a winner by evaluating rows, columns, and diagonals.
  // It returns the winning player (1 or 2) or 0 if there is no winner.
  
  
  // Check rows
  For i As Integer = 0 To kBoardSize - 1
    If boardState(i, 0) <> 0 And boardState(i, 0) = boardState(i, 1) And boardState(i, 1) = boardState(i, 2) Then
      winningLine = Array(i, 0, i, 1, i, 2)
      Return boardState(i, 0)
    End If
  Next
  
  // Check columns
  For j As Integer = 0 To 2
    If boardState(0, j) <> 0 And boardState(0, j) = boardState(1, j) And boardState(1, j) = boardState(2, j) Then
      winningLine = Array(0, j, 1, j, 2, j)
      Return boardState(0, j)
    End If
  Next
  
  // Check diagonals
  If boardState(0, 0) <> 0 And boardState(0, 0) = boardState(1, 1) And boardState(1, 1) = boardState(2, 2) Then
    winningLine = Array(0, 0, 1, 1, 2, 2)
    Return boardState(0, 0)
  End If
  
  If boardState(0, 2) <> 0 And boardState(0, 2) = boardState(1, 1) And boardState(1, 1) = boardState(2, 0) Then
    winningLine = Array(0, 2, 1, 1, 2, 0)
    Return boardState(0, 2)
  End If
  
  winningLine.ResizeTo(-1)
  Return 0 // No winner yet
End Function

Scans board for winning combinations
Returns winning player or 0
Stores winning line coordinates

2. IsBoardFull

Public Function IsBoardFull() As Boolean
  // This method checks if the board is completely filled with no empty cells.
  // It returns true if the board is full, otherwise false.
  
  // Check if the board is full (no empty cells)
  For i As Integer = 0 To kBoardSize - 1
    For j As Integer = 0 To kBoardSize - 1
      If boardState(i, j) = 0 Then
        Return False
      End If
    Next
  Next
  Return True
End Function

Checks if all cells are occupied
Determines if game is a draw

3. NewGame

Public Sub NewGame()
  // This method resets the game state to start a new game.
  // It clears the board, resets the current player to Player 1, and updates the game status.
  
  // Reset the game state for a new game
  For i As Integer = 0 To 8
    boardState(i \ 3, i Mod 3) = 0
  Next
  currentPlayer = 1
  isGameOver = False
  animationProgress = 1
  If animationTimer <> Nil Then
    animationTimer.Enabled = False
  End If
  GameStatus("Player " + PlayerSymbol(currentPlayer) + "'s turn", scoreX, scoreO)
  winningLine.ResizeTo(-1)
  Refresh()
End Sub

Resets game to initial state
Clears board
Resets player turn

4. UpdateScore

Public Sub UpdateScore(winner As Integer)
  // This method updates the score for the winning player by incrementing the respective score counter.
  
  // Update the score for the winning player
  If winner = 1 Then
    scoreX = scoreX + 1
  ElseIf winner = 2 Then
    scoreO = scoreO + 1
  End If
End Sub

Increments score for winning player

Utility Methods

1. PlayerSymbol

Public Function PlayerSymbol(player As Integer) As String
  // This method returns the symbol ('X' or 'O') corresponding to the player number (1 or 2).
  Return If(player = 1, "X", "O")
End Function

Converts player number to symbol

2. StartAnimation

Public Sub StartAnimation(row As Integer, col As Integer)
  // This method initializes and starts the animation for a newly placed symbol,
  // by setting the target cell and resetting the animation progress.
  
  // Start the animation for a newly placed symbol
  lastPlayedRow = row
  lastPlayedCol = col
  animationProgress = 0
  
  If animationTimer = Nil Then
    animationTimer = New Timer
    animationTimer.Period = 16 // equivalent of 60 FPS
    AddHandler animationTimer.Action, AddressOf AnimationStep
  End If
  
  animationTimer.Enabled = True
  animationTimer.RunMode = Timer.RunModes.Multiple
End Sub

Initializes symbol animation
Sets up timer for smooth rendering

Usage Instructions

To use the TicTacToeGame control in your Xojo project:

Drag and Drop: Drag the TicTacToeGame icon (it should look like a small canvas) from the Navigator (the left side of the IDE) onto your Window1 or any other window you want to use.
- A TicTacToeGame instance will appear on the window. You can resize and position it as needed.
Initialize: While not strictly required, you might want to initialize the game in the Window1.Open event handler. This ensures the game is ready to play as soon as the window opens. You can do this by adding the following code to the Window1.Open event:
// Assuming 'TicTacToeGame1' is the name of your control instance on the window
TicTacToeGame1.NewGame
This will call the NewGame method of your custom control, setting up the board and starting a new game.
Run the Project: Run your Xojo project. You should see the TicTacToe board on your window, ready to play!

I highly suggest downloading the complete TicTacToe Xojo project for the game. If you find anything unclear, refer to this tutorial for explanations. Download the Xojo project.

Next Steps:

Congratulations! You’ve successfully built a fully functional, modern tic-tac-toe game in Xojo. This project is a great foundation for exploring more advanced game development concepts, animations and how to make custom UI elements based on Xojo’s powerful DesktopCanvas control.

Now that you understand the basics, here are some ideas to take your TicTacToe game to the next level:

Artificial Intelligence (AI): Implement a simple AI opponent so players can play against the computer. You could start with a random move generator and then explore more sophisticated algorithms like Minimax. Xojo already provides fully working AI integration examples.
Different Game Modes: Add options for different board sizes (e.g., 4×4, 5×5) or variations of tic-tac-toe.
Online Multiplayer: Enable players to challenge each other online using Xojo’s networking capabilities.
Enhanced UI/UX: Improve the user interface with custom graphics, sound effects, and a more polished look and feel. Consider adding a timer.
Go Multiplatform: Port the TicTacToeGame class to Mobile and Web projects.

We encourage you to experiment, get creative, and explore these possibilities. Share your creations and connect with other Xojo developers in the forums to learn and grow together. Happy coding!

Gabriel is a digital marketing enthusiast who loves coding with Xojo to create cool software tools for any platform. He is always eager to learn and share new ideas!

Creating Your Own Programming Language

Paul Lefebvre — Thu, 21 Nov 2024 17:38:39 +0000

Computerphile is one of my favorite YouTube channels. It’s full of “videos about computers & computer stuff”, usually pretty nerdy things. One of their recent videos is called Creating Your Own Programming Language and it is an interesting watch. In just about 20 minutes, Dr Laurie Tratt (of King’s College London) creates a very simple programming language in just a few lines of code.

Dr. Tratt creates this unnamed language using Python and I thought it might be fun to quickly port it over to Xojo. Before we look at the Xojo version, here’s a brief summary of the language, which is about as stripped down as can be.

First, to simplify things it uses RPN (Reverse Polish Notation, aka postfix) for the expressions. If you’re not familiar with this, it is a different way of writing an expression where the operator comes after the operands. For example you would normally (using infix notation) write an expression to add two numbers like this:

2 + 4

In RPN you would write it like this:

2 4 +

It looks a little odd, but it is much easier to write the code for this, primarily because it removes the need for parentheses and order of operations.

The syntax for this simple language only supports a few things:

Integer literal values
+, *, – math operators
variable assignment
>= comparison operator
while…end loop

Lastly, this little language also has no error checking and its only output is the contents of any variables.

With all that said, it does run the program demonstrated in the video, which calculates the factorial of a number:

n = 5
r = 1
while n 1 >=
  r = r n *
  n = n 1 -
end

I call the Xojo version PLX and here it is showing the result of running the above program to calculate the factorial of 5:

The RPN certainly makes that code look odd! Few languages today use RPN for this reason, although it was used by some older HP calculators and the Forth programming language.

The Xojo port primarily matches the Python version since the two languages are not that dissimilar. However the code makes heavy use of the split command to do rudimentary parsing and Python does have a version of split that returns a maximum number of splits or a split that discards empty items. In the Util module is are Xojo versions of these as extension methods of String.

I also took the liberty of using longer variable names in the Xojo code. I’ve found academics like to use too-short names for things, perhaps because of their math background or maybe they don’t type well. Either way, it can make sample code harder to read in my opinion.

The Evaluator class contains the “language” and it has two methods: Evaluate and EvaluateExpression. There is also one property, Variables, that contains the list of variables and their values.

The Evaluate method parses things and calls EvaluateExpression when needed:

Public Function Evaluate(source As String) As JSONItem
  Variables = New JSONItem
  source = source.ReplaceLineEndings(EndOfLine)
  Var lines() As String = source.Split(EndOfLine, True)
  Var programCounter As Integer = 0
  
  While programCounter < lines.Count
    Var line As String = lines(programCounter).Trim
    Var parts() As String = line.Split(" ", 1)
    Select Case parts(0)
    Case "while"
      parts = line.Split(" ", 1)
      If EvaluateExpression(parts(1)) = 1 Then
        // The conditon was true, so process the code in the loop.
        programCounter = programCounter + 1
      Else
        // The condition was false, so search ahead for the "end", skipping the loop.
        parts = lines(programCounter).Split(" ", 1)
        While parts(0) <> "end"
          programCounter = programCounter + 1
          parts = lines(programCounter).Split(" ", 1)
        Wend
        programCounter = programCounter + 1
      End If
    Case "end"
      // Search back for the while to evaluate its expression again.
      parts = lines(programCounter).Split(" ", 1)
      While parts(0) <> "while"
        programCounter = programCounter - 1
        parts = lines(programCounter).Split(" ", 1)
      Wend
    Else
      // Variable assignment and expression.
      parts = line.Split(" ", 2)
      
      Var name As String = parts(0)
      Var expr As String = parts(2)
      
      Variables.Value(name) = EvaluateExpression(expr)
      
      programCounter = programCounter + 1
    End Select
  Wend
  
  Return Variables
End Function

EvaluateExpression handles the operators and operands in expressions:

Public Function EvaluateExpression(expr As String) As Integer
  Var tokens() As String = expr.Split
  Var stack() As Integer
  
  For Each token As String In tokens
    If IsNumeric(token) Then
      // Push the literal value on the stack.
      stack.Add(Integer.FromString(token))
    ElseIf Variables.HasKey(token) Then
      // This is a variable so push its value on the stack.
      stack.Add(Variables.Value(token).IntegerValue)
    Else
      // Process various operators using what is on the stack.
      Var rhs As Integer = stack.Pop
      Var lhs As Integer = stack.Pop
      
      If token = "+" Then
        stack.Add(lhs + rhs)
      ElseIf token = "*" Then
        stack.Add(lhs * rhs)
      ElseIf token = "-" Then
        stack.Add(lhs - rhs)
      ElseIf token = ">=" Then
        If lhs >= rhs Then
          stack.Add(1)
        Else
          stack.Add(0)
        End If
      End If
    End If
  Next
  
  Return stack(0)
End Function

I do encourage you to watch the video so you get Dr. Tratt’s full explanations. He walks through building this up in pieces, whereas I am only showing the final version here.

Download PLX.

Play around with the source, perhaps extending it with your own commands.

Cosmic Trader: A Game Built with Xojo Web

Ricardo Cruz — Tue, 17 Sep 2024 20:09:12 +0000

I truly enjoy creating things with Xojo. This time, I built a little game with Xojo Web just to see if it was possible. In this post, I will talk about what I liked and what I had difficulties with while programming it.

The reason to create this kind of project, as the maintainer of the Xojo Web framework, is to find pain points and bugs in larger projects, as the issue reports I normally work with are very specific sample projects demonstrating a bug. The next Xojo release, 2024r3, will come with some bug fixes I found while building Cosmic Trader.

Final Result

Let’s begin at the end. Give the game a try and then come back to this blog post. It’s a very simple space trading game, don’t expect too much from it, but I hope you enjoy it.

It can be played from the following URL:
https://cosmictrader.rcruz.es

The Challenge

Create a simple game using Xojo Web, without writing a line of JavaScript, or even using the Web SDK.

In addition, while all this could be just a couple of WebListBox and WebButton controls, I really wanted this game to look like an actual game. As you can see in the screenshots, unless you check the code, nobody will notice (or care!) it’s a Xojo Web application.

As you can imagine, Xojo Web was not created with the idea of building web based games. In order to make it easier for the developer, everything is processed server side: When you press a button, the browser will send a notification to the server, your code written in Xojo will be executed and, finally, the response will be sent back to the browser.

That’s the known knowns. I knew the latency would be a problem, but I’ve found more.

What I’ve Enjoyed

Implementing the first prototype was really easy using the tools Xojo Web offers. For example, in the prototype, instead of the custom popover I ended up building for buying and selling, I just used some contextual menus:

You can go very far and prototype your idea very quickly this way. This helped me to deploy and share the game with a few friends and gather some initial feedback.

Once you have the game mechanics, you can iterate as much as you want until the game is ready. The welcome screen with the game logo wasn’t added until very late. Just so you can compare, this is how the current version looks:

Much better!

I’ve really enjoyed being able to use Containers for building custom controls and reusing them. Also, being able to just drop some images into the IDE and assign them to image viewers is very pleasant.

From the IDE preview, it’s deadly easy to identify where my ship entity is, click on it, then edit the code if needed:

Navigating through the project is a joy compared to jumping through piles of code in plain text files.

I’ve also found having Control Sets useful, allowing me to implement the Pressed event just once for all the planets, for example.

Roadblocks and How I Handled Them

That said, I found some difficulties. All of them were due the nature of web projects. When you travel from one planet to another, you will hear an engine sound. It would be much (much!) easier to know when I should stop the sound in a Desktop or a Mobile project.

Having to deal with latency means I had to use a timer and guess more or less how many milliseconds is reasonable before stopping the sound. Using the same amount of time as the animation would cause the sound to continue playing after the ship had arrived at its destination, again due the latency.

Where I spent most of the time was optimizing the images. Specifically, delivering the images. When you play the game locally, everything works pretty fast. I found this flickering issue once I deployed the game for the first time using the custom popovers:

This is something that you just don’t need to think about with the typical database application you normally build with Xojo Web. But if you build a lot of images on the fly, it will mean the browser will have to download them again and again.

In order to optimize it, instead of using a WebImageViewer.Image property, you could store WebImage instances. Using WebImageViewer.URL pointing to the WebImage.URL property of those instances will make the browser first check if it has downloaded that URL before. If so, bingo! It will reuse the image without having to re-download it again.

If you go back to the game, cache is the reason behind the “New Game” button, from the welcome screen, and the “Sell Everything” button having the same width. It wasn’t a coincidence, that means a browser cache hit.

Last but not least, when I shared the URL with some friends, they told me it didn’t look great on mobile. So I had to change the stats a bit so they fit in a mobile screen. While in this case it wasn’t a big deal, at Xojo we know making responsive web applications must be easier, and we will improve the workflow in future releases.

It would be much easier to use the Web SDK for some of those controls. If I was creating a game seriously, I’d 100% personally prefer creating some custom controls to allow some code to run on the browser side, using the Web SDK with JavaScript or TypeScript, to avoid dealing with latency or round-trips.

Using AI for Creativity

I personally don’t find any joy using AI for coding. I always end up frustrated by how it hallucinates and keep proposing, very confidently, things that just don’t exist. I understand some might like it but, in the end, I just like coding.

But for a second brain and helping me with (my lack of) creativity… oh boy, that’s another story. The game idea came from a conversation with Claude AI. Initially, it came up with tons of features and ideas that would require me (and a team of another 100 people) to work on it for several years. I kept asking it to simplify it until I felt it was approachable:

After implementing the game mechanics, I felt the game didn’t make any sense. I mean, why 30 turns exactly? Why 5 planets? Why can’t I go somewhere else to trade? Why do I have to trade at all?… While it is still fiction, the AI wrote a reasonable background story that added some depth to the game. That’s what you will be reading when playing Cosmic Trader.

No spoilers, but there are still a few features and game mechanics, recommended by the AI, that I left for future releases.

While working on this game, I even had a little ant invasion at home. The AI came up with a multiplayer ant colony simulator game idea that I will probably never implement, but who knows!

For the logo, I had some spare credits to use with DreamStudio. I had to retouch it using Affinity Photo, but that’s it:

All in all, and while a team of real humans will always be much better, I reckon AI helped me a lot with this experiment.

Credits and Acknowledgements

I could focus on building the game thanks to using the Kenney game assets. The background music author is Dmitrii Kolesnikov, make sure to check his profile.

Thanks to Claude for being my second brain for this project. And, of course, thanks to Xojo. It wouldn’t be as fun without it.

Conclusion

I enjoyed building this project a lot. I learned things, and I fixed some bugs I found. Did you know you couldn’t add a WebStyle CSS transition without adding other styles? Me neither, but it will be fixed in Xojo 2024r3.

Happy coding!

Ricardo has always been curious about how things work. Growing up surrounded by computers he became interested in web technologies in the dial-up connections era. Xojo has been his secret weapon and language of preference since 2018. When he’s not online, chances are he will be scuba diving … or crocheting amigurumis. Find Ricardo on Twitter @piradoiv.

Spotlight On: GraffitiSuite

Xojo — Thu, 13 Jun 2024 16:00:00 +0000

GraffitiSuite is a series of user interface components for Xojo developers. With a powerful data grid component for web, an extensive WYSIWYG HTML content editor, and beautiful animated in-window modal popups for Desktop, GraffitiSuite classes have helped people make stunning UIs for their Xojo-made apps since 2003. Anthony Cyphers, GraffitiSuite’s founder, is a well-known name in the Xojo community and a Xojo MVP; and he volunteered to be our first Spotlight On guest. GraffitiSuite is offering 10% off this month only! Use coupon code SPOTGS10 in June go get 10% off GraffitiSuite.

10 Questions with Anthony Cyphers of GraffitiSuite

Mac, Windows or Linux?

Mac, primarily, but I’m comfortable pretty much anywhere since I tend to have a set OS for specific things. macOS for work, Windows for play, Linux for servers. I keep multiple machines for each hanging around here.

What do you wish more people would ask you about when it comes to GraffitiSuite?

I wish people would show me their project and ask how GraffitiSuite can help them more.

How would you explain your most recent project to a 5 year old?

I make pretty things that help people use computers.

What’s next on your Learn Next list?

I’ve been deep in TypeScript for the last six months — and enjoying it — expanding from my JavaScript skills. The plan is to continue that journey and use it to augment Xojo Web as much as I can. This means rewriting some Xojo Web components with more modern, useable, performant and attractive controls.

When do you think of solutions for big bugs?

Usually when I’m trying (and failing) to sleep or when watching something on TV that I’m really not paying any attention to.

What programming moments made you think “Wow, I love my job so much.”

That feeling of triumph when you spend an inordinate amount of time working on an idea without doing any actual testing, then you hit “Run” and it just works. As though the stars aligned in that moment to say “Yeah, you can have this one, but the next one will be harder” — and it usually is.

What’s something that has surprised you about coding in the last 10 years?

Meh. Not much.

What’s a cool piece of software more people should know about?

The obvious answer would be Xojo, but I’m also very impressed with a lot of software that I use. And, in keeping with the Xojo theme:

Version Tracker from Tim Parnell immediately springs to mind as an indispensable part of my toolkit.
Apple Profile Triage from Greg O’Lone has saved me from some headaches.
Beauty Shot by Ricardo Cruz is wonderful for tweaking screenshots.

What’s the coolest thing you worked on recently?

I’d have to say it’s my web application firewall (WAF) for Xojo Web called GraffitiFirewall. I spent some time reading white papers, tutorials, specs, and just playing with other implementations. I’m really happy with how it’s turned out and excited to add more features over time that may help protect Xojo users’ web apps. I work on a lot in a given week, both new and old stuff, but this one feels right.

Music or no music while coding?

Doesn’t matter. It’s all background noise. I often stream an old TV show like The X-Files, Law & Order, The Big Bang Theory, or Adventures of the Gummi Bears.

Thank you to Anthony Cyphers for answering our questions and for being a rock in the Xojo community. If you want to learn more about what GraffitiSuite can do for you, visit graffitisuite.com. And take 10% off in June with coupon code SPOTGS10.

Anthony G. Cyphers is the Lead Developer and Sole Proprietor of GraffitiSuite Solutions, and has been providing custom Xojo components and contract development since 2003 and is a Xojo MVP.

SQL 50th Anniversary

Paul Lefebvre — Mon, 15 Apr 2024 15:19:40 +0000

SQL is 50 years old! It was first introduced in a 1974 paper titled “SEQUEL: A STRUCTURED ENGLISH QUERY LANGUAGE” by Donald Chamberlin and Raymond Boyce who were part of the IBM Research Laboratory in San Jose California.

This paper probably explains the biggest issue regarding SQL that persists to this day: its pronunciation.

I always flip between saying “sequel” and “ess cue ell” depending on context. The authors used SEQUEL as an acronym of Structured English QUEry Language. Over time this was referred to as Structured Query Language and the initialism of SQL took hold. Still, the pronunciation of sequel seems to have also stuck. Anyway, pronounce it how you want — I won’t judge.

I’ve sometimes seen people claim that SQL stands for Standard Query Language. As the above clearly shows, that is not true. And if you’ve used SQL at all with more than one database, you also have empirical evidence that there is not much standard about it beyond the main keywords.

The paper itself is only about 15 pages, so not long at all. I found this surprising as I expected it to be some lengthy and detailed specification written for academics.

But it’s not.

It starts by talking about the relational model of data, a somewhat new concept at the time (first described in 1969), and the predicate calculus, introducing a sublanguage called SQUARE, which strikes me a somewhat functional way of querying relational data. Math nerds do love their functional languages.

The authors then go on to introduce SEQUEL as a substitute for SQUARE and it’s here where we see the first syntax that you might recognize:

SELECT NAME
FROM   EMP
WHERE  DEPT = ’TOY’

Boolean expressions in the WHERE clause are also covered along with functions in the SELECT clause. These are all things still being used to this day.

The main justification the authors use for SEQUEL is that the concepts of predicate calculus and SQUARE require “too much sophistication for the ordinary user”. I won’t argue with that!

They drive that point home by showing how to get data results using some example queries, first by using SQUARE and then comparing to the SEQUEL equivalents. Their first query is this:

Find the names of managers who manage more than ten employees.

Note that for this example, there is a previously defined database with one of the tables as follows:

EMP (NAME, DEPT, MGR, SAL, COMM)

The SQUARE example looks like this:

I’m not going to even try to explain this. Read the paper if you’re curious.

Here’s the SEQUEL version:

SELECT   MGR
FROM     EMP
GROUP BY MGR
WHERE    COUNT (NAME) > 10

Well, now. That certainly makes more sense to me. I’ll bet that everyone reading this knows exactly how to parse out the SEQUEL command. It would actually work as-is in a database such as SQLite today!

There are other examples in the paper as well. Like I said, it’s somewhat short so you might find it to be an interesting read.

Happy 50th Birthday, SEQUEL (SQL)!!

Only 48 Days Until Monkeybread Software’s Xojo Conference

Alyssa Foley — Tue, 05 Mar 2024 15:20:00 +0000

Register now for the biggest Xojo event in 2024!

Monkeybread Software and Christian Schmitz have organized an exceptional event in Germany taking place in just 2 months – April 22nd to 27th. Take this opportunity to meet and network with members of the global Xojo Community. Meet Geoff Perlman, Xojo’s Founder & CEO and Xojo Engineers, Javier Menendez and Ricardo Cruz.

This event includes:

Keynotes from Geoff Perlman and Christian Schmitz
Educational, Feedback and Q&A Sessions
Web Lab with Xojo’s Ricardo Cruz
Performance Lab with MBS’s Christian Schmitz
Dinners, Networking and Sightseeing

Training, Sessions & Events

6 Day Schedule

Monday 22nd April Welcome Event
Tuesday 23rd April Sight Seeing Tour & Dinner
Wednesday 24th April Training Day & Reception in Hotel
Thursday 25th April Conference & Dinner at Baggerado
Friday 26th April Conference & Farewell Dinner
Saturday 27th April Geyser Tour

Einstein Hotel Am Römerpark

The event will be hosted at the Einstein Hotel Am Römerpark, a modern business and conference hotel with unique ambiance and modern facilities. Located in Andernach across from the river Rhine, the hotel features a garden, lounge, terrace and the Sky Bar & Restaurant.

Visit, Attend & Network

Location: Andernach

Networking is not limited to the event hotel! Enjoy the evenings with other Xojo users at casual get-togethers. Arrive a day or two before the conference or stay over the weekend and schedule time to enjoy the area. Join the group for sightseeing and a Geyser Tour. Andernach has much to offer visitors including the “Runde Turm” (round tower), Mariendom (Cathedral of Mary), the old crane on the Rhine River front, the Mikveh or the well preserved town wall.

Learn everything else you need to know and Register Today at Monkeybread Software.

The XAML Control’s New Playground

William Yu — Tue, 10 Oct 2023 13:30:00 +0000

With the new XAML Control chooser window that is available in Xojo 2023r3 for Windows you can now play/experiment with XAML like never before, right in the IDE.

A Playground Built-In to the IDE

For those that have already tried the XAML Gallery example project, you may be familiar with one particular part of the demo which allows you to experiment with XAML in what we call the Playground:

This Playground has now been integrated into the Windows IDE in Xojo 2023 Release 3.

The New XAML Control Chooser Window

In Xojo 2023r2 we introduced DesktopXAMLContainer. Dragging one onto your layout and clicking on the edit icon allowed you to pick a pre-defined XAML control via our XAML Control Chooser Window. This XAML Control Chooser Window has now been updated in Xojo 2023r3 to include additional features that mimic what the XAML Gallery example project already provided, and that’s the Playground.

Experimenting in the New Playground

Just like in the XAML Gallery project, you can now enter your own custom XAML code and “run” it (using that play looking button next to the XAML editor).

When you are satisfied with how your XAML looks, just click Add to insert it into the DesktopXAMLContainer.

Et voilà! The new XAML Control Chooser Window provides a unique WYSIWYG interface that you can use to edit your XAML code and to experiment with XAML, now go out and play! Learn more about the the DesktopXAMLContainer in the Xojo Programming Documentation.

Fun – Xojo Programming Blog

Optimizing Xojo Code, Part 5: Threads and UserInterfaceUpdate

The Core Idea: Threads

Let’s Code

The Thread Control

The Button (Start the Thread)

The Thread.Run Method (Background Work)

The Thread.UserInterfaceUpdate Method (UI Sync)

How It Works

A Note on Thread Safety

When to Use Threads vs. Timers

Wrapping Up

Optimizing Xojo Code, Part 4: Timer.CallLater

The Strategy: Timer.CallLater

Looking at the Code

The Setup (Button Pressed)

The Handler (Recursive Chain)

How It Works

Wrapping Up

Xojo + XAML + Goto = 🔥

Visual States in XAML

Example XAML

Triggering the Transition from Xojo

Why This Is Powerful

Optimizing Xojo Code, Part 3: Programmatic Timers and AddHandler

The Strategy: AddHandler

Looking at the Code

The Setup

The Handler (Doing the Work)

How It Works

Wrapping Up

Community Contributions to the Xojo Blog: Spotlight On & Guest Posts in 2025

Optimizing Xojo Code, Part 2: Using a Timer to Keep the UI Responsive

Step 1: Let’s sketch the goal

Step 2: Prepare the UI components

Step 3: Wire up the button

Step 4: Let the timer take over

Step 5: Test the flow

What makes this timer driven solution a solid first step?

Optimizing Xojo Code, Part 1: Getting Started

The Code in Question

Year of Code 2025: September Project, Games

A XAML Driven UI

Migrating Towards XAML

A Deeper Dive into XAML

XAML is Asynchronous

Translating your XAML Experience

Child Controls Inherit the Parent’s Background Brush

Layering XAML

Setting Focus for Embedded XAML Controls

Extended XAML Features

Having Fun With XAML

Year of Code 2025: June Project, Cross-Platform Code Class

Introducing dataClass: Universal Data Fetching for Xojo

Why is This Cool?

The Complete Source Code

What Will You Build?

Year of Code 2025: May Project, Mobile Apps

One More Thing

Year of Code 2025: April Project, User Interface

Year of Code 2025: March Project, Web Apps

Spotlight On: Offroad Portal

Mac, Windows or Linux?

What do you wish more people would ask/talk to you about regarding programming?

How would you explain your most recent project to a 5 year old?

What’s next on your “Learn Next” list?

What is something that has surprised you about coding in the last 10 years?

Xojo isn’t the only tool in your kit. What is a piece of software more people should know about?

What is something you worked on recently that you want to talk about?

When did you start using Xojo?

How did you find Xojo?

What did you first build with Xojo?

When was that?

What do you build with it now?

Do you earn a living with Xojo?

Do you use it for your hobbies?

What’s your biggest Xojo success?

Year of Code 2025: February Project, Database Apps

Year of Code 2025: January Project, Desktop Apps

Year of Code 2025: Kickoff

Introducing `dataClass`: Universal Data Fetching for Xojo