Interface Overview

Interface Overview

Overview

This guide explains the main parts of the VSCode UI designer interface.

The overall layout is built around a visual editing workflow, helping you move from opening an OpenEdge ABL UI file to selecting widgets, adjusting properties, inspecting events, and writing the updated model back to native code.

Header Area

The header area appears at the top of the designer.

From here, you can:

• see the current workspace or project context
• see the currently opened file name
• understand which editor tab or designer session you are working in

This area helps keep you oriented while working inside a larger OpenEdge project.

Left Toolbar Area

The left toolbar appears along the left side of the designer surface.

This area lets you:

• start or trigger common designer actions
• switch between selection and view-related tools
• zoom in or zoom out on the design surface
• fit or reset the canvas view while editing complex layouts
• access undo and redo style editing actions

This keeps the most common canvas commands close to the design surface.

Design Canvas Area

The design canvas area is the central workspace of the interface.

This area lets you:

• view the current OpenEdge window or frame layout visually
• select widgets such as buttons, frames, and other UI elements
• reposition and resize widgets directly on the grid
• understand spatial relationships between controls in the form
• work with the generic UI model through direct manipulation

This is the main editing area where visual changes are made.

Widget Selection Overlay Area

When a widget is selected, a compact selection overlay appears directly on the canvas.

Component Selection:

Layers:

From here, you can:

• confirm which widget is currently selected
• access quick actions for the selected widget
• add or adjust nearby layout relationships
• remove widgets when appropriate

This makes common widget-level actions available without leaving the canvas.

Properties and Events Panel Area

The properties and events panel appears on the right side of the interface.

This area lets you:

• view the name and type of the current selection
• search through editable settings using the filter field
• switch between the Properties tab and the Events tab
• update appearance, layout, interaction, data, and label settings
• inspect or edit event-related behavior for the selected component

This is the main detailed configuration area for the selected widget.

Property Groups

Inside the right-side panel, settings are grouped into collapsible sections.

Typical groups include:

• Advanced
• Appearance
• Custom Lists
• Data
• Frame Options
• Interaction
• Layout
• Menus
• Text & Labels

From here, you can:

• focus on one category of settings at a time
• reduce noise by collapsing sections you do not need
• make precise changes without scanning one long property list

This organization keeps the editor manageable even for widgets with many configurable properties.

Bindings Area

The bindings area appears near the bottom of the designer.

This area lets you:

• see where binding-related interactions are managed
• drag an API or binding source into the editor workflow when supported
• understand where data-oriented UI wiring belongs in the interface

This area supports the broader model-driven workflow around UI structure and connected data.