Criação de um novo componente de campo da interface de usuário do Granite creating-a-new-granite-ui-field-component
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 fornecendo algum vocabulário (isto é, extensão da linguagem HTML) para alcançar padrões de interação genéricos através de uma interface de usuário 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, rotulagem, 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 deve ser substituída para seu campo personalizado; é incluído porinit.jsp
.
Consulte Documentação da interface do Granite - Campo para obter detalhes.
Para obter exemplos, consulte:
-
cqgems/customizingfield/components/colorpicker
- fornecido pelo Amostra de código
-
granite/ui/components/foundation/form
/libs/granite/ui/components/foundation/form
diretórioCriação do script do lado do servidor para o componente creating-the-server-side-script-for-the-component
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.
-
Crie um componente que use a variável
sling:resourceSuperType
propriedade da qual herdar:/libs/granite/ui/components/foundation/form/field
-
Substituir o script:
render.jsp
Nesse script, gere a marcação hypermedia (ou seja, marcação enriquecida, contendo o custo da hypermedia) 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:code language-none // 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 de campos de interface do usuário do Granite prontos para uso; por exemplo,
/libs/granite/ui/components/foundation/form/textfield
.note note NOTE No momento, o JSP é o método de script preferido, pois transmitir informações de um componente para outro (o que é frequente no contexto de formulário/campos) não é facilmente obtido no HTL.
Criação da biblioteca do cliente para o componente creating-the-client-library-for-the-component
Para adicionar um comportamento específico do lado do cliente ao componente:
-
Criar uma clientlib da categoria
cq.authoring.dialog
. -
Criar uma clientlib da categoria
cq.authoring.dialog
e defina seusJS
/CSS
dentro dele.Defina o seu
JS
/CSS
dentro da clientlib.note note NOTE 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.