Show Menu
TÓPICOS×

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

Este documento descreve como personalizar a criação de páginas na interface moderna e habilitada para toque e não se aplica à interface clássica.
O AEM fornece vários mecanismos para permitir que você personalize a funcionalidade de criação de página (e os consoles ) da sua instância de criação.
  • Clientlibs
    Clientlibs permitem estender a implementação padrão para obter novas funcionalidades, reutilizando funções, objetos e métodos padrão. Ao personalizar, você pode criar sua própria clientlib em /apps. A nova clientlib deve:
    • depender da clientlib de criação cq.authoring.editor.sites.page
    • fazer parte da cq.authoring.editor.sites.page.hook categoria adequada
  • Sobreposições
    As sobreposições são baseadas em 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, uma cópia 1:1 do original não é necessária, já que a fusão de recursos sling permite herança.
Para obter mais informações, consulte o conjunto de documentação do JS.
Eles podem ser usados 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).
Para obter mais informações, consulte:
Este tópico também é abordado na sessão do AEM Gems - personalização da interface do usuário para o AEM 6.0 .
Você não deve alterar nada no /libs caminho.
Isso ocorre porque o conteúdo do é substituído na próxima vez que você atualizar sua instância (e pode muito bem ser substituído quando você aplicar uma correção ou um pacote de recursos). /libs
O método recomendado para configuração e outras alterações é:
  1. Recriar o item desejado (isto é, como ele existe em /libs ) em /apps
  2. Faça quaisquer alterações em /apps

Adicionar nova camada (modo)

Quando você está editando uma página, há vários modos disponíveis. Esses modos são implementados usando camadas . Eles permitem acesso a diferentes tipos de funcionalidade para o mesmo conteúdo de página. As camadas padrão são: editar, visualizar, anotar, desenvolvedor e segmentação.

Exemplo de camada: Status da Live Copy

Uma instância AEM padrão fornece a camada MSM. Isso acessa dados relacionados ao gerenciamento de vários sites e os destaca na camada.
Para vê-la em ação, você pode editar qualquer página de cópia de idioma We.Retail (ou qualquer outra página de cópia ao vivo) e selecionar o modo Status da Cópia online.
Você pode encontrar a definição de camada MSM (para referência) em:
/libs/wcm/msm/content/touch-ui/authoring/editor/js/msm.Layer.js

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

Exemplo 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 ao fluxo público do Flickr e os mostra no painel lateral.
CÓDIGO NO GITHUB
Você pode encontrar o código desta página no GitHub

Filtrar recursos

Durante a criação de 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 o componente pathbrowser Granite Interface do usuário Granite for 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 .
A implementação de um predicado personalizado por meio da implementação da interface também funciona na interface clássica. com.day.cq.commons.predicate.AbstractNodePredicate
Consulte este artigo da base de conhecimento para obter um exemplo de como implementar um predicado personalizado na interface clássica.

Adicionar nova ação a uma barra de ferramentas do componente

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

Exemplo 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 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 de configuração do plug-in.
    A seguir está um exemplo de definição de proporções para o plug-in de corte de imagem do componente de imagem. Observe que, devido ao potencial de tamanho de tela muito limitado, as proporções de aspecto 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>
    
    
    Observe que nas relações de corte do AEM, conforme definidas pela ratio propriedade, são definidas como altura/largura . Isso difere da definição convencional de largura/altura e é feita por motivos de compatibilidade legal. The authoring users will not be aware of any difference provided you define the name property clearly since this is what is displayed in the UI.

Criar um novo editor no local

Para implementar um novo editor no local (na clientlib):
Por exemplo, consulte: /libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/editorExample.js
  1. Implementação:
    • 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 documentação Configuração de vários editores no local para obter mais informações.

Add a New Page Action

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

Exemplo de código

aem-authoring-extension-header-backtosites é um exemplo de pacote que mostra como criar uma ação personalizada da barra de cabeçalho para voltar ao console Sites.
CÓDIGO NO GITHUB
Você pode encontrar o código desta página no GitHub

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

O fluxo de trabalho predefinido, 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, é possível sobrepor o fluxo de trabalho Solicitar ativação :
  1. Em /apps sobrepor o assistente Sites :
    /libs/wcm/core/content/common/managepublicationwizard
    Isso mesmo substitui a instância comum de:
    /libs/cq/gui/content/common/managepublicationwizard
  2. Atualize o modelo de fluxo de trabalho e as configurações/scripts relacionados, conforme necessário.
  3. Retirar o direito à replicate 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.