DEV Community

Cover image for WebForms.java 2.1 Is Here — Control the DOM from Java!
Elanat Framework
Elanat Framework

Posted on

WebForms.java 2.1 Is Here — Control the DOM from Java!

#java #springboot #react #webformscore

Wait! I'm controlling the DOM from JAVA without React or Vue?! 🤯

WebForms Core 2.1 brings the latest version of WebForms.java to Java developers.

With WebForms Core (WFC), Java is no longer limited to generating HTML on the server and sending complete pages back to the browser. You can define browser events, receive requests, and send instructions that directly manipulate the existing DOM.

No React.

No Vue.

No application-level JavaScript required for DOM updates.

The browser runs WebFormsJS, while your Java application uses WebForms.java to generate instructions for the client.

This creates a simple but powerful model:

Browser Event
      ↓
Java / Spring Boot
      ↓
WebForms.java
      ↓
WebFormsJS
      ↓
DOM Update
Enter fullscreen mode Exit fullscreen mode

The result is an interactive web application where much of the UI behavior can be controlled directly from Java.

WebForms Core is a product of Elanat, and its WebForms class is written in C#, and WebForms.Java is built on top of this class. Elanat plans to release the WebForms Core technology for all popular programming languages ​​on the web.

form.exportToHtmlComment() vs form.response()

WebForms Core provides two important ways to export WebForms instructions.

form.exportToHtmlComment()

Use this when rendering the initial HTML page.

For example:

model.addAttribute(
    "WebForms",
    form.exportToHtmlComment()
);
Enter fullscreen mode Exit fullscreen mode

And in a Thymeleaf page:

<p th:utext="${WebForms}"></p>
Enter fullscreen mode Exit fullscreen mode

The WebForms instructions are embedded into the generated HTML as HTML comments. When WebFormsJS processes the page, it reads those instructions and configures the required browser-side behavior.

For example, Java can register a click event:

form.setPutEvent(
    "btn_Refresh",
    HtmlEvent.ON_CLICK,
    "/dashboard/refresh"
);
Enter fullscreen mode Exit fullscreen mode

form.response()

Use this when responding to a WebForms request.

return ResponseEntity.ok(form.response());
Enter fullscreen mode Exit fullscreen mode

This sends WebForms instructions back to the browser so WebFormsJS can immediately update the existing DOM.

For example:

form.increase("OnlineUsers", random.nextInt(80));
form.increase("Orders", random.nextInt(60));
form.increase("Revenue|<span>", random.nextInt(9000));
form.setText("LastUpdate", "Just now");
Enter fullscreen mode Exit fullscreen mode

Instead of rendering the entire page again, WebForms Core can update only what needs to change.

WebForms Core Technology

This is one of the ideas that makes WebForms Core particularly interesting: the server can send DOM operations instead of requiring you to manually write frontend DOM manipulation code.

A Java Dashboard Example

Imagine a simple dashboard.

WebForms Core in Java

The page contains statistics for online users, orders, revenue, and the last update time.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>WebForms Core Dashboard</title>
    <script type="module" src="/script/web-forms.js"></script>
    <style>
        ...
    </style>
</head>
<body>
<div class="sidebar">
    <h2>WebForms Core</h2>

    <div>Dashboard</div>
    <div>Orders</div>
    <div>Customers</div>
    <div>Products</div>
    <div>Settings</div>
</div>


<div class="content">
    <div class="header">
        <h1>Dashboard</h1>
        <button id="btn_Refresh">🔄 Refresh</button>
    </div>

    <div class="cards">
        <div class="card">
            <div class="card-title">Online Users</div>

            <div id="OnlineUsers" class="card-value">152</div>
        </div>

        <div class="card">
            <div class="card-title">Orders</div>
            <divid="Orders"class="card-value">78</div>
        </div>

        <div class="card">
            <div class="card-title">Revenue</div>
            <div id="Revenue" class="card-value">
                $<span>18450</span>
            </div>
        </div>
    </div>

    <div class="panel">
        <h2>Recent Orders</h2>
        <table>
            ...
        </table>
    </div>

    <div class="panel">
        Last update:
        <strong id="LastUpdate">Initial load</strong>
    </div>
</div>
<p th:utext="${WebForms}"></p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Now look at the Java code:

package com.example.demo;

import java.util.Random;

import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PutMapping;

import webformscore.WebForms;
import webformscore.HtmlEvent;

@Controller
public class DashboardController {

    private final Random random = new Random();

    @GetMapping("/dashboard")
    public String pageLoad(Model model) {

        WebForms form = new WebForms();

        form.setPutEvent("btn_Refresh", HtmlEvent.ON_CLICK, "/dashboard/refresh");

        model.addAttribute("WebForms", form.exportToHtmlComment());

        return "dashboard";
    }

    @PutMapping("/dashboard/refresh")
    public ResponseEntity<String> refresh() {

        WebForms form = new WebForms();

        form.increase("OnlineUsers", random.nextInt(80));
        form.increase("Orders", random.nextInt(60));
        form.increase("Revenue|<span>", random.nextInt(9000));
        form.setText("LastUpdate", "Just now");

        return ResponseEntity.ok(form.response());
    }
}
Enter fullscreen mode Exit fullscreen mode

That's it.

The Refresh button is configured from Java:

form.setPutEvent(
    "btn_Refresh",
    HtmlEvent.ON_CLICK,
    "/dashboard/refresh"
);
Enter fullscreen mode Exit fullscreen mode

When the user clicks the button, WebForms Core sends a PUT request to Spring Boot.

Screenshot
WebForms Core in Java

Then Java controls the DOM:

form.increase("OnlineUsers", random.nextInt(80));
form.increase("Orders", random.nextInt(60));
form.increase("Revenue|<span>", random.nextInt(9000));
form.setText("LastUpdate", "Just now");
Enter fullscreen mode Exit fullscreen mode

No React components.

No Vue state management.

No manually written JavaScript for updating these elements.

Java in Maven Central

WebForms Core for Java is available on Maven Central:

Java in Maven Central — net.elanat:WFC

Project settings for Maven 

<dependency>
    <groupId>net.elanat</groupId>
    <artifactId>WFC</artifactId>
    <version>#.#.#</version>
</dependency>
Enter fullscreen mode Exit fullscreen mode

Project settings for Gradle 

dependencies {
    implementation "net.elanat:WFC:#.#.#"
}
Enter fullscreen mode Exit fullscreen mode

A Different Way to Build Interactive Java Web Applications

WebForms Core does not try to force Java developers into another frontend framework ecosystem.

Instead, it offers a different approach:

Let Java handle application logic and let WebForms Core communicate the required UI changes to the browser.

WebForms.java 2.1 makes this approach available to Java developers with a clean API that works naturally alongside technologies such as Spring Boot and Thymeleaf.

And honestly, seeing Java code like this:

form.setText("LastUpdate", "Just now");
Enter fullscreen mode Exit fullscreen mode

directly update the browser DOM is still one of those moments that makes you stop and think:

Wait... I'm controlling the DOM from Java?! 🚀

Top comments (0)