xBa

Posted: **Sat Feb 21, 2026 5:22 am**

@ai I want to create a business application with a menu bar that has File, Customers, Products, and Reports menus. When the user clicks a menu item, it should open a different screen. How do I structure this in WebX? Can you show me the menu definition and how to switch between screens?

Posted: **Sat Feb 21, 2026 5:22 am**

Menu-Driven Multi-Screen Application in WebX

Great question! WebX handles menus and screen switching exactly like FiveWin, but generates HTML5 instead of Windows GUI. Here's how to structure it:

Basic Architecture

You'll define:
1. A main window with a menu bar
2. Separate functions for each screen (Customers, Products, Reports, etc.)
3. Menu actions that call those functions to display the appropriate screen

Complete Example

Code: Select all

#include "WebX.ch"

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

   DEFINE MENU oMenu
      MENUITEM "&File" SUBMENU BuildFileMenu()
      MENUITEM "&Customers" ACTION ShowCustomers()
      MENUITEM "&Products" ACTION ShowProducts()
      MENUITEM "&Reports" ACTION ShowReports()
   END

   DEFINE WINDOW oWnd TITLE "Business Application" MENU oMenu SIZE 1200, 700
      @ 50, 50 SAY "Welcome to Business Management System" TO oWnd SIZE 400, 30
      @ 100, 50 SAY "Select a menu option above to get started." TO oWnd SIZE 500, 30
   ACTIVATE WINDOW oWnd CENTERED

RETURN NIL

FUNCTION BuildFileMenu()
   LOCAL aMenu := {}
   AADD( aMenu, { "Exit", {|| ExitApp() } } )
RETURN aMenu

FUNCTION ShowCustomers()
   LOCAL oDlg, cName := Space(50), cPhone := Space(20)

   DEFINE DIALOG oDlg TITLE "Customer Management" SIZE 600, 400 PIXEL
      @ 20, 20 SAY "Customer Name:" TO oDlg
      @ 20, 150 GET cName TO oDlg SIZE 300
      @ 60, 20 SAY "Phone:" TO oDlg
      @ 60, 150 GET cPhone TO oDlg SIZE 300
      @ 150, 150 BUTTON "Save" TO oDlg SIZE 100, 40 ACTION SaveCustomer(cName, cPhone)
      @ 150, 260 BUTTON "Close" TO oDlg SIZE 100, 40 ACTION oDlg:End()
   ACTIVATE DIALOG oDlg CENTERED

RETURN NIL

FUNCTION ShowProducts()
   LOCAL oDlg, cProduct := Space(50), nPrice := 0

   DEFINE DIALOG oDlg TITLE "Product Management" SIZE 600, 400 PIXEL
      @ 20, 20 SAY "Product Name:" TO oDlg
      @ 20, 150 GET cProduct TO oDlg SIZE 300
      @ 60, 20 SAY "Price:" TO oDlg
      @ 60, 150 GET nPrice TO oDlg SIZE 150 PICTURE "999.99"
      @ 150, 150 BUTTON "Save" TO oDlg SIZE 100, 40 ACTION SaveProduct(cProduct, nPrice)
      @ 150, 260 BUTTON "Close" TO oDlg SIZE 100, 40 ACTION oDlg:End()
   ACTIVATE DIALOG oDlg CENTERED

RETURN NIL

FUNCTION ShowReports()
   LOCAL oDlg

   DEFINE DIALOG oDlg TITLE "Reports" SIZE 700, 500 PIXEL
      @ 20, 20 SAY "Available Reports:" TO oDlg SIZE 300, 30
      @ 70, 20 BUTTON "Sales Report" TO oDlg SIZE 150, 40 ACTION GenerateSalesReport()
      @ 70, 180 BUTTON "Inventory Report" TO oDlg SIZE 150, 40 ACTION GenerateInventoryReport()
      @ 130, 20 BUTTON "Customer Report" TO oDlg SIZE 150, 40 ACTION GenerateCustomerReport()
      @ 200, 20 BUTTON "Close" TO oDlg SIZE 100, 40 ACTION oDlg:End()
   ACTIVATE DIALOG oDlg CENTERED

RETURN NIL

FUNCTION SaveCustomer(cName, cPhone)
   MsgInfo("Customer saved: " + cName + " (" + cPhone + ")")
RETURN NIL

FUNCTION SaveProduct(cProduct, nPrice)
   MsgInfo("Product saved: " + cProduct + " - $" + Str(nPrice, 8, 2))
RETURN NIL

FUNCTION GenerateSalesReport()
   MsgInfo("Generating Sales Report...")
RETURN NIL

FUNCTION GenerateInventoryReport()
   MsgInfo("Generating Inventory Report...")
RETURN NIL

FUNCTION GenerateCustomerReport()
   MsgInfo("Generating Customer Report...")
RETURN NIL

FUNCTION ExitApp()
   QUIT
RETURN NIL

Key Points

DEFINE MENU creates your menu bar with top-level items (File, Customers, Products, Reports)
SUBMENU creates dropdown menus (like File → Exit)
ACTION calls a function when the menu item is clicked
Each screen is a separate function that DEFINE DIALOG and ACTIVATE DIALOG
When a dialog closes, control returns to the main window and the menu bar stays active
Designed_Resolution should be your actual screen resolution (adjust {1366, 768} to match yours)

Alternative: Using TFolder for Tab-Based Navigation

If you prefer tabs instead of dialogs, use TFolder:

Code: Select all

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

   DEFINE WINDOW oWnd TITLE "Business Application" SIZE 1200, 700
      @ 10, 10 FOLDER oFolder TO oWnd SIZE 1180, 680
      oFolder:AddPage("Customers", {|| BuildCustomersPage(oFolder) } )
      oFolder:AddPage("Products", {|| BuildProductsPage(oFolder) } )
      oFolder:AddPage("Reports", {|| BuildReportsPage(oFolder) } )
   ACTIVATE WINDOW oWnd CENTERED

RETURN NIL

This keeps all screens in one window with tab navigation instead of separate dialogs.

Compilation & Deployment

Compile with WebXPHP.exe:

Code: Select all

WebXPHP.exe myapp.prg

Then access via browser:

Code: Select all

http://localhost/cgi-bin/myapp.exe

The menu bar, dialogs, and all navigation work seamlessly in the browser—same xBase code, web output!

Questions? Feel free to ask!

---
Generated by WebX AI Assistant

xBa

How do I build a menu-driven application with multiple screens?

How do I build a menu-driven application with multiple screens?

Re: How do I build a menu-driven application with multiple screens?