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.

Scene configuration content xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
        jcr:primaryType="sling:OrderedFolder"
        jcr:title="Pages Components Scene"
        sling:resourceType="composum/nodes/console/scene"
        key="cpmcomp"
        template="/libs/composum/pages/components/scene/template"
        placeholder="/libs/composum/pages/components/scene/placeholder.html">
    <edit jcr:primaryType="nt:unstructured"
            jcr:title="Pages Editor"
            jcr:description="Composum Pages Components editor scene"
            uri="/bin/edit.html${path}"/>
    <view jcr:primaryType="nt:unstructured"
            jcr:title="Pages Preview"
            jcr:description="Composum Pages Components preview scene"
            uri="${path}.html"/>
</jcr:root>

/libs/composum/pages/components/scene/content

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.

Scene page template xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cpp="http://sling.composum.com/pages/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
        xmlns:jcr="http://www.jcp.org/jcr/1.0"
        jcr:primaryType="cpp:Page">
    <jcr:content jcr:primaryType="cpp:PageContent"
            jcr:title="'${type}' Scene"
            jcr:description="a Composum Nodes scene page for the Pages Component '${type}'"
            sling:resourceType="composum/pages/components/page/scene"
            templateRef="composum/pages/components/templates/page/scene"
            isTemplate="{Boolean}false">
        <main jcr:primaryType="cpp:Container" sling:resourceType="composum/pages/components/container/parsys">
            <row jcr:primaryType="cpp:Container"
                    sling:resourceType="composum/pages/components/container/row"
                    columns="-12-">
                <column-0 jcr:primaryType="cpp:Container"
                        sling:resourceType="composum/pages/components/container/row/column">
                    <sample jcr:primaryType="cpp:Element" sling:resourceType="${type}"/>
                </column-0>
            </row>
        </main>
    </jcr:content>
</jcr:root>

/libs/composum/pages/components/scene/template/.content.xml

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.

AEM Foundation scene declaration xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
        xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
        xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
        jcr:primaryType="sling:OrderedFolder"
        sling:resourceType="composum/nodes/console/scene"
        jcr:title="AEM Foundation Scene"
        disabled="{Boolean}false"
        key="aemfndn"
        placeholder="/libs/composum/nodes/aem/console/scene/placeholder.html"
        template="/libs/composum/nodes/aem/console/scene/template">
    <touch
            jcr:primaryType="nt:unstructured"
            jcr:description="AEM Touch UI editor scene"
            jcr:title="AEM Touch"
            uri="/editor.html${path}.html"/>
    <classic
            jcr:primaryType="nt:unstructured"
            jcr:description="AEM Classic UI editor scene"
            jcr:title="AEM Classic"
            uri="/cf#${path}.html"/>
    <view
            jcr:primaryType="nt:unstructured"
            jcr:description="component content example preview scene"
            jcr:title="AEM Preview"
            uri="${path}.html?wcmmode=disabled"/>
</jcr:root>

/libs/composum/nodes/aem/console/scene/content

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

Scene Template xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0"
        xmlns:jcr="http://www.jcp.org/jcr/1.0"
        xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
        xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
        jcr:primaryType="cq:Page">
    <jcr:content jcr:primaryType="cq:PageContent"
            sling:resourceType="composum/nodes/aem/console/scene/page"
            jcr:description="a AEM Foundation scene page for the component '${type}'"
            jcr:title="'${type}' Scene">
        <par jcr:primaryType="nt:unstructured"
                sling:resourceType="wcm/foundation/components/parsys">
            <sample jcr:primaryType="nt:unstructured"
                    sling:resourceType="${type}"/>
        </par>
    </jcr:content>
</jcr:root>

/libs/composum/nodes/aem/console/scene/template

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).