Using Spring @Component on a @Route causing Flows @Id to fail

Hello All,

I’m going to be making lots of custom views for an app and I want to create previews for each view that will be displayed on a opening view.
So I thought it would be best to have a entire package dedicated to these views and with the help of an interface and spring, get the encapsulated preview from a method in the @Route class. For this I need to use two annotations together, @Route and @Component.

But I ran in to a trick that I hacked around to resolve so I’m wondering what suggestions you all may have on my structure and methodology and also as to what might be the cause of this error.

I have a MainLayout at the route Route(“”) that uses a few PolymerElements and I also have a few subroutes extending Div

@Route("")
class MainLayout extends Div implements RouteLayout{

	@Autowire
	List<ImagePreviewProvider> allImagePreviewProvider;
	
	MainLayout(){
	
		ImagePreviewElement ipe = new ImagePreviewElement();
		ipe.setPhoto(allImagePreviewProvider.get(0).getPreviewImage());
		add(ipe);
	
	}
	
	

}
@Tag("image-preview-element")
@HTMLImport(image-preview-element.html);
class ImagePreviewElement extends PolymerTemplate<TemplateModel>{

	@Id("photo")
	Div photo;
	
	public void setPhoto(Image img){
		photo.add(img);
	}
}

@Component
@Route(value = "fullimagesets/set1", layout=MainLayout.class)
class Set1 extends Div implements ImagePreviewProvider{

	@Override
	public Image getPreviewImage(){
	
		return new Image("test.png");
	
	}

}

I’ve set up the Dom-Module correctly so don’t worry about the HTML.

My problem is this dosen’t work. Everything seems to work fine but the problem is at the point where
ImagePreviewElement setPhoto(Image img) adds the image to the @Id(“photo”). Nothing is added to the DOM structure sent through to the client.

But after a massive hack around the problem was fixed by changing the Set1 class to below,


@Tag("div")
@Component
@Route(value = "fullimagesets/set1", layout=MainLayout.class)
class Set1 extends com.vaadin.flow.component.Component implements ImagePreviewProvider{
}

Note the smallest change being from extends Div to extends Component and use of an @Tag("div).

I’ve tried looking into the router code but I can’t see where the error is occuring.

Thanks everyone.

EDIT and I didn’t think of consequences for @Scope. This method is causing errors if opened by two browsers.
@VaadinSession and @UISession don’t work as the @Route() causes the class to be created before the Session has started.
Using @Sessionscope works. What will be the implications here?

No worries,

I ended up separating the Route from the Component. It means I need to add two classes for each ImagePreviewProvider I create. And now the Scope issue isn’t a problem.