Show Menu
ARGOMENTI×

Rendering dei modelli adattivi

Il rendering del modello adattivo consente di gestire una pagina con varianti. Originariamente utile per fornire vari output HTML per dispositivi mobili (ad esempio, telefoni cellulari con funzionalità e smartphone), questa funzione è utile quando le esperienze devono essere distribuite a vari dispositivi che necessitano di markup o output HTML diversi.

Panoramica

I modelli sono generalmente basati su una griglia reattiva e le pagine create in base a questi modelli sono completamente reattive, adattandosi automaticamente alla finestra del dispositivo client. Tramite la barra degli strumenti Emulatore nell’editor di pagina, gli autori possono eseguire il targeting dei layout per dispositivi specifici.
È inoltre possibile impostare modelli per il supporto del rendering adattivo. Quando i gruppi di dispositivi sono configurati correttamente, viene eseguito il rendering della pagina con un altro selettore nell’URL quando si seleziona un dispositivo in modalità emulatore. Utilizzando un selettore, è possibile richiamare direttamente il rendering di una pagina mediante l’URL.
Ricorda quando imposti i gruppi di dispositivi:
  • Ogni dispositivo deve essere in almeno un gruppo di dispositivi.
  • Un dispositivo può appartenere a più gruppi di dispositivi.
  • Poiché i dispositivi possono essere raggruppati in più gruppi di dispositivi, i selettori possono essere combinati.
  • La combinazione di selettori viene valutata dall'alto verso il basso mentre sono persistenti nella directory archivio.
I dispositivi reattivi del gruppo di dispositivi non avranno mai un selettore, perché i dispositivi riconosciuti come reattivi di supporto non necessitano di un layout adattivo

Configurazione

I selettori di rendering adattivi possono essere configurati per i gruppi di dispositivi esistenti o per i gruppi creati dall'utente.
Per questo esempio, stiamo per configurare il gruppo di dispositivi esistente Smart Phone in modo che abbia un selettore di rendering adattivo come parte del modello Experience Page in We.Retail.
  1. Modificate il gruppo di dispositivi che richiede un selettore adattivo in http://localhost:4502/miscadmin#/etc/mobile/groups
    Impostate l'opzione Disattiva emulatore e salvate.
  2. Il selettore sarà disponibile per Blackberry e iPhone 4 , a condizione che il gruppo di dispositivi Smart Phone venga aggiunto al modello e alle strutture di pagina nei seguenti passaggi.
  3. Utilizzando CRX DE Lite, consentite che il gruppo di dispositivi sia utilizzato nel modello aggiungendolo alla proprietà stringa con più valori cq:deviceGroups nella struttura del modello.
    /conf/<your-site>/settings/wcm/templates/<your-template>/structure/jcr:content
    Ad esempio, se si desidera aggiungere il gruppo di dispositivi Smart Phone:
    /conf/we-retail/settings/wcm/templates/experience-page/structure/jcr:content
  4. Utilizzando CRX DE Lite, consentite che il gruppo di dispositivi venga utilizzato sul sito aggiungendolo alla proprietà stringa multivalore cq:deviceGroups nella struttura del sito.
    /content/<your-site>/jcr:content
    Ad esempio, se vogliamo consentire il gruppo di dispositivi Smart Phone :
    /content/we-retail/jcr:content
Ora, quando si utilizza l' emulatore nell'editor di pagina (ad esempio quando si modifica il layout ) e si sceglie un dispositivo del gruppo di dispositivi configurato, la pagina verrà rappresentata con un selettore come parte dell'URL.
Nel nostro esempio, quando si modifica una pagina basata sul modello Experience Page e si sceglie iPhone 4 nell'emulatore, viene eseguito il rendering della pagina includendo il selettore come arctic-surfing-in-lofoten.smart.html anziché arctic-surfing-in-lofoten.html
La pagina può essere chiamata direttamente tramite questo selettore.