Grid: mudanças entre as edições

De BIS Wiki
Ir para navegação Ir para pesquisar
← Edição anterior
 
(4 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
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 40: Linha 41:
   return tres;
   return tres;
  }, new ImageRenderer<>());
  }, new ImageRenderer<>());
</syntaxhighlight>}}
{{nota|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:
<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.}}
== Colunas com Ícones ==
Para criar uma coluna que apresente ícones/imagens ao invés do seu conteúdo, é possível criar um '''IconProvider''' como no exemplo abaixo. Criar o '''IconProvider''' é recomendado quando vamos exibir o ícone do status em diversas partes do sistema, assim, quando novos valores forem acrescentados, a manutenção só será necessária em uma única classe. Para colunas mais rápidas de status ou de pouca reutilização, é possível implementar uma inner class como no segundo exemplo.
Também é recomendável criar um '''DescriptionGenerator''' para indicar para o usuário o que o ícone significa, principalmente caso o ícone não seja tão intuitivo para o usuário.
{{java|Exemplo Coluna Utilizando o IconProvider|<syntaxhighlight lang="java">
final Column<GVO<BillPaymentVO>, ThemeResource> typeColumn = moGrid.addColumn(new BillPaymentTypeIconProvider(), new ImageRenderer<>());
typeColumn.setCaption("Guia").setMaximumWidth(80);
typeColumn.setStyleGenerator(cs -> FWVad.STYLE_ALIGN_CENTER);
typeColumn.setDescriptionGenerator(gvo -> {
  return (gvo.getVO().getType() == null ? "" : FWBundle.get(gvo.getVO().getType()));
});
</syntaxhighlight>}}
{{java|Exemplo Coluna Utilizando a InnerClass|<syntaxhighlight lang="java">
Column<GVO<ItemCategoryVO>, ThemeResource> freezeColumn = moGrid.addColumn(vo -> {
  if (vo.getVO().getFreezePricePolicy() != FreezePricePolicy.NONE) {
    return new ThemeResource("icon/freeze_24.png");
  }
  return null;
}, new ImageRenderer<>());
freezeColumn.setCaption("Permite Itens").setMaximumWidth(80);
freezeColumn.setStyleGenerator(cs -> FWVad.STYLE_ALIGN_CENTER);
freezeColumn.setDescriptionGenerator(gvo -> {
  switch (gvo.getVO().getFreezePricePolicy()) {
    case MANUAL:
      return FWBundle.get("HLP000084");
    case NONE:
      return "";
  }
  return "";
});
</syntaxhighlight>}}
</syntaxhighlight>}}


Edição atual tal como às 22h04min de 30 de novembro 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.

Colunas com Ícones

Para criar uma coluna que apresente ícones/imagens ao invés do seu conteúdo, é possível criar um IconProvider como no exemplo abaixo. Criar o IconProvider é recomendado quando vamos exibir o ícone do status em diversas partes do sistema, assim, quando novos valores forem acrescentados, a manutenção só será necessária em uma única classe. Para colunas mais rápidas de status ou de pouca reutilização, é possível implementar uma inner class como no segundo exemplo.


Também é recomendável criar um DescriptionGenerator para indicar para o usuário o que o ícone significa, principalmente caso o ícone não seja tão intuitivo para o usuário.

Exemplo Coluna Utilizando o IconProvider 
final Column<GVO<BillPaymentVO>, ThemeResource> typeColumn = moGrid.addColumn(new BillPaymentTypeIconProvider(), new ImageRenderer<>());
typeColumn.setCaption("Guia").setMaximumWidth(80);
typeColumn.setStyleGenerator(cs -> FWVad.STYLE_ALIGN_CENTER);
typeColumn.setDescriptionGenerator(gvo -> {
  return (gvo.getVO().getType() == null ? "" : FWBundle.get(gvo.getVO().getType()));
});


Exemplo Coluna Utilizando a InnerClass 
Column<GVO<ItemCategoryVO>, ThemeResource> freezeColumn = moGrid.addColumn(vo -> {
  if (vo.getVO().getFreezePricePolicy() != FreezePricePolicy.NONE) {
    return new ThemeResource("icon/freeze_24.png");
  }
  return null;
}, new ImageRenderer<>());
freezeColumn.setCaption("Permite Itens").setMaximumWidth(80);
freezeColumn.setStyleGenerator(cs -> FWVad.STYLE_ALIGN_CENTER);
freezeColumn.setDescriptionGenerator(gvo -> {
  switch (gvo.getVO().getFreezePricePolicy()) {
    case MANUAL:
      return FWBundle.get("HLP000084");
    case NONE:
      return "";
  }
  return "";
});

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=1375”