Listas e imagens: ListView

Nessa rápida postagem iremos falar sobre imagens dentro das ListView do JavaFX.

A ListView

A classe javafx.scene.control.ListView permite mostrar listas de algum objeto e também que seja selecionado um dos items. A ListView é um Node. Ou seja, você pode adicionar ela em qualquer um dos painéis que já falamos aqui e assim mostrar a lista na sua aplicação. Veja abaixo um exemplo de ListView:






Como as tabelas, temos um método getItems que permite você acessar os itens e adicionar novos. A lista pode ser vertical, como acima, ou horizontal usando o método lista.setOrientation(Orientation.HORIZONTAL). Um exemplo:

Customizando ListView 

Cada item é adicionado em uma ListCell<TIPO>, que você pode customizar. Uma forma simples de customizar é criando sua própria ListCell (uma classe que estende de ListCell) e sobreescrever o método updateItem. Ao sobreescrever o método, não se esqueça de chamar super.updateItem e seja feliz mexendo nas configurações da célula. Importante dizer que a célula pode ter o texto mudado e também o graphics, ou seja, você pode configurar uma imagem e o texto de acordo com o objeto que você colocou no TIPO.

O TIPO é o seguinte: Uma ListCell é parametrizada, ou seja, você informa o tipo de objeto que ela aceita. Assim você vai ter erros se tentar inserir outros tipos. Ou seja, se a sua lista é do tipo String, você tem erros ao inserir Integer nessa lista. O mesmo vale para a ListCell, você cria uma ListCell para o TIPO que escolher. Por fim, o tipo vale também para tipos customizados da sua aplicação.

Agora que você criou sua célula, como você informa que quer usar ela na sua lista? Bem, a resposta é simplesmente informar uma fábrica de células usando o método setCellFactory. Não se apavore, com Java 8 você simplesmente usa o seguinte: lista.setCellFactory(param -> new MinhaListCell())

Um exemplo com imagem

O código abaixo esclarece tudo que mencionei:

	// aqui a gente cria a nossa lista e seta o tipo de célua
	ListView<Alderman> aldermenList = new ListView<>();
	aldermenList.setOrientation(Orientation.HORIZONTAL);
	aldermenList.setCellFactory(param -> new AldermanListCell());
	aldermenList.setPrefHeight(220);
	aldermenList.getItems().setAll(service.aldermen());
	// essa classe mostra nossa implementação de ListCel
	import org.fxapps.temis.model.Alderman;
	import org.fxapps.temis.ui.cache.ImageCache;
	import javafx.geometry.Pos;
	import javafx.scene.control.ContentDisplay;
	import javafx.scene.control.ListCell;
	import javafx.scene.image.Image;
	import javafx.scene.image.ImageView;
	public class AldermanListCell extends ListCell<Alderman> {
	@Override
	protected void updateItem(Alderman item, boolean empty) {
	super.updateItem(item, empty);
	Image image = ImageCache.noPhoto();
	if (item == null) {
	setGraphic(photo(image));
	setText("");
	return;
	}
	if (item.getPhoto() != null) {
	image = ImageCache.saveImageIfAbsent(item.getEmail(), item.getPhoto());
	}
	setGraphic(photo(image));
	setText(item.getName());
	setGraphicTextGap(10);
	setAlignment(Pos.CENTER);
	setContentDisplay(ContentDisplay.TOP);
	setPrefWidth(200);
	}
	static final ImageView photo(Image image) {
	ImageView imageView = new ImageView(image);
	imageView.setFitWidth(120);
	imageView.setFitHeight(150);
	imageView.setStyle("-fx-effect: dropshadow(three-pass-box, rgba(0,0,255,0.8), 30, 0, 0, 0);");
	return imageView;
	}
	}

view raw ExemploListCell.java hosted with ❤ by GitHub

Conclusão

Falamos brevemente de ListCell. Na verdade o objetivo dessa postagem é preparar terreno para a próxima que fala da aplicação que mostramos nos screenshots - até lá!