AEM 6.4 heeft het einde van de uitgebreide ondersteuning bereikt en deze documentatie wordt niet meer bijgewerkt. Raadpleeg voor meer informatie onze technische ondersteuningsperioden. Ondersteunde versies zoeken hier.
Responsieve lay-out is een mechanisme om te realiseren responsief webontwerp. Hierdoor kan de gebruiker webpagina's maken met een indeling en afmetingen die afhankelijk zijn van de apparaten die de gebruikers gebruiken.
Dit kan worden vergeleken met de Mobiel web mechanismen die gebruikmaken van adaptief webontwerp (voornamelijk voor de klassieke interface).
AEM realiseert responsieve lay-out voor uw pagina's gebruikend een combinatie mechanismen:
Layout Container component
Deze component biedt een rasteralineasysteem waarmee u componenten kunt toevoegen en positioneren binnen een responsief raster. Het kan als standaardparsys voor uw pagina worden gebruikt en/of ter beschikking gesteld aan auteurs in componentenbrowser.
De standaardwaarde Layout Container component wordt gedefinieerd onder:
/libs/wcm/foundation/components/responsivegrid
U kunt lay-outcontainers definiëren:
Als een component die de gebruiker aan een pagina kan toevoegen.
Als standaardparsys voor de pagina.
Beide.
U kunt de lay-outcontainer als standaard voor de pagina hebben, terwijl het toestaan van de gebruiker om verdere lay-outcontainers binnen dit toe te voegen; bijvoorbeeld om kolombesturing te bereiken.
Lay-outmodus
Als de lay-outcontainer eenmaal op de pagina is geplaatst, kunt u de opdracht
Layout om inhoud binnen het responsieve raster te plaatsen.
Emulator
Zo kunt u responsieve websites maken en bewerken die de lay-out op basis van de grootte van het apparaat of venster opnieuw rangschikken door de grootte van componenten interactief aan te passen. De gebruiker kan dan zien hoe de inhoud wordt gerenderd met de emulator.
Hoewel de Layout Container is beschikbaar in de klassieke UI, is zijn volledige functionaliteit slechts beschikbaar in aanraking-toegelaten UI.
Met deze responsieve rastermechanismen kunt u:
In een installatie buiten de doos, is de ontvankelijke lay-out gevormd voor We.Retail-referentiesite. U moet toch De component Layout Container activeren voor andere pagina's.
Hierdoor kunt u de responsieve Emulator op uw site.
Als u wilt dat de emulator uw pagina's ondersteunt, moet u de paginacomponenten registreren. Zie Pagina-componenten registreren voor simulatie.
Zie voor informatie over de apparaatgroepen die worden weergegeven in de lijst met apparaten van de emulator Apparaatgroepen opgeven.
Als u de emulator wilt opnemen, moet u uw site koppelen aan de apparaatgroepen. Zie De lijst met apparaten toevoegen (voor zowel de klassieke gebruikersinterface als de gebruikersinterface met aanraakfuncties).
Deze procedures worden gebruikt om de Layout op uw site.
Wordt gebruikt in responsief ontwerp.
Kan worden gedefinieerd:
Een titel en breedte definiëren:
U kunt de emulator gebruiken als markeringen boven aan de pagina-editor.
Wordt overgeërfd van de hiërarchie van de ouderknoop en kan bij wil worden met voeten getreden.
Er is een standaardbreekpunt (uit-van-de-doos) dat alles boven het laatste behandelt geconfigureerd breekpunt.
Ze kunnen worden gedefinieerd met behulp van CRXDE Lite of XML.
Als u een nieuw project instelt:
Als u een bestaand project (met bestaande inhoud) migreert, moet u:
Navigeer met behulp van CRXDE Lite (of equivalent) naar:
jcr:content
knooppunt van uw pagina.Onder jcr:content
Maak het knooppunt:
cq:responsive
nt:unstructured
Onder dit creeer de knoop:
breakpoints
nt:unstructured
Onder het knooppunt voor onderbrekingspunten kunt u een willekeurig aantal onderbrekingspunten maken. Elke definitie is één knooppunt met de volgende eigenschappen:
<descriptive name>
nt:unstructured
String
* <descriptive title seen in Emulator>
*Decimal
* <value of breakpoint>
*Onderbrekingspunten bevinden zich in de <jcr:content>
van de .context.html
in de juiste sjabloonmap (of inhoudsmap).
Een voorbeelddefinitie:
<cq:responsive jcr:primaryType="nt:unstructured">
<breakpoints jcr:primaryType="nt:unstructured">
<phone jcr:primaryType="nt:unstructured" title="{String}Phone" width="{Decimal}768"/>
<tablet jcr:primaryType="nt:unstructured" title="{String}Tablet" width="{Decimal}1200"/>
</breakpoints>
</cq:responsive>
Dit is alleen nodig als de paginacomponent niet is gebaseerd op de component van de basispagina.
Kopieer het volgende cq:infoProviders
knooppuntstructuur in uw bovenliggende paginacomponent:
/libs/foundation/components/page/cq:infoProviders/responsive
Deze procedures zijn vereist zodat u de grootte van componenten in de Layout in.
Om hoofdparsys van uw pagina te plaatsen om een lay-outcontainer te zijn moet u parsys als bepalen:
wcm/foundation/components/responsivegrid
In één van beide:
De volgende twee voorbeelden illustreren de definitie:
HTML:
<sly data-sly-resource="${'par' @ resourceType='wcm/foundation/components/responsivegrid'}/>
JSP:
<cq:include path="par" resourceType="wcm/foundation/components/responsivegrid" />
AEM gebruikt LESS om delen van noodzakelijke CSS te produceren, moeten deze voor uw projecten worden omvat.
U moet ook een clientbibliotheek om extra configuratie en functievraag te verstrekken. Het volgende LESS extract is een voorbeeld van het minimum u aan uw project moet toevoegen:
@import (once) "/libs/wcm/foundation/clientlibs/grid/grid_base.less";
/* maximum amount of grid cells to be provided */
@max_col: 12;
/* default breakpoint */
.aem-Grid {
.generate-grid(default, @max_col);
}
/* phone breakpoint */
@media (max-width: 768px) {
.aem-Grid {
.generate-grid(phone, @max_col);
}
}
/* tablet breakpoint */
@media (min-width: 769px) and (max-width: 1200px) {
.aem-Grid {
.generate-grid(tablet, @max_col);
}
}
De basisrasterdefinitie is te vinden onder:
/libs/wcm/foundation/clientlibs/grid/grid_base.less
Componenten die zich in een responsieve container bevinden, worden vergroot of verkleind (samen met hun respectievelijke HTML DOM-elementen) op basis van de responsieve rastergrootte. Daarom wordt in deze omstandigheden aanbevolen definities van DOM-elementen met een vaste breedte (bevat) te vermijden (of bij te werken).
Bijvoorbeeld:
Voor:
width=100px
Na:
max-width=100px
Als u de grootte van een component in het raster wijzigt, worden de volgende listeners geactiveerd, indien van toepassing:
beforeedit
beforechildedit
afteredit
afterchildedit
Als u de inhoud van een adaptieve afbeelding in een responsief raster op de juiste wijze wilt vergroten of verkleinen en bijwerken, moet u een afterEdit
instellen op REFRESH_PAGE
listener in de EditConfig
bestand van elke opgenomen component.
Bijvoorbeeld:
<cq:listeners jcr:primaryType="cq:EditListenersConfig" afteredit="REFRESH_PAGE" />
Het mechanisme voor adaptieve afbeeldingen is beschikbaar via een script dat de selectie van de juiste afbeelding voor de huidige grootte van het venster bepaalt. De gebeurtenis wordt geactiveerd nadat de DOM gereed is of wanneer een specifieke gebeurtenis wordt ontvangen. De pagina moet momenteel worden vernieuwd om het resultaat van de actie van de gebruiker correct weer te geven.
Aangepaste stijlbladclientlibs moeten worden geladen als onderdeel van de koptekst, anders kunnen ze niet alleen worden gepubliceerd, maar ook goed werken op de auteur.
Met deze taken kunnen auteurs instanties van de Layout Container op de pagina.
Auteurs kunnen meer responsieve rasters toevoegen aan de inhoudspagina's als u de component Layout Container voor uw pagina wilt inschakelen. U kunt dit doen door:
Auteursomgeving
Gebruiken Ontwerpmodus om de Laagcontainer voor een pagina.
Componentdefinitie
Gebruiken allowedComponent
of een statische include-opdracht wanneer de component wordt gedefinieerd.
U kunt het aantal beschikbare kolommen voor elke specifieke instantie van lay-outcontainer vormen:
Auteursomgeving
U kunt het aantal kolommen vormen beschikbaar voor elke specifieke instantie van lay-outcontainer.
Om dit te doen, gebruik OntwerpmodusOpen vervolgens het dialoogvenster voor het ontwerp van de vereiste container. Hier kunt u opgeven hoeveel kolommen beschikbaar zijn voor positionering en grootte. De standaardwaarde is 12.
XML
Definities voor het responsieve raster worden opgegeven in:
etc/design/<*your-project-name*>/.content.xml
De volgende parameters kunnen worden gedefinieerd:
Aantal beschikbare kolommen:
columns="{String}8"
Componenten die aan de huidige component kunnen worden toegevoegd:
components="[/libs/wcm/foundation/components/responsivegrid, ...