如何使用 Vaadin 框架 Java

Question

@Override
protected void init(VaadinRequest request) {
    VerticalLayout content = new VerticalLayout();
    content.setSizeFull();
    setContent(content);

    VerticalLayout buttons = initButton();
    content.addComponent(buttons);
    content.setComponentAlignment(buttons, Alignment.MIDDLE_LEFT);


    VerticalLayout table = initTable();
    content.addComponent(table);
    content.setComponentAlignment(buttons, Alignment.MIDDLE_RIGHT);

}

无法制作屏幕截图中的 UI。请告诉我如何正确？

Answer 1

我假设你的箭头表示从一个视图移动到另一个视图。

在 Vaadin.com 网站上提供的教程和手册中介绍了对用户单击按钮的反应以及在视图之间切换的内容。所以我会简短。

要切换视图，我们可以使用 Vaadin Flow 中的新 @Route 功能。我发现 Vaadin 14 中的路由功能存在问题。所以我通过自己的代码以编程方式切换视图，如下所示。

对 Vaadin 14.1.2 使用 starter app 的“Plain Java Servlet”风格，我将 MainView 类更改为如下所示。我还会注释掉@Route 和@PWA 这两个注释，但是这样做会在当前版本的 Vaadin 中引发错误，所以我们不要这样做。

package work.basil;

import com.vaadin.flow.component.ClickEvent;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.PWA;

/**
 * The main view contains a button and a click listener.
 */
@Route ( "" )
@PWA ( name = "Project Base for Vaadin", shortName = "Project Base" )
public class MainView extends VerticalLayout
{
    private Button birds, cats, dogs;

    public MainView ( )
    {
        this.removeAll();
        this.add( new MenuView( this ) );
    }

    public void switchToDogsView ( )
    {
        this.removeAll();
        this.add( new DogsView( this ) );
    }
}

让我们制作菜单视图，一组 3 个按钮。

package work.basil;

import com.vaadin.flow.component.ClickEvent;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;

public class MenuView extends VerticalLayout
{
    private MainView mainView;
    private Button birds, cats, dogs;

    public MenuView ( MainView mainView )
    {
        this.mainView = mainView;
        this.widgets();
        this.arrange();
    }

    private void widgets ( )
    {
        this.birds = new Button( "Birds" , ( ClickEvent < Button > event ) -> Notification.show( "Birds!" ) );
        this.cats = new Button( "Cats" , ( ClickEvent < Button > event ) -> Notification.show( "Cats!" ) );
        this.dogs = new Button( "Dogs" , ( ClickEvent < Button > event ) -> this.mainView.switchToDogsView() );
    }


    private void arrange ( )
    {
        this.add( this.birds , this.cats , this.dogs );
    }
}

其中一个按钮回调到主视图（它永远不会离开用户的屏幕）。该主视图清除其嵌套的菜单视图，并用新的 Dogs 视图替换该内容，该视图由 H1 标题和 Grid 组成。

package work.basil;

import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.data.selection.SelectionEvent;

import java.util.List;
import java.util.Optional;
import java.util.UUID;

public class DogsView extends VerticalLayout
{
    // Member variables
    private H1 title;
    private Grid < Dog > grid;

    public DogsView ( MainView mainView )
    {
        this.widgets();
        this.arrange();
    }

    private void widgets ( )
    {
        this.title = new H1( "Dogs" );
        this.grid = new Grid <>();
        List < Dog > dogs = List.of(
                new Dog( UUID.fromString( "83f8fd94-1cb6-11ea-978f-2e728ce88125" ) , Dog.Breed.BORDER_COLLIE , "Conan" ) ,
                new Dog( UUID.fromString( "bd9bd346-1cb6-11ea-978f-2e728ce88125" ) , Dog.Breed.AUSTRALIAN_SHEPARD , "Hershey" ) ,
                new Dog( UUID.fromString( "7d1f8f90-a330-49ea-9532-636b9bc6664c" ) , Dog.Breed.SIBERIAN_HUSKY , "Jojo" )
        );
        this.grid.setItems( dogs );
        grid.addColumn( Dog :: getName ).setHeader( "Name" );
        grid.addColumn( Dog :: getBreed ).setHeader( "Breed" );

        grid.addSelectionListener( ( SelectionEvent < Grid < Dog >, Dog > event ) -> {
            Optional < Dog > selected = event.getFirstSelectedItem();
            if ( selected.isPresent() )
            {
                Notification.show( "Selected dog: " + selected.get().toString() );
            } else
            {// Not present.
                Notification.show( "No dog selected." );
            }
        } );
    }

    private void arrange ( )
    {
        this.add( this.title , this.grid );
    }
}

我们需要 Grid 的内容。所以这是一个Dog 类。在这个类中，我们为各种品种定义了一个嵌套枚举。

package work.basil;

import java.util.Objects;
import java.util.UUID;

public class Dog
{
    public enum Breed
    {
        BORDER_COLLIE, AUSTRALIAN_KELPIE, AUSTRALIAN_SHEPHERD, SIBERIAN_HUSKY
    }

    // Member variables.
    private UUID id;
    private Breed breed;
    private String name;

    public Dog ( UUID id , Breed breed , String name )
    {
        this.id = id;
        this.breed = breed;
        this.name = name;
    }

    public UUID getId ( )
    {
        return id;
    }

    public Breed getBreed ( )
    {
        return breed;
    }

    public String getName ( )
    {
        return name;
    }

    // ---------|  Object  |--------------------------------


    @Override
    public boolean equals ( Object o )
    {
        if ( this == o ) return true;
        if ( o == null || getClass() != o.getClass() ) return false;
        Dog dog = ( Dog ) o;
        return getId().equals( dog.getId() );
    }

    @Override
    public int hashCode ( )
    {
        return Objects.hash( getId() );
    }

    @Override
    public String toString ( )
    {
        return "Dog{ " +
                "id=" + id +
                " | breed=" + breed +
                " | name='" + name + '\'' +
                " }";
    }
}

运行它。我们看到了三个按钮。

单击“鸟”或“猫”按钮以查看出现的消息。

单击 Dogs 按钮切换视图，显示三个 Dog 实例的数据网格。单击其中任何一个以查看显示有关该特定狗的信息的消息，包括UUID 列id 未显示在网格中但存在于Dog 对象中。按住 Command 单击以取消选择同一行，并收到一条消息，说明没有选择任何狗。