1046791510의 후속 사항
강습회의 재료로 많이 시험해 보았다.

이번에 우리는 다음과 같은 다섯 가지를 진행했다.

1. 외부 링크로 이동

2. 측면 구성 요소

3. 텍스트 필드에 입력한 문자를 보내기 버튼으로 표시

4. 하위 창 표시

5. 모드 창 표시

출처

WindowPractice.java

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.ExternalResource;
import com.vaadin.server.ThemeResource;
import com.vaadin.server.VaadinRequest;

import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Button;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.Link;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;

/**
 *
 */
@Theme("mytheme")
@Widgetset("com.example.MyAppWidgetset")
public class WindowlPractice extends UI {
    @Override
    protected void init(VaadinRequest vaadinRequest) {
        //縦コンテナを生成・配置
        final VerticalLayout layout = new VerticalLayout();
        //マージンをとる
        layout.setMargin(true);
        //縦のスペースをとる
        layout.setSpacing(true);
        setContent(layout);

        //外部へのリンクに遷移するリンクコンポーネントを生成
        Link link1 = new Link("Google",new ExternalResource("http://google.com"));
        //iconをセット。画像はsrc/main/webapp/VAADIN/themes/mytheme/image/に置く
        link1.setIcon(new ThemeResource("image/bedar.gif"));
        //別タブで開く
        link1.setTargetName("_blank");
        layout.addComponent(link1);

        //文字表示用ラベルコンポーネント生成
        Label label = new Label();
        layout.addComponent(label);
        //横並びにコンポーネントを配置するlayout生成
        HorizontalLayout formlayuout = new HorizontalLayout();
        formlayuout.setSpacing(true);
        //テキストフィールドを配置し、送信ボタンを押すと、入力した文字が表示される。
        TextField field = new TextField();
        formlayuout.addComponent(field);
        //送信ボタン配置
        Button button1 = new Button("送信");
        button1.addClickListener(e -> label.setValue(field.getValue()));
        formlayuout.addComponent(button1);
        //横layoutをadd
        layout.addComponent(formlayuout);

        //サブボタンウィンドウを表示させる
        Button button2 = new Button("サブウィンドウ");
        button2.addClickListener( event -> addSubwindow());
        layout.addComponent(button2);

        //モーダルウィンドウを表示させる
        Button button3 = new Button("モーダルウィンドウ");
        button3.addClickListener( event -> addModalWindow());
        layout.addComponent(button3);
    }
    public void addSubwindow(){
        //新たにWindowを作成。
        Window subWindow = new Window("Subwindow");
        //windowを追加
        VerticalLayout layout = new VerticalLayout();
        subWindow.setContent(layout);
        Label label3 = new Label("This is sub window");
        layout.addComponent(label3);
        subWindow.setContent(layout);
        //subwindowをcenterに配置する。
        subWindow.center();
        //addWindow(window)でサブウィンドウができる
        addWindow(subWindow);
    }
    public void addModalWindow(){
        //新たにWindowを作成。
        Window modalWindow = new Window("ModalWindow");
        //ModalWindowにする
        modalWindow.setModal(true);
        //レイアウトをモーダルウィンドウに追加
        VerticalLayout layout = new VerticalLayout();
        layout.setMargin(true);
        modalWindow.setContent(layout);
        Label label3 = new Label("This is Modal window");
        layout.addComponent(label3);
        //subwindowをcenterに配置する。
        modalWindow.center();
        //windowを追加
        addWindow(modalWindow);

    }

    @WebServlet(urlPatterns = "/WindowPractice/*", name = "WindowPractice", asyncSupported = true)
    @VaadinServletConfiguration(ui = WindowlPractice.class, productionMode = false)
    public static class MyUIServlet extends VaadinServlet {
    }
}

실행 결과 및 보완

1, 2, 3의 집행 결과와 보충

VAadin 강습회 중 하나
【보충】
· Link 어셈블리를 생성합니다.Link link1 = new Link("Google",new ExternalResource("http://google.com"));・ 링크의 왼쪽 아이콘을 표시합니다.물론 아이콘을 클릭하면 링크로 이동할 수 있다.link1.setIcon(new ThemeResource("image/bedar.gif"));

4의 실행 결과 및 보완

【보충】
창을 만들고Window subWindow = new Window();그ddwindow를 사용하면 창을 나눌 수 있습니다.addWindow(subWindow);

5의 실행 결과 및 보완

【보충】
하위 창과 같은 창 만들기modalWindow.setModal(true);모드 창이 됩니다.