HTML Template Support

Use traditional HTML templates when they make sense. Mix and match approaches as needed.

HtmlTemplatePage

Extend HtmlTemplatePage to use an HTML file as your page structure.

DOM Manipulation

Access any element by ID and modify it using standard Oorian methods.

Mix Approaches

Some pages use templates, others use pure Java. Choose per page.

Designer-Friendly

Designers can work on HTML/CSS. Developers add dynamic behavior in Java.

Full Oorian Features

Template pages still get events, SSE, WebSocket—all Oorian features work.

Easy Migration

Migrate existing HTML pages to Oorian incrementally.

How It Works

HtmlTemplatePage lets you start with an HTML file and manipulate it using standard Oorian features. There are no special placeholder syntaxes to learn—just use getElementById() and work with elements the same way you would in pure Java pages.

1

Create Template

Write a standard HTML file with elements that have ID attributes for areas you want to modify dynamically.

2

Extend HtmlTemplatePage

Create a Java class that extends HtmlTemplatePage and specify your HTML template file.

3

Access Elements

Use getElementById() to retrieve any element from the parsed DOM by its ID attribute.

4

Modify Content

Change text, set values, add child elements, register event listeners—all using standard Oorian methods.

Key Points

Standard HTML

Your template is just regular HTML. No special syntax or preprocessor required.

getElementById()

Access any element in the template by its ID, just like browser DOM APIs.

Full Oorian API

Once you have an element, use all standard Oorian methods: setText(), addElement(), registerListener(), etc.

All Features Work

Events, SSE, WebSocket, worker threads—everything works exactly as it does in pure Java pages.

Using HtmlTemplatePage

Extend HtmlTemplatePage instead of HtmlPage and pass the path to your HTML file. Oorian parses the template's <head> and <body> into real Oorian elements, then calls createHead() and createBody() so you can modify them.

The Template File

Start with a standard HTML file. Add id attributes to any elements you want to access from Java:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Dashboard</title>
    <link rel="stylesheet" href="/css/dashboard.css">
</head>
<body>
    <div class="layout">
        <header>
            <h1 id="page-title">Placeholder</h1>
        </header>
        <main id="content">
            <!-- Oorian components will be added here -->
        </main>
        <footer>Copyright 2026</footer>
    </div>
</body>
</html>

The Java Class

Create a class that extends HtmlTemplatePage. Use getElementById() to find elements from the template and modify them with standard Oorian methods:

Java
@Page("/dashboard")
public class DashboardPage extends HtmlTemplatePage
{
    public DashboardPage()
    {
        super("/templates/dashboard.html");
    }

    @Override
    protected void createBody(Body body)
    {
        // Find elements from the template and modify them
        Element title = getElementById("page-title");
        title.setText("User Dashboard");

        // Add Oorian components into template placeholders
        Element content = getElementById("content");
        content.addElement(createStatsPanel());
        content.addElement(createRecentActivity());
    }
}

Finding and Modifying Elements

Use getElementById() to access specific elements by their id attribute, or getElementsByTagName() to find elements by tag name. Every element in the parsed tree is a real Oorian element—you can register event listeners, apply styles, add child components, and use sendUpdate() to push changes.

Java
@Override
protected void createBody(Body body)
{
    // Find a single element by ID
    Element sidebar = getElementById("sidebar");
    sidebar.addElement(createNavMenu());

    // Find all elements by tag name
    Elements buttons = body.getElementsByTagName("button", true);

    for (Element button : buttons)
    {
        button.registerListener(this, MouseClickedEvent.class);
    }
}

Modifying the Head

Override createHead() to add resources or meta tags to the template's existing head content. The head already contains everything from the template—your modifications are additive.

Java
@Override
protected void createHead(Head head)
{
    // The head already contains everything from the template.
    // Add additional resources as needed.
    head.addCssLink("/css/extra-styles.css");
    head.addElement(new JavaScript("/js/analytics.js"));
}

When to Use Templates

Use Templates When

  • Designers need to work on HTML directly
  • You have existing HTML pages to migrate
  • The page is mostly static with some dynamic areas
  • SEO requires specific HTML structure
  • Complex layouts that are easier in HTML

Use Pure Java When

  • The page is highly dynamic
  • You want full type safety
  • Components are reused across pages
  • The team prefers a single language
  • Complex logic determines the structure