CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/maven-com-vaadin--vaadin

Comprehensive Java web application development framework that enables server-side Java development with modern web UI components and automatic client-server communication.

Overview
Eval results
Files

layouts.mddocs/

Layout System

Vaadin's layout system provides flexible component arrangement with responsive design support. All layouts are based on CSS Flexbox and Grid, with Java APIs that abstract the underlying CSS complexity.

Core Imports

// Basic layout components
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.FlexLayout;

// Form and specialized layouts
import com.vaadin.flow.component.formlayout.FormLayout;
import com.vaadin.flow.component.splitlayout.SplitLayout;
import com.vaadin.flow.component.applayout.AppLayout;
import com.vaadin.flow.component.applayout.DrawerToggle;

// Content organization components
import com.vaadin.flow.component.accordion.Accordion;
import com.vaadin.flow.component.accordion.AccordionPanel;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.TabSheet;
import com.vaadin.flow.component.details.Details;
import com.vaadin.flow.component.html.Div;

// Scrolling and utility components
import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.HasOrderedComponents;
import com.vaadin.flow.component.HasSize;
import com.vaadin.flow.component.button.Button;

// Layout enums and interfaces
import com.vaadin.flow.component.orderedlayout.FlexComponent.Alignment;
import com.vaadin.flow.component.orderedlayout.FlexComponent.JustifyContentMode;
import com.vaadin.flow.component.orderedlayout.FlexLayout.FlexDirection;
import com.vaadin.flow.component.orderedlayout.FlexLayout.FlexWrap;
import com.vaadin.flow.component.formlayout.FormLayout.FormItem;
import com.vaadin.flow.component.formlayout.FormLayout.ResponsiveStep;
import com.vaadin.flow.component.splitlayout.SplitLayout.Orientation;
import com.vaadin.flow.router.RouterLayout;

Basic Layouts

VerticalLayout

Arranges components vertically with flexible spacing and alignment options.

public class VerticalLayout extends Component implements HasOrderedComponents<VerticalLayout>, HasSize {
    public VerticalLayout();
    public VerticalLayout(Component... children);

    // Component management
    public void add(Component... components);
    public void addComponentAsFirst(Component component);
    public void remove(Component... components);
    public void removeAll();
    public void replace(Component oldComponent, Component newComponent);

    // Layout configuration
    public void setSpacing(boolean spacing);
    public boolean isSpacing();
    public void setPadding(boolean padding);
    public boolean isPadding();
    public void setMargin(boolean margin);
    public boolean isMargin();

    // Alignment
    public void setAlignItems(FlexComponent.Alignment alignment);
    public FlexComponent.Alignment getAlignItems();
    public void setAlignSelf(FlexComponent.Alignment alignment, Component... components);
    public void setJustifyContentMode(FlexComponent.JustifyContentMode justifyContentMode);
    public FlexComponent.JustifyContentMode getJustifyContentMode();

    // Flexibility
    public void setFlexGrow(double flexGrow, Component... components);
    public void expand(Component... componentsToExpand);
}

HorizontalLayout

Arranges components horizontally with flexible spacing and alignment options.

public class HorizontalLayout extends Component implements HasOrderedComponents<HorizontalLayout>, HasSize {
    public HorizontalLayout();
    public HorizontalLayout(Component... children);

    // Component management
    public void add(Component... components);
    public void addComponentAsFirst(Component component);
    public void remove(Component... components);
    public void removeAll();
    public void replace(Component oldComponent, Component newComponent);

    // Layout configuration
    public void setSpacing(boolean spacing);
    public boolean isSpacing();
    public void setPadding(boolean padding);
    public boolean isPadding();
    public void setMargin(boolean margin);
    public boolean isMargin();

    // Alignment
    public void setAlignItems(FlexComponent.Alignment alignment);
    public FlexComponent.Alignment getAlignItems();
    public void setAlignSelf(FlexComponent.Alignment alignment, Component... components);
    public void setJustifyContentMode(FlexComponent.JustifyContentMode justifyContentMode);

    // Flexibility
    public void setFlexGrow(double flexGrow, Component... components);
    public void expand(Component... componentsToExpand);
}

FlexLayout

Advanced flexbox layout with full control over flex properties and responsive behavior.

public class FlexLayout extends Component implements HasOrderedComponents<FlexLayout>, HasSize {
    public FlexLayout();
    public FlexLayout(Component... children);

    // Component management
    public void add(Component... components);
    public void remove(Component... components);
    public void removeAll();

    // Flex container properties
    public void setFlexDirection(FlexDirection flexDirection);
    public FlexDirection getFlexDirection();
    public void setFlexWrap(FlexWrap flexWrap);
    public FlexWrap getFlexWrap();
    public void setJustifyContentMode(JustifyContentMode justifyContentMode);
    public void setAlignItems(Alignment alignItems);
    public void setAlignContent(ContentAlignment alignContent);

    // Flex item properties
    public void setFlexGrow(double flexGrow, Component... components);
    public void setFlexShrink(double flexShrink, Component... components);
    public void setFlexBasis(String flexBasis, Component... components);
    public void setOrder(int order, Component... components);
    public void setAlignSelf(Alignment alignSelf, Component... components);
}

Form Layouts

FormLayout

Responsive form layout that automatically adjusts column count based on screen size.

public class FormLayout extends Component implements HasOrderedComponents<FormLayout>, HasSize {
    public FormLayout();
    public FormLayout(Component... children);

    // Component management
    public void add(Component... components);
    public void addFormItem(Component field, String label);
    public FormItem addFormItem(Component field, Component label);
    public void remove(Component... components);

    // Responsive behavior
    public void setResponsiveSteps(ResponsiveStep... responsiveSteps);
    public List<ResponsiveStep> getResponsiveSteps();
    public void setColspan(Component component, int colspan);

    // Layout configuration
    public void setLabelsPosition(LabelsPosition labelsPosition);
    public LabelsPosition getLabelsPosition();
}

public static class ResponsiveStep {
    public ResponsiveStep(String minWidth, int columns);
    public ResponsiveStep(String minWidth, int columns, LabelsPosition labelsPosition);

    public String getMinWidth();
    public int getColumns();
    public LabelsPosition getLabelsPosition();
}

public static class FormItem extends Component {
    public void add(Component... components);
    public void addToLabel(Component... components);
    public void addToPrefix(Component... components);
}

SplitLayout

Resizable split pane layout for dividing space between two components.

public class SplitLayout extends Component implements HasSize {
    public SplitLayout();
    public SplitLayout(Component primaryComponent, Component secondaryComponent);

    // Component management
    public void addToPrimary(Component component);
    public void addToSecondary(Component component);
    public void remove(Component component);
    public void removeFromPrimary();
    public void removeFromSecondary();

    // Split configuration
    public void setOrientation(Orientation orientation);
    public Orientation getOrientation();
    public void setSplitterPosition(double position);
    public double getSplitterPosition();
    public void setMinSplitterPosition(double position);
    public void setMaxSplitterPosition(double position);
}

Application Layouts

AppLayout

Application-level layout with navigation drawer, navbar, and content area.

public class AppLayout extends Component implements RouterLayout, HasSize {
    public AppLayout();
    public AppLayout(Component navbar, Component drawer, Component content);

    // Navigation components
    public void addToNavbar(Component... components);
    public void addToNavbar(boolean touchOptimized, Component... components);
    public void addToDrawer(Component... components);
    public void setContent(Component content);
    public Component getContent();

    // Drawer configuration
    public void setDrawerOpened(boolean drawerOpened);
    public boolean isDrawerOpened();
    public void toggle();

    // Primary section
    public void setPrimarySection(Section section);
    public Section getPrimarySection();

    // RouterLayout implementation
    public void showRouterLayoutContent(HasElement content);

    public enum Section {
        NAVBAR, DRAWER
    }
}

public class DrawerToggle extends Button {
    public DrawerToggle();
    public DrawerToggle(String text);
}

Content Organization

Accordion

Collapsible content panels for organizing related information.

public class Accordion extends Component implements HasSize {
    public Accordion();
    public Accordion(AccordionPanel... panels);

    // Panel management
    public AccordionPanel add(String summary, Component content);
    public AccordionPanel add(Component summary, Component content);
    public void add(AccordionPanel... panels);
    public void remove(AccordionPanel... panels);
    public void close();
    public AccordionPanel getOpenedPanel();

    // Event handling
    public Registration addOpenedChangeListener(ComponentEventListener<OpenedChangeEvent> listener);
}

public class AccordionPanel extends Component {
    public AccordionPanel();
    public AccordionPanel(String summaryText, Component content);
    public AccordionPanel(Component summary, Component content);

    public void setSummaryText(String summaryText);
    public String getSummaryText();
    public void setSummary(Component summary);
    public Component getSummary();
    public void setContent(Component content);
    public Component getContent();
    public void setOpened(boolean opened);
    public boolean isOpened();
}

Tabs and TabSheet

Tab-based navigation for organizing content into separate views.

public class Tabs extends Component implements HasSize {
    public Tabs();
    public Tabs(Tab... tabs);

    // Tab management
    public void add(Tab... tabs);
    public void remove(Tab... tabs);
    public void removeAll();
    public int getTabIndex(Tab tab);
    public Tab getTabAt(int index);
    public int getTabCount();

    // Selection
    public void setSelectedTab(Tab selectedTab);
    public Tab getSelectedTab();
    public void setSelectedIndex(int selectedIndex);
    public int getSelectedIndex();

    // Orientation
    public void setOrientation(Orientation orientation);
    public Orientation getOrientation();

    // Auto-selection
    public void setAutoselect(boolean autoselect);
    public boolean isAutoselect();

    // Event handling
    public Registration addSelectedChangeListener(ComponentEventListener<SelectedChangeEvent> listener);
}

public class Tab extends Component implements HasOrderedComponents<Tab>, HasText, HasEnabled {
    public Tab();
    public Tab(String label);
    public Tab(Component... components);

    public void add(Component... components);
    public void remove(Component... components);
    public void setText(String text);
    public String getText();
    public void setSelected(boolean selected);
    public boolean isSelected();
    public void setClosable(boolean closable);
    public boolean isClosable();
}

public class TabSheet extends Component implements HasSize {
    public TabSheet();

    // Tab and content management
    public Tab add(String label, Component content);
    public Tab add(Component content);
    public void add(Tab tab, Component content);
    public void remove(Tab tab);
    public void remove(Component content);
    public void removeAll();

    // Selection
    public void setSelectedTab(Tab selectedTab);
    public Tab getSelectedTab();
    public void setSelectedIndex(int selectedIndex);

    // Content access
    public Component getComponent(Tab tab);
    public Tab getTab(Component content);

    // Event handling
    public Registration addSelectedChangeListener(ComponentEventListener<SelectedChangeEvent> listener);
}

Details

Expandable content section with summary header.

public class Details extends Component implements HasOrderedComponents<Details>, HasSize {
    public Details();
    public Details(String summary, Component... content);
    public Details(Component summary, Component... content);

    // Content management
    public void add(Component... components);
    public void addContent(Component... components);
    public void remove(Component... components);
    public void removeAll();

    // Summary
    public void setSummaryText(String summary);
    public String getSummaryText();
    public void setSummary(Component summary);
    public Component getSummary();

    // State
    public void setOpened(boolean opened);
    public boolean isOpened();

    // Event handling
    public Registration addOpenedChangeListener(ComponentEventListener<OpenedChangeEvent> listener);
}

Layout Utilities

Scroller

Scrollable container with customizable scroll behavior.

public class Scroller extends Component implements HasOrderedComponents<Scroller>, HasSize {
    public Scroller();
    public Scroller(Component... content);

    // Content management
    public void add(Component... components);
    public void remove(Component... components);
    public void removeAll();

    // Scroll configuration
    public void setScrollDirection(ScrollDirection scrollDirection);
    public ScrollDirection getScrollDirection();
}

Card

Content card container with styling support.

public class Card extends Component implements HasOrderedComponents<Card>, HasSize, HasTheme {
    public Card();
    public Card(Component... components);

    public void add(Component... components);
    public void remove(Component... components);
    public void addThemeVariants(CardVariant... variants);
}

Layout Enums and Types

// Flex alignment options
public enum Alignment {
    START, CENTER, END, STRETCH, BASELINE, AUTO
}

public enum JustifyContentMode {
    START, CENTER, END, BETWEEN, AROUND, EVENLY
}

public enum FlexDirection {
    ROW, COLUMN, ROW_REVERSE, COLUMN_REVERSE
}

public enum FlexWrap {
    NOWRAP, WRAP, WRAP_REVERSE
}

// Form layout options
public enum LabelsPosition {
    ASIDE, TOP
}

// Split layout options
public enum Orientation {
    HORIZONTAL, VERTICAL
}

// Scroll options
public enum ScrollDirection {
    VERTICAL, HORIZONTAL, BOTH, NONE
}

// Theme variants
public enum CardVariant implements ThemeVariant {
    LUMO_FILLED
}

// Component ordering interface
public interface HasOrderedComponents<T> {
    void add(Component... components);
    void addComponentAsFirst(Component component);
    void remove(Component... components);
    void removeAll();
    void replace(Component oldComponent, Component newComponent);
}

Usage Examples

Responsive Form Layout

FormLayout formLayout = new FormLayout();
formLayout.setResponsiveSteps(
    new FormLayout.ResponsiveStep("0", 1),
    new FormLayout.ResponsiveStep("320px", 2),
    new FormLayout.ResponsiveStep("500px", 3)
);

TextField firstName = new TextField("First name");
TextField lastName = new TextField("Last name");
EmailField email = new EmailField("Email");

formLayout.add(firstName, lastName);
formLayout.add(email, 2); // Spans 2 columns

Application Layout with Navigation

AppLayout appLayout = new AppLayout();

// Add navigation drawer
VerticalLayout drawer = new VerticalLayout();
drawer.add(new RouterLink("Home", HomeView.class));
drawer.add(new RouterLink("Users", UsersView.class));
appLayout.addToDrawer(drawer);

// Add navbar with drawer toggle
appLayout.addToNavbar(new DrawerToggle(), new H1("My App"));

The layout system provides comprehensive tools for creating responsive, professional web application interfaces with minimal CSS knowledge required.

Install with Tessl CLI

npx tessl i tessl/maven-com-vaadin--vaadin

docs

components.md

data-binding.md

data-components.md

index.md

layouts.md

routing.md

security.md

server-communication.md

theming.md

tile.json