Componenten AEM - De basisbeginselen aem-components-the-basics

Wat hebt u precies nodig om de nieuwe component te doen?

• Een duidelijke specificatie helpt in alle stadia van ontwikkeling, testen en overdracht.

  De details kunnen in tijd veranderen, maar de specificatie kan worden bijgewerkt (hoewel de veranderingen ook zouden moeten worden gedocumenteerd).

Moet u een geheel nieuwe component maken of kunt u de basisbeginselen overnemen van een bestaande component?

• Het is niet nodig het wiel opnieuw uit te vinden.
• Er zijn diverse mechanismen die AEM u biedt, waarmee u gegevens van een andere componentdefinitie kunt overnemen en uitbreiden, zoals overschrijving, bedekking en de component Samenvoegen van verkoopbronnen.

Heeft uw component logica nodig voor het selecteren/manipuleren van de inhoud?

• De logica moet gescheiden worden gehouden van de gebruikersinterfacelaag. HTL is ontworpen om ervoor te zorgen dat dit gebeurt.

Heeft uw component CSS-opmaak nodig?

• CSS-opmaak moet gescheiden blijven van de componentdefinities. Definieer conventies voor de naamgeving van uw HTML-elementen, zodat u deze kunt wijzigen via externe CSS-bestanden.

Welke veiligheidsaspecten moet ik in overweging nemen?

• Zie Beveiligingschecklist - Aanbevolen werkwijzen voor ontwikkeling voor nadere bijzonderheden.

Interface met aanraakbediening
De standaardgebruikersinterface die in AEM 5.6.0 als voorbeeld werd geïntroduceerd en in 6.x werd uitgebreid. Het is gebaseerd op de verenigde gebruikerservaring voor de Adobe Marketing Cloud, die de onderliggende technologieën van Koraalinterface en Graniet-interface.

Klassieke interface
Gebruikersinterface gebaseerd op ExtJS-technologie die is geïntroduceerd met CQ 5.1.

Pagina:

• AEM heeft de page component ( cq:Page).
• Dit is een specifiek type bron dat belangrijk is voor inhoudsbeheer.
  • Een pagina komt overeen met een webpagina die inhoud voor uw website bevat.

Alineasystemen:

• Het alineasysteem is een belangrijk onderdeel van een website omdat het een lijst met alinea's beheert. Het wordt gebruikt om de individuele componenten te houden en te structureren die de daadwerkelijke inhoud houden.
• U kunt alinea's in het alineasysteem maken, verplaatsen, kopiëren en verwijderen.
• U kunt ook de componenten selecteren die beschikbaar moeten zijn voor gebruik binnen een specifiek alineasysteem.
• Er zijn verschillende alineasystemen beschikbaar in een standaardinstelling (bijvoorbeeld parsys, [responsivegrid](/docs/experience-manager-64/sites-authoring/responsive-layout.md)).

AEM componenten zijn gebaseerd op Sling.

AEM onderdelen bevinden zich (gewoonlijk) onder:

• HTML: /libs/wcm/foundation/components
• JSP: /libs/foundation/components

Projectspecifieke/locatiespecifieke componenten bevinden zich (gewoonlijk) onder:

• /apps/<myApp>/components

AEM standaardonderdelen worden gedefinieerd als cq:Component en hebben de belangrijkste elementen:

• jcr-eigenschappen:

  Een lijst met jcr-eigenschappen; Deze zijn veranderlijk en sommige kunnen facultatief zijn hoewel de basisstructuur van een componentenknoop, zijn eigenschappen en subnodes door worden bepaald cq:Component definitie

• Bronnen:

  Deze definiëren de statische elementen die door de component worden gebruikt.

• Scripts:

Wordt gebruikt om het gedrag van de resulterende instantie van de component te implementeren.

Hoofdknooppunt:

• <mycomponent> (cq:Component) - Hiërarchieknooppunt van component.

Vitale eigenschappen:

• jcr:title - titel van de component; wordt bijvoorbeeld gebruikt als label wanneer de component in de componentenbrowser of sidekick wordt vermeld.

• jcr:description - Beschrijving van het onderdeel; kan als muis-over wenk in componentenbrowser of sidekick worden gebruikt.

• Klassieke gebruikersinterface:

  • icon.png - Pictogram voor deze component.
  • thumbnail.png - Afbeelding die wordt weergegeven als dit onderdeel wordt vermeld in het alineasysteem.

• Aanraakinterface

  • Zie de sectie Componentpictogram in aanraakinterface voor meer informatie.

Vital Child Nodes:

• cq:editConfig (cq:EditConfig) - Definieert de bewerkingseigenschappen van de component en zorgt ervoor dat de component wordt weergegeven in de browser Components of Sidetrap.

  Opmerking: als de component een dialoogvenster heeft, wordt dit automatisch weergegeven in de browser Components of Sidetrap, zelfs als cq:editConfig niet bestaat.

• cq:childEditConfig (cq:EditConfig) - Bepaalt de UI-aspecten van de auteur van onderliggende componenten die hun eigen componenten niet definiëren cq:editConfig.

• Interface voor aanraakbediening:

  • cq:dialog ( nt:unstructured) - Dialoogvenster voor deze component. Definieert de interface waarmee de gebruiker de component kan configureren en/of inhoud kan bewerken.
  • cq:design_dialog ( nt:unstructured) - Ontwerpbewerking voor deze component

• Klassieke gebruikersinterface:

  • dialog ( cq:Dialog) - Dialoogvenster voor deze component. Definieert de interface waarmee de gebruiker de component kan configureren en/of inhoud kan bewerken.
  • design_dialog ( cq:Dialog) - Ontwerpbewerking voor deze component.

HTL ( /libs/wcm/foundation/components/text)

JSP ( /libs/foundation/components/text)

jcr:title - titel van het bestanddeel; dit kan worden gebruikt om de component te identificeren, bijvoorbeeld, verschijnt het in de componentenlijst binnen componentenbrowser of sidekick

jcr:description - beschrijving van het onderdeel; kan als muis-over wenk in de componentenlijst binnen sidekick worden gebruikt

sling:resourceSuperType: dit geeft het pad van de overerving aan wanneer een component wordt uitgebreid (door een definitie te overschrijven)

cq:editConfig ( cq:EditConfig) - de controle heeft betrekking op visuele aspecten; Zo kunt u bijvoorbeeld de vormgeving van een balk of widget definiëren of aangepaste besturingselementen toevoegen

cq:childEditConfig ( cq:EditConfig) - hiermee worden de visuele aspecten geregeld van onderliggende componenten die geen eigen definities hebben

Interface voor aanraakbediening:

• cq:dialog ( nt:unstructured) - definieert het dialoogvenster voor het bewerken van de inhoud van deze component
• cq:design_dialog ( nt:unstructured) - geeft de opties voor het bewerken van het ontwerp voor deze component aan

Klassieke gebruikersinterface:

• dialog ( cq:Dialog) - definieert het dialoogvenster voor het bewerken van de inhoud van deze component (specifiek voor de klassieke UI)
• design_dialog ( cq:Dialog) - geeft de opties voor het bewerken van het ontwerp voor deze component aan
• icon.png - afbeeldingsbestand dat moet worden gebruikt als pictogram voor de component in de Sidetrap
• thumbnail.png - afbeeldingsbestand dat moet worden gebruikt als miniatuur voor de component terwijl het van de Sidetrap wordt gesleept

Interface met aanraakbediening

• cq:dialog ( nt:unstructured) knooppunten:

  • het dialoogvenster definiëren voor het bewerken van de inhoud van deze component

  • specifiek voor de interface met aanraakbediening

  • worden gedefinieerd met de componenten van Granite UI

  • hebben een eigenschap sling:resourceType, als standaard Sling-inhoudsstructuur

  • kan een eigenschap hebben helpPath om de van de context afhankelijke hulpbron (absolute of relatieve weg) te bepalen die wanneer het pictogram van de Hulp (te bepalen ?) wordt betreden pictogram) is geselecteerd.

    • Voor componenten buiten het vak verwijst dit vaak naar een pagina in de documentatie.
    • Indien niet helpPath wordt opgegeven, wordt de standaard-URL (documentatieoverzichtspagina) weergegeven.

In het dialoogvenster worden afzonderlijke velden gedefinieerd:

Klassieke interface

• dialog ( cq:Dialog) knooppunten

  • het dialoogvenster definiëren voor het bewerken van de inhoud van deze component

  • specifiek voor de klassieke gebruikersinterface

  • zijn gedefinieerd met ExtJS-widgets

  • hebben een eigenschap xtype, die verwijst naar ExtJS

  • kan een eigenschap hebben helpPath om de contextgevoelige hulpbron (absolute of relatieve weg) te bepalen die wanneer wordt betreden Help is geselecteerd.

    • Voor componenten buiten het vak verwijst dit vaak naar een pagina in de documentatie.
    • Indien niet helpPath wordt opgegeven, wordt de standaard-URL (documentatieoverzichtspagina) weergegeven.

In het dialoogvenster worden afzonderlijke velden gedefinieerd:

In een klassiek dialoogvenster:

• u kunt het dialoogvenster maken als cq:Dialog, die één tab biedt, zoals in de tekstcomponent, of als u meerdere tabbladen nodig hebt, zoals bij de component textiel, kan het dialoogvenster worden gedefinieerd als cq:TabPanel.
• a cq:WidgetCollection ( items) wordt gebruikt om een basis voor beide invoervelden te bieden ( cq:Widget) of volgende tabbladen ( cq:Widget). Deze hiërarchie kan worden uitgebreid.

Interface met aanraakbediening

Klassieke interface

de definitie (voor beide UIs) heeft het bezit name= ./jcr:title

• /libs/foundation/components/title/cq:dialog/content/items/column/items/title
• /libs/foundation/components/title/dialog/items/title

binnen de inhoud, genereert dit de eigenschap jcr:title de inhoud van de auteur bevatten.

Hiërarchie van brontype

Dit wordt gebruikt om componenten uit te breiden gebruikend het bezit sling:resourceSuperType. Hierdoor kan de component overerven. Een tekstcomponent neemt bijvoorbeeld verschillende kenmerken over van de standaardcomponent.

• scripts (opgelost door Sling)
• dialoogvensters
• beschrijvingen (inclusief miniatuurafbeeldingen, pictogrammen, enz.)

Containerhiërarchie

Dit wordt gebruikt om configuratiemontages aan de kindcomponent te bevolken en het meest meestal gebruikt in een parsys scenario.

Zo kunt u bijvoorbeeld configuratie-instellingen voor de bewerkingsbalkknoppen, besturingselementlay-out (bewerkbalken, rollover), dialooglay-out (inline, zwevend) definiëren voor de bovenliggende component en doorgeven aan de onderliggende componenten.

Configuratie-instellingen (gerelateerd aan bewerkingsfunctionaliteit) in cq:editConfig en cq:childEditConfig worden verspreid.

Inclusief hiërarchie

Dit wordt tijdens runtime opgelegd door de volgorde van include-bestanden.

Deze hiërarchie wordt gebruikt door de ontwerper, die op zijn beurt fungeert als basis voor verschillende ontwerpaspecten van de rendering; met inbegrip van lay-outinformatie, css- informatie, de beschikbare componenten in parsys onder andere.

cq:editConfig knoopeigenschappen:

• cq:actions ( String array): definieert de handelingen die op de component kunnen worden uitgevoerd.

• cq:layout ( String): : definieert hoe de component wordt bewerkt in de klassieke UI.

• cq:dialogMode ( String): bepaalt hoe de componentendialoog in klassieke UI wordt geopend

  • In de interface met aanraakbediening zweven dialoogvensters altijd in de bureaubladmodus en worden ze automatisch geopend als volledig scherm in mobiele apparaten.

• cq:emptyText ( String): Hiermee definieert u tekst die wordt weergegeven wanneer er geen visuele inhoud aanwezig is.

• cq:inherit ( Boolean): definieert of ontbrekende waarden worden overgeërfd van de component waarvan deze waarden overerven.

• dialogLayout (String): Hiermee bepaalt u hoe het dialoogvenster moet worden geopend.

cq:editConfig onderliggende knooppunten:

• cq:dropTargets (knooppunttype) nt:unstructured): definieert een lijst met neerzetdoelen die een neerzetbewerking kunnen accepteren vanuit een element van de zoeker naar inhoud

  • De veelvoudige dalingsdoelstellingen zijn slechts beschikbaar in klassieke UI.
  • In de interface met aanraakbediening is één doel voor neerzetten toegestaan.

• cq:actionConfigs (knooppunttype) nt:unstructured): definieert een lijst met nieuwe acties die worden toegevoegd aan de lijst cq:actions.

• cq:formParameters (knooppunttype) nt:unstructured): Hiermee definieert u aanvullende parameters die aan het dialoogvenster worden toegevoegd.

• cq:inplaceEditing (knooppunttype) cq:InplaceEditingConfig): definieert een configuratie voor lokale bewerking voor de component.

• cq:listeners (knooppunttype) cq:EditListenersConfig): Hiermee definieert u wat er gebeurt voordat of nadat een handeling op de component plaatsvindt.

Om een bezit van te zoeken cq:editConfig knooppunt, bijvoorbeeld cq:actionskunt u het gereedschap Query uitvoeren in CRXDE Lite en zoek met de volgende XPath-queryreeks:

//element(cq:editConfig, cq:EditConfig)[@cq:actions]

Een onderliggende node zoeken van cq:editConfigkunt u bijvoorbeeld zoeken naar cq:dropTargetsvan het type cq:DropTargetConfig; U kunt het hulpmiddel van de Vraag in ​ CRXDE Lite gebruiken en onderzoek met het volgende de vraagkoord van XPath:

//element(cq:dropTargets, cq:DropTargetConfig)

een scheidingsteken, gedefinieerd door het xtype tbseparator;

• Dit wordt slechts gebruikt door klassieke UI.
• Deze definitie wordt genegeerd door de interface met aanraakbediening omdat xtypes worden genegeerd (en scheidingstekens zijn niet nodig omdat de werkbalk voor handelingen anders wordt samengesteld in de interface met aanraakbediening).

een knop met de naam Opmerkingen beheren die de handlerfunctie uitvoert CQ_collab_forum_openCollabAdmin().