PageBuilderExtensions (sample app code)

The PageBuilderExtensions class provides a set of helper methods to make building app models with pages and UI components easier. It offers shortcuts for creating commonly used components such as containers, buttons, inputs, and property bindings, so you can focus on structuring your page logic instead of writing repetitive setup code.

⚠️ Note This code is not part of Bloqs itself. It belongs to the sample app provided as an example of how you can structure your own extensions. You are encouraged to extend it, customize it, and add your own utility methods to better fit the needs of your application.

---

Key Features

• Simplified component creation: Quickly build ContainerComponent, ButtonComponent, HtmlComponent, TextInputComponent, and PropertyValueComponent.

• Layout helpers: Use VerticalContainer and HorizontalContainer to organize components in flexible grid layouts.

• Extensible: Add your own extension methods to adapt the builder to your project’s requirements.

---

Usage Example

Instead of writing boilerplate setup code, you can create a simple page structure like this:

var page = PageBuilderExtensions.VerticalContainer(
    PageBuilderExtensions.Html("<h1>Welcome</h1>"),
    PageBuilderExtensions.TextInput(Guid.NewGuid(), "Name", true),
    PageBuilderExtensions.BuildButton("Submit", "check", Guid.NewGuid())
);

This creates a vertical container with a header, a required text input, and a button linked to a logic block.

---

Full Source Code

public static class PageBuilderExtensions
{
    public static ContainerComponent VerticalContainer(params Component[] components) =>
        ContainerComponent.Create(GridComponent.Vertical([.. components]));

    public static ContainerComponent HorizontalContainer(params Component[] components) =>
        ContainerComponent.Create(GridComponent.Horizontal([.. components]));

    public static ButtonComponent BuildButton(string label, string icon, Guid logicBlockId) =>
        new()
        {
            Label = label,
            Icon = icon,
            ButtonLogic = new() { OnClickLogicBlockId = logicBlockId },
        };

    public static HtmlComponent Html(string content) => new() { HtmlContent = content };

    public static TextInputComponent TextInput(
        Guid propertyId,
        string label,
        bool isRequired = false
    ) =>
        new()
        {
            PropertyId = propertyId,
            Label = label,
            IsRequired = isRequired,
        };

    public static PropertyValueComponent PropertyValue(Guid propertyId) =>
        new() { PropertyId = propertyId };
}

---

With these extensions, building app models becomes more concise and maintainable, while still giving you the flexibility to extend and adapt the approach to your own applications.