Question

我正在Vaadin框架中开发一个Web应用程序，它有主页和几个子页面。我想要实现的是固定页眉和页脚，并在中心有内容，正在更改并填充页眉和页脚之间的所有空间。这是我的MainUI课程：

// HEADER
final VerticalLayout headerLayout = new VerticalLayout();
final Panel headerPanel = new Panel();
headerPanel.addStyleName("header");

final ActiveLink header = new ActiveLink(provider.getText(getLocale(), "application.title.name"), new ExternalResource(""));
header.addStyleName("header");
header.addListener((ActiveLink.LinkActivatedListener) (ActiveLink.LinkActivatedEvent event) -> {
    getUI().getNavigator().navigateTo(Constant.View.MAIN);
});

headerPanel.setContent(header);
headerLayout.addComponent(headerPanel);

// FOOTER
final VerticalLayout footerLayout = new VerticalLayout(new Label("« FOOTER »"));

// CONTENT
final VerticalLayout contentLayout = new VerticalLayout();

final Panel contentPanel = new Panel(contentLayout);
contentPanel.addStyleName("content transparent no-border");

// MAIN = all together
final VerticalLayout mainLayout = new VerticalLayout(headerLayout, contentPanel, footerLayout);
mainLayout.setSizeFull();
mainLayout.setExpandRatio(contentPanel, 1);
setContent(mainLayout);

// Register Views in navigator
navigator = new Navigator(this, contentPanel);
navigator.addView("", new MainView(provider));
navigator.addView(Constant.View.DICT_ADMIN, new DictAdminView(provider));

要在Navigator课程中使用MainView更改内容中的观看次数：

final ActiveLink link11 = new ActiveLink(provider.getText(getLocale(), "menu.links.dict.admin"), new ExternalResource(""));
link11.addStyleName("menulinks");
link11.addListener((LinkActivatedListener) (LinkActivatedEvent event1) -> {
    getUI().getNavigator().navigateTo(Constant.View.DICT_ADMIN);
});

最后这是我的DictAdminView课程：

public class DictAdminView extends GridLayout implements View {

    private static final Logger LOGGER = LoggerFactory.getLogger(DictAdminView.class);
    I18NProvider provider;
    private final DictionaryDao dictionaryDao = new DictionaryDao();
    private final TermDao termDao = new TermDao();
    private final JPAContainer dictionaries = dictionaryDao.getContainer();
    private final JPAContainer terms = termDao.getContainer();

    public DictAdminView(I18NProvider provider) {
        super(4, 6);
        this.provider = provider;
    }

    @Override
    public void enter(ViewChangeListener.ViewChangeEvent event) {
        removeAllComponents();
        this.addStyleName("dictAdminLayout");
        this.setSizeFull();
        this.setSpacing(true);

        // Table with Dictionaries
        Grid grid = new Grid(dictionaries);
        grid.setId("dictList");
        grid.setWidth("100%");
        grid.setColumns(
            grid.getColumns().get(1).getPropertyId(),
            grid.getColumns().get(0).getPropertyId());
        grid.getColumns().get(1).setWidth(80).setHeaderCaption("POS");
        this.addComponent(grid, 0, 0, 0, 5);
        dictionaries.sort(new Object[]{grid.getColumns().get(0).getPropertyId()}, new boolean[]{true});

        // Table with Terms
        Grid grid1 = new Grid(terms);
        grid1.setId("termList");
        grid1.setWidth("100%");
        grid1.setColumns(
            grid1.getColumns().get(5).getPropertyId(),
            grid1.getColumns().get(0).getPropertyId());
        this.addComponent(grid1, 1, 0, 3, 3);
        terms.sort(new Object[]{grid1.getColumns().get(0).getPropertyId()}, new boolean[]{true});
        terms.addContainerFilter(new IsNull("dictionaryId"));   // show items w/o dict by default

        this.addComponent(new Button("lol button"), 1, 5, 3, 5);

        // Handle dictionary selection
        grid.addSelectionListener(selectionEvent -> {
        // Get selection from the selection model
            Integer selectedDictionaryId = (Integer) ((SingleSelectionModel) grid.getSelectionModel()).getSelectedRow();

            terms.removeAllContainerFilters();

            if (selectedDictionaryId != null) {
                terms.addContainerFilter(new Compare.Equal("dictionaryId.id", selectedDictionaryId));
                Utils.showInfoMessage(provider.getText(getLocale(), "msg.info.title.dictionary.selected"),
                            grid.getContainerDataSource().getItem(selectedDictionaryId).getItemProperty("name").toString());
            }
            else {
                terms.addContainerFilter(new IsNull("dictionaryId"));   // show items w/o dict by default
                Utils.showInfoMessage(provider.getText(getLocale(), "msg.info.title.nothing.selected"), "");
            }
        });
    }
}

我的问题是我无法伸展Grid来填充页眉和页脚之间的所有空间。我尝试过setSizeFull()和setRowExtendRatio()的组合，但没有成功。我也尝试在CSS中使用它。

有没有办法如何在Java或CSS中拉伸网格？
Navigator和更改View是一种好方法，还是有更好的方式在内容之间切换？

Answer 1

解决方案是使用Vaadin加载项BorderLayout或内置CustomLayout自带HTML和CSS。

GridLayout - 填充内容

1 个答案: