Criando um Novo Componente de Campo da IU Granite

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

OBSERVAÇÃO

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.

OBSERVAÇÃO

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

      • alicerce - modular, composto, com camadas, reutilizável
      • componentes - Componentes Sling
    • ajuda ao desenvolvimento de aplicações

  • lado do cliente:

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

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

OBSERVAÇÃO

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

Criação do script do lado do servidor para o componente

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.

  1. Crie um novo componente que use a propriedade sling:resourceSuperType para herdar de:

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

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

    OBSERVAÇÃO

    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.

Criação da biblioteca do cliente para o componente

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

  1. Crie uma clientlib de categoria cq.authoring.dialog.

  2. Crie um clientlib de categoria cq.authoring.dialog e defina seu JS/ CSS dentro dele.

    Defina JS/ CSS dentro da clientlib.

    OBSERVAÇÃO

    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.

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now