McBasic™Get McBasic™ ↗
Build 881
Hands-on tutorial · Media & graphics

Display a declared image

Keep image assets portable from project to built application.

1 Form / control designs1 complete BASIC filesGuided sample project

A resource belongs to the project contract. Preserve the file, its logical name and its declaration together. When testing the release output, check the image there too: success in the Designer does not prove an asset was packaged.

Step 1Prepare a safe practice project#

Extract the archive into a new writable folder, separate from your own application. Open Image.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
Image.mcproj
{
  "schemaVersion": 1,
  "projectId": "8a2bcd2e-9e2e-4f8c-8ca5-25a0d1b6d6f4",
  "name": "ImageSample",
  "kind": "DesktopApp",
  "language": {
    "dialect": "McBasic1",
    "requireExplicit": true,
    "compare": "Binary",
    "defaultArrayBase": 0
  },
  "application": {
    "bundleIdentifier": "com.mcbasic.samples.image",
    "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": [
    {
      "name": "Logo",
      "path": "Resources/logo.png"
    }
  ],
  "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"Image — McBasic"
Width520
Height320
MinWidth420
MinHeight280
TypeNameParent
ImageimgLogoForm
LabellblStatusForm
CommandButtoncmdCloseForm
imgLogo · exact Inspector values
PropertyValue
Left36
Top36
Width220
Height148
Picture"Logo"
SizeMode"Zoom"
Placeholder"Drop an image resource here"
TabIndex0
Anchor edgesLeft, Top
lblStatus · exact Inspector values
PropertyValue
Left36
Top204
Width440
Height40
Caption"Loading project image…"
Anchor edgesLeft, Top
cmdClose · exact Inspector values
PropertyValue
Left36
Top260
Width140
Height36
Caption"Close"
TabIndex1
Anchor edgesLeft, Top

Step 3Connect the events explicitly#

frmMain

ObjectEventProcedureParameters
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()
    imgLogo.Picture = Resources.Logo
    imgLogo.SizeMode = "Zoom"
    If imgLogo.Error = "" Then
        lblStatus.Caption = "Image loaded from project Resources."
    Else
        lblStatus.Caption = imgLogo.Error
    End If
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()
    imgLogo.Picture = Resources.Logo
    imgLogo.SizeMode = "Zoom"
    If imgLogo.Error = "" Then
        lblStatus.Caption = "Image loaded from project Resources."
    Else
        lblStatus.Caption = imgLogo.Error
    End If
End Sub

Private Sub cmdClose_Click()
    Unload Me
End Sub

Step 5Keep resources and storage reproducible#

Keep the following files at their declared relative paths. Apply migrations before the first query. Media and report resources must travel with the build.

FilePurpose
Resources/logo.pngBundled asset / license

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 Image.mcproj
mcbasic run Image.mcproj

Acceptance checklist

  • Run with the declared resource present.
  • Inspect the scaling behavior at the authored size.
  • Build and verify the image in the built application.

Step 7Make one change and repeat the tests#

Replace the image resource with another permitted asset while keeping its logical identity.

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