HTL Tutorial #2: Espressioni e Tipi di Dato

Sintassi delle Espressioni

Le espressioni HTL sono racchiuse tra ${ e } e possono contenere:

• Identificatori (variabili)
• Letterali (valori fissi)
• Operatori
• Accesso a proprietà

${variabile}
${'stringa letterale'}
${numero}
${oggetto.proprieta}

Identificatori

Gli identificatori sono nomi di variabili che referenziano dati:

<!-- Proprietà del componente -->
${properties.title}

<!-- Proprietà della pagina corrente -->
${currentPage.title}

<!-- Variabili definite -->
${myVariable}

Oggetti Globali Disponibili

HTL mette a disposizione diversi oggetti globali:

Oggetto	Descrizione
properties	Proprietà del componente corrente
currentPage	Pagina corrente
pageProperties	Proprietà della pagina corrente
inheritedPageProperties	Proprietà ereditate dalla gerarchia
component	Metadati del componente
resource	Risorsa Sling corrente
request	HTTP request
wcmmode	Modalità WCM (edit, preview, disabled)

Esempio pratico:

<article>
  <h1>${currentPage.title}</h1>
  <p class="subtitle">${pageProperties.subtitle}</p>
  <time>${properties.publishDate}</time>
</article>

Tipi di Dato Letterali

1. Stringhe

Stringhe racchiuse tra apici singoli o doppi:

<!-- Apici singoli -->
${'Benvenuto'}

<!-- Apici doppi -->
${"Ciao Mondo"}

<!-- Con escape -->
${'It\'s a beautiful day'}
${"Disse: \"Ciao\""}

Sequenze di escape supportate:

\b  → backspace
\t  → tab
\n  → newline
\f  → form feed
\r  → carriage return
\"  → doppio apice
\'  → apice singolo
\\  → backslash
\uXXXX → carattere Unicode

2. Numeri

Interi e decimali:

<!-- Interi -->
${42}
${-10}

<!-- Decimali -->
${3.14}
${-0.5}

<!-- Notazione scientifica -->
${1.5e10}
${2E-3}

Esempio pratico:

<div class="price">
  <!-- Prezzo originale -->
  <span class="original">${99.99}</span>

  <!-- Sconto percentuale -->
  <span class="discount">${20}% OFF</span>

  <!-- Prezzo finale -->
  <span class="final">${79.99}</span>
</div>

3. Booleani

Valori true e false:

${true}
${false}

4. Array

Liste di valori tra parentesi quadre:

${['primo', 'secondo', 'terzo']}
${[1, 2, 3, 4, 5]}
${[true, false, true]}

Accesso agli elementi:

<!-- Primo elemento (indice 0) -->
${myArray[0]}

<!-- Secondo elemento -->
${myArray[1]}

<!-- Con variabile come indice -->
${myArray[index]}

Accesso a Proprietà

Dot Notation (notazione punto)

<!-- Accesso proprietà -->
${properties.title}

<!-- Accesso annidato -->
${currentPage.properties.jcr:title}

<!-- Attenzione: NO spazi! -->
${object.property}  ✓ Corretto
${object . property}  ✗ Errore

Bracket Notation (notazione parentesi)

Utile per:

• Proprietà con caratteri speciali
• Proprietà con spazi
• Accesso dinamico

<!-- Proprietà con due punti -->
${properties['jcr:title']}

<!-- Proprietà con spazi (permessi qui!) -->
${object['my property']}

<!-- Accesso dinamico -->
${object[variableName]}

Esempio pratico:

<div data-sly-use.model="com.example.ProductModel">
  <!-- Notazione punto -->
  <h2>${model.productName}</h2>

  <!-- Notazione parentesi con variabile -->
  <p>${model[fieldName]}</p>

  <!-- Proprietà JCR -->
  <time>${properties['jcr:created']}</time>
</div>

Casting Automatico

HTL converte automaticamente i valori:

A Stringa

<!-- Numero → Stringa -->
${'Hai ' + 5 + ' messaggi'}
<!-- Output: "Hai 5 messaggi" -->

<!-- Boolean → Stringa -->
${'Attivo: ' + true}
<!-- Output: "Attivo: true" -->

A Booleano

Valori falsy (considerati false):

• false
• 0 o 0.0
• Stringa vuota ""
• Array vuoto []

Tutti gli altri valori sono truthy (considerati true).

<!-- Solo se title non è vuoto -->
<h1 data-sly-test="${properties.title}">
  ${properties.title}
</h1>

<!-- Solo se count è > 0 -->
<div data-sly-test="${properties.count}">
  ${properties.count} elementi
</div>

Espressioni Vuote

Un'espressione vuota è valida e non produce output:

${}
<!-- Output: nulla -->

Esempio Completo: Card Prodotto

<div class="product-card" data-sly-use.product="com.example.ProductModel">
  <!-- Titolo -->
  <h3>${product.name}</h3>

  <!-- Descrizione (proprietà con spazi) -->
  <p>${product['long description']}</p>

  <!-- Prezzo -->
  <div class="price">
    <span class="currency">${'€'}</span>
    <span class="amount">${product.price}</span>
  </div>

  <!-- Disponibilità -->
  <p class="stock">
    ${'In magazzino: ' + product.stockCount}
  </p>

  <!-- Rating (array) -->
  <div class="rating">
    ${product.ratings[0]} stelle
  </div>

  <!-- Proprietà JCR -->
  <time datetime="${properties['jcr:created']}">
    Creato: ${properties['jcr:created']}
  </time>
</div>

Escape dell'Espressione

Per mostrare letteralmente ${ senza valutarlo:

\${questa.non.viene.valutata}
<!-- Output: ${questa.non.viene.valutata} -->

Best Practice

1. Usa dot notation quando possibile: più leggibile
2. Bracket notation per proprietà JCR: ${properties['jcr:title']}
3. Non fare operazioni complesse nelle espressioni: spostale in Sling Model
4. Sfrutta il casting automatico: data-sly-test="${variable}" è sufficiente

Esercizi Pratici

Prova a creare questi componenti:

1. User Profile: Mostra nome, email e avatar da properties
2. Counter: Mostra un numero e il suo quadrato
3. List Preview: Mostra i primi 3 elementi di un array

Prossima Lezione

Nella prossima lezione impareremo gli operatori logici, di confronto e relazionali per creare espressioni più complesse.

---

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