McBasic™Get McBasic™ ↗
Build 881
DocsBuild an adjustable two-pane view
McBasic™ 0.7.881 · Build 881 · 6 min read
Hands-on tutorial · Layout & Forms

Build an adjustable two-pane view

Separate navigation and detail with a movable splitter.

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

The splitter belongs to the container, not to either pane’s content. Use SplitterMoved to observe a completed layout change. Check the minimum practical size of each pane so moving the divider does not make a task impossible.

Step 1Prepare a safe practice project#

Extract the archive into a new writable folder, separate from your own application. Open SplitContainer.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": "2bb72e26-0e38-4d95-88ee-1a34de7d31ea",
  "name": "SplitContainerSample",
  "kind": "DesktopApp",
  "ai": {
    "storeChatsInProject": false
  },
  "language": {
    "dialect": "McBasic1",
    "requireExplicit": true,
    "compare": "Binary",
    "defaultArrayBase": 0
  },
  "application": {
    "bundleIdentifier": "com.mcbasic.samples.splitcontainer",
    "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"SplitContainer — McBasic"
Width720
Height420
MinWidth560
MinHeight320
TypeNameParent
SplitContainersplitMainForm
PanelpnlLeftsplitMain
PanelpnlRightsplitMain
LabellblLeftpnlLeft
LabellblRightpnlRight
StatusBarstaStatusForm
CommandButtoncmdCloseForm
splitMain · exact Inspector values
PropertyValue
Left32
Top28
Width656
Height290
Orientation"Horizontal"
Ratio0.42
SplitterWidth6
FirstPaneMinSize120
SecondPaneMinSize160
IsSplitterFixedFalse
FixedPane"None"
FirstPaneCollapsedFalse
SecondPaneCollapsedFalse
TabIndex0
Anchor edgesLeft, Right, Top, Bottom
pnlLeft · exact Inspector values
PropertyValue
Left16
Top16
Width240
Height250
TabIndex0
Anchor edgesLeft, Top
pnlRight · exact Inspector values
PropertyValue
Left16
Top16
Width300
Height250
TabIndex1
Anchor edgesLeft, Top
lblLeft · exact Inspector values
PropertyValue
Left20
Top24
Width180
Height30
Caption"First pane"
TabIndex0
Anchor edgesLeft, Top
lblRight · exact Inspector values
PropertyValue
Left20
Top24
Width220
Height30
Caption"Second pane"
TabIndex0
Anchor edgesLeft, Top
staStatus · exact Inspector values
PropertyValue
Left32
Top354
Width430
Height26
Text"Ready"
TabIndex1
Anchor edgesLeft, Bottom
cmdClose · exact Inspector values
PropertyValue
Left560
Top348
Width128
Height36
Caption"Close"
TabIndex2
Anchor edgesRight, Bottom

Step 3Connect the events explicitly#

frmMain

ObjectEventProcedureParameters
splitMainSplitterMovedsplitMain_SplitterMovedSplitterMoved()
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()
    splitMain.Orientation = "Horizontal"
    splitMain.Ratio = 0.42
    splitMain.SplitterWidth = 6
    splitMain.FirstPaneMinSize = 120
    splitMain.SecondPaneMinSize = 160
    splitMain.IsSplitterFixed = False
    splitMain.FixedPane = "None"
    splitMain.FirstPaneCollapsed = False
    splitMain.SecondPaneCollapsed = False
    lblLeft.Caption = "First pane"
    lblRight.Caption = "Second pane"
    staStatus.Text = "SplitContainer ready"
End Sub
Private Sub splitMain_SplitterMoved()

Enter this helper in the named source file, outside every other procedure. Its callers are included in the same project.

Forms/frmMain.bas · splitMain_SplitterMoved
Private Sub splitMain_SplitterMoved()
    staStatus.Text = "Splitter moved — ratio " & CStr(splitMain.Ratio) & ", position " & CStr(splitMain.SplitterPosition)
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()
    splitMain.Orientation = "Horizontal"
    splitMain.Ratio = 0.42
    splitMain.SplitterWidth = 6
    splitMain.FirstPaneMinSize = 120
    splitMain.SecondPaneMinSize = 160
    splitMain.IsSplitterFixed = False
    splitMain.FixedPane = "None"
    splitMain.FirstPaneCollapsed = False
    splitMain.SecondPaneCollapsed = False
    lblLeft.Caption = "First pane"
    lblRight.Caption = "Second pane"
    staStatus.Text = "SplitContainer ready"
End Sub

Private Sub splitMain_SplitterMoved()
    staStatus.Text = "Splitter moved — ratio " & CStr(splitMain.Ratio) & ", position " & CStr(splitMain.SplitterPosition)
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 SplitContainer.mcbproj
mcbasic run SplitContainer.mcbproj

Acceptance checklist

  • Move the divider in both directions.
  • Inspect the reported splitter state.
  • Resize the entire Form and repeat.

Step 7Make one change and repeat the tests#

Replace the pane labels with a list and detail field while preserving correct parenting.

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