今天要來看一個商業框架，叫做vaadin，已經推出好多代了! 目前最新的一代是 14 LTS，他們好像號稱是可以只用Java就能快速搞定前後端的開發，而且可以跟spring、angular等知名框架集成使用，他們也提供好多現成的前端web component來使用，雖然是商業框架但是大部分的元件都是開源的，需要收錢的項目官方有特別標示，很容易分別，我們先從官網的quick start todo list項目開始吧!

官方最近還有發布最新的教學書，記得要下載喔!: https://vaadin.com/book

今日要看的教學文章1 :https://vaadin.com/tutorials/vaadin-quick-start

package com.vaadin.example;

import com.vaadin.flow.component.Key;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.checkbox.Checkbox;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.router.Route;

@Route
public class MainView extends VerticalLayout {

  public MainView() {
    VerticalLayout todosList = new VerticalLayout(); // (1)
    TextField taskField = new TextField(); // (2)
    Button addButton = new Button("Add"); // (3)
    addButton.addClickShortcut(Key.ENTER);
    addButton.addClickListener(click -> {
      // (4)
      Checkbox checkbox = new Checkbox(taskField.getValue());
      todosList.add(checkbox);
    });
    add( // (5)
      new H1("Vaadin Todo"),
      todosList,
      new HorizontalLayout(
        taskField,
        addButton
      )
    );
  }
}

1. todosList is a vertical layout that displays the task and checkboxes

2. taskField is the text input field for new tasks

3. addButton triggers logic to add new items to our list of todo items

4. In the listener for the button click, create a checkbox with the value from the taskField as its label.

5. Call add on the VerticalLayout to define how the components should be displayed. Notice that taskField and addButton are in a HorizontalLayout, which puts them next to each other.

今日要看的文章之2:(有5篇)
https://vaadin.com/tutorials/getting-started-with-flow