Grid: mudanças entre as edições

De BIS Wiki
Ir para navegação Ir para pesquisar
← Edição anteriorEdição posterior →
Linha 7: Linha 7:
== Colunas ==
== Colunas ==


=== Colunas com Texto Customizado ===
=== Criando Colunas ===
==== Colunas com Texto Customizado ====


Uma coluna customizada pode exibir exatamente o que o desenvolvedor quiser. No entanto é preciso tomar cuidado com essas decisões, pois perdemos várias automações existentes, como por exemplo a questão de "sort" pela coluna.
Uma coluna customizada pode exibir exatamente o que o desenvolvedor quiser. No entanto é preciso tomar cuidado com essas decisões, pois perdemos várias automações existentes, como por exemplo a questão de "sort" pela coluna.
Linha 26: Linha 27:
</syntaxhighlight>}}
</syntaxhighlight>}}


=== Colunas com Ícones/Imagens ===
==== Colunas com Ícones/Imagens ====


Uma coluna customizada pode retornar um objeto contendo um conteúdo renderizável qualquer. Deve-se tomar cuidado no entando com os objetos colocados desta forma pois ele absorve os eventos de click/duploclick, etc. impedindo que o grid receba os eventos do usuário.
Uma coluna customizada pode retornar um objeto contendo um conteúdo renderizável qualquer. Deve-se tomar cuidado no entando com os objetos colocados desta forma pois ele absorve os eventos de click/duploclick, etc. impedindo que o grid receba os eventos do usuário.
Linha 46: Linha 47:
<pre>column.setHandleWidgetEvents(true);</pre>
<pre>column.setHandleWidgetEvents(true);</pre>
}}
}}
=== Configuração das Colunas ===
==== Alinhamento ====
Para alinhar uma coluna é necessário adicionar o estilo de alinhamento à coluna. Uma maneira de fazer isso é criando uma inner class como a seguir:
{{java|Exemplo Coluna com Objeto|<syntaxhighlight lang="java">
  column.setStyleGenerator(cs -> {
    return FWVad.STYLE_ALIGN_CENTER;
  });
  // ou, resumido
  column.setStyleGenerator(cs -> FWVad.STYLE_ALIGN_CENTER);
</syntaxhighlight>}}
{{stop|Otimização de Memória|O formato acima é recomendado quando teremos outras configurações no style ou condicionais. Caso a única intenção seja alinhar o seu conteúdo é recomendado utilizar os métodos estáticos '''.setGridColumnAlign*(...)''' do UIFactory.
Ao chamar este método, o UIFactory reutiliza uma instância interna para alinhar a coluna. Evitando assim um consumo de memória criando uma nova instância de StyleGenerator para cada coluna de cada Grid de cada usuário.}}


= Grid Editável =
= Grid Editável =

Edição das 21h08min de 21 de julho de 2021

Grid é um componente do Vaadin que permite a exibição de tabelas de listagem ou mesmo edição de dados em massa (como um excel simplificado).

Esta página trás exemplos de como criar e manipular o grid. Tenha em mente que o código do Vaadin é aceito no BIS de forma bruta, mas não será abordado neste página. Nesta página de documentação devem conter os exemplos que fazem parte do BIS, ou mesmo as funcionalidades adicionais oferecidas pelo FW para facilitar o desenvolvimento.

Grid

Colunas

Criando Colunas

Colunas com Texto Customizado

Uma coluna customizada pode exibir exatamente o que o desenvolvedor quiser. No entanto é preciso tomar cuidado com essas decisões, pois perdemos várias automações existentes, como por exemplo a questão de "sort" pela coluna.

Exemplo Coluna Customizada 
final Column<CFlowCategoryMapVO, String> categoryColumn = paramGrid.addColumn(vo -> {
  if (vo.getCategoryVO() != null) {
    switch (vo.getCategoryVO().getOperation()) {
      case EXPENSE:
        return "(-) " + vo.getCategoryVO().getName();
      case INCOMING:
        return "(+) " + vo.getCategoryVO().getName();
    }
    return vo.getCategoryVO().getName();
  }
  return "";
});

Colunas com Ícones/Imagens

Uma coluna customizada pode retornar um objeto contendo um conteúdo renderizável qualquer. Deve-se tomar cuidado no entando com os objetos colocados desta forma pois ele absorve os eventos de click/duploclick, etc. impedindo que o grid receba os eventos do usuário.

Exemplo Coluna com Objeto 
final Column<GVO<CertificateVO>, ThemeResource> colValidation = grid.addColumn(gvo -> {
  ThemeResource tres = null;
  if (BUDateTime.isInsidePeriod(FW.getDateTime(), gvo.getVO().getValidityStart(), gvo.getVO().getValidityEnd())) {
    tres = new ThemeResource("icon/success_24.png");
  } else {
    tres = new ThemeResource("icon/cancel_24.png");
  }
  return tres;
 }, new ImageRenderer<>());


Passar o Evento Através da Imagem
Ao incluir uma imagem na célula os eventos passam a ser tratados pela imagem. Isso faz com que ao clicar na imagem sobre a imagem o usuário não consiga selecionar a linha ou ativar o comando de duplo click padrão do grid. Para contornar esse problema, fazer com que o evento não seja consumido pela imagem, utilize o seguinte comando na coluna: 
column.setHandleWidgetEvents(true);

Configuração das Colunas

Alinhamento

Para alinhar uma coluna é necessário adicionar o estilo de alinhamento à coluna. Uma maneira de fazer isso é criando uma inner class como a seguir:

Exemplo Coluna com Objeto 
  column.setStyleGenerator(cs -> {
    return FWVad.STYLE_ALIGN_CENTER; 
  });
  // ou, resumido
  column.setStyleGenerator(cs -> FWVad.STYLE_ALIGN_CENTER);


Otimização de Memória
O formato acima é recomendado quando teremos outras configurações no style ou condicionais. Caso a única intenção seja alinhar o seu conteúdo é recomendado utilizar os métodos estáticos .setGridColumnAlign*(...) do UIFactory.

Ao chamar este método, o UIFactory reutiliza uma instância interna para alinhar a coluna. Evitando assim um consumo de memória criando uma nova instância de StyleGenerator para cada coluna de cada Grid de cada usuário.

Grid Editável

Um Grid editável é um Grid normal, com algumas configurações adicionais.

setUpGridEditor()

O primeiro passo para deixar o grid editável é chamar este método. Ele fará as configurações necessárias no Grid para que fique no padrão do BIS.

Disponível em “http://wiki.biserp.com.br/index.php?title=Grid&oldid=1250”