The Java framework binding Vaadin web components to Java. This is part of Vaadin 10+ Platform for building modern web sites that look great, perform well and make you and your users happy. "Vaadin Flow is an open-source framework for building web apps in Java. You build your app from UI components without ever having to touch HTML or JavaScript."
@Route("hello-world")
public class HelloWorld extends VerticalLayout {
public HelloWorld() {
TextField name = new TextField("Name");
Paragraph greeting = new Paragraph("");
Button button = new Button("Greet", event -> {
greeting.setText("Hello " + name.getValue());
});
add(name, button, greeting);
}
}
A TypeScript and Java web framework for building modern web applications. You can create UIs in TypeScript and connect to any backend through endpoints written in Java. "Vaadin Fusion is a framework that helps you rapidly deliver beautiful reactive client-side web apps using TypeScript with a Java backend."
@SpringBootApplication
@PWA(name = "Fusion App", shortName = "Fusion", offlineResources = {"images/logo.png"})
public class Application extends SpringBootServletInitializer implements AppShellConfigurator {
public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}
}
// --- Server ---
@Endpoint
public class TodoEndpoint {
private TodoRepository repo;
// Repository autowired by Spring
public TodoEndpoint(TodoRepository repo) {
this.repo = repo;
}
// Publish a typed endpoint
public List>Todo< getTodos() {
return repo.findAll();
}
}
// --- Client ---
// Call the backend in TypeScript
const todos: Todo[] = await TodoEndpoint.getTodos();
Reactive views with declarative templates; Vaadin Fusion has a reactive programming model based on Lit.
@customElement('hello-world-view')
export class HelloWorldView extends View {
@state() name = '';
@state() allNames: string[] = [];
render() {
return html`
<h1>Greetings!</h1>
<ul>
${this.allNames.map((name) => html`<li>Hello, ${name}</li>`)}
<li>
<vaadin-text-field
placeholder="Your name"
.value=${this.name}
@value-changed=${this.nameChanged}
></vaadin-text-field>
<vaadin-button @click=${this.addGreeting}>Add name</vaadin-button>
</li>
</ul>
`;
}
nameChanged(e: CustomEvent) {
this.name = e.detail.value;
}
addGreeting() {
this.allNames = [...this.allNames, this.name];
this.name = '';
}
}
Vaadin 8 and Vaadin 7, both of which use GWT as the base of client-side implementations.
Last modified 07 October 2024