Vaadin Gridlayout에서 사용 가능한 공간을 사용하지만 줄 바꿈을 고려하십시오.

Question

일부 제목 및 값 레이블을 시각화하기 위해 Vaadin의 GridLayout을 사용합니다. GridLayout에는 2 개의 열과 여러 개의 행이 있습니다. 제목 레이블은 왼쪽에 있고 관련 레이블은 오른쪽에 있습니다.

가능한 한 적은 공간으로 첫 번째 열을 소비하고 두 번째 열은 브라우저 창의 모든 나머지 공간을 차지해야합니다. 값 레이블에 사용 가능한 공간보다 많은 공간이 필요한 경우 행을 끊어야합니다.

setColumnExpandRatio()으로 게임을 시도했습니다. 두 번째 열의 비율을 다음과 같이 결정하면 (첫 번째 열의 비율 지정을 생략하면) 매우 큰 텍스트 콘텐츠가있는 값 레이블이 줄 끝 부분에서 끊어지지 않는다는 사실을 제외하고는 모두 요청에 따라 작동합니다. 대신, 가로 스크롤 막대가 나타납니다

public class MyPanel extends GridLayout 
{ 
    public MyPanel() 
    { 
     setWidth("100%"); 
     setMargin(true); 
     setSpacing(true); 

     buildView(); 
    } 

    public void buildView() 
    { 
     removeAllComponents(); 
     setColumns(2); 
     setColumnExpandRatio(1, 1); 
     ... 
     titleLabel.setWidth(null); 
     valueLabel.setWidth(null); 

     addComponent(titleLabel); 
     addComponent(valueLabel); 

     setComponentAlignment(titleLabel, Alignment.TOP_RIGHT); 
    } 
} 

나는 또한 다음 첫 번째 열은 정말 필요한 것보다 더 많은 공간을 소비하는 첫 번째 열에 대한 비율을 지정합니다.

내 요구 사항을 어떻게 실현할 수 있습니까?

Answer 1

Label에 정의 된 너비가있는 경우 Label의 내용 만 줄 바꿈됩니다. 그것에 대해 생각하십시오 : 너비가 정의되지 않은 경우 텍스트를 줄 바꿈시기를 어떻게 결정해야합니까? 해결책은 valueLabel의 너비를 "100%"으로 설정하는 것만 큼 간단합니다. 사실, 그것보다 훨씬 간단합니다. 신선한 Label 인스턴스는 기본적으로 100 % 전역이므로 너비를 설정하는 선을 null으로 제거하면됩니다.

여기에 그것을 테스트하는 예 UI 클래스의 :

public class MyUI extends UI { 

    @Override 
    protected void init(VaadinRequest request) { 

     GridLayout layout = new GridLayout(); 
     layout.setWidth("100%"); 
     layout.setColumns(2); 
     layout.setColumnExpandRatio(1, 1); 

     Label label1 = new Label("Lorem ipsum"); 
     Label label2 = new Label(
       "Lorem ipsum dolor sit amet, consectetur adipiscing elit. " 
         + "Morbi augue sapien, tempus ac mattis ut, iaculis a erat. " 
         + "Ut vitae ante metus. Pellentesque vitae rutrum lacus, id volutpat tellus. " 
         + "Duis eget ultricies metus. " 
         + "Vestibulum ac nibh eget velit pretium semper et eget est. " 
         + "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. " 
         + "Curabitur nec rutrum tellus. Curabitur vel urna a nunc cursus congue. " 
         + "Vestibulum pellentesque mi in leo luctus, sit amet auctor enim ornare. " 
         + "Proin in mauris convallis, vestibulum nisi sed, consectetur dolor. " 
         + "Vestibulum ultricies metus ut nulla gravida, eget dapibus turpis fringilla. " 
         + "Mauris hendrerit felis non aliquam elementum. " 
         + "Phasellus ut purus ut urna consequat commodo. " 
         + "Cras semper ac augue quis rutrum. " 
         + "Nunc tristique magna sit amet congue faucibus."); 

     layout.addComponent(label1); 
     layout.addComponent(label2); 

     label1.setWidth(null); 
     label2.setWidth("100%"); // I'm being explicit, but you can just as well leave this out if you like 

     setContent(layout); 
    } 
}