java - 如何使用 Vaadin 框架 Java

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

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

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

使用Vaadin 14.1.2的入门应用程序的“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列。命令单击以取消选择同一行，并收到一条消息，说明没有选择任何狗。idDog

java - 如何使用 Vaadin 框架 Java

问题描述

解决方案

推荐阅读