Start with a starter, obviously

resources

webapp

MainView

MainView

package org.vaadin.alejandro; // use yours, of course





public class MainView {





public MainView() {

}





}

Add UI components to the web page

MainView

MainView

VerticalLayout

package org.vaadin.alejandro;





import com.vaadin.flow.component.orderedlayout.VerticalLayout;





public class MainView extends VerticalLayout {





public MainView() {

}





}

MainView

VerticalLayout

VerticalLayout

VerticalLayout

VerticalLayout.add(Component...)

VerticalLayout

Text

public MainView() {

Text text = new Text("Hello, World!");

}

add(Component...)

text

VerticalLayout

public MainView() {

Text text = new Text("Hello, World!");

add(text);

}

Expose the view as a web page

MainView

@Route

@Route

public class MainView extends VerticalLayout {

...

}

@Route

@Route("hello")

http://localhost:8080/hello

MainView

http://localhost:8080/

CustomersView

http://localhost:8080/customers

String

@Route

Deploy and run the web application

pom.xml

mvn jetty:run

http://localhost:8080

Add behavior to the web application

TextField

Button

TextField textField = new TextField("What's your name?");

Button button = new Button("Ok");

Button

button.addClickListener(e -> ... your custom code here ...);

Notification

button.addClickListener(e -> Notification.show("Hello"));

TextField.getValue()

button.addClickListener(e -> Notification.show("Hello " + textField.getValue()));

VerticalLayout

add

add(textField, button);

http://localhost:8080

What next?