A interface clássica usa o ExtJS para criar widgets que fornecem a aparência dos componentes. Devido à natureza desses widgets, há algumas diferenças entre a forma como os componentes interagem com a interface clássica e a interface habilitada para toque.
Muitos aspectos do desenvolvimento de componentes são comuns à interface clássica e à interface habilitada para toque, portanto você deve ler AEM Componentes - Informações básicas antes de usar esta página, que lê as especificações da interface clássica.
Embora a Linguagem de modelo HTML (HTL) e o JSP possam ser usados para desenvolver componentes para a interface clássica, esta página ilustra o desenvolvimento com o JSP. Isso se deve exclusivamente ao histórico de uso do JSP na interface clássica.
HTL agora é a linguagem de script recomendada para AEM. Consulte HTL e Desenvolvimento de componentes AEM para comparar métodos.
A estrutura básica de um componente é abordada na página AEM Componentes - Informações básicas, que aplica as interfaces de toque e clássica. Mesmo se você não precisar usar as configurações para a interface habilitada para toque em seu novo componente, pode ajudar a conhecê-las ao herdar dos componentes existentes.
Scripts ou Servlets JSP podem ser usados para renderizar componentes. De acordo com as regras de processamento de solicitação de Sling, o nome do script padrão é:
<*componentname*>.jsp
O arquivo de script JSP global.jsp
é usado para fornecer acesso rápido a objetos específicos (isto é, para acessar conteúdo) a qualquer arquivo de script JSP usado para renderizar um componente.
Portanto, global.jsp
deve ser incluído em cada script JSP de renderização de componente onde um ou mais dos objetos fornecidos em global.jsp
são usados.
O local padrão global.jsp
é:
/libs/foundation/global.jsp
O caminho /libs/wcm/global.jsp
, que foi usado pelas versões CQ 5.3 e anterior, agora está obsoleto.
A seguir, são listas os objetos mais importantes fornecidos pelo padrão global.jsp
:
Resumo:
<cq:defineObjects />
slingRequest
- O objeto de solicitação encapsulado ( SlingHttpServletRequest
).slingResponse
- O objeto de resposta encapsulado ( SlingHttpServletResponse
).resource
- O Objeto De Recurso Sling ( slingRequest.getResource();
).resourceResolver
- O Objeto Sling Resource Resolver ( slingRequest.getResoucreResolver();
).currentNode
- O nó JCR resolvido para a solicitação.log
- O registrador padrão ().sling
- O auxiliar de script Sling.properties
- As propriedades do recurso endereçado ( resource.adaptTo(ValueMap.class);
).pageProperties
- As propriedades da página do recurso endereçado.pageManager
- O gerenciador de páginas para acessar AEM páginas de conteúdo ( resourceResolver.adaptTo(PageManager.class);
).component
- O objeto componente do componente AEM atual.designer
- O objeto designer para recuperar informações de design ( resourceResolver.adaptTo(Designer.class);
).currentDesign
- A concepção do recurso endereçado.currentStyle
- O estilo do recurso endereçado.Existem três métodos para acessar o conteúdo AEM WCM:
Pelo objeto properties introduzido em global.jsp
:
O objeto properties é uma instância de um ValueMap (consulte Sling API) e contém todas as propriedades do recurso atual.
Exemplo: String pageTitle = properties.get("jcr:title", "no title");
usado no script de renderização de um componente de página.
Exemplo: String paragraphTitle = properties.get("jcr:title", "no title");
usado no script de renderização de um componente de parágrafo padrão.
Pelo objeto currentPage
introduzido em global.jsp
:
O objeto currentPage
é uma instância de uma página (consulte AEM API). A classe page fornece alguns métodos para acessar o conteúdo.
Exemplo: String pageTitle = currentPage.getTitle();
Via currentNode
objeto introduzido em global.jsp
:
O objeto currentNode
é uma instância de um nó (consulte API JCR). As propriedades de um nó podem ser acessadas pelo método getProperty()
.
Exemplo: String pageTitle = currentNode.getProperty("jcr:title");
As bibliotecas de tags CQ e Sling fornecem acesso a funções específicas para uso no script JSP dos seus modelos e componentes.
Para obter mais informações, consulte o documento Bibliotecas de tags.
Sites modernos dependem muito do processamento no cliente, conduzido por códigos complexos de JavaScript e CSS. Organizar e otimizar a entrega desse código pode ser um problema complicado.
Para ajudar a lidar com esse problema, AEM fornece Pastas de biblioteca do lado do cliente, que permitem armazenar o código do lado do cliente no repositório, organizá-lo no categoria e definir quando e como cada categoria de código deve ser fornecida ao cliente. O sistema de biblioteca do lado do cliente cuida de produzir os links corretos em sua página da Web final para carregar o código correto.
Consulte o documento Usando bibliotecas HTML do lado do cliente para obter mais informações.
Seu componente precisará de uma caixa de diálogo para que os autores adicionem e configurem o conteúdo.
Consulte AEM Componentes - Informações básicas para obter mais detalhes.
Você pode configurar o comportamento de edição de um componente. Isso inclui atributos como ações disponíveis para o componente, características do editor local e ouvintes relacionados a eventos no componente. A configuração é comum às interfaces de usuário habilitadas para toque e clássica, embora com certas diferenças específicas.
O comportamento editar de um componente é configurado adicionando um nó cq:editConfig
do tipo cq:EditConfig
abaixo do nó do componente (do tipo cq:Component
) e adicionando propriedades e nós secundários específicos.
Consulte Usar e estender widgets ExtJS para obter mais detalhes.
Consulte Usando xtypes para obter mais detalhes.
Esta seção descreve como criar seus próprios componentes e adicioná-los ao sistema de parágrafo.
Uma maneira rápida de começar é copiar um componente existente e fazer as alterações desejadas.
Um exemplo de como desenvolver um componente é descrito detalhadamente em Extensão do Componente de Texto e Imagem - Um Exemplo.
Para desenvolver novos componentes para AEM com base no componente existente, você pode copiar o componente, criar um arquivo javascript para o novo componente e armazená-lo em um local acessível para AEM (consulte também Personalizando componentes e outros elementos):
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 de Texto. Por exemplo, para personalizar a cópia do componente de Texto:
/libs/foundation/components/text
/apps/myProject/components/text
Modifique 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 estranhas 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 para a interface habilitada para toquedialog
- caixa de diálogo para a interface clássicasubstituição do arquivo .jsp
(nomeie-o após seu 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, em seguida, atualizar o .jsp
para processar a entrada feita lá.
Um componente para:
Uma caixa de diálogo definida para a interface clássica funcionará dentro da interface habilitada para toque.
Uma caixa de diálogo definida para a interface habilitada para toque não funcionará na interface clássica.
Dependendo da instância e do ambiente do autor, talvez você queira definir ambos os tipos de diálogo para o seu componente.
Um dos nós a seguir deve estar presente e ser inicializado corretamente para que o novo componente seja exibido:
cq:dialog
- caixa de diálogo para a interface habilitada para toquedialog
- caixa de diálogo para a interface clássicacq: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:
<path-to-component>
(por exemplo, /apps/geometrixx/components/myComponent
) aos componentes de propriedade do nó /etc/designs/geometrixx/jcr:content/contentpage/par
Em 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.
Para ver as estatísticas de tempo para o carregamento da página, você pode usar Ctrl-Shift-U - com ?debugClientLibs=true
definido no URL.
Depois que o componente for desenvolvido, você o adicionará ao sistema de parágrafo, que permite que os autores selecionem e usem o componente ao editar uma página.
Acesse uma página no ambiente de criação que usa o sistema de parágrafo, por exemplo <contentPath>/Test.html
.
Alterne para o modo Design:
adicionar ?wcmmode=design
ao final do URL e acessar novamente, por exemplo:
<contextPath>/ Test.html?wcmmode=design
clicando 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. Seu 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 seu componente e retorne ao modo de edição normal para confirmar que ele está disponível para uso.
Esta seção fornece um exemplo de como estender o texto amplamente usado e o componente padrão de imagem com um recurso de posicionamento de imagem configurável.
A extensão para o componente de texto e imagem permite que os editores usem toda a funcionalidade existente do componente, além de ter uma opção extra para especificar o posicionamento da imagem:
Após estender esse componente, é possível configurar o posicionamento da imagem por meio da caixa de diálogo do componente.
As seguintes técnicas são descritas neste exercício:
Este exemplo é direcionado para a interface clássica.
Este exemplo é baseado no conteúdo de amostra do Geometrixx, que não é mais fornecido com AEM, tendo sido substituído por We.Retail. Consulte o documento Implementação de referência We.Retail para obter mais informações sobre como baixar e instalar o Geometrixx.
Para criar o novo componente, usamos o componente de textura padrão como base e o modificamos. Armazenamos o novo componente no aplicativo de exemplo AEM WCM do Geometrixx.
Copie o componente de mensagem de texto padrão de /libs/foundation/components/textimage
para a pasta do componente do Geometrixx, /apps/geometrixx/components
, usando a mensagem de tempo como o nome do nó do público alvo. (Copie o componente navegando até o componente, clicando com o botão direito do mouse e selecionando Copiar e navegando até o diretório do público alvo.)
Para manter esse exemplo simples, navegue até o componente que você copiou e exclua todos os subnós do novo nó de tempo de textura, exceto os seguintes:
textimage/dialog
textimage/textimage.jsp
textimage/cq:editConfig
A definição da caixa de diálogo depende da interface do usuário:
textimage/cq:dialog
textimage/dialog
Edite os metadados do componente:
Nome do componente
jcr:description
como Text Image Component (Extended)
jcr:title
como Text Image (Extended)
Grupo, onde o componente está listado no sidekick (deixe como está)
componentGroup
definido como General
Componente pai do novo componente (o componente de tempo de textura padrão)
sling:resourceSuperType
como foundation/components/textimage
Após esta etapa, o nó do componente terá a seguinte 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 de tempo de textura estendida é 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 a guia Avançado, adicionando uma lista suspensa Posição da imagem, com as opções Esquerda e Direita:
textimage/dialog
inalteradas.Observe como textimage/dialog/items
tem quatro subnós, tab1 a tab4, representando as quatro guias da caixa de diálogo de tempo de texto.
Para as duas primeiras guias (guia1 e guia2):
/libs/foundation/components/textimage/dialog/items/tab1.infinity.json
e /libs/foundation/components/textimage/dialog/items/tab2.infinity.json
, respectivamente.Para a guia3:
Deixe as propriedades e os subnós sem alterações
Adicionar uma nova definição de campo a tab3/items
, posição do nó do tipo cq:Widget
Defina as seguintes propriedades (do tipo String) 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 de 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
para Left
e value
para left.
Para o nó position/options/o2
defina as propriedades: text
para Right
e value
para right
.
Excluir guia4.
A posição da imagem é persistente 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 terá a seguinte aparência:
Amplie o script de componente, textimage.jsp
, com a manipulação 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"><% por 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 teste.
Depois que o componente for desenvolvido, você poderá adicioná-lo ao sistema de parágrafo, que permite que os autores selecionem e usem o componente ao editar uma página. Essas etapas permitem testar o componente.
O componente armazena seu conteúdo em um parágrafo na página Empresa.
Para desativar esse recurso, usamos o componente de imagem padrão como base e o modificamos. Armazenamos o novo componente no aplicativo de exemplo de Geometrixx.
Copie o componente de imagem padrão de /libs/foundation/components/image
para a pasta do componente do Geometrixx, /apps/geometrixx/components
, usando a imagem como o nome do nó do público alvo.
Edite os metadados do componente:
Image (Extended)
Vá até /apps/geometrixx/components/image/dialog/items/image
.
Adicionar uma nova propriedade:
allowUpload
String
false
Clique em Salvar tudo. O componente está pronto para teste.
Abra uma página em 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.