Package com.oorian.html.layout

Class WizardLayout

java.lang.Object
com.oorian.html.Element<WizardLayout>
com.oorian.html.VisualElement<WizardLayout>
com.oorian.html.StyledElement<WizardLayout>
com.oorian.html.layout.PageLayout<WizardLayout>
com.oorian.html.layout.WizardLayout
All Implemented Interfaces:
ClientEventListener, MouseClickListener, EventListener
public class WizardLayout extends PageLayout<WizardLayout> implements MouseClickListener
A layout for multi-step wizard/stepper interfaces.

WizardLayout provides a structure for guiding users through multi-step processes such as checkout flows, registration wizards, onboarding sequences, and setup processes. It features a progress indicator, step content area, and navigation controls.

Structure:

 ┌──────────────────────────────────────┐
 │           Header (optional)          │
 ├──────────────────────────────────────┤
 │  Step 1  ─── Step 2  ─── Step 3      │  (Progress Bar)
 ├──────────────────────────────────────┤
 │                                      │
 │          Step Content                │
 │                                      │
 │                                      │
 ├──────────────────────────────────────┤
 │    [Back]              [Next]        │  (Navigation)
 └──────────────────────────────────────┘

Features:

  • Progress indicator area for step indicators
  • Flexible step content area
  • Navigation footer with back/next buttons
  • Optional page header
  • Centered or full-width content options

Usage:


 // Basic wizard
 WizardLayout wizard = new WizardLayout();
 wizard.progress(stepIndicator)
       .content(step1Content)
       .navigation(backBtn, nextBtn);

 // With header
 WizardLayout wizard = new WizardLayout();
 wizard.header(new H2("Setup Wizard"))
       .progress(stepIndicator)
       .content(currentStepContent);

 // Centered content
 WizardLayout wizard = new WizardLayout();
 wizard.centerContent()
       .setContentMaxWidth(600)
       .progress(steps)
       .content(formContent)
       .navigation(prevBtn, nextBtn);

 // Full viewport
 wizard.fillViewport();
Since:
2025
Version:
1.0
Author:
Marvin P. Warble Jr.
See Also:

  • Constructor Details

    • WizardLayout

      public WizardLayout()
      Constructs a WizardLayout with default configuration.

  • Method Details

    • initialize

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

    • header

      public WizardLayout header(Element<?> header)
      Sets the header content.
      Parameters:
      header - the header element
      Returns:
      this WizardLayout for method chaining

    • progress

      public WizardLayout progress(Element<?> progress)
      Sets the progress indicator content.
      Parameters:
      progress - the progress indicator element (stepper, breadcrumb, etc.)
      Returns:
      this WizardLayout for method chaining

    • content

      public WizardLayout content(Element<?> content)
      Sets the step content.
      Parameters:
      content - the step content element
      Returns:
      this WizardLayout for method chaining

    • centerContent

      public WizardLayout centerContent()
      Centers the content area horizontally with a max width.
      Returns:
      this WizardLayout for method chaining

    • setContentMaxWidth

      public WizardLayout setContentMaxWidth(int width)
      Sets the maximum width for centered content.
      Parameters:
      width - the max width in pixels
      Returns:
      this WizardLayout for method chaining

    • setContentMaxWidth

      public WizardLayout setContentMaxWidth(String width)
      Sets the maximum width for centered content.
      Parameters:
      width - the max width value (e.g., "800px", "60%")
      Returns:
      this WizardLayout for method chaining

    • setProgressPadding

      public WizardLayout setProgressPadding(int padding)
      Sets padding for the progress area.
      Parameters:
      padding - the padding in pixels
      Returns:
      this WizardLayout for method chaining

    • setProgressPadding

      public WizardLayout setProgressPadding(String padding)
      Sets padding for the progress area.
      Parameters:
      padding - the padding value (e.g., "24px", "1.5rem")
      Returns:
      this WizardLayout for method chaining

    • setContentPadding

      public WizardLayout setContentPadding(int padding)
      Sets padding for the content container.
      Parameters:
      padding - the padding in pixels
      Returns:
      this WizardLayout for method chaining

    • setContentPadding

      public WizardLayout setContentPadding(String padding)
      Sets padding for the content container.
      Parameters:
      padding - the padding value (e.g., "24px", "1.5rem")
      Returns:
      this WizardLayout for method chaining

    • setNavigationPadding

      public WizardLayout setNavigationPadding(int padding)
      Sets padding for the navigation area.
      Parameters:
      padding - the padding in pixels
      Returns:
      this WizardLayout for method chaining

    • setNavigationPadding

      public WizardLayout setNavigationPadding(String padding)
      Sets padding for the navigation area.
      Parameters:
      padding - the padding value (e.g., "16px", "1rem")
      Returns:
      this WizardLayout for method chaining

    • setHeaderPadding

      public WizardLayout setHeaderPadding(int padding)
      Sets padding for the header area.
      Parameters:
      padding - the padding in pixels
      Returns:
      this WizardLayout for method chaining

    • setHeaderPadding

      public WizardLayout setHeaderPadding(String padding)
      Sets padding for the header area.
      Parameters:
      padding - the padding value (e.g., "16px", "1rem")
      Returns:
      this WizardLayout for method chaining

    • setProgressBackground

      public WizardLayout setProgressBackground(String color)
      Sets the progress area background color.
      Parameters:
      color - the background color
      Returns:
      this WizardLayout for method chaining

    • setContentBackground

      public WizardLayout setContentBackground(String color)
      Sets the content area background color.
      Parameters:
      color - the background color
      Returns:
      this WizardLayout for method chaining

    • setNavigationBackground

      public WizardLayout setNavigationBackground(String color)
      Sets the navigation area background color.
      Parameters:
      color - the background color
      Returns:
      this WizardLayout for method chaining

    • setHeaderBackground

      public WizardLayout setHeaderBackground(String color)
      Sets the header area background color.
      Parameters:
      color - the background color
      Returns:
      this WizardLayout for method chaining

    • showNavigationBorder

      public WizardLayout showNavigationBorder(String color)
      Adds a top border to the navigation area.
      Parameters:
      color - the border color
      Returns:
      this WizardLayout for method chaining

    • showProgressBorder

      public WizardLayout showProgressBorder(String color)
      Adds a bottom border to the progress area.
      Parameters:
      color - the border color
      Returns:
      this WizardLayout for method chaining

    • getHeaderPane

      public Div getHeaderPane()
      Returns the header pane for advanced customization.
      Returns:
      the header pane

    • getProgressArea

      public Div getProgressArea()
      Returns the progress area for advanced customization.
      Returns:
      the progress area div

    • getContentContainer

      public Div getContentContainer()
      Returns the content container for advanced customization.
      Returns:
      the content container div

    • getContentArea

      public Div getContentArea()
      Returns the content area for advanced customization.
      Returns:
      the content area div

    • getNavigationArea

      public Div getNavigationArea()
      Returns the navigation area for advanced customization.
      Returns:
      the navigation area div

    • addStep

      public WizardLayout addStep(String label, Element<?> content)
      Adds a step with the specified label and content.

      This creates a clickable step indicator and adds the content to an internal Deck. Clicking the step indicator will show the corresponding content.

      Parameters:
      label - the label for this step
      content - the content to display when this step is active
      Returns:
      this WizardLayout for method chaining

    • addStep

      public WizardLayout addStep(String label, String id, Element<?> content)
      Adds a step with the specified label, ID, and content.

      This creates a clickable step indicator and adds the content to an internal Deck. Clicking the step indicator will show the corresponding content.

      Parameters:
      label - the label for this step
      id - optional ID for programmatic access (if null, generated from label)
      content - the content to display when this step is active
      Returns:
      this WizardLayout for method chaining

    • showStep

      public WizardLayout showStep(int index)
      Shows the step at the specified index.
      Parameters:
      index - the step index (0-based)
      Returns:
      this WizardLayout for method chaining

    • showStep

      public WizardLayout showStep(String id)
      Shows the step with the specified ID.
      Parameters:
      id - the step ID
      Returns:
      this WizardLayout for method chaining

    • nextStep

      public WizardLayout nextStep()
      Advances to the next step.
      Returns:
      this WizardLayout for method chaining

    • previousStep

      public WizardLayout previousStep()
      Returns to the previous step.
      Returns:
      this WizardLayout for method chaining

    • getActiveStepIndex

      public int getActiveStepIndex()
      Returns the currently active step index.
      Returns:
      the active step index, or -1 if no step is active

    • getStepCount

      public int getStepCount()
      Returns the number of steps.
      Returns:
      the step count

    • isFirstStep

      public boolean isFirstStep()
      Checks if the wizard is on the first step.
      Returns:
      true if on the first step

    • isLastStep

      public boolean isLastStep()
      Checks if the wizard is on the last step.
      Returns:
      true if on the last step

    • onEvent

      public void onEvent(MouseClickedEvent event)
      Handles click events on step indicators.
      Specified by:
      onEvent in interface MouseClickListener
      Parameters:
      event - the mouse click event

    • getStepIndicators

      public HStack getStepIndicators()
      Returns the step indicators container for customization.
      Returns:
      the step indicators HStack

    • getStepsDeck

      public Deck getStepsDeck()
      Returns the steps deck for advanced customization.
      Returns:
      the steps Deck