McBasic™Get McBasic™ ↗
Build 881
DocsOrganize controls with panels
McBasic™ 0.7.881 · Build 881 · 6 min read
Hands-on tutorial · Layout & Forms

Organize controls with panels

Understand parenting, nested layout and inherited interaction state.

1 Form / control designs1 complete BASIC filesGuided sample project
Download complete projectComplete event code

A child’s coordinates are relative to its parent. Moving a panel should move its visual group together. Enabled and Visible affect a group differently: test child interaction as well as appearance. Do not simulate a container by merely placing a rectangle behind unrelated controls.

Step 1Prepare a safe practice project#

Extract the archive into a new writable folder, separate from your own application. Open PanelGallery.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": "d4a0f4af-8887-49e2-9b9f-5c171b2ff032",
  "name": "PanelGallery",
  "kind": "DesktopApp",
  "ai": {
    "storeChatsInProject": false
  },
  "language": {
    "dialect": "McBasic1",
    "requireExplicit": true,
    "compare": "Binary",
    "defaultArrayBase": 0
  },
  "application": {
    "bundleIdentifier": "com.mcbasic.panelgallery",
    "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"PanelGallery — BASIC containers"
Width560
Height420
TypeNameParent
PanelpnlOuterForm
PanelpnlInnerpnlOuter
LabellblTitlepnlOuter
LabellblClippedpnlInner
CommandButtoncmdNestedpnlInner
LabellblStateForm
CommandButtoncmdEnabledForm
CommandButtoncmdVisibleForm
pnlOuter · exact Inspector values
PropertyValue
Left24
Top40
Width480
Height220
Padding"12,16,12,16"
Anchor edgesLeft, Top
pnlInner · exact Inspector values
PropertyValue
Left30
Top48
Width310
Height140
Padding"8"
Anchor edgesLeft, Top
lblTitle · exact Inspector values
PropertyValue
Left12
Top12
Width430
Height28
Caption"Outer panel — coordinates relative to its origin"
Anchor edgesLeft, Top
lblClipped · exact Inspector values
PropertyValue
Left240
Top12
Width190
Height28
Caption"Clipped at panel boundary"
Anchor edgesLeft, Top
cmdNested · exact Inspector values
PropertyValue
Left18
Top70
Width210
Height34
Caption"Nested BASIC action"
ZIndex3
Anchor edgesLeft, Top
lblState · exact Inspector values
PropertyValue
Left24
Top276
Width490
Height30
Caption"Loading panels"
Anchor edgesLeft, Top
cmdEnabled · exact Inspector values
PropertyValue
Left24
Top324
Width220
Height36
Caption"Toggle panel enabled"
Anchor edgesLeft, Top
cmdVisible · exact Inspector values
PropertyValue
Left268
Top324
Width240
Height36
Caption"Toggle panel visible"
Anchor edgesLeft, Top

Step 3Connect the events explicitly#

frmMain

ObjectEventProcedureParameters
cmdNestedClickcmdNested_ClickClick()
cmdEnabledClickcmdEnabled_ClickClick()
cmdVisibleClickcmdVisible_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 clicks As Long
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()
    pnlOuter.Tag = 42
    pnlInner.Tag = "nested-container"
    pnlOuter.Padding = "12,16,12,16"
    pnlInner.Padding = "8"
    cmdNested.ZIndex = 3
    lblState.Caption = "Panels ready — Tag " & TypeName(pnlOuter.Tag) & " " & CStr(pnlOuter.Tag)
End Sub
Private Sub cmdNested_Click()

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

Forms/frmMain.bas · cmdNested_Click
Private Sub cmdNested_Click()
    clicks = clicks + 1
    lblState.Caption = "Nested BASIC clicks: " & CStr(clicks)
End Sub
Private Sub cmdEnabled_Click()

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

Forms/frmMain.bas · cmdEnabled_Click
Private Sub cmdEnabled_Click()
    pnlOuter.Enabled = Not pnlOuter.Enabled
    lblState.Caption = "Panel enabled: " & CStr(pnlOuter.Enabled)
End Sub
Private Sub cmdVisible_Click()

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

Forms/frmMain.bas · cmdVisible_Click
Private Sub cmdVisible_Click()
    pnlOuter.Visible = Not pnlOuter.Visible
    lblState.Caption = "Panel visible: " & CStr(pnlOuter.Visible)
End Sub
Copy the complete Forms/frmMain.bas file

Replace the file once; do not append duplicate procedures.

Forms/frmMain.bas
Option Explicit
Private clicks As Long

Private Sub Form_Load()
    pnlOuter.Tag = 42
    pnlInner.Tag = "nested-container"
    pnlOuter.Padding = "12,16,12,16"
    pnlInner.Padding = "8"
    cmdNested.ZIndex = 3
    lblState.Caption = "Panels ready — Tag " & TypeName(pnlOuter.Tag) & " " & CStr(pnlOuter.Tag)
End Sub

Private Sub cmdNested_Click()
    clicks = clicks + 1
    lblState.Caption = "Nested BASIC clicks: " & CStr(clicks)
End Sub

Private Sub cmdEnabled_Click()
    pnlOuter.Enabled = Not pnlOuter.Enabled
    lblState.Caption = "Panel enabled: " & CStr(pnlOuter.Enabled)
End Sub

Private Sub cmdVisible_Click()
    pnlOuter.Visible = Not pnlOuter.Visible
    lblState.Caption = "Panel visible: " & CStr(pnlOuter.Visible)
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 PanelGallery.mcbproj
mcbasic run PanelGallery.mcbproj

Acceptance checklist

  • Use the nested panel action.
  • Toggle Enabled and try a child command.
  • Toggle Visible and restore the group.
  • Resize the Form and inspect the nested geometry.

Step 7Make one change and repeat the tests#

Move a related set of controls into one panel while preserving their tab order.

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