CQ5.x: Como criar uma biblioteca cliente de widgets personalizada

Pergunta

Como é possível criar uma biblioteca de cliente de widget personalizada que fornece funcionalidade WCM nova ou modificada?

Resposta, Resolução

O CQ5 fornece uma interface para incluir nova funcionalidade JavaScript na interface de autoria do WCM por meio da estrutura Ext.JS. Essas assim chamadas bibliotecas-cliente fornecem o seguinte:

  • adicionar funcionalidade personalizada ou
  • substituir e estender os recursos existentes

Crie uma biblioteca cliente personalizada

As próximas etapas descrevem o que é necessário para construir uma biblioteca cliente personalizada.

  • Vá para CRXDE Lite (por exemplo http://<host>:<port>/crxde)
  • Crie um nó com tipo cq:ClientLibraryFolder, por exemplo
    • /apps/myapp/ui/mylib
  • defina a propriedade String sling:resourceType para widgets/clientlib
  • defina propriedade (valor múltiplo) categorias para um ou mais dos seguintes

Nome da Categoria Descrição
cq.wcm.admin Administrador do Site e Ferramentas
cq.wcm.edit Localizador de conteúdo e página de edição
cq.dam.admin Administrador de DAM
cq.dam.edit Compartilhamento de ativos DAM, Editor de ativos

  • se necessário, defina propriedade (valor múltiplo) de String dependências para outras bibliotecas cliente no sistema
  • salve todas as alterações

Sobrepondo / Adicionando widgets

  • Criar uma pasta fonte abaixo do nó da biblioteca cliente, por exemplo
    • /apps/myapp/ui/mylib/source
  • Crie um arquivo para cada classe JS e sobreposição de widget, por exemplo
    • /apps/myapp/ui/mylib/source/MyWidget.js
    • /apps/myapp/ui/mylib/source/override/ComponentList.js
  • Crie um arquivo js.txt para incluir os arquivos acima criados na biblioteca cliente personalizada:
#base=source MyWidget.js override/ComponentList.js 

  • salve todas as alterações

O CQ5 observa automaticamente as alterações em uma biblioteca cliente no repositório e registra novamente essa biblioteca para uso subsequente na categoria correspondente, por exemplo, ao editar uma página. Em anexo um exemplo de pacote de conteúdo CQ que faz o seguinte:

  • adicionar biblioteca cliente personalizada /apps/myapp/ui/mylib
  • categoria cq.wcm.edit
  • sobrescrever os valores padrão da lista de componentes no SideKick
    • número máximo padrão de grupos de componentes a serem mostrados
    • número mínimo padrão de componentes necessários para um grupo

Aplica-se a

CQ5.X

Download

Logotipo da Adobe

Fazer logon em sua conta