Personalizzazione dell'authoring delle pagine

ATTENZIONE

Questo documento descrive come personalizzare l’authoring delle pagine nell’interfaccia touch moderna e non applicabile all’interfaccia classica.

AEM offre diversi metodi per personalizzare la funzionalità di authoring delle pagine (e le console) dell’istanza di authoring.

  • Clientlibs

    Clientlibs consente di estendere l'implementazione predefinita per realizzare nuove funzionalità, riutilizzando le funzioni, gli oggetti e i metodi standard. Quando personalizzate, potete creare una clientlib personalizzata in /apps. La nuova clientlib deve:

    • dipendono dalla clientlib di authoring cq.authoring.editor.sites.page
    • far parte della categoria cq.authoring.editor.sites.page.hook appropriata
  • Sovrapposizioni

    Le sovrapposizioni si basano sulle definizioni dei nodi e consentono di sovrapporre la funzionalità standard (in /libs) con la propria funzionalità personalizzata (in /apps). Quando create una sovrapposizione, non è necessaria una copia 1:1 dell'originale, in quanto la fusione delle risorse sling consente l'ereditarietà.

NOTA

Per ulteriori informazioni, vedere la documentazione JS set.

che possono essere utilizzati in molti modi per estendere la funzionalità di authoring delle pagine nell’istanza AEM. Di seguito è riportata una selezione (ad alto livello).

NOTA

Per ulteriori informazioni, consulta:

Questo argomento è trattato anche nella sessione AEM Gems - Personalizzazione dell'interfaccia utente per AEM 6.0.

ATTENZIONE

non è necessario modificare nulla nel percorso /libs.

Questo perché il contenuto di /libs viene sovrascritto al successivo aggiornamento dell'istanza (e potrebbe essere sovrascritto quando si applica un hotfix o un feature pack).

Il metodo consigliato per la configurazione e altre modifiche è:

  1. Ricreare l'elemento richiesto (ovvero come esiste in /libs) in /apps
  2. Apportare modifiche all'interno di /apps

Aggiungi nuovo livello (modalità)

Durante la modifica di una pagina, sono disponibili diverse modalità. Queste modalità sono implementate utilizzando livelli. che consentono di accedere a diversi tipi di funzionalità per lo stesso contenuto della pagina. I livelli standard sono: modifica, anteprima, annotazione, sviluppatore e targeting.

Esempio di livello: Stato Live Copy

Un'istanza AEM standard fornisce il livello MSM. Questo consente di accedere ai dati relativi a gestione multisito e li evidenzia nel livello.

Per visualizzarlo in azione è possibile modificare qualsiasi pagina Copia lingua We.Retail (o qualsiasi altra pagina Live Copy) e selezionare la modalità Stato Live Copy.

È possibile trovare la definizione del livello MSM (per riferimento) in:

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

Esempio di codice

Si tratta di un pacchetto di esempio che mostra come creare un nuovo livello (modalità), un nuovo livello per la visualizzazione MSM.

CODICE SU GITHUB

Puoi trovare il codice di questa pagina su GitHub

Aggiungi nuova categoria di selezione al browser delle risorse

Il browser delle risorse mostra risorse di vari tipi/categorie (ad esempio immagini, documenti, ecc.). Le risorse possono essere filtrate in base a queste categorie di risorse.

Esempio di codice

aem-authoring-extension-assetfinder-flickr è un pacchetto di esempio che mostra come aggiungere un nuovo gruppo a Asset Finder. Questo esempio si collega al flusso pubblico di Flickr e lo visualizza nel pannello laterale.

CODICE SU GITHUB

Puoi trovare il codice di questa pagina su GitHub

Risorse filtro

Durante l’authoring delle pagine, l’utente deve spesso selezionare tra le risorse (ad esempio pagine, componenti, risorse ecc.). Può assumere la forma di un elenco, ad esempio da cui l’autore deve scegliere un elemento.

Per mantenere l'elenco a dimensioni ragionevoli e anche pertinente al caso d'uso, è possibile implementare un filtro sotto forma di predicato personalizzato. Ad esempio, se il componente pathbrowser Granite viene utilizzato per consentire all'utente di selezionare il percorso di una determinata risorsa, i percorsi presentati possono essere filtrati nel modo seguente:

Per ulteriori dettagli sulla creazione di un predicato personalizzato, consultate questo articolo.

NOTA

L'implementazione di un predicato personalizzato mediante l'implementazione dell'interfaccia com.day.cq.commons.predicate.AbstractNodePredicate funziona anche nell'interfaccia classica.

Per un esempio di implementazione di un predicato personalizzato nell'interfaccia classica, consultate questo articolo della knowledge base.

Aggiungi nuova azione a una barra degli strumenti di un componente

Ogni componente (in genere) dispone di una barra degli strumenti che consente di accedere a una serie di azioni che possono essere eseguite su tale componente.

Esempio di codice

aem-authoring-extension-toolbar-screenshot è un pacchetto di esempio che mostra come creare un’azione personalizzata per la barra degli strumenti per il rendering dei componenti.

CODICE SU GITHUB

Puoi trovare il codice di questa pagina su GitHub

Aggiungi nuovo editor locale

Editor locale standard

In un’installazione standard di AEM:

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

    Contiene le definizioni dei vari editor disponibili.

  2. Esiste una connessione tra l’editor e ciascun tipo di risorsa (come nel componente) che può essere utilizzata:

    • cq:inplaceEditing

      ad esempio:

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

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

        • proprietà: editorType

          Definisce il tipo di editor in linea che verrà utilizzato quando viene attivata la modifica locale per quel componente; ad esempio text, textimage, image, title.

  3. Ulteriori dettagli di configurazione dell'editor possono essere configurati utilizzando un nodo config contenente configurazioni e un altro nodo plugin per contenere i necessari dettagli di configurazione del plug-in.

    Di seguito è riportato un esempio di definizione delle proporzioni per il plug-in di ritaglio dell’immagine per il componente immagine. Tenete presente che, a causa del potenziale di dimensioni dello schermo molto limitate, le proporzioni del ritaglio sono state spostate nell’editor a schermo intero e possono essere visualizzate solo in questo caso.

    <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>
    
    ATTENZIONE

    Tenere presente che AEM rapporti di ritaglio, come impostato dalla proprietà ratio, sono definiti come height/width. Questo differisce dalla definizione tradizionale di larghezza/altezza, per ragioni di compatibilità con versioni precedenti. Gli utenti che creano contenuti non saranno a conoscenza di alcuna differenza, a condizione che definiate chiaramente la proprietà name, in quanto questo è ciò che viene visualizzato nell'interfaccia utente.

Creazione di un nuovo editor locale

Per implementare un nuovo editor locale (all'interno della clientlib):

NOTA

Ad esempio, vedete:
/libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/editorExample.js

  1. Implementa:

    • setUp
    • tearDown
  2. Registra l’editor (include il costruttore):

    • editor.register
  3. Specifica la connessione tra l’editor e ogni tipo di risorsa (come nel componente) che può essere utilizzata.

Esempio di codice per la creazione di un nuovo editor locale

aem-authoring-extension-inplace-editor è un pacchetto di esempio che mostra come creare un nuovo editor locale in AEM.

CODICE SU GITHUB

Puoi trovare il codice di questa pagina su GitHub

Configurazione di più editor interni

È possibile configurare un componente in modo che abbia più editor locali. Quando sono configurati più editor interni, potete selezionare il contenuto appropriato e aprire l'editor appropriato. Per ulteriori informazioni, consultare la documentazione Configuring Multiple In-Place Editors.

Aggiungere una nuova azione pagina

Per aggiungere una nuova azione di pagina alla barra degli strumenti della pagina, ad esempio un'azione Torna a siti (console).

Esempio di codice

aem-authoring-extension-header-backtosites è un pacchetto di esempio che mostra come creare un'azione personalizzata per la barra dell'intestazione per tornare alla console Siti.

CODICE SU GITHUB

Puoi trovare il codice di questa pagina su GitHub

Personalizzazione del flusso di lavoro di richiesta di attivazione

Il flusso di lavoro out-of-the-box, Request for Activation, viene attivato automaticamente quando un autore del contenuto non dispone dei diritti di replica appropriati.

Per ottenere un comportamento personalizzato in seguito a tale attivazione, è possibile sovrapporre il flusso di lavoro Request for Activation:

  1. In /apps sovrapporre la procedura guidata Siti:

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

    NOTA

    In questo modo, sostituisce l’istanza comune di:

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

  2. Aggiornate il modello di flusso di lavoro e le configurazioni/script correlate, a seconda delle necessità.

  3. rimuovere il diritto all' replicate action da tutti gli utenti appropriati per tutte le pagine pertinenti; affinché questo flusso di lavoro venga attivato come azione predefinita quando un utente tenta di pubblicare (o replicare) una pagina.

In questa pagina