Component Scenes

live component testing in the Browser

Live Component Scenes

If a Sling component is selected in the Composum Browser view a 'Scene' view is available (since release 2.1). If this view is chosen the set of configured scene view is available if such a configuration can be found.

After selection of the scene view a scene content for the current component can be generated and used in the chosen tool.

Scene Declaration

Scene declaration are searched in the resolvers search paths. Each resource of the resource type 'composum/nodes/console/scene' is used as scene declarations - a declaration in '/apps' hides a declaration with the same key in '/libs'. The found declarations are ordered by their key.

A declaration defines a template for test content creation and a set of tools wich will be applied to the generated content.

Pages Components Scene

This scene declaration is part of the Pages Components package and available if Composum Pages is installed on the system. You can found the declaration in the repository.

supported properties for the declaration:

  • key (required)
    the internal identifier of the scene and the value for scene sorting
  • template (required)
    the path of the content resource used as source to create a scenes content for a component
  • scenesRoot (optional; default: '/var/composum/nodes/scenes')
    the root folder for the scenes content; let it point to your project scenes root if the scenes are needing a root node of a special type
  • placeholder (optional)
    the URI of a content resource wich will be displayed if no scene content prepared for a component
  • disabled (boolean, optional)
    if 'true' the scene plugin is not available; useful to hide a predefined plugin by adding a scene declaration in '/apps' with the same key and 'disabled'='{Boolean}true'

properties of a scenes view

  • jcr:title (required)
    the label the the view in the scene view select box
  • jcr:description (optional)
    a short description used as tooltip ind the scene view select box
  • uri (required)
    the URI pattern to display the editor / tool in the scenes frame with the scene content within
    - use the ${path} variable in the URI as placeholder for the path of the scene content

The scene page template

Each component scene content will be created using the declared page template. This page template implements the necessary page content to test the component of the scene in a complete page environment with needed clientlib references and editing tools initialisation.

available variables for the template:

  • ${type} the path of the component used as the samples resource type
  • ${path} the path of the scene content
  • ${name} the key of the scene declaration

The template element which shows the component to test should be named 'sample' this name is used to create the test target link in the browsers UI.

AEM Foundation Scene

The Nodes for AEM Package is delivered with the following scene declaration blueprint.

The page template of this scene uses page component simply derived from the foundation page.

You should create your own scene definitions. You can define various scene declarations simultaneously.

Ich you want to switch off one of the predefined scenes overlay these scenes and add simply a property 'disabled=true' (bool).