代码之家 › 专栏 › 技术社区 › John

如何使用vaadin显示大量文本?

vaadin-flow vaadin10 vaadin

1

John · 技术社区 · 7 年前

我需要处理一些数据并在网页上显示处理日志。(大约300行文本)。
我试着用标签。起初,它工作得很好——页面可以滚动,所有的文本都可以看到。但在大约100个标签之后,页面变得没有响应。
如何管理此任务?
(我试图在webcomponents.org上查找其他组件,但找不到任何内容。)

2 回复 | 直到 7 年前

1

4

Basil Bourque 7 年前

`textarea`


   
    
     我尝试过在
     
      answer by leif strand
     
     
      ,using
     
     
      
       texterarea.
       
       
      
     
     
      
       
        。
       
      
     
    
    
     
      
       
        当我用300短线预载时,没问题。单击一个按钮,一次添加10行,不会出现故障。使用Web浏览器窗口滚动条向上和向下滚动工作正常。
       
       
       
      
      
       
        我使用VaADIN 0.0.4与Java100.1(< AHRF= =“HTPSE//E.WiKiTo.Org/WiKi/AululSype”Re=“NoFoLoLoeFror”> Zulu由AZUL Stase
       
       ,在浏览器Safari 111.2上MacOS高Sierra上的外部4K监视器上连接到MacBook Pro视网膜。
      
      
       以下是整个Vaadin应用程序。
      
      
      
      package com.basilbourque.example;

导入com.vaadin.flow.component.button.button;
导入com.vaadin.flow.component.dependency.htmlimport;
导入com.vaadin.flow.component.orderedlayout.verticallayout;
导入com.vaadin.flow.component.textfield.textarea;
导入com.vaadin.flow.router.route;

导入java.time.instant;
导入java.util.arraylist;
导入java.util.collections;
导入java.util.list;
导入java.util.stream.collectors;

/**
*主视图包含一个按钮和一个模板元素。
*/
@htmlimport(“styles/shared styles.html”)。
@路由(“”)
公共类主视图扩展Verticallayout{
文本区域文本区域;

//构造函数。
公共主视图()。{
this.setwidth(“100%”);

this.textarea=新文本区域(“logs”);
this.textfarea.setwidth(“100%”);
this.textArea.setReadOnly(真);
附录(300);

button button=new button(“添加10行”,事件->){
附录(10);
(});

this.add(按钮,this.textarea);
this.setClassName(“主布局”);
}

专用void appendrows(int countrows){
list<string>entries=new arraylist<>(countrows);
对于(int i=1;i<=countrows;i++){
entries.add(instant.now().toString());
}
collections.reverse(entries);//将最新的放在最上面。
string s=entries.stream().collect(collectors.joining(“\n”));
textArea.setValue(s+“\n”+this.textArea.getValue());
}
}
< /代码> 


使用TextArea.

当我预载300短线时,没问题。单击一个按钮,一次添加10行,不会出现故障。使用Web浏览器窗口滚动条向上和向下滚动可以顺利工作。

我用Java100.1使用VaADIN 0.0.4(Zulu by Azul Systems,在浏览器Safari 11.1.2中的MacOS High Sierra上,在连接到MacBook Pro视网膜的外部4K监视器上。

这是整个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() );
    }
}

2

4

Leif Åstrand 7 年前

您可以将所有文本只放在一个组件中,而不是为每行创建单独的组件。如果需要换行符(即 \n )在要换行到下一行的文本中,可以调整 white-space 元素的css属性,例如 pre-line 或 pre-wrap 相反。你可以用 component.getElement().getStyle().set("white-space", "pre-wrap") .

如果您希望以可视方式指示文本的状态,则另一种选择可能是只读的 TextArea 组件。

我还建议使用 Span 组件而不是 Label 在VAADIN 10。 标签 正在使用 <label> 浏览器中的元素,它实际上只用于标记输入字段,而不是用于一般用途的文本块。