Desarrollo de un componente personalizado para AEM Screens developing-a-custom-component-for-aem-screens

AEM,5 más el último paquete de funciones de Screens.

Reproductor de AEM Screens

Entorno de desarrollo local

Entrada Administrador de paquetes CRX, compruebe que están instalados los dos paquetes siguientes:

1. screens-weretail-run.ui.content-0.0.1-SNAPSHOT.zip
2. screens-weretail-run.ui.apps-0.0.1-SNAPSHOT.zip

Screens We.Retail Ejecutar Ui.Apps y Ui.Content paquetes instalados mediante el Administrador de paquetes CRX.

El screens-weretail-run.ui.apps El paquete instala el código debajo de /apps/weretail-run.

Este paquete contiene el código responsable de procesar los componentes personalizados del proyecto. Este paquete incluye código de componente y cualquier JavaScript o CSS necesario. Este paquete también incrusta screens-weretail-run.core-0.0.1-SNAPSHOT.jar que contiene cualquier código Java™ necesario para el proyecto.

Representación del código ui.apps en CRXDE Lite

El Hello World es solo un marcador de posición. A lo largo del tutorial, se añade una funcionalidad que permite al autor actualizar el mensaje mostrado por el componente.

El screens-weretail-run.ui.content instala el código debajo de:

• /conf/we-retail-run
• /content/dam/we-retail-run
• /content/screens/we-retail-run

Este paquete contiene el contenido de inicio y la estructura de configuración necesaria para el proyecto. /conf/we-retail-run contiene todas las configuraciones de We.Retail Ejecutar proyecto. /content/dam/we-retail-run incluye el inicio de recursos digitales para el proyecto. /content/screens/we-retail-run contiene la estructura de contenido Screens. AEM El contenido debajo de todas estas rutas se actualiza principalmente en la sección de rutas de acceso de la. Para promover la coherencia entre entornos (local, Dev, Stage, Prod), a menudo se guarda una estructura de contenido base en el control de código fuente.

Vaya a AEM Screens > We.Retail Ejecutar proyecto:

AEM En el menú Inicio de la, seleccione Screens y el icono. Compruebe el We.Retail Se ve Ejecutar proyecto.

Entrada CRXDE-Lite http://localhost:4502/crx/de/index.jsp (o el IDE de su elección), vaya a /apps/weretail-run/components/content/helloworld.

Añada las siguientes propiedades a helloworld componente:

    jcr:title="Hello World"
    sling:resourceSuperType="foundation/components/parbase"
    componentGroup="We.Retail Run - Content"

Propiedades de /apps/weretail-run/components/content/helloworld

El Hello World El componente amplía el foundation/components/parbase para que pueda utilizarse correctamente dentro de un canal de secuencia.

Cree un archivo debajo de /apps/weretail-run/components/content/helloworld nombrado helloworld.html.

Rellene el archivo con lo siguiente:

<!--/*

 /apps/weretail-run/components/content/helloworld/helloworld.html

*/-->

<!--/* production: preview authoring mode + unspecified mode (i.e. on publish) */-->
<sly data-sly-test.production="${wcmmode.preview || wcmmode.disabled}" data-sly-include="production.html" />

<!--/* edit: any other authoring mode, i.e. edit, design, scaffolding, etc. */-->
<sly data-sly-test="${!production}" data-sly-include="edit.html" />

Los componentes de Screens requieren dos procesamientos diferentes, en función de qué modo de creación se está utilizando:

1. Producción: Modo de vista previa o publicación (wcmmode=disabled)
2. Editar: se utiliza para todos los demás modos de creación, es decir, edición, diseño, andamiaje, desarrollador…

helloworld.htmlactúa como un conmutador, comprobando qué modo de creación está activo y redirigiendo a otro script HTL. Una convención común que utilizan los componentes de pantallas es tener un edit.html para el modo de edición y una production.html para el modo de producción.

Cree un archivo debajo de /apps/weretail-run/components/content/helloworld nombrado production.html.

Rellene el archivo con lo siguiente:

<!--/*
 /apps/weretail-run/components/content/helloworld/production.html

*/-->

<div data-duration="${properties.duration}" class="cmp-hello-world">
 <h1 class="cmp-hello-world__message">${properties.message}</h1>
</div>

Lo anterior es el marcado de producción para el componente Hello World. A data-duration se incluye ya que el componente se utiliza en un canal de secuencia. El data-duration El canal de secuencia utiliza el atributo para saber durante cuánto tiempo se va a mostrar un elemento de secuencia.

El componente procesa un div y un h1 etiqueta con texto. ${properties.message} es una parte del script HTL que genera el contenido de una propiedad JCR llamada message. Más adelante se crea un cuadro de diálogo que permite al usuario introducir un valor para la variable message texto de propiedad.

Tenga en cuenta también que la notación BEM (Modificador de elementos de bloque) se utiliza con el componente. BEM es una convención de codificación CSS que facilita la creación de componentes reutilizables. BEM es la notación utilizada por AEM Componentes principales.

Cree un archivo debajo de /apps/weretail-run/components/content/helloworld nombrado edit.html.

Rellene el archivo con lo siguiente:

<!--/*

 /apps/weretail-run/components/content/helloworld/edit.html

*/-->

<!--/* if message populated */-->
<div
 data-sly-test.message="${properties.message}"
 class="aem-Screens-editWrapper cmp-hello-world">
 <p class="cmp-hello-world__message">${message}</p>
</div>

<!--/* empty place holder */-->
<div data-sly-test="${!message}"
     class="aem-Screens-editWrapper cq-placeholder cmp-hello-world"
     data-emptytext="${'Hello World' @ i18n, locale=request.locale}">
</div>

Lo anterior es el marcado editado para el componente Hello World. El primer bloque muestra una versión editada del componente si se ha rellenado el mensaje de diálogo.

El segundo bloque se representa si no se ha introducido ningún mensaje de diálogo. El cq-placeholder y data-emptytext procesar la etiqueta Hello World como colocador en ese caso. La cadena de la etiqueta se puede internacionalizar con i18n para admitir la creación en varias configuraciones regionales.

Cuadro de diálogo Copiar imagen de Screens para utilizarlo en el componente Hello World.

Es más fácil comenzar desde un cuadro de diálogo existente y luego realizar modificaciones.

1. Copie el cuadro de diálogo de: /libs/screens/core/components/content/image/cq:dialog
2. Pegue el cuadro de diálogo debajo de /apps/weretail-run/components/content/helloworld

Actualice el cuadro de diálogo Hola a todos para incluir una ficha para el mensaje.

Actualice el cuadro de diálogo para que coincida con lo siguiente. La estructura del nodo JCR del cuadro de diálogo final se presenta a continuación en XML:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="https://sling.apache.org/jcr/sling/1.0" xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0" xmlns:nt="https://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Hello World"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/tabs"
        size="L">
        <items jcr:primaryType="nt:unstructured">
            <message
                jcr:primaryType="nt:unstructured"
                jcr:title="Message"
                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
                <items jcr:primaryType="nt:unstructured">
                    <column
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                            <message
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                fieldDescription="Message for component to display"
                                fieldLabel="Message"
                                name="./message"/>
                        </items>
                    </column>
                </items>
            </message>
            <sequence
                jcr:primaryType="nt:unstructured"
                jcr:title="Sequence"
                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
                <items jcr:primaryType="nt:unstructured">
                    <column
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                            <duration
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
                                defaultValue=""
                                fieldDescription="Amount of time the image is shown in the sequence, in milliseconds"
                                fieldLabel="Duration (milliseconds)"
                                min="0"
                                name="./duration"/>
                        </items>
                    </column>
                </items>
            </sequence>
        </items>
    </content>
</jcr:root>

El campo de texto del mensaje se guarda en una propiedad denominada message y que el campo numérico de la Duración se guarde en una propiedad denominada duration. Ambas propiedades tienen referencias en /apps/weretail-run/components/content/helloworld/production.html por HTL como ${properties.message} y ${properties.duration}.

Hello World - diálogo completado

Cree una carpeta para las bibliotecas del lado del cliente para el componente Hello World.

Debajo /apps/weretail-run/components/content/helloworld, cree una carpeta llamada clientlibs.

Debajo del clientlibs carpeta, cree un nodo llamado shared de tipo cq:ClientLibraryFolder.

Agregue las siguientes propiedades a la biblioteca de cliente compartida:

• allowProxy | Booleano | true

• categories| Cadena[] | cq.screens.components

Propiedades de /apps/weretail-run/components/content/helloworld/clientlibs/shared

La propiedad categories es una cadena que identifica la biblioteca de cliente. La categoría cq.screens.components se utiliza en los modos Edición y Previsualización/Producción. Por lo tanto, cualquier CSS/JS definido en sharedclientlib se carga en todos los modos.

Se recomienda no exponer nunca ninguna ruta directamente a /apps en un entorno de producción. La propiedad allowProxy garantiza que se haga referencia a la biblioteca de cliente CSS y JS mediante un prefijo of/etc.clientlibs.

Crear archivo con el nombre css.txt debajo de la carpeta compartida.

Rellene el archivo con lo siguiente:

#base=css

styles.less

Cree una carpeta llamada css debajo de shared carpeta. Añada un archivo llamado style.less debajo de css carpeta. La estructura de las bibliotecas de cliente debería tener este aspecto:

En lugar de escribir CSS directamente, este tutorial utiliza LESS. MENOS es un precompilador de CSS popular que admite variables, mezclas y funciones CSS. AEM Las bibliotecas de cliente de admiten de forma nativa la compilación LESS. AEM Sass u otros pre-compiladores pueden ser utilizados pero deben ser compilados fuera de la.

Rellenar /apps/weretail-run/components/content/helloworld/clientlibs/shared/css/styles.less con lo siguiente:

/**
    Shared Styles
   /apps/weretail-run/components/content/helloworld/clientlibs/shared/css/styles.less

**/

.cmp-hello-world {
    background-color: #fff;

 &__message {
  color: #000;
  font-family: Helvetica;
  text-align:center;
 }
}

Copie y pegue shared carpeta de biblioteca de cliente para crear una biblioteca de cliente llamada production.

Copie la biblioteca de cliente compartida para crear una biblioteca de cliente de producción.

Actualice el categories propiedad de la biblioteca de cliente de producción que se va a almacenar cq.screens.components.production.

Esto garantiza que los estilos solo se carguen en el modo de previsualización/producción.

Propiedades de /apps/weretail-run/components/content/helloworld/clientlibs/production.

Rellenar /apps/weretail-run/components/content/helloworld/clientlibs/production/css/styles.less con lo siguiente:

/**
    Production Styles
   /apps/weretail-run/components/content/helloworld/clientlibs/production/css/styles.less

**/
.cmp-hello-world {

    height: 100%;
    width: 100%;
    position: fixed;

 &__message {

  position: relative;
  font-size: 5rem;
  top:25%;
 }
}

Los estilos anteriores muestran el mensaje centrado en el centro de la pantalla, pero solo en el modo Producción.

Entrada CRXDE Lite http://localhost:4502/crx/de/index.jsp#/apps/settings/wcm/designs, vaya a /apps/settings/wcm/designs.

Cree un nodo debajo de la carpeta diseños, con el nombre we-retail-run con un tipo de cq:Page.

Debajo del we-retail-run , agregue otro nodo llamado jcr:content de tipo nt:unstructured. Añada las siguientes propiedades a jcr:content nodo:

Página de diseño en /apps/settings/wcm/designs/we-retail-run.

AEM En el menú Inicio de la, vaya a Screens > We.RetailEjecutar > y seleccione Canales.

Seleccione el Crear botón

1. Elegir Crear entidad

En el asistente Crear:

Paso de plantilla: elegir Canal de secuencia

1. Paso Propiedades

• Pestaña básica > Título = Canal inactivo
• Pestaña Canal > marcar Canal en línea

Abra las propiedades de página del canal inactivo.

Actualice el campo Diseño para que señale a /apps/settings/wcm/designs/we-retail-run, la página de diseño creada en la sección anterior.

Configuración de diseño que señala a /apps/settings/wcm/designs/we-retail-run

Edite el canal inactivo recién creado para poder abrirlo.

Cambiar el modo de página a Diseño Modo.

1. Seleccione el llave Icono en Parsys para que pueda configurar los componentes permitidos.

2. Seleccione el Screens y el grupo We.RetailEjecutar: contenido grupo.

Cambiar el modo de página a Editar. Ahora, el componente Hello World se puede agregar a la página y combinarse con otros componentes de canal de secuencia.

Entrada CRXDE Lite http://localhost:4502/crx/de/index.jsp#/apps/settings/wcm/designs/we-retail-run/jcr%3Acontent/sequencechannel/par, vaya a /apps/settings/wcm/designs/we-retail-run/jcr:content/sequencechannel/par. Observe el components La propiedad ahora incluye group:Screens, group:We.Retail Run - Content.

Configuración de diseño en /apps/settings/wcm/designs/we-retail-run