Components

Components are the fundamental building blocks of CBWIRE applications. They encapsulate both the data and behavior needed to create interactive user interface elements that respond to user actions without requiring full page refreshes. Think of components as self-contained, reusable pieces of functionality that manage their own state and handle their own user interactions.

Components can be as big or small as you like. For example, you may have a Signup form component that covers multiple steps or a simple button component that you reuse throughout your application.

Each CBWIRE component is a ColdBox component (.bx for BoxLang, .cfc for CFML) that extends the base cbwire.models.Component class. This inheritance provides all the reactive functionality and lifecycle methods needed to create dynamic user interfaces. Components follow a clear structure and naming convention, making them easy to organize and maintain as your application grows.

Components are made up of data properties, computed properties, actions, and a template. This separation of concerns keeps your code organized and maintainable while providing the flexibility to create complex interactive experiences.

When a component is rendered, CBWIRE automatically handles the initial setup, manages the component's lifecycle, and coordinates communication between the server and client. This abstraction allows you to focus on your application's business logic rather than the underlying mechanics of creating reactive interfaces.

// ./wires/Counter.bx
class extends="cbwire.models.Component" {

    // Data properties
    data = {
        "counter": 0 // default value
    };
    
    // Action
    function increment() {
        data.counter++;
    }
    
    // Helper method also available to template
    function isEven() {
        return data.counter % 2 == 0;
    }
}

// ./wires/Counter.cfc
component extends="cbwire.models.Component" {

    // Data properties
    data = {
        "counter": 0 // default value
    };
    
    // Action
    function increment() {
        data.counter++;
    }
    
    // Helper method also available to template
    function isEven() {
        return data.counter % 2 == 0;
    }
}

<!--- ./wires/counter.bxm --->
<bx:output>
    <div>
        <h1>My Counter</h1>
        Counter: #counter#<br>
        Is Even: #isEven()#
        <button wire:click="increment">Increment</button>
    </div>
</bx:output>

<!--- ./wires/counter.cfm --->
<cfoutput>
    <div>
        <h1>My Counter</h1>
        Counter: #counter#<br>
        Is Even: #isEven()#
        <button wire:click="increment">Increment</button>
    </div>
</cfoutput>

By default, components are placed in the ./wires folder in the project root. You can change this location using the wiresLocation configuration setting.

Rendering Components

You can render a component using the wire() method.

<!--- ./layouts/Main.bxm|cfm --->
<body>
    <div>
        #wire( name="ShowPosts" )#
    </div>
</body>

<!--- ./views/posts/index.bxm|cfm --->
<h1>My Posts</h1>
#wire( name="ShowPosts" )#

You can call wire() from within your ColdBox layouts, ColdBox views, and also from your component templates ( See Nesting Components ).

External Components

You can render wires from folders and subfolders outside of the default ./wires folder.

<div>
    #wire( name="myFolder.MyComponent" )#
    #wire( name="myFolder.subFolder.MyComponent" )#
</div>

You can also reference components within another ColdBox module by using the @module syntax.

<div>#wire( name="MyComponent@myModule" )#</div>

Passing Parameters

You can pass data into a component as an additional argument using wire().

<body>
    <div>
        #wire( name="ShowPost", params={ "post": post } )#
        #wire( "ShowPost", { "post": post } )#
    </div>
</body>

By passing in parameters, you can create reusable UI components that are unique but similar in functionality. For example, you could make a button component that you reuse throughout your app.

Using Parameters

Parameters are passed into your component's onMount() method. This is an optional method you can add.

<!--- ./views/posts/index.bxm|cfm --->
<div>
    #wire( "ShowPost", { title: "Post 1" } )#
</div>

// ./wires/ShowPost.bx
class extends="cbwire.models.Component" {
    data = {
        "title": ""
    };

    function onMount( params ) {
        data.title = params.title;
    }
}

CBWIRE only executes onMount() once when the component is initially rendered. It is not executed for subsequent update requests of the component.

Auto Populating Data Properties

Properties you pass into your component as params will be automatically populated only if onMount() is not defined and a matching data property is found.

<div>
    #wire( name="ShowPost", params={ title: "Some title" } )#
</div>

If you define an onMount() method, you must manually set any passed parameters inside the method:

// ./wires/ShowPost.bx
class extends="cbwire.models.Component" {
    data = {
        "title": "",
        "author": ""
    };

    function onMount( params ) {
        // Must explicitly set parameters when onMount() is defined
        data.title = params.title;
        data.author = params.author;
    }
}

// ./wires/ShowPost.cfc
component extends="cbwire.models.Component" {
    data = {
        "title" = "",
        "author" = ""
    };

    function onMount( params ) {
        // Must explicitly set parameters when onMount() is defined
        data.title = params.title;
        data.author = params.author;
    }
}

Breaking Change in CBWIRE 5.0: When onMount() is defined, parameters are no longer automatically set to data properties. You must explicitly assign them inside the onMount() method. This change provides more explicit control over component initialization.

Passed-in properties must have a data type of string, boolean, numeric, date, array, or struct.

Nesting Components

You can nest components as much as you need by simply calling wire() from within a template ( See Nesting Components ).

CBWIREController

There may be areas of your application where you need to use wire() but don't have access to it. You can use the CBWIREController object to insert wires anywhere you need.

// property injection
property name="CBWIREController" inject="CBWIREController@cbwire";

// using getInstance
CBWIREController = getInstance( "CBWIREController@cbwire" );

// Creating a wire from controller
CBWIREController.wire( "EditablePage", { contentKey: "someValue" } );

PreviousCBWIRE CLI NextTemplates

Last updated 3 months ago

Was this helpful?

hashtagRendering Components

hashtagExternal Components

hashtagPassing Parameters

hashtagUsing Parameters

hashtagAuto Populating Data Properties

hashtagNesting Components

hashtagCBWIREController

Rendering Components

External Components

Passing Parameters

Using Parameters

Auto Populating Data Properties

Nesting Components

CBWIREController