Announcing XUI: Cross Platform UI Controls & Helper Modules

Hello everyone,

I’m really pleased to announce the immediate release of the XUI Desktop framework.

What is XUI?

XUI (pronounced Zoo-ee) is a collection of gorgeous cross-platform user interface (UI) controls and helper/utility modules for Xojo. Frustrated by the current choice of offerings of UI controls by other third parties and the specific lack of certain controls I set out to create something better.

It is 100% API 2.0 code and 100% Xojo code with no dependence on declares.

What’s included?

XUI is sold as unencrypted source code.

XUI is continually evolving. I have a roadmap with more controls to come. Here are a few of the controls included with the current release:

Code Editor

The XUICodeEditor is a highly customisable syntax editor that supports autocompletion. It’s polished and beautiful. It’s designed to handle code samples of around 500 - 1000 lines of code with high performance. It comes with support for Xojo, Markdown and Wren out of the box but writing your own formatters is easy to do. I have released open source code editors in the past but this is the fastest, most extensible one yet.

Source List

15 years ago I released my first ever commercial control (FGSourceList) that was the goto source list control for developers for years. XUISourceList is it’s modern replacement and it is better in every conceivable way. It looks fantastic on macOS and Windows and is high performance.

Tab Bar

Finally, a good looking tab bar control for Xojo! It supports custom renderers so you can make it look like whatever you like. It comes with a macOS Safari and Windows Edge renderer out of the box but defining your own is simple.

Tag Canvas

I’m particularly proud of this control. The tag canvas parses text into tags that are clickable and customisable. It also supports autocompletion. Play with the demo to get a feel for it.

Color Swatches & Color Picker

Yes I know Xojo provides access to the native OS color picker but I dislike the asynchronous nature of their implementation so I created my own. Supports real time colour selection, colour component selection and a beautiful hand selected palette of colours.

Utilities & Helper Modules

Over the years I have released a lot of open source code. A lot of this is used internally by XUI and needs regular maintenance. In order to sustain development, a lot of my helper open source code has been pulled from GitHub and folded into XUI. A few of the modules are listed below:

MarkdownKit

A 100% CommonMark-compliant Xojo parser that can convert Markdown to HTML in a single line of code. Provides access to the abstract syntax tree so you can render it how you please.

String Extensions

Many helpful methods for working with Strings.

XUIMaths

A foundation library for mathematical functions used throughout XUI.

Documentation

The framework is comprehensively documented

XUI Docs

In fact, the documentation site was built from the IDE descriptions of the framework’s properties and header comments at the top of every method.

How Do I Get It?

XUI Website
Demo App
License Purchase Page

XUI is commercial software and is sold as the full unencrypted source code. You get 12 months of updates and support. After that 12 months you can renew if you like (optional and not enabled by default) to continue to get updates and support.

There are two licenses: Personal (£150) and Pro (£300). The only difference is that Pro provides a license for all employees of an organisation whereas the Personal license is just for a single developer.

Payment is handled securely through Stripe.

17 Likes

That’s a nice set of controls!

1 Like

waou ! congrats, can’t wait to use it ! :open_mouth:

1 Like

tag canvas is exactly what i was looking for, great work !
it’s funny tho, the monterey rendering shows a triangle, but it makes more sense to display an X to remove as windows style. maybe we could use windows style on mac as it works in the demo, kind of a blasphemy lol, but well

1 Like

Apple’s Human Interface Guidelines depict the downward triangle which is why I settled on it but I agree an X looks nicer.

That’s the beauty of XUI however, you can swap renderers and styles as you please to customise.

1 Like

yes, but this got me thinking again because i need to care of that subject soon.
i tried scrolling a bit of wwdc venturi presentation to see new stuff, didn’t see tagging. but true when you see this triangle you expect dropdown menu
Screenshot 2022-06-10 at 17.05.21
plus it got me thinking about apple uses it i opened finalcutpro

and yes maybe we don’t need no X or triangle, because it’s not nice.
simple keyword is enough, and i told myself long ago, it’s way nicer, even for only 1-2.

Plus XUI can delete tags with backspce, that’s all we need :slight_smile:
the left arrown doesn’t move one tag away, but could be implemented i guess
so can we hide the the close icon ? or replace it with nothing ?
anway we will use XUI, great work again :slight_smile: :tada: :tada: :tada: :tada: :tada:

1 Like

one question, i supose the dropdown selection could be loaded from sql queries ?
plus the drop down has rounded angles, would be awesome if tags have rounded angles to ?

You can toggle the presence of the tag’s widget / dingus (in the macOS example that’s the downward triangle, in the Windows style it’s the X) with the XUITagCanvas.TagsHaveWidget Boolean property: TagsHaveWidget docs.

For sure. You’ll see from the source code for the demo app that the autocomplete engine is very customisable. The tag canvas asks for data - how you provide it is up to you:
AutoCompleteDataForPrefix event docs.

Thank you :slight_smile:

1 Like

The rounded angles on the drop down can be changed (to make them sharp or more curved) by changing the tag canvas’ renderer’s AutoCompletePopupBorderRadius property.

The appearance of the tag itself can be changed either by creating your own tag renderer or altering the code in the provided macOS renderer (specifically a single line of code within the renderer’s RenderTag method).

1 Like

Good luck, Garry :slight_smile:

1 Like

Awesome work, Gary. Can you give some insight on the roadmap? E.g. have you planned additional language parsers for the Edtitor or additional controls?

Hi Harald,

I’m currently working on a grid control as I got fed up waiting for Xojo to release one. I’m also working on a sprite canvas for games.

I can add other languages if you request one. They are reasonably straight forwards to implement.

Thanks for the insight. A grid control would be very very cool - your roadmap looks really promising!

Could the editor be enhanced to handle Python?
The special thing about Python is that e.g. if-then and loop bodies are defined by the number of tabs before each line. There is no endif or next statement. Can it handle this special indentation?

Is it Scintilla based?

do you plan to create linux or web support? Is there a link to the roadmap?

@Harald_Schneider. In theory it could be enhanced. That would be a non-trivial addition however since I have yet to implement proper tab stops. The reason it’s a difficult change is to do with how the editor currently computes the width of selected text and lines. The introduction of variable width tabs would necessitate additional logic (and performance overhead). I’m not against doing it’s just lower on my priority list at present. The editor is not Scintilla based - it is 100% Xojo code (based on a Canvas).

@nicolás_canessa. XUI currently runs fine on Linux (tested on Ubuntu) although I develop on a Mac and Linux is not my priority. I only use native Xojo code so it should run fine. I have no interest in Xojo Web at the moment.I don’t have a published roadmap at the moment. I’m currently working on an embeddable scripting engine that will use the XUI Code Editor for code entry so there will no doubt be improvements to this control in the near future.

2 Likes

Version 1.0.4 is out.

There have been several improvements since the initial 1.0.0 release. The release notes list the changes.

For more information about this UI library, read about it here.

3 Likes