Desenvolvimento de componentes do Adobe Experience Manager (AEM) (interface clássica) developing-aem-components-classic-ui

Usando o CRXDE Lite, crie uma pasta de componente no:

/ apps/<myProject>/components/<myComponent>

Recrie a estrutura do nó como em bibliotecas e copie a definição de um componente existente, como o componente de Texto. Por exemplo, para personalizar a cópia do componente de Texto:

• de /libs/foundation/components/text
• para /apps/myProject/components/text

Modifique o jcr:title para refletir seu novo nome.

Abra a pasta de novos componentes e faça as alterações necessárias. Além disso, exclua todas as informações irrelevantes na pasta.

É possível fazer alterações como:

• adição de um campo na caixa de diálogo

  • cq:dialog - caixa de diálogo para a interface habilitada para toque
  • dialog - caixa de diálogo para a interface clássica

• substituindo o arquivo .jsp (nomeie-o com o novo componente)

• ou retrabalhando completamente o componente inteiro, se desejar

Por exemplo, se você fizer uma cópia do componente Texto padrão, poderá adicionar um campo extra à caixa de diálogo e atualizar o .jsp para processar a entrada feita lá.

Um dos nós a seguir deve estar presente e inicializado corretamente para que o novo componente seja exibido:

• cq:dialog - caixa de diálogo para a interface habilitada para toque
• dialog - caixa de diálogo para a interface clássica
• cq:editConfig - como os componentes se comportam no ambiente de edição (por exemplo, arrastar e soltar)
• design_dialog - caixa de diálogo para o modo de design (somente interface clássica)

Ative o novo componente no seu sistema de parágrafos:

• usando CRXDE Lite para adicionar o valor <path-to-component> (por exemplo, /apps/geometrixx/components/myComponent) aos componentes de propriedade do nó /etc/designs/geometrixx/jcr:content/contentpage/par
• seguindo as instruções em Adicionando novos componentes a sistemas de parágrafos

No WCM do AEM, abra uma página no seu site e insira um parágrafo do tipo criado para verificar se o componente está funcionando corretamente.

Acesse uma página em seu ambiente de criação que use o sistema de parágrafos, por exemplo, <contentPath>/Test.html.

Alterne para o modo Design por meio de:

• adicionar ?wcmmode=design ao final da URL e acessar novamente, por exemplo:

  <contextPath>/ Test.html?wcmmode=design

• clicar em Design no Sidekick

Agora você está no modo de design e pode editar o sistema de parágrafos.

Clique em Editar.

Uma lista de componentes pertencentes ao sistema de parágrafos é mostrada. O novo componente também está listado.

Os componentes podem ser ativados (ou desativados) para determinar quais são oferecidos ao autor ao editar uma página.

Ative o componente e volte ao modo de edição normal para confirmar que ele está disponível para uso.

Copie o componente textimage padrão de /libs/foundation/components/textimage para a pasta do componente Geometrixx, /apps/geometrixx/components, usando textimage como o nome do nó de destino. (Copie o componente navegando até o componente, clicando com o botão direito do mouse e selecionando Copiar e navegando até o diretório de destino.)

Para manter esse exemplo simples, navegue até o componente copiado e exclua todos os subnós do novo nó de imagem de texto, exceto os seguintes:

• definição de diálogo: textimage/dialog
• script de componente: textimage/textimage.jsp
• editar nó de configuração (permitindo arrastar e soltar ativos): textimage/cq:editConfig

Edite os metadados do componente:

• Nome do componente

  • Configurar jcr:description para Text Image Component (Extended)
  • Configurar jcr:title para Text Image (Extended)

• Grupo, onde o componente está listado no sidekick (deixe como está)

  • Deixar componentGroup definido como General

• O componente principal do novo componente (o componente textimage padrão)

  • Configurar sling:resourceSuperType para foundation/components/textimage

Após esta etapa, o nó do componente terá esta aparência:

Altere a propriedade sling:resourceType do nó de configuração de edição da imagem (propriedade: textimage/cq:editConfig/cq:dropTargets/image/parameters/sling:resourceType) para geometrixx/components/textimage.

Dessa forma, quando uma imagem é solta no componente na página, a propriedade sling:resourceType do componente textimage estendido é definida como: geometrixx/components/textimage.

Modifique a caixa de diálogo do componente para incluir a nova opção. O novo componente herda as partes da caixa de diálogo que são as mesmas da original. A única adição feita é estender a guia Avançado, adicionando uma lista suspensa Posição da Imagem, com as opções Esquerda e Direita:

• Deixe as propriedades textimage/dialog inalteradas.

Observe como textimage/dialog/items tem quatro subnós, tab1 a tab4, representando as quatro guias da caixa de diálogo textimage.

• Para as duas primeiras guias (tab1 e tab2):

  • Altere xtype para cqinclude (para herdar do componente padrão).
  • Adicione uma propriedade de caminho com valores /libs/foundation/components/textimage/dialog/items/tab1.infinity.json e /libs/foundation/components/textimage/dialog/items/tab2.infinity.json, respectivamente.
  • Remova todas as outras propriedades ou nós secundários.

• Para tab3:

  • Deixar as propriedades e os subnós sem alterações

  • Adicionar uma definição de campo a tab3/items, posição do nó do tipo cq:Widget

  • Defina as seguintes propriedades (do tipo Cadeia de Caracteres) para o novo nó tab3/items/position:

    • name: ./imagePosition
    • xtype: selection
    • fieldLabel: Image Position
    • type: select

  • Adicione o subnó position/options do tipo cq:WidgetCollection para representar as duas opções para posicionamento de imagem e, sob ele, crie dois nós, o1 e o2 do tipo nt:unstructured.

  • Para o nó position/options/o1, defina as propriedades: text como Left e value como left.

  • Para o nó position/options/o2, defina as propriedades: text como Right e value como right.

• Excluir guia 4.

A posição da imagem é mantida no conteúdo como a propriedade imagePosition do nó que representa o parágrafo textimage. Após essas etapas, a caixa de diálogo do componente fica assim:

Estender o script do componente, textimage.jsp, com tratamento extra do novo parâmetro:

Image image = new Image(resource, "image");

if (image.hasContent() || WCMMode.fromRequest(request) == WCMMode.EDIT) {
     image.loadStyleData(currentStyle);

Você substituirá o fragmento de código enfatizado %><div class="image"><% pelo novo código que gera um estilo personalizado para esta marca.

// todo: add new CSS class for the 'right image' instead of using
// the style attribute
String style="";
     if (properties.get("imagePosition", "left").equals("right")) {
          style = "style=\"float:right\"";
     }
     %><div <%= style %> class="image"><%

Salve o componente no repositório. O componente está pronto para teste.

Copie o componente de imagem padrão de /libs/foundation/components/image para a pasta de componentes do Geometrixx, /apps/geometrixx/components, usando imagem como o nome do nó de destino.

Edite os metadados do componente:

• Definir jcr:title para Image (Extended)

Vá até /apps/geometrixx/components/image/dialog/items/image.

Adicionar uma propriedade:

• Nome: allowUpload
• Tipo: String
• Valor: false

Clique em Salvar tudo. O componente está pronto para teste.

Abra uma página no Geometrixx, como Inglês/Empresa.

Alterne para o modo de design e ative a Imagem (Estendida).

Volte para o modo de edição e adicione-o ao sistema de parágrafos. Nas próximas imagens, é possível ver as diferenças entre o componente de imagem original e aquele que você criou.

Componente da imagem original:

Seu novo componente de imagem:

O componente está pronto para uso.