API4UI - Visual UI Designer for OpenEdge ABL

Version 0.4.0 - Professional drag-and-drop UI designer for OpenEdge ABL applications

API4UI transforms OpenEdge ABL development with a powerful visual designer that lets you create sophisticated user interfaces using drag-and-drop simplicity. Design forms visually while maintaining clean, production-ready ABL code.

This repository is intended to support users by providing extra information and guidance about the VS Code extension API4UI - Visual Studio Marketplace.

What's New in 0.4.0

• Enhanced Visual Designer: Improved component rendering with better property mapping and binding
• Progress Widget Support: Comprehensive support for Progress widgets with accurate parsing
• Advanced Layouts: Dock and stack layout algorithms for precise component positioning
• Component Metadata System: Role-based rendering with optimized configuration loading
• Better Code Generation: Improved ColorValue handling and default property management

In This Article

• Installation
• Documentation
• When do you plan on releasing features?
• I want to report a bug
• I need a tailor-made solution
• Getting Started
• Key Features
• Framework Support

Installation

From VS Code Marketplace

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X)
3. Search for "API4UI"
4. Install the extension by AI4YOU

From Command Line

code --install-extension ai4you.api4ui

Where can I find the documentation?

Access comprehensive documentation through the built-in VS Code extension:

• Command Palette: Ctrl+Shift+P → "📚 Documentation"
• Status Bar: Click the gear icon → Documentation
• Context Menu: Right-click in any .cls file → Documentation

Extended online documentation will be available in the future.

When do you plan on releasing features?

You can create an issue where you explain your idea or feature:

1. Create the issue Open a new issue
2. Explain your feature as CLEAR as possible
3. Include use cases and examples if applicable

We prioritize features based on community feedback and enterprise requirements.

I want to report a bug

1. Check if the issue does not already exist in existing issues
2. Create the issue Open a new issue
3. Add a reproducible case with:
   • Steps to reproduce
   • Expected behavior
   • Actual behavior
   • VS Code version and extension version
   • Sample .cls files (if applicable)

If you need assistance with troubleshooting or isolating a problem, you can request remote assistance through our Support system. Remote assistance is included in enterprise support subscriptions.

I need a tailor-made solution

Our team specialized in making VS Code extensions and native applications is here to provide you the most versatile and tailored solution for your company.

Enterprise Services:

• Custom API4UI components
• Framework integrations
• Training and consultation
• Priority support

Contact us at info@api4ui.io for enterprise solutions.

Getting Started

Quick Start

1. Install the extension from the VS Code Marketplace
2. Open an OpenEdge ABL project in VS Code
3. Create a new form: Right-click in Explorer → API4UI toolbox → ABL → New → Form
4. Open the visual designer: Right-click any .cls file → "🎨 Open in API4UI designer"
5. Start designing: Drag and drop components from the toolbox

Keyboard Shortcuts

• Ctrl+Shift+F8 - Open .cls file in visual designer
• Ctrl+Shift+F9 - Switch back to text editor from designer

Project Setup

Initialize your project for optimal experience:

1. Use Command Palette: Ctrl+Shift+P → "Initialize Project Configuration"
2. Configure build paths and database connections
3. Analyze UI components: "UI Components from openedge-project.json"

Key Features

🎨 Visual Designer

Transform your OpenEdge ABL development with a professional-grade visual designer that brings modern drag-and-drop capabilities to your workflow.

• Intuitive Drag-and-Drop Interface - Build complex UIs by simply dragging components onto the canvas
• Real-Time Visual Editing - See your changes instantly as you modify properties and layouts
• Comprehensive Property Editor - Edit component properties with specialized controls for colors, fonts, queries, and more
• Smart Layout Algorithms - Automatic docking and stacking with WinForms-style layout management
• Bidirectional Conversion - Edit visually or in code - changes sync seamlessly in both directions

🧩 Component Library

Work with a comprehensive set of UI components designed specifically for OpenEdge ABL applications.

• Progress Widgets Support - Full support for 15+ built-in Progress widgets (FillIn, Button, Browse, ComboBox, etc.)
• Third-Party Components - Telerik, Infragistics, and DevExpress component integration (in development)
• Automatic Component Discovery - Intelligent DLL analysis extracts component metadata automatically
• Role-Based Rendering - Sophisticated rendering system handles complex component structures
• Custom Components - Extend the library with your own custom widgets

🔨 Code Generation

Generate clean, maintainable ABL code that follows industry best practices.

• Production-Ready ABL Code - Generate code that's ready to use in production environments
• File-First Approach - Edit existing .cls and .w files directly without separate metadata files
• Smart Property Handling - Preserves semantic information (system colors, named colors, etc.)
• Method Preservation - Visual edits never overwrite your custom methods and event handlers
• Advanced Compilation - Built-in support for XREF, DEBUG-LIST, LISTING, PREPROCESS, and STRING-XREF

🚀 Project Management

Streamline your OpenEdge development with integrated project management tools.

• Project Configuration System - Comprehensive openedge-project.json management
• Build Path Integration - Automatic namespace detection from build paths
• Database Tooling - Visual query builder with schema integration
• Multi-Folder Workspaces - Support for complex multi-project workspaces
• File Templates - Quickly create forms, dialogs, classes, procedures, and interfaces

🔌 Advanced Integrations

Extend your development environment with powerful integrations.

• MCP Server Support - Model Context Protocol integration for AI-assisted development
• Component Analysis - Extract and analyze component metadata from assemblies
• OpenAPI Integration - Generate UIs from OpenAPI specifications (in development)
• Eclipse Import - Import Eclipse project configurations with wizard support
• Multi-Scope Settings - User, workspace, and folder-level configuration management

Framework Support

Standard OpenEdge ABL

Default templates without framework dependencies for pure OpenEdge development.

Custom Frameworks

Extensible framework system allows integration of your own templates and patterns.

System Requirements

• VS Code: Version 1.96.0 or higher
• OpenEdge: Version 11.7 or higher (12.8 recommended)
• Operating System: Windows, macOS, or Linux
• Memory: 4GB RAM minimum (8GB recommended for large projects)

Compilation Features

The extension includes advanced compilation tools:

• Selective compilation: Choose XREF, DEBUG-LIST, LISTING, PREPROCESS, or STRING-XREF
• Dynamic compilation: Progress COMPILE statements with proper error handling
• Output management: Generated files (.xref, .list, .i) appear alongside source files
• Batch operations: Compile multiple files with consistent options

Sample Projects

Sample projects and templates will be added to demonstrate best practices and common patterns.

Development Setup

Building the Extension

If you're developing or contributing to the API4UI extension, you need to build the extension to copy component configurations:

# Build the extension (required before testing)
node esbuild.js

# Watch mode for development
node esbuild.js --watch

Important: The build process copies Progress widget configurations from src/openedge/progress_widgets/ to both:

• src/landing/public/.api4ui/components/progress_widgets/ (for web mode)
• dist/src/templates/components/progress_widgets/ (for VSCode extension)

Without running the build, Progress widgets (like ProgressButton, ProgressFrame, ProgressRectangle, etc.) will not be available.

Development Workflow

1. Make changes to source files
2. Run node esbuild.js to build the extension
3. Press F5 in VS Code to launch the extension in debug mode
4. Test your changes in the extension host window

Running Lint

# Run lint checks
yarn run lint

Community

• GitHub Issues: Report bugs and request features
• Documentation: Built-in extension documentation
• Enterprise Support: info@api4ui.io

AI4YOU - Empowering developers with intelligent tools for modern application development.