Package com.oorian.html.layout

Class SettingsLayout

java.lang.Object
com.oorian.html.Element<SettingsLayout>
com.oorian.html.VisualElement<SettingsLayout>
com.oorian.html.StyledElement<SettingsLayout>
com.oorian.html.layout.PageLayout<SettingsLayout>
com.oorian.html.layout.SettingsLayout
All Implemented Interfaces:
ClientEventListener, MouseClickListener, EventListener
public class SettingsLayout extends PageLayout<SettingsLayout> implements MouseClickListener
A layout for settings and preferences pages with navigation sidebar and content panel.

SettingsLayout provides a standard structure for settings pages, preferences screens, and configuration interfaces. It features a navigation sidebar for categories and a main panel for the settings content.

Structure:

 ┌────────────────────────────────────────────────┐
 │                  Header (optional)             │
 ├──────────────┬─────────────────────────────────┤
 │              │                                 │
 │   Category   │      Settings Panel             │
 │     Nav      │  ┌─────────────────────────┐    │
 │              │  │  Section Title          │    │
 │  • General   │  ├─────────────────────────┤    │
 │  • Account   │  │  Setting 1              │    │
 │  • Privacy   │  │  Setting 2              │    │
 │  • ...       │  │  ...                    │    │
 │              │  └─────────────────────────┘    │
 │              │                                 │
 └──────────────┴─────────────────────────────────┘

Features:

  • Category navigation sidebar
  • Scrollable settings content panel
  • Optional page header
  • Configurable sidebar width
  • Support for dividers between categories

Usage:


 // Basic settings layout
 SettingsLayout layout = new SettingsLayout();
 layout.addCategory(generalNav)
       .addCategory(accountNav)
       .addCategory(privacyNav)
       .content(settingsPanel);

 // With header
 SettingsLayout layout = new SettingsLayout();
 layout.header(new H1("Settings"))
       .addCategory(profileNav)
       .content(profileSettings);

 // Custom sidebar width
 SettingsLayout layout = new SettingsLayout();
 layout.setSidebarWidth(280)
       .addCategory(nav1)
       .content(content1);

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

  • Constructor Details

    • SettingsLayout

      public SettingsLayout()
      Constructs a SettingsLayout with default configuration.

  • Method Details

    • initialize

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

    • header

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

    • addCategory

      public SettingsLayout addCategory(Element<?> category)
      Adds a category navigation item to the sidebar.
      Parameters:
      category - the category element (link, button, etc.)
      Returns:
      this SettingsLayout for method chaining

    • addDivider

      public SettingsLayout addDivider()
      Adds a divider to the sidebar navigation.
      Returns:
      this SettingsLayout for method chaining

    • categories

      public SettingsLayout categories(Element<?>... categories)
      Sets all category navigation items at once.
      Parameters:
      categories - the category elements
      Returns:
      this SettingsLayout for method chaining

    • content

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

    • setSidebarWidth

      public SettingsLayout setSidebarWidth(int width)
      Sets the sidebar width.
      Parameters:
      width - the width in pixels
      Returns:
      this SettingsLayout for method chaining

    • setSidebarWidth

      public SettingsLayout setSidebarWidth(String width)
      Sets the sidebar width.
      Parameters:
      width - the width value (e.g., "240px", "20%", "15rem")
      Returns:
      this SettingsLayout for method chaining

    • setSidebarBackground

      public SettingsLayout setSidebarBackground(String color)
      Sets the sidebar background color.
      Parameters:
      color - the background color
      Returns:
      this SettingsLayout for method chaining

    • setContentBackground

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

    • setHeaderBackground

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

    • setSidebarPadding

      public SettingsLayout setSidebarPadding(int padding)
      Sets padding for the sidebar.
      Parameters:
      padding - the padding in pixels
      Returns:
      this SettingsLayout for method chaining

    • setSidebarPadding

      public SettingsLayout setSidebarPadding(String padding)
      Sets padding for the sidebar.
      Parameters:
      padding - the padding value (e.g., "16px", "1rem")
      Returns:
      this SettingsLayout for method chaining

    • setContentPadding

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

    • setContentPadding

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

    • setHeaderPadding

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

    • setHeaderPadding

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

    • setCategoryGap

      public SettingsLayout setCategoryGap(int gap)
      Sets the gap between category items in the sidebar.
      Parameters:
      gap - the gap in pixels
      Returns:
      this SettingsLayout for method chaining

    • setCategoryGap

      public SettingsLayout setCategoryGap(String gap)
      Sets the gap between category items in the sidebar.
      Parameters:
      gap - the gap value (e.g., "8px", "0.5rem")
      Returns:
      this SettingsLayout for method chaining

    • showSidebarBorder

      public SettingsLayout showSidebarBorder(String color)
      Adds a border to the right side of the sidebar.
      Parameters:
      color - the border color
      Returns:
      this SettingsLayout for method chaining

    • getHeaderPane

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

    • getSidebar

      public Div getSidebar()
      Returns the sidebar for advanced customization.
      Returns:
      the sidebar div

    • getContentPanel

      public Div getContentPanel()
      Returns the content panel for advanced customization.
      Returns:
      the content panel div

    • getMainContainer

      public Div getMainContainer()
      Returns the main container for advanced customization.
      Returns:
      the main container div

    • addSection

      public SettingsLayout addSection(String label, Element<?> content)
      Adds a section with the specified label and content.

      This creates a clickable nav item in the sidebar and adds the content to an internal Deck. Clicking the nav item will show the corresponding content.

      Parameters:
      label - the nav label for this section
      content - the content to display when this section is selected
      Returns:
      this SettingsLayout for method chaining

    • addSection

      public SettingsLayout addSection(String label, String id, Element<?> content)
      Adds a section with the specified label, ID, and content.

      This creates a clickable nav item in the sidebar and adds the content to an internal Deck. Clicking the nav item will show the corresponding content.

      Parameters:
      label - the nav label for this section
      id - optional ID for programmatic access (if null, generated from label)
      content - the content to display when this section is selected
      Returns:
      this SettingsLayout for method chaining

    • showSection

      public SettingsLayout showSection(int index)
      Shows the section at the specified index.
      Parameters:
      index - the section index (0-based)
      Returns:
      this SettingsLayout for method chaining

    • showSection

      public SettingsLayout showSection(String id)
      Shows the section with the specified ID.
      Parameters:
      id - the section ID
      Returns:
      this SettingsLayout for method chaining

    • getActiveSectionIndex

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

    • getSectionCount

      public int getSectionCount()
      Returns the number of sections.
      Returns:
      the section count

    • onEvent

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

    • setNavItemGap

      public SettingsLayout setNavItemGap(int gap)
      Sets the gap between nav items in the sidebar.
      Parameters:
      gap - the gap in pixels
      Returns:
      this SettingsLayout for method chaining

    • setNavItemGap

      public SettingsLayout setNavItemGap(String gap)
      Sets the gap between nav items in the sidebar.
      Parameters:
      gap - the gap value (e.g., "8px", "0.5rem")
      Returns:
      this SettingsLayout for method chaining

    • getNavItems

      public VStack getNavItems()
      Returns the nav items container for customization.
      Returns:
      the nav items VStack

    • getContentDeck

      public Deck getContentDeck()
      Returns the content deck for advanced customization.
      Returns:
      the content Deck