ServerDrivenComponent Custom Widget

Creating a custom widget with ServerDrivenComponent.

To create a custom widget that uses other Beagle components, just implement the SingleChildComponent interface when there is only one child component, or MultiChildComponent for the widget that uses several other components.

SingleChildComponent

Custom widgets that render a single Beagle component must implement the SingleChildComponent interface.

With the custom widget created, add the SingleChildComponent interface:

@RegisterWidget
class CustomChildWidget(
    val name: String,
    val phone: String,
    val age: Int
): WidgetView(), SingleChildComponent {
    override fun buildView(rootView: RootView): View {
        TODO("Not yet implemented")
    }
}

Step 2: Implement the child property

After adding the SingleChildComponent interface to the widget, override the child property:

@RegisterWidget
class CustomChildWidget(
    val name: String,
    val phone: String,
    val age: Int,
    override val child: ServerDrivenComponent
): WidgetView(), SingleChildComponent {
    override fun buildView(rootView: RootView): View {
        TODO("Not yet implemented")
    }
}

Step 3: Use the component

To use the view generated from the child component, just consider it as a ViewConvertable and call the buildView method:

@RegisterWidget
class CustomChildWidget(
    val name: String,
    val phone: String,
    val age: Int,
    override val child: ServerDrivenComponent
): WidgetView(), SingleChildComponent {
    override fun buildView(rootView: RootView): View {
        val builtChild = (child as ViewConvertable).buildView(rootView)
    }
}

MultiChildComponent

Custom widgets that render one or more Beagle components must implement the MultiChildComponent interface.

After creating the custom widget, add the MultiChildComponent interface:

@RegisterWidget
class CustomChildWidget(
    val name: String,
    val phone: String,
    val age: Int
): WidgetView(), MultiChildComponent {
    override fun buildView(rootView: RootView): View {
        TODO("Not yet implemented")
    }
}

Step 2: Implement the children property

After adding the MultiChildComponent interface to the widget, override the children property.

@RegisterWidget
class CustomChildWidget(
    val name: String,
    val phone: String,
    val age: Int,
    override val children: List<ServerDrivenComponent>
): WidgetView(), SingleChildComponent {
    override fun buildView(rootView: RootView): View {
        TODO("Not yet implemented")
    }
}

Step 3: Use the component

To use the view generated from the children component, just consider each one as ViewConvertable and call their buildView method:

@RegisterWidget
class CustomChildWidget(
    val name: String,
    val phone: String,
    val age: Int,
    override val children: List<ServerDrivenComponent>
): WidgetView(), SingleChildComponent {
    override fun buildView(rootView: RootView): View {
        children.forEach { child ->
            val builtChild = (child as ViewConvertable).buildView(rootView)
        }
    }
}

It’s done! Your component now uses other Beagle components!


Last modified September 17, 2021: Reviewed Android section (#773) (e4c75e98)