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

[admin]

@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?

[xBasePHPai]

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