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

A interface do usuário do Granite fornece uma variedade de componentes projetados para serem usados em formulários; são chamadas 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 da Fundação da interface do usuário do Granite para desenvolver e/ou estender os componentes do Granite. Isso tem dois elementos:

• lado do servidor:

  • uma coleção de componentes fundamentais

    • alicerce - modular, composível, em camadas, reutilizável
    • componentes - Componentes do Sling

  • ajuda para auxiliar no desenvolvimento de aplicativos

• lado do cliente:

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

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

• init.jsp: trata o processamento genérico; rotular, descrever e fornecer o valor do 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 o campo personalizado; está incluído por init.jsp.

Consulte a Documentação da interface do usuário do Granite - Campo se desejar mais detalhes.

Para obter exemplos, consulte:

• cqgems/customizingfield/components/colorpicker

  • do 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 , onde você fornece a marcação para o seu componente. Você pode considerar o JSP (ou seja, o script de renderização) como um wrapper para sua marcação.

1. Crie um novo componente que use o sling:resourceSuperType propriedade a ser herdada de:

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

2. Substitua o script:

   render.jsp

   Nesse script, você precisa gerar a marcação de hipermídia (ou seja, marcação enriquecida, contendo a disposição da hipermídia) para que o cliente saiba como interagir com o elemento gerado. Isso deve seguir o estilo de codificação da interface do usuário do Granite.

   Ao personalizar, o único contrato que você must fulfill é 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 Granite; por exemplo, /libs/granite/ui/components/foundation/form/textfield.

   OBSERVAÇÃO

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

Criar a biblioteca do cliente para o componente

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

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

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

   Defina as JS/ CSS dentro da clientlib.

   OBSERVAÇÃO

   No momento, a interface do usuário do Granite não fornece ouvintes ou ganchos prontos para uso que você pode usar diretamente para adicionar o comportamento do JS. Portanto, para adicionar um comportamento JS adicional ao seu componente, é necessário implementar um gancho JS em uma classe personalizada que você atribui ao seu 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