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

Keep long content reachable

Put overflow inside a dedicated scrollable parent.

1 Form / control designs1 complete BASIC filesGuided sample project

Scrolling solves reachability; it does not fix an incoherent layout. Set the content extent and parent relationship deliberately. A command inside the scrollable region must remain attached to that region when you scroll, while outside status controls stay fixed.

Step 1Prepare a safe practice project#

Extract the archive into a new writable folder, separate from your own application. Open ScrollContainer.mcproj 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
ScrollContainer.mcproj
{
  "schemaVersion": 1,
  "projectId": "42bb890f-1fd0-42dd-bf32-a5fd4a3c2146",
  "name": "ScrollContainerSample",
  "kind": "DesktopApp",
  "language": {
    "dialect": "McBasic1",
    "requireExplicit": true,
    "compare": "Binary",
    "defaultArrayBase": 0
  },
  "application": {
    "bundleIdentifier": "com.mcbasic.samples.scrollcontainer",
    "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"ScrollContainer — McBasic"
Width620
Height420
MinWidth500
MinHeight320
TypeNameParent
ScrollContainerscrMainForm
CommandButtoncmdInsidescrMain
LabellblInsidescrMain
StatusBarstaMainForm
CommandButtoncmdCloseForm
scrMain · exact Inspector values
PropertyValue
Left48
Top40
Width524
Height270
HorizontalScrollBar"Auto"
VerticalScrollBar"Auto"
TabIndex0
Anchor edgesLeft, Right, Top, Bottom
cmdInside · exact Inspector values
PropertyValue
Left24
Top24
Width220
Height36
Caption"Nested action"
TabIndex0
Anchor edgesLeft, Top
lblInside · exact Inspector values
PropertyValue
Left24
Top340
Width720
Height34
Caption"This authored child extends beyond the viewport and can be reached with the scroll bars."
TabIndex1
Anchor edgesLeft, Top
staMain · exact Inspector values
PropertyValue
Left48
Top350
Width380
Height26
Text"Ready"
TabIndex1
Anchor edgesLeft, Bottom
cmdClose · exact Inspector values
PropertyValue
Left444
Top346
Width128
Height36
Caption"Close"
TabIndex2
Anchor edgesRight, Bottom

Step 3Connect the events explicitly#

frmMain

ObjectEventProcedureParameters
cmdInsideClickcmdInside_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()
    staMain.Text = "Horizontal: " & scrMain.HorizontalScrollBar & ", Vertical: " & scrMain.VerticalScrollBar
End Sub
Private Sub cmdInside_Click()

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

Forms/frmMain.bas · cmdInside_Click
Private Sub cmdInside_Click()
    staMain.Text = "Nested button clicked inside the scroll container."
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()
    staMain.Text = "Horizontal: " & scrMain.HorizontalScrollBar & ", Vertical: " & scrMain.VerticalScrollBar
End Sub

Private Sub cmdInside_Click()
    staMain.Text = "Nested button clicked inside the scroll container."
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 ScrollContainer.mcproj
mcbasic run ScrollContainer.mcproj

Acceptance checklist

  • Scroll until the inner command is visible.
  • Activate it and inspect the status.
  • Resize the Form and confirm content remains reachable.

Step 7Make one change and repeat the tests#

Add another field below the original content and make sure it can be reached by keyboard and scrolling.

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