Conceptos básicos de componentes component-basics
En este capítulo, vamos a explorar la tecnología subyacente de un componente de sitios de Adobe Experience Manager AEM () a través de una sencilla HelloWorld
ejemplo. Se realizan pequeñas modificaciones en un componente existente, que cubren temas de creación, HTL, modelos Sling y bibliotecas del lado del cliente.
Requisitos previos prerequisites
Revise las herramientas y las instrucciones necesarias para configurar una entorno de desarrollo local.
El IDE utilizado en los vídeos es Código de Visual Studio y el AEM Sincronización de VSCode con la plugin.
Objetivo objective
- Aprenda la función que desempeñan las plantillas HTL y los modelos Sling para procesar dinámicamente el HTML.
- Descubra cómo se utilizan los cuadros de diálogo para facilitar la creación de contenido.
- Conozca los conceptos básicos de las bibliotecas del lado del cliente para incluir CSS y JavaScript para admitir un componente.
Lo que va a generar what-build
En este capítulo, se realizan varias modificaciones en un HelloWorld
componente. Al realizar actualizaciones en HelloWorld
AEM componente, aprenderá sobre las áreas clave del desarrollo de componentes de la red de trabajo de la red de la red de.
Proyecto de inicio de capítulo starter-project
Este capítulo se basa en un proyecto genérico generado por el AEM Tipo de archivo del proyecto. Vea el siguiente vídeo y revise la requisitos previos para empezar.
Abra un nuevo terminal de línea de comandos y realice las siguientes acciones.
-
En un directorio vacío, clone el aem-guides-wknd repositorio:
code language-shell $ git clone git@github.com:adobe/aem-guides-wknd.git --branch tutorial/component-basics-start --single-branch
note note NOTE De forma opcional, puede seguir utilizando el proyecto generado en el capítulo anterior, Configuración del proyecto. -
Vaya a
aem-guides-wknd
carpeta.code language-shell $ cd aem-guides-wknd
-
AEM Genere e implemente el proyecto en una instancia local de con el siguiente comando:
code language-shell $ mvn clean install -PautoInstallSinglePackage
note note NOTE AEM Si se utiliza la versión 6.5 o 6.4, se debe anexar la variable classic
de perfil a cualquier comando de Maven.code language-shell $ mvn clean install -PautoInstallSinglePackage -Pclassic
-
Importe el proyecto en su IDE preferido siguiendo las instrucciones para configurar un entorno de desarrollo local.
Creación de componentes component-authoring
Los componentes se pueden considerar como pequeños componentes modulares de una página web. Para reutilizar componentes, estos deben poder configurarse. Esto se realiza a través del cuadro de diálogo de autor. AEM A continuación, vamos a crear un componente simple e inspeccionar cómo se conservan los valores del cuadro de diálogo en los puntos de vista de la interfaz de usuario de la interfaz de usuario de la.
A continuación se muestran los pasos de alto nivel realizados en el vídeo anterior.
- Cree una página llamada Conceptos básicos de componentes debajo Sitio WKND
>
US>
en. - Añada el Componente Hello World a la página recién creada.
- Abra el cuadro de diálogo del componente e introduzca un texto. Guarde los cambios para ver el mensaje que se muestra en la página.
- Cambie al modo de desarrollador y vea la ruta de contenido en CRXDE-Lite e inspeccione las propiedades de la instancia del componente.
- Utilice CRXDE-Lite para ver la
cq:dialog
yhelloworld.html
script desde/apps/wknd/components/content/helloworld
.
Lenguaje de plantilla de HTML (HTL) y cuadros de diálogo htl-dialogs
Lenguaje de plantilla de HTML o HTL AEM es un lenguaje ligero de creación de plantillas del lado del servidor que utilizan los componentes de la para procesar contenido.
Cuadros de diálogo defina las configuraciones disponibles que se pueden realizar para un componente.
A continuación, vamos a actualizar el HelloWorld
Script HTL para mostrar un saludo adicional antes del mensaje de texto.
A continuación se muestran los pasos de alto nivel realizados en el vídeo anterior.
-
Cambie al IDE y abra el proyecto en
ui.apps
módulo. -
Abra el
helloworld.html
y actualice el HTML Markup. -
Utilice las herramientas IDE como AEM Sincronización de VSCode con la AEM para sincronizar el cambio de archivo con la instancia de la instancia local de la.
-
Vuelva al explorador y observe que el procesamiento del componente ha cambiado.
-
Abra el
.content.xml
que define el cuadro de diálogo deHelloWorld
componente en:code language-plain <code>/aem-guides-wknd/ui.apps/src/main/content/jcr_root/apps/wknd/components/helloworld/_cq_dialog/.content.xml
-
Actualice el cuadro de diálogo para añadir un campo de texto adicional llamado Título con el nombre de
./title
:code language-xml <?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" 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" jcr:primaryType="nt:unstructured" jcr:title="Properties" sling:resourceType="cq/gui/components/authoring/dialog"> <content jcr:primaryType="nt:unstructured" 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"> <title jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/textfield" fieldLabel="Title" name="./title"/> <text jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/textfield" fieldLabel="Text" name="./text"/> </items> </column> </items> </content> </jcr:root>
-
Vuelva a abrir el archivo
helloworld.html
, que representa la secuencia de comandos HTL principal responsable de procesar elHelloWorld
componente de la siguiente ruta:code language-plain <code>/aem-guides-wknd.ui.apps/src/main/content/jcr_root/apps/wknd/components/helloworld/helloworld.html
-
Actualizar
helloworld.html
para representar el valor de Saludo textfield como parte de unH1
etiqueta:code language-html <div class="cmp-helloworld" data-cmp-is="helloworld"> <h1 class="cmp-helloworld__title">${properties.title}</h1> ... </div>
-
AEM Implemente los cambios en una instancia local de con el complemento para desarrolladores o con sus habilidades con Maven.
Modelos Sling sling-models
Los modelos Sling son objetos Java™ "POJO" (Plain Old Java™ Objects) impulsados por anotaciones que facilitan la asignación de datos de las variables JCR a Java™. AEM También proporcionan varias otras sutilezas cuando se desarrollan en el contexto de la.
A continuación, vamos a realizar algunas actualizaciones en el HelloWorldModel
Modelo Sling para aplicar lógica empresarial a los valores almacenados en el JCR antes de enviarlos a la página.
-
Abra el archivo
HelloWorldModel.java
, que es el modelo Sling utilizado conHelloWorld
componente.code language-plain <code>/aem-guides-wknd.core/src/main/java/com/adobe/aem/guides/wknd/core/models/HelloWorldModel.java
-
Añada las siguientes instrucciones de importación:
code language-java import org.apache.commons.lang3.StringUtils; import org.apache.sling.models.annotations.DefaultInjectionStrategy;
-
Actualice el
@Model
anotación para utilizar unDefaultInjectionStrategy
:code language-java @Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL) public class HelloWorldModel { ...
-
Añada las siguientes líneas a
HelloWorldModel
para asignar los valores de las propiedades JCR del componentetitle
ytext
a variables Java™:code language-java ... @Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL) public class HelloWorldModel { ... @ValueMapValue private String title; @ValueMapValue private String text; @PostConstruct protected void init() { ...
-
Añada el siguiente método
getTitle()
a laHelloWorldModel
clase, que devuelve el valor de la propiedad denominadatitle
. Este método agrega la lógica adicional para devolver un valor de cadena de "Valor predeterminado aquí". si la propiedadtitle
es nulo o está en blanco:code language-java /*** * * @return the value of title, if null or blank returns "Default Value here!" */ public String getTitle() { return StringUtils.isNotBlank(title) ? title : "Default Value here!"; }
-
Añada el siguiente método
getText()
a laHelloWorldModel
clase, que devuelve el valor de la propiedad denominadatext
. Este método transforma la cadena en todos los caracteres en mayúsculas.code language-java /*** * * @return All caps variation of the text value */ public String getText() { return StringUtils.isNotBlank(this.text) ? this.text.toUpperCase() : null; }
-
Cree e implemente el paquete desde el
core
módulo:code language-shell $ cd core $ mvn clean install -PautoInstallBundle
note note NOTE AEM Para el uso de 6.4/6.5, se utiliza: mvn clean install -PautoInstallBundle -Pclassic
-
Actualizar el archivo
helloworld.html
enaem-guides-wknd.ui.apps/src/main/content/jcr_root/apps/wknd/components/content/helloworld/helloworld.html
para utilizar los métodos recién creados delHelloWorld
modelo.El
HelloWorld
Se crea una instancia del modelo para esta instancia de componente mediante la directiva HTL:data-sly-use.model="com.adobe.aem.guides.wknd.core.models.HelloWorldModel"
, guardando la instancia en la variablemodel
.El
HelloWorld
La instancia de modelo de ya está disponible en HTL a través de lamodel
usando la variableHelloWord
. Estas invocaciones a estos métodos pueden utilizar sintaxis de método abreviada, por ejemplo:${model.getTitle()}
se puede abreviar como${model.title}
.Del mismo modo, todos los scripts HTL se insertan con objetos globales a los que se puede acceder mediante la misma sintaxis que los objetos del modelo Sling.
code language-html <div class="cmp-helloworld" data-cmp-is="helloworld" data-sly-use.model="com.adobe.aem.guides.wknd.core.models.HelloWorldModel"> <h1 class="cmp-helloworld__title">${model.title}</h1> <div class="cmp-helloworld__item" data-sly-test="${properties.text}"> <p class="cmp-helloworld__item-label">Text property:</p> <pre class="cmp-helloworld__item-output" data-cmp-hook-helloworld="property">${properties.text}</pre> </div> <div class="cmp-helloworld__item" data-sly-test="${model.text}"> <p class="cmp-helloworld__item-label">Sling Model getText() property:</p> <pre class="cmp-helloworld__item-output" data-cmp-hook-helloworld="property">${model.text}</pre> </div> </div>
-
AEM Implemente los cambios en una instancia local de con el complemento Eclipse Developer o con sus habilidades con Maven.
Bibliotecas del cliente client-side-libraries
Bibliotecas del cliente, clientlibs
en pocas palabras, proporciona un mecanismo para organizar y administrar los archivos CSS y JavaScript necesarios para una implementación de AEM Sites. AEM Las bibliotecas del lado del cliente son la forma estándar de incluir CSS y JavaScript en una página de.
El ui.frontend El módulo está desacoplado webpack proyecto que se integra en el proceso de compilación. Esto permite el uso de bibliotecas de front-end populares como Sass, LESS y TypeScript. El ui.frontend
El módulo de se explora con más detalle en Capítulo Bibliotecas del cliente.
A continuación, actualice los estilos CSS para HelloWorld
componente.
A continuación se muestran los pasos de alto nivel realizados en el vídeo anterior.
-
Abra una ventana de terminal y navegue hasta el
ui.frontend
directorio -
Estar en
ui.frontend
ejecute elnpm install npm-run-all --save-dev
para instalar el npm-run-all módulo del nodo. Este paso es AEM requerido en el tipo de archivo 39 generado por el proyecto de Sin embargo, en la próxima versión de tipo de archivo, esto no es obligatorio. -
A continuación, ejecute el
npm run watch
comando:code language-shell $ npm run watch
-
Cambie al IDE y abra el proyecto en
ui.frontend
módulo. -
Abra el archivo
ui.frontend/src/main/webpack/components/_helloworld.scss
. -
Actualice el archivo para mostrar un título rojo:
code language-scss .cmp-helloworld {} .cmp-helloworld__title { color: red; }
-
En el terminal, debería ver la actividad que indica que la variable
ui.frontend
AEM Este módulo está compilando y sincronizando los cambios con la instancia local de.code language-shell Entrypoint site 214 KiB = clientlib-site/site.css 8.45 KiB clientlib-site/site.js 206 KiB 2022-02-22 17:28:51: webpack 5.69.1 compiled successfully in 119 ms change:dist/index.html + jcr_root/apps/wknd/clientlibs/clientlib-site/css/site.css + jcr_root/apps/wknd/clientlibs/clientlib-site/css + jcr_root/apps/wknd/clientlibs/clientlib-site/js/site.js + jcr_root/apps/wknd/clientlibs/clientlib-site/js + jcr_root/apps/wknd/clientlibs/clientlib-site + jcr_root/apps/wknd/clientlibs/clientlib-dependencies/css.txt + jcr_root/apps/wknd/clientlibs/clientlib-dependencies/js.txt + jcr_root/apps/wknd/clientlibs/clientlib-dependencies
-
Vuelva al explorador y observe que el color del título ha cambiado.
Enhorabuena. congratulations
¡Felicidades, ha aprendido los conceptos básicos del desarrollo de componentes en Adobe Experience Manager!
Pasos siguientes next-steps
Familiarícese con las páginas y plantillas de Adobe Experience Manager en el capítulo siguiente Páginas y plantillas. Comprenda cómo los componentes principales se procesan como proxy en el proyecto y aprenda configuraciones de directiva avanzadas de plantillas editables para crear una plantilla de página de artículo bien estructurada.
Ver el código terminado en GitHub o revise e implemente el código localmente en la rama Git tutorial/component-basics-solution
.