Links in integrated html files do not work

Hello everyone,

I’d like to include help contents to my vaadin application. The help contents is given as a bunch of html files referencing each other.

How can I include the htmls into my Vaadin app such that all links between them are still working?

What I tried so far is that I copied all html files into WebContent/VAADIN/themes/myTheme/layouts and tried to display one of the htmls using CustomLayout.
This worked fine but clicking on a reference to one of the other htmls does not change the contentCustomLayout to the referenced html.
So what I did is that I used vaadin ActiveLink and replaced a reference in the html file by a location “uploader”. Then I added a listener to the ActiveLink that updates the layout :

public class HelpContentsWindow extends Window{

private CustomLayout layout;

public HelpContentsWindow() {
	super("Help contents");
	center();
	setWidth("90%");
	setHeight("90%");
	
	VerticalLayout layoutWrapper = new VerticalLayout();
	layoutWrapper.setMargin(true);
	
	layout = new CustomLayout("nameOfHelpContentStartPageHtmlFile");
	ActiveLink link = new ActiveLink();
	link.setCaption("link");
	layout.addComponent(link, "uploader");
	composerLink.addListener(new LinkActivatedListener() {

		@Override
		public void linkActivated(LinkActivatedEvent event) {
			CustomLayout tmp = layout;
			layout = new CustomLayout("nameOfReferencedHtmlFile");
			replaceComponent(tmp, layout);
		}
		
	});
	layoutWrapper.addComponent(layout);
	
	setContent(layoutWrapper);
	
}

}

This did the trick but it is quite cumbersome to replace each reference by an ActiveLink. Besides it is not very elegant and I’m hoping that there is a better solution to my problem. Do you know any?

Looking forward to your replies. Thank you very much in advance!

Best regards
Tina

Try using ThemeResource with Embedded of type Browser; this will breate an iframe for the content, in which navigation should work.

Thank you very much for your reply. Using ThemeResources with Embedded to display the file works fine.

I’m still struggeling with the navigation links. Can you tell me how to adapt the references in the html files? To which directory should the references be relative to?
Should it be the directory where the currently displayed html is stored? Since I get HTTP Status 404 : The requested resource () is not available.

Just noticed that it’s probably an issue on how to serve static content with vaadin. So I will adapt my web xml and see if that works.

Everything inside the theme folder is public, so relational links should work. Relative links in HTML always start from the same folder the displayed HTML is in.

Thanks