McBasic™Get McBasic™ ↗
Build 881
Hands-on tutorial · Layout & Forms

Organize a multi-page Form

Place controls inside TabPage containers and navigate between pages.

1 Form / control designs1 complete BASIC filesGuided sample project

A TabPage is a child of TabControl, and the controls on a page belong to that page. Overlapping controls on the Form itself do not become tab content. Keep the selected page and any Next/Back commands synchronized.

Step 1Prepare a safe practice project#

Extract the archive into a new writable folder, separate from your own application. Open TabControl.mcbproj in McBasic™. Keep every declared source, layout, resource and migration file together.

To reconstruct it yourself, create a DesktopApp project and add the files declared below. In the complete project, follow these steps as a guided rebuild: replace each named source file once and Check after all its procedures are present.

Exact project configuration
project.mcproj
{
  "schemaVersion": 1,
  "projectId": "sample-tab-control",
  "name": "TabControl",
  "kind": "DesktopApp",
  "ai": {
    "storeChatsInProject": false
  },
  "language": {
    "dialect": "McBasic1",
    "requireExplicit": true,
    "compare": "Binary",
    "defaultArrayBase": 0
  },
  "application": {
    "bundleIdentifier": "com.mcbasic.samples.tabcontrol",
    "version": "0.1.0",
    "buildNumber": "1",
    "startupFormId": "form-main",
    "shutdownMode": "OnStartupFormClosed"
  },
  "forms": [
    {
      "id": "form-main",
      "typeName": "frmMain",
      "layout": "Forms/frmMain.form.json",
      "code": "Forms/frmMain.bas"
    }
  ],
  "modules": [],
  "classes": [],
  "tests": [],
  "references": [],
  "resources": [],
  "targets": [
    "osx-arm64"
  ],
  "capabilities": []
}

Step 2Build the Form and set its properties#

frmMain

Select the Form first and set its properties. Add containers before their children. These are initial Designer values, not statements to paste into a procedure.

Form propertyValue
Caption"TabControl — McBasic"
Width560
Height390
MinWidth420
MinHeight300
TypeNameParent
TabControltabHostForm
TabPagetabPageGeneraltabHost
LabellblGeneraltabPageGeneral
CommandButtoncmdNexttabPageGeneral
TabPagetabPageDetailstabHost
LabellblDetailstabPageDetails
CommandButtoncmdBacktabPageDetails
LabellblStatusForm
CommandButtoncmdCloseForm
tabHost · exact Inspector values
PropertyValue
Left48
Top32
Width464
Height250
TabIndex0
VisibleTrue
EnabledTrue
SelectedIndex0
Anchor edgesLeft, Top
tabPageGeneral · exact Inspector values
PropertyValue
Left0
Top28
Width464
Height222
TabIndex0
VisibleTrue
EnabledTrue
Caption"General"
Anchor edgesLeft, Top
lblGeneral · exact Inspector values
PropertyValue
Left24
Top26
Width320
Height32
TabIndex0
VisibleTrue
EnabledTrue
Caption"This is the General page."
Anchor edgesLeft, Top
cmdNext · exact Inspector values
PropertyValue
Left24
Top82
Width140
Height36
TabIndex1
VisibleTrue
EnabledTrue
Caption"Open Details"
Anchor edgesLeft, Top
tabPageDetails · exact Inspector values
PropertyValue
Left0
Top28
Width464
Height222
TabIndex1
VisibleTrue
EnabledTrue
Caption"Details"
Anchor edgesLeft, Top
lblDetails · exact Inspector values
PropertyValue
Left24
Top26
Width320
Height32
TabIndex0
VisibleTrue
EnabledTrue
Caption"This is the Details page."
Anchor edgesLeft, Top
cmdBack · exact Inspector values
PropertyValue
Left24
Top82
Width140
Height36
TabIndex1
VisibleTrue
EnabledTrue
Caption"Back to General"
Anchor edgesLeft, Top
lblStatus · exact Inspector values
PropertyValue
Left48
Top300
Width464
Height28
TabIndex1
VisibleTrue
EnabledTrue
Caption"General page selected."
Anchor edgesLeft, Top
cmdClose · exact Inspector values
PropertyValue
Left412
Top334
Width100
Height32
TabIndex2
VisibleTrue
EnabledTrue
Caption"Close"
Anchor edgesLeft, Top

Step 3Connect the events explicitly#

frmMain

ObjectEventProcedureParameters
tabHostChange
Alias of SelectionChanged
tabHost_ChangeChange()
cmdNextClickcmdNext_ClickClick()
cmdBackClickcmdBack_ClickClick()
cmdCloseClickcmdClose_ClickClick()
FormLoadForm_Load()

Step 4Enter the complete behavior#

Open the named source file. Enter declarations first, then every procedure. Expand a procedure for its full body, or copy the complete file. Helpers are required: do not stop after entering the first Click handler.

Forms/frmMain.bas

Enter these declarations at file scope, before the procedures.

Forms/frmMain.bas · declarations
Option Explicit
Private Sub Form_Load()

Initialize state before enabling dependent actions. Keep the shared declarations and startup dependencies with this procedure.

Forms/frmMain.bas · Form_Load
Private Sub Form_Load()
    lblStatus.Caption = "General page selected."
End Sub
Private Sub tabHost_Change()

Read the current value or selection and update its dependent interface. The binding above determines which object calls this handler.

Forms/frmMain.bas · tabHost_Change
Private Sub tabHost_Change()
    If tabHost.SelectedTab Is tabPageGeneral Then
        lblStatus.Caption = "General page selected."
    Else
        lblStatus.Caption = "Details page selected."
    End If
End Sub
Private Sub cmdNext_Click()

Enter the complete action, including its input checks and calls to helper procedures.

Forms/frmMain.bas · cmdNext_Click
Private Sub cmdNext_Click()
    tabHost.SelectedIndex = 1
End Sub
Private Sub cmdBack_Click()

Enter the complete action, including its input checks and calls to helper procedures.

Forms/frmMain.bas · cmdBack_Click
Private Sub cmdBack_Click()
    tabHost.SelectedIndex = 0
End Sub
Private Sub cmdClose_Click()

Enter the complete action, including its input checks and calls to helper procedures.

Forms/frmMain.bas · cmdClose_Click
Private Sub cmdClose_Click()
    Unload Me
End Sub
Copy the complete Forms/frmMain.bas file

Replace the file once; do not append duplicate procedures.

Forms/frmMain.bas
Option Explicit

Private Sub Form_Load()
    lblStatus.Caption = "General page selected."
End Sub

Private Sub tabHost_Change()
    If tabHost.SelectedTab Is tabPageGeneral Then
        lblStatus.Caption = "General page selected."
    Else
        lblStatus.Caption = "Details page selected."
    End If
End Sub

Private Sub cmdNext_Click()
    tabHost.SelectedIndex = 1
End Sub

Private Sub cmdBack_Click()
    tabHost.SelectedIndex = 0
End Sub

Private Sub cmdClose_Click()
    Unload Me
End Sub

Step 5Keep resources and storage reproducible#

No external resource or migration files are declared. Any inline migration, seed data or local JSON is present in the code above. Runtime application data and private preferences are not included in the archive.

Step 6Check, run and test the result#

Save all files and run Check. Resolve diagnostics before Run. Developer CLI users can work from the extracted folder:

Developer CLI
mcbasic check TabControl.mcbproj
mcbasic run TabControl.mcbproj

Acceptance checklist

  • Select each tab directly.
  • Use Next and Back and verify the selected page.
  • Navigate with the keyboard and inspect focus on the active page.

Step 7Make one change and repeat the tests#

Add a third TabPage and extend navigation without permitting an invalid page index.

Save a working Git checkpoint first. Change one behavior, Check again and repeat the acceptance checklist. Compare with the downloaded solution if a regression appears.

Source baseline 20f4bfed6b · Build manifest