Real-world Application of Structural Patterns

We are progressing in our understanding of Structural Patterns. In this lesson, we’ll see how to apply them in a practical example by creating a GUI library. So far, we’ve explored the Adapter, Composite, and Decorator Patterns independently. Now, we’ll integrate these patterns within a GUI library context to form a cohesive project. Note that these patterns are abstract and can be applied in various other scenarios beyond GUI libraries.

Adapter Pattern Recap

Let's quickly revisit the Adapter Pattern. This pattern allows two incompatible interfaces to work together. We accomplish this by creating an adapter class that converts one interface to another. In the context of our GUI library, consider the following interfaces and classes:

interface IWinButton {
    render(): void;
}

class WinButton implements IWinButton {
    render(): void {
        console.log("Rendering a button in a Windows style.");
    }
}

class MacButton {
    display(): void {
        console.log("Rendering a button in a Mac style.");
    }
}

Our WinButton class implements the IWinButton interface with a render method, while the MacButton class has a display method. To adapt MacButton to work within systems expecting an IWinButton interface, we apply the Adapter Pattern by creating an adapter class:

class ButtonAdapter implements IWinButton {
    private button: MacButton;

    constructor(button: MacButton) {
        this.button = button;
    }

    render(): void {
        this.button.display();
    }
}

Here, ButtonAdapter adapts MacButton to the IWinButton interface, allowing it to be used interchangeably. This allows the MacButton instance to be treated like a WinButton.

Intermediate Adapter Steps

First, let's create the MacButton and wrap it with the ButtonAdapter:

const macButton: MacButton = new MacButton();
const winButton: IWinButton = new ButtonAdapter(macButton);
winButton.render(); // Output: Rendering a button in a Mac style.

This code instantiates a MacButton and adapts it using ButtonAdapter, enabling it to render with a Windows-style interface.

Composite Pattern Recap

The Composite Pattern helps us compose objects into tree structures to represent part-whole hierarchies. This allows clients to treat individual objects and compositions of objects uniformly. For our GUI library, we use the Composite Pattern to manage components:

abstract class Component {
    abstract render(): void;
}

Let's create a Container class that will act as a composite class containing other components:

class Container extends Component {
    private components: Component[] = [];

    add(component: Component): void {
        this.components.push(component);
    }

    remove(component: Component): void {
        this.components = this.components.filter(comp => comp !== component);
    }

    render(): void {
        this.components.forEach(component => component.render());
    }
}

We also need a Button class that will be a concrete component:

class Button extends Component {
    render(): void {
        console.log("Rendering a button.");
    }
}

The Container can hold and manage multiple components, such as buttons, efficiently, implementing the Composite Pattern.

Intermediate Composite Steps

Next, we create a Container and add multiple Button elements to it:

const container: Container = new Container();
container.add(new Button());
container.add(new Button());
container.render();
// Output:
// Rendering a button.
// Rendering a button.

This code creates a container and adds two buttons to it, allowing the entire container to be rendered, demonstrating the Composite Pattern in action.

Bringing It All Together

By combining the Adapter and Composite Patterns, we create a flexible GUI library. We have adaptive buttons and composite containers managing multiple GUI elements. This way, we can render complex interfaces with ease, maintaining compatibility and modularity.

Here is a glimpse of how the final structure looks:

const macButton: MacButton = new MacButton();
const winButton: IWinButton = new ButtonAdapter(macButton);
winButton.render();
// Output: Rendering a button in a Mac style.

const container: Container = new Container();
container.add(new Button());
container.add(new Button());
container.render();
// Output:
// Rendering a button.
// Rendering a button.

In this code snippet, we create and adapt a MacButton to an IWinButton, then render it. We also create a Container and add multiple Button elements to it, demonstrating the combination of both Adapter and Composite Patterns in a practical scenario.

Decorator Pattern Recap

The Decorator Pattern allows behavior to be added to individual objects dynamically, without affecting the behavior of other objects from the same class. This pattern is particularly useful for enhancing the functionality of GUI components.

Let's consider the following simple Button class:

class Button extends Component {
    render(): void {
        console.log("Rendering a button.");
    }
}

To dynamically add behavior, such as adding a border or enabling/disabling the button, we use the Decorator Pattern:

abstract class ButtonDecorator extends Component {
    protected button: Component;

    constructor(button: Component) {
        super();
        this.button = button;
    }

    render(): void {
        this.button.render();
    }
}

This ButtonDecorator class encapsulates the Component object and can add additional behavior.

Adding Behavior with Decorators

We can now create specific decorators to enhance our Button:

class BorderDecorator extends ButtonDecorator {
    render(): void {
        this.button.render();
        this.addBorder();
    }

    private addBorder(): void {
        console.log("Adding border.");
    }
}
class EnabledDecorator extends ButtonDecorator {
    render(): void {
        if (this.isEnabled()) {
            this.button.render();
        } else {
            console.log("Button is disabled.");
        }
    }

    private isEnabled(): boolean {
        // Assuming some logic here to determine if the button is enabled
        return true; // Just for demonstration
    }
}

We have now created two decorators — BorderDecorator and EnabledDecorator — that add specific behaviors to buttons.

Intermediate Decorator Steps

Let's see how to use these decorators with a Button:

const button: Button = new Button();
const decoratedButton: Component = new BorderDecorator(button);
decoratedButton.render();
// Output:
// Rendering a button.
// Adding border.

This code wraps a Button object with a BorderDecorator, dynamically adding the border-rendering behavior.

To add multiple decorators, you simply stack them:

const button: Button = new Button();
const decoratedButton: Component = new EnabledDecorator(new BorderDecorator(button));
decoratedButton.render();
// Output:
// If enabled: Rendering a button. Adding border.
// If disabled: Button is disabled.

This code adds both the border and enabled behaviors to the Button.

Combining with Composite and Adapter Patterns

Finally, let's integrate decorators into our existing structure with the Adapter and Composite Patterns:

const macButton: MacButton = new MacButton();
const winButton: IWinButton = new ButtonAdapter(macButton);
const decoratedWinButton: Component = new BorderDecorator({
    render: () => winButton.render()
});
decoratedWinButton.render();
// Output:
// Rendering a button in a Mac style.
// Adding border.

const container: Container = new Container();
const button1: Button = new Button();
const button2: Button = new Button();
const decoratedButton1: Component = new BorderDecorator(button1);
const decoratedButton2: Component = new EnabledDecorator(button2);
container.add(decoratedButton1);
container.add(decoratedButton2);
container.render();
// Output:
// Rendering a button.
// Adding border.
// Rendering a button.

In this extended example, we wrap the adapted MacButton in a BorderDecorator. We also decorate individual Button objects before adding them to the Container.

Complete Code
// Interface for Windows-style buttons
interface IWinButton {
    render(): void;
}

// Windows-style button implementation
class WinButton implements IWinButton {
    render(): void {
        console.log("Rendering a button in a Windows style.");
    }
}

// Mac-style button with a different interface
class MacButton {
    display(): void {
        console.log("Rendering a button in a Mac style.");
    }
}

// Adapter to make MacButton compatible with IWinButton
class ButtonAdapter implements IWinButton {
    private button: MacButton;

    constructor(button: MacButton) {
        this.button = button;
    }

    render(): void {
        this.button.display();
    }
}

// Abstract component for composite and decorator patterns
abstract class Component {
    abstract render(): void;
}

// Composite container for components
class Container extends Component {
    private components: Component[] = [];

    add(component: Component): void {
        this.components.push(component);
    }

    remove(component: Component): void {
        this.components = this.components.filter(comp => comp !== component);
    }

    render(): void {
        this.components.forEach(component => component.render());
    }
}

// Concrete button component
class Button extends Component {
    render(): void {
        console.log("Rendering a button.");
    }
}

// Abstract decorator for components
abstract class ButtonDecorator extends Component {
    protected button: Component;

    constructor(button: Component) {
        super();
        this.button = button;
    }

    render(): void {
        this.button.render();
    }
}

// Decorator that adds a border
class BorderDecorator extends ButtonDecorator {
    render(): void {
        this.button.render();
        this.addBorder();
    }

    private addBorder(): void {
        console.log("Adding border.");
    }
}

// Decorator that enables/disables a button
class EnabledDecorator extends ButtonDecorator {
    render(): void {
        if (this.isEnabled()) {
            this.button.render();
        } else {
            console.log("Button is disabled.");
        }
    }

    private isEnabled(): boolean {
        // Assuming some logic here to determine if the button is enabled
        return true;
    }
}

// Usage examples

const macButton: MacButton = new MacButton();
const winButton: IWinButton = new ButtonAdapter(macButton);
const decoratedWinButton: Component = new BorderDecorator({
    render: () => winButton.render()
});
decoratedWinButton.render();
// Output:
// Rendering a button in a Mac style.
// Adding border.

const container: Container = new Container();
const button1: Button = new Button();
const button2: Button = new Button();
const decoratedButton1: Component = new BorderDecorator(button1);
const decoratedButton2: Component = new EnabledDecorator(button2);
container.add(decoratedButton1);
container.add(decoratedButton2);
container.render();
// Output:
// Rendering a button.
// Adding border.
// Rendering a button.

By incorporating the Decorator Pattern alongside the Adapter and Composite Patterns, we've demonstrated a powerful approach to building extensible and maintainable GUI libraries. This enables you to compose flexible, dynamic behaviors within your GUI components seamlessly.

Conclusion

By merging the Adapter, Composite, and Decorator Patterns, we can build a versatile and efficient GUI library. This combination helps us create adaptive buttons and manage complex GUI elements through composite containers, showcasing how different structural patterns can be used together to enhance design and functionality. This approach not only makes the system more robust but also ensures ease of maintenance and extension.

Previous
Sign up
Join the 1M+ learners on CodeSignal
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal