如何使用Vaadin显示很多文本？

Question

我需要处理一些数据并在网页上显示处理日志。（大约300行文字）。
我试图使用标签。最初，它工作正常-页面变得可滚动，并且所有文本都可以看到。但是大约100个标签后，页面变得没有响应。
如何管理这项任务？
（我尝试在webcomponents.org上寻找其他组件，但找不到任何东西。）

Answer 1

您可以将所有文本仅放入一个组件中，而不是为每一行创建单独的组件。如果您希望文本中的换行符（即\n）换行到下一行，您可以将white-space元素的 CSS 属性调整为 例如pre-line或pre-wrap。您可以使用 来执行此操作component.getElement().getStyle().set("white-space", "pre-wrap")。

如果您想直观地指示文本的状态，另一种选择可能是只读TextArea组件。

我还建议使用该Span组件而不是LabelVaadin 10 中的组件。在浏览器中Label使用该<label>元素实际上仅用于标记输入字段，而不用于通用文本块。

Answer 2

TextArea

我尝试使用LeifÅstrand在Answer中提到的方法之一TextArea。

当我预加载300条短线时，没问题。单击一个按钮一次可以添加10条线，可以顺利进行。使用网络浏览器的窗口滚动条可以上下滚动。

我在连接Macbook Pro Retina的外部4K显示器上的macOS High Sierra上的Safari 11.1.2浏览器中的Java 11.0.1中使用了Vaadin 10.0.4和Java 10.0.1（由Azul Systems开发的Zulu）。

这是整个Vaadin应用程序。

package com.basilbourque.example;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.dependency.HtmlImport;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextArea;
import com.vaadin.flow.router.Route;

import java.time.Instant;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
import java.util.stream.Collectors;

/**
 * The main view contains a button and a template element.
 */
@HtmlImport ( "styles/shared-styles.html" )
@Route ( "" )
public class MainView extends VerticalLayout {
    TextArea textArea;

    // Constructor.
    public MainView () {
        this.setWidth( "100%" );

        this.textArea = new TextArea( "Logs" );
        this.textArea.setWidth( "100%" );
        this.textArea.setReadOnly( true );
        this.appendRows( 300 );

        Button button = new Button( "Add 10 more rows" , event -> {
            this.appendRows( 10 );
        } );

        this.add( button , this.textArea );
        this.setClassName( "main-layout" );
    }

    private void appendRows ( int countRows ) {
        List< String > entries = new ArrayList<>( countRows );
        for ( int i = 1 ; i <= countRows ; i++ ) {
            entries.add( Instant.now().toString() );
        }
        Collections.reverse( entries ); // Put newest on top.
        String s = entries.stream().collect( Collectors.joining( "\n" ) );
        textArea.setValue( s + "\n" + this.textArea.getValue() );
    }
}