Package com.oorian.html.layout

Class MasterDetailLayout

java.lang.Object
com.oorian.html.Element<MasterDetailLayout>
com.oorian.html.VisualElement<MasterDetailLayout>
com.oorian.html.StyledElement<MasterDetailLayout>
com.oorian.html.layout.PageLayout<MasterDetailLayout>
com.oorian.html.layout.MasterDetailLayout
All Implemented Interfaces:
ClientEventListener, MouseClickListener, EventListener
public class MasterDetailLayout extends PageLayout<MasterDetailLayout> implements MouseClickListener
A two-pane layout with a master list/tree and a detail view.

MasterDetailLayout implements the classic master-detail pattern used in CRUD screens, email clients, file managers, and record browsers. The master pane typically shows a list or tree, and selecting an item updates the detail pane.

Structure:

 ┌──────────────┬────────────────────────┐
 │              │                        │
 │    Master    │        Detail          │
 │   (List)     │       (View)           │
 │              │                        │
 │              │                        │
 └──────────────┴────────────────────────┘

Features:

  • Horizontal or vertical split
  • Configurable master pane width/height
  • Master on left, right, top, or bottom
  • Optional border/divider between panes
  • Responsive collapse on mobile

Usage:


 // Basic master-detail (master on left)
 MasterDetailLayout layout = new MasterDetailLayout();
 layout.master(studentList)
       .detail(studentDetails);

 // Custom master width
 MasterDetailLayout layout = new MasterDetailLayout();
 layout.setMasterWidth(350)
       .master(recordList)
       .detail(recordForm);

 // Master on right
 MasterDetailLayout rightMaster = MasterDetailLayout.withMasterOnRight();
 rightMaster.master(propertiesPanel)
            .detail(editor);

 // Vertical split (master on top)
 MasterDetailLayout vertical = MasterDetailLayout.vertical();
 vertical.setMasterHeight(200)
         .master(messageList)
         .detail(messagePreview);

 // With divider
 layout.showDivider()
       .setDividerColor("#e0e0e0");
Since:
2025
Version:
1.0
Author:
Marvin P. Warble Jr.
See Also:

  • Constructor Details

    • MasterDetailLayout

      public MasterDetailLayout()
      Constructs a horizontal MasterDetailLayout with master on left.

    • MasterDetailLayout

      public MasterDetailLayout(MasterDetailLayout.Orientation orientation, MasterDetailLayout.MasterPosition masterPosition)
      Constructs a MasterDetailLayout with the specified configuration.
      Parameters:
      orientation - the layout orientation (HORIZONTAL or VERTICAL)
      masterPosition - where the master pane is positioned (START or END)

  • Method Details

    • initialize

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

    • withMasterOnRight

      public static MasterDetailLayout withMasterOnRight()
      Creates a MasterDetailLayout with master pane on the right.
      Returns:
      a new MasterDetailLayout with master on right

    • vertical

      public static MasterDetailLayout vertical()
      Creates a vertical MasterDetailLayout with master pane on top.
      Returns:
      a new vertical MasterDetailLayout

    • verticalMasterOnBottom

      public static MasterDetailLayout verticalMasterOnBottom()
      Creates a vertical MasterDetailLayout with master pane on bottom.
      Returns:
      a new vertical MasterDetailLayout with master on bottom

    • master

      public MasterDetailLayout master(Element<?> content)
      Sets the master pane content.
      Parameters:
      content - the master content element (list, tree, etc.)
      Returns:
      this MasterDetailLayout for method chaining

    • detail

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

    • setMasterWidth

      public MasterDetailLayout setMasterWidth(int width)
      Sets the master pane width (for horizontal layout).
      Parameters:
      width - the width in pixels
      Returns:
      this MasterDetailLayout for method chaining

    • setMasterWidth

      public MasterDetailLayout setMasterWidth(String width)
      Sets the master pane width (for horizontal layout).
      Parameters:
      width - the width value (e.g., "300px", "30%", "20rem")
      Returns:
      this MasterDetailLayout for method chaining

    • setMasterHeight

      public MasterDetailLayout setMasterHeight(int height)
      Sets the master pane height (for vertical layout).
      Parameters:
      height - the height in pixels
      Returns:
      this MasterDetailLayout for method chaining

    • setMasterHeight

      public MasterDetailLayout setMasterHeight(String height)
      Sets the master pane height (for vertical layout).
      Parameters:
      height - the height value (e.g., "250px", "40%")
      Returns:
      this MasterDetailLayout for method chaining

    • showDivider

      public MasterDetailLayout showDivider()
      Shows the divider between master and detail panes.
      Returns:
      this MasterDetailLayout for method chaining

    • hideDivider

      public MasterDetailLayout hideDivider()
      Hides the divider between panes.
      Returns:
      this MasterDetailLayout for method chaining

    • setDividerColor

      public MasterDetailLayout setDividerColor(String color)
      Sets the divider color.
      Parameters:
      color - the divider color
      Returns:
      this MasterDetailLayout for method chaining

    • setDividerThickness

      public MasterDetailLayout setDividerThickness(int thickness)
      Sets the divider thickness.
      Parameters:
      thickness - the thickness in pixels
      Returns:
      this MasterDetailLayout for method chaining

    • setGap

      public MasterDetailLayout setGap(int gap)
      Sets the gap between master and detail (alternative to divider).
      Overrides:
      setGap in class StyledElement<MasterDetailLayout>
      Parameters:
      gap - the gap in pixels
      Returns:
      this MasterDetailLayout for method chaining

    • setGap

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

    • setMasterBackground

      public MasterDetailLayout setMasterBackground(String color)
      Sets the master pane background color.
      Parameters:
      color - the background color
      Returns:
      this MasterDetailLayout for method chaining

    • setDetailBackground

      public MasterDetailLayout setDetailBackground(String color)
      Sets the detail pane background color.
      Parameters:
      color - the background color
      Returns:
      this MasterDetailLayout for method chaining

    • setMasterPadding

      public MasterDetailLayout setMasterPadding(int padding)
      Sets padding for the master pane.
      Parameters:
      padding - the padding in pixels
      Returns:
      this MasterDetailLayout for method chaining

    • setMasterPadding

      public MasterDetailLayout setMasterPadding(String padding)
      Sets padding for the master pane.
      Parameters:
      padding - the padding value (e.g., "1rem", "16px")
      Returns:
      this MasterDetailLayout for method chaining

    • setDetailPadding

      public MasterDetailLayout setDetailPadding(int padding)
      Sets padding for the detail pane.
      Parameters:
      padding - the padding in pixels
      Returns:
      this MasterDetailLayout for method chaining

    • setDetailPadding

      public MasterDetailLayout setDetailPadding(String padding)
      Sets padding for the detail pane.
      Parameters:
      padding - the padding value (e.g., "1rem", "24px")
      Returns:
      this MasterDetailLayout for method chaining

    • getMasterPane

      public Div getMasterPane()
      Returns the master pane for advanced customization.
      Returns:
      the master pane

    • getDetailPane

      public Div getDetailPane()
      Returns the detail pane for advanced customization.
      Returns:
      the detail pane

    • getDivider

      public Div getDivider()
      Returns the divider element for customization.
      Returns:
      the divider element

    • addItem

      public MasterDetailLayout addItem(String label, Element<?> detail)
      Adds an item with the specified label and detail content.

      This creates a clickable item in the master pane and adds the detail content to an internal Deck. Clicking the item will show the corresponding detail view.

      Parameters:
      label - the label for this item
      detail - the detail content to display when this item is selected
      Returns:
      this MasterDetailLayout for method chaining

    • addItem

      public MasterDetailLayout addItem(String label, String id, Element<?> detail)
      Adds an item with the specified label, ID, and detail content.

      This creates a clickable item in the master pane and adds the detail content to an internal Deck. Clicking the item will show the corresponding detail view.

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

    • selectItem

      public MasterDetailLayout selectItem(int index)
      Selects the item at the specified index.
      Parameters:
      index - the item index (0-based)
      Returns:
      this MasterDetailLayout for method chaining

    • selectItem

      public MasterDetailLayout selectItem(String id)
      Selects the item with the specified ID.
      Parameters:
      id - the item ID
      Returns:
      this MasterDetailLayout for method chaining

    • getSelectedItemIndex

      public int getSelectedItemIndex()
      Returns the currently selected item index.
      Returns:
      the selected item index, or -1 if no item is selected

    • getItemCount

      public int getItemCount()
      Returns the number of items.
      Returns:
      the item count

    • onEvent

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

    • setItemGap

      public MasterDetailLayout setItemGap(int gap)
      Sets the gap between items in the master pane.
      Parameters:
      gap - the gap in pixels
      Returns:
      this MasterDetailLayout for method chaining

    • setItemGap

      public MasterDetailLayout setItemGap(String gap)
      Sets the gap between items in the master pane.
      Parameters:
      gap - the gap value (e.g., "8px", "0.5rem")
      Returns:
      this MasterDetailLayout for method chaining

    • getMasterItems

      public VStack getMasterItems()
      Returns the master items container for customization.
      Returns:
      the master items VStack

    • getDetailDeck

      public Deck getDetailDeck()
      Returns the detail deck for advanced customization.
      Returns:
      the detail Deck