DocumentaçãoAEM 6.4Guia de desenvolvimento

Criação de um novo componente de campo da interface do usuário do Granite creating-a-new-granite-ui-field-component

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Criado para:

  • Developer
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 creating-the-server-side-script-for-the-component

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:

    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 dos campos prontos para uso da interface do Granite; por exemplo, /libs/granite/ui/components/foundation/form/textfield.

    note note
    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 creating-the-client-library-for-the-component

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 note
    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.
recommendation-more-help
2315f3f5-cb4a-4530-9999-30c8319c520e