Adobe raadt aan de SPA Editor te gebruiken voor projecten die renderen op basis van één pagina-toepassingsframework op basis van client-side vereisen (zoals Reageren). Meer informatie.
Ontwerp uw webpagina's zodanig dat ze zich aanpassen aan de clientviewport waarin ze worden weergegeven. Met responsief ontwerp kunnen dezelfde pagina's effectief op meerdere apparaten in beide richtingen worden weergegeven. In de volgende afbeelding ziet u enkele manieren waarop een pagina kan reageren op wijzigingen in de viewportgrootte:
Ontwikkel Adobe Experience Manager (AEM) toepassingen die HTML5-pagina's genereren die zich aanpassen aan meerdere venstergrootten en -standen. De volgende bereiken van viewport-breedten komen bijvoorbeeld overeen met verschillende apparaattypen en -oriëntaties
Zie de volgende onderwerpen voor informatie over het uitvoeren van ontvankelijk ontwerpgedrag:
Tijdens het ontwerpen kunt u Sidekick gebruiken om een voorvertoning van uw pagina's weer te geven voor verschillende schermgrootten.
Voordat u de AEM ontwikkelt die uw webpagina's ondersteunt, moet u een aantal ontwerpbeslissingen nemen. U moet bijvoorbeeld over de volgende informatie beschikken:
De typische AEM toepassingsstructuur ondersteunt alle responsieve ontwerpimplementaties:
Met mediaquery's kunt u CSS-stijlen selectief gebruiken voor het weergeven van pagina's. AEM ontwikkelingshulpmiddelen en eigenschappen laten u toe om media vragen in uw toepassingen effectief en efficiënt uit te voeren.
De W3C-groep biedt de aanbeveling Mediaquery's waarmee deze CSS3-functie en de syntaxis worden beschreven.
Definieer in uw CSS-bestand mediaquery's op basis van de eigenschappen van de apparaten waarvoor u een mediaquery maakt. De volgende implementatiestrategie is effectief voor het beheren van stijlen voor elke mediaquery:
In het voorbeeldformulier We.Retail Media wordt deze strategie gebruikt om stijlen in het siteontwerp te definiëren. Het CSS-bestand dat door We.Retail wordt gebruikt, bevindt zich op */apps/weretail/clientlibs/clientlib-site/less/grid.less
.
In de volgende tabel worden de bestanden in de onderliggende css-map weergegeven.
Bestandsnaam | Beschrijving | Mediaquery |
---|---|---|
style.css | Algemene stijlen. | N.v.t. |
bootstrap.css | Algemene stijlen, gedefinieerd door Twitter Bootstrap. | N.v.t. |
responsive-1200px.css | Stijlen voor alle media die 1200 pixels breed of breder zijn. | @media (min-breedte): 1200px) { |
responsive-980px-1199px.css | Stijlen voor media die tussen 980 pixels en 1199 pixels breed zijn. | @media (min-breedte): 980 px) en (max. breedte: 1199px) { |
responsive-768px-979px.css | Stijlen voor media die tussen 768 pixels en 979 pixels breed zijn. | @media (min-breedte): 768 px) en (max. breedte: 979px) { |
responsive-767px-max.css | Stijlen voor alle media die minder dan 768 pixels breed zijn. | @media (maximale breedte: 767px) { |
responsive-480px.css | Stijlen voor alle media die minder dan 481 pixels breed zijn. | @media (maximale breedte: 480) { ... } |
In het bestand css.txt in de map /etc/designs/weretail/clientlibs
worden de CSS-bestanden weergegeven die de map met de clientbibliotheek bevat. De volgorde van de bestanden implementeert stijlprioriteit. Stijlen zijn specifieker naarmate de apparaatgrootte afneemt.
#base=css
style.css
bootstrap.css
responsive-1200px.css
responsive-980px-1199px.css
responsive-768px-979px.css
responsive-767px-max.css
responsive-480px.css
Tip: Met beschrijvende bestandsnamen kunt u de doelgrootte van de viewport gemakkelijk identificeren.
Neem de clientbibliotheekmap op in het JSP-script van uw paginacomponent om het CSS-bestand te genereren dat de mediaquery's bevat en naar het bestand te verwijzen.
<ui:includeClientLib categories="apps.weretail.all"/>
De clientbibliotheekmap apps.weretail.all
sluit de clientbibliotheek in.
Het JSP manuscript produceert de volgende code van HTML die verwijzingen de stijlbladen:
<link rel="stylesheet" href="/etc/designs/weretail/clientlibs-all.css" type="text/css">
<link href="/etc/designs/weretail.css" rel="stylesheet" type="text/css">
Bekijk voorvertoningen van uw pagina's in verschillende viewport grootten om het gedrag van uw responsieve ontwerp te testen. In de modus Preview bevat Sidekick een vervolgkeuzemenu Devices waarmee u een apparaat kunt selecteren. Wanneer u een apparaat selecteert, wordt de pagina aangepast aan het formaat van de viewport.
Als u de voorvertoning van het apparaat wilt inschakelen in Sidekick, moet u de pagina en de service MobileEmulatorProvider configureren. Een andere paginaconfiguratie controleert de lijst van apparaten die in Devices lijst verschijnt.
De lijst Devices wordt weergegeven in Sidekick wanneer uw pagina het JSP-script bevat waarmee de lijst Devices wordt weergegeven. Als u de lijst Devices wilt toevoegen aan Sidekick, neemt u het script /libs/wcm/mobile/components/simulator/simulator.jsp
op in de sectie head
van de pagina.
Neem de volgende code op in het JSP dat de sectie head
definieert:
<cq:include script="/libs/wcm/mobile/components/simulator/simulator.jsp"/>
Als u een voorbeeld wilt zien, opent u het bestand /apps/weretail/components/page/head.jsp
in CRXDE Lite.
Als u wilt dat de apparaatsimulator uw pagina's ondersteunt, registreert u uw paginacomponenten bij de factory-service MobileEmulatorProvider en definieert u de eigenschap mobile.resourceTypes
.
Wanneer het werken met AEM zijn er verscheidene methodes om de configuratiemontages voor dergelijke diensten te beheren; zie Het vormen OSGi voor volledige details.
Bijvoorbeeld, om een [sling:OsgiConfig](/docs/experience-manager-64/deploying/configuring/configuring-osgi.md#adding-a-new-configuration-to-the-repository)
knoop in uw toepassing tot stand te brengen:
Bovenliggende map: /apps/application_name/config
Naam: com.day.cq.wcm.mobile.core.impl.MobileEmulatorProvider-*alias*
Het achtervoegsel - *alias*
wordt vereist omdat de dienst MobileEmulatorProvider een fabrieksdienst is. Gebruik een alias die uniek is voor deze fabriek.
jcr:primaryType: sling:OsgiConfig
Voeg de volgende knooppunteigenschap toe:
Naam: mobile.resourceTypes
Type: String[]
Waarde: De paden naar de paginacomponenten die uw webpagina's weergeven. De geometrixx-media-app gebruikt bijvoorbeeld de volgende waarden:
geometrixx-media/components/page
geometrixx-unlimited/components/pages/page
geometrixx-unlimited/components/pages/coverpage
geometrixx-unlimited/components/pages/issue
Om de apparatengroepen te specificeren die in de lijst van Apparaten verschijnen, voeg een cq:deviceGroups
bezit aan de jcr:content
knoop van de wortelpagina van uw plaats toe. De waarde van de eigenschap is een array van paden naar de knooppunten van de apparaatgroep.
De knooppunten van de apparaatgroep bevinden zich in de map /etc/mobile/groups
.
De hoofdpagina van de site Geometrixx Media is bijvoorbeeld /content/geometrixx-media
. Het knooppunt /content/geometrixx-media/jcr:content
bevat de volgende eigenschap:
cq:deviceGroups
String[]
/etc/mobile/groups/responsive
Gebruik de console van Hulpmiddelen om apparatengroepen te creëren en uit te geven.
Voor apparaatgroepen die u gebruikt voor responsief ontwerp, bewerkt u de apparaatgroep en selecteert u Emulator uitschakelen op het tabblad Algemeen. Met deze optie voorkomt u dat de carrousel van de emulator wordt weergegeven. Dit is niet relevant voor responsief ontwerp.
U kunt mediaquery's gebruiken om een afbeeldingsbron te selecteren die u op de pagina wilt weergeven. Nochtans, wordt elk middel dat een media vraag gebruikt om zijn gebruik te conditionaliseren gedownload aan de cliënt. De mediaquery bepaalt alleen of de gedownloade bron wordt weergegeven.
Voor grote bronnen, zoals afbeeldingen, is het downloaden van alle bronnen geen efficiënt gebruik van de gegevenspijpleiding van de client. Om middelen selectief te downloaden, gebruik javascript om het middelverzoek in werking te stellen nadat de media vragen de selectie uitvoeren.
De volgende strategie laadt één enkel middel dat gebruikend media vragen wordt gekozen:
Implementaties van de MediaQueryList interface die W3C definieert, stellen u in staat mediaquery's te evalueren met behulp van javascript. U kunt logica toepassen op de resultaten van mediaquery's en scripts uitvoeren die zijn bedoeld voor het huidige venster:
Browsers die de interface MediaQueryList implementeren, ondersteunen de functie window.matchMedia()
. Deze functie test mediaquery's op basis van een bepaalde tekenreeks. De functie keert een MediaQueryList
voorwerp terug dat toegang tot de vraagresultaten verleent.
Voor browsers die de interface niet implementeren, kunt u een matchMedia()
polyfill gebruiken, zoals matchMedia.js, een vrij beschikbare javascript-bibliotheek.
Het W3C-voorgestelde afbeeldingselement gebruikt mediaquery's om de bron te bepalen die voor afbeeldingselementen moet worden gebruikt. Het afbeeldingselement gebruikt elementkenmerken om mediaquery's te koppelen aan afbeeldingspaden.
De vrij-beschikbare picturefill.js bibliotheek verstrekt gelijkaardige functionaliteit zoals het voorgestelde picture
element, en gebruikt een gelijkaardige strategie. De bibliotheek picturefill.js roept window.matchMedia
aan om de media vragen te evalueren die voor een reeks div
elementen worden bepaald. Elk div
-element geeft ook een afbeeldingsbron op. De bron wordt gebruikt wanneer de mediaquery van het div
element true
terugkeert.
Voor de bibliotheek picturefill.js
is HTML-code vereist die vergelijkbaar is met het volgende voorbeeld:
<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>
Wanneer de pagina wordt gerenderd, voegt picturefull.js een img
element als laatste kind van het <div data-picture>
element in:
<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 een AEM pagina is de waarde van het kenmerk data-src
het pad naar een bron in de opslagplaats.
Als u adaptieve afbeeldingen wilt implementeren in de AEM toepassing, moet u de vereiste JavaScript-bibliotheken toevoegen en de vereiste HTML-markering opnemen in uw pagina's.
Bibliotheken
Haal de volgende JavaScript-bibliotheken op en neem deze op in een clientbibliotheekmap:
/etc/clientlibs/granite/jquery
(categorie = jquery)Tip: u kunt automatisch meerdere clientbibliotheekmappen samenvoegen door deze in te sluiten.
HTML
Maak een component die de vereiste div-elementen genereert die de code picturefill.js verwacht. In een AEM pagina, is de waarde van het gegeven-src attribuut de weg aan een middel in de bewaarplaats. Een paginacomponent kan bijvoorbeeld de mediaquery's en de bijbehorende paden voor afbeeldingsuitvoeringen in DAM hard coderen. U kunt ook een aangepaste component Image maken waarmee auteurs afbeeldingsuitvoeringen kunnen selecteren of renderopties bij uitvoering kunnen opgeven.
In het volgende voorbeeld-HTML worden 2 DAM-uitvoeringen van dezelfde afbeelding geselecteerd.
<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>
De stichtingscomponent Adaptive Image implementeert adaptieve afbeeldingen:
/libs/foundation/components/adaptiveimage/clientlibs
/libs/foundation/components/adaptiveimage/adaptiveimage.jsp
In het volgende gedeelte vindt u meer informatie over deze component.
Als u de rendering van afbeeldingen wilt aanpassen, dient u de standaardimplementatie AEM statische rendering van afbeeldingen te begrijpen. AEM biedt de component Image en een server voor het renderen van afbeeldingen die samenwerken om afbeeldingen voor webpagina's te renderen. De volgende reeks gebeurtenissen vindt plaats wanneer de component Image is opgenomen in het alineasysteem van de pagina:
De JSP van de component Image genereert bijvoorbeeld het volgende HTML-element:
<img title="My Image" alt="My Image" class="cq-dd-image" src="/content/mywebsite/en/_jcr_content/par/image_0.img.jpg/1358372073597.jpg">
Wanneer de browser de pagina laadt, wordt de afbeelding opgevraagd met de waarde van het kenmerk src als URL. Bij Sling wordt de URL ontleed:
/content/mywebsite/en/_jcr_content/par/image_0
.jpg
img
1358372073597.jpg
De image_0
knoop heeft een jcr:resourceType
waarde van foundation/components/image
, die een sling:resourceSuperType
waarde van foundation/components/parbase
heeft. De parbase component bevat het script img.GET.java dat overeenkomt met de kiezer en de bestandsextensie van de aanvraag-URL. CQ gebruikt dit script (servlet) om de afbeelding te renderen.
Om de broncode van het manuscript te zien, gebruik CRXDE Lite om /libs/foundation/components/parbase/img.GET.java
te openen
bestand.
Afbeeldingen tijdens runtime schalen op basis van de kenmerken van de viewport van de client om afbeeldingen te maken die voldoen aan de principes van responsief ontwerp. Gebruik hetzelfde ontwerppatroon als het renderen van statische afbeeldingen met behulp van een servlet en een ontwerpcomponent.
De component moet de volgende taken uitvoeren:
div
-elementen die mediaselectors en serviceaanroepen voor het renderen van de afbeelding bevatten.De webclient gebruikt de Javascript-bibliotheken (of vergelijkbare bibliotheken) matchMedia en Picturefill om de mediaselectors te evalueren.
servlet die het beeldverzoek verwerkt moet de volgende taken uitvoeren:
Beschikbare oplossingen
AEM installeert de volgende implementaties die u kunt gebruiken of uitbreiden.
De adaptieve component van het Beeld produceert vraag aan de Adaptive Servlet van de Component van het Beeld om een beeld terug te geven dat volgens het apparatenscherm wordt gerangschikt. De component bevat de volgende bronnen:
cq:ClientLibraryFolder
die de javascript-bibliotheek matchMedia polyfill en een aangepaste Javascript-bibliotheek Picturefill samenstelt.cq:editConfig
overschrijft de component van de CQ-basisafbeelding, zodat het neerzetdoel een adaptieve-afbeeldingscomponent maakt in plaats van een basiscomponent voor afbeelding.Het script adaptive-image.jsp bevat de volgende code waarmee div-elementen en mediaquery's worden gegenereerd:
<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>
De variabele path
bevat het pad van de huidige bron (het knooppunt Adaptive-image component). De code genereert een reeks div
-elementen met de volgende structuur:
<div data-scr = "*path-to-parent-node*.adaptive-image.adapt.*width*.*quality*.jpg" data-media="*media query*"></div>
De waarde van het kenmerk data-scr
is een URL die Sling oplost naar de server met adaptieve afbeeldingscomponenten die de afbeelding rendert. Het data-media attribuut bevat de media vraag die tegen de cliënteigenschappen wordt geëvalueerd.
De volgende HTML-code is een voorbeeld van de div
-elementen die door de JSP worden gegenereerd:
<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>
Als u de component Adaptive Image aanpast en de breedteselectors wijzigt, moet u ook de Adaptive Image Component Servlet configureren om de breedten te ondersteunen.
Met de adaptieve afbeeldingscomponentserver wordt de grootte van een JPEG-afbeelding aangepast aan de opgegeven breedte en wordt de JPEG-kwaliteit ingesteld.
De server voor adaptieve afbeeldingscomponenten is gebonden aan de standaard-Sling-server en ondersteunt de bestandsextensies .jpg, .jpeg, .gif en .png. De servletkiezer is img.
Geanimeerde .gif-bestanden worden niet ondersteund in AEM voor adaptieve uitvoeringen.
Daarom lost het Sling URLs van het HTTP- verzoek van het volgende formaat aan dit servlet op:
*path-to-node*.img.*extension*
Bijvoorbeeld, door:sturen HTTP- verzoeken met URL http://localhost:4502/content/geometrixx/adaptiveImage.img.jpg
aan Adaptive Image Component Servlet.
Twee extra kiezers geven de gewenste afbeeldingsbreedte en JPEG-kwaliteit op. In het volgende voorbeeld wordt een afbeelding met een breedte van 480 pixels en een gemiddelde kwaliteit opgevraagd:
http://localhost:4502/content/geometrixx/adaptiveImage.adapt.480.MEDIUM.jpg
Ondersteunde afbeeldingseigenschappen
De servlet accepteert een eindig aantal afbeeldingsbreedten en -kwaliteiten. De volgende breedten worden standaard ondersteund (in pixels):
De volledige waarde geeft aan dat er geen schaling is.
De volgende waarden voor JPEG-kwaliteit worden ondersteund:
De numerieke waarden zijn respectievelijk 0,4, 0,82 en 1,0.
De standaard ondersteunde breedten wijzigen
Gebruik de webconsole (http://localhost:4502/system/console/configMgr) of een sling:OsgiConfig-knooppunt om de ondersteunde breedten van de Adobe CQ Adaptive Image Component Servlet te configureren.
Voor informatie over hoe te om AEM diensten te vormen, zie Het vormen OSGi.
Webconsole | sling:OsgiConfig | |
---|---|---|
Service- of knooppuntnaam | De servicenaam op het tabblad Configuratie is Adobe CQ Adaptive Image Component Servlet | com.day.cq.wcm.foundation.impl. AdaptiveImageComponentServlet |
Eigenschap | Ondersteunde breedten
|
adapt.supported.widths
|
De klasse com.day.cq.wcm.foundation.impl.AdaptiveImageComponentServlet
breidt de klasse AbstractImageServlet uit. De broncode AdaptiveImageComponentServlet bevindt zich in de map /libs/foundation/src/impl/src/com/day/cq/wcm/foundation/impl
.
De klasse gebruikt de SCR annotaties van Felix om het middeltype en de dossieruitbreiding te vormen die servlet met, en de naam van de eerste selecteur wordt geassocieerd.
@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)
})
servlet gebruikt de SCR annotatie van het Bezit om de standaard gesteunde beeldkwaliteit en afmetingen te plaatsen.
@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.")
De klasse AbstractImageServlet
biedt de methode doGet
die de HTTP-aanvraag verwerkt. Deze methode bepaalt de bron die aan de aanvraag is gekoppeld, haalt eigenschappen van bronnen op uit de opslagplaats en retourneert deze in een ImageContext-object.
De com.day.cq.commons.DownloadResource klasse verstrekt getFileReference method
, die de waarde van het fileReference
bezit van het middel terugwint.
De AdaptiveImageComponentServlet
klasse treedt createLayer
methode met voeten. De methode verkrijgt de weg van het beeldmiddel en de gevraagde beeldbreedte van het ImageContext
voorwerp. Vervolgens worden de methoden van de klasse info.geometrixx.commons.impl.AdaptiveImageHelper
aangeroepen, die de werkelijke schaling van de afbeelding uitvoert.
De klasse AdaptiveImageComponentServlet overschrijft ook de methode writeLayer. Deze methode past de JPEG-kwaliteit toe op de afbeelding.
Met de voorbeeldserver voor het wijzigen van afbeeldingsreferenties worden groottekenmerken voor het afbeeldingselement gegenereerd om een afbeelding op de webpagina te schalen.
De servlet is gebonden aan cq:page
middelen en steunt de .jpg dossieruitbreiding. De servletkiezer is image
. Daarom lost het Sling URLs van het HTTP- verzoek van het volgende formaat aan dit servlet op:
path-to-page-node.image.jpg
Bijvoorbeeld, door:sturen HTTP- verzoeken met URL http://localhost:4502/content/geometrixx/en.image.jpg
aan de Servlet van de Wijziging van de Verwijzing van het Beeld.
Drie extra kiezers geven de gewenste afbeeldingsbreedte, -hoogte en (optioneel) -kwaliteit op. In het volgende voorbeeld wordt een afbeelding met een breedte van 770 pixels, een hoogte van 360 pixels en een gemiddelde kwaliteit opgevraagd.
http://localhost:4502/content/geometrixx/en.image.770.360.MEDIUM.jpg
Ondersteunde afbeeldingseigenschappen
De servlet accepteert een eindig aantal afbeeldingsafmetingen en kwaliteitswaarden.
De volgende waarden worden standaard ondersteund (breedte):
De volgende waarden voor de afbeeldingskwaliteit worden ondersteund:
Wanneer het werken met AEM zijn er verscheidene methodes om de configuratiemontages voor dergelijke diensten te beheren; zie Het vormen OSGi voor volledige details.
Het afbeeldingspad, de afmetingen en de kwaliteitswaarden moeten worden opgeslagen als eigenschappen van een knooppunt in de opslagplaats:
De knooppuntnaam is image
.
De bovenliggende node is de jcr:content
-node van een cq:page
-resource.
Het afbeeldingspad wordt opgeslagen als de waarde van een eigenschap met de naam fileReference
.
Wanneer het ontwerpen van een pagina, gebruik Sidetrap om het beeld te specificeren en de image
knoop aan de paginaeigenschappen toe te voegen:
De info.geometrixx.commons.impl.servlets.ImageReferenceModificationServlet-klasse breidt de AbstractImageServlet-klasse uit. Als u het pakket cq-geometrixx-commons-pkg hebt geïnstalleerd, bevindt de broncode ImageReferenceModificationServlet zich in de map /apps/geometrixx-commons/src/core/src/main/java/info/geometrixx/commons/impl/servlets
.
De klasse gebruikt de SCR annotaties van Felix om het middeltype en de dossieruitbreiding te vormen die servlet met, en de naam van de eerste selecteur wordt geassocieerd.
@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)
})
servlet gebruikt de SCR annotatie van het Bezit om de standaard gesteunde beeldkwaliteit en afmetingen te plaatsen.
@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.")
De klasse AbstractImageServlet
biedt de methode doGet
die de HTTP-aanvraag verwerkt. Deze methode bepaalt het middel dat met de vraag wordt geassocieerd, wint middeleigenschappen van de bewaarplaats terug, en bewaart hen in een voorwerp ImageContext.
De klasse ImageReferenceModificationServlet
overschrijft de methode createLayer
en implementeert de logica die de afbeeldingsbron bepaalt die moet worden gerenderd. De methode haalt een onderliggend knooppunt op van het knooppunt jcr:content
van de pagina met de naam image
. Er wordt een Image-object gemaakt van dit image
-knooppunt en de methode getFileReference
retourneert het pad naar het afbeeldingsbestand vanuit de eigenschap fileReference
van het afbeeldingsknooppunt.
De com.day.cq.commons.DownloadResource klasse verstrekt getFileReferenceMethod.
AEM stelt u in staat op efficiënte en effectieve wijze dynamische rasters te implementeren. Deze pagina verklaart hoe u uw dynamisch net of een bestaande netimplementatie (zoals Bootstrap) in uw AEM toepassing kunt integreren.
Als u niet bekend bent met dynamische rasters, raadpleegt u de sectie Inleiding tot dynamische rasters onder aan deze pagina. Deze inleiding geeft een overzicht van dynamische rasters en richtlijnen voor het ontwerpen ervan.
Gebruik paginacomponenten om de elementen van HTML te produceren die de inhoudsblokken van de pagina bepalen. De ClientLibraryFolder waarnaar de pagina verwijst, bevat de CSS die de lay-out van de inhoudsblokken bepaalt:
De voorbeeldgeometrixx-media-toepassing bevat bijvoorbeeld de media-home-component. Deze paginacomponent voegt twee manuscripten in, die twee div
elementen van klasse row-fluid
produceren:
De eerste rij bevat een div
-element van klasse span12
(de inhoud omvat 12 kolommen). Het element div
bevat de component parsys.
De tweede rij bevat twee div
elementen, een van klasse span8
en de andere van klasse span4
. Elk div
element omvat de component 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>
Wanneer een component veelvoudige cq:include
elementen omvat die de parsys component van verwijzingen voorzien, moet elk path
attribuut een verschillende waarde hebben.
Het ontwerp dat aan de geometrixx-media paginacomponent (/etc/designs/geometrixx-media
) wordt geassocieerd bevat clientlibs
ClientLibraryFolder. Deze ClientLibraryFolder bepaalt CSS stijlen voor row-fluid
klassen, span*
klassen, en span*
klassen die kinderen van <a3 zijn/> klassen. row-fluid
Met mediaquery's kunnen stijlen opnieuw worden gedefinieerd voor verschillende viewportgrootten.
In het volgende voorbeeld is CSS een subset van deze stijlen. Deze subset richt zich op span12
, span8
, en span4
klassen, en media vragen voor twee viewport grootte. Let op de volgende kenmerken van de CSS:
.span
worden elementbreedten gedefinieerd aan de hand van absolute getallen..row-fluid .span*
worden de elementbreedten gedefinieerd als percentages van het bovenliggende element. Percentages worden berekend op basis van de absolute breedten.In het voorbeeld Geometrixx Media wordt het JavaScript-framework Bootstrap geïntegreerd in de dynamische rasterimplementatie. Het Bootstrap-framework biedt het bestand 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% }
}
Op de pagina's van de voorbeeldtoepassing worden rijen met inhoudsblokken horizontaal verdeeld in brede viewports. In kleinere viewports, worden de zelfde blokken verticaal verdeeld. In het volgende voorbeeld-CSS worden de stijlen getoond die dit gedrag implementeren voor de HTML-code die door de pagina-component Media-home wordt gegenereerd:
De standaard-CSS voor de media-welkomstpagina wijst de float:left
stijl voor span*
klassen toe die binnen row-fluid
klassen zijn.
Mediaquery's voor kleinere viewports wijzen de stijl float:none
voor dezelfde klassen toe.
/* 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%;
}
}
Modulariseer uw componenten om efficiënt gebruik van de code te maken. Uw site gebruikt waarschijnlijk verschillende typen pagina's, zoals een welkomstpagina, een artikelpagina of een productpagina. Elk type pagina bevat verschillende typen inhoud en gebruikt waarschijnlijk verschillende lay-outs. Wanneer bepaalde elementen van elke lay-out echter op meerdere pagina's voorkomen, kunt u de code die dat deel van de lay-out implementeert, opnieuw gebruiken.
Bedekkingen van pagina-componenten gebruiken
Maak een hoofdpaginacomponent met scripts voor het genereren van de verschillende delen van een pagina, zoals secties head
en body
en header
, content
en footer
in de hoofdtekst.
Andere paginacomponenten maken die de hoofdpaginacomponent als cq:resourceSuperType
gebruiken. Deze componenten omvatten manuscripten die de manuscripten van de belangrijkste pagina zonodig met voeten treden.
De toepassing goemetrixx-media bevat bijvoorbeeld de paginacomponent (de component sling:resourceSuperType
is de stichtingspagina). Verschillende onderliggende componenten (zoals artikel, categorie en media-home) gebruiken deze paginacomponent als sling:resourceSuperType
. Elke onderliggende component bevat een content.jsp-bestand dat het content.jsp-bestand van de paginacomponent overschrijft.
Scripts opnieuw gebruiken
Creeer veelvoudige manuscripten JSP die rij en kolomcombinaties produceren die voor veelvoudige paginacomponenten gemeenschappelijk zijn. Het content.jsp
-script van het artikel en de media-home-componenten verwijzen bijvoorbeeld allebei naar het 8x4col.jsp
-script.
CSS-stijlen ordenen op doelgrootte van viewport
CSS-stijlen en mediaquery's voor verschillende viewportgrootten opnemen in afzonderlijke bestanden. Gebruik clientbibliotheekmappen om deze samen te voegen.
Wanneer componenten één blok van inhoud produceren, over het algemeen controleert het net dat de paginacomponent vestigt de plaatsing van de inhoud.
Auteurs moeten zich ervan bewust zijn dat het inhoudsblok in verschillende formaten en relatieve posities kan worden weergegeven. De inhoudstekst zou geen relatieve richtingen moeten gebruiken om naar andere inhoudsblokken te verwijzen.
Indien nodig moet de component alle CSS- of javascript-bibliotheken leveren die vereist zijn voor de HTML-code die wordt gegenereerd. Gebruik een clientbibliotheekmap in de component om de CSS- en JS-bestanden te genereren. Als u de bestanden toegankelijk wilt maken, maakt u een afhankelijkheid of sluit u de bibliotheek in een andere clientbibliotheekmap onder de map /etc in.
Subrasters
Als de component meerdere blokken inhoud bevat, voegt u de inhoudsblokken in een rij toe om een subraster op de pagina te maken:
De component /apps/geometrixx-media/components/2-col-article-summary
genereert bijvoorbeeld twee kolommen met inhoud. De HTML die wordt gegenereerd, heeft de volgende structuur:
<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>
De .row-fluid .span6
kiezers van de CSS van de pagina zijn van toepassing op de div
elementen van dezelfde klasse en structuur in deze HTML. De component bevat echter ook de clientbibliotheekmap /apps/geometrixx-media/components/2-col-article-summary/clientlibs:
multi-col-article-summary
-klasse van het element div
om het gedrag van de klasse row-fluid
van de pagina te overschrijven.De volgende stijlen zijn bijvoorbeeld opgenomen in het bestand /apps/geometrixx-media/components/2-col-article-summary/clientlibs/css/responsive-480px.css
:
@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;
}
}
Met dynamische rasters kunt u paginalay-outs aanpassen aan de afmetingen van de viewport van de client. Rasters bestaan uit logische kolommen en rijen die de blokken inhoud op de pagina plaatsen.
Met behulp van HTML5-technologie kunt u het raster implementeren en bewerken om de paginalay-outs aan te passen aan verschillende viewportgrootten:
div
-elementen bevatten inhoudsblokken die een bepaald aantal kolommen omspannen.Gebruik voor elk bereik van viewportbreedten waarop u zich richt een statische paginabreedte en inhoudsblokken met constante breedte. Als u de grootte van een browservenster handmatig wijzigt, worden wijzigingen in de inhoudsgrootte aangebracht op verschillende vensterbreedten (ook wel onderbrekingspunten genoemd). Hierdoor worden paginaontwerpen nauwkeuriger toegepast, zodat de gebruiker er optimaal mee kan werken.
Gebruik rasters om inhoudsblokken te schalen en deze aan te passen aan verschillende viewportgrootten. Inhoudsblokken beslaan een specifiek aantal kolommen. Naarmate de kolombreedten groter of kleiner worden om in verschillende viewportgrootten te passen, neemt de breedte van de inhoudsblokken dienovereenkomstig toe of af. Schalen kan zowel grote als middelgrote viewports steunen die genoeg breed zijn om de zij-aan-zijplaatsing van inhoudsblokken aan te passen.
De grootte van inhoudsblokken kan worden beperkt door een minimumbreedte, waarvoorbij schalen niet meer effectief is. Voor kleinere viewports, kan het net worden gebruikt om blokken van inhoud verticaal te verdelen eerder dan horizontaal.
Bepaal de kolommen en rijen die u nodig hebt om de blokken inhoud op uw pagina's te plaatsen. De paginalay-outs bepalen het aantal kolommen en rijen dat het raster omspannen.
Aantal kolommen
Neem voldoende kolommen op om de inhoudsblokken horizontaal voor alle viewportgrootten in al uw lay-outs te plaatsen. U zou meer kolommen dan momenteel nodig moeten gebruiken om toekomstige paginaontwerpen aan te passen.
Rijinhoud
Gebruik rijen om de verticale plaatsing van inhoudsblokken te bepalen. Bepaal de inhoudsblokken die dezelfde rij delen:
Maak CSS-klassen en -stijlen om de lay-out van de inhoudsblokken op een pagina te bepalen. Paginaontwerpen zijn vaak gebaseerd op de relatieve grootte en positie van inhoudsblokken in de viewport. De viewport bepaalt de daadwerkelijke grootte van de inhoudsblokken. In uw CSS moet rekening worden gehouden met de relatieve en absolute grootten. U kunt een dynamisch raster implementeren met drie typen CSS-klassen:
div
dat een container voor alle rijen is. Deze klasse stelt de absolute breedte van het raster in.div
elementen die een rij vertegenwoordigen. Deze klasse bepaalt de horizontale of verticale plaatsing van de inhoudsblokken die de klasse bevat.div
elementen die blokken inhoud van verschillende breedten vertegenwoordigen. Breedten worden uitgedrukt als een percentage van het bovenliggende element (de rij).De gerichte viewport breedten (en hun bijbehorende media vragen) wijzen discrete breedten af die voor een paginalay-out worden gebruikt.
Over het algemeen is de stijl width
van inhoudsblokklassen gebaseerd op de volgende kenmerken van uw pagina en raster:
CSS omvat een reeks media vragen die de volgende structuur gebruiken:
@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 }
...
}
Gebruik het volgende algoritme als uitgangspunt voor het ontwikkelen van de elementklassen en CSS stijlen voor uw pagina's.
Definieer een klassenaam voor het div-element dat alle rijen bevat, bijvoorbeeld content.
Definieer een CSS-klasse voor div-elementen die rijen vertegenwoordigen, zoals row-fluid
.
Definieer klassenamen voor elementen van inhoudsblokken. Een klasse is vereist voor alle mogelijke breedten, in termen van kolombereiken. Gebruik bijvoorbeeld de klasse span3
voor div
elementen die drie kolommen omspannen, gebruik span4
klassen voor reeksen van 4 kolommen. Definieer zoveel klassen als er kolommen in het raster staan.
Voor elke viewport grootte die u richt, voeg de overeenkomstige media vraag aan uw CSS dossier toe. Voeg de volgende items toe aan elke mediaquery:
content
, bijvoorbeeld .content{}
..span3{ }
.row-fluid
, bijvoorbeeld .row-fluid{ }
.row-fluid span3 { }
.Breedtestijlen toevoegen voor elke kiezer:
content
kiezers in op de absolute grootte van de pagina, bijvoorbeeld width:480px
.(absolute width of page)/(number of columns)
..row-fluid .span
kiezers in als een percentage van de totale breedte. Bereken deze breedte met de formule (absolute span width)/(absolute page width)*100
.Gebruik de floatstijl van de klasse .row-fluid
om te bepalen of de inhoudsblokken in een rij horizontaal of verticaal zijn gerangschikt.
De stijl float:left
of float:right
veroorzaakt de horizontale distributie van kindelementen (inhoudsblokken).
De stijl float:none
veroorzaakt verticale distributie van kindelementen.
Voeg de stijl toe aan de .row-fluid
selecteur binnen elke media vraag. Stel de waarde in op basis van de pagina-indeling die u gebruikt voor de mediaquery. Het volgende diagram illustreert bijvoorbeeld een rij die inhoud horizontaal verdeelt voor brede viewports, en verticaal voor smalle viewports.
In de volgende CSS kan dit gedrag worden geïmplementeerd:
@media (min-width: 768px) and (max-width: 979px) {
.row-fluid {
width:100%;
float:left
}
}
@media (max-width:480px){
.row-fluid {
width:100%;
float:none
}
}
Voor de paginalay-out van elke viewport grootte u richt, bepaal het aantal kolommen dat elk inhoudsblok overspant. Bepaal vervolgens welke klasse moet worden gebruikt voor de div-elementen van die inhoudsblokken.
Wanneer u de div-klassen hebt ingesteld, kunt u het raster implementeren met de AEM toepassing.