Paginaontwerp aanpassen

LET OP

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 (en de consoles) van de ontwerpinstantie kunt aanpassen.

  • 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. Wanneer het aanpassen, kunt u uw eigen clientlib onder /apps. tot stand brengen de nieuwe clientlib moet:

    • afhankelijk zijn van de creatieve clientlib cq.authoring.editor.sites.page
    • deel uitmaken van de desbetreffende categorie cq.authoring.editor.sites.page.hook
  • Bedekkingen

    Bedekkingen zijn gebaseerd op knooppuntdefinities en staan u toe om de standaardfunctionaliteit (in /libs) met uw eigen aangepaste functionaliteit (in /apps) te bedekken. Bij het maken van een overlay is een 1:1-kopie van het origineel niet vereist, omdat de sling resource merge overerving toestaat.

OPMERKING

Zie de JS-documentatieset voor meer informatie.

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

OPMERKING

Zie voor meer informatie:

  • Het gebruiken en het creëren van clientlibs.
  • overlays gebruiken en maken.
  • Graniet
  • Structuur van de UI voor het maken van AEM aanraakfuncties voor meer informatie over de structurele gebieden die worden gebruikt voor het ontwerpen van pagina's.

Dit onderwerp wordt ook behandeld in AEM Gems zitting - Gebruikersinterfaceaanpassing voor AEM 6.0.

LET OP

U must verandert niets in /libs weg.

Dit komt doordat de inhoud van /libs de volgende keer wordt overschreven dat u uw exemplaar bijwerkt (en dat 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 (dat wil zeggen zoals het bestaat in /libs) onder /apps
  2. Wijzigingen aanbrengen binnen /apps

Nieuwe laag toevoegen (modus)

Wanneer u een pagina bewerkt, zijn er verschillende modi beschikbaar. Deze modi worden geïmplementeerd met behulp van layers. 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: Live Copy-status

Een standaard AEM instantie verstrekt de laag MSM. Hiermee krijgt u toegang tot gegevens met betrekking tot beheer op meerdere locaties en markeert u deze in de laag.

Om het in actie te zien kunt u om het even welke Wij.Retail taalexemplaar pagina (of een andere levende exemplaarpagina) uitgeven en Live de Status van het Exemplaar wijze selecteren.

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

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

Codevoorbeeld

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 middelenbrowser

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

aem-authoring-extension-assetfinder-flickr Dit is een voorbeeldpakket dat aangeeft hoe u een nieuwe groep aan de zoeker van elementen kunt toevoegen. Dit voorbeeld verbindt met de openbare stroom van Flickr en toont hen in sidepanel.

CODE VOOR GITHUB

U kunt de code van deze pagina op GitHub vinden

Bronnen filteren

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 bijvoorbeeld de pathbrowser Granite component wordt gebruikt om de gebruiker toe te staan het pad naar een bepaalde bron te selecteren, kunnen de voorgestelde paden op de volgende manier worden gefilterd:

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

OPMERKING

Het uitvoeren van een douanevoorspelling door com.day.cq.commons.predicate.AbstractNodePredicate interface uit te voeren werkt ook in klassieke UI.

Zie dit kennisbasisartikel voor een voorbeeld van het uitvoeren van een douanevoorspelling in klassieke UI.

Nieuwe handeling toevoegen aan een componentwerkbalk

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

Codevoorbeeld

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

Standaard op plaats-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 knoop die configuraties evenals een verdere plugin knoop bevat om noodzakelijke plugin configuratiedetails te bevatten.

    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.

    <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>
    
    LET OP

    In AEM uitsnijdverhoudingen, zoals ingesteld door de eigenschap ratio, worden gedefinieerd als height/width. Dit verschilt van de conventionele definitie van breedte/hoogte en wordt gedaan om oude compatibiliteitsredenen. De auteursgebruikers zullen zich van geen verschil bewust zijn op voorwaarde dat u het name bezit duidelijk bepaalt aangezien dit is wat in UI wordt getoond.

Nieuwe op-plaats-editor maken

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

OPMERKING

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

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

Veelvoudige In-Place Redacteurs vormen

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 Veelvoudige In-Place Redacteurs documentatie voor meer informatie vormen.

Nieuwe paginahandeling toevoegen

Om een nieuwe paginaactie aan de paginagtoolbar toe te voegen, bijvoorbeeld een Terug naar Plaatsen (console) actie.

Codevoorbeeld

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

Aanpassen van de Verzoek om de Werkstroom van de Activering

De werkstroom uit de doos, Verzoek om Activering, wordt automatisch teweeggebracht wanneer een inhoudsauteur niet de aangewezen replicatierechten heeft.

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

  1. In /apps bedek de wizard Sites:

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

    OPMERKING

    Dit zelf, treedt het gemeenschappelijke geval van met voeten:

    /libs/cq/gui/content/common/managepublicationwizard

  2. Werk het workflowmodel en de bijbehorende configuraties/scripts naar wens bij.

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

Op deze pagina