I am evaluating Thymeleaf and Flying Saucer for pdf generation from templates, and I am having a problem with applying css to my Thymeleaf template. I already read the relevant questions & answers here, here, and here; but none of the suggested solutions fixed my problem.
This is how my resources folder looks like:
So I am using the default directories that Spring will look for. And that's how the head tag looks like in my template.html:
<head>
<title>Spring Boot and Thymeleaf Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="../static/css/style.css" th:href="#{/css/style.css}"/>
</head>
If I inline my css in template.html then the generated pdf file will be styled properly (so there shouldn't be a problem with how I generate the pdf). However, when I try to link to the css file as shown above the generated pdf is not styled (so the css is not applied).
Lastly, I can access my css file at http://localhost:8080/css/style.css, so there doesn't seem to be a problem with Spring serving the static content.
For completeness, this is how I generate the pdf:
private final SpringTemplateEngine templateEngine;
private final Log log;
#Autowired
public PdfGenerator(SpringTemplateEngine templateEngine) {
this.templateEngine = templateEngine;
log = LogFactory.getLog(getClass());
}
public void generate(HttpServletRequest servletRequest, HttpServletResponse servletResponse, ServletContext servletContext) {
// Parse the pdf template with Thymeleaf
Locale locale = getLocale(servletRequest);
WebContext context = new WebContext(servletRequest, servletResponse, servletContext, locale);
context.setVariable("user", buildDummyUser());
context.setVariable("discounts", buildDummyDiscounts());
String html = templateEngine.process("template", context);
// Create the pdf with Flying Saucer
try (OutputStream outputStream = new FileOutputStream("generated.pdf")) {
ITextRenderer renderer = new ITextRenderer();
renderer.setDocumentFromString(html);
renderer.layout();
renderer.createPDF(outputStream);
} catch (IOException | DocumentException e) {
log.error("Error while generating pdf", e);
}
}
I am using WebContext instead of Context because I was getting the following error with Context:
org.thymeleaf.exceptions.TemplateProcessingException: Link base "/css/style.css" cannot be context relative (/...) unless the context used for executing the engine implements the org.thymeleaf.context.IWebContext interface
What am I missing here, why is my style.css not applied to template.html?
I had same problems and I was also trying to use thymeleaf template resolver for pdf generation. I did lots research on thymeleaf and spring framework, I tried WebContext, I tried HttpServletRequest, I tried some of Spring Thymeleaf integration solutions it was not working either. So I think it was not syntax error, and I finally end up with using absolute path instead of relative.
Url for reference
Here the reason with my assumption, lets say our resources are served on localhost:8080/myapp/css/style.css. And the relative path to request resource is really ups to what context it relatives to.
For eaxmple a normal thymeleaf model Veiw, which return as html pages on browser for client, so the context in that case would be the request hostname, port and application context(eg: localhost:8080/myapp). And relative path will be based on that. So if relative path is /css/style.css, context + relative path will result to be localhost:8080/myapp/css/style.css
Unlike web context, in our case, offline template is on server backend, so the context I assume would be the server running context, which would be the local server path + appcontext(eg: D:/myServer/apps/myapp), relative path /css/style.css on this would be D:/myServer/apps/myapp/css/style.css, this is not make sense. In order to use static resources, I have to pass it's absolute path.
I started use :
<link rel="stylesheet" type="text/css" th:href="#{http://localhost:8080/myapp/css/style.css}"/>
It's working fine but what if there are multiple host names or server is running on a proxy, then this is going to be a hard coded solution. It's better to know what is the real base url the user is requesting. So we can't really get rid off HttpSevletRequest.
Here is my code:
1.Config resource handler:
#Override
public void addResourceHandlers(final ResourceHandlerRegistry registry) {
registry.addResourceHandler("/css/**")
.addResourceLocations("classpath:/css/")
.setCachePeriod(31556926);
}
Get base url from HttpServletRequest, you can inject it in method or autowired in your service class, or get from RequestContextHolder. I write this in my Service class:
private static String getCurrentBaseUrl() {
ServletRequestAttributes sra = (ServletRequestAttributes)RequestContextHolder.getRequestAttributes();
HttpServletRequest req = sra.getRequest();
return req.getScheme() + "://" + req.getServerName() + ":" + req.getServerPort() + req.getContextPath();
}
This is the place I use template engine in my class:
Context context = new Context();
context.setVariable("variales", variables);
context.setVariable("baseUrl", getCurrentBaseUrl());
String content = springTemplateEngine.process("myTemplate",context);
In my template, I use absolute css url like this:
<link type="stylesheet" th:src="#{|${baseUrl}/css/style.css|}" />
Syntax looks fine so the problem is not with the syntax.
Also you cannot use #{...} syntax without an IWebContext interface so You are getting this exception.
I had a similar problem - my css was not applied to my template page.
My problem was that the css file was in css sass format
.table
margin: 0 0 40px 0
when I convert it to the normal css format like
.table {
margin: 0 0 40px 0;
}
it worked
I solved this problem by changing the path structure in href. I had the same directory structure as you (html files are in templates doc, css files are in static doc).
<head>
<title>Spring Boot and Thymeleaf Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="/css/style.css"/>
</head>
It might help you to apply css to your html page.
I found a lazy man's way of taking care of this. It works, with a very simple approach. The 'inserted' fragment is just a CSS style tag in the body of a simple HTML document. I place this in the HEAD of my target file, right where I would have put the LINK REL tag:
<th:block th:insert="std-reports/std-reports-css-fragment.html :: style"></th:block>
I am currently using JxBrowser 6.19.1 and I would like to ask if it is possible to set a variable value when I first start loading a page, by using onStartLoadingFrame. Then I am going to use that data in the page.
For example:
final JFrame frame = new JFrame("Hello World!");
final Browser browser = new Browser();
BrowserView view = new BrowserView(browser);
frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
frame.add(view, BorderLayout.CENTER);
frame.setSize(400, 300);
frame.setVisible(true);
browser.addLoadListener(new LoadAdapter() {
#Override
public void onStartLoadingFrame(StartLoadingEvent event) {
browser.executeJavaScriptAndReturnValue("var data = 1"); // does not work every single time, real question
}
});
browser.loadURL("echo.html");
where my echo.html will be something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>Echo Page</h1>
<script>
alert(data);
</script>
</body>
The question comes, sometimes it prompt the alert, sometimes doesn't. Does anyone know why? (Due to Multitheading?) Is that any work around for this?
Hope someone can help me with that. Thanks.
If you need to execute some JavaScript code before any other JavaScript on the loaded web page is executed, then you should use the onScriptContextCreated JavaScript context event as shown below:
browser.addScriptContextListener(new ScriptContextAdapter() {
#Override
public void onScriptContextCreated(ScriptContextEvent event) {
event.getBrowser().executeJavaScript("var data = 1");
}
});
In this case, the data JavaScript variable will be set properly, and the script on the web page will always work as expected.
I am trying to create the menus in my _Layout page using a partial view called _Menus which reads from a Json file on my server. But I can't figure out how to call a partial view with a model from the layout page.
Here is the _Menu.cshtml page, which is in the Shared folder:
#model IEnumerable<LangSite_151209.Models.MenuItem>
<div id="menu" class="largescreen_show smallscreen_hide" data-display="flex">
<div id="menu_left" class="menu_item">
#foreach (var mainMenuItem in Model)
{
// A bunch of stuff with the model that draws the menu
}
</div>
</div>
Here is how I call it in the _Layout page:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta and script stuff -->
</head>
<body style="overflow:hidden;">
<div id="fg">
<div id="mobile_wrapper">
#Html.Partial("../Shared/_Menu")
</div>
</div>
<!-- A bunch of footer stuff that's irrelevant here -->
</html>
I have tried returning the partial view with a SharedController that opens the Json file and turns it into a model for the partial, as follows:
public class SharedController : Controller
{
// GET: Shared
[ChildActionOnly]
public ActionResult _Menu()
{
string filePath = HostingEnvironment.MapPath(#"~/App_Data/MenuItems.json");
StreamReader sr = new StreamReader(filePath);
string JsonString = sr.ReadToEnd();
JsonSerializerSettings settings = new JsonSerializerSettings
{
TypeNameHandling = TypeNameHandling.All
};
var menuItems = JsonConvert.DeserializeObject<List<MenuItem>>(JsonString, settings);
return View(menuItems.ToList());
}
}
But when I try this I get a NullReferenceException on the Model: "Object reference not set to an instance of an object." Apparently you can't pass a model to a partial that way. I know that the code that reads the Json object works because when I use it the same code on a regular (non-partial) page it passes the model correctly and the script draws the menu.
Normally if I want to pass a model to a partial I just put the model in the main page and pass it that way. But I don't know how to put a model in the _Layout. Is that how I should to it? Or is there a better way?
The line #Html.Partial("../Shared/_Menu") will not execute your _Menu action method. Your _Menu.cshtml partial view is strongly typed to a list of MenuItem's. So either you should explicitly pass it when calling the Html.Partial method or your the main view ( which is calling this partial) should be also typed to the same collection.
You should use Html.Action method instead of Html.Partial.
#Html.Action("_Menu", "Shared")
This will execute the _Menu action method and pass the needed data (list of MenuItem) to the corresponding partial view.
I'm using Mojarra 2.1 and RichFaces.
I have the following action method:
public String doSave() {
//do some
return "someView";
}
invoked by cliccking the
<a4j:commandButton action="#{theBean.doSave}" />
and the view-file someView.jspx. But after the action method has invoked I'm redirected to the appropriate view, but lose all css-styles in that view. Actually, the head tag of the page is empty:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
The someView page bounded to a session-scoped bean.
I have really no idea about what it can be tied with? Need some advice.
BTW, it works perfectly fine with h:commandButton. Is it a richFaces bug?
In my JavaFX project, I am trying to integrate the TinyMCE editor as a HTML rich text editor via WebView. Here is a demo app:
package tinydemo;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
public class TinyDemo extends Application {
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage primaryStage) {
primaryStage.setTitle("Demo");
WebView webView = new WebView();
webView.getEngine().load(TinyDemo.class.getResource("simple.html").toExternalForm());
StackPane root = new StackPane();
root.getChildren().add(webView);
primaryStage.setScene(new Scene(root, 500, 400));
primaryStage.show();
}
}
I am using Netbeans IDE, the package view is:
The content of simple.html :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Simple theme example</title>
<script type='text/javascript' src='jquery-1.5.2.min.js'></script>
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var wewe = document.getElementById('wewe');
wewe.innerHTML += '<br/>protocol: '+ document.location.protocol;
tinyMCE.init({
mode : "textareas",
theme : "simple"
});
});
</script>
</head>
<body>
<div id="wewe"></div>
<h3>Simple theme example</h3>
<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%">
This is some example text that you can edit inside the <strong>TinyMCE editor</strong>.
</textarea>
<script type="text/javascript">
if (document.location.protocol == 'file:') {
alert("The examples might not work properly on the local file system due to security settings in your browser. Please use a real webserver.");
}
</script>
</body>
</html>
Now, when I run the app from Netbeans, the TinyMCE editor loads successifully with the file protocol detected.
However, when I run the generated TinyDemo.jar from the command line under the folder dist, I get this:
Where TinyMCE editor is failed to load. I think the problem is absolute/relative path references of TinyMCE within jar, but could not resolve it. Any help is appreciated. Thanks.
According to this forum discussion thread relative resource loading currently only works correctly in the 2.1 developer preview of JavaFX and not in the 2.0GA version.
If, after upgrading to the 2.1 preview version of JavaFX, loading resources from a jar still doesn't work, then you could deploy TinyMCE on the classpath but outside of the packaged jar so that it is loaded using (for example) the file or http protcols rather than the jar protocol. Or you can develop a custom protocol handler which loads resources from the jar as discussed in the referenced thread.