Class GridLayout

All Implemented Interfaces:
LayoutEvents.LayoutClickNotifier, ClientConnector, Sizeable, ComponentContainer, HasComponents, HasComponents.ComponentAttachDetachNotifier, Layout.AlignmentHandler, Layout.MarginHandler, Layout.SpacingHandler, com.vaadin.flow.component.AttachNotifier, com.vaadin.flow.component.DetachNotifier, com.vaadin.flow.component.HasComponents, com.vaadin.flow.component.HasElement, com.vaadin.flow.component.HasEnabled, com.vaadin.flow.component.HasStyle, Serializable, Iterable<com.vaadin.flow.component.Component>

@Tag("div") @JsModule("./grid-layout.js") @CssImport("./grid-layout.css") public class GridLayout extends AbstractLayout implements Layout.SpacingHandler, Layout.AlignmentHandler, Layout.MarginHandler, LayoutEvents.LayoutClickNotifier
Classic Components version of V8's GridLayout.

A layout where the components are laid out on a grid using cell coordinates.

The GridLayout also maintains a cursor for adding components in left-to-right, top-to-bottom order.

Each component in a GridLayout uses a defined area (column1,row1,column2,row2) from the grid. The components may not overlap with the existing components - if you try to do so you will get an GridLayout.OverlapsException. Adding a component with cursor automatically extends the grid by increasing the grid height.

The grid coordinates, which are specified by a row and column index, always start from 0 for the topmost row and the leftmost column.

Example coordinates structure of a 3x3 GridLayout (column, row):

(0,0) (1,0) (2,0)
(0,1) (1,1) (2,1)
(0,2) (1,2) (2,2)
See Also:
  • Field Details

  • Constructor Details

    • GridLayout

      public GridLayout()
      Constructs an empty (1x1) grid layout that is extended as needed.
    • GridLayout

      public GridLayout(int columns, int rows)
      Constructor for a grid of given size (number of columns and rows).

      The grid may grow or shrink later. Grid grows automatically if you add components outside its area.

      Parameters:
      columns - Number of columns in the grid.
      rows - Number of rows in the grid.
    • GridLayout

      public GridLayout(int columns, int rows, com.vaadin.flow.component.Component... children)
      Constructs a GridLayout of given size (number of columns and rows) and adds the given components in order to the grid.
      Parameters:
      columns - Number of columns in the grid.
      rows - Number of rows in the grid.
      children - Components to add to the grid.
      See Also:
  • Method Details

    • beforeClientResponse

      public void beforeClientResponse(boolean initial)
      Description copied from interface: ClientConnector
      Called before the response is written to client side. Gives the legacy connector an opportunity to set computed/dynamic state values.

      This is implemented for the legacy components to keep consistent behavior and e.g. legaze size calculations working.

      NOTE: the parameter initial is false when the component is attached again to a new UI when PreserveOnRefresh is used.

      Specified by:
      beforeClientResponse in interface ClientConnector
      Overrides:
      beforeClientResponse in class AbstractComponent
      Parameters:
      initial - true if the client-side connector will be created and initialized after this method has been invoked. false if there is already an initialized client-side connector.
    • onDetach

      protected void onDetach(com.vaadin.flow.component.DetachEvent detachEvent)
      Overrides:
      onDetach in class AbstractClientConnector
    • addComponent

      public void addComponent(com.vaadin.flow.component.Component component)
      Adds the component into this container to the cursor position. If the cursor position is already occupied, the cursor is moved forwards to find free position. If the cursor goes out from the bottom of the grid, the grid is automatically extended.
      Specified by:
      addComponent in interface ComponentContainer
      Overrides:
      addComponent in class AbstractComponentContainer
      Parameters:
      component - the component to be added, not null.
    • addComponent

      public void addComponent(com.vaadin.flow.component.Component component, int column, int row) throws GridLayout.OverlapsException, GridLayout.OutOfBoundsException
      Adds the component to the grid in cells column1,row1 (NortWest corner of the area.) End coordinates (SouthEast corner of the area) are the same as column1,row1. The coordinates are zero-based. Component width and height is 1.
      Parameters:
      component - the component to be added, not null.
      column - the column index, starting from 0.
      row - the row index, starting from 0.
      Throws:
      GridLayout.OverlapsException - if the new component overlaps with any of the components already in the grid.
      GridLayout.OutOfBoundsException - if the cell is outside the grid area.
    • addComponent

      public void addComponent(com.vaadin.flow.component.Component component, int column1, int row1, int column2, int row2) throws GridLayout.OverlapsException, GridLayout.OutOfBoundsException

      Adds a component to the grid in the specified area. The area is defined by specifying the upper left corner (column1, row1) and the lower right corner (column2, row2) of the area. The coordinates are zero-based.

      If the area overlaps with any of the existing components already present in the grid, the operation will fail and an GridLayout.OverlapsException is thrown.

      Parameters:
      component - the component to be added, not null.
      column1 - the column of the upper left corner of the area component is supposed to occupy. The leftmost column has index 0.
      row1 - the row of the upper left corner of the area component is supposed to occupy. The topmost row has index 0.
      column2 - the column of the lower right corner of the area ccomponent is supposed to occupy.
      row2 - the row of the lower right corner of the area component is supposed to occupy.
      Throws:
      GridLayout.OverlapsException - if the new component overlaps with any of the components already in the grid.
      GridLayout.OutOfBoundsException - if the cells are outside the grid area.
    • removeComponent

      public void removeComponent(com.vaadin.flow.component.Component component)
      Description copied from interface: ComponentContainer
      Removes the component from this container.
      Specified by:
      removeComponent in interface ComponentContainer
      Overrides:
      removeComponent in class AbstractComponentContainer
      Parameters:
      component - the component to be removed.
    • removeComponent

      public void removeComponent(int column, int row)
      Removes the component specified by its cell coordinates.
      Parameters:
      column - the component's column.
      row - the component's row.
    • removeAllComponents

      public void removeAllComponents()
      Description copied from interface: ComponentContainer
      Removes all components from this container.
      Specified by:
      removeAllComponents in interface ComponentContainer
      Overrides:
      removeAllComponents in class AbstractComponentContainer
    • getComponent

      public com.vaadin.flow.component.Component getComponent(int x, int y)
      Gets the Component at given index.
      Parameters:
      x - The column index, starting from 0 for the leftmost column.
      y - The row index, starting from 0 for the topmost row.
      Returns:
      Component in given cell or null if empty
    • getComponentArea

      public GridLayout.Area getComponentArea(com.vaadin.flow.component.Component component)
      Returns information about the area where given component is laid in the GridLayout.
      Parameters:
      component - the component whose area information is requested.
      Returns:
      an GridLayout.Area object that contains information how the component is laid in the grid.
    • addLayoutClickListener

      public com.vaadin.flow.shared.Registration addLayoutClickListener(LayoutEvents.LayoutClickListener listener)
      Deprecated.
      Not supported. See Classic Component Pack documentation in https://vaadin.com/docs/latest/flow/upgrading/classic-component-pack for mitigation options.
      Specified by:
      addLayoutClickListener in interface LayoutEvents.LayoutClickNotifier
      Parameters:
      listener - The listener to add
      Returns:
      a registration object for removing the listener
      See Also:
      • Registration
    • removeLayoutClickListener

      @Deprecated public void removeLayoutClickListener(LayoutEvents.LayoutClickListener listener)
      Deprecated.
    • setComponentAlignment

      public void setComponentAlignment(com.vaadin.flow.component.Component childComponent, Alignment alignment)
      Description copied from interface: Layout.AlignmentHandler
      Set alignment for one contained component in this layout. Use predefined alignments from Alignment class.

      Example: layout.setComponentAlignment(myComponent, Alignment.TOP_RIGHT);

      Specified by:
      setComponentAlignment in interface Layout.AlignmentHandler
      Parameters:
      childComponent - the component to align within it's layout cell.
      alignment - the Alignment value to be set
    • getComponentAlignment

      public Alignment getComponentAlignment(com.vaadin.flow.component.Component childComponent)
      Description copied from interface: Layout.AlignmentHandler
      Returns the current Alignment of given component.
      Specified by:
      getComponentAlignment in interface Layout.AlignmentHandler
      Returns:
      the Alignment
    • setDefaultComponentAlignment

      public void setDefaultComponentAlignment(Alignment defaultComponentAlignment)
      Description copied from interface: Layout.AlignmentHandler
      Sets the alignment used for new components added to this layout. The default is Alignment.TOP_LEFT.
      Specified by:
      setDefaultComponentAlignment in interface Layout.AlignmentHandler
      Parameters:
      defaultComponentAlignment - The new default alignment
    • getDefaultComponentAlignment

      public Alignment getDefaultComponentAlignment()
      Description copied from interface: Layout.AlignmentHandler
      Returns the alignment used for new components added to this layout.
      Specified by:
      getDefaultComponentAlignment in interface Layout.AlignmentHandler
      Returns:
      The default alignment
    • setMargin

      public void setMargin(boolean enabled)
      Description copied from interface: Layout.MarginHandler
      Enable layout margins. Affects all four sides of the layout. This will tell the client-side implementation to leave extra space around the layout. The client-side implementation decides the actual amount, and it can vary between themes.
      Specified by:
      setMargin in interface Layout.MarginHandler
      Parameters:
      enabled - true if margins should be enabled on all sides, false to disable all margins
    • setMargin

      public void setMargin(MarginInfo marginInfo)
      Description copied from interface: Layout.MarginHandler
      Enable margins for this layout.

      NOTE: This will only affect the space around the components in the layout, not space between the components in the layout. Use Layout.SpacingHandler.setSpacing(boolean) to add space between the components in the layout.

      See the reference manual for more information about CSS rules for defining the size of the margin.

      Specified by:
      setMargin in interface Layout.MarginHandler
      Parameters:
      marginInfo - MarginInfo object containing the new margins.
    • getMargin

      public MarginInfo getMargin()
      Specified by:
      getMargin in interface Layout.MarginHandler
      Returns:
      MarginInfo containing the currently enabled margins.
    • setHideEmptyRowsAndColumns

      public void setHideEmptyRowsAndColumns(boolean hideEmptyRowsAndColumns)
      Sets whether empty rows and columns should be considered as non-existent when rendering or not. If this is set to true then the spacing between multiple empty columns (or rows) will be collapsed.

      The default behavior is to consider all rows and columns as visible

      NOTE that this must be set before the initial rendering takes place. Updating this on the fly is not supported.

      Parameters:
      hideEmptyRowsAndColumns - true to hide empty rows and columns, false to leave them as-is
    • isHideEmptyRowsAndColumns

      public boolean isHideEmptyRowsAndColumns()
      Checks whether empty rows and columns should be considered as non-existent when rendering or not.
      Returns:
      true if empty rows and columns are hidden, false otherwise
      See Also:
    • setRowExpandRatio

      public void setRowExpandRatio(int rowIndex, float ratio)
      Sets the expand-ratio of given row.

      Expand ratio defines how excess space is distributed among rows. Excess space means the space left over from components that are not sized relatively. By default, the excess space is distributed evenly.

      Note, that height of this GridLayout needs to be defined (fixed or relative, as opposed to undefined height) for this method to have any effect.

      Note that checking for relative height for the child components is done on the server so you cannot set a child component to have undefined height on the server and set it to 100% in CSS. You must set it to 100% on the server.

      Parameters:
      rowIndex - The row index, starting from 0 for the topmost row.
      ratio - the expand-ratio
      See Also:
    • getRowExpandRatio

      public float getRowExpandRatio(int rowIndex)
      Returns the expand-ratio of given row.
      Parameters:
      rowIndex - The row index, starting from 0 for the topmost row.
      Returns:
      the expand ratio, 0.0f by default
      See Also:
    • setColumnExpandRatio

      public void setColumnExpandRatio(int colIndex, float ratio)
      Sets the expand-ratio of given column.

      The expand ratio defines how excess space is distributed among columns. Excess space means space that is left over from components that are not sized relatively. By default, the excess space is distributed evenly.

      Note, that the width of this GridLayout needs to be defined (fixed or relative, as opposed to undefined height) for this method to have any effect.

      Note that checking for relative width for the child components is done on the server so you cannot set a child component to have undefined width on the server and set it to 100% in CSS. You must set it to 100% on the server.

      Parameters:
      colIndex - The column index, starting from 0 for the leftmost column.
      ratio - the expand-ratio
      See Also:
    • getColumnExpandRatio

      public float getColumnExpandRatio(int colIndex)
      Returns the expand-ratio of given column.
      Parameters:
      colIndex - The column index, starting from 0 for the leftmost row.
      Returns:
      the expand ratio, 0.0f by default
      See Also:
    • insertRow

      public void insertRow(int index)
      Inserts an empty row at the specified position in the grid.
      Parameters:
      index - Index of the row before which the new row will be inserted. The topmost row has index 0.
    • setColumns

      public void setColumns(int columns)
      Sets the number of columns in the grid. The column count can not be reduced if there are any areas that would be outside of the shrunk grid.
      Parameters:
      columns - the new number of columns in the grid.
    • getColumns

      public int getColumns()
      Get the number of columns in the grid.
      Returns:
      the number of columns in the grid.
    • setRows

      public void setRows(int rows)
      Sets the number of rows in the grid. The number of rows can not be reduced if there are any areas that would be outside of the shrunk grid.
      Parameters:
      rows - the new number of rows in the grid.
    • getRows

      public int getRows()
      Get the number of rows in the grid.
      Returns:
      the number of rows in the grid.
    • getCursorX

      public int getCursorX()
      Gets the current x-position (column) of the cursor.

      The cursor position points the position for the next component that is added without specifying its coordinates (grid cell). When the cursor position is occupied, the next component will be added to first free position after the cursor.

      Returns:
      the grid column the cursor is on, starting from 0.
    • setCursorX

      public void setCursorX(int cursorX) throws IndexOutOfBoundsException
      Sets the current cursor x-position. This is usually handled automatically by GridLayout.
      Parameters:
      cursorX - current cursor x-position.
      Throws:
      IndexOutOfBoundsException - if the cursor is set out of the grid.
    • getCursorY

      public int getCursorY()
      Gets the current y-position (row) of the cursor.

      The cursor position points the position for the next component that is added without specifying its coordinates (grid cell). When the cursor position is occupied, the next component will be added to the first free position after the cursor.

      Returns:
      the grid row the Cursor is on.
    • setCursorY

      public void setCursorY(int cursorY) throws IndexOutOfBoundsException
      Sets the current y-coordinate (row) of the cursor. This is usually handled automatically by GridLayout.
      Parameters:
      cursorY - the row number, starting from 0 for the topmost row.
      Throws:
      IndexOutOfBoundsException - if the cursor is set out of the grid.
    • appendRow

      public void appendRow()
      Inserts an empty row at the end of the grid.
    • removeRow

      public void removeRow(int row)
      Removes a row and all the components in the row.

      Components which span over several rows are removed if the selected row is on the first row of such a component.

      If the last row is removed then all remaining components will be removed and the grid will be reduced to one row. The cursor will be moved to the upper left cell of the grid.

      Parameters:
      row - Index of the row to remove. The topmost row has index 0.
    • space

      public void space()
      Moves the cursor forward by one. If the cursor goes out of the right grid border, it is moved to the first column of the next row. This action will not move the cursor out of the end of the grid.
      See Also:
    • newLine

      public void newLine()
      Forces the next component to be added at the beginning of the next line.

      Sets the cursor column to 0 and increments the cursor row by one.

      By calling this function you can ensure that no more components are added right of the previous component.

      See Also:
    • setSpacing

      public void setSpacing(boolean spacing)
      Description copied from interface: Layout.SpacingHandler
      Enable spacing between child components within this layout.

      NOTE: This will only affect the space between components, not the space around all the components in the layout (i.e. do not confuse this with the cellspacing attribute of a HTML Table). Use Layout.MarginHandler.setMargin(boolean) to add space around the layout.

      See the reference manual for more information about CSS rules for defining the amount of spacing to use.

      Specified by:
      setSpacing in interface Layout.SpacingHandler
      Parameters:
      spacing - true if spacing should be turned on, false if it should be turned off
    • isSpacing

      public boolean isSpacing()
      Specified by:
      isSpacing in interface Layout.SpacingHandler
      Returns:
      true if spacing between child components within this layout is enabled, false otherwise
    • getChildren

      public Stream<com.vaadin.flow.component.Component> getChildren()
      Overrides:
      getChildren in class com.vaadin.flow.component.Component
    • replaceComponent

      public void replaceComponent(com.vaadin.flow.component.Component oldComponent, com.vaadin.flow.component.Component newComponent)
      Description copied from interface: ComponentContainer
      Replaces the component in the container with another one without changing position.

      This method replaces component with another one is such way that the new component overtakes the position of the old component. If the old component is not in the container, the new component is added to the container. If the both component are already in the container, their positions are swapped. Component attach and detach events should be taken care as with add and remove.

      Specified by:
      replaceComponent in interface ComponentContainer
      Parameters:
      oldComponent - the old component that will be replaced.
      newComponent - the new component to be replaced.
    • getComponentCount

      public int getComponentCount()
      Description copied from interface: ComponentContainer
      Gets the number of children this ComponentContainer has
      Specified by:
      getComponentCount in interface ComponentContainer
      Returns:
      The number of child components this container has.
    • iterator

      public Iterator<com.vaadin.flow.component.Component> iterator()
      Description copied from class: AbstractComponentContainer
      Gets the component container iterator for going through all the components in the container.
      Specified by:
      iterator in interface HasComponents
      Specified by:
      iterator in interface Iterable<com.vaadin.flow.component.Component>
      Overrides:
      iterator in class AbstractComponentContainer
      Returns:
      the Iterator of the components inside the container.