Show Menu
TOPICS×

Instrucciones de bloque de HTL

Las sentencias de bloque de lenguaje de plantilla HTML (HTL) son atributos personalizados que se agregan directamente
data
al HTML existente. Esto permite realizar anotaciones sencillas y discretas de una página HTML estática prototipo, convirtiéndola en una plantilla dinámica que funcione sin romper la validez del código HTML.

Información general de bloque

Los complementos de bloque HTL se definen mediante
data-sly-*
atributos establecidos en elementos HTML. Los elementos pueden tener una etiqueta de cierre o ser de autocierre. Los atributos pueden tener valores (que pueden ser cadenas o expresiones estáticas) o simplemente atributos booleanos (sin valor).
<tag data-sly-BLOCK></tag> <!--/* A block is simply consists in a data-sly attribute set on an element. */--> <tag data-sly-BLOCK/> <!--/* Empty elements (without a closing tag) should have the trailing slash. */--> <tag data-sly-BLOCK="string value"/> <!--/* A block statement usually has a value passed, but not necessarily. */--> <tag data-sly-BLOCK="${expression}"/> <!--/* The passed value can be an expression as well. */--> <tag data-sly-BLOCK="${@ myArg='foo'}"/> <!--/* Or a parametric expression with arguments. */--> <tag data-sly-BLOCKONE="value" data-sly-BLOCKTWO="value"/> <!--/* Several block statements can be set on a same element. */-->
Todos los atributos evaluados
data-sly-*
se eliminan del marcado generado.

Identificadores

Una sentencia block también puede ir seguida de un identificador:
<tag data-sly-BLOCK.IDENTIFIER="value"></tag>
La sentencia block puede utilizar el identificador de varias formas:
<!--/* Example of statements that use the identifier to set a variable with their result: */--> <div data-sly-use.navigation="MyNavigation">${navigation.title}</div> <div data-sly-test.isEditMode="${wcmmode.edit}">${isEditMode}</div> <div data-sly-list.child="${currentPage.listChildren}">${child.properties.jcr:title}</div> <div data-sly-template.nav>Hello World</div> <!--/* The attribute statement uses the identifier to know to which attribute it should apply it's value: */--> <div data-sly-attribute.title="${properties.jcr:title}"></div> <!--/* This will create a title attribute */-->
Los identificadores de nivel superior no distinguen entre mayúsculas y minúsculas (ya que se pueden establecer mediante atributos HTML que no distinguen entre mayúsculas y minúsculas), pero todas sus propiedades distinguen entre mayúsculas y minúsculas.

Sentencias de bloque disponibles

Hay una serie de afirmaciones en bloque disponibles. Cuando se utiliza en el mismo elemento, la siguiente lista de prioridad define cómo se evalúan las sentencias de bloque:
  1. data-sly-template
  2. data-sly-set
    ,
    data-sly-test
    ,
    data-sly-use
  3. data-sly-call
  4. data-sly-text
  5. data-sly-element
    ,
    data-sly-include
    ,
    data-sly-resource
  6. data-sly-unwrap
  7. data-sly-list
    ,
    data-sly-repeat
  8. data-sly-attribute
Cuando dos sentencias de bloque tienen la misma prioridad, su orden de evaluación es de izquierda a derecha.

use

data-sly-use
inicializa un objeto auxiliar (definido en JavaScript o Java) y lo expone a través de una variable.
Inicialice un objeto JavaScript, donde el archivo de origen se encuentra en el mismo directorio que la plantilla. Tenga en cuenta que se debe utilizar el nombre del archivo:
<div data-sly-use.nav="navigation.js">${nav.foo}</div>
Inicialice una clase Java, donde el archivo de origen se encuentra en el mismo directorio que la plantilla. Tenga en cuenta que se debe utilizar el nombre de clase, no el nombre del archivo:
<div data-sly-use.nav="Navigation">${nav.foo}</div>
Inicialice una clase Java, donde dicha clase se instala como parte de un paquete OSGi. Tenga en cuenta que se debe utilizar su nombre de clase completo:
<div data-sly-use.nav="org.example.Navigation">${nav.foo}</div>
Los parámetros se pueden pasar a la inicialización mediante las opciones. Por lo general, esta función solo debe ser utilizada por el código HTML que se encuentra dentro de un
data-sly-template
bloque:
<div data-sly-use.nav="${'navigation.js' @parentPage=currentPage}">${nav.foo}</div>
Inicialice otra plantilla HTL a la que se pueda llamar mediante
data-sly-call
:
<div data-sly-use.nav="navTemplate.html" data-sly-call="${nav.foo}"></div>
Para obtener más información sobre Use-API, consulte:

uso de datos con recursos

Esto permite obtener recursos directamente en HTL con
data-sly-use
y no requiere escribir código para obtenerlo.
Por ejemplo:
<div data-sly-use.product=“/etc/commerce/product/12345”> ${ product.title } </div>
Consulte también la sección Ruta no siempre requerida.

desajustar

data-sly-unwrap
quita el elemento host del marcado generado al tiempo que conserva su contenido. Esto permite la exclusión de elementos que son necesarios como parte de la lógica de presentación HTML pero que no se desean en la salida real.
Sin embargo, esta afirmación debería utilizarse con moderación. En general, es mejor mantener el marcado HTL lo más cerca posible del marcado de salida previsto. En otras palabras, al agregar sentencias de bloque HTL, intente lo más posible simplemente anotar el HTML existente, sin introducir nuevos elementos.
Por ejemplo:
<p data-sly-use.nav="navigation.js">Hello World</p>
producirá
<p>Hello World</p>
Considerando que,
<p data-sly-use.nav="navigation.js" data-sly-unwrap>Hello World</p>
producirá
Hello World
También es posible desajustar condicionalmente un elemento:
<div class="popup" data-sly-unwrap="${isPopup}">content</div>

configurar

data-sly-set
define un nuevo identificador con un valor predefinido.
<span data-sly-set.profile="${user.profile}">Hello, ${profile.firstName} ${profile.lastName}!</span> <a class="profile-link" href="${profile.url}">Edit your profile</a>

texto

data-sly-text
reemplaza el contenido de su elemento host con el texto especificado.
Por ejemplo:
<p>${properties.jcr:description}</p>
equivale a
<p data-sly-text="${properties.jcr:description}">Lorem ipsum</p>
Ambos mostrarán el valor de
jcr:description
como texto de párrafo. La ventaja del segundo método es que permite realizar anotaciones discretas de HTML manteniendo el contenido estático del marcador de posición del diseñador original.

atributo

data-sly-attribute
agrega atributos al elemento host.
Por ejemplo:
<div title="${properties.jcr:title}"></div>
equivale a
<div title="Lorem Ipsum" data-sly-attribute.title="${properties.jcr:title}"></div>
Ambos establecerán el
title
atributo en el valor de
jcr:title
. La ventaja del segundo método es que permite realizar anotaciones discretas de HTML manteniendo el contenido estático del marcador de posición del diseñador original.
Los atributos se resuelven de izquierda a derecha, y la instancia más a la derecha de un atributo (ya sea literal o definida mediante
data-sly-attribute
) tiene prioridad sobre cualquier instancia del mismo atributo (definida literalmente o mediante
data-sly-attribute
) definida a la izquierda.
Tenga en cuenta que un atributo (ya sea
literal
o definido mediante
data-sly-attribute
) cuyo valor se evalúa como la cadena vacía se eliminará en el marcado final. La única excepción a esta regla es que se conservará un atributo literal definido en una cadena vacía literal. Por ejemplo,
<div class="${''}" data-sly-attribute.id="${''}"></div>
produce,
<div></div>
pero,
<div class="" data-sly-attribute.id=""></div>
produce,
<div class=""></div>
Para definir varios atributos, pase un objeto de mapa con pares de clave-valor correspondientes a los atributos y sus valores. Por ejemplo, suponiendo que
attrMap = { title: "myTitle", class: "myClass", id: "myId" }
Y luego,
<div data-sly-attribute="${attrMap}"></div>
produce,
<div title="myTitle" class="myClass" id="myId"></div>

elemento

data-sly-element
reemplaza el nombre del elemento del elemento host.
Por ejemplo,
<h1 data-sly-element="${titleLevel}">text</h1>
Reemplaza el
h1
por el valor de
titleLevel
.
Por motivos de seguridad,
data-sly-element
acepta solamente los siguientes nombres de elementos:
a abbr address article aside b bdi bdo blockquote br caption cite code col colgroup data dd del dfn div dl dt em figcaption figure footer h1 h2 h3 h4 h5 h6 header i ins kbd li main mark nav ol p pre q rp rt ruby s samp section small span strong sub sup table tbody td tfoot th thead time tr u var wbr
Para establecer otros elementos, la seguridad XSS debe estar desactivada (
@context='unsafe'
).

prueba

data-sly-test
elimina condicionalmente el elemento host y su contenido. Un valor de
false
elimina el elemento; un valor de
true
retiene el elemento.
Por ejemplo, el
p
elemento y su contenido solo se procesarán si
isShown
es
true
:
<p data-sly-test="${isShown}">text</p>
El resultado de una prueba se puede asignar a una variable que se puede utilizar más adelante. Esto generalmente se utiliza para construir la lógica "if else", ya que no hay ninguna otra afirmación explícita:
<p data-sly-test.abc="${a || b || c}">is true</p> <p data-sly-test="${!abc}">or not</p>
Una vez configurada, la variable tiene un ámbito global dentro del archivo HTL.
A continuación se muestran algunos ejemplos de comparación de valores:
<div data-sly-test="${properties.jcr:title == 'test'}">TEST</div> <div data-sly-test="${properties.jcr:title != 'test'}">NOT TEST</div> <div data-sly-test="${properties['jcr:title'].length > 3}">Title is longer than 3</div> <div data-sly-test="${properties['jcr:title'].length >= 0}">Title is longer or equal to zero </div> <div data-sly-test="${properties['jcr:title'].length > aemComponent.MAX_LENGTH}"> Title is longer than the limit of ${aemComponent.MAX_LENGTH} </div>

repeat

Con
data-sly-repeat
puede repetir un elemento varias veces en función de la lista especificada.
<div data-sly-repeat="${currentPage.listChildren}">${item.name}</div>
Funciona del mismo modo que
data-sly-list
, excepto que no necesita un elemento contenedor.
El siguiente ejemplo muestra que también puede hacer referencia al
elemento
para atributos:
<div data-sly-repeat="${currentPage.listChildren}" data-sly-attribute.class="${item.name}">${item.name}</div>

list

data-sly-list
repite el contenido del elemento host para cada propiedad enumerable del objeto proporcionado.
Este es un bucle simple:
<dl data-sly-list="${currentPage.listChildren}"> <dt>index: ${itemList.index}</dt> <dd>value: ${item.title}</dd> </dl>
Las siguientes variables predeterminadas están disponibles dentro del ámbito de la lista:
  • item
    :: Elemento actual de la iteración.
  • itemList
    :: Objeto con las siguientes propiedades:
  • index
    :: contador basado en cero (
    0..length-1
    ).
  • count
    :: contador basado en uno (
    1..length
    ).
  • first
    ::
    true
    si el elemento actual es el primer elemento.
  • middle
    ::
    true
    si el elemento actual no es ni el primer ni el último elemento.
  • last
    ::
    true
    si el elemento actual es el último elemento.
  • odd
    ::
    true
    si
    index
    es raro.
  • even
    ::
    true
    si
    index
    es par.
La definición de un identificador en la
data-sly-list
sentencia le permite cambiar el nombre de las
itemList
variables y
item
.
item
se convertirán
<variable>
y
itemList
se convertirán
<variable>List
.
<dl data-sly-list.child="${currentPage.listChildren}"> <dt>index: ${childList.index}</dt> <dd>value: ${child.title}</dd> </dl>
También puede acceder a las propiedades de forma dinámica:
<dl data-sly-list.child="${myObj}"> <dt>key: ${child}</dt> <dd>value: ${myObj[child]}</dd> </dl>

medio

data-sly-resource
incluye el resultado de procesar el recurso indicado mediante la resolución de sling y el proceso de procesamiento.
Un recurso simple incluye:
<article data-sly-resource="path/to/resource"></article>

Ruta no siempre requerida

Tenga en cuenta que el uso de una ruta con
data-sly-resource
no es necesario si ya tiene el recurso. Si ya tiene el recurso, puede utilizarlo directamente.
Por ejemplo, lo siguiente es correcto.
<sly data-sly-resource="${resource.path @ decorationTagName='div'}"></sly>
Sin embargo, lo siguiente también es perfectamente aceptable.
<sly data-sly-resource="${resource @ decorationTagName='div'}"></sly>
Se recomienda utilizar el recurso directamente cuando sea posible por las siguientes razones.
  • Si ya tiene el recurso, la resolución de nuevo mediante la ruta es un trabajo adicional e innecesario.
  • El uso de la ruta cuando ya tenga el recurso puede generar resultados inesperados, ya que los recursos de Sling pueden ajustarse o ser sintéticos y no proporcionarse en la ruta dada.

Opciones

Las opciones permiten una serie de variantes adicionales:
Manipulación de la ruta del recurso:
<article data-sly-resource="${ @ path='path/to/resource'}"></article> <article data-sly-resource="${'resource' @ prependPath='my/path'}"></article> <article data-sly-resource="${'my/path' @ appendPath='resource'}"></article>
Añadir (o reemplazar) un selector:
<article data-sly-resource="${'path/to/resource' @ selectors='selector'}"></article>
Añadir, reemplazar o quitar varios selectores:
<article data-sly-resource="${'path/to/resource' @ selectors=['s1', 's2']}"></article>
Añada un selector a los existentes:
<article data-sly-resource="${'path/to/resource' @ addSelectors='selector'}"></article>
Elimine algunos selectores de los existentes:
<article data-sly-resource="${'path/to/resource' @ removeSelectors='selector1'}"></article>
Quitar todos los selectores:
<article data-sly-resource="${'path/to/resource' @ removeSelectors}"></article>
Anula el tipo de recurso del recurso:
<article data-sly-resource="${'path/to/resource' @ resourceType='my/resource/type'}"></article>
Cambia el modo WCM:
<article data-sly-resource="${'path/to/resource' @ wcmmode='disabled'}"></article>
De forma predeterminada, las etiquetas de decoración de AEM están desactivadas, la opción DecorationTagName permite devolverlas y cssClassName para agregar clases a ese elemento.
<article data-sly-resource="${'path/to/resource' @ decorationTagName='span', cssClassName='className'}"></article>
AEM oferta una lógica clara y sencilla que controla las etiquetas de decoración que envuelven los elementos incluidos. Para obtener más información, consulte Decoration Tag en la documentación de desarrollo de componentes.

incluir

data-sly-include
reemplaza el contenido del elemento host con el marcado generado por el archivo de plantilla HTML indicado (HTL, JSP, ESP, etc.) cuando se procesa con su motor de plantilla correspondiente. El contexto de procesamiento del archivo incluido no incluirá el contexto HTL actual (el del archivo incluido); Por consiguiente, para incluir los archivos HTL, el archivo actual
data-sly-use
tendría que repetirse en el archivo incluido (en tal caso, suele ser mejor utilizar
data-sly-template
y
data-sly-call
)
Un sencillo ejemplo:
<section data-sly-include="path/to/template.html"></section>
Los JSP se pueden incluir del mismo modo:
<section data-sly-include="path/to/template.jsp"></section>
Las opciones permiten manipular la ruta del archivo:
<section data-sly-include="${ @ file='path/to/template.html'}"></section> <section data-sly-include="${'template.html' @ prependPath='my/path'}"></section> <section data-sly-include="${'my/path' @ appendPath='template.html'}"></section>
También puede cambiar el modo WCM:
<section data-sly-include="${'template.html' @ wcmmode='disabled'}"></section>

Request-attributes

En el
data-sly-include
y
data-sly-resource
puede pasar
requestAttributes
para utilizarlos en el script HTL receptor.
Esto le permite pasar correctamente parámetros a scripts o componentes.
<sly data-sly-use.settings="com.adobe.examples.htl.core.hashmap.Settings" data-sly-include="${ 'productdetails.html' @ requestAttributes=settings.settings}" />
Java-code de la clase Settings, el mapa se utiliza para pasar requestAttributes:
public class Settings extends WCMUsePojo { // used to pass is requestAttributes to data-sly-resource public Map<String, Object> settings = new HashMap<String, Object>(); @Override public void activate() throws Exception { settings.put("layout", "flex"); } }
Por ejemplo, a través de un modelo Sling, puede consumir el valor del
requestAttributes
.
En este ejemplo, layout se inserta mediante el mapa desde la clase Use:
@Model(adaptables=SlingHttpServletRequest.class) public class ProductSettings { @Inject @Optional @Default(values="empty") public String layout; }

plantilla y llamada

Los bloques de plantilla pueden utilizarse como llamadas a funciones: en su declaración pueden obtener parámetros, que luego se pueden pasar al llamarlos. También permiten la recursión.
data-sly-template
define una plantilla. HTL no genera el elemento host ni su contenido
data-sly-call
llama a una plantilla definida con data-astnil-template. El contenido de la plantilla llamada (parametrizada de forma opcional) reemplaza al contenido del elemento host de la llamada.
Defina una plantilla estática y, a continuación, llámala:
<template data-sly-template.one>blah</template> <div data-sly-call="${one}"></div>
Defina una plantilla dinámica y, a continuación, llámala con parámetros:
<template data-sly-template.two="${ @ title}"><h1>${title}</h1></template> <div data-sly-call="${two @ title=properties.jcr:title}"></div>
Las plantillas ubicadas en un archivo diferente se pueden inicializar con
data-sly-use
. Tenga en cuenta que en este caso
data-sly-use
y
data-sly-call
también se puede colocar en el mismo elemento:
<div data-sly-use.lib="templateLib.html"> <div data-sly-call="${lib.one}"></div> <div data-sly-call="${lib.two @ title=properties.jcr:title}"></div> </div>
Se admite la recursión de plantilla:
<template data-sly-template.nav="${ @ page}"> <ul data-sly-list="${page.listChildren}"> <li> <div class="title">${item.title}</div> <div data-sly-call="${nav @ page=item}" data-sly-unwrap></div> </li> </ul> </template> <div data-sly-call="${nav @ page=currentPage}" data-sly-unwrap></div>

elemento de asto

La etiqueta
<sly>
HTML se puede utilizar para eliminar el elemento actual, permitiendo que solo se muestren sus elementos secundarios. Su funcionalidad es similar al elemento de
data-sly-unwrap
bloque:
<!--/* This will display only the output of the 'header' resource, without the wrapping <sly> tag */--> <sly data-sly-resource="./header"></sly>
Aunque no es una etiqueta HTML 5 válida, la
<sly>
etiqueta se puede mostrar en el resultado final utilizando
data-sly-unwrap
:
<sly data-sly-unwrap="${false}"></sly> <!--/* outputs: <sly></sly> */-->
El objetivo del
<sly>
elemento es hacer más obvio que el elemento no es salida. Si lo desea puede seguir usando
data-sly-unwrap
.
Como con
data-sly-unwrap
, intente minimizar el uso de esto.