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

Usando o CRXDE Lite, crie uma nova pasta de componentes em:

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

Recrie a estrutura do nó como em libs e copie a definição de um componente existente, como o componente 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 nova pasta de componentes e faça as alterações necessárias. Além disso, exclua quaisquer informações irrelevantes na pasta.

É possível fazer alterações como:

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

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

• substituição do .jsp arquivo (nomeie-o depois do novo componente)

• ou retrabalhar completamente o componente inteiro se desejar

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

Um dos seguintes nós deve estar presente e ser inicializado corretamente para que o novo componente apareça:

• cq:dialog - caixa de diálogo da interface habilitada para toque
• dialog - caixa de diálogo da 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 sistema de parágrafo:

• uso do 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 Adicionar novos componentes aos sistemas de parágrafo

No AEM WCM, abra uma página no site e insira um novo parágrafo do tipo que você acabou de criar para garantir que o componente esteja funcionando corretamente.

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

Alterne para o Modo de Design:

• adição ?wcmmode=design ao final do URL e acessando 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ágrafo.

Clique em Editar.

Uma lista de componentes pertencentes ao sistema de parágrafo é 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 retorne ao modo de edição normal para confirmar que ele está disponível para uso.

Copie o componente de tempo de texto padrão de /libs/foundation/components/textimage na pasta do componente do Geometrixx, /apps/geometrixx/components, utilizando textimage como o nome do nó do 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 data de texto, exceto os seguintes:

• definição da caixa 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

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

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

  • Sair componentGroup defina como General

• Componente pai do novo componente (o componente de tempo de texto padrão)

  • Definir sling:resourceSuperType para foundation/components/textimage

Após esta etapa, o nó do componente tem a seguinte aparência:

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

Dessa forma, quando uma imagem é solta no componente na página, a variável sling:resourceType a propriedade do componente textimage estendido está 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 do original. A única adição que fazemos é estender o Avançado , adicionar uma Posição da imagem lista suspensa, com opções Left e Right:

• Deixe o textimage/dialogpropriedades 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 (guia1 e guia2):

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

• Para a guia 3:

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

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

  • Defina as seguintes propriedades (do tipo String) para o novo tab3/items/positionnó:

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

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

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

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

• Guia Excluir4.

A posição da imagem é mantida no conteúdo como imagePositionpropriedade do nó que representa textimage parágrafo. Após essas etapas, a caixa de diálogo do componente terá esta aparência:

Estender o script de 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);

Vamos substituir o fragmento de código enfatizado %><div class="image"><% com um novo código que gera um estilo personalizado para essa tag.

// 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 o teste.

Copie o componente de imagem padrão de /libs/foundation/components/image na pasta do componente do Geometrixx, /apps/geometrixx/components, usando a 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 nova propriedade:

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

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

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

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

Volte para o modo de edição e adicione-o ao sistema de parágrafo. Nas próximas imagens, você pode ver as diferenças entre o componente de imagem original e aquele que você acabou de criar.

Componente de imagem original:

Seu novo componente de imagem:

O componente agora está pronto para uso.