2025 Year of Code April: User Interface

Hello Everyone!

April’s Year of Code theme is all about the User Interface! As you all know, creating your app’s user interface with Xojo is quick and intuitive - just drag and drop built-in controls right from Xojo’s library.

See this month’s example project from @Gabriel_Ludosanu in this blog post.

Use this thread to share your projects and participate in Year of Code. And don’t forget about all the prizes! We cannot wait to see what you create and share with the community!

5 Likes

My submission is for a simple Desktop slideshow component.

GitHub Project

10 Likes

Oof, slow month for YoC submissions! Show off your User Interface projects here for Xojo fame, glory and prizes before the end of the month!

Monthly winners get $100 at the Xojo store and entry into the grand prize drawing. The grand prize is $250 cash plus a Xojo Pro license and a year of GraffitiSuite. Learn more about the prizes.

5 Likes

I don’t do a lot of user interface things, but I did create a subclass for Einhugur’s CustomButton that offers the Bootstrap styles. This one’s not on Github because it requires a plugin. https://tim.gd/april-yoc

11 Likes

Really nice looking, Tim!

3 Likes

I had a UI dilemma last Christmas when I was forced to rewrite a Xojo Web-based Talk Library (after the 2012 MacMini running my old API1 version died. I had the source code by it was faster to rebuild).

When I got it all working I wrote up the documentation and found that there were too many steps: register an account, verify account email, connect to database silo, enter database PIN, verify user has right to join database, login to database, choose the talk library, choose a talk to stream or download.

My UI solution was to create a ‘Quick Login’ screen.


Enter the Database PIN (the only thing to enter) and you are now in the app ready to stream and download talks.

But what happened to the other six steps?
I had pre-created a user account who only had access to stream/download and not update the database. Then I created an alternate Login window (actually a PagePanel) that only appears when you have sufficient URL parameters.
Screenshot 2025-04-22 at 8.29.22 am
In this case u=85 means login as user #85, s=365 means connect to database silo #365, plus a couple of other encrypted values. The user needs only enter just one PIN (to ensure not just anybody can use this URL) to login as that user.

Who might find this approach useful?
Less competent users can be sent an email to click on. Clients can be directed into your internal systems, but only view/edit the documents you want them to access. System managers who want to only have to change one password in a security breach (the database PIN) rather than every user. Even normal users and administrators can build their own personal URLs to QuickLogin making support much faster.

When the Administrator logs in (with different URL parameters) they can see more option button eg Deactivate, Duplicate, Edit and New:

3 Likes

I like seeing these projects, and there’s some nice work here, but part of the point of the YoC is to share some code for others to learn from, preferably via GitHub. Can you folks share parts of your projects?

9 Likes

@David_Cox

The UI looks nice.

When choosing one of the other tabs, please show us what the view looks like with the Filter and Fields selected.



Here is a UI experiment. We start from a data table view, showing fields like total sales, net sales and quantity sold (volume). The experiment is around the idea to let the user define other columns, like list price, unit price, %discount, .. using drag and drop. Here are a few screenshots. A screen capture is also available, only on the repo (as a zip) As usual, source code is available on GitHub in the folder ‘drag-drop-formula’ of the repo available at https://github.com/slo1958/sl-xj-ui-test.git.

Cannot load screen capture here, it is available in the repo as a zip.

5 Likes

Was unaware of this and would like to make a friendly suggestion to Xojo Inc that this be reiterated in each related blog and forum post on the subject, as I took it to be more of a showcase.

As my other project is closed-source I respectfully withdraw it from consideration and instead put forth my Integer Input Control.

Sometimes you need to just get an integer from the user. This ContainerControl allows you to do just that, the user can either type in their number on the keyboard or use the +/- buttons to iterate to it. You control the Min, Max, Initial Value, Increment Value, Hold Speed (for the +/- buttons), and whether or not you want to allow the user to type their value in it at all.

It is open-source and free to download.

3 Likes

Nice Mame frontend.

I used to like/use MAME in the past and coded myself a very popular frontend some 20 years ago with Delphi. And behold.. it is still available - https://easymame.mameworld.info/screenshots.html
Didn’t even know it is still in the top 3 of most used FE. :joy:

2 Likes

Thanks Christian, I will make sure this happens from now on.

2 Likes

Thanks!

Ah thats cool. Not sure where mine ranks but seems it seems somewhat popular. :grin:

A listbox with filter and details.
Double click on a listbox column fills in the filter details
You can display or hide listbox filter
Pressing space bar on selected user, displayes or hides user details
I never change data in a listbox column, always use details display !!!

5 Likes

Double-click in a Column Header or in a Cell ?

The former would make no sense :wink:

double click on a listbox cell

This my contribution with a circular gauge that I’ve made for one of my application :

The code was put to a public Git : https://github.com/Valdemar-VDSC/CircularGauge.git

9 Likes