We're thrilled to announce the release of bx-compat-ui, a comprehensive UI compatibility module that makes migrating your Adobe ColdFusion and Lucee applications to BoxLang seamless and straightforward. If you've been hesitant about moving to BoxLang because of your existing UI components, this module is your answer. Even though the core team doesn't believe BoxLang should be doing any UI decisions for a developer, this was sorely needed in order to migrate existing CFML applications into BoxLang, where then you can decide a path forward.

🚀 Why bx-compat-ui?

BoxLang represents the future of JVM-based dynamic languages, but we understand that many organizations have substantial investments in CFML applications with rich user interfaces. The bx-compat-ui module bridges this gap, providing:

• ✅ Familiar CFML syntax for layout, grid, and AJAX components
• ✅ Compatibility with your existing UI code. (See documentation for compatability notes)
• ✅ Zero learning curve for experienced CFML developers
• ✅ Production-ready enterprise-grade quality from Ortus Solutions
• ✅ Full documentation with an interactive MCP Server

Please note that the examples below are in bx: syntax. Your existing CFML applications using our bx-compat-cfml module will run with no changes.

📦 Quick Installation

Getting started is as simple as running a single CommandBox command:

box install bx-compat-ui

That's it! The module automatically registers and makes all UI components available in your BoxLang applications.

🎯 Major Features

1. Layout Management - Organize Your UI Like a Pro

Create sophisticated layouts with tabs, accordions, borders, and box containers. Here's a quick example of a tabbed interface:

<bx:layout type="tab" fillHeight="true">
    <bx:layoutarea title="Dashboard">
        <h2>Welcome to My App</h2>
        <p>Dashboard content goes here</p>
    </bx:layoutarea>
    <bx:layoutarea title="Reports">
        <bx:grid name="salesGrid" pageSize="25">
            <bx:gridcolumn name="date" header="Date" width="120" />
            <bx:gridcolumn name="revenue" header="Revenue" width="150" type="numeric" format="currency" />
            <bx:gridcolumn name="orders" header="Orders" width="100" />
        </bx:grid>
    </bx:layoutarea>
    <bx:layoutarea title="Settings">
        <p>Application settings and preferences</p>
    </bx:layoutarea>
</bx:layout>

Supported Layout Types:

• Tab - Tabbed interfaces for organizing related content
• Accordion - Collapsible panels that conserve vertical space
• Border - Five-region layouts (top, bottom, left, right, center)
• HBox - Horizontal box layouts with flexbox
• VBox - Vertical box layouts with flexbox

2. Powerful Data Grids - Display and Manage Data Effortlessly

Create sortable, paginated, and even editable data grids with minimal code:

<bx:script>
employeeQuery = queryNew( "id,name,department,salary", "integer,varchar,varchar,numeric", [
    [ 1, "John Doe", "Engineering", 75000 ],
    [ 2, "Jane Smith", "Marketing", 65000 ],
    [ 3, "Bob Johnson", "Sales", 55000 ],
    [ 4, "Alice Brown", "Engineering", 80000 ]
] );
</bx:script>

<bx:grid 
    name="employeeGrid" 
    query="#employeeQuery#" 
    pageSize="10" 
    sortable="true" 
    stripeRows="true"
    selectMode="multi">
    
    <bx:gridcolumn name="id" header="ID" width="60" sortable="false" />
    <bx:gridcolumn name="name" header="Employee Name" width="200" />
    <bx:gridcolumn name="department" header="Department" width="150" />
    <bx:gridcolumn 
        name="salary" 
        header="Salary" 
        width="120" 
        type="numeric" 
        format="currency" 
        align="right" />
</bx:grid>

Grid Features:

• ✨ Built-in sorting and pagination
• ✏️ Inline editing capabilities
• 🎨 Customizable column formatting
• 📊 Event handlers for user interactions
• 🔄 AJAX data binding support

3. AJAX Components - Rich Client-Server Communication

Build dynamic, responsive interfaces without page refreshes:

<bx:ajaximport tags="ajaxproxy" />

<bx:ajaxproxy cfc="components.UserService" jsclassname="UserProxy" />

<script>
var userProxy = new UserProxy();

function loadUserData() {
    userProxy.call( "getUsers", { department: "Engineering" }, ( result ) => {
        console.log( "Users loaded:", result );
        displayUsers( result );
    } );
}

function displayUsers( users ) {
    var html = "<ul>";
    users.forEach( ( user ) => {
        html += `<li>${Setting: user.name not found} (${Setting: user.email not found})</li>`;
    } );
    html += "</ul>";
    document.getElementById( "userList" ).innerHTML = html;
}
</script>

<button onclick="loadUserData()">Load Users</button>
<div id="userList"></div>

AJAX Features:

• 🔗 JavaScript proxy generation for CFCs
• 📥 Dynamic content loading
• 🔄 Bind expressions for automatic updates
• ⚡ Optimized for performance

4. UI Components - Flexible Containers and Elements

Create rich interfaces with pods, divs, and tooltips:

<bx:layout type="hbox" width="100%" style="gap: 20px;">
    <bx:layoutarea>
        <bx:pod title="Statistics" width="250px" height="200px">
            <p><strong>Active Users:</strong> 1,234</p>
            <p><strong>Revenue Today:</strong> $45,678</p>
            <p><strong>Orders Pending:</strong> 89</p>
        </bx:pod>
    </bx:layoutarea>
    
    <bx:layoutarea>
        <bx:pod title="Recent Activity" width="400px" height="200px">
            <ul>
                <li>New user registration</li>
                <li>Order #12345 processed</li>
                <li>Payment received</li>
            </ul>
        </bx:pod>
    </bx:layoutarea>
    
    <bx:layoutarea>
        <bx:pod title="Quick Actions" width="250px" height="200px">
            <button style="width: 100%; margin: 5px 0;">📤 Export Data</button>
            <button style="width: 100%; margin: 5px 0;">📊 Generate Report</button>
            <button style="width: 100%; margin: 5px 0;">💾 Backup System</button>
        </bx:pod>
    </bx:layoutarea>
</bx:layout>

🏢 Real-World Example: Enterprise Dashboard

Here's a complete example showing how to build a sophisticated enterprise dashboard:

<!DOCTYPE html>
<html>
<head>
    <title>Enterprise Dashboard</title>
    <bx:ajaximport tags="layout,grid,pod" />
</head>
<body>
    <bx:layout type="border" fitToWindow="true">
        <!-- Header -->
        <bx:layoutarea position="top" size="70px">
            <header style="background: linear-gradient(90deg, #00FF78 0%, #00DBFF 100%); color: #2c3e50; padding: 15px;">
                <h1>📊 Enterprise Dashboard</h1>
            </header>
        </bx:layoutarea>
        
        <!-- Sidebar Navigation -->
        <bx:layoutarea position="left" size="280px">
            <bx:layout type="accordion">
                <bx:layoutarea title="Navigation">
                    <ul style="list-style: none; padding: 10px;">
                        <li><a href="#ajaxLink( 'dashboard/overview.bxm' )#">📊 Overview</a></li>
                        <li><a href="#ajaxLink( 'dashboard/analytics.bxm' )#">📈 Analytics</a></li>
                        <li><a href="#ajaxLink( 'dashboard/users.bxm' )#">👥 Users</a></li>
                        <li><a href="#ajaxLink( 'dashboard/reports.bxm' )#">📋 Reports</a></li>
                    </ul>
                </bx:layoutarea>
                
                <bx:layoutarea title="Quick Stats" initcollapsed="false">
                    <bx:pod title="Today's Metrics">
                        <p><strong>Active Users:</strong> 1,234</p>
                        <p><strong>Revenue:</strong> $45,678</p>
                        <p><strong>Orders:</strong> 89</p>
                    </bx:pod>
                </bx:layoutarea>
            </bx:layout>
        </bx:layoutarea>
        
        <!-- Main Content Area -->
        <bx:layoutarea position="center">
            <bx:layout type="tab" fillHeight="true">
                <bx:layoutarea title="📊 Overview">
                    <div style="padding: 20px;">
                        <h2>System Overview</h2>
                        <bx:grid 
                            name="summaryGrid" 
                            pageSize="15" 
                            sortable="true"
                            stripeRows="true">
                            <bx:gridcolumn name="metric" header="Metric" width="200" />
                            <bx:gridcolumn name="value" header="Value" width="150" type="numeric" />
                            <bx:gridcolumn name="change" header="Change" width="100" />
                        </bx:grid>
                    </div>
                </bx:layoutarea>
                
                <bx:layoutarea title="📋 Data Management">
                    <div style="padding: 20px;">
                        <h2>User Management</h2>
                        <bx:grid 
                            name="userGrid" 
                            pageSize="20" 
                            sortable="true" 
                            editable="true"
                            selectMode="multi">
                            <bx:gridcolumn name="id" header="ID" width="60" editable="false" />
                            <bx:gridcolumn name="username" header="Username" width="150" />
                            <bx:gridcolumn name="email" header="Email" width="250" />
                            <bx:gridcolumn name="role" header="Role" width="120" />
                            <bx:gridcolumn name="lastLogin" header="Last Login" width="150" type="date" />
                            <bx:gridcolumn name="active" header="Active" width="80" type="boolean" />
                        </bx:grid>
                    </div>
                </bx:layoutarea>
            </bx:layout>
        </bx:layoutarea>
        
        <!-- Footer -->
        <bx:layoutarea position="bottom" size="50px">
            <footer style="background: #ecf0f1; padding: 15px; text-align: center;">
                <p>© 2024 Built with BoxLang UI Compatibility Module</p>
            </footer>
        </bx:layoutarea>
    </bx:layout>
</body>
</html>

📚 Comprehensive Documentation

We've built extensive documentation to help you get started quickly:

Interactive MCP Server

Connect to our Model Context Protocol server for interactive documentation:

https://boxlang.ortusbooks.com/~gitbook/mcp

This allows you to query documentation directly from your development environment, making it easier than ever to find the information you need.

Full Documentation Site

Visit our complete documentation at:

https://boxlang.ortusbooks.com/

You'll find:

• 📖 Complete component reference
• 💡 Step-by-step tutorials
• 🎯 Real-world examples
• 🔧 Troubleshooting guides
• 🚀 Best practices

🛠️ Built-In Functions (BIFs)

The module includes several helpful Built-In Functions to enhance your AJAX and grid functionality:

AJAX Functions

// Generate AJAX-enabled links
ajaxURL = ajaxLink( "content/page1.bxm" );

// Execute function on page load
ajaxOnLoad( "initializePage" );

Grid Functions

// Convert query for grid display with pagination
gridData = queryConvertForGrid( myQuery, page = 1, pageSize = 25 );

🎨 Styling and Customization

All components generate semantic CSS classes for easy customization:

/* Customize tab layouts */
.bx-layout-tab .bx-tab-header.active {
    background: linear-gradient( 90deg, #00FF78 0%, #00DBFF 100% );
    color: #2c3e50;
    font-family: 'Poppins', sans-serif;
}

/* Style data grids */
.bx-grid .bx-grid-row:nth-child( even ) {
    background-color: #f8f9fa;
}

/* Customize pods */
.bx-pod .bx-pod-title {
    background: linear-gradient( 90deg, #00FF78 0%, #00DBFF 100% );
    color: #2c3e50;
    font-family: 'Poppins', sans-serif;
}

🎯 Perfect for CFML Migration

The bx-compat-ui module is specifically designed to make your CFML to BoxLang migration as smooth as possible:

Migration Benefits:

1. Minimal Code Changes - Most of your UI code works as-is
2. Familiar Syntax - Same component names and attributes you already know
3. Gradual Migration - Move components piece by piece
4. Enhanced Performance - Benefit from BoxLang's JVM optimizations
5. Modern Architecture - Built on current web standards

Migration Path:

CFML Application → Install bx-compat-ui → Test Components → Deploy to BoxLang

It's that straightforward!

🚀 Getting Started Today

Ready to start your migration journey? Here's your quick-start checklist:

1. Install the module:

   box install bx-compat-ui
   

2. Update your imports:

   <bx:ajaximport />
   

3. Start using components:

   <bx:layout type="tab">
       <!-- Your content here -->
   </bx:layout>
   

4. Explore the documentation: Visit https://boxlang.ortusbooks.com/

📞 Get Involved

We'd love to hear from you:

• Issues or Questions? Open an issue on our GitHub repository
• Feature Requests? Let us know what you need
• Success Stories? Share how bx-compat-ui helped your migration
• Documentation Improvements? Submit a pull request

🎉 Conclusion

The bx-compat-ui module represents our commitment to making BoxLang adoption seamless for the CFML community. Whether you're migrating an existing application or building something new, this module provides the UI components you need with the familiar syntax you already know.

Stop waiting. Start migrating.

Install bx-compat-ui today and experience the power of BoxLang with the comfort of CFML compatibility.

box install bx-compat-ui

Happy coding! 🚀