Vaadin 講習会 その1

Vaadin を使いこなせるようになるため講習会を開く。
まずはプロジェクト作成、HelloVaadinあたりから。

Mavenプロジェクト作成

Mavenプロジェクト作成の仕方は
こちらを参照

Labelコンポーネントを使った例

LabelPractice

package com.example;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.annotations.Widgetset;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.label.ContentMode;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

/**
 *
 */
@Theme("mytheme")
@Widgetset("com.example.MyAppWidgetset")
public class LabelPractice extends UI {
    @Override
    protected void init(VaadinRequest vaadinRequest) {
        //縦にコンポーネントを配置するlayuout生成・セット
        final VerticalLayout layout = new VerticalLayout();
        setContent(layout);

        //デフォルトの配置だと左上に寄せられるので、少し見やすくなるようにマージンをとる
        layout.setMargin(true);

        //これも縦の配置がギュウギュウ詰めならないようにスペースをとる
        layout.setSpacing(true);

        //文字列コンポーネントを用意 ContentMode.TEXTは省略可能
        Label label1 = new Label("Hello Vaadin.",ContentMode.TEXT);
        layout.addComponent(label1);

        //改行コード等を含めたい場合 第二引数にContentMode.PREFORMATTEDを指定
        Label label2 = new Label("Hello Vaadin.\nHello Vaadin.",ContentMode.PREFORMATTED);
        layout.addComponent(label2);

        //文字列コンポーネントhtmlで記載する。第二引数にContentMode.HTMLを指定
        Label label3 = new Label("<h3>h3テキストです。</h3>",ContentMode.HTML);
        layout.addComponent(label3);

        //文字列をテキストフィールドに入れた値で変化させる
        Label label4 = new Label("文字列が変化します");
        layout.addComponent(label4);
        TextField editor = new TextField(null,label4.getValue());
        editor.addValueChangeListener(event -> label3.setValue(editor.getValue()));
        editor.setImmediate(true);
        layout.addComponent(editor);
    }
    @WebServlet(urlPatterns = "/LabelPractice/*", name = "LabelPractice", asyncSupported = true)
    @VaadinServletConfiguration(ui = LabelPractice.class, productionMode = false)
    public static class MyUIServlet extends VaadinServlet {
    }
}

実行結果