Spring Boot with Vaadin 〜その4 : モーダルダイアログと永続化〜

f:id:Naotsugu:20160113010339p:plain

モーダルダイアログで新しい Customer を登録してみる。

モーダルダイアログ

ダイアログは Window を作成して setModal(true) にするとモーダルとなる。

今回は Window を継承して Customer 登録用のダイアログを追加する。

src/main/groovy/hello/CustomerEditDialog.groovy

package hello

import com.vaadin.data.validator.StringLengthValidator
import com.vaadin.server.FontAwesome
import com.vaadin.ui.*

class CustomerEditDialog extends Window {

    TextField firstName = new TextField("First name")
    TextField lastName = new TextField("Last name")

    Button save = new Button("Save", FontAwesome.SAVE)
    Button cancel = new Button("Cancel")

    public CustomerEditDialog(Closure saveAction) {

        setCaption("Edit Customer")
        setModal(true)
        center()

        VerticalLayout mainLayout = new VerticalLayout();
        mainLayout.setMargin(true)
        setContent(mainLayout)

        FormLayout form = new FormLayout()
        firstName.setRequired(true)
        firstName.addValidator(new StringLengthValidator("must be 1-10 letters (was {0})",1, 10, true));
        firstName.setImmediate(true)
        form.addComponent(firstName)

        lastName.setRequired(true)
        lastName.addValidator(new StringLengthValidator("must be 1-10 letters (was {0})",1, 10, true));
        lastName.setImmediate(true)
        form.addComponent(lastName)

        mainLayout.addComponent(form)


        save.addClickListener({event ->
            if (!firstName.isValid() || !lastName.isValid()) return;
            Customer c = new Customer(firstName.getValue(), lastName.getValue())
            saveAction.call(c)
            close()
        })
        cancel.addClickListener({ event -> close() })
        mainLayout.addComponent(new HorizontalLayout(save, cancel))

    }
}

TextField には addValidator でバリデータを登録できる。 setImmediate(true) とすることでフォーカスアウトでバリデーションメッセージが表示される。

モーダルダイアログの登録

Window は UI#addWindow() で追加できる。

class VaadinUI extends UI {
    protected void init(VaadinRequest request) {
        ・・・・
        addWindow(new Window(・・))
    }

前回から少し変えて、UI クラスは以下のように変える。

src/main/groovy/hello/VaadinUI.groovy

package hello

import com.google.gwt.thirdparty.guava.common.collect.Lists
import com.vaadin.annotations.Theme
import com.vaadin.annotations.VaadinServletConfiguration
import com.vaadin.data.util.BeanItemContainer
import com.vaadin.server.FontAwesome
import com.vaadin.server.VaadinRequest
import com.vaadin.spring.annotation.SpringUI
import com.vaadin.ui.Button
import com.vaadin.ui.Grid
import com.vaadin.ui.UI
import com.vaadin.ui.VerticalLayout
import groovy.transform.CompileStatic
import org.springframework.beans.factory.annotation.Autowired

@SpringUI @Theme("valo")
@VaadinServletConfiguration(productionMode = false, ui = VaadinUI.class)
class VaadinUI extends UI {

    @Autowired CustomerRepository repo;

    Grid grid = new Grid()
    Button newBtn = new Button("NEW", FontAwesome.PLUS)

    @Override @CompileStatic
    protected void init(VaadinRequest request) {

        VerticalLayout content = new VerticalLayout()
        content.setMargin(true)
        setContent(content)

        listCustomer()
        grid.setColumnOrder("id", "firstName", "lastName")
        grid.removeColumn("metaClass")
        content.addComponent(grid)

        newBtn.addClickListener({ addWindow(
            new CustomerEditDialog({Customer c ->
                repo.save(c)
                listCustomer()
            })
        )})
        content.addComponent(newBtn)

    }

    void listCustomer() {
        grid.setContainerDataSource(
                new BeanItemContainer(Customer.class, Lists.newArrayList(repo.findAll())))
    }

}