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

Última atualização: 4 de maio de 2023

Criado para:

  • Desenvolvedor
CAUTION
AEM 6.4 chegou ao fim do suporte estendido e esta documentação não é mais atualizada. Para obter mais detalhes, consulte nossa períodos de assistência técnica. Encontre as versões compatíveis here.

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/*

NOTE
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.
NOTE
Para obter detalhes completos sobre os campos, consulte o Documentação da interface do usuário do Granite.

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

  • granite/ui/components/foundation/form

NOTE
Como esse mecanismo usa JSP, i18n e XSS não são fornecidos prontos para uso. 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 diretory

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.

    NOTE
    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.

    NOTE
    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.
Página anterior
Próxima página

Experience Manager