What layout options does WebX have? (Header/Sidebar/Content)

[admin]

@ai I want to build a dashboard with a fixed header at the top, a navigation sidebar on the left, and the main content area on the right. In FiveWin I would position everything manually with pixel coordinates. Does WebX have a better way to handle responsive layouts?

[xBasePHPai]

Great question! Yes, WebX has a much better approach than manual pixel positioning.

TLayout - Flexbox-Based Responsive Layout

Instead of hardcoding coordinates, use TLayout with flexbox. It automatically handles responsive scaling, alignment, and justification across all screen sizes:

Code: Select all

#include "WebX.ch"

FUNCTION Main()
   LOCAL oWnd, oLayout, oHeader, oSidebar, oContent
   PUBLIC Designed_Resolution := {1366, 768, .T.}

   DEFINE WINDOW oWnd TITLE "Dashboard"
   
   // Create main layout (COLUMN = vertical stacking)
   oLayout := TLayout:New(oWnd, 0, 0, 1366, 768, "COLUMN")
   
   // Add fixed header row
   oLayout:AddRow("HEADER", 80, .F., "CENTER", "CENTER")
   
   // Add main content row (ROW = horizontal, side-by-side)
   oLayout:AddRow("BODY", 688, .F., "STRETCH", "STRETCH")
   
   // Now add sidebar + content INSIDE the BODY section
   oHeader := oLayout:GetSection("HEADER")
   oBody   := oLayout:GetSection("BODY")
   
   // Header content
   @ 10, 10 SAY "My Dashboard" TO oHeader FONT oFont
   
   // Create inner layout for sidebar + content
   oInner := TLayout:New(oBody, 0, 0, 1366, 688, "ROW")
   oInner:AddColumn("SIDEBAR", 250, .F., "TOP", "START")
   oInner:AddColumn("CONTENT", 1116, .F., "TOP", "START")
   
   oSidebar := oInner:GetSection("SIDEBAR")
   oContent := oInner:GetSection("CONTENT")
   
   // Add sidebar navigation
   @ 10, 10 SAY "Menu Item 1" TO oSidebar
   @ 40, 10 SAY "Menu Item 2" TO oSidebar
   @ 70, 10 SAY "Menu Item 3" TO oSidebar
   
   // Add main content
   @ 20, 20 SAY "Welcome to Dashboard" TO oContent
   @ 60, 20 BUTTON "Action" TO oContent SIZE 120, 40 ACTION MsgInfo("Clicked!")
   
   ACTIVATE WINDOW oWnd MAXIMIZED
RETURN NIL

Key Advantages Over Manual Positioning

• Responsive Scaling - Layouts automatically scale to any screen size. Set Designed_Resolution to your dev screen, WebX handles the rest.
• Flexible Sizing - Rows/columns can use fixed heights/widths OR stretch to fill available space.
• Alignment Control - cAlign (TOP/CENTER/BOTTOM/STRETCH) and cJustify (START/CENTER/END) handle positioning.
• No Pixel Math - No need to calculate offsets or reposition on resize.
• Nested Layouts - You can nest TLayout inside TLayout for complex dashboard structures.

Alternative: TSidebar + TNavBar

For a modern collapsible sidebar (especially mobile), use WebX's built-in navigation classes:

Code: Select all

oNavBar := TNavBar:New(oWnd)
oNavBar:AddItem("Home", "home.prg")
oNavBar:AddItem("Reports", "reports.prg")

oSidebar := TSidebar:New(oWnd)
oSidebar:AddMenu("Dashboard", "dashboard.prg")
oSidebar:AddMenu("Settings", "settings.prg")

These automatically collapse on mobile devices -- no extra coding needed.

Layout Method Reference

• TLayout:New(oParent, nTop, nLeft, nW, nH, cType) - Create layout (cType = "ROW" or "COLUMN")
• :AddRow(cName, nHeight, lBorder, cAlign, cJustify) - Add horizontal row
• :AddColumn(cName, nWidth, lBorder, cAlign, cJustify) - Add vertical column
• :GetSection(cName) - Get section object to add controls to it

This approach is much cleaner than FiveWin's manual positioning and gives you true responsive design automatically. Try it!

---
Generated by WebX AI Assistant