Using modern web controls: Accordion, Carousel, Charts

[admin]

@ai I saw that WebX has controls like TAccordion, TCarousel, and TChart that do not exist in FiveWin. Can you show me how to use each one? I want to add a collapsible FAQ section, an image gallery, and a sales chart to my application.

[xBasePHPai]

Great question! WebX includes several modern UI controls that go beyond classic FiveWin. Let me show you how to implement each one for your use case.

TAccordion - Collapsible FAQ Section

TAccordion creates collapsible panels perfect for FAQs. Here's how to use it:

Code: Select all

#include "WebX.ch"

FUNCTION Main()
   LOCAL oWnd, oAccordion
   PUBLIC Designed_Resolution := {1366, 768, .T.}

   DEFINE WINDOW oWnd TITLE "FAQ Section"
   
   oAccordion := TAccordion():New(oWnd)
   oAccordion:AddPanel("What is WebX?", "WebX is a modern web framework built on xBase/FiveWin syntax.")
   oAccordion:AddPanel("How do I deploy?", "Use WebXPHP.exe to compile your .prg file to web output.")
   oAccordion:AddPanel("Does it support databases?", "Yes, DBF databases work unchanged. No migration to SQL required.")
   oAccordion:AddPanel("What about mobile?", "WebX auto-scales to any screen size using Designed_Resolution.")
   
   ACTIVATE WINDOW oWnd CENTERED
RETURN NIL

Each panel expands/collapses independently. Click a title to toggle its content.

TCarousel - Image Gallery

TCarousel creates an image slider with navigation. Perfect for product galleries:

Code: Select all

#include "WebX.ch"

FUNCTION Main()
   LOCAL oWnd, oCarousel
   PUBLIC Designed_Resolution := {1366, 768, .T.}

   DEFINE WINDOW oWnd TITLE "Product Gallery"
   
   oCarousel := TCarousel():New(oWnd, 600, 400)
   oCarousel:AddImage("images/product1.jpg", "Product 1", "Premium quality item")
   oCarousel:AddImage("images/product2.jpg", "Product 2", "Best seller")
   oCarousel:AddImage("images/product3.jpg", "Product 3", "New arrival")
   oCarousel:AddImage("images/product4.jpg", "Product 4", "Limited edition")
   
   ACTIVATE WINDOW oWnd CENTERED
RETURN NIL

The carousel includes automatic slide navigation, prev/next buttons, and indicator dots.

TChart - Sales Chart

TChart generates interactive charts using Chart.js. Supports bar, line, pie, doughnut, and radar charts:

Code: Select all

#include "WebX.ch"

FUNCTION Main()
   LOCAL oWnd, oChart, aLabels, aData
   PUBLIC Designed_Resolution := {1366, 768, .T.}

   DEFINE WINDOW oWnd TITLE "Sales Dashboard"
   
   aLabels := {"January", "February", "March", "April", "May", "June"}
   aData   := {12000, 19000, 8500, 15000, 22000, 18500}
   
   oChart := TChart():New(oWnd)
   oChart:SetType("bar")                    // or "line", "pie", "doughnut", "radar"
   oChart:SetLabels(aLabels)
   oChart:AddDataset("Sales", aData, "rgba(75, 192, 192, 0.6)")
   oChart:SetTitle("Monthly Sales Report")
   oChart:SetWidth(800)
   oChart:SetHeight(400)
   
   ACTIVATE WINDOW oWnd CENTERED
RETURN NIL

Complete Example - All Three Together

Here's a practical dashboard combining all three:

Code: Select all

#include "WebX.ch"

FUNCTION Main()
   LOCAL oWnd, oAccordion, oCarousel, oChart
   LOCAL aLabels, aData
   PUBLIC Designed_Resolution := {1366, 768, .T.}

   DEFINE WINDOW oWnd TITLE "Business Dashboard"
   
   // FAQ Section (top)
   @ 10, 10 SAY "Frequently Asked Questions" TO oWnd
   oAccordion := TAccordion():New(oWnd)
   oAccordion:AddPanel("Shipping", "We ship within 2-3 business days.")
   oAccordion:AddPanel("Returns", "30-day money-back guarantee.")
   oAccordion:AddPanel("Support", "Email support@example.com 24/7")
   
   // Product Gallery (middle-left)
   @ 250, 10 SAY "Product Gallery" TO oWnd
   oCarousel := TCarousel():New(oWnd, 500, 300)
   oCarousel:AddImage("images/prod1.jpg", "Item A", "Best seller")
   oCarousel:AddImage("images/prod2.jpg", "Item B", "New")
   
   // Sales Chart (middle-right)
   @ 250, 520 SAY "Sales Performance" TO oWnd
   aLabels := {"Q1", "Q2", "Q3", "Q4"}
   aData   := {45000, 52000, 48000, 61000}
   
   oChart := TChart():New(oWnd)
   oChart:SetType("line")
   oChart:SetLabels(aLabels)
   oChart:AddDataset("Revenue", aData, "rgba(255, 99, 132, 0.6)")
   oChart:SetWidth(400)
   oChart:SetHeight(300)
   
   ACTIVATE WINDOW oWnd CENTERED
RETURN NIL

Key Points

• TAccordion - Use :AddPanel(cTitle, cContent) to add collapsible sections
• TCarousel - Use :AddImage(cFile, cTitle, cDesc) to populate the slider
• TChart - Set type with :SetType(), labels with :SetLabels(), data with :AddDataset()
• All three are web-native -- they generate responsive HTML5/CSS3/JavaScript automatically
• Compile with WebXPHP.exe myapp.prg and access via browser

These controls make modern, interactive UIs trivial in WebX. No JavaScript coding required -- just xBase!

---
Generated by WebX AI Assistant