DocumentatieAEM 6.4Handleiding voor ontwikkeling

Paginaontwerp aanpassen customizing-page-authoring

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Gemaakt voor:

  • Developer
CAUTION
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.
CAUTION
In dit document wordt beschreven hoe u het ontwerpen van pagina's kunt aanpassen in de moderne interface met aanraakbediening. Dit document is niet van toepassing op de klassieke gebruikersinterface.

AEM biedt verschillende mechanismen waarmee u de functionaliteit voor het schrijven van pagina's kunt aanpassen (en de consoles) van de ontwerpinstantie.

  • Clientlibs

    Clientlibs staan u toe om de standaardimplementatie uit te breiden om nieuwe functionaliteit te realiseren, terwijl het hergebruiken van de standaardfuncties, de voorwerpen, en de methodes. Bij het aanpassen kunt u uw eigen clientlib maken onder /apps. De nieuwe clientlib moet:

    • afhankelijk van de creatie clientlib cq.authoring.editor.sites.page
    • deel uitmaken van de cq.authoring.editor.sites.page.hook categorie

  • Bedekkingen

    Bedekkingen zijn gebaseerd op knooppuntdefinities en bieden u de mogelijkheid de standaardfunctionaliteit te bedekken (in /libs) met uw eigen aangepaste functionaliteit (in /apps). Bij het maken van een bedekking is een 1:1-kopie van het origineel niet vereist, omdat de optie fusie van bronnen staat overerving toe.

NOTE
Zie voor meer informatie JS-documentatieset.

Deze kunnen op verschillende manieren worden gebruikt om de functionaliteit voor het schrijven van pagina's in uw AEM uit te breiden. Een selectie wordt hieronder behandeld (op een hoog niveau).

NOTE
Zie voor meer informatie:
Dit onderwerp wordt ook behandeld in het AEM Gems sessie - Aanpassing gebruikersinterface voor AEM 6.0.
CAUTION
U moet niets wijzigen in de /libs pad.
Dit komt omdat de inhoud van /libs wordt de volgende keer overschreven wanneer u een upgrade uitvoert van uw exemplaar (en kan worden overschreven wanneer u een hotfix- of functiepakket toepast).
De aanbevolen methode voor configuratie en andere wijzigingen is:
  1. Het vereiste item opnieuw maken (bijvoorbeeld zoals het bestaat in /libs) onder /apps
  2. Breng wijzigingen aan in /apps

Nieuwe laag toevoegen (modus) add-new-layer-mode

Wanneer u een pagina bewerkt, zijn er verschillende modi beschikbaar. Deze modi worden geïmplementeerd met lagen. Hiermee hebt u toegang tot verschillende typen functionaliteit voor dezelfde pagina-inhoud. De standaardlagen zijn: bewerken, voorvertonen, notities aanbrengen, ontwikkelen en aanwijzen.

Voorbeeld van laag: Status van live kopiëren layer-example-live-copy-status

Een standaard AEM instantie verstrekt de laag MSM. Hiermee krijgt u toegang tot gegevens die betrekking hebben op beheer van meerdere sites en markeert deze in de laag.

Als u deze in actie wilt zien, kunt u We.Kopie in de detailhandel pagina (of een andere live kopiëren pagina) en selecteer de Status van live kopiëren in.

U kunt de MSM laagdefinitie (voor verwijzing) vinden in:

/libs/wcm/msm/content/touch-ui/authoring/editor/js/msm.Layer.js

Codevoorbeeld code-sample

Dit is een steekproefpakket dat toont hoe te om een nieuwe laag (wijze) tot stand te brengen, die een nieuwe laag voor mening MSM is.

CODE VOOR GITHUB

U kunt de code van deze pagina op GitHub vinden

Nieuwe selectiecategorie toevoegen aan de middelenbrowser add-new-selection-category-to-asset-browser

In de middelenbrowser worden elementen van verschillende typen/categorieën weergegeven (bijvoorbeeld afbeeldingen, documenten, enz.). De activa kunnen ook door deze activacategorieën worden gefiltreerd.

Codevoorbeeld code-sample-1

aem-authoring-extension-assetfinder-flickr Dit is een voorbeeldpakket dat aangeeft hoe u een nieuwe groep aan de zoeker van elementen kunt toevoegen. In dit voorbeeld wordt verbinding gemaakt met FlickrDe openbare stroom en toont ze in het sidepanel.

CODE VOOR GITHUB

U kunt de code van deze pagina op GitHub vinden

Bronnen filteren filtering-resources

Bij het ontwerpen van pagina's moet de gebruiker vaak bronnen selecteren (zoals pagina's, componenten, elementen, enz.). Dit kan de vorm hebben van een lijst, bijvoorbeeld van waaruit de auteur een punt moet kiezen.

Om de lijst tot een redelijke grootte te houden en ook relevant voor het gebruiksgeval, kan een filter in de vorm van een douane predikaat worden uitgevoerd. Als de pathbrowser Graniet wordt gebruikt om de gebruiker toe te staan om de weg aan een bepaalde middel te selecteren, kunnen de voorgestelde wegen op de volgende manier worden gefilterd:

Zie voor meer informatie over het maken van een aangepaste predikaat dit artikel.

NOTE
Een aangepaste voorspelling implementeren door com.day.cq.commons.predicate.AbstractNodePredicate de interface werkt ook in klassieke UI.
Zie dit kennisbasisartikel voor een voorbeeld van het uitvoeren van een douane predikaat in klassieke UI.

Nieuwe handeling toevoegen aan werkbalk Component add-new-action-to-a-component-toolbar

Elke component (gewoonlijk) heeft een werkbalk die toegang biedt tot een reeks handelingen die op die component kunnen worden uitgevoerd.

Codevoorbeeld code-sample-2

aem-authoring-extension-toolbar-screenshot Dit is een voorbeeldpakket dat laat zien hoe u een aangepaste werkbalkactie maakt om componenten te renderen.

CODE VOOR GITHUB

U kunt de code van deze pagina op GitHub vinden

Nieuwe op-plaats-editor toevoegen add-new-in-place-editor

Standaardeditor standard-in-place-editor

In een standaard AEM-installatie:

  1. /libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/editorExample.js

    Bevat definities van de verschillende beschikbare editors.

  2. Er is een verbinding tussen de redacteur en elk middeltype (zoals in component) dat het kan gebruiken:

    • cq:inplaceEditing

      bijvoorbeeld:

      • /libs/foundation/components/text/cq:editConfig

      • /libs/foundation/components/image/cq:editConfig

        • eigenschap: editorType

          Bepaalt het type van gealigneerde redacteur die zal worden gebruikt wanneer het op zijn plaats uitgeven voor die component wordt teweeggebracht; bijv. text, textimage, image, title.

  3. De extra configuratiedetails van de redacteur kunnen worden gevormd gebruikend een config knooppunten met configuraties en een plugin -knooppunt voor de benodigde configuratiegegevens van de plug-in.

    Hieronder ziet u een voorbeeld van het definiëren van hoogte-breedteverhoudingen voor de uitsnijdplug-in van de afbeeldingscomponent. De hoogte-breedteverhouding van het uitsnijdvak is vanwege de mogelijkheid van een zeer beperkte schermgrootte verplaatst naar de volledige schermeditor en kan daar alleen worden weergegeven.

    code language-xml 
    <cq:inplaceEditing
        jcr:primaryType="cq:InplaceEditingConfig"
        active="{Boolean}true"
        editorType="image">
        <config jcr:primaryType="nt:unstructured">
            <plugins jcr:primaryType="nt:unstructured">
                <crop jcr:primaryType="nt:unstructured">
                    <aspectRatios jcr:primaryType="nt:unstructured">
                        <_x0031_6-10
                            jcr:primaryType="nt:unstructured"
                            name="16 : 10"
                            ratio="0.625"/>
                    </aspectRatios>
                </crop>
            </plugins>
        </config>
</cq:inplaceEditing>
    note caution
    CAUTION
    Let op: in AEM uitsnijdverhoudingen, zoals ingesteld door de ratio eigenschap, worden gedefinieerd als hoogte/breedte. Dit verschilt van de conventionele definitie van breedte/hoogte en wordt gedaan om oude compatibiliteitsredenen. De gebruikers van de auteur zullen zich niet van enig verschil bewust zijn op voorwaarde dat u bepaalt name duidelijk bezit aangezien dit is wat in UI wordt getoond.

Een nieuwe plaatseditor maken creating-a-new-in-place-editor

Om een nieuwe op zijn plaats redacteur (binnen uw clientlib) uit te voeren:

NOTE
Zie bijvoorbeeld:
/libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/editorExample.js

  1. Implementeren:

    • setUp
    • tearDown

  2. Registreer de editor (inclusief de constructor):

    • editor.register

  3. Verstrek de verbinding tussen de redacteur en elk middeltype (zoals in component) dat het kan gebruiken.

Codevoorbeeld voor het maken van een nieuwe plaatseditor code-sample-for-creating-a-new-in-place-editor

aem-authoring-extension-inplace-editor Dit is een voorbeeldpakket waarin wordt getoond hoe u een nieuwe interne editor in AEM kunt maken.

CODE VOOR GITHUB

U kunt de code van deze pagina op GitHub vinden

Meerdere lokale editors configureren configuring-multiple-in-place-editors

Het is mogelijk om een component te vormen zodat het veelvoudige op zijn plaats redacteurs heeft. Wanneer er meerdere editors op locatie zijn geconfigureerd, kunt u de juiste inhoud selecteren en de juiste editor openen. Zie de Meerdere lokale editors configureren documentatie voor meer informatie.

Handeling Nieuwe pagina toevoegen add-a-new-page-action

Als u een nieuwe paginahandeling wilt toevoegen aan de paginawerkbalk, bijvoorbeeld een Terug naar sites (console) handeling.

Codevoorbeeld code-sample-3

aem-authoring-extension-header-backtosites is een voorbeeldpakket dat toont hoe te om een actie van de douanekopbalbar tot stand te brengen om terug naar de console van Plaatsen te springen.

CODE VOOR GITHUB

U kunt de code van deze pagina op GitHub vinden

De workflow voor het aanvragen van activering aanpassen customizing-the-request-for-activation-workflow

De out-of-the-box workflow Verzoek om activering, wordt automatisch geactiveerd wanneer een auteur van de inhoud niet de juiste replicatierechten heeft.

Als u op deze activering een aangepast gedrag wilt toepassen, kunt u de Verzoek om activering workflow:

  1. In /apps bedekken de Sites wizard:

    /libs/wcm/core/content/common/managepublicationwizard

    note note
    NOTE
    Dit zelf, treedt het gemeenschappelijke geval van met voeten:
    /libs/cq/gui/content/common/managepublicationwizard

  2. Werk de workflowmodel en gerelateerde configuraties/scripts, indien vereist.

  3. Rechts van de replicate action van alle relevante gebruikers voor alle relevante pagina's; om deze workflow als een standaardactie te laten activeren wanneer een van de gebruikers een pagina probeert te publiceren (of te repliceren).

recommendation-more-help
2315f3f5-cb4a-4530-9999-30c8319c520e