Package com.oorian.html.layout
Class DashboardLayout
java.lang.Object
A layout for analytics dashboards with a stats bar and widget grid.
DashboardLayout provides a structure optimized for data visualization dashboards, monitoring pages, and analytics interfaces. It features a top area for key metrics/stats and a flexible grid area for charts, tables, and other widgets.
Structure:
┌──────────────────────────────────────┐ │ Stat 1 │ Stat 2 │ Stat 3 │... │ (Stats Bar) ├──────────────────────────────────────┤ │ Widget │ Widget │ Widget │ │ │───────────┼───────────┼──────────│ │ │ Widget │ Large Widget │ │ (Widget Grid) │───────────┼───────────┴──────────│ │ │ Widget │ Widget │ Widget │ │ └──────────────────────────────────────┘
Features:
- Top stats bar for key metrics
- Flexible widget grid area
- Optional header for title/actions
- Scrollable content with fixed header
- Configurable grid columns and gaps
Usage:
// Basic dashboard
DashboardLayout dashboard = new DashboardLayout();
dashboard.addStat(userCountWidget)
.addStat(revenueWidget)
.addStat(ordersWidget)
.addWidget(salesChart)
.addWidget(recentOrders)
.addWidget(topProducts);
// With header
DashboardLayout dashboard = new DashboardLayout();
dashboard.header(titleBar)
.setWidgetColumns(3)
.setWidgetGap(24);
// Full viewport
dashboard.setFillViewport();
- Since:
- 2025
- Version:
- 1.0
- Author:
- Marvin P. Warble Jr.
- See Also:
-
Constructor Summary
Constructors -
Method Summary
Modifier and TypeMethodDescriptionAdds a stat widget to the stats bar.Adds a widget to the widget grid.Returns the header pane for advanced customization.Returns the scroll container for advanced customization.Returns the stats bar for advanced customization.Returns the widget area for advanced customization.Sets the header content.protected voidBuilds the element tree for the layout.Configures a compact dashboard with 2 columns and tight spacing.Applies compact spacing (smaller gaps between elements).setContentPadding(int padding) Sets padding for the content area.setContentPadding(String padding) Sets padding for the content area.Configures a four-column widget grid.setHeaderBackground(String color) Sets the header background color.setSectionSpacing(int spacing) Sets the spacing between stats bar and widget area.setSectionSpacing(String spacing) Sets the spacing between stats bar and widget area.Configures a single-column widget layout.Applies spacious spacing (larger gaps between elements).Configures a standard dashboard with 3 columns and normal spacing.setStatsGap(int gap) Sets the gap between stat cards.setStatsGap(String gap) Sets the gap between stat cards.Configures a three-column widget grid (the default).Configures a two-column widget grid.Configures a wide dashboard with 4 columns.setWidgetColumns(int columns) Sets the number of columns in the widget grid.setWidgetGap(int gap) Sets the gap between widgets.setWidgetGap(String gap) Sets the gap between widgets.Sets multiple stat widgets at once.Adds multiple widgets at once.Methods inherited from class com.oorian.html.layout.PageLayout
createPane, createPane, setBackgroundColor, setFillParent, setFillViewport, setMinHeightMethods inherited from class com.oorian.html.StyledElement
addClass, addStyle, addStyle, addStyleAttribute, addTransition, animate, clearTransitions, getActiveStyle, getCssClass, getDisabledStyle, getFocusStyle, getFocusVisibleStyle, getHoverStyle, getHtml, getStyle, getStyleAttribute, hidden, hide, isDisplayed, isTransitionForwardActive, onHide, onRemovedFromPage, onShow, removeClass, setActiveStyle, setAlignContent, setAlignContent, setAlignItems, setAlignItems, setAlignSelf, setAlignSelf, setAnimation, setAnimationDelay, setAnimationDelay, setAnimationDelay, setAnimationDirection, setAnimationDirection, setAnimationDuration, setAnimationDuration, setAnimationDuration, setAnimationFillMode, setAnimationFillMode, setAnimationIterationCount, setAnimationIterationCount, setAnimationIterationCount, setAnimationName, setAnimationPlayState, setAnimationPlayState, setAnimationTimingFunction, setAnimationTimingFunction, setAnimationTimingFunction, setAnimationTimingFunction, setBackdropFilter, setBackdropFilter, setBackfaceVisibility, setBackfaceVisibility, setBackground, setBackground, setBackgroundAttachment, setBackgroundAttachment, setBackgroundBlendMode, setBackgroundBlendMode, setBackgroundClip, setBackgroundClip, setBackgroundColor, setBackgroundColor, setBackgroundImage, setBackgroundImage, setBackgroundOrigin, setBackgroundOrigin, setBackgroundPosition, setBackgroundPosition, setBackgroundPosition, setBackgroundPosition, setBackgroundPosition, setBackgroundRepeat, setBackgroundRepeat, setBackgroundSize, setBackgroundSize, setBackgroundSize, setBackgroundSize, setBackgroundSize, setBlur, setBorder, setBorder, setBorder, setBorder, setBorder, setBorder, setBorder, setBorder, setBorder, setBorderBottom, setBorderBottom, setBorderBottom, setBorderBottom, setBorderBottom, setBorderBottom, setBorderBottom, setBorderBottom, setBorderBottomColor, setBorderBottomColor, setBorderBottomLeftRadius, setBorderBottomLeftRadius, setBorderBottomLeftRadius, setBorderBottomRightRadius, setBorderBottomRightRadius, setBorderBottomRightRadius, setBorderBottomStyle, setBorderBottomStyle, setBorderBottomWidth, setBorderBottomWidth, setBorderBottomWidth, setBorderBottomWidth, setBorderColor, setBorderColor, setBorderColor, setBorderColor, setBorderImage, setBorderImage, setBorderImageOutset, setBorderImageRepeat, setBorderImageSlice, setBorderImageSource, setBorderImageWidth, setBorderLeft, setBorderLeft, setBorderLeft, setBorderLeft, setBorderLeft, setBorderLeft, setBorderLeft, setBorderLeft, setBorderLeftColor, setBorderLeftColor, setBorderLeftStyle, setBorderLeftStyle, setBorderLeftWidth, setBorderLeftWidth, setBorderLeftWidth, setBorderLeftWidth, setBorderRadius, setBorderRadius, setBorderRadius, setBorderRadius, setBorderRadius, setBorderRadius, setBorderRight, setBorderRight, setBorderRight, setBorderRight, setBorderRight, setBorderRight, setBorderRight, setBorderRight, setBorderRightColor, setBorderRightColor, setBorderRightStyle, setBorderRightStyle, setBorderRightWidth, setBorderRightWidth, setBorderRightWidth, setBorderRightWidth, setBorderStyle, setBorderStyle, setBorderTop, setBorderTop, setBorderTop, setBorderTop, setBorderTop, setBorderTop, setBorderTop, setBorderTop, setBorderTopColor, setBorderTopColor, setBorderTopLeftRadius, setBorderTopLeftRadius, setBorderTopLeftRadius, setBorderTopRightRadius, setBorderTopRightRadius, setBorderTopRightRadius, setBorderTopStyle, setBorderTopStyle, setBorderTopWidth, setBorderTopWidth, setBorderTopWidth, setBorderTopWidth, setBorderWidth, setBorderWidth, setBorderWidth, setBorderWidth, setBorderWidth, setBorderWidth, setBorderWidth, setBottom, setBottom, setBottom, setBoxShadow, setBoxShadow, setBoxShadow, setBoxShadow, setBoxShadow, setBoxSizing, setBoxSizing, setBreakAfter, setBreakBefore, setBreakInside, setBrightness, setClass, setClear, setClear, setClip, setClipPath, setClipPath, setColGap, setColGap, setColor, setColor, setColumnCount, setColumnCount, setColumnFill, setColumnFill, setColumnGap, setColumnRule, setColumnRuleColor, setColumnRuleColor, setColumnRuleStyle, setColumnRuleStyle, setColumnRuleWidth, setColumnRuleWidth, setColumns, setColumns, setColumns, setColumnSpan, setColumnWidth, setColumnWidth, setColumnWidth, setContrast, setCounterIncrement, setCounterReset, setCursor, setCursor, setDirection, setDirection, setDisabledStyle, setDisplay, setDisplay, setFilter, setFilter, setFilterOpacity, setFlex, setFlexBasis, setFlexDirection, setFlexDirection, setFlexFlow, setFlexGrow, setFlexGrow, setFlexShrink, setFlexShrink, setFlexWrap, setFlexWrap, setFloat, setFloat, setFocusStyle, setFocusVisibleStyle, setFont, setFont, setFont, setFont, setFont, setFont, setFont, setFont, setFont, setFont, setFont, setFont, setFontFace, setFontFamily, setFontFamily, setFontFeatureSettings, setFontKerning, setFontLanguageOverride, setFontSize, setFontSize, setFontSize, setFontSizeAdjust, setFontStretch, setFontStretch, setFontStyle, setFontStyle, setFontSynthesis, setFontVariant, setFontVariant, setFontVariantAlternates, setFontVariantCaps, setFontVariantEastAsian, setFontVariantLigatures, setFontVariantNumeric, setFontVariantPosition, setFontWeight, setFontWeight, setGap, setGap, setGap, setGap, setGrayscale, setHangingPunctuation, setHangingPunctuation, setHeight, setHeight, setHeight, setHoverStyle, setHueRotate, setHyphens, setImageOrientation, setImageRendering, setImageResolution, setImeMode, setInvert, setJustifyContent, setJustifyContent, setKeyFrames, setLeft, setLeft, setLeft, setLetterSpacing, setLetterSpacing, setLetterSpacing, setLetterSpacing, setLineBreak, setLineHeight, setLineHeight, setLineHeight, setLineHeight, setMargin, setMargin, setMargin, setMargin, setMargin, setMarginBottom, setMarginBottom, setMarginBottom, setMarginLeft, setMarginLeft, setMarginLeft, setMarginRight, setMarginRight, setMarginRight, setMarginTop, setMarginTop, setMarginTop, setMark, setMarkAfter, setMarkBefore, setMarks, setMarqueeDirection, setMarqueePlayCount, setMarqueeSpeed, setMarqueeStyle, setMask, setMaskType, setMaxHeight, setMaxHeight, setMaxHeight, setMaxHeightToWindowHeight, setMaxWidth, setMaxWidth, setMaxWidth, setMaxWidthToWindowWidth, setMinHeight, setMinHeight, setMinHeightToWindowHeight, setMinWidth, setMinWidth, setMinWidth, setMinWidthToWindowWidth, setNavDown, setNavIndex, setNavIndex, setNavLeft, setNavRight, setNavUp, setObjectFit, setObjectPosition, setOnClickNavigateBack, setOnClickNavigateBack, setOnClickNavigateBack, setOnClickNavigateForward, setOnClickNavigateForward, setOnClickNavigateForward, setOnClickNavigateTo, setOnDblClick, setOnDblClickChange, setOpacity, setOpacity, setOrder, setOrder, setOrphans, setOutline, setOutline, setOutline, setOutline, setOutlineColor, setOutlineColor, setOutlineOffset, setOutlineOffset, setOutlineOffset, setOutlineStyle, setOutlineStyle, setOutlineWidth, setOutlineWidth, setOutlineWidth, setOutlineWidth, setOverflow, setOverflow, setOverflow, setOverflowWrap, setOverflowX, setOverflowX, setOverflowY, setOverflowY, setPadding, setPadding, setPadding, setPadding, setPadding, setPadding, setPadding, setPadding, setPaddingBottom, setPaddingBottom, setPaddingBottom, setPaddingLeft, setPaddingLeft, setPaddingLeft, setPaddingRight, setPaddingRight, setPaddingRight, setPaddingTop, setPaddingTop, setPaddingTop, setPageBreakAfter, setPageBreakAfter, setPageBreakBefore, setPageBreakBefore, setPageBreakInside, setPageBreakInside, setPerspective, setPerspective, setPerspective, setPerspectiveOrigin, setPerspectiveOrigin, setPerspectiveOrigin, setPerspectiveOrigin, setPhonemes, setPosition, setPosition, setPosition, setPosition, setPosition, setQuotes, setResize, setResize, setResizeToWindowHeight, setResizeToWindowHeight, setResizeToWindowWidth, setRest, setRestAfter, setRestBefore, setRight, setRight, setRight, setRotate, setRotate, setRowGap, setRowGap, setSaturate, setScale, setScale, setSepia, setShow, setSize, setSize, setSize, setSkewX, setSkewY, setStyle, setStyle, setTabSize, setTabSize, setTabSize, setTabSize, setTextAlign, setTextAlign, setTextAlignLast, setTextAlignLast, setTextCombineUpright, setTextCombineWeight, setTextDecoration, setTextDecoration, setTextDecorationColor, setTextDecorationColor, setTextDecorationLine, setTextDecorationLine, setTextDecorationStyle, setTextDecorationStyle, setTextIndent, setTextIndent, setTextIndent, setTextIndent, setTextJustify, setTextJustify, setTextOrientation, setTextOverflow, setTextOverflow, setTextSelectDisabled, setTextShadow, setTextShadow, setTextShadow, setTextShadow, setTextShadow, setTextTransform, setTextTransform, setTextUnderlinePosition, setTop, setTop, setTop, setTransform, setTransform, setTransformOrigin, setTransformOrigin, setTransformOrigin, setTransformOrigin, setTransformOrigin, setTransformStyle, setTransformStyle, setTransition, setTransitionDelay, setTransitionDelay, setTransitionDelay, setTransitionDuration, setTransitionDuration, setTransitionDuration, setTransitionProperty, setTransitionTimingFunction, setTransitionTimingFunction, setTransitionTimingFunction, setTransitionTimingFunction, setTranslateX, setTranslateY, setTranslateZ, setUnicodeBidi, setUnicodeBidi, setVerticalAlign, setVerticalAlign, setVisibility, setVisibility, setVoiceBalance, setVoiceDuration, setVoicePitch, setVoicePitchRange, setVoiceRate, setVoiceStress, setVoiceVolume, setWhiteSpace, setWhiteSpace, setWidows, setWidth, setWidth, setWidth, setWordBreak, setWordBreak, setWordSpacing, setWordSpacing, setWordSpacing, setWordSpacing, setWordWrap, setWordWrap, setWritingMode, setZIndex, setZIndex, show, shown, stopAnimation, transitionForward, transitionForward, transitionReverse, transitionReverse, updateStyle, updateStyle, updateStyleIfChangedMethods inherited from class com.oorian.html.VisualElement
clearOnClick, click, disable, enable, getAccessKey, getAutoCapitalize, getEnterKeyHint, getInputMode, getPopover, getRole, getTabIndex, getTitle, isAutoFocus, isContentEditable, isDisabled, isDraggable, isHidden, isInert, isSpellCheck, onDisabled, onEnabled, setAccessKey, setAriaAtomic, setAriaBusy, setAriaChecked, setAriaCheckedMixed, setAriaControls, setAriaCurrent, setAriaDescribedBy, setAriaDisabled, setAriaErrorMessage, setAriaExpanded, setAriaHasPopup, setAriaHasPopup, setAriaHidden, setAriaInvalid, setAriaLabel, setAriaLabelledBy, setAriaLevel, setAriaLive, setAriaModal, setAriaOwns, setAriaPressed, setAriaRequired, setAriaSelected, setAriaValueRange, setAriaValueText, setAutoCapitalize, setAutoFocus, setConsumeEvent, setContentEditable, setDisabled, setDraggable, setDropAllowed, setEnterKeyHint, setFocus, setHidden, setInert, setInputMode, setOnAnimationCancel, setOnAnimationEnd, setOnAnimationIteration, setOnAnimationStart, setOnAuxClick, setOnBeforeInput, setOnBeforeToggle, setOnBlur, setOnChange, setOnClick, setOnClickChange, setOnCompositionEnd, setOnCompositionStart, setOnCompositionUpdate, setOnContextMenu, setOnCopy, setOnCut, setOnDocumentResize, setOnFocus, setOnFocusIn, setOnFocusOut, setOnFormData, setOnGotPointerCapture, setOnInput, setOnInvalid, setOnKeyDown, setOnKeyPressed, setOnKeyUp, setOnLostPointerCapture, setOnMouseDown, setOnMouseEnter, setOnMouseLeave, setOnMouseMove, setOnMouseOut, setOnMouseOutChangeClass, setOnMouseOutChangeStyle, setOnMouseOutChangeStyle, setOnMouseOver, setOnMouseOverChangeClass, setOnMouseOverChangeStyle, setOnMouseOverChangeStyle, setOnMouseOverShow, setOnMouseUp, setOnPageLoad, setOnPaste, setOnPointerCancel, setOnPointerDown, setOnPointerEnter, setOnPointerLeave, setOnPointerMove, setOnPointerOut, setOnPointerOver, setOnPointerUp, setOnResize, setOnScroll, setOnScrollEnd, setOnSelect, setOnSelectionChange, setOnSelectStart, setOnToggle, setOnTouchCancel, setOnTouchEnd, setOnTouchMove, setOnTouchStart, setOnTransitionCancel, setOnTransitionEnd, setOnTransitionRun, setOnTransitionStart, setOnWheel, setOnWindowResize, setPopover, setRole, setRole, setSpellCheck, setTabIndex, setTitle, setTooltipMethods inherited from class com.oorian.html.Element
addAttribute, addAttribute, addAttribute, addAttribute, addElement, addLineBreak, addLineOfText, addLineOfText, addLineOfText, addParagraph, addParagraph, addSpacer, addText, addText, addText, addText, assignId, containsElement, containsElement, create, dispatchEvent, dispatchEvent, dispatchEvent, dispatchEvent, equals, excludeId, executeJs, executeJs, executeJs, getAccept, getAllElements, getAncestor, getAttribute, getAttributes, getComponent, getDir, getElement, getElementById, getElementCount, getElementCount, getElements, getElements, getElementsByComponentName, getElementsByTagName, getHtml, getId, getInnerHtml, getInnerHtml, getIs, getItemId, getItemProp, getItemRef, getItemType, getLang, getNextSibling, getPage, getParent, getPart, getPrevSibling, getSlot, getTagName, getTextContent, getUrl, hasAttribute, hasElements, insertElement, isChildOf, isClosedTag, isCreated, isDescendantOf, isDescendantOf, isInitialized, isItemScope, isTranslate, onCallback, onCreated, onElementAdded, onElementRemoved, onHashChange, onHidden, onInitialized, onJsReturn, onPageLoaded, onPageUnloaded, onRefresh, onShown, onUpdated, onUserEvent, prewrite, recreate, refresh, refresh, registerAddition, registerListener, registerListener, registerListener, registerListener, registerListener, registerListener, registerListener, registerSubtraction, registerUpdate, removeAllElements, removeAttribute, removeAttribute, removeElement, removeElement, removeFromParent, requestCallback, requestCallback, requestCallback, requestCallback, resetId, scrollTo, scrollToBottom, scrollToTop, self, sendCommand, sendUpdate, setAccept, setComponent, setDir, setDir, setElement, setId, setIs, setItemId, setItemProp, setItemRef, setItemScope, setItemType, setLang, setOnError, setOnLoad, setPage, setParent, setPart, setSlot, setTagName, setText, setText, setText, setText, setTranslate, toString, unregisterListener, update, updateAttributes
-
Constructor Details
-
DashboardLayout
public DashboardLayout()Constructs a DashboardLayout with default configuration.
-
-
Method Details
-
initialize
protected void initialize()Builds the element tree for the layout.- Overrides:
initializein classStyledElement<DashboardLayout>
-
header
Sets the header content.- Parameters:
header- the header element (title, actions, etc.)- Returns:
- this DashboardLayout for method chaining
-
addStat
Adds a stat widget to the stats bar.- Parameters:
stat- the stat widget element- Returns:
- this DashboardLayout for method chaining
-
stats
Sets multiple stat widgets at once.- Parameters:
stats- the stat widget elements- Returns:
- this DashboardLayout for method chaining
-
addWidget
Adds a widget to the widget grid.- Parameters:
widget- the widget element- Returns:
- this DashboardLayout for method chaining
-
setWidgetColumns
Sets the number of columns in the widget grid.- Parameters:
columns- the number of columns- Returns:
- this DashboardLayout for method chaining
-
setWidgetGap
Sets the gap between widgets.- Parameters:
gap- the gap in pixels- Returns:
- this DashboardLayout for method chaining
-
setWidgetGap
Sets the gap between widgets.- Parameters:
gap- the gap value (e.g., "24px", "1.5rem")- Returns:
- this DashboardLayout for method chaining
-
setStatsGap
Sets the gap between stat cards.- Parameters:
gap- the gap in pixels- Returns:
- this DashboardLayout for method chaining
-
setStatsGap
Sets the gap between stat cards.- Parameters:
gap- the gap value (e.g., "16px", "1rem")- Returns:
- this DashboardLayout for method chaining
-
setContentPadding
Sets padding for the content area.- Parameters:
padding- the padding in pixels- Returns:
- this DashboardLayout for method chaining
-
setContentPadding
Sets padding for the content area.- Parameters:
padding- the padding value (e.g., "24px", "1.5rem")- Returns:
- this DashboardLayout for method chaining
-
setSectionSpacing
Sets the spacing between stats bar and widget area.- Parameters:
spacing- the spacing in pixels- Returns:
- this DashboardLayout for method chaining
-
setSectionSpacing
Sets the spacing between stats bar and widget area.- Parameters:
spacing- the spacing value (e.g., "24px", "2rem")- Returns:
- this DashboardLayout for method chaining
-
setHeaderBackground
Sets the header background color.- Parameters:
color- the background color- Returns:
- this DashboardLayout for method chaining
-
getHeaderPane
Returns the header pane for advanced customization.- Returns:
- the header pane
-
getStatsBar
Returns the stats bar for advanced customization.- Returns:
- the stats bar div
-
getWidgetArea
Returns the widget area for advanced customization.- Returns:
- the widget area div
-
getScrollContainer
Returns the scroll container for advanced customization.- Returns:
- the scroll container div
-
setTwoColumnGrid
Configures a two-column widget grid.- Returns:
- this DashboardLayout for method chaining
-
setThreeColumnGrid
Configures a three-column widget grid (the default).- Returns:
- this DashboardLayout for method chaining
-
setFourColumnGrid
Configures a four-column widget grid.- Returns:
- this DashboardLayout for method chaining
-
setSingleColumn
Configures a single-column widget layout.- Returns:
- this DashboardLayout for method chaining
-
setCompactSpacing
Applies compact spacing (smaller gaps between elements).- Returns:
- this DashboardLayout for method chaining
-
setSpaciousSpacing
Applies spacious spacing (larger gaps between elements).- Returns:
- this DashboardLayout for method chaining
-
setCompactDashboard
Configures a compact dashboard with 2 columns and tight spacing.- Returns:
- this DashboardLayout for method chaining
-
setStandardDashboard
Configures a standard dashboard with 3 columns and normal spacing.- Returns:
- this DashboardLayout for method chaining
-
setWideDashboard
Configures a wide dashboard with 4 columns.- Returns:
- this DashboardLayout for method chaining
-
widgets
Adds multiple widgets at once.- Parameters:
widgets- the widget elements to add- Returns:
- this DashboardLayout for method chaining
-