Class FormLayout


public class FormLayout extends PageLayout<FormLayout>
A layout for centered forms with title, form content, and action buttons.

FormLayout provides a clean, centered structure optimized for data entry forms, login pages, registration forms, and other form-centric interfaces. It features optional title/header area, a centered form container, and a footer for action buttons.

Structure:

 ┌──────────────────────────────────────┐
 │                                      │
 │         ┌──────────────┐             │
 │         │    Title     │             │
 │         ├──────────────┤             │
 │         │              │             │
 │         │    Form      │             │
 │         │   Content    │             │
 │         │              │             │
 │         ├──────────────┤             │
 │         │   Actions    │             │
 │         └──────────────┘             │
 │                                      │
 └──────────────────────────────────────┘
 

Features:

  • Centered form container with configurable max width
  • Optional title/header section
  • Flexible form content area
  • Action button footer with alignment options
  • Card-style or flat appearance
  • Responsive centering

Usage:


 // Basic form layout
 FormLayout layout = new FormLayout();
 layout.title(new H2("Login"))
       .form(loginForm)
       .actions(submitBtn, cancelBtn);

 // Custom width
 FormLayout layout = new FormLayout();
 layout.setMaxWidth(600)
       .form(registrationForm)
       .actions(registerBtn);

 // Card style
 FormLayout layout = new FormLayout();
 layout.cardStyle()
       .title(new H3("Contact Us"))
       .form(contactForm)
       .actionsRight(sendBtn);

 // Full viewport centered
 layout.fillViewport();
 
Since:
2025
Version:
1.0
Author:
Marvin P. Warble Jr.
See Also:
  • Constructor Details

    • FormLayout

      public FormLayout()
      Constructs a FormLayout with default configuration.
  • Method Details

    • initialize

      protected void initialize()
      Builds the element tree for the layout.
      Overrides:
      initialize in class StyledElement<FormLayout>
    • title

      public FormLayout title(Element<?> title)
      Sets the title/header content.
      Parameters:
      title - the title element (H1, H2, etc.)
      Returns:
      this FormLayout for method chaining
    • form

      public FormLayout form(Element<?> form)
      Sets the form content.
      Parameters:
      form - the form element or form content container
      Returns:
      this FormLayout for method chaining
    • actions

      public FormLayout actions(Element<?>... actions)
      Adds action buttons with default (start) alignment.
      Parameters:
      actions - the action button elements
      Returns:
      this FormLayout for method chaining
    • actionsRight

      public FormLayout actionsRight(Element<?>... actions)
      Adds action buttons aligned to the right.
      Parameters:
      actions - the action button elements
      Returns:
      this FormLayout for method chaining
    • actionsCenter

      public FormLayout actionsCenter(Element<?>... actions)
      Adds action buttons centered.
      Parameters:
      actions - the action button elements
      Returns:
      this FormLayout for method chaining
    • actionsSpaceBetween

      public FormLayout actionsSpaceBetween(Element<?>... actions)
      Adds action buttons with space between (first left, last right).
      Parameters:
      actions - the action button elements
      Returns:
      this FormLayout for method chaining
    • setMaxWidth

      public FormLayout setMaxWidth(int width)
      Sets the maximum width of the form card.
      Overrides:
      setMaxWidth in class StyledElement<FormLayout>
      Parameters:
      width - the max width in pixels
      Returns:
      this FormLayout for method chaining
    • setMaxWidth

      public FormLayout setMaxWidth(String width)
      Sets the maximum width of the form card.
      Overrides:
      setMaxWidth in class StyledElement<FormLayout>
      Parameters:
      width - the max width value (e.g., "480px", "30rem", "50%")
      Returns:
      this FormLayout for method chaining
    • cardStyle

      public FormLayout cardStyle()
      Applies a card-style appearance with background, shadow, and rounded corners.
      Returns:
      this FormLayout for method chaining
    • setFormPadding

      public FormLayout setFormPadding(int padding)
      Sets padding for the form card.
      Parameters:
      padding - the padding in pixels
      Returns:
      this FormLayout for method chaining
    • setFormPadding

      public FormLayout setFormPadding(String padding)
      Sets padding for the form card.
      Parameters:
      padding - the padding value (e.g., "32px", "2rem")
      Returns:
      this FormLayout for method chaining
    • setFormBackground

      public FormLayout setFormBackground(String color)
      Sets the background color of the form card.
      Parameters:
      color - the background color
      Returns:
      this FormLayout for method chaining
    • setPageBackground

      public FormLayout setPageBackground(String color)
      Sets the background color of the outer container.
      Parameters:
      color - the background color
      Returns:
      this FormLayout for method chaining
    • setTitleSpacing

      public FormLayout setTitleSpacing(int spacing)
      Sets spacing between the title and form content.
      Parameters:
      spacing - the spacing in pixels
      Returns:
      this FormLayout for method chaining
    • setTitleSpacing

      public FormLayout setTitleSpacing(String spacing)
      Sets spacing between the title and form content.
      Parameters:
      spacing - the spacing value (e.g., "24px", "1.5rem")
      Returns:
      this FormLayout for method chaining
    • setActionsSpacing

      public FormLayout setActionsSpacing(int spacing)
      Sets spacing between the form content and actions.
      Parameters:
      spacing - the spacing in pixels
      Returns:
      this FormLayout for method chaining
    • setActionsSpacing

      public FormLayout setActionsSpacing(String spacing)
      Sets spacing between the form content and actions.
      Parameters:
      spacing - the spacing value (e.g., "24px", "1.5rem")
      Returns:
      this FormLayout for method chaining
    • setActionsGap

      public FormLayout setActionsGap(int gap)
      Sets the gap between action buttons.
      Parameters:
      gap - the gap in pixels
      Returns:
      this FormLayout for method chaining
    • setActionsGap

      public FormLayout setActionsGap(String gap)
      Sets the gap between action buttons.
      Parameters:
      gap - the gap value (e.g., "12px", "1rem")
      Returns:
      this FormLayout for method chaining
    • getOuterContainer

      public Div getOuterContainer()
      Returns the outer container for advanced customization.
      Returns:
      the outer container div
    • getFormCard

      public Div getFormCard()
      Returns the form card container for advanced customization.
      Returns:
      the form card div
    • getTitleArea

      public Div getTitleArea()
      Returns the title area for advanced customization.
      Returns:
      the title area div
    • getFormArea

      public Div getFormArea()
      Returns the form content area for advanced customization.
      Returns:
      the form area div
    • getActionsArea

      public Div getActionsArea()
      Returns the actions area for advanced customization.
      Returns:
      the actions area div
    • narrowForm

      public FormLayout narrowForm()
      Applies a narrow form width (380px) - suitable for login forms.
      Returns:
      this FormLayout for method chaining
    • normalForm

      public FormLayout normalForm()
      Applies a normal form width (480px) - the default.
      Returns:
      this FormLayout for method chaining
    • wideForm

      public FormLayout wideForm()
      Applies a wide form width (600px) - suitable for multi-column forms.
      Returns:
      this FormLayout for method chaining
    • extraWideForm

      public FormLayout extraWideForm()
      Applies an extra wide form width (800px) - suitable for complex forms.
      Returns:
      this FormLayout for method chaining
    • loginStyle

      public FormLayout loginStyle()
      Configures the layout for a login form (narrow width, card style).
      Returns:
      this FormLayout for method chaining
    • registrationStyle

      public FormLayout registrationStyle()
      Configures the layout for a registration form (normal width, card style).
      Returns:
      this FormLayout for method chaining
    • flatStyle

      public FormLayout flatStyle()
      Applies a flat style (no card appearance, minimal styling).
      Returns:
      this FormLayout for method chaining
    • compactSpacing

      public FormLayout compactSpacing()
      Applies compact spacing (smaller gaps between elements).
      Returns:
      this FormLayout for method chaining
    • spaciousSpacing

      public FormLayout spaciousSpacing()
      Applies spacious spacing (larger gaps between elements).
      Returns:
      this FormLayout for method chaining