Greetings:
I am creating a file browser application that lets users look at HTML reports. I am using Vaadin 7.1.7. The application has a tree on the left and a Panel on the right with a Label in it. The Label is constructed like this:
Label docView = new Label("", ContentMode.HTML);I am displaying html files in the label when the user clicks on a file in the tree.
I am rewriting the urls in the HTML file to include URI Fragments pointing back to my application. I write the new file to a temp file and pass it to the docView label as a TextFileProperty like this:
HTMLRewriter.rewrite(contents, tempFile, protocol, server, uiName, port);
TextFileProperty prop = new TextFileProperty(tempFile);
docView.setPropertyDataSource(prop);So far, so good, since the file displays on the right hand side.
The problem is handling <img src=“” constructs in the file. The temp file is not located where the original html file is, since I don’t want to pollute my reports directory with massaged files. However, I can access the img src file in its original location and put a copy wherever is necessary. My solution is to put the img file in the same (temp) directory as the rewritten html file and make the relative url just point locally like this:
<img src="./tf_default.png" style="border:5px solid black" width="500px"></img>The problem is that the file does not display as expected. When I go to the temp directory, the img file is there next to the temp file containing my rewritten html file, and when I drag that rewritten html file into a browser, the img src is being used to display the image. The first attachment I have provided here (FileBrowsingRaw.PNG) is what the file looks like when browsed directly like this. The second attachment (FileBrowser.PNG) is what the file looks like in the application.
Note in the HTML example provided, I am making it relative, but I have also explicitly pointed to the file with file:/// and the exact path, with the same result.
Also, as a side note, the result shown is in Chrome. In Firefox the output is slightly different: The img src does not maintain the 500px size specified , but shrinks down to a 0-size area with the 5-pixel border.
In an attempt to narrow this issue down, I skipped my url rewriting step shown above, and just created the TextFileProperty from the contents directly (see line 2 of the snippet above)… This way the file is just the file that was used in the tree. That file’s img src still behaves the same way. Also, since I wasn’t chasing down temp files, I changed the img src portion of the original file to see if I could get it to work with file:/// references pointing explicitly to the file. This had the same results as well (browsed directly, it works, thru the Label, it doesn’t).
I also noticed that I am able to embed images in button descriptions like this:
tooButton.setDescription(
"<h2><img src=\"../VAADIN/themes/filebrowser/img/comment_yellow.gif\"/>"+
"A richtext tooltip</h2>"+
"<ul>"+
" <li>Use rich formatting with XHTML</li>"+
" <li>Include images from themes</li>"+
" <li>etc.</li>"+
"</ul>");
I don’t have to put images in my theme’s area on-the-fly to do this with my html file browser, do I?
Any ideas?
