Components

Component Views

A component view is the HTML that renders a component. In Kestros a component is not tied to a single piece of markup: the view can be supplied by a UI Library or a UI Framework, so the same component can render differently depending on which framework a page uses. Most components also carry a base common view, the fallback Kestros renders when no framework-specific view applies.

What a component view is

A component in Kestros is built from a small set of resources: a definition resource (kes:ComponentType), optionally a dialog and a Sling Model that supplies values, and at least one view. The view is the presentation layer: the HTL markup that turns the component’s content and model values into rendered HTML.

Because the view is a separate resource rather than being baked into the component, one component can carry several views and render differently under different UI Frameworks. The definition, and any dialog or Sling Model, stay the same; only the markup changes.

One component, many views

Views are decoupled from components. A single component, a card for example, can render with Bootstrap markup under one framework and with entirely different markup under another, without changing the component definition or the content authored against it. Which view renders is decided by the UI Framework (or a library it references) resolved for the page being requested.

Where a view lives

A view lives in a versioned folder keyed by the code of the library or framework that provides it: {component}/{library-or-framework-code}/{version}/. That folder holds a content.html (the view markup), or a layouts/ folder for components that support named layouts. The base common view sits at {component}/common/content.html.

components/content/text/              # the text component
  .content.xml                        # kes:ComponentType definition
  common/
    content.html                   # base common view (fallback)
  my-ui-framework/                 # {framework-code}
    1.0.0/                         # {version}
      content.html                 # framework-specific view

The common view

Most components carry a common view at common/content.html. It is the last step in resolution: when neither the resolved UI Framework nor any library it references supplies a view for that component, Kestros renders the common view instead. Giving a component a common view is what lets it render before any framework-specific markup exists.

How a view is resolved

When a page renders a component, Kestros resolves the view against the UI Framework in play for that page. It works through an ordered list of candidates and uses the first one that exists: the framework’s own view (current version first, then earlier versions), then a view from each library the framework references, and finally the component’s common view. The framework’s own view therefore wins over a view inherited from a referenced library, and both win over the common view.

Views are written in HTL

A view’s content.html is written in HTL, the HTML Template Language. The view binds to the component’s Sling Model and reads its values, keeping logic out of the markup. The class shown below is an illustrative project component (a teaser) in the com.example.mysite package, not a built-in component:

<div data-sly-use.model="${'com.example.mysite.application.components.TeaserComponent'}" class="kes-teaser">
  <p data-sly-test="${model.text}">${model.text @ context='html'}</p>
</div>

Components that support more than one markup arrangement expose their variants through a layouts/ folder rather than a single content.html. See Layouts. For the template syntax used inside a view, see Writing HTL.