A interface do usuário Granite fornece uma variedade de componentes projetados para serem usados em formulários; eles são chamados de fields no vocabulário da interface do usuário de Granite. Os componentes padrão do formulário Granite estão disponíveis em:
/libs/granite/ui/components/foundation/form/*
Esses campos de formulário da interface de usuário do Granite são de especial interesse, pois são usados para caixas de diálogo do componente.
Para obter detalhes completos sobre os campos, consulte a documentação da interface do usuário do Granite.
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
ajuda ao desenvolvimento de aplicações
lado do cliente:
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 do Granite - Field se desejar mais detalhes.
Para obter exemplos, consulte:
cqgems/customizingfield/components/colorpicker
granite/ui/components/foundation/form
Como esse mecanismo usa o JSP, o i18n e o XSS não são disponibilizados prontamente. Isso significa que você precisará internacionalizar e escapar de suas strings. O diretório a seguir contém os campos genéricos de uma instância padrão, você pode usá-los como referência:
/libs/granite/ui/components/foundation/form
diretório
Seu campo personalizado deve substituir somente o script render.jsp
, 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.
Crie um novo componente que use a propriedade sling:resourceSuperType
para herdar de:
/libs/granite/ui/components/foundation/form/field
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
.
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.
Para adicionar um comportamento específico do cliente ao seu componente:
Crie uma clientlib de categoria cq.authoring.dialog
.
Crie um clientlib de categoria cq.authoring.dialog
e defina seu JS
/ CSS
dentro dele.
Defina JS
/ CSS
dentro da clientlib.
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.