Custom component using multiple built-in components doesn't nested

[brianchu]

I create a custom component and reusing some container, text, image from build-in components. For single case (just a container), it works. but if I add more container and other components, they did not show up. I thought when the first outmost container's buildView(rootView) is called, it will go down the chain and create all components, or is that not support?

@RegisterWidget("testWidget")
data class TestWidget(
    val backgroundImageUrl: Bind<ImagePath>,
    val icon: Bind<ImagePath>,
    val styleId: String? = null,
    val text: Bind<String>
) : WidgetView() {

    override fun buildView(rootView: RootView): View {
        return Container(
            children =
            listOf(
                Image(backgroundImageUrl).also {
                    style = Style(
                        positionType = PositionType.ABSOLUTE,
                        size = Size(
                            height = UnitValue(constant(100.0), UnitType.PERCENT),
                            width = UnitValue(constant(100.0), UnitType.PERCENT)
                        )
                    )
                },

                Container(
                    children = listOf(
                        Container(
                            children = listOf(
                                Container(
                                    children = listOf(
                                        Container(
                                            children =
                                            listOf(
                                                Text(
                                                    text = text,
                                                    textColor = constant("#ffff00")
                                                ).apply {
                                                    style = Style(
                                                        margin = EdgeValue(bottom = UnitValue(constant(7.0), UnitType.REAL))
                                                    )
                                                },
                                                Text(text = text),
                                            )
                                        ),
                                        // etc etc etc
                                        Container()
                                    )
                                ).apply {
                                    style = Style(
                                        flex = Flex(
                                            justifyContent = JustifyContent.SPACE_BETWEEN,
                                            flex = 1.0
                                        ),
                                        positionType = PositionType.ABSOLUTE,
                                        padding = EdgeValue(
                                            left = UnitValue(constant(16.0), UnitType.REAL),
                                            right = UnitValue(constant(16.0), UnitType.REAL)
                                        )
                                    )
                                }
                            )
                        )
                    )
                ).also {
                    style = Style(
                        size = Size(
                            height = UnitValue(constant(100.0), UnitType.PERCENT),
                            width = UnitValue(constant(100.0), UnitType.PERCENT)
                        )
                    )
                }
            ),
            styleId = styleId
        ).also {
            style = Style(
                size = Size(height = UnitValue(constant(250.0), UnitType.REAL), width = UnitValue(constant(160.0), UnitType.REAL)),
                margin = EdgeValue(all = UnitValue(constant(10.0), UnitType.REAL)),
            )
        }
            .buildView(rootView)
    }

}

[Tiagoperes]

Hi Brian.

We decided not to support this kind of view construction on version 1.10. In that version, support for declarative UI writing from within Beagle Android was deprecated. On version 2.0 it was removed.

We did this because we don't want developers to use Beagle for writing declarative UIs in the frontend. We understand that Jetpack Compose is a much better tool for this and we want Beagle Components to be used only in Server Driven Views.

However, if there are cases where this is needed, we're open to return this feature to Beagle. Can you please explain us your use case? Why exactly are you creating this component in the frontend instead of the backend? Does this relate to the issue #1837? If yes, I think your suggestion there would be a better approach.

[Tiagoperes]

Hi, I'm passing here just to let you know that the Beagle team is taking some vacation time.

We'll take 2 weeks off and be back at Feb 06. Feel free to keep commenting in this issue and we'll address it as soon as we're back.

[Tiagoperes]

Closing this due to inactivity.