Блог

Я использую Vaadin’s 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);
   }
}
  

Если я также укажу соотношение для первого столбца, то первый столбец будет занимать больше места, чем действительно необходимо.

Как я могу реализовать свои требования?

Содержимое 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);
    }
}