Kestros is currently in beta, all documentation is subject to change. Additional documentation will be added in subsequent releases. Beta releases are not recommended for production use.

Creating the Component Type Resource

To create a new Component Type, first create a folder with the desired resource name under your project's components directory. For this example, lets create my-first-component under frontend/src/content/jcr_root/apps/${artifactId}/components and create a .content.xml file with the following configuration:

<jcr:root\n    xmlns:sling="http://sling.apache.org/jcr/sling/1.0"\n    xmlns:jcr="http://www.jcp.org/jcr/1.0"\n    jcr:primaryType="kes:ComponentType"\n    jcr:title="My First Component"\n    jcr:description="My first component!"\n    componentGroup="Content Components"\n    sling:resourceSuperType="kestros/commons/components/kestros-parent"/>

Component Views

Once your new component has been added, you will need to either provide a common view, or a view for your UI Framework. The common view will be used whenever a request is made for a UI Framework view that doesn't exist. For example, most sites will not need to provide a custom view for the Text component, so falling back to common is desirable. Let's set up a common view and a view for your new UI Framework

Let's give the common view the following HTML in its content.html:

<p>This is the common view!</p>

Let's give the my-view view the following HTML in its content.html:

<p>This is the my-first-ui-framework view!</p>

Adding a Sling Model

In order to build logic into your Component Type, you will need to create a new Sling Model. Create one for your new Component Type at core/src/main/java/${package}/${artifact}/components/myfirstcomponent/MyFirstComponent.java.

import io.kestros.cms.foundation.content.BaseComponent;\nimport org.apache.commons.lang3.StringUtils;  \nimport org.apache.sling.api.resource.Resource;\nimport org.apache.sling.models.annotations.Model;\n\n@Model(adaptables = Resource.class,\n       resourceType = "${artifactId}/components/content/my-first-component")\npublic class MyFirstComponent extends BaseComponent {\n\n    public String getText() {\n        return getProperty("text", StringUtils.EMPTY);\n    }\n}

Using the Sling Model

Now that the new Sling Model has been created, we can update the Component Type views to use it:

<sly data-sly-use.myFirstComponent="${'${groupId}.{artifactId}.components.myfirstcomponent.MyFirstComponent'}"/>\n\n<p>${myFirstComponent.text}</p>

Creating Components

Now we can create a Component using our new Component Type. Within content/src/content/jcr_root/content/sites/${artifactId}/sites/.content.xml add the following to the main content-area resource:

<my-first-component\n    jcr:primaryType="nt:unstructured"\n    sling:resourceType="${artifactId}/components/content/my-first-component"\n    text="Hello World!"/>