===============
Jetpack Compose
===============
Most mobile applications do not have a deeply nested hierarchy and are generally better to implement using declarative programming.
Method
======
::
squared.settings.composableElements = ["main", "#content", "--boxShadow", "--height=300px"];
squared.settings.composableElements = [{
selector: "main",
android: {
layout_width: "match_parent"
},
tools: {
composableName: "com.example.compose.Preview"
}
}];
squared.settings.createBuildDependencies = true; // Optional
You can also do it using the ``android.substitute`` extension directly inside the *HTML* element.
.. code-block::
:emphasize-lines: 18-19
squared.add(["android.substitute", {
element: {
content: { android: { layout_width: "match_parent" } }
}
}]);
const items = squared.attr("android.substitute", "viewAttributes");
items.push("hint", "buttonTint");
squared.attr("android.substitute", "attributeMapping", {
"android:src": "app:srcCompat", // Rename
"icon": "navigationIcon" // Set "android:icon"
});
squared.parseDocument({
element: document.body,
substitutableElements: [{
selector: "#content",
tag: "androidx.compose.ui.platform.ComposeView",
renderChildren: false
}],
enabledSubstitute: true, // Disabled built-in extensions have convenience toggles
/* OR */
include: ["android.substitute"]
});
Inline
======
.. code-block:: html
:emphasize-lines: 5
.. tip:: Compose will remove child elements by default. You can preserve them by explictly using the **renderChildren** property.
.. code-block:: html
:emphasize-lines: 4
.. tip:: You can also use ``android.substitute`` to create fragments within a layout similar to Compose.