Package com.oorian.html.layout

Class ComposableLayout

java.lang.Object
com.oorian.html.Element<ComposableLayout>
com.oorian.html.VisualElement<ComposableLayout>
com.oorian.html.StyledElement<ComposableLayout>
com.oorian.html.layout.ComposableLayout
public class ComposableLayout extends StyledElement<ComposableLayout>
A flexible slot-based layout system for user-defined layouts.

ComposableLayout allows creating custom layouts by defining named slots and assigning content to them. It uses CSS Grid for flexible positioning of slots.

Use Cases:

  • Custom page layouts with multiple regions
  • Dashboard layouts with configurable panels
  • Template-based layouts
  • Complex layouts that don't fit standard patterns

Usage:


 // Define a custom layout with named slots
 ComposableLayout layout = new ComposableLayout();
 layout.setGridTemplate("'header header' auto 'sidebar main' 1fr 'footer footer' auto / 250px 1fr");

 // Assign content to slots
 layout.slot("header", headerContent);
 layout.slot("sidebar", sidebarContent);
 layout.slot("main", mainContent);
 layout.slot("footer", footerContent);

 // Simple two-column layout
 ComposableLayout twoCol = ComposableLayout.columns(2);
 twoCol.slot("col1", leftContent);
 twoCol.slot("col2", rightContent);

 // Dashboard with custom areas
 ComposableLayout dashboard = new ComposableLayout();
 dashboard.defineArea("stats", 1, 1, 1, 4);  // Row 1, spans 4 columns
 dashboard.defineArea("chart", 2, 1, 1, 2);   // Row 2, spans 2 columns
 dashboard.defineArea("list", 2, 3, 1, 2);    // Row 2, columns 3-4
Since:
2025
Version:
1.0
Author:
Marvin P. Warble Jr.
See Also:

  • Constructor Details

    • ComposableLayout

      public ComposableLayout()
      Constructs an empty ComposableLayout.

    • ComposableLayout

      public ComposableLayout(int columns)
      Constructs a ComposableLayout with the specified number of equal columns.
      Parameters:
      columns - the number of columns

  • Method Details

    • columns

      public static ComposableLayout columns(int columns)
      Creates a ComposableLayout with the specified number of equal columns.
      Parameters:
      columns - the number of columns
      Returns:
      a new ComposableLayout with equal columns

    • rows

      public static ComposableLayout rows(int rows)
      Creates a ComposableLayout with the specified number of rows.
      Parameters:
      rows - the number of rows
      Returns:
      a new ComposableLayout with equal rows

    • setColumns

      public final ComposableLayout setColumns(int columns)
      Sets the number of equal-width columns.
      Parameters:
      columns - the number of columns
      Returns:
      this ComposableLayout for method chaining

    • setRows

      public final ComposableLayout setRows(int rows)
      Sets the number of equal-height rows.
      Parameters:
      rows - the number of rows
      Returns:
      this ComposableLayout for method chaining

    • setGridTemplate

      public final ComposableLayout setGridTemplate(String template)
      Sets the full CSS grid-template property for complex layouts.

      Example: "'header header' auto 'sidebar main' 1fr 'footer footer' auto / 250px 1fr"

      Parameters:
      template - the CSS grid-template value
      Returns:
      this ComposableLayout for method chaining

    • setGridAreas

      public final ComposableLayout setGridAreas(String areas)
      Sets grid-template-areas for named area placement.

      Example: "'header header' 'sidebar main' 'footer footer'"

      Parameters:
      areas - the CSS grid-template-areas value
      Returns:
      this ComposableLayout for method chaining

    • setGridColumns

      public final ComposableLayout setGridColumns(String columns)
      Sets grid-template-columns for column sizing.
      Parameters:
      columns - the CSS grid-template-columns value
      Returns:
      this ComposableLayout for method chaining

    • setGridRows

      public final ComposableLayout setGridRows(String rows)
      Sets grid-template-rows for row sizing.
      Parameters:
      rows - the CSS grid-template-rows value
      Returns:
      this ComposableLayout for method chaining

    • slot

      public ComposableLayout slot(String name, Element<?> content)
      Sets content into a named slot.

      If grid-template-areas is defined, the slot name corresponds to an area name. Otherwise, the slot is positioned using CSS Grid placement properties.

      Parameters:
      name - the slot name (corresponds to grid-area name)
      content - the content to place in the slot
      Returns:
      this ComposableLayout for method chaining

    • defineArea

      public ComposableLayout defineArea(String name, int row, int column)
      Defines a named area at the specified grid position.
      Parameters:
      name - the area name
      row - the starting row (1-based)
      column - the starting column (1-based)
      Returns:
      this ComposableLayout for method chaining

    • defineArea

      public ComposableLayout defineArea(String name, int row, int column, int rowSpan, int colSpan)
      Defines a named area at the specified grid position with span.
      Parameters:
      name - the area name
      row - the starting row (1-based)
      column - the starting column (1-based)
      rowSpan - the number of rows to span
      colSpan - the number of columns to span
      Returns:
      this ComposableLayout for method chaining

    • getSlot

      public Div getSlot(String name)
      Returns the slot container for the given name.
      Parameters:
      name - the slot name
      Returns:
      the slot container, or null if not found

    • hasSlot

      public boolean hasSlot(String name)
      Checks if a slot with the given name exists.
      Parameters:
      name - the slot name
      Returns:
      true if the slot exists

    • removeSlot

      public ComposableLayout removeSlot(String name)
      Removes a slot and its content.
      Parameters:
      name - the slot name
      Returns:
      this ComposableLayout for method chaining

    • setGap

      public final ComposableLayout setGap(int gap)
      Sets the gap between grid cells.
      Overrides:
      setGap in class StyledElement<ComposableLayout>
      Parameters:
      gap - the gap in pixels
      Returns:
      this ComposableLayout for method chaining

    • setGap

      public final ComposableLayout setGap(String gap)
      Sets the gap between grid cells.
      Overrides:
      setGap in class StyledElement<ComposableLayout>
      Parameters:
      gap - the gap value (e.g., "1rem", "16px")
      Returns:
      this ComposableLayout for method chaining

    • setGap

      public final ComposableLayout setGap(int rowGap, int columnGap)
      Sets separate row and column gaps.
      Overrides:
      setGap in class StyledElement<ComposableLayout>
      Parameters:
      rowGap - the vertical gap between rows in pixels
      columnGap - the horizontal gap between columns in pixels
      Returns:
      this ComposableLayout for method chaining

    • autoFit

      public final ComposableLayout autoFit(String minWidth)
      Sets auto-fit columns with a minimum width (responsive grid).
      Parameters:
      minWidth - the minimum column width
      Returns:
      this ComposableLayout for method chaining

    • autoFill

      public final ComposableLayout autoFill(String minWidth)
      Sets auto-fill columns with a minimum width (responsive grid).
      Parameters:
      minWidth - the minimum column width
      Returns:
      this ComposableLayout for method chaining