Criação de um novo componente de campo da interface de usuário do Granite

A interface do usuário do Granite fornece vários componentes projetados para serem usados em formulários; eles são chamados de campos no vocabulário da interface do usuário do Granite. Os componentes de formulário padrão do Granite estão disponíveis em:

/libs/granite/ui/components/foundation/form/*

Use a estrutura do Granite UI Foundation para desenvolver e/ou estender componentes do Granite. Isso tem dois elementos:

• lado do servidor:

  • uma coleção de componentes de base

    • base - modular, componível, em camadas, reutilizável
    • componentes - componentes Sling

  • auxiliares para ajudar no desenvolvimento de aplicativos

• lado do cliente:

  • uma coleção de clientlibs que fornecem algum vocabulário (ou seja, extensão da linguagem HTML) para alcançar padrões de interação genéricos por meio de uma interface orientada por Hypermedia

O componente genérico da interface do Granite field O é composto por dois arquivos de interesse:

• init.jsp: lida com o processamento genérico; a rotulagem, a descrição e fornece o valor de formulário necessário ao renderizar o campo.
• render.jsp: é aqui que a renderização real do campo é executada e precisa ser substituída para seu campo personalizado; é incluído por init.jsp.

Consulte a Documentação da interface do Granite - Campo se quiser mais detalhes.

Para obter exemplos, consulte:

• cqgems/customizingfield/components/colorpicker

  • fornecido pelo Amostra de código

• granite/ui/components/foundation/form

Criação do script do lado do servidor para o componente

Seu campo personalizado deve substituir apenas o render.jsp script, em que você fornece a marcação para o componente. Você pode considerar o JSP (ou seja, o script de renderização) como um invólucro para a marcação.

1. Crie um novo componente que use a variável sling:resourceSuperType propriedade da qual herdar:

   /libs/granite/ui/components/foundation/form/field

2. Substituir o script:

   render.jsp

   Nesse script, é necessário gerar a marcação hipermídia (ou seja, marcação enriquecida, que contém o preço acessível da hipermídia) para que o cliente saiba como interagir com o elemento gerado. Isso deve seguir o estilo de codificação do lado do servidor da interface do Granite.

   Ao personalizar, o único contrato que você deve fulfillment é ler o valor do formulário (inicializado em init.jsp) da solicitação usando:

   // Delivers the value of the field (read from the content)
   ValueMap vm = (ValueMap) request.getAttribute(Field.class.getName());
   vm.get("value, String.class");
   

   Para obter mais detalhes, consulte a implementação dos campos de interface do usuário do Granite prontos para uso; por exemplo, /libs/granite/ui/components/foundation/form/textfield.

   OBSERVAÇÃO

   No momento, o JSP é o método de script preferido, pois transmitir informações de um componente para outro (o que é bastante frequente no contexto de formulário/campos) não é facilmente obtido no HTL.

Criação da biblioteca do cliente para o componente

Para adicionar um comportamento específico do lado do cliente ao componente:

1. Criar uma clientlib da categoria cq.authoring.dialog.

2. Criar uma clientlib da categoria cq.authoring.dialog e defina seus JS/ CSS dentro dele.

   Defina o seu JS/ CSS dentro da clientlib.

   OBSERVAÇÃO

   No momento, a interface do Granite não fornece ouvintes ou ganchos prontos para uso que você possa usar diretamente para adicionar o comportamento JS. Portanto, para adicionar mais comportamento JS ao componente, é necessário implementar um gancho JS em uma classe personalizada que você atribui ao componente durante a geração da marcação.

Recursos do Business.Adobe.com

Targeted Content Asset Collections Content Intelligence Mobile Forms Customer Experience Management Digital Rights Management