Creazione di siti per dispositivi mobili

La creazione di un sito mobile è simile alla creazione di un sito standard, in quanto comporta anche la creazione di modelli e componenti. Per ulteriori dettagli sulla creazione di modelli e componenti, consulta le pagine seguenti: Modelli, Componenti e Guida introduttiva allo sviluppo per AEM Sites. La differenza principale consiste nell’abilitare le funzionalità mobili integrate AEM all’interno del sito. Viene ottenuto creando un modello basato sul componente della pagina mobile.

È inoltre consigliabile utilizzare design dinamico, creazione di un singolo sito che supporti diverse dimensioni dello schermo.

Per iniziare, puoi dare un'occhiata al Sito demo mobile We.Retail disponibile in AEM.

Per creare un sito mobile, procedi come segue:

1. Crea il componente pagina:

   • Imposta la proprietà sling:resourceSuperType su wcm/mobile/components/page

     In questo modo il componente si basa sul componente della pagina mobile.

   • Crea il body.jsp con la logica specifica del progetto.

2. Crea il modello di pagina:

   • Imposta la sling:resourceType al componente pagina appena creato.
   • Imposta la allowedPaths proprietà.

3. Crea la pagina di progettazione del sito.

4. Crea la pagina principale del sito sotto la /content nodo:

   • Imposta la cq:allowedTemplates proprietà.
   • Imposta la cq:designPath proprietà.

5. Nelle proprietà della pagina principale del sito, imposta i gruppi di dispositivi nella Mobile scheda .

6. Crea le pagine del sito utilizzando il nuovo modello.

Il componente Pagina mobile ( /libs/wcm/mobile/components/page):

• Aggiunge la Mobile nella finestra di dialogo delle proprietà della pagina.
• Attraverso le sue head.jsp, recupera il gruppo di dispositivi mobili corrente dalla richiesta e, se viene trovato un gruppo di dispositivi, utilizza il gruppo drawHead() per includere il componente init dell'emulatore associato del gruppo di dispositivi (solo in modalità di authoring) e il CSS di rendering del gruppo di dispositivi.

Creazione di un sito mobile con Multi Site Manager

Multi Site Manager (MSM) consente di creare una Live Copy mobile da un sito standard. Il sito standard viene automaticamente trasformato in un sito mobile: il sito mobile dispone di tutte le funzioni dei siti mobili (ad es. edizione all’interno di un emulatore) e può essere gestito in sincronia con il sito standard. Consulta la sezione . Creazione di una Live Copy per canali diversi nella pagina Multi Site Manager (Gestore siti multipli).

API mobile lato server

I pacchetti Java contenenti le classi mobile sono:

• com.day.cq.wcm.mobile.api - definisce MobileConstants.

• com.day.cq.wcm.mobile.api.device - definisce Device, DeviceGroup e DeviceGroupList.

• com.day.cq.wcm.mobile.api.device.funzionalità - definisce DeviceCapability.

• com.day.cq.wcm.mobile.api.wurfl - definisce WurflQueryEngine.

• com.day.cq.wcm.mobile.core - definisce MobileUtil, che fornisce vari metodi di utilità ruotanti intorno a WCM Mobile.

Componenti per dispositivi mobili

La Sito demo mobile We.Retail utilizza i seguenti componenti mobili che si trovano di seguito /libs/foundation/components:

Creazione di un componente mobile

Il framework mobile AEM consente di sviluppare componenti sensibili al dispositivo che emette la richiesta. Gli esempi di codice seguenti mostrano come utilizzare l’API mobile AEM in un jsp componente e in particolare come:

• Ottieni il dispositivo dalla richiesta:

  Device device = slingRequest.adaptTo(Device.class);

• Ottieni il gruppo di dispositivi:

  DeviceGroup deviceGroup = device.getDeviceGroup();

• Ottieni le funzionalità del gruppo di dispositivi:

  Collection<DeviceCapability> capabilities = deviceGroup.getCapabilities();

• Ottenere gli attributi del dispositivo (chiave/valori di funzionalità non elaborati dal database WURFL):

  Map<String,String> deviceAttributes = device.getAttributes();

• Ottieni l'agente utente del dispositivo:

  String userAgent = device.getUserAgent();

• Ottieni l’elenco dei gruppi di dispositivi (gruppi di dispositivi assegnati al sito dall’autore) dalla pagina corrente:

  DeviceGroupList deviceGroupList = currentPage.adaptTo(DeviceGroupList.class);

• Controlla se il gruppo di dispositivi supporta le immagini

  if (deviceGroup.hasCapability(DeviceCapability.CAPABILITY_IMAGES)) {
  …
  OPPURE
  if MobileUtil.hasCapability(request, DeviceCapability.CAPABILITY_IMAGES) {
  …

Emulatori

L’authoring basato su emulatore offre agli autori gli strumenti per creare pagine di contenuto destinate ai clienti mobili. L’authoring dei contenuti mobili segue lo stesso principio dell’editing WYSIWYG sul posto. Affinché gli autori possano percepire l’aspetto della pagina su un dispositivo mobile, una pagina di contenuto mobile viene modificata utilizzando un emulatore del dispositivo.

Gli emulatori per dispositivi mobili si basano sul framework di emulatori generici. Per ulteriori informazioni, consulta la sezione Emulatori pagina.

L’emulatore del dispositivo visualizza il dispositivo mobile sulla pagina, mentre la modifica standard (parsys, components) si verifica all’interno dello schermo del dispositivo. L’emulatore del dispositivo dipende dai gruppi di dispositivi configurati per il sito. È possibile assegnare più emulatori a un gruppo di dispositivi. Tutti gli emulatori sono quindi disponibili nella pagina del contenuto. Per impostazione predefinita viene visualizzato il primo emulatore assegnato al primo gruppo di dispositivi assegnato al sito. Gli emulatori possono essere attivati tramite il carosello dell’emulatore nella parte superiore della pagina o tramite il pulsante di modifica della barra laterale.

Creazione di un emulatore

Per creare un emulatore, fai riferimento al Creazione di un emulatore mobile personalizzato nella pagina emulatori generici.

Caratteristiche principali degli emulatori mobili

• Un gruppo di dispositivi è composto da uno o più emulatori: la pagina di configurazione del gruppo di dispositivi, ad esempio /etc/mobile/groups/touch, contiene il emulators sotto la proprietà jcr:content nodo.

  Nota: anche se è possibile che lo stesso emulatore appartenga a diversi gruppi di dispositivi, non ha molto senso.

• Tramite la finestra di dialogo di configurazione del gruppo di dispositivi, il emulators viene impostata con il percorso dell'emulatore o degli emulatori desiderati. Esempio: /libs/wcm/mobile/components/emulators/iPhone4.

• Componenti dell’emulatore (ad es. /libs/wcm/mobile/components/emulators/iPhone4) estende il componente emulatore mobile di base ( /libs/wcm/mobile/components/emulators/base).

• Ogni componente che estende l’emulatore mobile di base è disponibile per la selezione durante la configurazione di un gruppo di dispositivi. Gli emulatori personalizzati possono quindi essere facilmente creati o estesi.

• Al momento della richiesta in modalità di modifica, l’implementazione dell’emulatore viene utilizzata per eseguire il rendering della pagina.

• Quando il modello della pagina si basa sul componente della pagina mobile, le funzionalità dell’emulatore vengono integrate automaticamente nella pagina (tramite il head.jsp del componente pagina mobile).

Gruppi dispositivo

I gruppi di dispositivi mobili forniscono la segmentazione dei dispositivi mobili in base alle funzionalità del dispositivo. Un gruppo di dispositivi fornisce le informazioni necessarie per l’authoring basato su emulatore sull’istanza di authoring e per il rendering corretto dei contenuti sull’istanza di pubblicazione: una volta che gli autori hanno aggiunto il contenuto alla pagina mobile e l’hanno pubblicata, la pagina può essere richiesta nell’istanza di pubblicazione. Qui, invece della visualizzazione di modifica dell’emulatore, la pagina di contenuto viene riprodotta utilizzando uno dei gruppi di dispositivi configurati. La selezione del gruppo di dispositivi si verifica in base a rilevamento dispositivi mobili. Il gruppo di dispositivi corrispondente fornisce quindi le informazioni sullo stile necessarie.

I gruppi di dispositivi sono definiti come pagine di contenuto sottostanti /etc/mobile/devices e utilizza Gruppo di dispositivi mobili modello. Il modello gruppo dispositivi funge da modello di configurazione per le definizioni dei gruppi di dispositivi sotto forma di pagine di contenuto. Le sue principali caratteristiche sono:

• Dove si trova: /libs/wcm/mobile/templates/devicegroup
• Percorso consentito: /etc/mobile/groups/*
• Componente Pagina: wcm/mobile/components/devicegroup

Assegnazione di gruppi di dispositivi al sito

Quando crei un sito mobile, devi assegnare gruppi di dispositivi al sito. AEM fornisce tre gruppi di dispositivi a seconda delle capacità di rendering HTML e JavaScript del dispositivo:

• Funzione telefoni, per dispositivi con funzionalità quali Sony Ericsson W800 con supporto per HTML di base, ma senza supporto per immagini e JavaScript.

• Smart telefoni, per dispositivi come Blackberry con supporto per HTML e immagini di base, ma senza supporto per JavaScript.

• Touch telefoni, per dispositivi come iPad con supporto completo per HTML, immagini, JavaScript e rotazione dei dispositivi.

Poiché gli emulatori possono essere associati a un gruppo di dispositivi (consulta la sezione Creazione di un gruppo di dispositivi), l’assegnazione di un gruppo di dispositivi a un sito consente agli autori di selezionare tra gli emulatori associati al gruppo di dispositivi per modificare la pagina.

Per assegnare un gruppo di dispositivi al sito:

1. Nel browser, vai alla pagina Siteadmin console.

2. Apri la pagina principale del tuo sito mobile qui sotto Siti Web.

3. Apri le proprietà della pagina.

4. Seleziona la Mobile scheda:

   • Definisci i gruppi di dispositivi.
   • Fai clic su OK.

Filtri per gruppo dispositivo

I filtri per gruppi di dispositivi definiscono criteri basati sulle funzionalità per determinare se un dispositivo appartiene al gruppo. Quando crei un gruppo di dispositivi, puoi selezionare i filtri da utilizzare per la valutazione dei dispositivi.

In fase di esecuzione quando AEM ricevuto una richiesta HTTP da un dispositivo, ogni filtro associato a un gruppo confronta le funzionalità del dispositivo con criteri specifici. Il dispositivo è considerato appartenente al gruppo quando dispone di tutte le funzionalità richieste dai filtri. Le funzionalità vengono recuperate dal database WURFL™.

I gruppi di dispositivi possono utilizzare zero o più filtri per il rilevamento delle funzionalità. Inoltre, un filtro può essere utilizzato con più gruppi di dispositivi. AEM fornisce un filtro predefinito che determina se il dispositivo dispone delle funzionalità selezionate per un gruppo:

• CSS
• Immagini JPG e PNG
• JavaScript
• Rotazione dispositivo

Se il gruppo di dispositivi non utilizza un filtro, le funzionalità selezionate configurate per il gruppo sono le uniche funzionalità richieste da un dispositivo.

Per ulteriori informazioni, consulta Creazione di filtri per i gruppi di dispositivi.

Creazione di un gruppo di dispositivi

Crea un gruppo di dispositivi quando i gruppi che AEM installati non soddisfano le tue esigenze.

1. Nel browser, vai alla pagina Strumenti console.

2. Crea una nuova pagina qui sotto Strumenti > Mobile > Gruppi di dispositivi. In Crea pagina finestra di dialogo:

   • Come Titolo enter Special Phones.
   • Come Nome enter special.
   • Seleziona la Modello per gruppo di dispositivi mobili.
   • Fai clic su Crea.

3. In CRXDE, aggiungi un static.css file contenente gli stili per il gruppo di dispositivi sotto il /etc/mobile/groups/special nodo.

4. Apri Telefoni speciali pagina.

5. Per configurare il gruppo di dispositivi, fai clic sul pulsante Modifica pulsante accanto Impostazioni.

   Sulla Generale scheda:

   • Titolo: il nome del gruppo di dispositivi mobili.
   • Descrizione: descrizione del gruppo.
   • Agente utente: stringa dell'agente utente con cui viene confrontata la corrispondenza dei dispositivi. È facoltativo e può essere un regex. Esempio: BlackBerryZ10
   • Funzionalità: definisce se il gruppo può gestire immagini, CSS, JavaScript o rotazione del dispositivo.
   • Larghezza minima dello schermo e Altezza
   • Disattiva emulatore: per abilitare/disabilitare l’emulatore durante la modifica del contenuto.

   Sulla Emulatori scheda:

   • Emulatori: selezionare gli emulatori assegnati a questo gruppo di dispositivi.

   Sulla Filtri scheda:

   • Per aggiungere un filtro, fai clic su Aggiungi elemento e seleziona un filtro dall’elenco a discesa.
   • I filtri vengono valutati nell’ordine in cui compaiono. Quando un dispositivo non soddisfa i criteri di un filtro, i filtri successivi nell’elenco non vengono valutati.

6. Fai clic su OK.

La finestra di dialogo di configurazione del gruppo di dispositivi mobili si presenta così:

CSS personalizzati per gruppo di dispositivi

Come descritto in precedenza, è possibile associare un CSS personalizzato a una pagina di gruppo di dispositivi, in modo analogo al CSS di una pagina di progettazione.Questo CSS viene utilizzato per influenzare il rendering specifico del gruppo di dispositivi del contenuto della pagina su autore e su pubblicazione.Questo CSS viene quindi incluso automaticamente:

• Nella pagina nell’istanza di authoring per ogni emulatore utilizzato da questo gruppo di dispositivi.
• Nella pagina dell’istanza di pubblicazione se l’agente utente della richiesta corrisponde a un dispositivo mobile in questo particolare gruppo di dispositivi.

Rilevamento dei dispositivi lato server

Utilizza i filtri e una libreria di specifiche del dispositivo per determinare le funzionalità del dispositivo che esegue la richiesta HTTP.

Sviluppa filtri per i gruppi di dispositivi

Crea un filtro per gruppi di dispositivi per definire un set di requisiti di funzionalità per i dispositivi. Crea tutti i filtri necessari per eseguire il targeting dei gruppi di funzionalità del dispositivo necessari.

Progetta i filtri in modo da poter utilizzare combinazioni di questi per definire i gruppi di funzionalità. In genere, esiste una sovrapposizione delle funzionalità di diversi gruppi di dispositivi. Pertanto, puoi utilizzare alcuni filtri con più definizioni di gruppi di dispositivi.

Dopo aver creato un filtro, puoi utilizzarlo nella configurazione del gruppo.

Per informazioni, vai a Creazione di filtri per i gruppi di dispositivi.

Utilizzo del database WURFL™

AEM utilizza una versione troncata del WURFLDatabase ™ per eseguire query sulle funzionalità dei dispositivi, ad esempio la risoluzione dello schermo o il supporto javascript, in base all'User-Agent del dispositivo.

Il codice XML del database WURFL™ è rappresentato come nodi sotto /var/mobile/devicespecs analizzando le wurfl.xmlfile a /libs/wcm/mobile/devicespecs/wurfl.xml. L'espansione ai nodi si verifica la prima volta che la cq-mobile-core bundle avviato.

Le funzionalità dei dispositivi sono memorizzate come proprietà dei nodi e i nodi rappresentano modelli di dispositivi. È possibile utilizzare le query per recuperare le funzionalità di un dispositivo o agente utente.

Poiché il database WURFL™ si sta evolvendo, potrebbe essere necessario personalizzarlo o sostituirlo. Per aggiornare il database dei dispositivi mobili sono disponibili le seguenti opzioni:

• Sostituisci il file con la versione più recente, se disponi di una licenza che consente questo utilizzo. Vedere Installazione di un database WURFL diverso.
• Utilizza la versione disponibile in AEM e configura un regexp che corrisponde alle stringhe Utente-Agente e punta a un dispositivo WURFL™ esistente. Vedi Aggiunta di una corrispondenza utente-agente basata su regexp.

Verifica della mappatura di un agente utente alle funzionalità WURFL™

Quando un dispositivo accede al sito mobile, AEM rileva il dispositivo, lo mappa a un gruppo di dispositivi in base alle sue funzionalità e invia una visualizzazione della pagina corrispondente al gruppo di dispositivi. Il gruppo di dispositivi corrispondente fornisce le informazioni sullo stile necessarie. Le mappature possono essere testate nella pagina di test dell’utente-agente mobile:

http://localhost:4502/etc/mobile/useragent-test.html

Installazione di un database WURFL™ diverso

Il database WURFL™ troncato installato con AEM è una versione che precede
30 agosto 2011. Se la tua versione del WURFL è stata rilasciata dopo il 30 agosto 2011, assicurati che l’utilizzo sia conforme alla tua licenza.

Per installare un database WURFL™:

1. In CRXDE Lite, crea la cartella seguente: /apps/wcm/mobile/devicespecs
2. Copiare il file WURFL™ nella cartella.
3. Rinomina il file come wurfl.xml.

AEM analizza automaticamente le wurfl.xml e aggiorna i nodi sottostanti /var/mobile/devicespecs.

Aggiunta di una corrispondenza utente-agente basata su regexp

Aggiungi un agente utente come espressione regolare sotto /apps/wcm/mobile/devicissues/wurfl/regexp per puntare a un tipo di dispositivo WURFL™ esistente.

1. In CRXDE Lite, crea un nodo sotto /apps/wcm/mobile/devicvisti/regexp, ad esempio apple_ipad_ver1.

2. Aggiungi le seguenti proprietà al nodo :

   • rigexp: espressione regolare che definisce gli agenti utente, ad esempio: .*Mozilla.*iPad.*AppleWebKit.*Safari.*
   • deviceId: l'ID dispositivo come definito nel wurfl.xml, ad esempio: apple_ipad_ver1

La configurazione di cui sopra fa sì che i dispositivi per i quali l'utente-agente corrisponde all'espressione regolare fornita siano mappati all'ID dispositivo apple_ipad_ver1 WURFL™, se esiste.

Rilevamento dei dispositivi lato client

Questa sezione descrive come utilizzare il rilevamento lato client del dispositivo di AEM per ottimizzare il rendering della pagina o fornire al client versioni alternative del sito web.

AEM supporta il rilevamento lato client del dispositivo in base a BrowserMap. BrowserMap viene fornito in AEM come libreria client in /etc/clientlibs/browsermap.

BrowserMap fornisce tre strategie che è possibile utilizzare per fornire un sito web alternativo a un cliente, che vengono utilizzate nel seguente ordine:

1. Collegamenti alternativi

2. URL specifico per il gruppo di dispositivi

3. URL basato su selettore

Fornire collegamenti alternativi

La PageVariantsProvider Il servizio OSGi è in grado di generare collegamenti alternativi per siti appartenenti alla stessa famiglia. Al fine di configurare i siti che devono essere presi in considerazione dal servizio, un cq:siteVariant deve essere aggiunto al jcr:content nodo dalla radice del sito.

La cq:siteVariant il nodo deve avere le seguenti proprietà:

• cq:childNodesMapTo - determina a quale attributo dell’elemento di collegamento saranno mappati i nodi figlio; si consiglia di organizzare il contenuto del sito web in modo che gli elementi secondari del nodo principale rappresentino la radice di una variante linguistica del sito web globale (ad esempio /content/mysite/en, /content/mysite/de), nel qual caso il valore del cq:childNodesMapTo devono hreflang;

• cq:variantDomain - indica cosa Externalizer viene utilizzato per generare gli URL assoluti delle varianti di pagina; se questo valore non è impostato, le varianti di pagina saranno generate utilizzando collegamenti relativi;

• cq:variantFamily - indica a quale famiglia di siti web appartiene questo sito; più rappresentazioni specifiche per dispositivo dello stesso sito web dovrebbero appartenere alla stessa famiglia;

• media - memorizza i valori dell'attributo media dell'elemento di collegamento; si consiglia di utilizzare il nome della BrowserMap registrato DeviceGroups, affinché BrowserMap la libreria può inoltrare automaticamente i client alla variante corretta del sito web.

PageVariantsProvider ed Externalizer

Quando il valore di cq:variantDomain proprietà di un cq:siteVariant il nodo non è vuoto, il PageVariantsProvider il servizio genererà collegamenti assoluti utilizzando questo valore come dominio configurato per Externalizer servizio. Assicurati di configurare le Externalizer per riflettere la configurazione.

Definizione di un URL specifico per un gruppo di dispositivi

Se non desideri utilizzare collegamenti alternativi, puoi configurare un URL globale per ogni DeviceGroup. È consigliabile creare una libreria client personalizzata che incorpori le browsermap.standard libreria client, ma ridefinisce i gruppi di dispositivi.

BrowserMap è progettato in modo tale che le definizioni dei gruppi di dispositivi possano essere ignorate creando e aggiungendo un nuovo gruppo di dispositivi con lo stesso nome al gruppo di dispositivi BrowserMap dalla libreria client personalizzata.

Definizione degli URL basati su selettore

Se non è stato utilizzato nessuno dei meccanismi precedenti per indicare un sito alternativo per BrowserMap, quindi selettori che utilizzeranno i nomi dei DeviceGroups verrà aggiunto al URLs, nel qual caso devi fornire i tuoi servlet che gestiranno le richieste.

Ad esempio, un browser www.example.com/index.html identificati come smartphone da BrowserMap è inoltrato a www.example.com/index.smartphone.html.

Utilizzo di BrowserMap nelle pagine

Per utilizzare la libreria client BrowserMap standard in una pagina, è necessario includere il /libs/wcm/core/browsermap/browsermap.jsp file che utilizza un cq:includetag nella pagina head sezione .

<cq:include script="/libs/wcm/core/browsermap/browsermap.jsp" />

Oltre ad aggiungere BrowserMap libreria client nel JSP file, devi anche aggiungere un cq:deviceIdentificationMode Proprietà stringa impostata su client-side al jcr:content nodo sotto la radice del sito Web.

Ignorare il comportamento predefinito di BrowserMap

Se desideri personalizzare BrowserMap - sovrascrivendo DeviceGroups o aggiungi più sonde, quindi devi creare una tua libreria lato client in cui incorporare il browsermap.standardlibreria lato client.

Inoltre, devi chiamare manualmente il BrowserMap.forwardRequest() nel tuo JavaScript codice.

Una volta creato il tuo BrowserMap libreria client, ti suggeriamo il seguente approccio:

1. Crea un browsermap.jsp file nell'applicazione

   <%@include file="/libs/foundation/global.jsp" %>
   <%@ taglib prefix="c" uri="https://java.sun.com/jsp/jstl/core" %>
   <%@ page import="
       com.day.cq.wcm.api.variants.PageVariant,
       com.day.cq.wcm.api.variants.PageVariantsProvider,
       com.day.cq.wcm.api.devicedetection.DeviceIdentificationMode,
       com.day.cq.wcm.api.WCMMode"
   %>
   <%
       final PageVariantsProvider p = sling.getService(PageVariantsProvider.class);
       if(p == null) {
           throw new IllegalStateException("Missing PageVariantsProvider service");
       }
       for(PageVariant v : p.getVariants(currentPage, slingRequest)) {
           final String curVar = v.getAttributes().get("data-current-variant");
           String media = v.getAttributes().get("media");
           if (media != null) {
               media = media.replaceAll(" ", "");
           }
   %>
       <link
           rel="alternate"
           data-cq-role="site.variant"
           title="<%= xssAPI.encodeForHTMLAttr(v.getTitle()) %>"
           hreflang="<%= xssAPI.encodeForHTMLAttr(v.getAttributes().get("hreflang")) %>"
           media="<%= xssAPI.encodeForHTMLAttr(media) %>"
           href="<%= xssAPI.getValidHref(v.getURL()) %>"
           <% if(curVar != null) { %> data-current-variant="<%= curVar %>"<% } %>
       />
   <%
       }
       Boolean browserMapEnabled = true;
       final DeviceIdentificationMode dim = sling.getService(DeviceIdentificationMode.class);
       String[] selectors  = slingRequest.getRequestPathInfo().getSelectors();
       boolean isPortletRequest = false;
       for (int i = 0; i < selectors.length; i++) {
           if ("portlet".equals(selectors[i])) {
               isPortletRequest = true;
               break;
           }
       }
       if (isPortletRequest) {
           log.debug("Request was made by a portlet container - BrowserMap will not be embedded");
       } else {
           final WCMMode wcmMode = WCMMode.fromRequest(slingRequest);
           boolean shouldIncludeClientLib = false;
           if (WCMMode.EDIT != wcmMode && WCMMode.PREVIEW != wcmMode && WCMMode.DESIGN != wcmMode) {
               if (dim != null) {
                   final String mode = dim.getDeviceIdentificationModeForPage(currentPage);
                   shouldIncludeClientLib = DeviceIdentificationMode.CLIENT_SIDE.equals(mode);
                   if (shouldIncludeClientLib) {
                       browserMapEnabled = (Boolean) request.getAttribute("browsermap.enabled");
                       if (browserMapEnabled == null) {
                           browserMapEnabled = true;
                       }
                   }
               }
           }
   %>
           <c:if test="<%= !browserMapEnabled %>">
               <meta name="browsermap.enabled" content="false">
           </c:if>
           <c:if test="<%= shouldIncludeClientLib %>">
               <meta name="viewport" content="width=device-width, initial-scale=1.0">
               <cq:includeClientLib categories="browsermap.custom"/>
           </c:if>
   <%
       }
   %>
   

2. Includi il broswermap.jsp nella sezione head.

   <cq:include script="browsermap.jsp" />
   

Esclusione di BrowserMap da alcune pagine

Se desideri escludere la libreria BrowserMap da alcune pagine in cui non è necessario il rilevamento del client, puoi aggiungere un attributo di richiesta:

<%
request.setAttribute("browsermap.enabled", false);
%>

In questo modo la /libs/wcm/core/browsermap/browsermap.jsp script per aggiungere alla pagina un tag meta che verrà creato BrowserMap per non eseguire alcun rilevamento:

<meta name="browsermap.enabled" content="false">

Verifica di una versione specifica di un sito Web

Normalmente, lo script BrowserMap reindirizzerà sempre i visitatori alla versione più adatta del sito web, in genere reindirizzando i visitatori al desktop o al sito mobile quando necessario.

Puoi forzare il dispositivo di qualsiasi richiesta per testare una versione specifica di un sito web aggiungendo il device all'URL. Il seguente URL esegue il rendering della versione mobile del sito Web Geometrixx Outdoors.

http://localhost:4502/content/geometrixx-outdoors/en.html?wcmmode=disabled&device=smartphone

Il valore del dispositivo ignorato viene memorizzato in un cookie per consentire di navigare nel sito Web senza aggiungere il device a ogni URL.

Di conseguenza, è necessario chiamare lo stesso URL con device impostato su browser per tornare alla versione desktop del sito web.

Elaborazione delle richieste mobile

AEM elabora una richiesta emessa da un dispositivo mobile appartenente al gruppo di dispositivi touch come segue:

1. Un iPad invia una richiesta all’istanza di pubblicazione AEM, ad esempio http://localhost:4503/content/geometrixx_mobile/en/products.html

2. AEM determina se il sito della pagina richiesta è un sito mobile (verificando se la pagina di primo livello è /content/geometrixx_mobile estende il componente pagina mobile). In caso affermativo:

3. AEM controlla le funzionalità del dispositivo in base all’agente utente nell’intestazione della richiesta.

4. AEM mappa le funzionalità del dispositivo al gruppo di dispositivi e imposta touch come selettore del gruppo di dispositivi.

5. AEM reindirizza la richiesta a http://localhost:4503/content/geometrixx_mobile/en/products.touch.html.

6. AEM invia la risposta ad iPad:

   • products.touch.html viene riprodotto nel modo consueto ed è memorizzabile nella cache.
   • I componenti di rendering utilizzano i selettori per adattare la presentazione.
   • AEM aggiunge automaticamente il selettore mobile a tutti i collegamenti interni della pagina.

Statistiche

Puoi ottenere alcune statistiche sul numero di richieste effettuate al server AEM da dispositivi mobili. È possibile suddividere il numero di richieste:

• per gruppo di dispositivi e dispositivo
• per anno, mese e giorno

Per visualizzare le statistiche:

1. Vai a Strumenti console.

2. Apri Statistiche dispositivo pagina sottostante Strumenti > Mobile.

3. Fai clic sul collegamento per visualizzare le statistiche relative a un anno, un mese o un giorno specifico.

La Statistiche si presenta così:

Se è necessario generare una voce nelle statistiche, è possibile procedere come segue:

1. Utilizza un dispositivo mobile o un emulatore (ad esempio https://chrispederick.com/work/user-agent-switcher/ su Firefox).

2. Richiedi una pagina mobile sull’istanza di authoring disattivando la modalità di authoring, ad esempio:

   http://localhost:4502/content/geometrixx_mobile/en/products.html?wcmmode=disabled

La Statistiche è ora disponibile.

Memorizzazione in cache delle pagine per i collegamenti "invia collegamento a un amico"

Le pagine mobili sono generalmente memorizzabili nella cache in Dispatcher, perché le pagine di cui è stato effettuato il rendering per un gruppo di dispositivi sono distinte nell’URL della pagina dal selettore del gruppo di dispositivi, ad esempio /content/mobilepage.touch.html. Una richiesta a una pagina mobile senza un selettore non viene mai memorizzata nella cache, come in questo caso, il rilevamento del dispositivo funziona e infine reindirizza al gruppo di dispositivi corrispondente (o "omatch" per quel motivo). Una pagina mobile sottoposta a rendering con un selettore di gruppi di dispositivi viene elaborata dal rewriter di collegamento, che riscrive tutti i collegamenti all’interno della pagina per contenere anche il selettore di gruppi di dispositivi, impedendo la riesecuzione del rilevamento del dispositivo per ogni clic su una pagina già qualificata.

Pertanto, potresti riscontrare lo scenario seguente:

L'utente Alice viene reindirizzato a coolpage.feature.htmle invia l'URL a un amico Bob che lo accede con un client diverso che rientra nel touch gruppo di dispositivi.

Se coolpage.feature.html viene servito da una cache front-end, AEM non ha la possibilità di analizzare la richiesta per scoprire che il selettore mobile non corrisponde al nuovo User-Agent e Bob riceve la rappresentazione sbagliata.

Per risolverlo, puoi includere una semplice interfaccia utente di selezione nelle pagine, in cui gli utenti finali possono ignorare il gruppo di dispositivi selezionato da AEM. Nell’esempio precedente, un collegamento (o un’icona) sulla pagina consente all’utente finale di passare a coolpage.touch.html se pensa che il suo dispositivo sia sufficiente.

Risorse Business.Adobe.com

Targeted Content Theme Editor Document Generation Managed Cloud Content Management Content Management System