Adobe Experience Manager (AEM)-componenten - 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, het 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 verscheidene mechanismen die door AEM worden verstrekt dat u gegevens van een andere componentendefinitie met inbegrip van opheffing, bedekking, en de Verzameling van het Middellaat erven en uitbreiden.

Heeft uw component logica nodig voor het selecteren of bewerken 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 Controlelijst van de Veiligheid - de Beste praktijken van de Ontwikkelingvoor meer details.

Pagina:

• AEM heeft de pagina 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 binnen een standaardinstantie (bijvoorbeeld parsys , [responsivegrid](/docs/experience-manager-65/sites-authoring/responsive-layout.md) ).

AEM componenten zijn gebaseerd op het Schuiven.

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 standaardcomponenten worden gedefinieerd als cq:Component en hebben de belangrijkste elementen:

• jcr-eigenschappen:

  Een lijst met jcr-eigenschappen; deze zijn variabel en sommige zijn optioneel, hoewel de basisstructuur van een componentknooppunt, de eigenschappen en subknooppunten worden gedefinieerd door de definitie van cq:Component

• 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.

Knoop van de Wortel:

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

Belangrijke Eigenschappen:

• jcr:title - Componenttitel; wordt bijvoorbeeld gebruikt als label wanneer de component wordt weergegeven in de browser van de component of in de assistent.

• jcr:description - Beschrijving voor de component; kan als muis-over wenk in de componentenbrowser of sidekick worden gebruikt.

• Klassieke gebruikersinterface:

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

• Aanraakinterface

  • Zie het sectie Pictogram van de Component in Aanraak UIvoor details.

Vital de Nodes van het Kind:

• cq:editConfig (cq:EditConfig) - Definieert de bewerkingseigenschappen van de component en laat de component toe om in browser of de Sidekick van Componenten te verschijnen.

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

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

• 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, of inhoud kan bewerken, of beide.
  • design_dialog ( cq:Dialog ) - Ontwerpbewerking voor deze component.

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

JSP ( /libs/foundation/components/text)

cq:editConfig ( cq:EditConfig ) - hiermee worden visuele aspecten bestuurd. U kunt bijvoorbeeld de vormgeving van een balk of widget definiëren of aangepaste besturingselementen toevoegen

cq:childEditConfig ( cq:EditConfig ) - hiermee regelt u de visuele aspecten voor 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 ontwerpen voor deze component op

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 ontwerpen voor deze component op
• icon.png - afbeeldingsbestand dat moet worden gebruikt als pictogram voor de component in de Sidekick
• thumbnail.png - afbeeldingsbestand dat moet worden gebruikt als miniatuur voor de component terwijl deze uit de Sidekick wordt gesleept

Interface met aanraakbediening

• cq:dialog ( nt:unstructured ) nodes:

  • 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, zoals de standaardstructuur voor het verkopen van inhoud

  • kan een eigenschap helpPath hebben om de contextgevoelige Help-bron (absoluut of relatief pad) te definiëren die wordt geopend wanneer het Help-pictogram (het pictogram ? ) is geselecteerd.

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

In het dialoogvenster worden de afzonderlijke velden gedefinieerd:

Klassieke interface

• dialog ( cq:Dialog ) nodes

  • 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 naar ExtJS verwijst

  • kan een bezit helpPath hebben om het van de context afhankelijke hulpmiddel (absolute of relatieve weg) te bepalen dat wordt betreden wanneer de knoop van de Hulp wordt geselecteerd.

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

In het dialoogvenster worden de afzonderlijke velden gedefinieerd:

In een klassiek dialoogvenster:

• U kunt het dialoogvenster maken als cq:Dialog . Dit levert één tabblad op, 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 te verschaffen voor invoervelden ( cq:Widget ) of andere tabbladen ( cq:Widget ). Deze hiërarchie kan worden uitgebreid.

Interface met aanraakbediening

Klassieke interface

de definitie (voor beide UI's) heeft de eigenschap 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 met de inhoud van de auteur.

Hiërarchie van het Type van Middel

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

• scripts (opgelost door Sling)
• dialoogvensters
• beschrijvingen (inclusief miniatuurafbeeldingen en pictogrammen)

Hiërarchie van de Container

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.

De configuratie-instellingen (die verwant zijn aan de bewerkingsfunctionaliteit) in cq:editConfig en cq:childEditConfig worden doorgegeven.

omvat Hiërarchie

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

Deze hiërarchie wordt gebruikt door Designer, die beurtelings als basis voor diverse ontwerpaspecten van het teruggeven dienst doet; met inbegrip van lay-outinformatie, css informatie, de beschikbare componenten in een parsys onder andere.

cq:editConfig node-eigenschappen:

• 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): definieert hoe het dialoogvenster van de component wordt geopend in de klassieke gebruikersinterface

  • 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 ): definieert tekst die wordt weergegeven wanneer er geen visuele inhoud aanwezig is.

• cq:inherit ( Boolean ): hiermee wordt gedefinieerd of ontbrekende waarden worden overgeërfd van de component waarvan deze overerft.

• dialogLayout (String): definieert 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 van de 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 handelingen die aan de lijst cq:actions worden toegevoegd.

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

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

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

Om een bezit van de cq:editConfig knoop, bijvoorbeeld, cq:actions te zoeken, kunt u het hulpmiddel van de Vraag in CRXDE Lite en onderzoek met het volgende XPath vraagkoord gebruiken:

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

Als u bijvoorbeeld naar een onderliggend knooppunt van cq:editConfig wilt zoeken, kunt u zoeken naar cq:dropTargets . Dit is van het type cq:DropTargetConfig . U kunt het gereedschap Query gebruiken in ​ CRXDE Lite en zoeken met de volgende XPath-queryreeks:

//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 knoop genoemd beheert commentaren die de managerfunctie CQ_collab_forum_openCollabAdmin() in werking stelt.