Vaadin介紹與開發練習之二（創建第一個Vaadin類）

本篇承接上一篇：
Vaadin介紹與開發練習之一

在上一篇中通過Vaadin在線工具產生了一個普通的Servlet項目：my-vaadin，之後將該項目導入Eclipse， 使用Maven安裝之後（maven install）, 通過Maven的jetty:run命令進行運行。
本篇對上一篇項目進行詳細介紹的基礎上，演示簡單的開發實例。

默認項目目錄結構

導入的項目的目錄結構如下圖：

對以上項目的目錄機構說明如下：

• src/test/java : 放置單元測試代碼
• src/main/java: Java源碼
• src/main/resources : 配置文件
• build: 編譯後的目錄
• frontend: 前端代碼
• node_modules : 前端依賴庫
• targe: Maven構建產生的目錄
• package.json, npm模塊描述文件（前端）
• webpack.config.js， 前端打包的webpack配置文件。

以上目錄和文件中， 對於開發人員來說，最重要和需要關注的文件就是MainView.java的源碼文件。該文件的內容和說明如下：

@Route("")  //vaadin提供的前端路由的註解，通過http://localhost:8080/即交由該類處理
@PWA(name = "Project Base for Vaadin", shortName = "Project Base") //PWA： Progressive Web Applications，漸進式Web應用程序註解
@CssImport("./styles/shared-styles.css") //導入樣式文件註解
@CssImport(value = "./styles/vaadin-text-field-styles.css", themeFor = "vaadin-text-field")
public class MainView extends VerticalLayout { //定義視圖類，繼承垂直佈局類（VerticalLayout）

    public MainView() { //構造函數
        // 初始化輸入框
        TextField textField = new TextField("Your name");
        // 初始化GreetService
        GreetService greetService = new GreetService();
        //初始化按鈕， 按鈕點擊的時候彈出一個通知框
        Button button = new Button("Say hello",
                e -> Notification.show(greetService.greet(textField.getValue())));

        // 設置按鈕突出顯示的樣式
        button.addThemeVariants(ButtonVariant.LUMO_PRIMARY);

        // 設置回車鍵效果和鼠標點擊效果相同
        button.addClickShortcut(Key.ENTER);

        // 給當前的視圖添加樣式，樣式的定義在frontend\styles的shared-styles.css文件中
        addClassName("centered-content");
        //將輸入框和按鈕添加到當前的視圖中
        add(textField, button);
    }
}

以上代碼的邏輯式添加一個輸入框和一個按鈕到視圖中，點擊按鈕時，根據輸入框中輸入的內容彈出一個通知框，執行效果如下，

開發實例

以上代碼是自動產生的，接下來從無到有創建一個視圖類演示Vaadin的開發。這裏創建一個到超市購買物品的清單頁面，可以添加需要購買的物品到清單中。該頁面通過http://localhost:8080/shop訪問，效果如下：

開發的步驟有：

1. 創建視圖類ShopListView
   該類與MainView位於相同的包下，內容如下：

@Route("shop")  //路由設置， 通過http://localhost:8080/shop 訪問
public class ShopListView extends VerticalLayout {  //視圖類定義

	public ShopListView() { //構造函數
		VerticalLayout shopList = new VerticalLayout(); //1. 垂直佈局視圖，用於顯示代購清單
		TextField itemField = new TextField(); // 2. 待購物品輸入框
		Button addButton = new Button("添加");//3. 添加按鈕
		addButton.addClickShortcut(Key.ENTER); //3.1 設置回車按鈕和點擊按鈕的功能相同
		addButton.addClickListener(click -> {  //3.2 添加按鈕的事件，將需要購買的物品以複選框的方式顯示在待購清單。
			Checkbox checkbox = new Checkbox(itemField.getValue());
			shopList.add(checkbox);
		});
		add(new H1("購物清單"), shopList, new HorizontalLayout(itemField, addButton)); //4. 添加代購清單和增加物品輸入框和按鈕到視圖中
	}
}

添加以上類之後， 可以實時通過瀏覽器訪問，不需要重啓Jetty。頁面的效果如下：

2. 設置樣式

樣式可以使用Vaadin默認提供的樣式，也可以導入外部的CSS樣式文件

2.1 使用默認樣式
以上按鈕看起來不明顯， Vaadin本身提供了很多可選的默認樣式，通過按鈕的addThemeVariants()方法可以進行設置。這裏設置爲：

	addButton.addThemeVariants(ButtonVariant.LUMO_PRIMARY);//設置按鈕樣式

修改後的按鈕的效果如下。

2.2 導入外部樣式文件
外部樣式文件可以覆蓋Vaadin的樣式類定義，也可以自定義新的樣式。這裏以覆蓋爲例進行介紹。
以上面爲例，現在將清單中的字體加粗。在frontend目錄的styles目錄下新增樣式文件shop-style.css， 內容如下：

vaadin-checkbox {
	font-weight: bold;
}

導入樣式文件使用CssImport註解，該註解需要位於Route註解之下，這裏導入示例如下：
@CssImport(“styles/shop-style.css”)。修改完成，效果如下圖：