Xojo 2023r2 comes with a lot of updates for Xojo Web. While Dark Mode and Bootstrap 5 are the main feature in this release, we’ve put a lot of effort into making everything better including: improved accessibility, updates to the WebListBox and WebChart, IDE performance improvements and more.
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.