Grid

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, é necessário criar um IconProvider como no exemplo abaixo. 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 com Ícones 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())); });

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.