Custom UI Framework made with XOJO - Demo video

In this video, I construct a form with various validations in minutes, using our UI framework built with XOJO. The framework uses ZERO 3rd party libraries, zero external files and dependancies. I hated every step of the framework development but once done… this is what is allowing us to develop cross platform apps on XOJO that look modern on Mac AND Windows.

Custom form with various validations and visualizations, made in minutes.

Video here
Complex form built in minutes with custom UI Framework

5 controls are demonstrated in the video

  • Input control
  • Dropdown control
  • Rich text control
  • Button control
  • Window control

As you can see, a lot of common settings are applied within the IDE, such as:

  • Linking the values automatically to a preference file / database storage
  • Applying localizations for labels
  • Using vector graphics to display beautiful icons within controls (NO f… canvas)
  • Customizable layout
  • Linking (notice how the parent (container / window) validates input and sets the disabled / enabled state for the button that is used to save the form data).

Anyways… sharing is caring… enjoy.

10 Likes

Useful thanks. I think we all spend a lot of time building our own UI elements rather than the standard controls.

1 Like

Looks great. Congratulations.

Can you share a screenshot from Windows? Thanks

1 Like

Good idea… here are some Windows screenshots.

Also, I might share this to some extend when Xojo finally announces Libraries. I don’t have the authority to share this on a code level at the moment. But at some point in time, to a significant extent… I will.

Main menu (showcasing card control / Toolbar control / Input control / Dropdown control)

Medial quiz - showcasing toolbar with a fixed main menu icon to the left, sidebar control, dropdown control, button control, rich text control, toolbar control

Registration / login window (showcasing input control)

Form editor - Showcasing toolbar control, button grid control, footer control and scrollable form control

All controls can be themed in a very flexible way, during runtime (and changes reflected in runtime). This is the same app running a theme called “dark”

Input Control initialize event. No canvas used, no 3rd party controls, pure SVG graphics for icons, declares for Win / Mac to extend functionality greatly.

3 Likes

Useful thanks. I think we all spend a lot of time building our own UI elements rather than the standard controls.

Sadly, very true!.

This is great achievement. You dont need to wait till Xojo libraries are available, you may do so as encrypted controls at the moment. Do let us know once its ready to purchase. Thanks for sharing the screen shot. Very impressed. Actually Xojo Inc. has to acquire these controls from you and should include this with Xojo. Hope Geoff will see this post.

1 Like

Sadly the encrypted controls in Xojo can be decrypted… with a breeeeze :slight_smile:

Furthermore. I am all for sharing code in the Xojo community, it’s a small community and sharing as much code as possible will benefit everyone and increase the chances of Xojo being around for a long time to come.

5 Likes

that is something that XOJO should have done long time ago, do you consider selling that package, is tere a way we could take advantage of all those great features ? that will help a lot as honestly now people start to have the apps that come from xojo and consider them as old times.

Could you share more details about the database as well, that sounds interesting .

Thanks again for that and good job.

1 Like

Yes, i can consider adding users for the package. Our app has been in development for 4 years, and 2 years went more or less into the framework, ensuring that the application doesn’t look “aged” and exactly the same on mac and windows.

I will make a video soon with the DB integration. The right DB approach is to build a modern backend API instead of using queries and select statements in your xojo code. By moving the workload to the backend, has allowed us to use Xojo for desktop and Flutter for mobile… with great ease.

You can PM me.

What I like about Your solution and work is that You really made a complete frame around the whole tasks, including server binding.
It seems also that not seeing the controls and what they are (text, combo, etc.) in the window editor is not a huge problem.

What were the problems with canvas? Complexity, anything else?

Did You consider using a WebView embedding and use a web UI framework or HTML/CSS? Why Xojo native?

Just curious, thanks a lot!

Scaling?

A huge data trip from the system to an “slow and limited IU” needing a huge and complex design machinecontroller(Xojo+JS) ⇆ WebView UI+JS bindings, needing a huge rework at every new project seems a good reason.

If someone could think in opting for this path they probably would think about options removing Xojo from the equation and doing a Native JS+UI directly

4 Likes

This bothers me a lot. Not having a “Design time framework” for Devs building visual, real time, interactive components for Xojo, like changing the property “background color” of your component, or selecting the “rounded borders” checkbox, and seeing it “Live” on the design.

Do you know if this is a limitation for Desktop projects or something that can be added by OP?

As I work with Web everyday I know WebSDK controls can be designed to render in the IDE just as they are going to look on the Browser. That way you can see what you are going to get.

The perspective is always: sale a product, team size, inhouse production.
Anyway, I totally agree!

In HTML/JS layout, controls are textual written.
But Xojo is about designers - MBS has a canvas like control to emulate this.
At least, containers are the only solution for Xojo at the moment to WYSIWYG.
The compromise of the UI in this thread seems to work.

I’ve received an overwhelming interest in PM’s from various XOJO developers. I am just days away from compiling a demo version to share, where everyone can play with the framework. I’ve decided to offer a limited amount of developers to access it and use it in exchange for feedback for the next 6-12 months, allowing us to strengthen then development of a solid UI framework. We got a lot done, overcame the most important obstacles and our work has allowed us to provide an application that looks modern and exactly the same on Win and Mac. Just a few days and I’ll post a link to a downloadable demo version.

Screenshots

Input control

Dropdown control
image

Sidebar control
image

Rich text control

Checkbox control
image

Cards control

Toolbar control

Framework theme editor

1 Like

What is said is totally out of the technical topic being discussed.

I’m not aware of any Design Time Framework for Xojo, some defined interface and methods used only to talk with the IDE interface and drawing or acting on a component being edited and not present on the compiled built version.

the DrawControlInLayoutEditor exists only for web projects, and for visual websdk subclasses…
it would be really nice to have it also in the other projects types…
it only allows you to display your control as you want, using limited part of xojo language almost like xojoscript
there is no more interaction between your control and the IDE, as the base inspector behavior (which is quite limited and hasn’t evolved for years even decade…)