The focus of this release was on the integration of pictures in controls, such as MobileButton, MobileDateTimePicker, MobileTextFields, MobileSlider etc.

Let’s take a look at some new possibilities using examples.

Create a MobileButton with a Picture

This is a feature that is in demand in Xojo Issue Tracker and has not yet found its way into the Android framework. So let’s just do it ourselves with the help of the Android Design Extensions.

Create a new Android project. Now copy the Android Design Extensions folder into the project or drag and drop it into the Navigator. Now select Screen1 in the Navigator and add a MobileButton – Button1 – and give it the Opening event. Add the following code to the Opening event:

Me.SetIconXC(SaveSystemImage("camera")) 
Me.SetIconGravityXC(IconGravity.TextStart)

SaveSystemImage is an extension method that returns a FolderItem and saves a Picture.SystemImage with the specified name (here „camera“) in the Documents folder. Why? Xojo Declares do not support Picture as a data type and therefore we have to take the detour and save images once in order to load them into controls via the file path.

You can of course also use any other image and are not restricted to Picture.SystemImage. All Android Design Extensions extension methods that have to do with the display of pictures are prepared for this and expect a FolderItem as a parameter, which must of course be a picture (PNG, JPEG etc.).

SetIconGravityXC ensures that the Picture is displayed in front of the button text. And that’s all there is to it. Execute the project and you have a button with an image.

Tip: If you create a MobileButton subclass, you can cache the FolderItem via Static to create the image file only once. Of course, this only applies to the fact that all button instances of this subclass should always display the same image.

To see how to add an image to a MobileScreen, MobileSlider or MobileSwitch, simply take a look at the Android Design Extensions sample app.

TabPanel Badge Extension

MobileTabPanel tabs now also support text badges. How is it done?

Add a MobileTabPanel – TabPanel1 – to your project and add the Opening event to it with the following code:

Me.SetBadgeTextAtXC(0, "Exclusive")

And that’s all there is to it. The result is as follows:

There are other MobileTabPanel extension methods with which you can customize the badges (color, position, etc.). Give it a try!

TextFields on a New Level

TextFields can also be enhanced with the new Android Design Extensions version.

The SetBoxCornerFamilyXC call now offers the option of choosing whether you want rounded or flattened corners. You can also use SetCursorColorXC to define the color of the cursor for each individual TextField.

TextFields can now also have leading or trailing icons. The helper methods for this are SetStartIconXC and SetEndIconXC, which in turn expect a FolderItem (Picture) as a parameter.

There are many other new declares. Have a look here too.

Feel free to take a look at the developer repository, create feature requests, and provide feedback on extending this extension library.

I’m happy to receive any voluntary financial support for the work I’ve done so far, which you are welcome to share here. You can download the project with many examples here.

Happy Coding.

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

And what do we mean by the transitory character of Popover windows? Well, and here comes one of the first differences from Modal windows. When a Popover is visible and the user clicks or taps on any other element of the graphical interface not contained in the Popover itself it will close, hence transitory. So, you don’t have to include the typical “Close window” button in a Popover (though you can), since it will close when the user clicks outside of it, i.e. when the Popover loses focus.

Where are the Popover Window Contents?

Where do you define the content displayed in a Popover window? While in your Web app, you can do it on any Container control added to the project. In the case of Desktop and iOS apps, you can do it on either the designs of a Container Control or any Window or Screen added to the project.

For example, here you can see that the content shown as a Popover in the previous screenshot is actually that of a Window (Window2) added to the project:

This introduces additional flexibility allowing your app’s logic to decide when to display a Window or Container instance as you have been doing until now, or display it as a Popover.

Showing a Popover

Displaying a Popover is very straightforward, whether it is created from a Container or a Window, the method is the same:

DesktopContainer.ShowPopover(parentControl As DesktopUIControl, facing As DesktopWindow.DisplaySides = DesktopWindow.DisplaySides.Bottom, detachable As Boolean = True)

The explanation of the expected parameters is as follows:

• ParentControl: The control that will act as the parent, or on which the Popover will be pointing to.
• Facing: The direction in which the Popover will point on the parent control; by default it will appear under the parent control, but you can use any of the values available in the DesktopWindow.DisplaySides enumerator (or the iOS equivalent).
• Detachable: This value only applies to macOS Popovers, since said operating system has the ability for the user to “detach” the Popover from the parent control as long as this value is defined as True. To detach, drag the Popover with the mouse cursor.

Let’s say we have a window called Window2 and a button called MyButton. In the Pressed event of MyButton we can use the following lines of code to display Window2 as a Popover:

Var w As New Window2
w.ShowPopover(me)

And that’s all!

Platform Differences

In the previous section we already pointed out the first: macOS is the only operating system that acts on the value indicated in the Detachable parameter. But there are some other considerations to keep in mind so you don’t get caught off guard:

• Beyond the limits. Although in Windows and macOS Popovers can exceed the limits of the window on which the parent control is located, the position of the popover in Linux is restricted to the limits of the window that contains the parent control. This is the same for iOS and for Web pages.
• iPhone and iPad. When a Popover is displayed on an iPhone, it will look like a modal window; while if the same application is run on an iPad, the appearance will be the typical one expected from Popovers: the window pointing to the parent control in the indicated direction.
• On the Web. The contents of a Popover are those defined in a Container control, while on the rest of the platforms you can use both Container controls and Windows / Screens.

Why the Popover doesn’t “point” in the configured direction?

By default it will try to do so according to the value that has been set in the “facing” parameter, but if it does not find enough space on the margins of the screen, then it will be displayed on the next side of the parent control in which there is available space for display the Popover in its full width and height; This is true on macOS, Linux, Web and iOS.

Can I reuse a Popover?

No, You can not. Whether you use a Container control or a window as the source of the UI design to be displayed by the Popover, do not lose sight of the fact that the Popover is just another type of window; and therefore behaves as such. That is, once it is closed either because it has lost focus or because you have closed it explicitly through code invoking the Close method, all the displayed controls and the rest of the internal structures will be closed / invalidated, so that although the instance If a Popover is not Nil (because, for example, you keep a reference to the window or container instance used as the UI source), you will not be able to invoke the ShowPopover method again on said instance but you will have to create a new instance of the Container/ Window used as the source of the UI to be displayed by the Popover.

How can I communicate with the UI elements contained in the Popover?

You would do so just as you would do with any other type of window that you have been using so far in your Xojo projects.

Conclusion

Without a doubt, Popovers are a new way to improve the design of your apps’ user interfaces, providing a more direct relationship between the user interface elements displayed in the Popover and the “parent” control in charge of displaying it. Furthermore, since you can use any window or container you want as the source of the UI to be displayed by the Popover, you will have greater flexibility about when you want to display them in a Popover or display them using any other of the available window types or, in the case of Containers, embedding them as part of other UI elements at runtime.

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

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

Functions

There are a few new SQLite functions that can now be used in your SQL statements.

concat()

The concat() function takes an arbitrary number of string parameters and concatenates them all together. Previous versions of SQLite required you to instead use the concat operator, this is the double-pipe: ||. Concat() is a standard function on many other databases (PostgreSQL, MySQL and SQL Server) so it is nice to finally see it available on SQLite as it allow more consistent SQL code.

Using the Chinook sample database, this SQL concatenates the Name and Composer columns from the Track table:

SELECT concat(Name, ‘ by ‘, Composer) FROM Track

Here is the output:

concat_ws()

The concat_ws() method is concat but with a separator. Strange naming aside, it works the same except that the first parameter is used a separator that is inserted between each string. This SQL separates the Name, Composer and Milliseconds with “—“:

SELECT concat_ws(‘---‘, Name, Composer, Milliseconds) FROM Track

Here is the output:

timediff()

The timediff() function calculates the elapsed time between two dates and returns the result in a human-readable format.

This SQL displays the time difference between Dec 12, 2023 and March 26, 2024:

SELECT timediff('2023-12-12','2024-03-26')

Here is the output of 3 months and 14 days (note that it is negative because the earlier date is first in the parameter list):

Other Changes

Overall I didn’t notice many other other significant new features. However, many bugs have been fixed, especially around database integrity checks and the somewhat new JSON support.

You can find the full list of SQLite changes on their Release History page.

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.

If you’re encountering display anomalies with the DesktopHTMLViewer on a Pi 5 running Bookworm OS, rest assured you’re not alone. This issue stems from the version of WebKitGTK the DesktopHTMLViewer relies on. While efforts to address this persist, a viable workaround exists: disabling hardware acceleration when utilizing WebKitGTK. Fortunately, in Xojo, we’ve facilitated this by exposing an environment variable. You can conveniently set this variable before the creation of the DesktopHTMLViewer, such as within your App.Opening event.

To turn hardware acceleration OFF, you can assign that to the WEBKIT_HARDWARE_ACCELERATION environment variable:

System.EnvironmentVariable("WEBKIT_HARDWARE_ACCELERATION") = "OFF"

By default, hardware acceleration is enabled/disabled as requested by web contents, but you can also force hardware acceleration to be enabled even for websites not requesting it:

System.EnvironmentVariable("WEBKIT_HARDWARE_ACCELERATION") = "ON"

To revert it to its default state, simply assign any value other than ON/OFF. While we remain optimistic that this issue will be resolved at some point, in the interim, this environment variable stands ready to function as a temporary solution.

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

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

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.

Supporting dark mode with Win32 controls is never an easy exercise, but if you’ve been following along with our work to modernize our Windows framework with XAML, then you may have already updated your apps with the XAML TabView control that natively supports dark mode.

Simply plug this bit of XAML into our DesktopXAMLContainer Content property and you’ve got yourself a modern looking TabPanel that already supported dark mode even before we did.

<winui:TabView>
	<winui:TabView.TabItems>
		<winui:TabViewItem Header="Tab 1">
			<StackPanel>
				<TextBlock Text="This is Tab 1" Margin="5"/>
				<Button Content="Button 1" Margin="5"/>
				<CheckBox Content="Checkbox 1" IsChecked="True" Margin="5"/>
			</StackPanel>
		</winui:TabViewItem>
		<winui:TabViewItem Header="Tab 2">
			<StackPanel>
				<TextBlock Text="This is Tab 2" Margin="5"/>
				<TextBox Text="Enter text here" Margin="5"/>
				<ComboBox Margin="5">
					<ComboBoxItem Content="Item 1"/>
					<ComboBoxItem Content="Item 2"/>
					<ComboBoxItem Content="Item 3"/>
				</ComboBox>
			</StackPanel>
		</winui:TabViewItem>
	</winui:TabView.TabItems>
</winui:TabView>

While people debate on which mode (light or dark) they prefer to work in, you can ultimately control whether you want to support dark mode or not in your app by toggling the “Supports Dark Mode” build setting. For an example on how to dynamically switch between dark and light mode in your app using XAML, see the XAML ButtonStyling example project and the RequestedTheme property.

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

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

Xojo Linux is Free

We have made building for Linux free and included in the Xojo IDE! This means that on Linux you get a version control ready IDE, along with the ability to build desktop and console Linux apps (including Raspberry Pi), all for free. Launch Xojo 2024r1 (or any later release of Xojo) and open any desktop or console project, go to Build Settings, select Linux and in the Inspector choose the appropriate Architecture that matches the Linux OS you want your app to work on, either ARM or x86. Click Build to compile your project to a standalone app that you can then run on Linux – no license required.

Wrapping Up

All these changes were made based on feedback from the Xojo community and to better match the changing ways that people develop and share software projects. With this change Xojo continues its dedication to supporting Linux.

Download Xojo to get started.

Edited 07/2025 to reflect changes to licensing.

As an example of how you might use ChatGPT in Xojo, I looked for a way to turn statements into questions. So I ask ChatGPT:

Turn “numerical limits of double in xojo” into a sentence.

ChatGPT’s response is:

What are the numerical limits of the double data type in XOJO?

Getting Started

Before you can run the example to test out the ChatGPTConnection class or use it in your own projects, you’ll need to do three things:

1. Create an account at OpenAI.com. This is free.
2. Add a payment method to your account (to use ChatGPT via an API, you need pay – more on that in a bit).
3. Get an API key. You’ll need to have added a payment method before you can get an API key.

One you have done this, open the ChatGPT Example project, open the ChatGPTConnection class and in the Inspector assign your API key to the APIKey constant. Now you can run the example. The example presents a window where you converse with ChatGPT.

Each window is a separate context. Try choosing File > New Conversation. Referring to questions you asked in another window won’t work because in this example each has its own context.

Using the ChatGPT Classes in Your Project

To use the ChatGPTConnection class in your project, copy both the ChatGPTConnection and the ChatGPTException classes to your project.

To use the ChatGPTConnection class, either drag it onto a window, webpage or mobile screen or create an instance in code. Most of the work is done by a single method: ReplyToPrompt. The syntax for ReplyToPrompt is:

ReplyToPrompt(prompt As String, Optional MaintainContext As Boolean = False) As String

In its simplest form, just pass your prompt and the class will return ChatGPT’s response. For example:

Var gpt As New ChatGPTConnection
Var response As String = gpt.ReplyToPrompt("Where were the 1980 Olympic Games held?")
MessageBox(response)

When you want ChatGPT to consider past requests in the same session, pass True for the MaintainContext parameter. This tells the ChatGPTConnection class to keep a history of all your requests and the responses from ChatGPT which it then sends along with your new request each time you call the ReplyToPrompt method. The amount of text you can send is not unlimited so only set MaintainContext to True when you really do need it to consider previous requests and responses. ChatGPTConnection defaults to GPT 3.5 Turbo which has a maximum limit of 16,385 tokens per context. A token is a number of characters. The conversion is approximately 4 characters per token. Think of a token as a typical word. When you set the MaintainContext property to True, the ChatGPTConnection class monitors your usage of tokens. When it gets to 90% of the allowed maximum for the model you are using, it will start trimming the oldest requests and responses from your history (stored in the ContextHistory property) to avoid you going over the limit.

ChatGPTConnection Class Properties

You don’t need to set any of the properties in the ChatGPTConnection class as they all have useful default values. However, if you want to use a model different from the default (gpt-3.5-turbo), you can set the Model property before calling the ReplyToPrompt method. You can find a list of models here. Models have different limits as to how many tokens you can use so when you change the Model property, make sure to also change the MaximumTokensPerContext property to the appropriate value for the model. The Temperature property indicates how creative ChatGPT will be. Another way of saying this is how much it will hallucinate. Its value range is from 0 (don’t hallucinate at all) to 2 (hallucinate all you want). The default is 0.5. Finally, the TimeOut property is how long ReplyToPrompt will wait for a response. The default is 30 seconds.

If anything goes wrong, the ChatGPTConnection class will raise a ChatGPTException so make sure to put your calls to the ReplyToPrompt method in a Try Catch statement:

Try
   Var gpt As New ChatGPTConnection
   Var response As String = gpt.ReplyToPrompt("Where were the 1980 Olympic Games held?")    MessageBox(response)
Catch e As ChatGPTException
  MessageBox("Error: " + e.Message)
End Try

Pricing for ChatGPT is by millions of tokens. Chat GPT 3.5 is relatively inexpensive so if it gives you the results you want, use it. As of this writing, every 1 million words/tokens you send it will only cost 50 cents in US dollars. Every 1 million words/tokens you get back in response will cost $1.50 USD. If you need higher quality responses, consider Chat GPT 4.

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

Generate Codes

The ability to generate codes and identify them from images is available as a shared method for the indicated platforms, in desktop and console apps. The latter is interesting because it means that you can use this functionality in web apps deployed on Windows or Mac servers.

Creating QR or Bar128 codes couldn’t be simpler. Since it uses a shared method, it is not even necessary to have previously created an instance of the class, you only need to invoke the method:

Barcode.Image(value As String, width As Integer, height As Integer, type As Barcode.Types = Barcode.Types.QR) As Picture

Where the expected parameters are the following:

• Value: Source text string that will be converted to the indicated code type
• Width: Width of the resulting image with the generated code
• Height: Height of the resulting image with the generated code
• Type: The type of code you want to generate. It can be QR or Bar128; these values are available in the Barcode.Types enumerator

Once the method is invoked, you will obtain an image (Picture) that you can use in your app; or you will receive an InvalidArgumentException if some of the parameters provided are invalid, such as passing an empty text string as the data source.

For example, the following line of code generates a 120 x 120 image corresponding to a QR code with the text provided:

Var p As Picture = Barcode.Image("Xojo Rocks!", 120, 120, Barcode.Types.QR)

Recognize Codes in Images

In the same way it is possible to generate code images from text, it is also possible to recognize up to twelve different types of codes from an image. To do this we will use another shared method of the Barcode class:

Barcode.FromImage(image As Picture) As String()

As you can see, in this case the method will return an array of Strings with the values of the recognized codes. It is possible that the image contains more than one code; but it is also possible that no code could be recognized in the provided image, so it is advisable to check the limits of the received array before proceeding.

For example, this line of code will recognize the codes available in the MyPicture image and return the values in the RecognizedCodes() array:

Var RecognizedCodes() As String = Barcode.FromImage(MyPicture)

Scan Codes

Scanning QR codes (or any of the other supported codes) on desktop is only available for macOS and Windows platforms. This is due to desktop presenting a user interface where you can preview the image captured by the selected camera. You can select the camera to use to scan from those connected to the computer (including, for example, iOS devices in the case of Mac, through Continuity; or Android devices paired with your Windows computer). In the case of Mac, the ability to scan images is only available using macOS 10.15 or higher.

To scan codes directly using any of the cameras connected to the computer it is necessary to have previously created an instance of the Barcode class (for example, drag the class from the IDE Library onto the tray area in the Layout Editor window):

Doing so will add it to the Project Browser where we can select it and implement any of the three available Event Handlers:

• ScanCancelled: The user has canceled the code scanning operation, such as by closing the presented UI window
• ScanCompleted: Receive the value as String corresponding to the code detected by the camera
• ScanFailed: Raised when some type of error has occurred, such as the fact that no camera is detected

To display the code scanning UI, invoke the StartScan method on the created Barcode instance. For example:

Barcode1.StartScan

The scan UI does not close automatically when a code is recognized to allow scanning a series of codes (such as in the case of inventory), so it is also possible to stop the operation by code by calling the StopScan method. For example, you can include this line of code in the ScanCompleted event of the Barcode1 instance after the received value has been processed:

me.StopScan

As expected, invoking the StopScan method from code will close the code scanning UI.

Conclusion

Now you can create all types of applications on macOS, Windows and iOS with the ability to generate and scan QR codes, Barcodes and other types of codes, opening up a wide field of possibilities for Xojo users.

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

• Facebook
• X
• LinkedIn
• GitHub
• YouTube