Criando um novo componente de campo da interface do usuário do Granite

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

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

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

• servidor:

  • uma coleção de componentes básicos

    • alicerce - modular, composto, com camadas, reutilizável
    • componentes - Componentes Sling

  • ajuda ao desenvolvimento de aplicações

• lado do cliente:

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

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

• init.jsp: trata do processamento genérico; rotulação, 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 usuário Granite - Campo se desejar mais detalhes.

Para obter exemplos, consulte:

• cqgems/customizingfield/components/colorpicker

  • fornecido pela 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 somente o render.jsp script, onde 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 sua marcação.

1. Crie um novo componente que use a sling:resourceSuperType propriedade para herdar de:

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

2. Substituir o script:

   render.jsp

   Neste script, é necessário gerar a marcação de hipermídia (isto é, marcação aprimorada, contendo a provisão de 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 de usuário Granite.

   Ao personalizar, o único contrato que você deve cumprir é 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 prontos para uso da interface do usuário Granite. por exemplo, /libs/granite/ui/components/foundation/form/textfield.

   Observação

   Atualmente, o JSP é o método de script preferido, já que a transmissão de informações de um componente para outro (bastante frequente no contexto de formulário/campos) não é facilmente alcançada no HTL.

Criação da biblioteca do cliente para o componente

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

1. Crie uma clientlib de categoria cq.authoring.dialog.

2. Crie uma clientlib de categoria cq.authoring.dialog e defina sua JS/ CSS dentro dela.

   Defina seu JS/ CSS dentro da clientlib.

   Observação

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