AppBuilder Visualizer (VS Code Extension)

Visualize Progress AppBuilder .w layouts as a graphic canvas. Widgets are rendered as colored rectangles positioned using AT ROW/COL and sized by SIZE. Clicking a widget shows its name, type, and any ON <event> OF <object> triggers. The right panel also lists all PROCEDURE <name> found in the file.

Features

• Supports any file ending with .w
• Faithful layout based on AT ROW/COL + SIZE
• Clickable widgets with triggers list
• Global procedures list
• Enable UI filter (shows only widgets enabled in enable_UI)
• Search by widget name
• Browse columns parsed and drawn as vertical segments with headers

How it works (parsing)

The extension parses the .w file and extracts:

• Widget definitions: DEFINE <TYPE> <NAME> for known AppBuilder widgets
• Layout entries: lines starting with <NAME> AT ROW <n> COL <n> and optional SIZE <w> BY <h>
• Triggers: ON <event> OF <object>
• Procedures: PROCEDURE <name>

If a widget does not have an explicit SIZE, a small default size is used so it remains visible.

Translation settings

You can resolve translation codes embedded in labels (e.g. §1234§) by pointing to a JSON dictionary.

Example dictionary:

{
  "fr": { "1000": "Libellé", "1001": "Test" },
  "en": { "1000": "Label", "1001": "Test" }
}

Settings:

{
  "appbuilderVisualizer.dictionary_file": "~/dictionnary_profil.json",
  "appbuilderVisualizer.default_language": "fr",
  "appbuilderVisualizer.fileEncoding": "iso-8859-1"
}

Build and Compile

1. Install dependencies

npm install

2. Compile TypeScript

npm run compile

The compiled extension will be in out/.

Run / Test in VS Code

1. Open this folder in VS Code.
2. Press F5 to launch the Extension Development Host.
3. In the dev window, open a .w file.
4. Run the command:

AppBuilder: Visualize .w Layout

A webview will open beside your editor showing the layout. Clicking a rectangle shows the widget info and triggers.

Notes

• The extension refreshes when the currently visualized file is saved.

Project structure

.
├── package.json
├── tsconfig.json
├── src
│   └── extension.ts
└── README.md