DEV Community

Cover image for Building a new GUI Framework for java
himansa
himansa

Posted on

Building a new GUI Framework for java

#devlog #java #gui

Excited to talk about my new experiment,
A GUI framework for Java.

For a while, I felt the need for a good GUI framework for Java. We currently have some solid GUI frameworks, but they seem limiting. And most are also hard to work with for dynamic UIs and styling.

So, I tried to make one. And it kind of succeeded. My model was creating an Instruction Engine that controls Web UI. The web UI can be a WebView, web browser, or something that supports DOM and JS, without the network tax of server-side rendering and also keeping the flexibility of the web.

I'm still refining the architecture, but current prototypes already satisfy me. Briefly explaining, the developer workflow is much like either loading an HTML file or coding Swing/FX-like GUI code, then binding events using consumers, creating animations using a type-safe DSL of CSS, while raw CSS support is also available. This is an example code of a ClickMe app for reference:

Panel bg = new Panel("pnlBg");
bg.setStyle(Layouts.FlexColumn().gap(5));

InputText fName 
            = new InputText("fName","Name...");
Button clickMe 
            = new Button("btn","Click Me");

clickMe.onClick((d)-> 
{
    String inp = d.getString().GetOrElse("");
    clickMe.setText("Hello "+inp);
},
fName.q("name").value(Validators.NotEmpty()));

bg.addChild(fName,clickMe);
window.setView(bg);
Enter fullscreen mode Exit fullscreen mode

Or:

window.setSource("./index.html");

Button.of("btn").onClick((d)-> 
{
    String inp = d.getString().GetOrElse("");
    Button.of("btn").setText("Hello "+inp);
},
InputText.of("fName").q("name").value(Validators.NotEmpty()));
Enter fullscreen mode Exit fullscreen mode

While index.html is a normal HTML file.

This is some of the prototype. Also, the button component mostly has 20 lines of code including all Java boilerplate; custom components can also be defined.
Also, there is no hardcoded web renderer for this; anything is an implementation of an 8-method interface communication bridge away. Currently, there are implementations for JavaFX WebView and multi-user stateful server through URL.

I hope that I can bring this to the finish line. Currently, I am refining the architecture to be swappable and scalable. I will add screenshots of some example apps I made using this.

I'd also love to hear feedback, ideas, suggestions, critiques, or anything from everyone 🙂.

Attachments:

  • Simple Login WebView-based Password Vault (yeah i still fixing Unicode rendering)

  • Dashboard of Password Vault

  • Simple todo app with styling

  • Simple file listing app on web with navigation

  • GUI designer for framework using framework

  • Markdown IDE with Live preview, Ace editor

  • Directly changing a live website

All apps here support both dark/white themes without much setup. Also, every application's rendering target (browser/WebView) can be changed without changing inner logic.

Top comments (0)