Package com.oorian.html.layout
Class FormLayout
java.lang.Object
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 Summary
Constructors -
Method Summary
Modifier and TypeMethodDescriptionAdds action buttons with default (start) alignment.actionsCenter(Element<?>... actions) Adds action buttons centered.actionsRight(Element<?>... actions) Adds action buttons aligned to the right.actionsSpaceBetween(Element<?>... actions) Adds action buttons with space between (first left, last right).Applies a card-style appearance with background, shadow, and rounded corners.Applies compact spacing (smaller gaps between elements).Applies an extra wide form width (800px) - suitable for complex forms.Applies a flat style (no card appearance, minimal styling).Sets the form content.Returns the actions area for advanced customization.Returns the form content area for advanced customization.Returns the form card container for advanced customization.Returns the outer container for advanced customization.Returns the title area for advanced customization.protected voidBuilds the element tree for the layout.Configures the layout for a login form (narrow width, card style).Applies a narrow form width (380px) - suitable for login forms.Applies a normal form width (480px) - the default.Configures the layout for a registration form (normal width, card style).setActionsGap(int gap) Sets the gap between action buttons.setActionsGap(String gap) Sets the gap between action buttons.setActionsSpacing(int spacing) Sets spacing between the form content and actions.setActionsSpacing(String spacing) Sets spacing between the form content and actions.setFormBackground(String color) Sets the background color of the form card.setFormPadding(int padding) Sets padding for the form card.setFormPadding(String padding) Sets padding for the form card.setMaxWidth(int width) Sets the maximum width of the form card.setMaxWidth(String width) Sets the maximum width of the form card.setPageBackground(String color) Sets the background color of the outer container.setTitleSpacing(int spacing) Sets spacing between the title and form content.setTitleSpacing(String spacing) Sets spacing between the title and form content.Applies spacious spacing (larger gaps between elements).Sets the title/header content.wideForm()Applies a wide form width (600px) - suitable for multi-column forms.Methods inherited from class com.oorian.html.layout.PageLayout
createPane, createPane, fillParent, fillViewport, setBackgroundColor, 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, 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
-
FormLayout
public FormLayout()Constructs a FormLayout with default configuration.
-
-
Method Details
-
initialize
protected void initialize()Builds the element tree for the layout.- Overrides:
initializein classStyledElement<FormLayout>
-
title
Sets the title/header content.- Parameters:
title- the title element (H1, H2, etc.)- Returns:
- this FormLayout for method chaining
-
form
Sets the form content.- Parameters:
form- the form element or form content container- Returns:
- this FormLayout for method chaining
-
actions
Adds action buttons with default (start) alignment.- Parameters:
actions- the action button elements- Returns:
- this FormLayout for method chaining
-
actionsRight
Adds action buttons aligned to the right.- Parameters:
actions- the action button elements- Returns:
- this FormLayout for method chaining
-
actionsCenter
Adds action buttons centered.- Parameters:
actions- the action button elements- Returns:
- this FormLayout for method chaining
-
actionsSpaceBetween
Adds action buttons with space between (first left, last right).- Parameters:
actions- the action button elements- Returns:
- this FormLayout for method chaining
-
setMaxWidth
Sets the maximum width of the form card.- Overrides:
setMaxWidthin classStyledElement<FormLayout>- Parameters:
width- the max width in pixels- Returns:
- this FormLayout for method chaining
-
setMaxWidth
Sets the maximum width of the form card.- Overrides:
setMaxWidthin classStyledElement<FormLayout>- Parameters:
width- the max width value (e.g., "480px", "30rem", "50%")- Returns:
- this FormLayout for method chaining
-
cardStyle
Applies a card-style appearance with background, shadow, and rounded corners.- Returns:
- this FormLayout for method chaining
-
setFormPadding
Sets padding for the form card.- Parameters:
padding- the padding in pixels- Returns:
- this FormLayout for method chaining
-
setFormPadding
Sets padding for the form card.- Parameters:
padding- the padding value (e.g., "32px", "2rem")- Returns:
- this FormLayout for method chaining
-
setFormBackground
Sets the background color of the form card.- Parameters:
color- the background color- Returns:
- this FormLayout for method chaining
-
setPageBackground
Sets the background color of the outer container.- Parameters:
color- the background color- Returns:
- this FormLayout for method chaining
-
setTitleSpacing
Sets spacing between the title and form content.- Parameters:
spacing- the spacing in pixels- Returns:
- this FormLayout for method chaining
-
setTitleSpacing
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
Sets spacing between the form content and actions.- Parameters:
spacing- the spacing in pixels- Returns:
- this FormLayout for method chaining
-
setActionsSpacing
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
Sets the gap between action buttons.- Parameters:
gap- the gap in pixels- Returns:
- this FormLayout for method chaining
-
setActionsGap
Sets the gap between action buttons.- Parameters:
gap- the gap value (e.g., "12px", "1rem")- Returns:
- this FormLayout for method chaining
-
getOuterContainer
Returns the outer container for advanced customization.- Returns:
- the outer container div
-
getFormCard
Returns the form card container for advanced customization.- Returns:
- the form card div
-
getTitleArea
Returns the title area for advanced customization.- Returns:
- the title area div
-
getFormArea
Returns the form content area for advanced customization.- Returns:
- the form area div
-
getActionsArea
Returns the actions area for advanced customization.- Returns:
- the actions area div
-
narrowForm
Applies a narrow form width (380px) - suitable for login forms.- Returns:
- this FormLayout for method chaining
-
normalForm
Applies a normal form width (480px) - the default.- Returns:
- this FormLayout for method chaining
-
wideForm
Applies a wide form width (600px) - suitable for multi-column forms.- Returns:
- this FormLayout for method chaining
-
extraWideForm
Applies an extra wide form width (800px) - suitable for complex forms.- Returns:
- this FormLayout for method chaining
-
loginStyle
Configures the layout for a login form (narrow width, card style).- Returns:
- this FormLayout for method chaining
-
registrationStyle
Configures the layout for a registration form (normal width, card style).- Returns:
- this FormLayout for method chaining
-
flatStyle
Applies a flat style (no card appearance, minimal styling).- Returns:
- this FormLayout for method chaining
-
compactSpacing
Applies compact spacing (smaller gaps between elements).- Returns:
- this FormLayout for method chaining
-
spaciousSpacing
Applies spacious spacing (larger gaps between elements).- Returns:
- this FormLayout for method chaining
-