Show Menu
TÓPICOS×

Criando um novo componente de campo da interface do usuário do Granite

A interface do usuário Granite fornece uma variedade de componentes projetados para serem usados em formulários; estes são chamados campos no vocabulário da IU 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 Granite são de especial interesse, pois são usados para caixas de diálogo de componentes.
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 Granite - Campo 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

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

Seu campo personalizado deve substituir somente o render.jsp script, 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 sling:resourceSuperType propriedade 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 .
    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 uma clientlib de categoria cq.authoring.dialog e defina sua JS / CSS dentro dela.
    Defina seu 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.