What’s the best approach to showing a file in my webapp in a window? In particular, I’m trying to load the contents of a CSS file for viewing.
I am using a Link now, which was simple to code and use, but the FF4 browser window is oddly unable to scroll with the mouse wheel, for example, and has no scrollbars. Scrolling seems to be limited to using my cursor keys.
In IE9, it opens the file like a download in Notepad, which works fine, I suppose, though it feels clunky.
But in Chrome it looks fine, like how FF4 works, but with scrollbars and the ability to use the mouse wheel.
What might cause this? Is there a recommended way to just use a Window and load it with the file’s contents – it might actually have the nicest UI look as it would be consistent with the other windows we use.
How about putting the file contents in a Label and showing that in the window? This approach does require you to read the file in the application, but since it’s a local file that’s probably not too large, it might not be a problem.
If you try this, Label.CONTENT_PREFORMATTED probably works best for CSS.
Thanks for the tip. I’m still struggling to get the right combination to open a window that basically is sized 800x600 so that the contents of my CSS will allow for scrollbars as necessary. Currently, this seems to work, but it feels odd…that is, I have sized my Window, but for the vertical layout, using 100% won’t work, and if set to 600px, then it clips the contents, so I just picked a value that was sure to be big enough and that seems to work.
Window w = new Window("caption");
w.center();
w.setWidth(800, UNITS_PIXELS);
w.setHeight(600, UNITS_PIXELS);
Label label = new Label();
label.setContentMode(Label.CONTENT_PREFORMATTED);
label.setValue( vaadinApp.getEsfapp().getServletResourceAsString("/static/esf/esf.css") );
VerticalLayout wLayout = new VerticalLayout();
wLayout.setWidth(1800, UNITS_PIXELS);
wLayout.addComponent(label);
w.setContent(wLayout);
vaadinApp.addWindowToTopLevelWindow(getWindow(),w);