New Controls

Three new controls have been added to the Web framework in this release, aiming to close the difference gap between Web and the other project types.

WebSwitch is a toggle control that mobile developers will already be familiar with. It’s been available on iOS and Android for a while. It’s now available for web projects too, so if you’ve been approximating a toggle switch using a styled checkbox, you can finally retire that workaround.

WebColorPicker brings color selection to web apps in the same way DesktopColorPicker does for desktop. Drop it in from the Library, wire up the event and you have a color picker the Xojo way.

This is how WebColorPicker looks like in your browser:

The third new control adds barcode reading support. Your web app can now read barcodes directly from the user’s camera, from desktop or mobile browsers. This opens up a lot of practical use cases: Inventory systems, ticketing, product lookups, that previously would have pushed you toward a native mobile app.

Again, drop the Barcode control into your project and implement the events:

That’s it! Your web apps can scan a great variety of barcodes now. Including QR, Data Matrix, Aztec, PDF 417 and much more!

Icons on WebButtons

WebButton now has an Icon property. You can assign any WebPicture to it, or use one of the Bootstrap icons that are already bundled with the framework. It’s a small addition, but it makes a noticeable difference when building action-heavy interfaces where a label alone doesn’t communicate enough at a glance.

Add a button into your project:

Configure its Icon property in the Opening event:

Me.Icon = WebPicture.BootstrapIcon("key-fill")

If you don’t specify a color in BootstrapIcon, it will inherit the button caption color in this case. This is the easiest way to support Dark Mode with the new WebButton.Icon property, without doing any special tricks.

Here is how it looks like at runtime:

Dark Mode:

WebLabel: Semantic HTML and Proper Element Types

Two related changes landed for WebLabel in this release. The first is a correctness fix: the control was previously rendered using the HTML <label> element, which is semantically meant to label form inputs, not to display general text. That has been corrected.

The more interesting addition is that you can now choose which HTML element WebLabel renders as. If you want a label to be an <h1> or an <h2>, you can set that directly in the Inspector. This is useful not just for visual styling, but for accessibility tools and search engines that rely on page structure to understand content hierarchy.

Improving both, accessibility and making search engines happier, are some of our goals for 2026. You will continue seeing improvements in this sense.

WebTextArea Gets AddText

WebTextArea now has an AddText method, consistent with how the control works on Desktop and Mobile. If you’re writing code that targets multiple platforms, this kind of parity saves you from having to check which target you’re on, before appending text.

Scale Indicator on WebMapViewer

WebMapViewer now has a HasScaleIndicator property. When enabled, a small visual scale appears on the map showing real-world distance. It makes a difference in apps where users need spatial context. Field work, logistics or anything where “how far is that?” is a question users might actually ask.

Performance and Modernization Under the Hood

A few changes in this release won’t be immediately visible, but they improve things for everyone.

Bootstrap has been updated to v5.3.8 which fixes some issues introduced in v5.3.7 impacting Xojo. The TypeScript compiler has been updated to v5.9.3, and the compilation target has been bumped from ES6 to ES2020. Unused code in the Web Framework has been cleaned up to reduce the compiled bundle size.

Xojo has also removed its own internal usage of Modernizr. The library is still present for now so existing apps that rely on it won’t break, but it’s no longer used by the framework itself and will be removed in a future release.

If you’ve been meaning to audit your web app for performance, this is a good moment to look at SendEventsInBatches and LazyLoadDependencies on WebSession as well. Both now default to True on new projects, so if your existing app has them disabled, it’s worth trying them out. These properties have been around for a while already but were turned off by default.

API Consistency Cleanups

A few methods have been deprecated in favour of names that are consistent with the rest of the framework:

• WebApplication.AutoQuit → AllowAutoQuit
• WebListBox.ReloadData → ReloadFromDataSource
• WebRadioGroup.RemoveAllRows → RemoveAll, and RemoveRowAt → RemoveAt

Your existing code will still compile, but it’s worth updating these when you get a chance.

Wrapping Up

Between new controls, better HTML semantics, and a leaner runtime, 2026r1 is a worthwhile update for anyone building web apps with Xojo. Check out the full release notes for the complete list of changes.

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.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

This is where ngrok comes in: a fantastic tool that creates secure tunnels to your localhost, making your locally running Xojo web app accessible from anywhere in the world. It’s a game-changer for testing, demonstrations, and rapid development.

What is ngrok and Why Xojo Developers Need It?

At its core, ngrok is a command-line tool that creates a secure, public URL for a service running on your local machine. Think of it as a temporary bridge from the internet directly to your computer, bypassing firewalls and NAT configurations.

For Xojo Web developers, this offers a wealth of benefits:

• Real-device Testing: Test your Xojo web app’s responsiveness and functionality on actual mobile phones, tablets, or other computers, even if they’re not on your local Wi-Fi network.
• Instant Demonstrations: Share your work-in-progress with clients, colleagues, or friends without the need of deploying to a remote server. They just need the ngrok-provided URL!
• Webhook Development: Many third-party services (payment gateways, messaging platforms, etc.) use webhooks to notify your application of events. These webhooks require a public URL to send data to. ngrok provides this, making local webhook development a breeze.
• Debugging Public-Facing Issues: Sometimes, an issue only appears when your app is publicly accessible. ngrok allows you to debug such scenarios without a full deployment cycle.

It’s truly a must-have tool in your Xojo Web development toolkit!

Getting Started with ngrok

Before we connect our Xojo app, we need to get ngrok set up.

Step 1: Download ngrok

Head over to the official ngrok website: https://ngrok.com/download.

Download the version appropriate for your operating system (Windows, macOS, Linux).

Step 2: Unzip and Place

Once downloaded, you’ll get a single executable file (e.g., ngrok.exe on Windows, ngrok on macOS/Linux). Unzip it and place it in a convenient location. I recommend creating a dedicated folder for it, or placing it somewhere easily accessible from your terminal or command prompt.

Preparing Your Xojo Web App

Xojo Web applications are self-contained web servers. When you run a Xojo Web app in debug mode or build it for deployment, it listens for incoming connections on a specific port. By default, Xojo Web apps usually listen on port 8080.

Let’s quickly ensure your Xojo Web app is ready:

1. Open your Xojo Web Project: Open any existing Xojo Web project, or create a new one for testing.
2. Run in Debug Mode: Click the “Run” button in the Xojo IDE. Your web app will launch in your default browser, at http://localhost:8080.

Tunneling Your Xojo App with ngrok

Now for the magic! With your Xojo Web app running locally, we’ll open a tunnel to it using ngrok.

Step 1: Open Terminal/Command Prompt

Open your system’s terminal (macOS/Linux) or Command Prompt/PowerShell (Windows).

Step 2: Navigate to ngrok Directory (if needed)

If you didn’t place the ngrok executable in a system PATH location, navigate to the directory where you unzipped ngrok using the cd command. For example:

cd /path/to/your/ngrok/folder

Step 3: Run the ngrok Command

Now, execute the ngrok command to create the tunnel. Since Xojo Web apps typically run on port 8080, the command will be:

ngrok http 8080

• http: Specifies that we’re tunneling an HTTP service.
• 8080: This is the port your Xojo Web app is listening on. If you’ve configured your Xojo app to use a different port (e.g., in the Build Settings), make sure to use that port number instead.

After running the command, ngrok will output information about the tunnel it has created. You’ll see output similar to this:

ngrok                                                                            (Ctrl+C to quit)

Session Status                online
Account                       Account Name (Free)
Version                       3.x.x
Region                        United States (us)
Forwarding                    https://a52b-20-40-100-120.ngrok-free.app -> http://localhost:8080

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

The most important lines here are the Forwarding lines. These provide you with the public URLs that point to your Xojo web app.

Testing Your Public Xojo App

With the ngrok tunnel active, your Xojo web app is now live to the world!

1. Copy the HTTPS URL: Copy the https:// URL provided by ngrok.
2. Test It:
   • Paste this URL into any web browser, on any device, anywhere with an internet connection.
   • Send the URL to a friend or client to get their feedback.
   • Test it on your mobile phone’s browser using its cellular data connection (not your local Wi-Fi) to simulate a truly external connection.

You’ll see your Xojo web app load as if it were hosted on a remote server!

To stop the ngrok tunnel, press Ctrl+C in the console.

Conclusion

ngrok can be an indispensable tool for any Xojo Web developer. It transforms the challenging task of exposing a local web app into a simple, one-line command. Whether you’re testing on diverse devices, showcasing your progress to clients, or integrating with external webhook services, ngrok streamlines your workflow and lets you focus on what you do best: building amazing applications with Xojo.

Give ngrok a try on your next Xojo Web project, and prepare to be amazed by the convenience it offers!

What if we create a Build Step script to automatically run ngrok when needed? Share your experiences and tips in the Xojo forums!

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!

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

This guide focuses on production-ready Caddy configurations that streamline deployments for self-managed Xojo applications, delivering:

• Automated TLS certificate management
• Native load balancing between instances
• Simplified configuration compared to traditional proxies
• Header optimizations specifically tuned for Xojo’s framework

You’ll learn configuration strategies that in some benchmarks, can have resource savings as high as 40% over conventional proxies while maintaining Xojo’s signature performance characteristics.

Core Configuration Strategies

Basic Reverse Proxy Setup

yourdomain.com {
    # Connect to Xojo application
    reverse_proxy localhost:8080 {
        # Preserve client information
        header_up X-Forwarded-For {http.request.remote.host}
        header_up Host {http.request.host}
    }
    
    # Automate HTTPS
    tls admin@yourdomain.com
}

Note: The header_up directives ensure Xojo correctly logs client IPs in web events

Load Balancing Across Instances

app.yourdomain.com {
    reverse_proxy localhost:8080 localhost:8081 localhost:8082 {
        load_balancer {
            policy round_robin
            health_interval 10s
            health_uri /health
        }
        # Timeouts for heavy processing
        lb_try_duration 30s
    }
}

Security Hardening Measures

yourdomain.com { 
	# Critical protection headers 
	header { 
		X-Content-Type-Options "nosniff" 
		X-Frame-Options "DENY" 
		Content-Security-Policy "default-src 'self'" 
	} 

	# Rate limiting for API endpoints 
	route /api/* { 
		rate_limit { 
			zone api 
			burst 100 
			period 10s 
		} 
	} 
}

Production-Ready Deployment Scripts

Linux Systemd Service
/etc/systemd/system/xojo-caddy.service:

[Unit]
Description=Xojo Caddy Reverse Proxy
After=network.target

[Service]
Type=simple
User=caddy
ExecStart=/usr/bin/caddy run --config /etc/caddy/Caddyfile
Restart=on-failure
RestartSec=5

[Install]
WantedBy=multi-user.target

For a broader, step-by-step guide on preparing your server, please see our foundational tutorial: Tutorial: Deploying Web Apps on Linux. The systemd service above integrates perfectly into that workflow.

Windows Deployment Package
Xojo-Caddy.bat:

@echo off
REM Start Xojo application instances
start "Xojo Instance 1" /MIN XojoWebApp.exe --port=8080
start "Xojo Instance 2" /MIN XojoWebApp.exe --port=8081

REM Launch Caddy reverse proxy
start "Caddy Proxy" /MIN caddy.exe run --config C:\caddy\Caddyfile

Optimized Xojo-Caddy Template
Save as Caddyfile in your deployment root:

# Production-Grade Xojo Proxy Template
yourdomain.com, www.yourdomain.com {
    # Automated HTTPS
    tls contact@yourdomain.com
    
    # Primary app routing
    reverse_proxy localhost:8080 localhost:8081 {
        header_up X-Forwarded-Proto https
        header_up X-Real-IP {http.request.remote}
    }
    
    # Static content handling
    handle /static/* {
        root * /var/www/static
        file_server
    }
    
    # Security headers
    header {
        Strict-Transport-Security "max-age=31536000"
        Referrer-Policy "strict-origin-when-cross-origin"
    }
}

Conclusion

Caddy eliminates proxy complexity while delivering enterprise capabilities:

1. Simplified Operations: Single configuration file replaces complex proxy setups
2. Automatic Security: Continuous HTTPS protection without maintenance
3. Effortless Scaling: Built-in load balancing grows with your user base
4. Reduced Overhead: 40% fewer resources than traditional proxies in benchmarks

Implement the provided Xojo-Caddy template to achieve production-grade deployment in under 15 minutes. Monitor performance via Caddy’s built-in /metrics endpoint and scale horizontally as traffic increases.

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!

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

Added Support for WebStyle States

Working on Desktop projects is all fun and jokes. You can just change how the whole application looks every time your application users move their mouse one pixel to the left. Latency? Who cares!

In order to achieve the same results, WebStyle has been improved to support states. Hover, Pressed and Visited.

• WebStyle.Hover
  This is the style that will be applied when the mouse is over the element
• WebStyle.Pressed
  This is the style that will be applied when the user is pressing a mouse button in the element
• WebStyle.Visited
  This style can be used with WebLink instances. Used to let the user know the browser has visited that link in the past

Consider the following WebContainer:

In this case, it’s just a container with a WebLabel inside.

The Opening event contains the following code:

Please note I’m using named colors. You can read more about named colors in Introducing Named Color and CSS Classes in Xojo Web. If you try using another Bootstrap theme, the same code will use the new color palette without modifications.

Here is the result:

Combined with WebStyle.AddTransition, it opens the gates for more interesting GUIs. Let’s add some transitions to our code:

Let’s try the project again:

Neat! Let’s go crazy for a second with more complex effects:

The result:

You should definitely avoid going that crazy, this is just to show the possibilities. As Dr. Ian Malcolm said … “Your scientists were so preoccupied with whether or not they could, they didn’t stop to think if they should.”

WebContainer.Pressed

Speaking about pressing on things, WebContainer.Pressed event is now available, so you don’t need to place a WebLabel or a WebContainer on top just to capture that event anymore. The event comes with some coordinates, just in case you need them.

The result:

Other changes

WebToolbar.Resized

Trying to tweak your design for different screen sizes? If WebToolbar’s automated behavior is not enough, you can implement the new WebToolbar.Resized event and adapt the contents. This is useful when you are reusing the same WebToolbar subclass in multiple WebPages. You will be able to place this code in just one place.

Exporting maps with WebMapViewer

Same as with MobileMapViewer. You can now use WebMapViewer.ToPicture method to export the current map. Like WebChart.ToPicture, due to the asynchronous nature of Web projects, the picture will be available in the new WebMapViewer.RequestedPicture event.

Updated DataTables

Last, but not least, DataTables has been upgraded from v1.13.4 to v2.2.2.

That’s (not) all!

As always, please make sure to check the release notes for a detailed list of new features and bug fixes. The Web framework is built on top of Xojo, new global features or bug fixes also applies to Web, including improvements to Console projects. Xojo Web is “just” a big Console project.

Thank you everyone for reporting, testing beta builds and giving us feedback.

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.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

The End Result

The latest drag and drop example has a functional GUI that looks professional and feels intuitive. All without writing a single line of JavaScript (we will enhance it a bit with some CSS, though).

Please note this is a sample project created to explore drag and drop, not a full featured Kanban board. I’ll omit on purpose things like persistence. The complete project can be found in the Examples section of the IDE, under Platforms > Web.

Let’s walk through how to make it happen.

Creating the Required Components

First, we need to define the building blocks of our Kanban board. In Xojo, WebContainers are perfect for modularizing reusable UI elements. Here’s what we’ll create:

• KanbanCard
  A WebContainer to represent each task card. It’ll have a simple label for the task name (e.g., “Write blog post”) and maybe a colored border or handle to indicate it’s draggable. Add a WebLabel for the text and set its properties in the Inspector to make it visually distinct.
• KanbanCardContainer
  Another WebContainer to act as a column. It’ll hold multiple KanbanCard Containers and serve as both a drag source (where cards come from) and a drop target (where cards land). Include a WebLabel at the top for the column title (e.g., “To Do”) and a rectangular area below it to house the cards.
• Main Page
  A WebPage to host everything. This is where we’ll arrange our columns side by side.

In the Xojo IDE, drag a WebContainer onto your project for the Card, another for the Column, and set up three instances of the Column Container on the main WebPage (“To Do,” “In Progress,” “Done”).

KanbanCard

This component will be pretty easy to build. It is basically a WebRectangle with a WebLabel that we will use for the Title. To make it easier to update, I’ve added a Title Computed Property that will update the TitleLabel if needed.

For the background WebRectangle, we will use the following ColorGroup. Please notice Xojo added support for Named colors, that will rely on the current Bootstrap theme, supporting Dark Mode:

As you can see, BackgroundRectangle and TitleLabel controls are implementing the Opening event. This is just to set the mouse cursor that will be shown when we hover:

Me.Style.Cursor = WebStyle.Cursors.Move

The container itself is also implementing the Opening event. This is to make this control draggable, using the following line of code:

AllowTextDrag(WebDragItem.DragActionTypes.Move)

Any descendant of the WebUIControl class is draggable. And yes, that includes custom controls created with the Web SDK.

For the WebDragItem.DragActionTypes Enumeration, you can choose one these options:

In this case we will only be allowed to “Move” a card from one place to another.

There are cases where it makes sense to support multiple drag action types. In your operating system’s file browser, when you drag and drop files and folders, you can change between Move, Link or Copy by using Keyboard shortcut combinations. Depending on the drag action type, the element will be moved, a symbolic link will be created, or it will be copied, respectively.

Normally you will implement just Move or Copy, but keep in mind it’s possible to have more (at the cost of increasing the learning curve of your application for your users)

Allowing something to be dragged is the first of two steps. You also need a place to drop these items into.

KanbanCardContainer

This container will be more elaborate, but should be easy to follow. Let’s see how it works at runtime, with some annotations:

The WebLabel we used for the Title and the WebButton used for adding new cards are positioned manually in the IDE designer. Same as the invisible WebRectangle holding the KanbanCard items and the KanbanAddCard custom button.

But instead of placing our cards manually, we’ll take advantage of the browser’s capacity for doing this job for us. We just want to add them dynamically at runtime and let the browser stack them vertically, automatically. We also want the browser to display a scrollbar if the columns have several cards.

Here is the code we will add to the WebRectangle:

// Let the framework know we want to let the
// browser place the items automatically
Me.LayoutType = LayoutTypes.Flex

// This style will ensure cards won't be
// placed horizontally by the browser
Me.Style.Value("flex-direction") = "wrap"

// If there are more cards than available
// space, this style will allow the user
// to scroll
Me.Style.Value("overflow") = "auto"

Let’s add some methods to add and remove cards at runtime.

• AddCardWithTitle(title As String)
• AddCardWithTitleAt(title As String, index As Integer)
• RemoveCardAt

Moving Cards Between Columns

Here’s where Xojo’s drag and drop shines. Each Card Container needs to be draggable and each Column Container needs to accept dropped cards. In Xojo:

1. Make Cards Draggable: Open the KanbanListCard in the IDE and implement the Opening event. Enter this code:
   AllowTextDrag(WebDragItem.DragActionTypes.Move)
2. Accept Card Drops: Open the KanbanCardContainer and implement the Opening event. This is the code we need in order to accept drops:
   AcceptTextDrop(WebDragItem.DragActionTypes.Move)
3. Remove from Source: To move (not copy) the card, in the source Column’s DragEnd event, remove the dragged card from its original parent after a successful drop.

With this, you can drag a card from “To Do” to “In Progress,” and it’ll visually jump columns. Xojo handles the heavy lifting. No JavaScript or DOM manipulation needed!

The Hard Part: Reordering Cards

Reordering cards within a column, or dropping a card into another column in a specific position is trickier. You need to detect where the card lands among its siblings and adjust their positions. Xojo’s drag and drop doesn’t natively sort UI elements, so we’ll simulate it.

There are several ways to achieve this, let’s explore some options.

One would be to deal with X/Y coordinates. Once you drop a card, you could take a look to see where the card landed, compare the coordinates with the other cards and reorder them accordingly. In desktop and mobile projects this could be a valid solution. In web projects, dealing with specific coordinates might work, but there are more accurate and easier solutions.

The second way could be good enough in most cases. Cards could also accept drops so, if you drop one card on another, we just have to put the card being dropped in the position where it’s being dropped, and push down the rest of the stack. This way you won’t need to scratch your head and deal with screen coordinates or control dimensions. The end result will be based on this idea.

But what should we do to generate the gap between Cards? Maybe you can create a transparent Container that also accept Card drops, to simulate the gap between cards.

This would work for you, and I honestly recommend you to give it a try, it’s super easy to implement and it will just work. If you don’t want to explore the CSS rabbit hole, that’s fine, this can be your bus stop.

Two downsides:

• You won’t have animations
• You will double the amount of controls on screen (performance may suffer)

I went in another direction though. Using some CSS, you can add and modify margins on the fly, with neat transitions. In my sample project, the margin between cards is managed by the `margin-top` CSS style.

And here is where the Xojo Framework helps. To make styling easier, it adds a CSS class to the element being dragged and also to the element where the mouse is over, when it’s accepting a drop.

dragging – The HTML element being dragged will have this property
dragover – The HTML element under the other element being dragged

In this case, the “Bar” card will receive the dragging CSS class, while “Test #2” will receive the dragover CSS class, while the “Bar” car is above.

I’ve added some transparency to elements with the dragging class. As you can see in the screenshot, the “Bar” Card opacity is set to 30%.

For dragover class, I’ve added some margin and transitions. If you drag something into a card, the top margin will grow, simulating it’s making room for the card you are about to drop.

Here is how the HTML Header section of the sample project looks like. It isn’t too much code, but it does uses some somewhat advanced CSS tricks:

This approach keeps cards neatly stacked and sortable. It’s the “hard part” not because you will have to write a lot of code, but because you’ll actually have to think a solution that won’t require roundtrips between the browser and the server. Xojo’s event system makes it manageable without JavaScript, and with some CSS, the result will be great.

Some CSS Enhancements

In some cases I’m using shadows and border radius using the Bootstrap’s CSS classes.

As you can see, I’m using rounded-2 for the border radius, and shadow-sm to easily add a shadow to the cards.

You can read more about this in the following blog post:
Introducing Named Color and CSS Classes in Xojo Web

There is a related sample project you might want to check:

Closing Thoughts

This has been a fun experiment to explore the Xojo Web drag and drop feature. Give the sample project a try and explore each control to see how it’s been created. I can’t recommend enough that you try to build it from scratch (and ask in the forum if you get stuck!)

We can’t wait to hear about how you plan to introduce drag and drop into your projects. Don’t be shy and create a forum thread to show what you have built, or what you are working on.

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.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

Drag and Drop Support

The biggest thing this time is that we’ve added general drag and drop support for web. From now on, any visual control can be dragged or accept drops.. That includes controls created using the Web SDK, allowing you (and third-party developers!) to increase the user experience on your web projects.

Now, imagine new ways of updating a Database application. For example, creating a “Form Builder”, a full “Website Builder” or even a “Database Schema” web application where the user can drag elements from a library and drop them into the editor. Are you scheduling posts on social networks using a WebDatePicker? What about using a calendar view with drag and drop support?

We’ve included a drag and drop Kanban board example. Take a look at the blog post to learn more about it.

How cool is that?

While drag and drop can make your app easier to work with for some users, it can also be an accessibility barrier for other users. Just remember to offer an alternative way for interacting with your application. In a full featured Kanban app, for example, the user should still be able to change the status of a task from the task details screen, using a regular WebPopupMenu (or any other accessible method)

WebListBox Updates

Speaking of dragging things, WebListBox also now supports reordering rows using the mouse. Just enable the new Allow Row Reordering property (which is Off by default) and you are all set.

This can also be set programmatically at runtime with AllowRowReordering. Once the user finishes a reorder, the RowsReordered event is called, allowing you to persist the changes in your database, for example.

Another requested feature was to allow users to perform inline edits. WebListBox received some new methods and events to handle this:

• ColumnTypeAt: To make a whole column editable
• CellTypeAt: To override the ColumnTypeAt on specific cells
• EditCellAt: A method you can use to begin the edit on specific cells
• CellAction Event: Allowing you to persist the changes made by the user

This is also supported when using a WebDataSource.

And not only are TextField and TextArea supported, CheckBox is also part of the WebListBox.CellTypes enumeration, to match what DesktopListBox supports:

Last, but not least, we’ve decided to split CellTextAt into two different methods. Until now, you could get and set the caption of a cell using CellTextAt, but also a WebListBoxCellRenderer. This could cause trouble because a Variant was being returned, that could be either a String or a WebListBoxCellRenderer so, when not being used carefully, it could raise IllegalCastException at runtime.

From now on, CellTextAt will only support String. If you want to get or set a cell renderer, you will have to use CellRendererAt instead. This makes the API more obvious.

If you were using CellTextAt for getting and setting cell renderers, you will need to update your code to use CellRendererAt instead.

Wrapping Up

This release empowers Xojo Web projects to meet more user needs, no JavaScript required. Drag and drop finally joins the party, filling a critical gap from the old Web 1 framework.

Be sure to dig into the release notes, as 2025r1 packs over 40 changes for the web target alone.

I’d love to hear how you’re weaving these updates into your projects! Drop some screenshots or screen recordings in a new forum thread or shoot me a private message if you prefer.

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.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

• The Dockerfile below should be placed in the same directory as your Xojo project
• Remember to modify the WEBAPP_NAME variable on line 33 to match the name of your project
• Feel free to customize this Dockerfile to suit your specific needs. We encourage you to share your modifications and experiences in the Xojo forum

# Step-by-Step Instructions for Building, Saving, and Running the Image:
# 1. Build the Docker image:
#    "docker build -t hellodocker-image ."
#    This creates a Docker image named "hellodocker-image" based on this Dockerfile.
#
# 2. Save the Docker image to a tar file:
#    "docker save -o hellodocker-image.tar hellodocker-image"
#    This saves the "hellodocker-image" to a file named "hellodocker-image.tar".
#    You can use this file to transfer the image to another server.
#
# 3. Upload the .tar file to the remote server.
#    After transferring the tar file, follow these steps on the remote server:
#
#    3.1 Load the Docker image:
#        "docker load -i hellodocker-image.tar"
#        This imports the image into the Docker environment on the server.
#
#    3.2 Run a container from the image:
#        "docker run -d --name hellodocker-container --restart always -p 7000:80 hellodocker-image"
#        This creates and starts a container named "hellodocker-container" that:
#        - Restarts automatically if it stops (via `--restart always`).
#        - Maps port 80 inside the container to port 7000 on the host machine.
#
#    3.3 Verify the web app is running:
#        Open a web browser and navigate to http://server-ip:7000
#        Replace "server-ip" with the IP address of your remote server.
#
# Complete video guide at: https://youtu.be/ARr7d6Z6CRY

# Use Ubuntu 22.04 as the base image for the container.
FROM ubuntu:22.04

# Define the name of the Xojo web app executable.
# This should match the exact name of your compiled Xojo web app (case-sensitive).
ENV WEBAPP_NAME=HelloDocker

# Prevent interactive prompts during the installation of dependencies.
ENV DEBIAN_FRONTEND=noninteractive

# Install required system libraries for the Xojo web app to run, and purge unnecessary software (PHP, Python, Apache)
RUN apt-get update && apt-get install -y --no-install-recommends \
    curl \
    ca-certificates \
    libunwind8 \
    libsoup2.4 \
    libpango-1.0 \
    libicu70 \
    libglib2.0 \
    libgtk-3-0 \
    && apt-get purge -y php* python3* apache2* libapache2-mod-php* \
    && apt-get autoremove -y \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/*

RUN useradd --create-home ${WEBAPP_NAME}

# Set the working directory inside the container.
# This is where the web app files will be located.
WORKDIR /${WEBAPP_NAME}

# Copy the built Xojo web app from the build context into the container.
# Remember, this Dockerfile must be placed in the same folder as the Xojo project.
COPY ["Builds - ${WEBAPP_NAME}/Linux 64 bit/${WEBAPP_NAME}", "."]

# Change ownership of the application files to the non-root user
RUN chown -R ${WEBAPP_NAME}:${WEBAPP_NAME} /${WEBAPP_NAME}

# Ensure the main web app executable has permission to run
RUN chmod +x ${WEBAPP_NAME}

# Create a directory for persistent data storage.
# Ensure the data directory is owned by the non-root user.
RUN mkdir -p /home/${WEBAPP_NAME}/data && chown -R ${WEBAPP_NAME}:${WEBAPP_NAME} /home/${WEBAPP_NAME}/data

# Define the volume for the container to store data.
# The contents of "/home/${WEBAPP_NAME}/data" will persist outside the container.
VOLUME /home/${WEBAPP_NAME}/data

# Switch to the non-root user for security purposes.
# All subsequent instructions (including CMD) will run as this user.
USER ${WEBAPP_NAME}

# Expose port 80 inside the container.
# This allows the web app to listen on port 80, which will be mapped to port 7000
# on the host machine when the container is run.
EXPOSE 80

# Start the Xojo web app when the container runs.
# The app will listen on port 80 inside the container.
CMD ["sh", "-c", "./${WEBAPP_NAME} --port=80"]

I also recommend reading this article for additional details on Xojo and Docker: https://blog.xojo.com/2021/05/17/running-xojo-web-applications-in-docker/

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!

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

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!

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

Year of Code Project

• Year of Code: Kickoff
• January Project: Desktop Apps | Forum Discussion
• February Project: Database Apps | Forum Discussion
• March Project: Web Apps | Forum Discussion
• April Project: User Interface | Forum Discussion
• May Project: Mobile Apps | Forum Discussion
• June Project: Code Sharing | Forum Discussion
• July Project: Charting | Forum Discussion
• August Project: Console Apps | Forum Discussion
• September Project: Games | Forum Discussion
• October Project: Multi-Platform | Forum Discussion
• November Project: PDF | Forum Discussion

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.

Using a WebPopupMenu with a Keyboard

2024r4 comes with keyboard full support for WebPopupMenu. We’ve been gradually improving this control to allow your users to select a field using the arrow keys, for example. What’s new is being able to go directly to one of the item just by starting to type its name.

Memory Usage Improvements

Everyone does their best to avoid leaking memory but, sometimes, that’s just not enough.

Jérémie Leroy is known for the success of the mobile apps he makes with Xojo. When one of these successful app requires a Web Service, receiving 1000s of requests, it needs to be as lightweight as possible.

Thanks to his reports, the visual controls will be creating Tooltip and WebCSSClasses instances only when being used. For many projects this won’t make a difference, but having a Web project with hundreds of concurrent users will surely lead to less memory pressure, allowing to run Web apps in cheaper servers.

This task never ends. Upcoming releases will continue improving memory usage and performance.

WebMapViewer

The library we use to display maps, MapLibre, has been upgraded from 3.2.0 to 4.7.1, which will make much easier to implement some of the features we want to introduce in upcoming releases. Stay tuned!

This control also received 4 additional bug fixes. One of them was causing the Zoom to be modified, when updating another control property, for example.

Some New Features

While Web received mostly bug fixes this time, it also comes with some hidden gems.

Popover position can be adjusted now when displaying it. The positioning is relative to its parent control. Additionally, you can now use a WebPage as the parent control, instead of one of the page children, to place your Popover exactly where you need.

Last, but not least, my favorite new feature. We’ve added CallLater method to WebTimer. It works exactly the same as Timer.CallLater, but it’s Session aware. This means you will be able to access the Session from its callback, without having to do anything special.

Wrapping Up

We are saying goodbye to a 2024 packed with improvements for the Web target, with a release dedicated (more than usual) to bug fixing and to make everything more stable. Make sure to check Xojo 2024r4 Release Notes, so you don’t miss anything.

Thanks to everyone reporting bugs, making feature requests and collaborating in the forum!

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.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

My answer was, of course, “Let me have a look and get back to you.”

I went to my favourite dev tool, Xojo, and went through the process of developing a solution. The connection is a REST API, so I’ll start with a web project and use the HandleURL event. And I’ll use a URLConnection to pass on the request.  Wait … could it be that simple?

Function HandleURL(request As WebRequest, response As WebResponse) Handles HandleURL as Boolean

  // Create the outbound connection
  Var connector As New URLConnection
 
  // Copy the content of the request
  connector.SetRequestContent(request.Body, request.MIMEType)

  // Send the request
  Var result As String
  Try
    result = connector.SendSync("POST", kAddress + request.Path)
  Catch err As RuntimeException
    // Catch DNS, Certificate & Timeout errors
    response.Status = 500
    response.Write(err.Message)
    Return True
  End

  // Return the result of the request
  response.Status = connector.HTTPStatusCode
  response.Write(result)

  Return True

End Function

The answer is, “Yes!”  This is all the code in the entire project.

You will notice that there is no security, but in this instance that is fine as the virtual machine is running this is on the same network as the client server and the firewall is configured to only allow connections from that server.

After processing over 60 thousand requests, memory use is 7.3MB and never exceeded 13MB. CPU usage was at the maximum 1.5%.

Even after using Xojo for 20 years this still blows my mind.

Wayne Golding has been a Xojo developer since 2005 and is a Xojo MVP. He operates the IT Company Axis Direct Ltd which primarily develops applications using Xojo that integrate with Xero www.xero.com. Wayne’s hobby is robotics where he uses Xojo to build applications for his Raspberry Pi, often implementing IoT for remote control.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

A Quick Reminder About What Bootstrap Is

As I will be mentioning it during this post, let me take a moment to remind readers what Bootstrap is, and what are we using it for at Xojo.

Bootstrap is the library we use for the visual part of web applications made with Xojo. You can think about it as Gtk on Linux, or UIKit on iOS.

While there is a vast amount of alternative libraries, it’s been probably the most popular framework for the last decade. You can check the Bootstrap website for more information.

ColorGroup Named Colors

Until this release, the Named option when configuring a ColorGroup was not available on web projects. 2024r3 brings the ability to choose from the Web Basic colors, Web Extended colors and, what I find more interesting, Bootstrap colors, which also support dark mode out of the box.

As you can expect, if you drop a custom Bootstrap 5.3 theme with another set of colors, the IDE will automatically update in order to preview them.

Using Named Colors by Code

When a dynamic need arises, it is also possible to use Bootstrap Named colors programmatically, if you find it easier. Here is an example:

Var colorName As String

If paymentCardIsValid Then
  colorName = "success"
Else
  colorName = "danger"
End If

Rectangle1.BackgroundColor = ColorGroup.NamedColor(colorName)

Or in a WebCanvas.Paint event:

Var colorName As String = If(paymentCardIsValid, "success", "danger")
g.DrawingColor = ColorGroup.NamedColor(colorName)
g.FillRectangle(0, 0, g.Width, g.Height)

You can check the list of available colors in the Color section of the official Bootstrap documentation. Basic and Extended Web Colors will work as well.

Using Bootstrap CSS Classes

Bootstrap comes with a set of utility CSS classes for a variety of visual things. You probably won’t need them all, as the Xojo IDE will get you there in most of the cases, and we work hard improving the IDE to make it easier, release by release.

That said, if you are an advanced user, and you have previous experience working with Bootstrap, you may find it useful to add CSS classes directly from the Inspector.

Go to the Advanced tab, add some Bootstrap CSS classes, separated by spaces… and voilà!

Here is a demo:

We have included a new example, called “Applying Bootstrap CSS classes to controls”, that you can find under Platforms > Web. Please give it a try.

CSS Classes are not limited to Bootstrap, if you have added styles in the HTML Header section, you can use them as well.

You can also add and remove them using the new CSSClasses property, which is available in every WebUIControl subclass.

WebRectangle Got Some Love

You won’t need to setup the border color, border thickness or the corner size, for WebRectangle, in the Opening event anymore.

When designing web applications, I found myself using a lot of WebRectangle controls and, by default, they have a rounded border.

The side-effect is subtle, but now that you can control the border radius directly from the Inspector, the IDE preview will be closer to how it will look in the browser. And you are going to avoid writing a few lines of code!

In addition, some Bootstrap themes define a different Corner Size. Setting this property to “-1” will honor that Bootstrap theme’s default border radius.

Conclusion

As always, the release comes with much more than I can tell you about in one blog post. With over 30 Bug fixes and 9 Feature Requests implemented in the Web target alone, make sure to take a look at the Xojo 2024r3 Release Notes to see the whole picture.

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.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

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.

iOS Notifications

Xojo Cloud can function as an Apple Push Notification system (APNs) for handling iOS push notifications. This works with Xojo and non-Xojo iOS apps. All Xojo Cloud servers are pre-configured to send remote notifications. Unlike many other cloud hosts, there is no extra charge for this feature nor is there any limit as to how many notifications you can send.

To send remote notifications from your iOS app you’ll need to go to the Apple Developer website to do these tasks:

1. Add the Push Notifications feature to the App ID.
2. Generate an Apple Push Services certificate.

In Xojo you need to enable the Remote Notifications entitlement for your app in the Capabilities section of the iOS Build Settings Advanced tab.

The final step is to upload your Push Services certificate using the Xojo Cloud control panel.

With super-easy access and no limits for notifications, Xojo Cloud can serve as a great APNs for handling your iOS notification needs.

Database Servers

Most desktop apps use a database of some kind and many are client/server database apps that talk directly to the database server. With Xojo Cloud you can host PostgreSQL or MariaDB/MySQL database servers and connect to them using an SSH tunnel for security purposes.

Setting up a database server on your Xojo Cloud is as easy as checking a box in the control panel.

You can turn on PostgreSQL or MySQL/MariaDB. If your Xojo Cloud server is large enough you could even do both.

If you want to access a database on Xojo Cloud from a desktop app, you will have to enable the SSH Tunnel and then connect to the tunnel from the computer. An SSH tunnel is a secure connection between your computer and another (in this case your Xojo Cloud server) which is used for transmitting data on a specific port. In essence, it creates a private connection through the internet which allows you to see into your server on the other end and connect to a particular service there.

To create a tunnel between a computer and your Xojo Cloud server, you first need to turn on the tunnel capability on your Xojo Cloud server. Go to your control panel and click the “SSH Tunnel” checkbox. You will be presented with a generated username and a password which you will use later for establishing the connection.

On macOS and Linux, you can use a terminal command to access the tunnel (replace username and ipaddress as appropriate; you’ll be prompted for the password).

Use this command to tunnel to PostgreSQL:

ssh -L 5432:localhost:5432 username@ipaddress -N

Use this command to tunnel to MySQL:

ssh -L 3306:localhost:3306 username@ipaddress -N

If you are using Windows, you will need to use an external app such as PuTTY. There are a number of tutorials available on the internet, just put “putty ssh tunnel” into your favorite search engine.

With the tunnel in place you connect to the database as if it were local to the computer. This works with anything, not just Xojo apps.

SFTP

Xojo Cloud offers SFTP (Secure File Transfer Protocol) for file transfer. SFTP is a secure variant of FTP which transmits files over the internet using strong encryption. That way you don’t have to worry about anyone intercepting your username and password or your files as they’re sent to or from your server.

When choosing a client, keep in mind that SFTP is different than FTPS or FTP w/ SSL. They are not interchangeable with one another.

Once you enable SFTP in the Control Panel, you’ll be presented with a dialog showing a generated username and password.

You can now connect using your favorite SFTP client. If you don’t have one, there are a number of free and paid options available including:

• ForkLift
• Transmit
• FileZilla
• CyberDuck

Having a place to store files online is always handy and can be useful when needing to share files with others without having to rely on services such as DropBox.

Web Services

OK, a web service is technically a Xojo web app but it is really an API that is meant to be used by other apps, often desktop or mobile apps. Since a web service doesn’t have any actual UI, you don’t really need to learn how to use the majority of the Xojo Web framework.

Instead you basically add code to the App.HandleURL event to route web service API calls to do specific tasks and then return the results, usually as JSON for the client app to handle.

A web service can be a great way to consolidate code that will be used by desktop and mobile apps, for example.

For example, you could create a Web Service that talks to a database server (such as one of the ones available in Xojo Cloud itself). Your Desktop and Mobile apps can use the same web service to work with the database. All your database-specific code lives in the web service and the client apps make requests and display results.

This is a very common design pattern these days and is a necessary one if you want a mobile app to talk to a database server.

If you want to learn more about web services, here’s a fun webinar to check out:

Learn more about Xojo Cloud today. Xojo Cloud servers start at $49/month, custom servers with more RAM, storage, and virtual CPUs are available. The best way to host your Xojo web apps is so much more than just hosting web apps!

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.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

Why would you need a WebDataSource, isn’t AddRow enough?

If you are making a quick prototype, or for small data sets that won’t grow too much, yes, you can absolutely place a WebListBox into your WebPage and fill it using AddRow. If your WebListBox displays a fixed, small amount of data, say around 500~1000 rows, WebDataSource can be overkill.

However, for data that comes from a large database, it’s a different story. You could waste precious server resources duplicating the same data you have in your database into your app’s memory. And even worse, the data would be duplicated in every Session seeing that WebListBox.

In this tutorial, this is the WebListBox we are going to build:

Let’s prepare a million records database to play with.

In this example we will use a humble SQLite database, but keep in mind a WebDataSource can be anything. For example you could display the result of calling an external API, or your hard drive filesystem.

The following SQL creates a table called “things”, with three columns: “foo”, “bar” and “baz” with one million rows:

CREATE TABLE things (
  id    INTEGER PRIMARY KEY AUTOINCREMENT,
  foo TEXT,
  bar TEXT,
  baz TEXT
);

-- Time to populate that table
WITH RECURSIVE cnt(x) AS 
(
   SELECT
      1 
   UNION ALL
   SELECT
      x + 1 
   FROM
      cnt LIMIT 1000000
)
INSERT INTO things (foo, bar, baz)
SELECT
    'foo_' || x AS foo,
    'bar_' || x  AS bar,
    'baz_' || x AS baz
FROM cnt;

-- Finally, let's create some indexes, so we can sort the columns quickly
CREATE INDEX "idx_foo" ON things (
    foo, id, bar, baz
);

CREATE INDEX "idx_bar" ON things (
    bar, id, foo, baz
);

CREATE INDEX "idx_baz" ON things (
    baz, id, foo, bar
);

VACUUM;

We just need to store this SQL as a string constant, for convenience. Let’s create one, called kDatabaseSetupSQLite in your Application class, and paste it above the SQL code.

First Time Setup

The first time we launch the application, we need to make sure our database file has been created and populated. It won’t take too much to generate the database, but we’ll try to do it just once anyway.

Create a new method in your App class, called DBFile, that returns a FolderItem, pointing to the place we want to store the DataBase. Make it Public, as we will use this method later from the Session. The contents:

Return SpecialFolder.Desktop.Child("test-db.sqlite")

Nothing fancy. Use another path if you want. It will be around ~200MB, just remember to delete it when you don’t need it anymore.

Let’s create another App method, called SetupDatabase. It will be in charge of creating and populating the database just once, so if you restart the server, the data will still be there:

Var db As New SQLiteDatabase
db.DatabaseFile = DBFile
db.WriteAheadLogging = True

// The file is already there, no need to build it again
If db.DatabaseFile.Exists Then
  Return
End If

db.CreateDatabase
db.Connect
db.ExecuteSQL(kDatabaseSetupSQLite)

Lastly, implement the App.Opening event and add a method call to SetupDatabase:

SetupDatabase

That should do the trick.

Preparing the Session

It’s recommended to have a Database instance for each Session. Add a new public Property to your Session class called Database of type SQLiteDatabase.

Then, add a handler for the Opening event with the following code:

Database = New SQLiteDatabase
Database.DatabaseFile = App.DBFile
Database.WriteAheadLogging = True
Database.Connect

Every time a user arrives to the web application, a new isolated SQLiteDatabase connection will be created.

Implementing the WebDataSource Interface

Since Xojo 2024r2, the amount of methods you need in order to implement WebDataSource has been reduced.

Create a new class called DatabaseDataSource. Then, in the inspector panel, select the WebDataSource interface:

This includes the three required methods: ColumnData, RowCount and RowData.

ColumnData
In this method, you need to return an array of WebListBoxColumnData. We have four columns in this example, here is the code:

Var result() As WebListBoxColumnData
result.Add(New WebListBoxColumnData("ID", "id"))
result.Add(New WebListBoxColumnData("Foo", "foo"))
result.Add(New WebListBoxColumnData("Bar", "bar"))
result.Add(New WebListBoxColumnData("Baz", "baz"))

Return result

RowCount
Xojo needs to know the amount of data your data source has. Returning an Integer is enough, but we will query our database.

Try
  Var rows As RowSet = Session.Database.SelectSQL("SELECT COUNT(*) AS counter FROM things")
  Return rows.Column("counter").IntegerValue
Catch DatabaseException
  Return 0
End Try

RowData
This is the place where you need to return the row contents. As you can see, there is a rowCount and a rowOffset parameter, meaning that we won’t need to return 1 million records. The control just loads a subset. The amount is dynamically calculated, and varies depending on the height of your WebListBox and the height of the rows.

A sortColumns parameter is also provided. If you allow your users to sort the columns, you need to use it to know the column and direction. Fortunately, this example has sortable columns. Here is the code to comply with the WebDataSource Interface:

Var sql As String = "SELECT id, foo, bar, baz FROM things"
If sortColumns <> "" Then
  sql = sql + " ORDER BY " + sortColumns
End If
sql = sql + " LIMIT " + rowOffset.ToString + ", " + rowCount.ToString

Var result() As WebListBoxRowData
Var rows As RowSet = Session.Database.SelectSQL(sql)

// This isn't needed, it's just to demonstrate how to use cell renderers
Var style As New WebStyle
style.Bold = True
style.BackgroundColor = Color.Teal
style.ForegroundColor = Color.White

For Each row As DatabaseRow In rows
  Var newRowData As New WebListBoxRowData
  newRowData.PrimaryKey = row.Column("id").IntegerValue
  newRowData.Value("id") = row.Column("id")
  newRowData.Value("foo") = row.Column("foo")
  newRowData.Value("bar") = New WebListBoxStyleRenderer(style, row.Column("bar"))
  newRowData.Value("baz") = row.Column("baz")
  result.Add(newRowData)
Next

Return result

Preparing the User Interface

You’ve reached the easiest part, building the interface takes less than a minute.

1. Drop a DatabaseDataSource control into your WebPage
2. Drop a WebListBox control into your WebPage
3. In the WebListBox Opening event, configure the DataSource

If you name your DataSource instance “MyDataSource”, this is the line of code required in the WebListBox Opening event:

Me.DataSource = MyDataSource

Here is a short video:

That’s It!

The WebListBox control, when combined with a WebDataSource, is a very robust and performant solution for displaying a large set of data.

Download the project:

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.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

Control Sets

There are cases where you have a bunch of controls with the same functionality. Imagine you are coding a calculator and you’ve just added the WebButtons for each digit. It would be repetitive and error prone to add the same code to Pressed events, on each button when the only thing that changes is the numeric value.

A set of controls can be grouped, so you can think about them like if you were using an array. You can add event handlers to the group itself. Events will be enhanced with an “index” parameter, to help you decide what to do, depending on the element.

Create Tabs and Embed Controls at Runtime in WebTabPanel and WebPagePanel

Same as with Control Sets, this is something that was already present in Desktop projects and we wanted to include it for Web. From now on, you will be able to create and remove tabs and pages in WebTabPanel and WebPagePanel controls, respectively. Controls can also be added and removed at runtime, or move controls between tabs or pages whenever you need.

This opens a new world of possibilities for your applications, where you can provide your end users a way to have multiple contexts open at the same time.

WebListBox: Configurable Header and Row Height, Border and Line Style

You will be able to configure the height of WebListBox headers and rows with the same API you are used to using in your Desktop projects. You won’t need to tweak them with CSS anymore.

HasBorder and GridLineStyle has also been added to Web projects, allowing you to remove the outside border, display only vertical lines between the columns… or just remove them.

WebDataSource Interface

Speaking of WebListBox improvements, you’ll find that the WebDataSource is easier to implement. You won’t need to implement SortedPrimaryKeys and UnsortedPrimaryKeys methods anymore.

There are only three methods required now:

• ColumnData: Where you will define the amount of columns, names, and configure if they are sortable
• RowCount: So the control can now the amount of space it will need
• RowData: This is where you return an array of rows

WebListBox lazy load rows, meaning that it will only ask your DataSource for the amount of rows being displayed on screen. It will only fetch more when needed.

WebListBox Improvements When Using a WebDataSource

Using a WebListBox with a DataSource makes it possible to display very large amounts of data. Until now, you were able to display thousands of rows very quickly. This release improves the way Xojo uses your DataSource, without having to change a line of code in your projects.

Scrolling through the data will display the rows much faster than before. Just for comparison, 2024r1.1 was able to display 1 million rows in about 6 seconds in my computer. The same project, using 2024r2, can display them in less than 100ms.

But is not just the speed that has been improved. Its memory footprint has been dramatically reduced as well. Displaying 1 million records in 2024r1.1 used about 1 GB of RAM, where 2024r2 will use just a few MB instead.

I can’t imagine a use case where you need to display millions of rows and scroll through them. But if you find one, you will be able to implement it with Xojo

WebButtons Can be Resized Now

In order to make it easier to migrate your Web 1 projects, you will be able to modify the height of your WebButtons. The web framework will also take care to reduce the font size if needed when the button is smaller.

Individual Indicator for Each Segment of WebSegmentedButton

There are situations where you want to mix different “indicators” (different colors) in a single WebSegmentedButton control. For example, pressing on one of the segments can be a destructive action, so you could use the Danger indicator. By default, segments will use the indicator you set in the Inspector panel, but you will be able now to individually override one of them.

Me.Indicator = WebUIControl.Indicators.Primary
Me.SegmentAt(1).Indicator = WebUIControl.Indicators.Danger
Me.SegmentAt(2).Indicator = WebUIControl.Indicators.Success

Having 4 segments, this will be the result of above example at runtime:

Outlined WebButton and WebSegmentedButton

Some GUIs could become overwhelming, when every button looks like a call to action. The new Outlined property, available in WebButton and WebSegmentedButton controls, can help with heavily loaded interfaces. Here is how it looks like:

Performance, Memory Leaks, Bug Fixes

Last, but not least, 2024r2 comes with great performance improvements. We’ve been improving the web server to handle even more requests per second. If you are using Xojo Web for exposing an API, it will be able to serve more requests in less time. For regular Xojo Web applications, it means it will be able to handle more events and reply to them faster.

Here is a comparison of the same project during the different releases of Xojo:

Latency has also been improved, Xojo is able already to reply in less than 2ms:

If you are still serving Web APIs with Web 1, this is a good opportunity to migrate:

That’s a Wrap!

As usual, I’d like to send a big thank you to everyone taking the time creating bug reports, feature requests and testing beta releases. This wouldn’t be possible without your support.

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.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

Have you ever stumbled upon a website or app and been instantly captivated by its design? That’s the magic of great visual appeal. And guess what? You can bring that same magic to your Xojo web app with the help of Bootstrap themes.

Imagine your app not just as a tool, but as a full visual-interactive experience for your end-users. Whether you’re a design newbie or a seasoned pro, these themes offer a seamless way to enhance your web app’s look and feel.

This tutorial will equip you with all the knowledge to select and use Bootstrap themes for your Xojo web apps. By the end of this guide, you’ll have the tools and confidence to create a visually appealing, user-friendly app that turns heads and wins hearts.

What are Bootstrap themes and why use them in Xojo?

Bootstrap is a popular front-end framework that helps developers create responsive and visually compelling web applications. Bootstrap themes are pre-designed templates built with this framework, making it easier to achieve a professional look with minimal effort.

Xojo, by default, uses a modified Bootstrap theme for its web apps. This means that right out of the box, your Xojo web app already benefits from Bootstrap’s design and sleek aesthetics. There are countless pre-designed themes available online, both free and premium, that you can incorporate into your Xojo web app. These themes can dramatically alter the visual appearance of your app, offering various aesthetic options to suit your needs.

Now that you have a basic understanding of Bootstrap and its role in Xojo, let’s move on to how you can actually implement and customize these themes in your web app.

Step 1: Choose a Bootstrap theme

First, you need to choose a Bootstrap theme that fits the look and feel you want for your Xojo web app. There are numerous resources on the web where you can find free or premium Bootstrap themes. For maximum compatibility with Xojo, we recommend using themes from Bootswatch. Bootswatch provides a variety of free, Xojo-compatible Bootstrap themes.

Step 2: Preview and download the theme

On the Bootswatch website, click the “Preview” button for any theme to see how it will appear.

Once you find a theme you like, click the menu next to the theme’s “Download” button and select the file named bootstrap.min.css. This is the only file you need.

Step 3: Add the theme to your Xojo web app project

Now for the easiest step. Once you have the desired bootstrap.min.css file, simply drag and drop it into the Navigator panel of your Xojo project.

After adding the bootstrap.min.css file to your project, Xojo’s layout editor will instantly reflect the new theme. Moreover, your web app will utilize this theme when running.

Congratulations! You’ve now learned how to incorporate and apply Bootstrap themes to your Xojo web application.

Remember, the right theme can make your web app not just functional, but memorable. And with the countless options available, you’re sure to find a Bootstrap theme that perfectly matches your vision. Don’t hesitate to experiment with different themes and make adjustments as needed to get the perfect look for your app.

Now it’s your turn to put it into practice and create web apps that not only work well but look fantastic too.

If you have any questions or run into any issues, feel free to refer to the official Xojo documentation for more detailed information.

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!

Popovers

Similar to WebDialogs, popovers give you the opportunity to improve your apps’ UX. They are ephemeral screens where you can place text and controls.

Unlike the WebDialog, which is always centered and prevents the user to interact with other controls, Popovers can be placed on specific controls, where that information matters.

Think about them as enhanced “contextual menus” but, instead of just plain text menus, you can add anything you like. Have you ever dreamed of adding a WebMapViewer into some sort of contextual menu? Now you can!

The API is very simple. Create a container, add some controls and that’s it, really. You will just have to create a new instance of that container and show it as a Popover, specifying the control it should be pointing to.

Let’s say you have a container, called “MyTextFieldContainer”, and you want to display it below a WebLabel called “MyLabel”. Here is the code:

Var c As New MyTextFieldContainer
c.ShowPopover(MyLabel)

By default, it will be shown below the specified control, but if you want to show it in a different place, you can use the new DisplaySides enumeration. As easy as this:

Var c As New TextFieldContainer
c.ShowPopover(MyLabel, WebContainer.DisplaySides.Top)

As you can see, Web Projects’ Popovers are just container instances that you will show dynamically. That gives you the opportunity to raise events, add custom computed properties or implement the Observer interface. If you are already familiar with Containers, you already know how to use Popovers. Learn more about Popovers.

Displaying contextual menus programmatically

Sometimes Popovers could be overkill for the task. If you just want to display a menu with some textual items inside, a contextual menu might be enough.

Imagine you have a WebTextLabel where you want to display the contextual menu whenever the user Presses on it. In its Opening event you could define the ContextualMenu:

Var menu As New WebMenuItem
menu.AddMenuItem("Foo")
menu.AddMenuItem("Bar")
menu.AddMenuItem("Baz")

Me.ContextualMenu = menu

Implement the WebLabel.Pressed event and add this code:

Me.ContextualMenu.PopUp

As easy as that.

New RemoveControl method

WebViews controls, like WebPage and WebContainer, now supports removing controls. This gives you the missing piece to create GUIs programmatically, as AddControl was already supported .

This can be useful when you are presenting a form to your end user with an unknown amount of fields.

For example, your user is filling the profile and you want to support having multiple contact fields. Some users will want to add 1 phone, others 2, and others would prefer to be contacted just by email.

Adding and removing controls dynamically gives you the opportunity to build this kind of features. Instead of adding a fixed amount of contact methods, you can adapt your app to what your user really needs.

Performance and memory usage improvements

We’re landing at my favorite part, improvements that nobody will see… unless you want to share your server monitoring stats, which is cool.

2024r1 comes with less Disk I/O usage. In my own benchmarks, Xojo Web is now able to serve about 1200 requests per second via the WebApplication.HandleURL event. That’s around a nice 20% more, compared to the previous version.

Also, thanks to Jeremie Leroy (one of our Xojo MVPs) and Bruno Fréchette, we’ve managed to identify and fix some memory leaks. In 2024r1, your web application will be doing a better job at cleaning up after processing requests.

Bug fixes

The list of fixes is big, you can inspect the whole list in the 2024r1 Release Notes page.

Web fixes by category:

• Compiler: 1
• IDE: 7
• Framework: 40

18 extra regressions were reported and fixed during the beta period. A huge thank you to everyone taking the time to test our releases and reporting issues before the final release becomes available.

Conclusion

We hope you are as excited as we are for this release. I’m personally looking forward to see what you’re building, please remember to mention us on your favorite social network so we all can see what you’re working on.

In the meantime, we are already working hard preparing our next release, 2024r2. Spoilers: You will love it!

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.

Lately I’ve been pushing more toward building my own components from the ground up in JavaScript + Xojo rather than just wrapping libraries already available. It’s not an easy proposition. You don’t take advantage of the years of work that may have been put in to those libraries, but you’re also less at the mercy of those developers when you want to build new things on top or customize existing code. I thought I’d take the opportunity to document the hours I spent on a new component that will be coming to GraffitiSuite for Xojo Web in the next release.

Planning

Arguably the hardest part. Like any development project, a good foundation is the best place to start. Each time I decide to begin work on a new component, the first thing I do is outline, generally, what I want it to look like and how I want it to behave. This process is usually fairly quick as we’re just talking about a rough outline that’s typed or written out quickly. In all, I spend about an hour on the rough draft, then work on other things for a little while my brain works the problem. When I’m not focusing on something is when I have my best ideas, so I let my subconscious take the wheel. Over time, I’ll update that rough draft any new ideas I have. It’s important to quickly jot down anything good so you don’t forget. Then, when I’m ready to complete the planning phase, I gather all of my notes and start filling in the blanks.

At this point, I begin working on the API. What functions will this component need in JavaScript? In Xojo? What properties will it need? What types are those properties? Some things, of course, are a question mark until I actually start implementing. This usually takes a couple of hours not including any time I may spend talking to customers/clients about what their needs from the component might be.

Time: 4 hours

Building

HTML

I start by building the sketched UI in HTML. I want to see how all of the pieces fit together, then I can translate that to JavaScript code later. This isn’t a big process as I don’t implement things like tooltips, animation, etc. I just need a starting point.

Time: 3 hours

JavaScript

I’ve been working with vanilla JavaScript lately, as I don’t want my components to rely on jQuery (which the whole world is trying to get away from). Since I need as much of my code as possible to be client-side, and I want to be OOP, everything is built in JavaScript classes complete with getters and setters for properties — which is a lot of repetitious code that doesn’t seem like it would take long, but it does. I also don’t build my JavaScript directly on the Xojo WebSDK anymore because I need it to be more portable and useful in more places than just Xojo.

The first step here is implementing my default values that I determined were needed in the planning phase as properties of the class. This is also where those getters and setters come in to play. I want a basic new instance of the class to be as feature complete as possible then allow customization by altering those properties at runtime. To accomplish this I create a defaults object that contains all those values, which also serves as a quick reference in code when I’m implementing everything later.

Next I start building the UI. Each of my classes has a render() method that is responsible for creating the HTMLElements and adding them to the document where they’re supposed to be. This has gotten a lot easier with vanilla JS in recent years, but it can still be pretty time-consuming. There’s a lot of back and forth testing during this phase to ensure that the appearance is correct, the defaults are honored, etc.

Once the UI is completed, I go back and implement all of those setters to make the necessary changes to the HTMLElements when their value has changed. This can take a bit of time depending on what that property accomplishes.

Finally, the meat of the component. Any logic gets built at this point such as showing/hiding elements based on events or properties, implementing event callers, filtering data, etc. This is usually the longest part and requires a lot of testing. If the logic of the component fails right out of the gate, the rest of the component can fail too.

Throughout this phase I test against a static HTML page, and correcting anything obvious as I go, try new things, fail at trying new things, and more.

Time: 51 hours

Xojo

Building the Xojo wrapper on my JavaScript class can be painful because it’s just so tedious sometimes. Creating Xojo classes (of which there are typically more than one) with all of their properties, methods, and event definitions to match the JavaScript API can be very mind-numbing, but it’s usually pretty quick, by comparison, if you resist the urge to just walk away for days on end. I also have to make sure that if there are child classes, they have a method to communicate with the parent class and that it functions properly as all of the changes sent to the JavaScript class will happen in the parent.

Time: 15 hours

Testing

Testing should, and does, take a very long time. At this point I recognize and correct not only bugs, but inconsistencies in the API. It’s at this point that all of the polish is added. Making the Xojo class(es) communicate effectively with the JavaScript class(es), ensuring that data types are being honored between the two, testing every feature as in-depth as I can. As many of us know, this is where we really see how well our planning phase went.

Time: 26 hours

Implementation

Depending on the control, this can be very fast or take quite a long time. Some components are just so complex that they’d take ages to build in the GraffitiSuite Demo, so I have to pick and choose what I want to draw the user’s attention to. Likewise, sometimes they’re so simple that there really isn’t much to the demo beyond a couple of buttons and labels. For this component, it’s one that’s so complex that showing off as much as I can is the route to take, but with limited ability for users to change what’s happening on the screen during the demo, so it was pretty quick to build.

Time: 2 hours

TLDR

Just one of the new components coming to GraffitiSuite for Xojo Web Edition in the next release took a total of 101 hours to complete from planning its feature set to creating the demo page in Xojo. I’m feeling even more exhausted just reading that number, but I know that I have a solid foundation for my product going forward. One that I wrote and will be able to easily maintain for use with Xojo or anywhere else I may have a need.

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

Faster HandleURL Responses

With Xojo Web you can create APIs backing your Mobile or Desktop applications. Just by updating to Xojo 2023r4, your web services will get the benefit of much faster responses and the ability to handle many more requests per second.

Just to compare between different Xojo versions, we’ve created some benchmarks using Xojo Web 1 (with Xojo 2019r3.2) and some Xojo Web 2 releases, 2023r3.1 and the latest one, 2023r4.

Here are the results, returning plain text:

And the same test, but this time returning a string generated by JSONItem:

Xojo 2023r4 is capable of serving around 20x more requests per second compared to Web 1, and around 4x compared to Xojo 2023r3.1. And thanks to the reduced latency time, your API will return the contents much faster.

Faster Transfer Rates in Windows and Linux

While working on performance, we’ve found that applications deployed on Windows and Linux were serving large files much slower than those deployed on macOS servers.

William improved the low level code for sockets on those targets, allowing the server to transfer large files at a much faster speed. During my tests, I’ve seen 10x faster transfer rates.

But this doesn’t affect only our Web target! If you are using a ServerSocket with TCPSocket classes, your Console and Desktop applications will also benefit from these improved transfer rates.

Static Assets Cache Control

In this release, we’ve also improved how the framework interacts with the browser. When your user visits your web application for the first time, it will store all of the required JavaScript and CSS files.

This was already happening in previous releases but with a subtle difference. From now on, the browser won’t even need to check with the server if the file has changed since the last visit. This translates to faster load times for your users and less server load for you since the server won’t need to handle all those requests anymore.

Improved Compile Time

In this release, Xojo Web will compile your projects a few seconds faster. The first time you compile your project, it will cache the result of some processes that are only changing between Xojo releases.

Here is a comparison between 2023r3.1 and 2023r4, both are running a debug session of a blank project:

That’s around 3-4 seconds faster every time a project compiles.

Events Improvements

Some web controls were sending information from the browser to the server more frequently than needed. For example, a WebContainer.Scrolled event was being sent for every scrolled pixel, causing unnecessary server load.

We’ve been reviewing these controls and have made some improvements:

• WebCombobox
• WebContainer
• WebSearchField
• WebTextArea
• WebTextField
• WebUploader

All of them will continue communicating their state updates, but the framework will focus on delivering the latest value available.

For example, in a WebSearchField, if the user writes “hello”, the framework will send the first key press (“h”) as soon as it happens. The next event it will send will depend on how fast the user types, so it can be either “hel” or maybe directly “hello”. What is guaranteed is the TextChanged event will be fired for the final value (“hello” in this example).

New Experimental Option

WebSession has a new experimental option available, disabled by default. “Send Events in Batches”:

Turning it on will make our JavaScript framework group different event notifications in a single request. Projects that contain complex layouts that show and hide several controls at once may benefit from snappier GUIs.

As a side effect, it will also ensure the events arrive to the server in the correct order. Think about a login screen where the user has an email field, a password and a “Login” button with the Default setting turned on (to allow the user to trigger the Pressed event by pressing the Enter key). When sending the events in different requests, because of network latencies, the WebButton.Pressed event could arrive at the server before the last WebTextField.TextChanged.

We would love to hear your experiences when turning on this experimental option. If you find an issue, please report it.

Wrapping Up

As always, while Xojo 2023r4 comes with a lot of performance improvements, it also comes with bug fixes and feature requests. I want to again thank everyone who took the time to create new Bug reports and Feature Requests, and tested the pre-releases.

We’re looking forward to see what you build with it!

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.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

Xojo Cloud is optimized for Xojo applications. It is specifically designed to provide the best possible performance and stability for Xojo web applications. We optimize Xojo Cloud for performance, so your web apps will run smoothly and seamlessly. You can even monitor server stats from within the Xojo IDE.

Xojo Cloud is focused on simplicity and ease of use and requires zero configuration. Designed with the Xojo developer in mind, Xojo Cloud’s Control Panel makes it easy to deploy and manage web applications. Purchase a server, open a web project in Xojo and click Deploy to upload and install to Xojo Cloud. Not just for web apps, Xojo Cloud includes Apple Push Notification server (APNs) support for your iOS apps. Set up SSL, PostrgeSQL, MySQL, SFTP and a SSH Tunnel with a click in the Xojo Cloud Control Panel (the Control Panel itself is a Xojo web app). The administration of a web server is a significant and constant task; Xojo Cloud allows you to leave that behind and focus on your projects.

We take security very seriously. Xojo Cloud offers advanced security features to protect your data from cyberthreats, including a smart firewall, intrusion and hacking detection and Security-Enhanced Linux. Unlike most hosting solutions that provide little to no security, each Xojo Cloud server is built with our state-of-the-art, industrial-strength, multi-tiered security system woven into its very core. 

Additional features and benefits include daily automatic backups, load balancing and support from the Xojo team. With nine global hosting locations, you are able to host your Xojo web applications close to your users, for speed and an ideal overall experience.

In addition to the standard options, Xojo Cloud servers with more RAM, storage and Virtual CPUs are available. Contact customer support for details about personalized plans. 

Whether you are a seasoned Xojo developer or just getting started, Xojo Cloud provides an intuitive and user-friendly hosting solution for Xojo web applications. Today is a good day to start using Xojo Cloud, visit our website to learn more or see the Xojo Store to pick your package and location.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

Some Background

Xojo has been using Google Maps Embed as our map renderer for a while. Google Maps is a really nice product, but an API key is required nowadays for almost anything. Noticeably, in Xojo’s Eddie’s Electronics web example, the map in the customer list was only displayed if you had a valid API key for Google Maps.

MapLibre is a robust Open Source mapping library alternative that Xojo is using under the hood now. With this update, you can create truly interactive maps with Xojo supporting multiple markers and customization.

While you can still use Google Maps Embed as the renderer, MapLibre is our preferred option and will be Xojo’s default going forward.

Map Tile Providers

When switching to another library, we wanted to make sure you, as a developer, have more control. WebMapViewer comes with a new property, StyleURL, pointing to an endpoint that returns a Style file.

Style files are JSON documents following the MapLibre Style Spec. The easiest way to create a customized map is to register in one of the providers that supports this format. These providers will give you a style URL that you can use with your map. Some of them:

• https://www.maptiler.com
• https://www.mapbox.com
• https://stadiamaps.com
• https://www.arcgis.com

By default, Xojo uses OpenStreetMap raster tiles which should be OK for development or little web applications.

But you aren’t limited to using third party providers anymore. In projects where privacy is important or when you don’t want to be worried about monthly limits or prices, you can use software installed on premises to serve your own map vector tiles!

Martin is Open Source, but you can also use a commercial solution like MapTiler Server.

Address Lookup

Same as with map tiles, by default your maps will be using a free to use Geocoding service, Nominatim. If you hit a limit or if, for example, you are working on a project with privacy limitations, you can install Nominatim on premises.

Using WebMapLocation.LookupProviderURL, you can point to your own Nominatim server.

Retrieving and Drawing Routes

Last, but not least, you can retrieve and render routes, using OpenStreetMap. No matter what map tile provider you are using, you can draw routes on the map. When you use the Directions mode, all you have to do is add locations to your map.

But if you need more control, switch your WebMapViewer to View mode and use the new methods for getting and drawing routes. When using the method to retrieve the route, you will obtain a MapRoute object with distance and duration information. You can also use this object for things like serializing it and storing the result in a database. This allows you to skip sending a new routing request to the service and just render it.

While driving will be the default, the transportType parameter supports Car, Bike and Walking.

Make sure to check the updated WebMapViewer in the Xojo programming documentation.

That’s a Wrap!

We are already working on new features for this control that will come in upcoming releases, and we can’t wait to see what you create with this new version of WebMapViewer.

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.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

Before we jump into the topic, it’s worth mentioning that this is new in Safari 17, but it is a W3C Standard that might work with other combinations of browser and operating system.

One of the biggest advantages of creating a web app is that users won’t need to update it manually. Once a new version is deployed, a browser refresh will be enough to update- which Xojo handles that automatically. If we are talking about a large company with hundreds of computers, it’s easy to see how having a web-based Intranet, for example, would reduce maintenance costs.

Step by step, browser vendors are allowing developers to access APIs that are traditionally reserved for native desktop or mobile developers.

Adding Icon Badges

When users add a web application to the Dock, developers have the opportunity to set a numerical badge. This helps let the user know the amount of items requiring attention.

Missed calls, unread message notifications or the minutes pending in a Pomodoro session. The meaning of the badge value is determined by you.

This Web API is pretty easy to use in Xojo. Add a few new public methods to the Session object, called SetBadge and ClearBadge, respectively.

SetBadge (amount As Integer)

Var js() As String

js.Add("if ('setAppBadge' in navigator) {")
js.Add("  navigator.setAppBadge(" + amount.ToString + ");")
js.Add("}")

ExecuteJavaScript(String.FromArray(js))

ClearBadge

Var js() As String

js.Add("if ('clearAppBadge' in navigator) {")
js.Add("  navigator.clearAppBadge();")
js.Add("}")

ExecuteJavaScript(String.FromArray(js))

That’s it. Whenever you need to display a badge for that user, call Session.SetBadge(42), for example.

Creating a Manifest File

While is not required, a web app manifest file will allow you to tweak the look and feel of the application when added to the Home / Dock.

In order to let the OS know there is a Manifest file, add a new HTML header. Go to App -> HTML Header and add this line:

<link rel="manifest" href="/manifest.json" />

Let’s fill in the contents. We have to handle that “/manifest.json” URL. Add a new Event Handler in the app object, select the “HandleURL” event.

This is an example of how to create that file:

Select Case request.Path
Case "manifest.json"
  Var manifest As New JSONItem
  manifest.Value("display") = "standalone" // Remove back/forward buttons
  manifest.Value("name") = "My Xojo Application"
  manifest.Value("short_name") = "Xojo App"

  response.MIMEType = "application/json"
  response.Status = 200
  response.Write(manifest.ToString)
  Return True
End Select

You can check the whole list of parameters available from this website:
Web app manifests

Debugging Web Apps

Hey! Where are my Developer Tools!?

You can’t directly debug a web app from the app itself. But if needed, you can still open Safari, press on the Develop menu and, from there, access a Developer Tools instance for any web app that is opened:

That’s All!

While a web app is far from a native desktop app, changes like this make the the gap a little smaller and the user experience a little better.

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.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

For most Xojo users, this update won’t require any changes at all to your existing projects. For those that create their own controls using the Web SDK, there will likely be a minor bit of work.

Dark Mode Support

The Web framework is currently the only Xojo framework that doesn’t support Dark Mode. Fortunately, Bootstrap 5 does. As with Desktop targets, users of your Web projects will be able to decide between the light and dark modes. For Web projects, there is now a Supports Dark Mode Build Setting that will be off by default for existing projects and on by default for new ones.

More Than Dark Mode

Visually, Bootstrap 5 comes with some subtle changes. For example the blue color it uses is still blue… but not that blue, helping to increase the contrast of your buttons.

You may notice that the buttons are a little bit rounder by default, following the latest design trends.

The look and feel of some input controls, like checkboxes and radio buttons, will be more similar between different browsers and operating systems.

Bootstrap 5 also includes new components and features, like Accordion and Offcanvas. These may find their way into future releases via the Web framework or from one of the third-party control developers.

Finally, Bootstrap 5 no longer depends on jQuery and it makes use of the latest CSS features which brings us to the next section.

Potential Migration Challenges

We’ve made it so most Xojo users won’t need to make any changes to their web projects. For example, we’ve adapted the Breadcrumb control to look like Bootstrap 4 by default. Generally speaking, if you are using the default theme and you aren’t using third-party controls, you won’t need to do anything special.

However, if you are currently using a custom Bootstrap 4 theme that uses a custom bootstrap.min.css file, it may not work properly. If you’ve downloaded the theme from a website such as Bootswatch, you can download an updated Bootstrap 5 compatible theme from the same site. Bootstrap 5 themes are actually easier to find than those for v4.

If you are still curious about Bootstrap 5 specifically, you can view the Bootstrap 5 Migration Guide where you can find an extensive list of changes and improvements since Bootstrap 4.6.

If you have any questions, please feel free to ask on the Forum.

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.

Dark Mode Support and Bootstrap 5

You can now create web applications with Xojo that respects users’ Dark Mode preference with Bootstrap 5.

There is a new WebSession.ColorMode property you can use. It will be set as Auto by default, meaning it will match the user’s OS appearance preference, but it can also be forced to Light or Dark. It can be changed at runtime and per session.

While not everyone likes Dark Mode, some of your end users will appreciate this. Due to medical circumstances, they might actually need it, so please consider adding support even if you don’t like dark interfaces.

If you want to enable Dark Mode in your previous projects, you will have to manually enable the setting in the Shared Build Settings section (which is turned on by default on new projects):

Color Groups can also be used nearly everywhere, and they will be used in the IDE preview when you toggle between Light and Dark Mode:

In order get Dark Mode support ready for Web, we had to upgrade our internal Bootstrap dependency from v4.6.1 to v5.3.0, which is a huge leap by itself. Bootstrap 5 comes with a refreshed color palette, new components, modernized existing controls and bug fixes. Please check our previous Bootstrap 5 is Coming to the Xojo Web Framework blog post.

If your application wasn’t using a custom Bootstrap Theme (bootstrap.min.css), everything should look more or less the same except for the subtle color palette differences and rounder buttons. Bootstrap 4 themes aren’t supported in Bootstrap 5, please replace it with a v5 theme if needed. Not every theme supports Dark Mode, but the one included in Xojo does.

If you are a theme builder, please check the Bootstrap’s Color Modes documentation. You can also find free Bootstrap 5 themes available at Bootswatch.

We also want to send a big thank you to our third party developers for their effort adapting their Open Source and Commercial plugins and controls to Bootstrap 5. You can learn about what they offer at the Xojo Extras Store and in the Open Source Projects page in the Xojo Documentation.

Accessibility

Navigating and using web applications with the keyboard makes everyone’s life easier. In Xojo 2023r2 we’ve upgraded WebPagination and WebBreadcrumb controls, which are composed of more than one focusable item. Your users will be able to properly use the tab key to go through them.

We plan to continue working on improving Accessibility. Please open a new Issue if you find anything that can help you and your end users.

WebListBox

DataTables, the internal dependency we use for bringing your tables to life, has been upgraded from v1.10.20 to v1.13.4. This recent version includes support for Bootstrap 5 and a few bug fixes that some users were facing in their web projects.

You can now disable your WebListBox by setting its Enabled property to False so your users won’t be able to interact with it. And also, if you were missing this feature that’s in the DesktopListBox, you can now add Variant tags to your columns, using the new WebListBox.ColumnTagAt.

Last but not least, this control comes with a visual Inline Editor, like in its Desktop counterpart:

WebChart

Chart.js, the underlying library we use for WebChart, has been upgraded from v2.9.3 to v4.2.1. Again, we’ve done everything we could on our side so you don’t have to do anything.

The only exception is with the WebChart.OverrideOptions event. If you are currently using it, you’ll have to check the library documentation as the internal options JSON has changed.

You can expect the new DesktopChart features to be working on WebChart, like configuring how the lines look like (including the endpoints), background images or prefix and suffixes. Read New Additions to DesktopChart, MobileChart and WebChart to learn more.

Web SDK

If you are using third party controls, you will notice some of them now have a custom icon in the IDE Library. But even more important, they will use less memory at runtime.

Are you developing Open Source or Commercial Web SDK controls? Remember there is a dedicated Web SDK forum where you can ask any questions you may have.

IDE Performance and Improved CSS Support

Bootstrap 5 makes use of the latest CSS features. We took the opportunity to rethink our CSS parser and improve its performance at the same time. As a result, the IDE preview looks even closer to what you see in the browser, and we render everything faster.

Wrapping Up

Over 50 bug fixes and features were included just for Xojo Web in Xojo 2023r2. Please find a full list in the Release Notes. read more about Bootstrap 5 and updates to WebChart on the Xojo Programming Blog. We are looking forward to hearing your thoughts and seeing what you’re building with Xojo! See you in the forum!

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.

Brief introduction to the Atomic Design Methodology

If you haven’t heard about Atomic Design before, I really recommend that you dig a bit into this topic. With this way of methodology in mind, we will start building the smallest controls we can. Then, we will compose more complex controls reusing the smallest.

Keep in mind you don’t really need to blindly follow the Atoms, Molecules and Organisms proposed categories, and don’t overthink where to categorize them. As long as you can compose controls with other controls, that’s perfect. Adapt it to your own personal way of building software.

The idea resonates perfectly with Xojo and, while we will create a few web controls in this example, you can apply it to other targets like Desktop or Mobile.

Here is a video from Brad Frost, the person behind Atomic Design Methodology.

Containers to the rescue!

In this case, we won’t need to use any Web SDK control, CSS or JavaScript. We will be using just plain Xojo Web Containers for creating our Atoms and Molecules.

This is how Twitter’s navigation sidebar looks like:

We will create something similar. Using Atomic Design, let’s break it down it into a few new reusable controls:

Each Atom, Molecule and Organism will be a Container. In the above image, we have identified each of them.

• There is a “Navigation Link Icon”, an Atom, which will show one of the available Bootstrap Icons. As you notice in the Twitter example, if the link is active, the icon will be filled.
• For the label Atom, we can just use the WebLabel built-in control. There is no need to wrap it in a Container, in this case.
• The navigation link will be a Molecule, combining the icon and the label.
• The Active Link Indicator will move to the active link, using an animation.
• Finally, the Vertical Navigation Control will be the Organism, combining everything into one.

Navigation Link Icon

This Control is basically a Container, with an ImageViewer inside. Technically, this could be just an ImageViewer subclass, but using a WebContainer we can also specify its default width and height.

It will have two computed properties:

• Active As Boolean
• IconName As String

There will also be a private ShowIcon method. Whenever you change either the Active property or IconName, the computed property will call ShowIcon.

The magic is inside ShowIcon:

Var iconColor As Color = If(mActive, Color.Black, Color.LightGray)
Var icon As String = If(mActive, mIconName + "-fill", mIconName)
IconImageViewer.Picture = WebPicture.BootstrapIcon(icon, iconColor)

The icon color will be either LightGray or Black, depending if it’s active or not. There are also a lot of Bootstrap Icons with the “-fill” suffix so we’ll use them. This will force us to only use icons which have that suffix, but we will have to live with that.

The final trick is to use the Inspector Behavior and expose our Active and IconName computed properties. Right click on NavigationLinkIcon, then click on Inspector Behavior:

From there you can enable the checkboxes and define their default value:

Now that we have the Control ready, let’s see how it works on its own:

Neat! You can reuse this Atom everywhere, including other projects.

Navigation Link Control

Combining our fresh NavigationLinkIcon, a built-in WebLabel and exposing an API, we’ll create our NavigationLink Molecule.

Create a new Container and place the items inside. Then add some computed properties:

• Active
• Caption
• IconName

Whenever the property changes, just update the underlying control.

One trick, to make the control clickable, is to add a WebCanvas on top of the other controls. Implement its Pressed event and forward it as a new “Pressed” Event Definition.

If you want to show a pointer cursor when the user moves the mouse over your control, add this line of code into the container’s Opening event:

Me.Style.Cursor = WebStyle.Cursors.Pointer

This is how it looks like in the IDE:

Let’s quickly test it:

We are getting there.

Active Link Indicator

We have most of the Atoms and Molecules created already. The Navigation Link Indicator is so simple and so tied to the Sidebar, that I don’t think creating an individual Atom for it is worth the effort.

Using a WebRectangle, with a line of two of code in its Opening event, will be enough. This is completely up to you!

Vertical Navigation Control

Now it’s time to glue the Atoms and Molecules together to make our first Organism. Create a new Container called VerticalNavigation.

Drop a WebRectangle on it. Set its Left and Top to 0, and implement its Opening event with these lines of code:

Me.Style.BorderThickness = 0
Me.Style.AddTransition("top", 0.2)

That will remove the border that comes by default with this control. It will also tell the browser to animate the rectangle whenever we change the Top position.

The rectangle background color will be a light gray, but this is again up to you.

For the API we want to expose, add these Methods:

• AddLink(caption As String, icon As String, active As Boolean = False)
• HandleLinkPressed(sender As NavigationLink)
• SetActiveLink(index As Integer)

AddLink and SetActiveLink can be left Public, HandleLinkPressed will be a Private Method.

AddLink code:

// We will create a new NavigationLink instance
// and set the properties we're receiving.
Var link As New NavigationLink
link.Caption = caption
link.IconName = icon

// For its pressed event, we will handle it
// internally in the HandleLinkPressed method.
AddHandler link.Pressed, WeakAddressOf HandleLinkPressed

// We will place it programatically in  the container.
Const padding = 10
Var linkTop As Integer = mLinks.Count * (link.Height + padding)
link.EmbedWithin(Self, padding, linkTop, Self.Width - padding, link.Height)

// A reference for this NavigationLink will be
// needed later, so we will store it internally.
mLinks.Add(link)

// Finally, if the item is active, we will
// handle it just like if it's been pressed
// by the user.
If active Then
  SetActiveLink(mLinks.LastIndex)
End If

HandleLinkPressed code:

SetActiveLink(mLinks.IndexOf(sender))
RaiseEvent Pressed(sender)

And, finally, SetActiveLink:

// Here we will loop through the NavigationLink
// references we have and enable or disable the
// Active property, depending on the index
// comparison.
For i As Integer = 0 To mLinks.LastIndex
  mLinks(i).Active = i = index
Next

// Move the visual active indicator to the
// NavigationLink position.
ActiveLinkIndicator.Top = mLinks(index).Top

Final Result

Everything is ready, drop your VerticalNavigation somewhere in your WebPage and add a few links inside its Opening event:

// Setting the third parameter to "True" will set that link as Active.
Me.AddLink("Home", "house")
Me.AddLink("Explore", "binoculars", True)
Me.AddLink("Notifications", "bell")

You should see something similar to this:

Congratulations! You’ve built a vertical navigation, with nice transitions, using some Atomic Design principles.

Code repository: https://github.com/piradoiv/vertical-navigation-example
Download the project: vertical-navigation-example

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.