Personalização da criação de página

Última atualização: 4 de maio de 2023

Criado para:

  • Desenvolvedor
CAUTION
AEM 6.4 chegou ao fim do suporte estendido e esta documentação não é mais atualizada. Para obter mais detalhes, consulte nossa períodos de assistência técnica. Encontre as versões compatíveis here.
CAUTION
Este documento descreve como personalizar a criação de páginas na interface do usuário moderna e habilitada para toque e não se aplica à interface do usuário clássica.

O AEM fornece vários mecanismos para permitir a personalização da funcionalidade de criação de página (e o consoles) da sua instância de criação.

  • Clientlibs

    Clientlibs permitem estender a implementação padrão para realizar novas funcionalidades, enquanto reutiliza as funções, objetos e métodos padrão. Ao personalizar, você pode criar sua própria clientlib em /apps. A nova clientlib deve:

    • dependa da clientlib de criação cq.authoring.editor.sites.page
    • fazer parte do cq.authoring.editor.sites.page.hook categoria

  • Sobreposições

    As sobreposições são baseadas nas definições de nó e permitem que você sobreponha a funcionalidade padrão (em /libs) com sua própria funcionalidade personalizada (em /apps). Ao criar uma sobreposição, não é necessária uma cópia 1:1 do original, já que fusão de recursos sling permite herança.

NOTE
Para obter mais informações, consulte o Conjunto de documentação JS.

Elas podem ser usadas de várias maneiras para estender a funcionalidade de criação de página na sua instância do AEM. Uma seleção é abordada abaixo (em um nível alto).

NOTE
Para obter mais informações, consulte:
Este tópico também é abordado na seção AEM Gems sessão - Personalização da interface do usuário do AEM 6.0.
CAUTION
Você must não altere nada no /libs caminho.
Isso ocorre porque o conteúdo da variável /libs O é substituído na próxima vez que você atualizar sua instância (e pode ser substituído quando você aplicar um hotfix ou pacote de recursos).
O método recomendado para configuração e outras alterações é:
  1. Recrie o item necessário (ou seja, como ele existe em /libs) /apps
  2. Faça quaisquer alterações no /apps

Adicionar nova camada (modo)

Quando você edita uma página, há várias modos disponível. Esses modos são implementados usando camadas. Eles permitem o acesso a diferentes tipos de funcionalidade para o mesmo conteúdo da página. As camadas padrão são: editar, visualizar, anotar, desenvolvedor e definição de metas.

Exemplo de camada: Status da Live Copy

Uma instância de AEM padrão fornece a camada MSM. Isso acessa dados relacionados a gerenciamento de vários sites e o destaca na camada.

Para vê-lo em ação, você pode editar qualquer Cópia de idioma We.Retail e selecione a página (ou qualquer outra página de Live Copy) Status da Live Copy modo.

Você pode encontrar a definição de camada do MSM (para referência) em:

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

Amostra de código

Este é um pacote de amostra que mostra como criar uma nova camada (modo), que é uma nova camada para a exibição MSM.

CÓDIGO NO GITHUB

Você pode encontrar o código desta página no GitHub

Adicionar nova categoria de seleção ao navegador de ativos

O navegador de ativos mostra ativos de vários tipos/categorias (por exemplo, imagem, documentos etc.). Os ativos também podem ser filtrados por essas categorias de ativos.

Amostra de código

aem-authoring-extension-assetfinder-flickr é um pacote de amostra que mostra como adicionar um novo grupo ao localizador de ativos. Este exemplo se conecta a FlickrO fluxo público do e o exibe no painel lateral.

CÓDIGO NO GITHUB

Você pode encontrar o código desta página no GitHub

Filtrar recursos

Ao criar páginas, o usuário geralmente deve selecionar entre os recursos (por exemplo, páginas, componentes, ativos etc.). Isso pode assumir a forma de uma lista, por exemplo, da qual o autor deve escolher um item.

Para manter a lista em um tamanho razoável e também relevante para o caso de uso, um filtro pode ser implementado na forma de um predicado personalizado. Por exemplo, se a variável pathbrowser Granite é usado para permitir que o usuário selecione o caminho para um recurso específico, os caminhos apresentados podem ser filtrados da seguinte maneira:

Para obter mais detalhes sobre como criar um predicado personalizado, consulte este artigo.

NOTE
Implementar um predicado personalizado ao implementar com.day.cq.commons.predicate.AbstractNodePredicate A interface do também funciona na interface clássica.
Consulte este artigo da base de conhecimento para obter um exemplo da implementação de um predicado personalizado na interface clássica.

Adicionar nova ação a uma barra de ferramentas de componentes

Cada componente (geralmente) tem uma barra de ferramentas que fornece acesso a uma variedade de ações que podem ser executadas nesse componente.

Amostra de código

aem-authoring-extension-toolbar-screenshot é um pacote de amostra que mostra como criar uma ação personalizada da barra de ferramentas para renderizar componentes.

CÓDIGO NO GITHUB

Você pode encontrar o código desta página no GitHub

Adicionar novo editor no local

Editor no local padrão

Em uma instalação padrão do AEM:

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

    Mantém definições dos vários editores disponíveis.

  2. Há uma conexão entre o editor e cada tipo de recurso (como no componente) que pode usá-lo:

    • cq:inplaceEditing

      por exemplo:

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

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

        • propriedade: editorType

          Define o tipo de editor em linha que será usado quando a edição no local for acionada para esse componente; por exemplo text, textimage, image, title.

  3. Detalhes adicionais de configuração do editor podem ser configurados usando um config nó contendo configurações, bem como um outro plugin nó para conter os detalhes necessários da configuração do plug-in.

    Veja a seguir um exemplo de definição de taxas de proporção para o plug-in de corte de imagem do componente de imagem. Observe que devido ao potencial do tamanho de tela muito limitado, as proporções do corte de corte foram movidas para o editor de tela cheia e só podem ser vistas lá.

    <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>
    CAUTION
    Observe que, em AEM proporções de corte, conforme definido pela variável ratio , são definidas como altura/largura. Isso difere da definição convencional de largura/altura e é feita por motivos de compatibilidade de legado. Os usuários da criação não estarão cientes de qualquer diferença desde que você defina a variável name claramente, já que isso é exibido na interface do usuário.

Criação de um novo editor no local

Para implementar um novo editor no local (na clientlib):

NOTE
Por exemplo, consulte:
/libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/editorExample.js

  1. Implementar:

    • setUp
    • tearDown

  2. Registre o editor (inclui o construtor):

    • editor.register

  3. Forneça a conexão entre o editor e cada tipo de recurso (como no componente) que pode usá-lo.

Amostra de código para criar um novo editor no local

aem-authoring-extension-inplace-editor é um pacote de amostra que mostra como criar um novo editor no local no AEM.

CÓDIGO NO GITHUB

Você pode encontrar o código desta página no GitHub

Configuração de vários editores no local

É possível configurar um componente para que ele tenha vários editores no local. Quando vários editores no local estiverem configurados, você poderá selecionar o conteúdo apropriado e abrir o editor apropriado. Consulte a Configuração de vários editores no local documentação para obter mais informações.

Adicionar uma nova ação de página

Para adicionar uma nova ação de página à barra de ferramentas da página, por exemplo, uma Voltar aos sites (console).

Amostra de código

aem-authoring-extension-header-backtosites é um pacote de exemplo que mostra como criar uma ação personalizada da barra de cabeçalho para saltar de volta para o console Sites .

CÓDIGO NO GITHUB

Você pode encontrar o código desta página no GitHub

Personalização do fluxo de trabalho da solicitação de ativação

O fluxo de trabalho pronto para uso, Solicitação de ativação, é acionado automaticamente quando um autor de conteúdo não tem os direitos de replicação apropriados.

Para ter um comportamento personalizado nessa ativação, você pode sobrepor o Solicitação de ativação fluxo de trabalho:

  1. Em /apps sobreponha a Sites assistente:

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

    NOTE
    Isso mesmo substitui a instância comum de:
    /libs/cq/gui/content/common/managepublicationwizard

  2. Atualize o modelo de fluxo de trabalho e configurações/scripts relacionados, conforme necessário.

  3. Remova o direito do replicate ação de todos os utilizadores apropriados para todas as páginas relevantes; para que esse fluxo de trabalho seja acionado como uma ação padrão quando qualquer um dos usuários tentar publicar (ou replicar) uma página.

Página anterior
Próxima página

Experience Manager