Container- en lay-outmodus configureren

Responsieve layouts is een mechanisme voor het realiseren van responsieve webontwerpen. Hierdoor kan de gebruiker webpagina's maken met een indeling en afmetingen die afhankelijk zijn van de apparaten die de gebruikers gebruiken.

AEM realiseert responsieve lay-out voor uw pagina's gebruikend een combinatie mechanismen:

• Layout ContainerComponent

  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 standaardcomponent Layout Container is 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-outmodusAls de lay-outcontainer op de pagina is geplaatst, kunt u de
  opdracht
  In layoutmodus kunt u de inhoud binnen het responsieve raster plaatsen.

• 🔗
  EmulatorHiermee kunt u responsieve websites maken en bewerken die de lay-out op basis van de grootte van het apparaat/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.

Met deze responsieve rastermechanismen kunt u:

• Gebruik onderbrekingspunten (die apparaatgroepering aangeven) om een verschillend gedrag voor de inhoud te definiëren op basis van de apparaatlay-out.
• Componenten verbergen op basis van apparaatgroep (definiëren op welk onderbrekingspunt een component wordt verborgen).
• Gebruik horizontale uitlijning op het raster (plaats componenten in het raster, wijzig de grootte naar wens en definieer wanneer ze naast elkaar of boven/onder moeten samenvouwen/opnieuw moeten plaatsen).
• Kolombesturingselement realiseren.

De responsieve emulator configureren

Hierdoor kunt u de responsieve Emulator op uw site zien.

Uw pagina-componenten registreren voor emulatie

Als u wilt dat de emulator uw pagina's ondersteunt, moet u de paginacomponenten registreren. Zie Paginacomponenten registreren voor Simulatie.

Geef de apparaatgroepen op

Zie Apparaatgroepen opgeven om de apparaatgroepen op te geven die worden weergegeven in de lijst met apparaten van de emulator.

Uw site koppelen aan de opgegeven apparaatgroepen

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 die is geoptimaliseerd voor aanraakapparaten).

Lay-outmodus activeren voor uw site

Deze procedures worden gebruikt om de modus Layout op uw site in te schakelen.

De onderbrekingspunten configureren

Onderbrekingspunten:

• Wordt gebruikt in responsief ontwerp.

• Kan worden gedefinieerd:

  • Op het paginasjabloon, vanaf waar de instellingen worden gekopieerd naar pagina's die met die sjabloon zijn gemaakt.
  • Op het paginaknooppunt, vanwaar de montages door om het even welke kindpagina's zullen worden geërft.

• Een titel en breedte definiëren:

  • De titel beschrijft de generieke apparaatgroep, zo nodig met oriëntatie; bijvoorbeeld telefoon, tablet, tabletlandscape.
  • De breedte bepaalt de maximumbreedte in pixel voor die generische apparatengroepering. Bijvoorbeeld, als de breekpunttelefoon een breedte van 768 heeft dan dat het de maximumbreedte van de lay-out heeft die voor een telefoonapparaat wordt gebruikt.

• 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 gevormde breekpunt behandelt.

Ze kunnen worden gedefinieerd met behulp van CRXDE Lite of XML.

Onderbrekingspunten configureren met CRXDE Lite

1. Navigeer met behulp van CRXDE Lite (of equivalent) naar:

   • Uw sjabloondefinitie.
   • The jcr:content node of your page.

2. Maak onder jcr:content het knooppunt:

   • Naam: cq:responsive
   • Type: nt:unstructured

3. Onder dit creeer de knoop:

   • Naam: breakpoints
   • Type: nt:unstructured

4. Onder het knooppunt voor onderbrekingspunten kunt u een willekeurig aantal onderbrekingspunten maken. Elke definitie is één knooppunt met de volgende eigenschappen:

   • Naam: <descriptive name>
   • Type: nt:unstructured
   • Titel: String * <descriptive title seen in Emulator>*
   • Breedte: Decimal * <value of breakpoint>*

Onderbrekingspunten configureren met XML

Onderbrekingspunten bevinden zich in de sectie <jcr:content> van de .context.html onder de toepasselijke 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>

Een responsieve informatieprovider toevoegen

Kopieer de volgende cq:infoProviders knoopstructuur in uw ouderpaginacomponent:

/libs/foundation/components/page/cq:infoProviders/responsive

Component Resizing voor de Pagina inschakelen

Deze procedures zijn vereist zodat u de grootte van componenten kunt wijzigen in de modus Layout.

Lay-outcontainer instellen als hoofdparser

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:

• Pagina-component
• Paginasjabloon (voor toekomstig gebruik)

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" />
  

Inclusief de responsieve CSS

CSS voor onderbrekingspunten met LESS

AEM gebruikt LESS om delen van noodzakelijke CSS te produceren, moeten deze voor uw projecten worden omvat.

U zult ook een cliëntbibliotheek moeten creëren 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

Overwegingen bij opmaken

De grootte van componenten die in een responsieve container worden gehouden, wordt aangepast (samen met hun respectievelijke HTML DOM-elementen) aan 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

Compatibiliteit van vergroten/verkleinen en aanpassen van afbeeldingen

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-set toevoegen aan REFRESH_PAGE-listener in het 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.

De Containercomponent voor lay-out inschakelen voor pagina

Met deze taken kunnen auteurs instanties van de component Layout Container naar de pagina slepen.

Indelingscontainer inschakelen voor paginabewerking

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

  Gebruik Ontwerpmodus om de component Laagcontainer voor een pagina te activeren.

• Componentdefinitie

  Gebruik allowedComponent of statisch omvat wanneer het bepalen van de component.

Het raster van de container van de layout configureren

U kunt het aantal beschikbare kolommen voor elke specifieke instantie van lay-outcontainer vormen:

1. Auteursomgeving

   U kunt het aantal kolommen vormen beschikbaar voor elke specifieke instantie van lay-outcontainer.

   Hiervoor gebruikt u Ontwerpmodus en opent u het dialoogvenster Ontwerp voor de vereiste container. Hier kunt u opgeven hoeveel kolommen beschikbaar zijn voor positionering en grootte. De standaardwaarde is 12.

2. 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, ...

Business.Adobe.com-bronnen

Multichannel Communication Style System Customer Communications Mobile Forms Customer Experience Management Digital Asset Management