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 que você personalize a 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:
cq.authoring.editor.sites.page
cq.authoring.editor.sites.page.hook
apropriadaSobreposiçõ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, pois o sling resource merger permite a herança.
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).
Para obter mais informações, consulte:
Este tópico também é abordado na sessão AEM Gems - Personalização da interface do usuário para AEM 6.0.
Você não deve alterar nada no caminho /libs
.
Isso ocorre porque o conteúdo de /libs
é 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 é:
/libs
) em /apps
/apps
Quando você está editando uma página, há vários modos disponíveis. 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.
Uma instância de AEM padrão fornece a camada MSM. Isso acessa dados relacionados a gerenciamento de vários sites e os destaca na camada.
Para vê-lo em ação, você pode editar qualquer página Web.Retail language copy (ou qualquer outra página de Live Copy) e selecionar o modo Status da Live Copy.
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
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
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.
aem-authoring-extension-assetfinder-flickr
é um pacote de amostra que mostra como adicionar um novo grupo ao localizador de ativos. Este exemplo conecta-se ao fluxo público do Flickr Flickr e os mostra no painel lateral.
CÓDIGO NO GITHUB
Você pode encontrar o código desta página no GitHub
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 o componente pathbrowser
Granite for usado para permitir que o usuário selecione o caminho para um recurso específico, os caminhos apresentados poderão ser filtrados da seguinte maneira:
com.day.cq.commons.predicate.AbstractNodePredicate
.pathbrowser
.Para obter mais detalhes sobre como criar um predicado personalizado, consulte este artigo.
A implementação de um predicado personalizado implementando a interface com.day.cq.commons.predicate.AbstractNodePredicate
também funciona na interface clássica.
Consulte este artigo da base de conhecimento para obter um exemplo de implementação de um predicado personalizado na interface clássica.
Cada componente (geralmente) tem uma barra de ferramentas que fornece acesso a uma variedade de ações que podem ser executadas nesse componente.
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
Em uma instalação padrão do AEM:
/libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/editorExample.js
Mantém definições dos vários editores disponíveis.
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
.
Detalhes adicionais de configuração do editor podem ser configurados usando um nó config
contendo configurações, bem como um outro nó plugin
para conter os detalhes necessários de 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>
Observe que em AEM proporções de corte, conforme definido pela propriedade ratio
, são definidas como height/width. Isso difere da definição convencional de largura/altura e é feita por motivos de compatibilidade legal. Os usuários da criação não estarão cientes de qualquer diferença desde que você defina a propriedade name
claramente, uma vez que isso é exibido na interface do usuário.
Para implementar um novo editor no local (na clientlib):
Por exemplo, consulte:
/libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/editorExample.js
Implementar:
setUp
tearDown
Registre o editor (inclui o construtor):
editor.register
Forneça a conexão entre o editor e cada tipo de recurso (como no componente) que pode usá-lo.
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
É 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.
Para adicionar uma nova ação de página à barra de ferramentas da página, por exemplo, uma ação Voltar aos sites (console) .
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
O fluxo de trabalho pronto para uso, Request for Ativation:
Será exibido automaticamente no menu apropriado quando um autor de conteúdo não tiver os direitos de replicação apropriados, mas tiver associação de usuários e autores de DAM.
Caso contrário, nada será exibido, pois os direitos de replicação foram removidos.
Para ter um comportamento personalizado na ativação, você pode sobrepor o workflow de Solicitação de ativação:
Em /apps
sobreponha o assistente Sites:
/libs/wcm/core/content/common/managepublicationwizard
Isso mesmo substitui a instância comum de:
/libs/cq/gui/content/common/managepublicationwizard
Atualize o modelo de fluxo de trabalho e as configurações/scripts relacionados, conforme necessário.
Remova o direito à replicate
ação de todos os usuários 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.