How to link the CSS file to HTML in GWT
Question
In my GWT application on client side I am generating a string that contains HTML content and passing it to a function which opens it in new tab. I have written a CSS file to style the HTML content and given a link to it. But my HTML file is not getting styled.
public void writeHtml(){
StringBuffer html = new StringBuffer();
html.append("<!DOCTYPE html>");
html.append("<html lang=\"en\">");
html.append("<head>");
html.append("<title>Hello World</title>");
html.append("<meta charset=\"utf-8\">\n" +
"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n");
html.append("<link href=\"StyleSheet.css\" rel=\"stylesheet\" type=\"text/css\">");
html.append("</head>");
html.append("<body>\n" +
"\n" +
"<h1>This is a heading</h1>\n" +
"<p>This is a paragraph.</p>\n" +
"\n" +
"</body>\n" +
"</html>");
openPrintWindow(html.toString());
}
public native void openPrintWindow(String contents) /*-{
var printWindow = window.open("", "PrintWin", false);
printWindow.document.open("text/html","replace");
if (printWindow && printWindow.top) {
printWindow.document.write(contents);
} else {
alert("The print feature works by opening a popup window, but our popup window was blocked by your browser. If you can disable the blocker temporarily, you'll be able to print here. Sorry!");
}
}-*/;
CSS File - StyleSheet.css
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
So, what is problem and where am I going wrong?
2 answers
solution1
0 2019-06-12 07:45:09
You wrote html..append(""); instead of html.append();
Does it answer your problem ?
solution2
0 2019-06-12 23:30:57
In one of your comments you wrote:
Both the files are present in the same folder. So, I guess the path is correct.
That's not true. You need to distinguish your source folder from public folder. It would be very unsafe if you could link files in source folder and make them available for download.
You should read about Standard Directory and Package Layout . There you'll find:
src folder - contains production Java source
war folder - your web app; contains static resources as well as compiled output
That means, that you need to put your StyleSheet.css file in the war folder.
After copying the StyleSheet.css file to the war folder (and fixing some typos in the code you've posted - see my edit) I got this as a proof that it works:
As further reading I suggest Public Path part of the Modules: Units of configuration documentation.
After saying all the above: it would be much easier if you simply create a static html file in the war folder and open a new window with a link to this file as a parameter.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.