Simplest Possible WebComponent with JAX-RS Backend

A Java class:


public class Hello {

    public String greeting;

    public Hello(String greeting) {
        this.greeting = greeting;
    }
}    
exposed via a JAX-RS:

import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;

@Path("/hello")
public class HelloResource {

    @GET
    @Produces(MediaType.APPLICATION_JSON)
    public Hello hello() {
        return new Hello("hello, component");
    }
}    
can be easily accessed from a vanilla WebComponent:

class HelloComponent extends HTMLElement { 

    async connectedCallback() { 
        const response = await fetch("/hello");
        const { greeting } = await response.json();
        this.innerHTML = `
            <h2>${greeting}</h2>
        `;
    }

}
customElements.define("hello-component",HelloComponent);     
...declared in a HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<body>
    <hello-component></hello-component>
    <script src="app.js" type="module"></script>
</body>
</html>    

No dependencies, no migrations.

See you at Web, MicroProfile and Java EE Workshops at Munich Airport, Terminal 2 or Virtual Dedicated Workshops / consulting. Is Munich's airport too far? Learn from home: airhacks.io (e.g.: webcomponents.training).

Comments:

Post a Comment:
  • HTML Syntax: NOT allowed
...the last 150 posts
...the last 10 comments
License