HTL Tutorial #5: data-sly-text - Output di Contenuto

Categoria: HTL Tutorial
HTLAEMTutorialBlock Statements

HTL Tutorial #5: data-sly-text - Output di Contenuto

Cos'è data-sly-text?

data-sly-text è un block statement che sostituisce tutto il contenuto di un elemento HTML con il valore dell'espressione.

Sintassi Base

<elemento data-sly-text="${espressione}">
  Questo contenuto viene sostituito
</elemento>

Confronto con Espressioni Inline

Espressione Inline ${...}

<h1>${properties.title}</h1>

Output:

<h1>Il Mio Titolo</h1>

data-sly-text

<h1 data-sly-text="${properties.title}">
  Placeholder title
</h1>

Output:

<h1>Il Mio Titolo</h1>

Risultato identico, ma con data-sly-text:

  • ✓ Puoi avere placeholder visibile in modalità edit
  • ✓ Più chiaro quando l'intero contenuto viene sostituito
  • ✓ Meglio per compatibilità con alcuni tool di preview

Quando Usare data-sly-text

1. Placeholder per Autori

In modalità edit di AEM, l'autore vede il placeholder:

<h2 data-sly-text="${properties.subtitle}">
  [Inserisci un sottotitolo qui]
</h2>

In Edit Mode: Vede [Inserisci un sottotitolo qui] In Published: Vede il valore effettivo da properties.subtitle

2. Contenuto Completo dell'Elemento

Quando l'elemento contiene SOLO l'espressione:

<!-- Più chiaro con data-sly-text -->
<p data-sly-text="${properties.description}"></p>

<!-- Equivalente ma meno esplicito -->
<p>${properties.description}</p>

3. Compatibilità HTML5

Alcuni tool di preview HTML non riconoscono ${...}:

<!-- Meglio per preview statico -->
<span data-sly-text="${user.name}">Nome Utente</span>

<!-- ${user.name} potrebbe non funzionare in alcuni tool -->
<span>${user.name}</span>

Esempi Pratici

Esempio 1: Card Utente

<div class="user-card" data-sly-use.user="com.example.UserModel">
  <!-- Nome con placeholder -->
  <h3 data-sly-text="${user.name}">
    Nome Placeholder
  </h3>

  <!-- Email -->
  <p class="email" data-sly-text="${user.email}">
    email@placeholder.com
  </p>

  <!-- Ruolo -->
  <span class="badge" data-sly-text="${user.role}">
    Ruolo
  </span>
</div>

In Modalità Edit (prima che l'autore compili):

<div class="user-card">
  <h3>Nome Placeholder</h3>
  <p class="email">email@placeholder.com</p>
  <span class="badge">Ruolo</span>
</div>

Dopo compilazione:

<div class="user-card">
  <h3>Mario Rossi</h3>
  <p class="email">mario.rossi@example.com</p>
  <span class="badge">Amministratore</span>
</div>

Esempio 2: Breadcrumb

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="/" data-sly-text="${'Home'}">Home</a>
    </li>
    <li class="breadcrumb-item">
      <a href="${currentPage.parent.path}"
         data-sly-text="${currentPage.parent.title}">
        Categoria Padre
      </a>
    </li>
    <li class="breadcrumb-item active"
        data-sly-text="${currentPage.title}">
      Pagina Corrente
    </li>
  </ol>
</nav>

Esempio 3: Tabella Prodotti

<table class="product-table" data-sly-use.products="com.example.ProductsModel">
  <thead>
    <tr>
      <th>Prodotto</th>
      <th>Prezzo</th>
      <th>Stock</th>
    </tr>
  </thead>
  <tbody data-sly-list.product="${products.items}">
    <tr>
      <!-- Nome prodotto -->
      <td data-sly-text="${product.name}">
        Nome Prodotto
      </td>

      <!-- Prezzo con formatting -->
      <td data-sly-text="${'€ ' + product.price}">
        € 0.00
      </td>

      <!-- Stock con colore condizionale -->
      <td class="${product.stock > 10 ? 'text-success' : 'text-warning'}"
          data-sly-text="${product.stock}">
        0
      </td>
    </tr>
  </tbody>
</table>

Escape Automatico

Come tutte le espressioni HTL, data-sly-text applica automatic HTML escaping:

<!-- Input con HTML -->
${properties.content}  <!-- "<script>alert('xss')</script>" -->

<!-- Output escaped -->
<p data-sly-text="${properties.content}">
  Placeholder
</p>

<!-- Risultato -->
<p>&lt;script&gt;alert('xss')&lt;/script&gt;</p>

Se vuoi preservare HTML (da fonte sicura), usa context='html':

<div data-sly-text="${properties.richText @ context='html'}">
  Placeholder
</div>

Context Options

data-sly-text supporta tutte le opzioni di context:

<!-- Text context - encode tutto -->
<pre data-sly-text="${properties.code @ context='text'}">
  Code placeholder
</pre>

<!-- Number context - solo numeri -->
<span data-sly-text="${properties.age @ context='number'}">
  0
</span>

<!-- HTML context - preserva HTML sicuro -->
<div data-sly-text="${properties.richContent @ context='html'}">
  <p>Placeholder</p>
</div>

Combinazione con Altri Statement

data-sly-text può essere combinato con altri data-sly-*:

Con data-sly-test

<!-- Mostra solo se title esiste -->
<h2 data-sly-test="${properties.title}"
    data-sly-text="${properties.title}">
  Titolo Placeholder
</h2>

Con data-sly-list

<ul data-sly-list.tag="${properties.tags}">
  <!-- text + list -->
  <li data-sly-text="${tag}">Tag</li>
</ul>

Con data-sly-element

<!-- Tag dinamico + contenuto -->
<div data-sly-element="${properties.headingLevel}"
     data-sly-text="${properties.heading}">
  Heading Placeholder
</div>

<!-- Se headingLevel = "h2" -->
<h2>Il Mio Heading</h2>

Quando NON Usare data-sly-text

1. Contenuto Misto

<!-- ❌ SBAGLIATO - sovrascrive tutto! -->
<p data-sly-text="${properties.name}">
  Benvenuto, <strong>placeholder</strong>!
</p>
<!-- Output: sovrascrive "Benvenuto, <strong>" -->

<!-- ✓ CORRETTO - usa espressione inline -->
<p>
  Benvenuto, <strong data-sly-text="${properties.name}">placeholder</strong>!
</p>

2. Multipli Output nello Stesso Elemento

<!-- ❌ SBAGLIATO -->
<p data-sly-text="${properties.firstName + ' ' + properties.lastName}">
  Nome Cognome
</p>

<!-- ✓ CORRETTO - più flessibile -->
<p>
  <span data-sly-text="${properties.firstName}">Nome</span>
  <span data-sly-text="${properties.lastName}">Cognome</span>
</p>

Priorità dei Block Statements

Se usi multipli data-sly-* sullo stesso elemento, l'ordine di esecuzione è:

  1. data-sly-use
  2. data-sly-test
  3. data-sly-list / data-sly-repeat
  4. data-sly-text
  5. data-sly-attribute
  6. data-sly-element
  7. data-sly-unwrap
<p data-sly-test="${properties.show}"
   data-sly-text="${properties.content}">
  Placeholder
</p>
<!-- 1. Verifica test 2. Se true, applica text -->

Best Practice

  1. Usa placeholder significativi: aiutano gli autori
  2. Preferisci inline ${...} per contenuto semplice
  3. Usa data-sly-text quando:
    • Vuoi placeholder visibili
    • L'elemento contiene solo quell'output
    • Migliore compatibilità con tool esterni
  4. Combina con data-sly-test per contenuto condizionale
  5. Attenzione al context: specifica quando necessario

Esercizi Pratici

  1. Profilo Autore: Card con nome, bio, email usando data-sly-text e placeholder
  2. Lista Prodotti: Tabella con nome, prezzo, disponibilità
  3. Meta Info: Mostra data pubblicazione, autore, categoria con placeholder

Prossima Lezione

Nella prossima lezione scopriremo data-sly-test per il rendering condizionale e come mostrare/nascondere elementi basandosi su condizioni.

Lezione #5 della serie HTL Tutorial. ← Lezione precedente | Lezione successiva →