# Compose

### 1. Create your ComponentPropertyClass with properties that you need

* In this example i used checkbox component

> :warning: **Warning:** Here we have some points to consider To avoid unnecessary recompositions at your component. We recommend use the @Immutable and @Stable annotations in your properties. More about it below

* **@immutable**: This guarantee the composition optimization based on the assumption that values read from the type will not change.
* **@stable**: this is used to communicate some guarantees to the compose compiler about how a certain type or function will behave and keep the compose compiler notified about changes

```kotlin
@JsonIgnoreProperties(ignoreUnknown = true)
@Immutable
@Stable
data class CheckBoxProperties(
    @JsonProperty("text") val text: String? = null,
    ... define your properties here
)

```

### 2. Add your Component json object in Dymanic.json

```json
{
    "key": "CraftDCheckBox",
    "value": {
     ... define your properties here
     }
 }
  
```

### 3. Create your Component

> :memo: **Note:** Your composable component must have three properties.

* componentProperties: The mapped properties from json
* modifier: Default for composable componets
* behaviour: This make reference to the component's behaviour, for example: onclick -> for buttons, onchange -> for checkbox etc...

```kotlin
@Composable
fun CraftDCheckBox(
    checkboxProperties: CheckBoxProperties,
    modifier: Modifier = Modifier,
    onChecked: (Boolean) -> Unit 
) {
   ... place your code
}
```

### 4. Create your Component Builder

> :memo: **Note:** This Builder must extend CraftBuilder Class and override craft method.

```kotlin
class CraftDCheckBoxBuilder(
    override val key: String = CraftDComponentKey.CHECK_BOX_COMPONENT.key
) :
    CraftDBuilder {
    @Composable
    override fun craft(model: SimpleProperties, listener: CraftDViewListener) {
        val checkBoxProperties = model.value.convertToVO<CheckBoxProperties>()
        CraftDCheckBox(checkBoxProperties) {
            checkBoxProperties.actionProperties?.let { listener.invoke(it) }
        }
    }
}
```

### 5. In your screen you can add the builder inside of CraftBuilderManager

```kotlin
@Composable
fun InitialScreen(
    vm: SampleCraftDComposeViewModel
) {
    val properties by vm.properties.collectAsStateWithLifecycle()
    val dynamicBuilder = remember {
        CraftDBuilderManager().add(
           CraftDCheckBoxBuilder()
        )
    }
    LaunchedEffect(Unit) {
        vm.loadProperties()
    }

    CraftDynamic(
        properties = properties,
        dynamicBuilder = dynamicBuilder
    ) {
        //Component click return to do something
    }
}
```

#### So now enjoy your component!!!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://codandotv.gitbook.io/craftd/how-to-use/android/compose.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.