Adobe consiglia di utilizzare l'editor SPA per i progetti che richiedono il rendering lato client basato sul framework dell'applicazione a pagina singola (ad esempio React). Per saperne di più.
Progettate le pagine Web in modo che si adattino alla finestra del client in cui vengono visualizzate. Con la progettazione reattiva, le stesse pagine possono essere visualizzate su più dispositivi in entrambi gli orientamenti. L'immagine seguente illustra alcuni modi in cui una pagina può rispondere alle modifiche nelle dimensioni della finestra:
Sviluppare applicazioni Adobe Experience Manager (AEM) che generano pagine HTML5 adattabili a diverse dimensioni e orientamenti di finestre. Ad esempio, i seguenti intervalli di larghezze di visualizzazione corrispondono a vari tipi di dispositivi e orientamenti
Per informazioni sull’implementazione di comportamenti di progettazione reattivi, consultate i seguenti argomenti:
Durante la progettazione, utilizzate la barra laterale Sidekick per visualizzare in anteprima le pagine per diverse dimensioni di schermo.
Prima di sviluppare l’applicazione AEM che supporta le pagine Web, è necessario adottare diverse decisioni di progettazione. Ad esempio, è necessario disporre delle informazioni seguenti:
La struttura tipica AEM applicazione supporta tutte le implementazioni di design reattivo:
Le media query consentono l'uso selettivo di stili CSS per il rendering della pagina. AEM strumenti e funzionalità di sviluppo consentono di implementare in modo efficace ed efficiente le media query nelle applicazioni.
Il gruppo W3C fornisce la raccomandazione Media Query che descrive questa funzione CSS3 e la sintassi.
Nel file CSS, definite le query multimediali in base alle proprietà dei dispositivi di destinazione. La seguente strategia di implementazione è efficace per la gestione degli stili per ogni media query:
L’esempio We.Retail Media utilizza questa strategia per definire gli stili nella progettazione del sito. Il file CSS utilizzato da We.Retail si trova in */apps/weretail/clientlibs/clientlib-site/less/grid.less
.
Nella tabella seguente sono elencati i file presenti nella cartella figlio css.
Nome file | Descrizione | Media Query |
---|---|---|
style.css | Stili comuni. | N/D |
bootstrap.css | Stili comuni, definiti dall’Bootstrap di Twitter. | N/D |
responsive-1200px.css | Stili per tutti i file multimediali con larghezza o larghezza pari a 1200 pixel. | @media (larghezza minima: 1200px) { |
responsive-980px-1199px.css | Stili per file multimediali con una larghezza compresa tra 980 e 1199 pixel. | @media (larghezza minima: 980 px) e (max-width: 1199px) { |
responsive-768px-979px.css | Stili per file multimediali con una larghezza compresa tra 768 e 979 pixel. | @media (larghezza minima: 768 px) e (max-width: 979px) { |
responsive-767px-max.css | Stili per tutti i file multimediali con larghezza inferiore a 768 pixel. | @media (larghezza max: 767px) { |
responsive-480px.css | Stili per tutti i file multimediali con larghezza inferiore a 481 pixel. | @media (larghezza max: 480) { ... } |
Il file css.txt presente nella cartella /etc/designs/weretail/clientlibs
elenca i file CSS inclusi nella cartella della libreria client. L'ordine dei file implementa la precedenza degli stili. Gli stili sono più specifici quando la dimensione del dispositivo diminuisce.
#base=css
style.css
bootstrap.css
responsive-1200px.css
responsive-980px-1199px.css
responsive-768px-979px.css
responsive-767px-max.css
responsive-480px.css
Suggerimento: I nomi dei file descrittivi consentono di identificare facilmente le dimensioni della finestra di destinazione.
Includete la cartella della libreria client nello script JSP del componente della pagina per generare il file CSS che include le media query e per fare riferimento al file.
<ui:includeClientLib categories="apps.weretail.all"/>
La cartella della libreria client apps.weretail.all
contiene la libreria clientlibs.
Lo script JSP genera il seguente codice HTML che fa riferimento ai fogli di stile:
<link rel="stylesheet" href="/etc/designs/weretail/clientlibs-all.css" type="text/css">
<link href="/etc/designs/weretail.css" rel="stylesheet" type="text/css">
Potete vedere le anteprime delle pagine in diverse dimensioni di visualizzazione per verificare il comportamento del design reattivo. In modalità Anteprima, Barra laterale include un menu a discesa Dispositivi che consente di selezionare un dispositivo. Quando selezionate un dispositivo, la pagina cambia per adattarsi alle dimensioni della finestra.
Per abilitare l'anteprima del dispositivo in Barra laterale, è necessario configurare la pagina e il servizio MobileEmulatorProvider. Un'altra configurazione di pagina controlla l'elenco dei dispositivi che viene visualizzato nell'elenco Dispositivi.
L'elenco Dispositivi viene visualizzato in Barra laterale quando la pagina include lo script JSP che esegue il rendering dell'elenco Dispositivi. Per aggiungere l'elenco Dispositivi a Barra laterale, includete lo script /libs/wcm/mobile/components/simulator/simulator.jsp
nella sezione head
della pagina.
Includete il seguente codice nella JSP che definisce la sezione head
:
<cq:include script="/libs/wcm/mobile/components/simulator/simulator.jsp"/>
Per visualizzare un esempio, aprire il file /apps/weretail/components/page/head.jsp
in CRXDE Lite.
Per abilitare il simulatore dispositivo per il supporto delle pagine, registrate i componenti di pagina con il servizio di fabbrica MobileEmulatorProvider e definite la proprietà mobile.resourceTypes
.
Quando lavorate con AEM esistono diversi metodi per gestire le impostazioni di configurazione di tali servizi; per informazioni dettagliate, consultate Configurazione di OSGi.
Ad esempio, per creare un nodo [sling:OsgiConfig](/docs/experience-manager-64/deploying/configuring/configuring-osgi.md#adding-a-new-configuration-to-the-repository)
nell'applicazione:
Cartella principale: /apps/application_name/config
Nome: com.day.cq.wcm.mobile.core.impl.MobileEmulatorProvider-*alias*
Il suffisso - *alias*
è richiesto perché il servizio MobileEmulatorProvider è un servizio di fabbrica. Utilizzate qualsiasi alias univoco per la fabbrica.
jcr:primaryType: sling:OsgiConfig
Aggiungi la seguente proprietà node:
Nome: mobile.resourceTypes
Tipo: String[]
Valore: I percorsi dei componenti della pagina che eseguono il rendering delle pagine Web. Ad esempio, l'app geometrixx-media utilizza i valori seguenti:
geometrixx-media/components/page
geometrixx-unlimited/components/pages/page
geometrixx-unlimited/components/pages/coverpage
geometrixx-unlimited/components/pages/issue
Per specificare i gruppi di dispositivi che vengono visualizzati nell'elenco Dispositivi, aggiungere una proprietà cq:deviceGroups
al nodo jcr:content
della pagina principale del sito. Il valore della proprietà è un array di percorsi ai nodi del gruppo di dispositivi.
I nodi dei gruppi di dispositivi si trovano nella cartella /etc/mobile/groups
.
Ad esempio, la pagina principale del sito Geometrixx Media è /content/geometrixx-media
. Il nodo /content/geometrixx-media/jcr:content
include la proprietà seguente:
cq:deviceGroups
String[]
/etc/mobile/groups/responsive
Utilizzare la console Strumenti per creare e modificare gruppi di dispositivi.
Per i gruppi di dispositivi utilizzati per la progettazione reattiva, modificate il gruppo di dispositivi e, nella scheda Generale, selezionate Disattiva emulatore. Questa opzione impedisce la visualizzazione del carosello dell'emulatore, che non è pertinente alla progettazione reattiva.
Potete utilizzare le media query per selezionare una risorsa immagine da visualizzare nella pagina. Tuttavia, tutte le risorse che utilizzano una query multimediale per condizionale del relativo utilizzo vengono scaricate nel client. La media query determina semplicemente se la risorsa scaricata viene visualizzata.
Per risorse di grandi dimensioni, come le immagini, il download di tutte le risorse non è un uso efficiente della pipeline dei dati del client. Per scaricare selettivamente le risorse, utilizzate javascript per avviare la richiesta di risorse dopo che le media query avranno eseguito la selezione.
La strategia seguente carica una singola risorsa selezionata utilizzando le media query:
Le implementazioni dell' interfaccia MediaQueryList definita dal W3C consentono di valutare le query multimediali utilizzando javascript. È possibile applicare la logica ai risultati delle query multimediali ed eseguire script destinati alla finestra corrente:
I browser che implementano l'interfaccia MediaQueryList supportano la funzione window.matchMedia()
. Questa funzione verifica le query multimediali rispetto a una stringa specificata. La funzione restituisce un oggetto MediaQueryList
che fornisce l'accesso ai risultati della query.
Per i browser che non implementano l'interfaccia, è possibile utilizzare un matchMedia()
polifill, ad esempio matchMedia.js, una libreria javascript disponibile liberamente.
L'elemento picture proposto da W3C utilizza query multimediali per determinare l'origine da utilizzare per gli elementi immagine. L’elemento picture utilizza gli attributi dell’elemento per associare le query multimediali ai percorsi immagine.
La libreria picturefill.js disponibile liberamente fornisce funzionalità simili all'elemento picture
proposto e utilizza una strategia simile. La libreria picturefill.js chiama window.matchMedia
per valutare le media query definite per un set di elementi div
. Ogni elemento div
specifica anche una sorgente immagine. L'origine viene utilizzata quando la query multimediale dell'elemento div
restituisce true
.
La libreria picturefill.js
richiede codice HTML simile al seguente esempio:
<div data-picture>
<div data-src='path to default image'></div>
<div data-src='path to small image' data-media="(media query for phone)"></div>
<div data-src='path to medium image' data-media="(media query for tablet)"></div>
<div data-src='path to large image' data-media="(media query for monitor)"></div>
</div>
Quando viene eseguito il rendering della pagina, picturefull.js inserisce un elemento img
come ultimo figlio dell'elemento <div data-picture>
:
<div data-picture>
<div data-src='path to default image'></div>
<div data-src='path to small image' data-media="(media query for phone)"></div>
<div data-src='path to medium image' data-media="(media query for tablet)"></div>
<div data-src='path to large image' data-media="(media query for monitor)"></div>
<img src="path to medium image">
</div>
In una pagina AEM, il valore dell'attributo data-src
è il percorso di una risorsa nella directory archivio.
Per implementare le immagini adattive nell'applicazione AEM, è necessario aggiungere le librerie javascript necessarie e includere nelle pagine il codice HTML richiesto.
Librerie
Ottenete le seguenti librerie JavaScript e includetele in una cartella libreria client:
/etc/clientlibs/granite/jquery
(categoria = jquery)Suggerimento: puoi concatenare automaticamente più cartelle libreria client incorporando.
HTML
Create un componente che generi gli elementi div richiesti dal codice picturefill.js. In una pagina AEM, il valore dell’attributo data-src è il percorso di una risorsa nell’archivio. Ad esempio, un componente di pagina può codificare le media query e i percorsi associati per le rappresentazioni di immagini in DAM. Oppure, create un componente Immagine personalizzato che consenta agli autori di selezionare le rappresentazioni delle immagini o di specificare le opzioni di rendering in fase di esecuzione.
L'esempio seguente HTML seleziona da 2 rappresentazioni DAM della stessa immagine.
<div data-picture>
<div data-src='/content/dam/geometrixx-media/articles/meridien.png'></div>
<div data-src='/content/dam/geometrixx-media/articles/meridien.png/jcr:content/renditions/cq5dam.thumbnail.319.319.png' data-media="(min-width: 769px)"></div>
<div data-src='/content/dam/geometrixx-media/articles/meridien.png/jcr:content/renditions/cq5dam.thumbnail.140.100.png' data-media="(min-width: 481px)"></div>
</div>
Il componente Immagine adattiva foundation implementa le immagini adattive:
/libs/foundation/components/adaptiveimage/clientlibs
/libs/foundation/components/adaptiveimage/adaptiveimage.jsp
La sezione successiva fornisce dettagli su questo componente.
Per personalizzare il rendering delle immagini, è necessario comprendere l’implementazione predefinita AEM rendering delle immagini statiche. AEM fornisce il componente Immagine e un servlet per il rendering delle immagini che funzionano insieme per il rendering delle immagini per la pagina Web. La seguente sequenza di eventi si verifica quando il componente Immagine viene incluso nel sistema paragrafo della pagina:
Ad esempio, la JSP del componente Immagine genera il seguente elemento HTML:
<img title="My Image" alt="My Image" class="cq-dd-image" src="/content/mywebsite/en/_jcr_content/par/image_0.img.jpg/1358372073597.jpg">
Quando il browser carica la pagina, richiede l’immagine utilizzando il valore dell’attributo src come URL. Sling scompone l’URL:
/content/mywebsite/en/_jcr_content/par/image_0
.jpg
img
1358372073597.jpg
Il nodo image_0
ha un valore jcr:resourceType
di foundation/components/image
, che ha un valore sling:resourceSuperType
di foundation/components/parbase
. Il componente parbase include lo script img.GET.java che corrisponde al selettore e all’estensione del nome del file dell’URL della richiesta. CQ utilizza questo script (servlet) per eseguire il rendering dell’immagine.
Per visualizzare il codice sorgente dello script, utilizzare CRXDE Lite per aprire il /libs/foundation/components/parbase/img.GET.java
file.
Adatta le immagini in fase di esecuzione in base alle caratteristiche della finestra del client per fornire immagini conformi ai principi di responsive design. Usate lo stesso pattern di progettazione del rendering di immagini statiche, utilizzando un servlet e un componente di authoring.
Il componente deve eseguire le seguenti operazioni:
div
che contengono selettori di supporti e chiamate di servizi per il rendering dell'immagine.Il client Web utilizza le librerie javascript matchMedia e Picturefill (o librerie simili) per valutare i selettori dei contenuti multimediali.
Il servlet che elabora la richiesta di immagine deve eseguire le seguenti operazioni:
Soluzioni disponibili
AEM le seguenti implementazioni che potete utilizzare o estendere.
Il componente Immagine adattiva genera chiamate al Servlet del componente Immagine adattiva per rappresentare un’immagine ridimensionata in base alla schermata del dispositivo. Il componente include le risorse seguenti:
cq:ClientLibraryFolder
che assembla la libreria javascript matchMedia Polyfill e una libreria javascript Picturefill modificata.cq:editConfig
sostituisce il componente immagine di base CQ in modo che la destinazione di rilascio crei un componente immagine adattiva anziché un componente immagine di base.Lo script adaptive-image.jsp include il seguente codice che genera elementi div e media query:
<div data-picture data-alt='<%= alt %>'>
<div data-src='<%= path + ".img.320.low." + extension + suffix %>' data-media="(min-width: 1px)"></div> <%-- Small mobile --%>
<div data-src='<%= path + ".img.320.medium." + extension + suffix %>' data-media="(min-width: 320px)"></div> <%-- Portrait mobile --%>
<div data-src='<%= path + ".img.480.medium." + extension + suffix %>' data-media="(min-width: 321px)"></div> <%-- Landscape mobile --%>
<div data-src='<%= path + ".img.476.high." + extension + suffix %>' data-media="(min-width: 481px)"></div> <%-- Portrait iPad --%>
<div data-src='<%= path + ".img.620.high." + extension + suffix %>' data-media="(min-width: 769px)"></div> <%-- Landscape iPad --%>
<div data-src='<%= path + ".img.full.high." + extension + suffix %>' data-media="(min-width: 1025px)"></div> <%-- Desktop --%>
<%-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --%>
<noscript>
<img src='<%= path + ".img.320.low." + extension + suffix %>' alt='<%= alt %>'>
</noscript>
</div>
La variabile path
contiene il percorso della risorsa corrente (il nodo componente immagine adattiva). Il codice genera una serie di elementi div
con la seguente struttura:
<div data-scr = "*path-to-parent-node*.adaptive-image.adapt.*width*.*quality*.jpg" data-media="*media query*"></div>
Il valore dell'attributo data-scr
è un URL che Sling risolve al Servlet componente immagine adattiva che esegue il rendering dell'immagine. L'attributo data-media contiene la query multimediale valutata in base alle proprietà client.
Il seguente codice HTML è un esempio degli elementi div
generati dalla JSP:
<div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.320.low.jpg'></div>
<div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.320.medium.jpg' data-media="(min-width: 320px)"></div>
<div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.480.medium.jpg' data-media="(min-width: 321px)"></div>
<div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.476.high.jpg' data-media="(min-width: 481px)"></div>
<div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.620.high.jpg' data-media="(min-width: 769px)"></div>
<div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.full.high.jpg' data-media="(min-width: 1025px)"></div>
Se personalizzate il componente Immagine adattiva e modificate i selettori di larghezza, dovete anche configurare il Servlet componente Immagine adattiva per supportare le larghezze.
Il Servlet del componente Immagine adattiva ridimensiona un’immagine JPEG in base alla larghezza specificata e imposta la qualità JPEG.
Il Servlet componente immagine adattiva è associato al servlet Sling predefinito e supporta le estensioni di file .jpg, .jpeg, .gif e .png. Il selettore servlet è img.
I file .gif animati non sono supportati in AEM per le rappresentazioni adattive.
Sling risolve quindi gli URL di richieste HTTP nel seguente formato a questo servlet:
*path-to-node*.img.*extension*
Ad esempio, Sling inoltra le richieste HTTP con l'URL http://localhost:4502/content/geometrixx/adaptiveImage.img.jpg
al servlet componente immagine adattiva.
Due selettori aggiuntivi specificano la larghezza dell’immagine richiesta e la qualità JPEG. L’esempio seguente richiede un’immagine di larghezza di 480 pixel e qualità media:
http://localhost:4502/content/geometrixx/adaptiveImage.adapt.480.MEDIUM.jpg
Proprietà immagine supportate
Il servlet accetta un numero limitato di larghezze e qualità delle immagini. Per impostazione predefinita, sono supportate le seguenti larghezze (in pixel):
Il valore intero non indica alcuna modifica in scala.
Sono supportati i seguenti valori per la qualità JPEG:
I valori numerici sono rispettivamente 0,4, 0,82 e 1,0.
Modifica delle larghezze supportate predefinite
Utilizzate la console Web (http://localhost:4502/system/console/configMgr) o un nodo sling:OsgiConfig per configurare le larghezze supportate dal Servlet componente immagine adattivo Adobe CQ.
Per informazioni su come configurare AEM servizi, vedere Configurazione di OSGi.
Console Web | sling:OsgiConfig | |
---|---|---|
Nome servizio o nodo | Il nome del servizio nella scheda Configurazione è Servlet componente immagine adattiva Adobe CQ | com.day.cq.wcm.foundation.impl. AdaptiveImageComponentServlet |
Proprietà | Larghezze supportate
|
adapt.supported.widths
|
La classe com.day.cq.wcm.foundation.impl.AdaptiveImageComponentServlet
estende la classe AbstractImageServlet. Il codice sorgente AdaptiveImageComponentServlet si trova nella cartella /libs/foundation/src/impl/src/com/day/cq/wcm/foundation/impl
.
La classe utilizza le annotazioni SCR Felix per configurare il tipo di risorsa e l'estensione di file a cui è associato il servlet, nonché il nome del primo selettore.
@Component(metatype = true, label = "Adobe CQ Adaptive Image Component Servlet",
description = "Render adaptive images in a variety of qualities")
@Service
@Properties(value = {
@Property(name = "sling.servlet.resourceTypes", value = "foundation/components/adaptiveimage", propertyPrivate = true),
@Property(name = "sling.servlet.selectors", value = "img", propertyPrivate = true),
@Property(name = "sling.servlet.extensions", value ={
"jpg",
"jpeg",
"png",
"gif"
}, propertyPrivate = true)
})
Il servlet utilizza l'annotazione SCR di proprietà per impostare la qualità e le dimensioni dell'immagine supportate predefinite.
@Property(value = {
"320", // iPhone portrait
"480", // iPhone landscape
"476", // iPad portrait
"620" // iPad landscape
},
label = "Supported Widths",
description = "List of widths this component is permitted to generate.")
La classe AbstractImageServlet
fornisce il metodo doGet
che elabora la richiesta HTTP. Questo metodo determina la risorsa associata alla richiesta, recupera le proprietà della risorsa dall'archivio e le restituisce in un oggetto ImageContext.
La classe com.day.cq.commons.DownloadResource fornisce getFileReference method
, che recupera il valore della proprietà fileReference
della risorsa.
La classe AdaptiveImageComponentServlet
sostituisce il metodo createLayer
. Il metodo ottiene il percorso della risorsa immagine e la larghezza dell'immagine richiesta dall'oggetto ImageContext
. Quindi, richiama i metodi della classe info.geometrixx.commons.impl.AdaptiveImageHelper
, che esegue il ridimensionamento effettivo dell'immagine.
Anche la classe AdaptiveImageComponentServlet sostituisce il metodo writeLayer. Questo metodo applica la qualità JPEG all’immagine.
Il servlet di modifica Riferimento immagine di esempio genera attributi di dimensione per l’elemento img per ridimensionare un’immagine sulla pagina Web.
Il servlet è associato a cq:page
risorse e supporta l'estensione .jpg. Il selettore servlet è image
. Sling risolve quindi gli URL di richieste HTTP nel seguente formato a questo servlet:
path-to-page-node.image.jpg
Ad esempio, Sling inoltra le richieste HTTP con l’URL http://localhost:4502/content/geometrixx/en.image.jpg
a Image Reference Modification Servlet.
Tre selettori aggiuntivi specificano la larghezza, l’altezza e la qualità dell’immagine richiesta (facoltativamente). L’esempio seguente richiede un’immagine di larghezza 770 pixel, altezza 360 pixel e di qualità media.
http://localhost:4502/content/geometrixx/en.image.770.360.MEDIUM.jpg
Proprietà immagine supportate
Il servlet accetta un numero finito di dimensioni immagine e valori di qualità.
I seguenti valori sono supportati per impostazione predefinita (widthheight):
Sono supportati i seguenti valori per la qualità delle immagini:
Quando lavorate con AEM esistono diversi metodi per gestire le impostazioni di configurazione di tali servizi; per informazioni dettagliate, consultate Configurazione di OSGi.
Il percorso dell'immagine, le dimensioni e i valori di qualità devono essere memorizzati come proprietà di un nodo nell'archivio:
Il nome del nodo è image
.
Il nodo principale è il nodo jcr:content
di una risorsa cq:page
.
Il percorso dell'immagine viene memorizzato come valore di una proprietà denominata fileReference
.
Durante la creazione di una pagina, utilizzare la barra laterale per specificare l'immagine e aggiungere il nodo image
alle proprietà della pagina:
La classe info.geometrixx.commons.impl.servlets.ImageReferenceModificationServlet estende la classe AbstractImageServlet. Se avete installato il pacchetto cq-geometrixx-commons-pkg, il codice sorgente ImageReferenceModificationServlet si trova nella cartella /apps/geometrixx-commons/src/core/src/main/java/info/geometrixx/commons/impl/servlets
.
La classe utilizza le annotazioni SCR Felix per configurare il tipo di risorsa e l'estensione di file a cui è associato il servlet, nonché il nome del primo selettore.
@Component(metatype = true, label = "Adobe CQ Image Reference Modification Servlet",
description = "Render the image associated with a page in a variety of dimensions and qualities")
@Service
@Properties(value = {
@Property(name = "sling.servlet.resourceTypes", value = NameConstants.NT_PAGE, propertyPrivate = true),
@Property(name = "sling.servlet.selectors", value = "image", propertyPrivate = true),
@Property(name = "sling.servlet.extensions", value = "jpg", propertyPrivate = true)
})
Il servlet utilizza l'annotazione SCR di proprietà per impostare la qualità e le dimensioni dell'immagine supportate predefinite.
@Property(label = "Image Quality",
description = "Quality must be a double between 0.0 and 1.0", value = "0.82")
@Property(value = {
"256x192", // Category page article list images
"370x150", // "Most popular" desktop & iPad & carousel min-width: 1px
"480x200", // "Most popular" phone
"127x127", // article summary phone square images
"770x360", // article summary, desktop
"620x290", // article summary, tablet
"480x225", // article summary, phone (landscape)
"320x150", // article summary, phone (portrait) and fallback
"375x175", // 2-column article summary, desktop
"303x142", // 2-column article summary, tablet
"1170x400", // carousel, full
"940x340", // carousel min-width: 980px
"770x300", // carousel min-width: 768px
"480x190" // carousel min-width: 480px
},
label = "Supported Resolutions",
description = "List of resolutions this component is permitted to generate.")
La classe AbstractImageServlet
fornisce il metodo doGet
che elabora la richiesta HTTP. Questo metodo determina la risorsa associata alla chiamata, recupera le proprietà delle risorse dall'archivio e le salva in un oggetto ImageContext.
La classe ImageReferenceModificationServlet
sostituisce il metodo createLayer
e implementa la logica che determina la risorsa immagine da eseguire. Il metodo recupera un nodo secondario del nodo jcr:content
della pagina denominato image
. Da questo nodo image
viene creato un oggetto Image e il metodo getFileReference
restituisce il percorso del file di immagine dalla proprietà fileReference
del nodo di immagine.
La classe com.day.cq.commons.DownloadResource fornisce il metodo getFileReference.
AEM consente di implementare in modo efficiente ed efficace le griglie fluide. In questa pagina viene illustrato come integrare la griglia fluida o un'implementazione esistente della griglia (ad esempio Bootstrap) nell'applicazione AEM.
Se non avete familiarità con le griglie fluide, consultate la sezione Introduzione alle griglie fluide nella parte inferiore della pagina. Questa introduzione fornisce una panoramica delle griglie fluide e indicazioni per la loro progettazione.
Utilizzare i componenti pagina per generare gli elementi HTML che definiscono i blocchi di contenuto della pagina. ClientLibraryFolder a cui fa riferimento la pagina fornisce il CSS che controlla il layout dei blocchi di contenuto:
Ad esempio, l’applicazione geometrixx-media di esempio contiene il componente media-home. Questo componente di pagina inserisce due script, che generano due elementi div
della classe row-fluid
:
La prima riga contiene un elemento div
della classe span12
(il contenuto si estende su 12 colonne). L'elemento div
contiene il componente parsys.
La seconda riga contiene due elementi div
, uno della classe span8
e l'altro della classe span4
. Ogni elemento div
include il componente parsys.
<div class="page-content">
<div class="row-fluid">
<div class="span12">
<cq:include path="grid-12-par" resourceType="foundation/components/parsys" />
</div>
</div>
<div class="row-fluid">
<div class="span8">
<cq:include path="grid-8-par" resourceType="foundation/components/parsys" />
</div>
<div class="span4">
<cq:include path="grid-4-par" resourceType="foundation/components/parsys" />
</div>
</div>
</div>
Quando un componente include più elementi cq:include
che fanno riferimento al componente parsys, ogni attributo path
deve avere un valore diverso.
La struttura associata al componente pagina geometrixx-media (/etc/designs/geometrixx-media
) contiene la cartella clientlibs
ClientLibraryFolder. Questa ClientLibraryFolder definisce gli stili CSS per le classi row-fluid
, span*
e span*
che sono elementi secondari di classi row-fluid
. Le media query consentono di ridefinire gli stili per diverse dimensioni di visualizzazione.
Il seguente esempio di CSS è un sottoinsieme di tali stili. Questo sottoinsieme si concentra sulle classi span12
, span8
e span4
e sulle query multimediali per due dimensioni di finestra. Osservate le seguenti caratteristiche del CSS:
.span
definiscono le larghezze degli elementi utilizzando numeri assoluti..row-fluid .span*
definiscono le larghezze degli elementi come percentuali del padre. Le percentuali sono calcolate a partire dalle larghezze assolute.L'esempio di Geometrixx Media integra il framework javascript Bootstrap nella relativa implementazione della griglia fluida. Il framework di Bootstrap fornisce il file bootstrap.css.
/* default styles (no media queries) */
.span12 { width: 940px }
.span8 { width: 620px }
.span4 { width: 300px }
.row-fluid .span12 { width: 100% }
.row-fluid .span8 { width: 65.95744680851064% }
.row-fluid .span4 { width: 31.914893617021278% }
@media (min-width: 768px) and (max-width: 979px) {
.span12 { width: 724px; }
.span8 { width: 476px; }
.span4 { width: 228px; }
.row-fluid .span12 { width: 100%;}
.row-fluid .span8 { width: 65.74585635359117%; }
.row-fluid .span4 { width: 31.491712707182323%; }
}
@media (min-width: 1200px) {
.span12 { width: 1170px }
.span8 { width: 770px }
.span4 { width: 370px }
.row-fluid .span12 { width: 100% }
.row-fluid .span8 { width: 65.81196581196582% }
.row-fluid .span4 { width: 31.623931623931625% }
}
Le pagine dell’applicazione Geometrixx Media di esempio distribuiscono le righe dei blocchi di contenuto orizzontalmente in viste ampie. Nelle finestre più piccole, gli stessi blocchi sono distribuiti in verticale. L'esempio CSS seguente mostra gli stili che implementano questo comportamento per il codice HTML generato dal componente pagina media-home:
Il CSS predefinito per la pagina di benvenuto multimediale assegna lo stile float:left
per le classi span*
che si trovano all'interno di row-fluid
classi.
Le query multimediali per le finestre più piccole assegnano lo stile float:none
per le stesse classi.
/* default styles (no media queries) */
.row-fluid [class*="span"] {
width: 100%;
float: left;
}
@media (max-width: 767px) {
[class*="span"], .row-fluid [class*="span"] {
float: none;
width: 100%;
}
}
Modularizzare i componenti per un utilizzo efficiente del codice. Probabilmente il sito utilizza diversi tipi di pagine, come una pagina di benvenuto, una pagina di articolo o una pagina di prodotto. Ogni tipo di pagina contiene diversi tipi di contenuto e probabilmente utilizza layout diversi. Tuttavia, quando alcuni elementi di ciascun layout sono comuni tra più pagine, potete riutilizzare il codice che implementa quella parte del layout.
Utilizzare le sovrapposizioni di componenti pagina
Creare un componente di pagina principale che fornisca script per la generazione delle varie parti di una pagina, come le sezioni head
e body
, header
, content
e footer
all'interno del corpo.
Create altri componenti di pagina che utilizzano il componente pagina principale come cq:resourceSuperType
. Questi componenti includono script che ignorano gli script della pagina principale in base alle esigenze.
Ad esempio, l’applicazione goemetrixx-media include il componente pagina (il sling:resourceSuperType
è il componente pagina di base). Diversi componenti secondari (come articolo, categoria e media-home) utilizzano questo componente di pagina come sling:resourceSuperType
. Ogni componente secondario include un file content.jsp che sostituisce il file content.jsp del componente pagina.
Riutilizzare gli script
Creare più script JSP che generano combinazioni di righe e colonne comuni per più componenti di pagina. Ad esempio, lo script content.jsp
dell'articolo e i componenti Media-home fanno riferimento entrambi allo script 8x4col.jsp
.
Organizzare gli stili CSS in base alle dimensioni della finestra di destinazione
Includere stili CSS e query multimediali per diverse dimensioni di visualizzazione in file separati. Utilizzate le cartelle della libreria client per concatenarle.
Quando i componenti generano un singolo blocco di contenuto, in genere la griglia definita dal componente pagina controlla la posizione del contenuto.
Gli autori devono essere consapevoli del fatto che il blocco di contenuto può essere rappresentato in varie dimensioni e posizioni relative. Il testo del contenuto non deve utilizzare direzioni relative per fare riferimento ad altri blocchi di contenuto.
Se necessario, il componente deve fornire qualsiasi libreria CSS o javascript necessaria per il codice HTML generato. Usate una cartella libreria client all’interno del componente per generare i file CSS e JS. Per esporre i file, creare una dipendenza o incorporare la libreria in un'altra cartella della libreria client sotto la cartella /etc.
Sottocartelle
Se il componente contiene più blocchi di contenuto, aggiungete i blocchi di contenuto all’interno di una riga per creare una sottogriglia sulla pagina:
Ad esempio, il componente /apps/geometrixx-media/components/2-col-article-summary
genera due colonne di contenuto. L’HTML generato ha la struttura seguente:
<div class="row-fluid mutli-col-article-summary">
<div class="span6">
<article>
<div class="article-summary-image">...</div>
<div class="social-header">...</div>
<div class="article-summary-description">...</div>
<div class="social">...</div>
</article>
</div>
</div>
I selettori .row-fluid .span6
del CSS della pagina si applicano agli elementi div
della stessa classe e struttura in questo HTML. Tuttavia, il componente include anche la cartella /apps/geometrixx-media/components/2-col-article-summary/clientlibs della libreria client:
multi-col-article-summary
dell'elemento riga div
per ignorare il comportamento della classe row-fluid
della pagina.Ad esempio, nel file /apps/geometrixx-media/components/2-col-article-summary/clientlibs/css/responsive-480px.css
sono inclusi i seguenti stili:
@media (max-width: 480px) {
.mutli-col-article-summary .article-summary-image {
float: left;
width: 127px;
}
.mutli-col-article-summary .article-summary-description {
width: auto;
margin-left: 127px;
}
.mutli-col-article-summary .article-summary-description h4 {
padding-left: 10px;
}
.mutli-col-article-summary .article-summary-text {
margin-left: 127px;
min-height: 122px;
top: 0;
}
}
Le griglie fluide consentono ai layout di pagina di adattarsi alle dimensioni della finestra del client. Le griglie sono costituite da colonne logiche e righe che posizionano i blocchi di contenuto sulla pagina.
Con la tecnologia HTML5 potete implementare la griglia e manipolarla per adattare i layout di pagina a diverse dimensioni di visualizzazione:
div
contengono blocchi di contenuto che si estendono su un certo numero di colonne.Per ogni intervallo di larghezze di visualizzazione di destinazione, utilizzate una larghezza di pagina statica e blocchi di contenuto con larghezza costante. Quando si ridimensiona manualmente una finestra del browser, le modifiche alla dimensione del contenuto vengono apportate a larghezze di finestre discrete (dette anche punti di interruzione). Di conseguenza, le progettazioni di pagina sono maggiormente rispettate, ottimizzando l'esperienza dell'utente.
Utilizzate le griglie per ridimensionare i blocchi di contenuto per adattarli a dimensioni di visualizzazione diverse. I blocchi di contenuto si estendono su un numero specifico di colonne. Poiché le larghezze delle colonne aumentano o diminuiscono per adattarsi a diverse dimensioni di visualizzazione, la larghezza dei blocchi di contenuto aumenta o diminuisce di conseguenza. Il ridimensionamento può supportare sia i visualizzatori di grandi e medie dimensioni sufficientemente larghi da adattarsi alla posizione affiancata dei blocchi di contenuto.
Le dimensioni dei blocchi di contenuto possono essere vincolate da una larghezza minima, oltre la quale il ridimensionamento non è più efficace. Per le finestre più piccole, la griglia può essere utilizzata per distribuire verticalmente blocchi di contenuto anziché orizzontalmente.
Determinare le colonne e le righe necessarie per posizionare i blocchi di contenuto sulle pagine. I layout di pagina determinano il numero di colonne e righe che si estendono sulla griglia.
Numero di colonne
Includete un numero sufficiente di colonne per posizionare in orizzontale i blocchi di contenuto in tutti i layout, per tutte le dimensioni delle finestre. È consigliabile utilizzare più colonne di quelle attualmente necessarie per adattare le progettazioni di pagina future.
Contenuto riga
Utilizzare le righe per controllare il posizionamento verticale dei blocchi di contenuto. Determinare i blocchi di contenuto che condividono la stessa riga:
Creare classi e stili CSS per controllare il layout dei blocchi di contenuto su una pagina. Le strutture delle pagine sono spesso basate sulle dimensioni e la posizione relative dei blocchi di contenuto all'interno della finestra della vista. La finestra di visualizzazione determina la dimensione effettiva dei blocchi di contenuto. Il CSS deve tenere conto delle dimensioni relative e assolute. Potete implementare una griglia fluida utilizzando tre tipi di classi CSS:
div
che è un contenitore per tutte le righe. Questa classe imposta la larghezza assoluta della griglia.div
che rappresentano una riga. Questa classe controlla il posizionamento orizzontale o verticale dei blocchi di contenuto in essa contenuti.div
che rappresentano blocchi di contenuto di diverse larghezze. Le larghezze sono espresse come percentuale della riga padre.Le larghezze delle finestre di destinazione (e le relative query multimediali associate) delimitano le larghezze discrete utilizzate per un layout di pagina.
In genere, lo stile width
delle classi di blocchi di contenuto si basa sulle seguenti caratteristiche della pagina e della griglia:
Il CSS include una serie di media query che utilizzano la struttura seguente:
@media(query_for_targeted_viewport){
.class_for_container{ width:absolute_page_width }
.class_for_row { width:100%}
/* several selectors for content blocks */
.class_for_content_block1 { width:absolute_block_width1 }
.class_for_content_block2 { width:absolute_block_width2 }
...
/* several selectors for content blocks inside rows */
.class_for_row .class_for_content_block1 { width:relative_block_width1 }
.class_for_row .class_for_content_block2 { width:relative_block_width2 }
...
}
Utilizzate il seguente algoritmo come punto di partenza per lo sviluppo delle classi di elementi e degli stili CSS per le pagine.
Definire un nome di classe per l'elemento div che contiene tutte le righe, ad esempio content.
Definire una classe CSS per gli elementi div che rappresentano le righe, ad esempio row-fluid
.
Definire i nomi delle classi per gli elementi dei blocchi di contenuto. Una classe è necessaria per tutte le larghezze possibili, in termini di estensione di colonna. Ad esempio, utilizzare la classe span3
per gli elementi div
che si estendono su 3 colonne, utilizzare le classi span4
per un'estensione di 4 colonne. Definite tutte le classi quante colonne della griglia.
Per ogni dimensione di visualizzazione di destinazione, aggiungete la query multimediale corrispondente al file CSS. Aggiungete i seguenti elementi in ogni media query:
content
, ad esempio .content{}
..span3{ }
.row-fluid
, ad esempio .row-fluid{ }
.row-fluid span3 { }
.Aggiungete stili di larghezza per ciascun selettore:
content
sulla dimensione assoluta della pagina, ad esempio width:480px
.(absolute width of page)/(number of columns)
..row-fluid .span
come percentuale della larghezza totale. Calcolare questa larghezza utilizzando la formula (absolute span width)/(absolute page width)*100
.Utilizzare lo stile mobile della classe .row-fluid
per controllare se i blocchi di contenuto di una riga sono disposti in orizzontale o verticale.
Lo stile float:left
o float:right
causa la distribuzione orizzontale degli elementi secondari (blocchi di contenuto).
Lo stile float:none
causa la distribuzione verticale degli elementi secondari.
Aggiungete lo stile al selettore .row-fluid
all'interno di ogni media query. Impostate il valore in base al layout di pagina utilizzato per la media query. Ad esempio, nel diagramma seguente è illustrata una riga che distribuisce il contenuto in orizzontale per le finestre grandi e in verticale per le finestre strette.
Il seguente CSS può implementare questo comportamento:
@media (min-width: 768px) and (max-width: 979px) {
.row-fluid {
width:100%;
float:left
}
}
@media (max-width:480px){
.row-fluid {
width:100%;
float:none
}
}
Per il layout di pagina di ciascuna dimensione di visualizzazione di destinazione, stabilite il numero di colonne su cui si estende ciascun blocco di contenuto. Quindi, stabilite la classe da utilizzare per gli elementi div di tali blocchi di contenuto.
Una volta stabilite le classi div, è possibile implementare la griglia utilizzando l'applicazione AEM.