vaadin table/grid Image display

VO class에 String으로 저장된 Image file명으로 Table/Grid에 Image를 출력하고자 할 경우

CellStyleGenerator를 구현하면 된다.

 

 

Grid의 경우 추가적으로 Renderer를 설정해야 하며,

다음은 코드 일부다

grid.getColumn("image").setRenderer(new ImageRenderer(),new Converter<ThemeResource, String>(){

	@Override
	public String convertToModel(ThemeResource value, Class<? extends String> targetType, Locale locale)
			throws ConversionException {
		logger.debug("{}", value.getResourceId());
		return null;
	}

	@Override
	public ThemeResource convertToPresentation(String value, Class<? extends ThemeResource> targetType, Locale locale)
			throws ConversionException {
		if(value==null)
			return null;
		else
			return new ThemeResource("img/"+value);
	}

	@Override
	public Class<String> getModelType() {
		return String.class;
	}

	@Override
	public Class<ThemeResource> getPresentationType() {
		return ThemeResource.class;
	}

});
//grid.setStyleName("v-round-image-grid");
grid.setCellStyleGenerator(new Grid.CellStyleGenerator() {

	@Override
	public String getStyle(CellReference cell) {
		if(cell.getPropertyId() != null && cell.getPropertyId().toString().equals("image")) {
			return "imagecol";
		}
		return null;
	}
});

grid column에 적용될 css

 .imagecol {
 	padding : 5px 0 0 0;
 	vertical-align:bottom;
 }
 .imagecol img {
 	width: 25px;
 	height: 25px;
 	border-radius: 29px;
 	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
 	display: block;
 	vertical-align:middle;
 	margin: 0 auto 0.3em;
 	border: 1px solid #c5c5c5;
 }