components/dev.fritz2.components.foundations/Component

Component

Marker interface that every component should implement, so that the central render method appears in a unified way throughout this framework.

The render method has to be implemented in order to do the actual rendering of one component. This reduces the boilerplate code within the corresponding factory function(s):

open class MyComponent: Component {
     override fun render(...) {
         // some content rendering
     }
}

RenderContext.myComponent(
     // most params omitted
     build: MyComponent.() -> Unit = {}
) {
     MyComponent().apply(build).render(this, /* params */)
      //                         ^^^^^^
      //                         just start the rendering by one additional call!
 }

Often a component needs additional parameters that are passed into the factory functions (remember that those should be located starting after the `styling` parameter in first position and before the `baseClass` parameter) Typical use cases are Stores or list of items, as for RenderContext.checkboxGroup for example. Those additional parameters should be passed via constructor injection into the component class:

open class MyComponent(protected val items: List<String>, protected val store: Store<String>?): Component {
     override fun render(...) {
         // some content rendering with access to the ``items`` and the ``store``
     }
}

RenderContext.myComponent(
     styling: BasicParams.() -> Unit,
     items: List<String>,          // two additional parameters
     value: Store<String>? = null, // after ``styling`` and before ``baseClass``!
     baseClass: StyleClass,
     id: String?,
     prefix: String
     build: MyComponent.() -> Unit = {}
) {
     MyComponent(items, store) // inject additional parameters
         .apply(build)
         .render(this, styling, baseClass, id, prefix) // pass context + regular parameters
}