Grid - Histórico de revisão

Rodrigogml: /* Colunas com Ícones */

2021-11-30T22:04:18Z

Colunas com Ícones

@@ Linha 69: / Linha 69: @@
 == 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.
+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.
-{{java|Exemplo Coluna com Ícones|<syntaxhighlight lang="java">
 final Column<GVO<BillPaymentVO>, ThemeResource> typeColumn = moGrid.addColumn(new BillPaymentTypeIconProvider(), new ImageRenderer<>());
 typeColumn.setCaption("Guia").setMaximumWidth(80);
@@ Linha 77: / Linha 80: @@
 typeColumn.setDescriptionGenerator(gvo -> {
    return (gvo.getVO().getType() == null ? "" : FWBundle.get(gvo.getVO().getType()));
 });
 </syntaxhighlight>}}

Rodrigogml: /* Colunas com Ícones */

2021-11-30T20:26:59Z

Colunas com Ícones

← Edição anterior		Edição das 20h26min de 30 de novembro de 2021
Linha 71:		Linha 71:
	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.		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.

	{{java\|Exemplo Coluna ~~Customizada~~\|<syntaxhighlight lang="java">		{{java\|Exemplo Coluna com Ícones\|<syntaxhighlight lang="java">
	final Column<GVO<BillPaymentVO>, ThemeResource> typeColumn = moGrid.addColumn(new BillPaymentTypeIconProvider(), new ImageRenderer<>());		final Column<GVO<BillPaymentVO>, ThemeResource> typeColumn = moGrid.addColumn(new BillPaymentTypeIconProvider(), new ImageRenderer<>());
	typeColumn.setCaption("Guia").setMaximumWidth(80);		typeColumn.setCaption("Guia").setMaximumWidth(80);

Rodrigogml: /* Colunas */

2021-11-30T20:18:16Z

Colunas

← Edição anterior		Edição das 20h18min de 30 de novembro de 2021
Linha 66:		Linha 66:

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

			{{java\|Exemplo Coluna Customizada\|<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>}}

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

Rodrigogml: /* Colunas */

2021-07-21T21:08:43Z

Colunas

← Edição anterior		Edição das 21h08min de 21 de julho de 2021
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 =

Rodrigogml: /* Colunas com Ícones/Imagens */

2021-07-21T20:55:40Z

Colunas com Ícones/Imagens

← Edição anterior		Edição das 20h55min de 21 de julho de 2021
Linha 41:		Linha 41:
	}, new ImageRenderer<>());		}, new ImageRenderer<>());
	</syntaxhighlight>}}		</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>
			}}

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

Rodrigogml: /* Colunas com Objeto */

2021-07-21T20:28:19Z

Colunas com Objeto

← Edição anterior		Edição das 20h28min de 21 de julho de 2021
Linha 26:		Linha 26:
	</syntaxhighlight>}}		</syntaxhighlight>}}

	=== Colunas com ~~Objeto~~ ===		=== 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.

	{{java\|Exemplo Coluna com Objeto\|<syntaxhighlight lang="java">		{{java\|Exemplo Coluna com Objeto\|<syntaxhighlight lang="java">
	final Column<GVO<CertificateVO>, ~~Object~~> colValidation = grid.addColumn(gvo -> {		final Column<GVO<CertificateVO>, ThemeResource> colValidation = grid.addColumn(gvo -> {
	~~Embedded emb~~ = null;		ThemeResource tres = null;
	if (BUDateTime.isInsidePeriod(FW.getDateTime(), gvo.getVO().getValidityStart(), gvo.getVO().getValidityEnd())) {		if (BUDateTime.isInsidePeriod(FW.getDateTime(), gvo.getVO().getValidityStart(), gvo.getVO().getValidityEnd())) {
	~~emb~~ = ~~new Embedded("Certificado Válido",~~ new ThemeResource("icon/success_24.png"));		tres = new ThemeResource("icon/success_24.png");
	} else {		} else {
	~~emb~~ = ~~new Embedded("Certificado Expirado",~~ new ThemeResource("icon/cancel_24.png"));		tres = new ThemeResource("icon/cancel_24.png");
	}		}
	return ~~emb~~;		return tres;
	});		}, new ImageRenderer<>());
	</syntaxhighlight>}}		</syntaxhighlight>}}

Rodrigogml: Criou página com '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...'

2021-07-21T20:07:44Z

Criou página com '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...'

Página nova

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

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

{{java|Exemplo Coluna Customizada|<syntaxhighlight lang="java">
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 "";
});
</syntaxhighlight>}}

=== Colunas com Objeto ===

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.

{{java|Exemplo Coluna com Objeto|<syntaxhighlight lang="java">
final Column<GVO<CertificateVO>, Object> colValidation = grid.addColumn(gvo -> {
Embedded emb = null;
if (BUDateTime.isInsidePeriod(FW.getDateTime(), gvo.getVO().getValidityStart(), gvo.getVO().getValidityEnd())) {
emb = new Embedded("Certificado Válido", new ThemeResource("icon/success_24.png"));
} else {
emb = new Embedded("Certificado Expirado", new ThemeResource("icon/cancel_24.png"));
}
return emb;
});
</syntaxhighlight>}}

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